/* Revenue setup + business screens — Stitch "Business Workspace — Products & Commissions".
   Class-scoped (.sb-*) so the same markup works in the admin sections and the business shell. */
.sb { font-family: var(--sh-font); color: var(--sh-on-surface); }
.sb .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.sb-sub { font-size: 12px; color: var(--sh-on-surface-variant); overflow-wrap: anywhere; }
.sb-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* KPI row */
.sb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.sb-kpi { position: relative; overflow: hidden; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sb-kpi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--sh-surface-high); }
.sb-kpi:first-child::before { background: var(--sh-primary-container); }
.sb-kpi.ok::before { background: var(--sh-ok); }
.sb-kpi.warn::before { background: var(--sh-secondary); }
.sb-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-kpi-lbl { font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); text-transform: uppercase; letter-spacing: .06em; }
.sb-kpi-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--sh-surface-low); color: var(--sh-primary); display: inline-flex; align-items: center; justify-content: center; }
.sb-kpi.ok .sb-kpi-ico { background: var(--sh-ok-bg); color: var(--sh-ok); }
.sb-kpi-val { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sb-kpi-note { font-size: 12px; color: var(--sh-on-surface-variant); }

/* Panels */
.sb-card { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.sb-pad { padding: 20px; }
.sb-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
.sb-card-hd h3, .sb-h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.sb-card-hd h3 .material-symbols-outlined, .sb-h3 .material-symbols-outlined { color: var(--sh-primary); font-size: 20px; }
.sb-h3 { margin: 8px 0 12px; }
.sb-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sb-search { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.sb-search .material-symbols-outlined { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sh-on-surface-variant); pointer-events: none; }
.sb-search input { width: 100%; box-sizing: border-box; padding-left: 36px !important; }
.sb-spacer { margin-left: auto; }
.sb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: var(--sh-surface-low); font-size: 11px; font-weight: 600; color: var(--sh-on-surface-variant); }

/* Buttons */
.sb .btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--sh-font); }
.sb .btn-sm { padding: 7px 12px; font-size: 12px; }
.sb .btn-primary { background: var(--sh-primary-container); color: var(--sh-on-primary-container); font-weight: 700; }
.sb .btn-primary:hover { background: var(--sh-primary); color: var(--sh-on-primary); }
.sb .btn-ghost { background: transparent; color: var(--sh-on-surface-variant); box-shadow: none; }
.sb .btn-ghost:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.sb .btn-secondary { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); }
.sb-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; background: var(--sh-surface-low); border-radius: 12px; width: fit-content; max-width: 100%; margin-bottom: 16px; }
.sb-tabs .btn { background: transparent; color: var(--sh-on-surface-variant); box-shadow: none; padding: 8px 14px; border-radius: 8px; }
.sb-tabs .btn:hover { background: var(--sh-surface-container); }
.sb-tabs .btn.btn-primary { background: var(--sh-surface-lowest); color: var(--sh-on-surface); box-shadow: var(--sh-shadow); }

/* Tables */
.sb-tablewrap { overflow-x: auto; }
.sb table.sb-table, .sb table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.sb table.sb-table th, .sb table.dt th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); text-transform: uppercase; letter-spacing: .06em; background: var(--sh-surface-low); white-space: nowrap; }
.sb table.sb-table td, .sb table.dt td { padding: 12px 16px; border-top: 1px solid var(--sh-surface-container); vertical-align: middle; }
.sb table.sb-table tbody tr:hover td { background: var(--sh-surface); }
.sb-empty { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; padding: 28px 18px; color: var(--sh-on-surface-variant); font-size: 13px; }
.sb .empty { padding: 24px 16px; text-align: center; color: var(--sh-on-surface-variant); font-size: 13px; }
.sb-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; white-space: nowrap; }

/* Item cell (icon tile + text) */
.sb-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-tile { width: 40px; height: 40px; border-radius: 8px; background: var(--sh-surface-high); color: var(--sh-primary); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-tile .material-symbols-outlined { font-size: 20px; }
.sb-tile.bot { background: var(--sh-on-surface); color: #fff; }
.sb-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sh-primary-container); color: var(--sh-on-primary-container); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-name { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.sb-money { font-weight: 700; white-space: nowrap; }
.sb-bounty { font-weight: 700; color: var(--sh-secondary); }

/* Pills (also remap the legacy .pill used by shared JS) */
.sb .pill, .sb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--sh-surface-container); color: var(--sh-on-surface-variant); }
.sb .pill-ok { background: var(--sh-ok-bg); color: var(--sh-ok); }
.sb .pill-warn { background: #fff4de; color: var(--sh-secondary); }
.sb .pill-info { background: var(--sh-surface-high); color: var(--sh-tertiary); }
.sb .pill-bot { background: var(--sh-on-surface); color: #fff; }
.sb .pill-err { background: var(--sh-error-container); color: var(--sh-error); }

/* Forms / rule editor */
.sb-form { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; margin-bottom: 16px; overflow: hidden; border-left: 3px solid var(--sh-primary-container); }
.sb-form-hd { padding: 14px 20px; background: var(--sh-surface-low); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.sb-form-hd .material-symbols-outlined { color: var(--sh-primary); }
.sb-form-body { padding: 20px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.sb-form-body.one { grid-template-columns: 1fr; }
.sb-sechead { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--sh-on-surface-variant); }
.sb-sechead .material-symbols-outlined { color: var(--sh-primary); }
.sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-form .fg, .sb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; }
.sb-form .fg + .fg, .sb-form .sb-grid + .fg { margin-top: 12px; }
.sb-form .fl { font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); text-transform: uppercase; letter-spacing: .04em; }
.sb-form .fi { width: 100%; box-sizing: border-box; border: none; padding: 9px 12px; font-size: 13px; font-family: inherit; background: var(--sh-surface-low); color: var(--sh-on-surface); border-radius: 8px; }
.sb-form textarea.fi { resize: vertical; }
.sb-rule { background: var(--sh-surface-low); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; align-content: start; }
.sb-preview { background: var(--sh-surface-lowest); border-radius: 10px; padding: 14px; box-shadow: var(--sh-shadow); }
.sb-preview .big { font-size: 22px; font-weight: 800; color: var(--sh-secondary); letter-spacing: -.02em; }
.sb-form-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 20px; background: var(--sh-surface-low); }
.sb-err { color: var(--sh-error); font-size: 12px; font-weight: 600; flex: 1 1 100%; }
.sb-checks { display: flex; gap: 8px; flex-wrap: wrap; }
.sb .sh-pill, .sb-check { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--sh-surface-low); font-size: 12px; font-weight: 600; cursor: pointer; }
.sb .sh-pill:hover, .sb-check:hover { background: var(--sh-surface-container); }

/* Business cards */
.sb-bizgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sb-biz { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sb-biz-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-biz-mark { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.sb-biz-stats { display: flex; gap: 8px; align-items: stretch; }
.sb-biz-stat { flex: 1; background: var(--sh-surface-low); border-radius: 8px; padding: 8px 10px; }
.sb-biz-stat b { display: block; font-size: 18px; font-weight: 800; }
.sb-biz-stat span { font-size: 11px; font-weight: 600; color: var(--sh-on-surface-variant); text-transform: uppercase; letter-spacing: .04em; }
.sb-iconbtn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--sh-on-surface-variant); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sb-iconbtn:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.sb-iconbtn.danger:hover { background: var(--sh-error-container); color: var(--sh-error); }

/* Sales desk cards */
.sb-sale { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.sb-sale-hd { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
.sb-sale-total { text-align: right; }
.sb-sale-total .big { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.sb-sale-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; background: var(--sh-surface-low); }
.sb-note { margin: 0; padding: 10px 20px; font-size: 12px; color: var(--sh-on-surface-variant); }
.sb-note.warn { background: #fff4de; color: var(--sh-secondary); }
.sb-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; background: #fff7e8; border-left: 3px solid var(--sh-primary-container); font-size: 13px; color: var(--sh-on-surface-variant); margin-bottom: 16px; }
.sb-banner .material-symbols-outlined { color: var(--sh-primary); }
.sb-lines { overflow-x: auto; }

/* KPI progress (agents screen) */
.sb-prog { height: 6px; width: 90px; border-radius: 999px; background: var(--sh-surface-container); overflow: hidden; margin-top: 4px; }
.sb-prog > i { display: block; height: 100%; border-radius: 999px; }
.sb-of { color: var(--sh-outline); font-weight: 500; }

/* Section chrome for the five admin sections */
#sec-businesses .sec-hdr, #sec-products .sec-hdr, #sec-salesdesk .sec-hdr, #sec-salesagents .sec-hdr, #sec-agents .sec-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-top: 24px; }
#sec-businesses .sec-hdr .btn, #sec-agents .sec-hdr .btn, #sec-salesagents .sec-hdr .btn { display: inline-flex; align-items: center; gap: 6px; }
#sec-agents .sec-hdr .btn-primary, #sec-businesses .sec-hdr .btn-primary { background: var(--sh-primary-container); color: var(--sh-on-primary-container); font-weight: 700; padding: 9px 16px; }
#sec-agents .sec-hdr .btn-primary:hover, #sec-businesses .sec-hdr .btn-primary:hover { background: var(--sh-primary); color: var(--sh-on-primary); }
.sb-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--sh-surface-low); border-radius: 12px; }
.sb-seg .btn { background: transparent !important; color: var(--sh-on-surface-variant) !important; box-shadow: none !important; padding: 8px 14px; }
.sb-seg .btn.on { background: var(--sh-surface-lowest) !important; color: var(--sh-on-surface) !important; box-shadow: var(--sh-shadow) !important; font-weight: 700; }

/* Business setup workspace (bizsetup.js) */
.bs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.bs-head-t { flex: 1; min-width: 160px; }
.bs-tabs { margin-bottom: 20px; flex-wrap: wrap; }
.bs-card-prog { display: flex; flex-direction: column; gap: 4px; }
.bs-kpi { text-align: left; border: none; cursor: pointer; font: inherit; color: inherit; }
.bs-kpi:hover { box-shadow: var(--sh-shadow), 0 0 0 2px var(--sh-primary-container); }
.bs-ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sh-primary-container) calc(var(--p) * 1%), var(--sh-surface-container) 0); position: relative; }
.bs-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sh-surface-lowest); }
.bs-ring b { position: relative; font-size: 13px; font-weight: 800; }
.bs-steps { display: flex; flex-direction: column; }
.bs-step { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--sh-surface-container); }
.bs-step.next { background: #fff9e8; }
.bs-step-ico { width: 32px; height: 32px; border-radius: 50%; background: var(--sh-surface-low); color: var(--sh-on-surface-variant); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bs-step.done .bs-step-ico { background: var(--sh-ok-bg); color: var(--sh-ok); }
.bs-step.next .bs-step-ico { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.bs-step-t { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.bs-mapcol { position: sticky; top: 12px; }
.bs-map { height: 520px; border-radius: 12px; overflow: hidden; box-shadow: var(--sh-shadow); background: var(--sh-surface-low); z-index: 0; }
.bs-legend { margin-top: 8px; }
.bs-listcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bs-terr { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; border-left: 4px solid var(--sh-primary-container); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.bs-terr.off { opacity: .55; }
.bs-terr-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.bs-terr-act { display: flex; align-items: center; gap: 4px; }
.bs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-form { margin-bottom: 4px; cursor: auto; }
.bs-form-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.bs-hint { display: flex; gap: 6px; align-items: center; }
.bs-swatches { display: flex; gap: 6px; padding-top: 6px; }
.bs-swatch { position: relative; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; }
.bs-swatch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bs-swatch i { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid transparent; }
.bs-swatch input:checked + i { border-color: var(--sh-on-surface); }
@media (max-width: 900px) { .bs-split { grid-template-columns: 1fr; } .bs-mapcol { position: static; } .bs-map { height: 320px; } }

/* Targets planner */
.bs-tgtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.bs-tgtile { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.bs-tgtile.wide { grid-column: 1 / -1; padding: 12px 16px; }
.bs-alloc { height: 10px; border-radius: 999px; background: var(--sh-surface-container); overflow: hidden; }
.bs-alloc i { display: block; height: 100%; background: var(--sh-primary-container); border-radius: 999px; transition: width .2s; }
.bs-alloc.full i { background: var(--sh-ok); }
.bs-alloc.over i { background: var(--sh-error); }
.bs-tgtools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-tgtools .fi { width: auto; padding: 6px 10px; }
.bs-tgtable td { vertical-align: middle; }
.bs-tg-company td { background: #fff9e8; }
.bs-money { display: flex; align-items: center; gap: 8px; max-width: 240px; }
.bs-money span { font-size: 11px; font-weight: 700; color: var(--sh-on-surface-variant); }
.bs-money .fi { width: 100%; box-sizing: border-box; border: none; padding: 9px 12px; font-size: 14px; font-weight: 600; font-family: inherit; text-align: right; border-radius: 8px; background: var(--sh-surface-low); color: var(--sh-on-surface); }
.bs-money .fi:focus { outline: 2px solid var(--sh-primary-container); }
.bs-money .fi.dirty { background: #fff4de; }
@media (max-width: 900px) { .bs-tgtiles { grid-template-columns: 1fr; } }

/* Businesses page (bizlist.js) */
#sec-businesses .bz-hdr { align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.bz-count { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 10px; border-radius: 999px; background: #fff0cc; color: var(--sh-secondary); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bz-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bz-search { position: relative; display: flex; align-items: center; }
.bz-search .material-symbols-outlined { position: absolute; left: 10px; font-size: 18px; color: var(--sh-on-surface-variant); pointer-events: none; }
.bz-search input, .bz-sel { border: none; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 10px; padding: 9px 12px; font: 600 13px var(--sh-font); color: var(--sh-on-surface); }
.bz-search input { padding-left: 34px; width: 220px; }
.bz-view { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); }
.bz-view button { border: none; background: transparent; border-radius: 8px; width: 34px; height: 32px; cursor: pointer; color: var(--sh-on-surface-variant); display: grid; place-items: center; }
.bz-view button.on { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.bz .material-symbols-outlined, .bz-hdr .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.bz { font-family: var(--sh-font); color: var(--sh-on-surface); display: flex; flex-direction: column; gap: 16px; }

.bz-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bz-kpi { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; padding: 16px 18px; border-top: 3px solid var(--sh-primary-container); display: flex; flex-direction: column; gap: 10px; }
.bz-kpi.green { border-top-color: var(--sh-ok); } .bz-kpi.slate { border-top-color: #4a5160; } .bz-kpi.blue { border-top-color: #9db7e8; }
.bz-kpi-top { display: flex; justify-content: space-between; align-items: center; }
.bz-kpi-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-on-surface-variant); }
.bz-kpi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff0cc; color: var(--sh-secondary); }
.bz-kpi.green .bz-kpi-ico { background: var(--sh-ok-bg); color: var(--sh-ok); } .bz-kpi.slate .bz-kpi-ico { background: #e8eaf0; color: #4a5160; } .bz-kpi.blue .bz-kpi-ico { background: #e4ecfa; color: #3a5fa8; }
.bz-kpi-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.bz-kpi-note { font-size: 12px; color: var(--sh-on-surface-variant); display: flex; align-items: center; gap: 6px; }
.dot.ok { width: 7px; height: 7px; border-radius: 50%; background: var(--sh-ok); display: inline-block; }

.bz-banner { display: flex; align-items: center; gap: 16px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; padding: 16px 20px; flex-wrap: wrap; }
.bz-banner-ico { width: 44px; height: 44px; border-radius: 50%; background: #fff0cc; color: var(--sh-secondary); display: grid; place-items: center; }
.bz-banner-t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bz-banner-t b { font-size: 15px; } .bz-banner-t span { font-size: 13px; color: var(--sh-on-surface-variant); }
.bz-banner-p { width: 220px; display: flex; flex-direction: column; gap: 6px; }
.bz-prog-l { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 8px; color: var(--sh-on-surface-variant); }
.bz-prog-l b, .bz-prog-l .ok { color: var(--sh-on-surface); font-weight: 700; } .bz-prog-l .ok { color: var(--sh-ok); display: inline-flex; align-items: center; gap: 4px; }
.bz-prog { height: 8px; border-radius: 999px; background: var(--sh-surface-container); overflow: hidden; }
.bz-prog i { display: block; height: 100%; background: var(--sh-primary-container); border-radius: 999px; }
.bz-prog.ok i { background: var(--sh-ok); }

.bz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 10px; padding: 10px 16px; font: 700 13px var(--sh-font); cursor: pointer; background: var(--sh-primary-container); color: var(--sh-on-primary-container); white-space: nowrap; }
.bz-btn:hover { background: var(--sh-primary); color: var(--sh-on-primary); }
.bz-btn.ghost { background: var(--sh-surface-low); color: var(--sh-on-surface); } .bz-btn.ghost:hover { background: var(--sh-surface-container); }
.bz-icon { width: 34px; height: 34px; border: none; background: transparent; border-radius: 8px; cursor: pointer; color: var(--sh-on-surface-variant); display: grid; place-items: center; }
.bz-icon:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); } .bz-icon.danger:hover { background: var(--sh-error-container); color: var(--sh-error); }
.bz-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

.bz-list { display: flex; flex-direction: column; gap: 12px; }
.bz-row { display: grid; grid-template-columns: 56px minmax(150px, 1.2fr) auto minmax(180px, 1.3fr) auto; align-items: center; gap: 20px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; padding: 18px 20px; }
.bz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bz-card { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; border-top: 3px solid var(--sh-primary-container); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.bz-card-top { display: flex; justify-content: space-between; align-items: center; }
.bz-mark { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.bz-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.bz-name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.bz-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--sh-surface-low); color: var(--sh-on-surface-variant); }
.bz-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bz-pill.active { background: var(--sh-ok-bg); color: var(--sh-ok); } .bz-pill.onboarding { background: #fff0cc; color: var(--sh-secondary); } .bz-pill.paused { background: #e8eaf0; color: #4a5160; } .bz-pill.unlinked { background: #fdecea; color: var(--sh-error); }
.bz-stats { display: flex; gap: 8px; }
.bz-stat { min-width: 64px; background: var(--sh-surface-low); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.bz-stat span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-on-surface-variant); } .bz-stat b { font-size: 20px; font-weight: 800; }
.bz-progwrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bz-sub { font-size: 12px; color: var(--sh-on-surface-variant); }
.bz-empty { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--sh-on-surface-variant); }
.bz-empty .material-symbols-outlined { font-size: 36px; color: var(--sh-primary); }
@media (max-width: 1180px) { .bz-row { grid-template-columns: 56px 1fr; } .bz-row .bz-stats, .bz-row .bz-progwrap, .bz-row .bz-actions { grid-column: 1 / -1; } .bz-row .bz-actions { justify-content: flex-start; } }
@media (max-width: 900px) { .bz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bz-banner-p { width: 100%; } .bz-search input { width: 100%; } }
@media (max-width: 520px) { .bz-kpis { grid-template-columns: 1fr; } }

/* Overview performance (bizsetup.js) */
.bs-perf { text-align: left; font-family: var(--sh-font); color: inherit; border-width: 3px 0 0; }
.bs-perf.bs-kpi { cursor: pointer; }
.bs-val { font-size: 26px; overflow-wrap: anywhere; }
.bs-chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.bs-link { border: none; cursor: pointer; font-family: var(--sh-font); } .bs-link:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); }
.bs-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.bs-pcard .sb-card-hd { padding-bottom: 8px; } .bs-pbody { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bs-pbody > * { width: 100%; box-sizing: border-box; } .bs-pbody > .btn { width: auto; }
.bs-big { font-size: 24px; font-weight: 800; letter-spacing: -.02em; } .bs-big small { font-size: 13px; font-weight: 600; color: var(--sh-on-surface-variant); letter-spacing: 0; }
.bs-track { position: relative; } .bs-track .bz-prog { height: 12px; }
.bs-plan { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--sh-on-surface); border-radius: 2px; transform: translateX(-1px); }
.bs-mini { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.bs-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bs-trio div { background: var(--sh-surface-low); border-radius: 10px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.bs-trio b { font-size: 20px; font-weight: 800; } .bs-trio span { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-on-surface-variant); }
.bs-plist { display: flex; flex-direction: column; } .bs-pl { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-top: 1px solid var(--sh-surface-container); }
.bs-pad { padding: 8px 0; }
@media (max-width: 900px) { .bs-two { grid-template-columns: 1fr; } }

/* Revenue Setup context bar + agent KPIs (bizctx.js, agentkpi.js) */
.bx-host { margin-bottom: 16px; }
.bx-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; padding: 10px 14px; font-family: var(--sh-font); }
.bx-biz { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bx-mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex-shrink: 0; }
.bx-biz-t { display: flex; flex-direction: column; min-width: 0; } .bx-biz-t b { font-size: 14px; } .bx-biz-t span { font-size: 11px; color: var(--sh-on-surface-variant); }
.bx-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; justify-content: center; }
.bx-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; padding: 8px 12px; border-radius: 10px; font: 600 12px var(--sh-font); color: var(--sh-on-surface-variant); cursor: pointer; }
.bx-pill:hover { background: var(--sh-surface-container); color: var(--sh-on-surface); } .bx-pill.on { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.bx-pill .material-symbols-outlined, .bx-setup .material-symbols-outlined, .bx-guard .material-symbols-outlined { font-size: 18px; }
.bx-badge { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--sh-error); color: #fff; font-size: 10px; font-weight: 800; display: inline-grid; place-items: center; }
.bx-setup { display: inline-flex; align-items: center; gap: 6px; border: none; background: var(--sh-surface-low); border-radius: 10px; padding: 8px 12px; font: 700 12px var(--sh-font); cursor: pointer; color: var(--sh-on-surface); }
.bx-setup:hover { background: var(--sh-surface-container); }
.bx-guard { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 14px; padding: 40px 20px; color: var(--sh-on-surface-variant); font-family: var(--sh-font); }
.bx-guard .material-symbols-outlined { font-size: 36px; color: var(--sh-primary); } .bx-guard b { color: var(--sh-on-surface); font-size: 16px; }
.bs-attn { margin-bottom: 16px; } .bs-attn .bz-banner-t { flex: 1 1 200px; }
.bs-alink { color: var(--sh-secondary); font-weight: 700; }
@media (max-width: 1000px) { .bx-nav { justify-content: flex-start; order: 3; flex-basis: 100%; } }

/* Ask hunters: find and contact (agentchat.js) */
.ac-hunt { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.ac-gate { display: flex; gap: 10px; align-items: flex-start; background: #fff4de; border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 12px; color: var(--sh-on-surface); }
.ac-gate .material-symbols-outlined { color: var(--sh-secondary); font-size: 20px; flex-shrink: 0; }
.ac-gate ul { margin: 4px 0 6px; padding-left: 18px; } .ac-gate li { margin: 2px 0; } .ac-gate span { color: var(--sh-on-surface-variant); }
.ac-scan { display: flex; gap: 8px; align-items: flex-start; background: var(--sh-surface-low); border-radius: 10px; padding: 8px 10px; margin-top: 8px; font-size: 12px; }
.ac-scan.ok { background: var(--sh-ok-bg); color: var(--sh-ok); } .ac-scan .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
@media (max-width: 600px) { .ac-hunt { grid-template-columns: 1fr; } }

@media (max-width: 1100px) {
  .sb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-form-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .sb-kpis { grid-template-columns: 1fr; }
  .sb-grid, .sb-grid.three { grid-template-columns: 1fr; }
  .sb-search { max-width: none; }
  .sb-sale-total { text-align: left; }
  .sb-tabs { width: 100%; }
}

/* Product workspace (productview.js) */
.pv-namebtn { all: unset; cursor: pointer; font-weight: 700; font-size: 14px; color: var(--sh-on-surface); overflow-wrap: anywhere; }
.pv-namebtn:hover, .pv-namebtn:focus-visible { color: var(--sh-secondary); text-decoration: underline; }
.pv-row { cursor: pointer; }
.pv-body { display: flex; flex-direction: column; gap: 4px; }
.pv-card { margin-bottom: 20px; }
.pv-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pv-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pv-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; background: var(--sh-surface-low); }
.pv-note.warn { background: #fff4de; color: var(--sh-secondary); }
.pv-note.ok { background: var(--sh-ok-bg); color: var(--sh-ok); }
.pv-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.pv-link { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 14px 16px; }
.pv-link:hover, .pv-link:focus-visible { background: var(--sh-surface-low); }
.pv-link .material-symbols-outlined { grid-row: span 3; color: var(--sh-primary); font-size: 28px; }
.pv-link b { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pv-link span:not(.material-symbols-outlined) { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-on-surface-variant); }
.pv-link em { font-style: normal; font-size: 12px; color: var(--sh-on-surface-variant); }
.pv-cols { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.pv-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pv-col-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--sh-surface-low); border-radius: 6px; overflow: hidden; }
.pv-col-bar i { display: block; width: 100%; background: var(--sh-primary-container); border-radius: 6px 6px 0 0; }
.pv-col-v { font-size: 11px; font-weight: 700; min-height: 14px; }
.pv-col-l { font-size: 11px; color: var(--sh-on-surface-variant); }
.pv-funnel { display: flex; flex-direction: column; gap: 10px; }
.pv-fr { display: grid; grid-template-columns: 110px minmax(0, 1fr) 170px; gap: 12px; align-items: center; font-size: 13px; }
.pv-fl { font-weight: 600; }
.pv-fbar { height: 14px; background: var(--sh-surface-low); border-radius: 7px; overflow: hidden; }
.pv-fbar i { display: block; height: 100%; background: var(--sh-primary-container); border-radius: 7px; }
.pv-fbar i.won { background: var(--sh-ok); }
.pv-fbar i.lost { background: var(--sh-outline-variant, #c9c4b5); }
.pv-fv { font-weight: 700; white-space: nowrap; text-align: right; }
.pv-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pv-step { display: inline-flex; flex-direction: column; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--sh-surface-low); }
.pv-step em { font-style: normal; font-weight: 500; font-size: 10px; color: var(--sh-on-surface-variant); }
.pv-arrow { color: var(--sh-on-surface-variant); }
.pv-num.zero { color: var(--sh-on-surface-variant); font-weight: 400; }
.pv-num.won { color: var(--sh-ok); }
.pv-ledger { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.pv-ledger div { background: var(--sh-surface-low); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pv-ledger span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-on-surface-variant); }
.pv-ledger b { font-size: 15px; }
.pv-ledger em { font-style: normal; font-size: 11px; color: var(--sh-on-surface-variant); }
.pv-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pv-prog { height: 8px; min-width: 90px; background: var(--sh-surface-low); border-radius: 4px; overflow: hidden; }
.pv-prog i { display: block; height: 100%; background: var(--sh-primary-container); }
.pv-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 20px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; }
.pv-empty .material-symbols-outlined { font-size: 36px; color: var(--sh-primary); }
.pv-empty span:not(.material-symbols-outlined) { max-width: 460px; font-size: 13px; color: var(--sh-on-surface-variant); }
@media (max-width: 1100px) { .pv-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pv-split { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pv-links { grid-template-columns: 1fr; } .pv-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-fr { grid-template-columns: 80px minmax(0, 1fr) 130px; } }

/* Agent work view (agentwork.js) */
.aw-list { display: flex; flex-direction: column; }
.aw-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 20px; border-top: 1px solid var(--sh-surface-container); }
.aw-row:first-child { border-top: none; }
.aw-ico { width: 32px; height: 32px; border-radius: 8px; background: var(--sh-surface-low); display: grid; place-items: center; color: var(--sh-primary); }
.aw-warn .aw-ico { background: #fff4de; color: var(--sh-secondary); }
.aw-ok .aw-ico { background: var(--sh-ok-bg); color: var(--sh-ok); }
.aw-top { font-size: 13px; }
.aw-body { margin-top: 2px; overflow-wrap: anywhere; }
.aw-when { white-space: nowrap; }
.aw-idle { color: var(--sh-secondary); font-weight: 600; }
.aw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.aw-snip { max-width: 420px; font-size: 12px; overflow-wrap: anywhere; }
.aw-err { color: var(--sh-error); font-weight: 600; margin-top: 2px; }
.aw-banner { margin-bottom: 16px; }

/* Agent chat (agentchat.js) and Ask hunters (askhunters.js) */
.ac { display: flex; flex-direction: column; gap: 12px; }
.ac-thread { display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; padding: 16px 20px; background: var(--sh-surface-low); border-radius: 12px; }
.ac-msg { display: flex; flex-direction: column; max-width: 86%; gap: 2px; }
.ac-msg.me { align-self: flex-end; align-items: flex-end; }
.ac-msg.them { align-self: flex-start; }
.ac-bub { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 10px 14px; font-size: 13px; overflow-wrap: anywhere; }
.ac-msg.me .ac-bub { background: var(--sh-primary-container); color: var(--sh-on-primary-container); }
.ac-meta { font-size: 11px; color: var(--sh-on-surface-variant); }
.ac-report { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ac-stats, .ah-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-chips { padding: 0 20px 12px; }
.ac-stat { display: inline-flex; flex-direction: column; background: var(--sh-surface-low); border-radius: 8px; padding: 6px 10px; font-size: 11px; color: var(--sh-on-surface-variant); }
.ac-stat b { font-size: 14px; color: var(--sh-on-surface); }
.ac-sec-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-on-surface-variant); display: flex; align-items: center; gap: 6px; }
.ac-sec ul { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
.ac-src { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sh-on-surface-variant); }
.ac-src .material-symbols-outlined { font-size: 14px; }
.ac-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ac-results li { display: flex; gap: 6px; align-items: flex-start; }
.ac-results li.bad { color: var(--sh-error); }
.ac-composer { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.ac-modes { align-self: flex-start; }
.ac-composer .fi { width: 100%; box-sizing: border-box; border: none; padding: 9px 12px; font-size: 13px; font-family: inherit; background: var(--sh-surface-low); border-radius: 8px; resize: vertical; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip { all: unset; cursor: pointer; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: var(--sh-surface-low); }
.ac-chip:hover, .ac-chip:focus-visible { background: var(--sh-surface-container); }
.ac-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ac-foot .sb-err { flex: 1 1 auto; }
.ac-find { display: flex; gap: 8px; }
.ac-find .fi { flex: 1; }
.ac-leads { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ac-lead { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.ac-lead:hover { background: var(--sh-surface-low); }
.ac-lead em { display: block; font-style: normal; font-size: 11px; color: var(--sh-on-surface-variant); }
.ac-run { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; }
.ac-guide { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.ac-g { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.ah-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.ah-roster { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ah-search { position: relative; }
.ah-search .material-symbols-outlined { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--sh-on-surface-variant); }
.ah-search input { width: 100%; box-sizing: border-box; padding-left: 36px !important; }
.ah-kinds { align-self: flex-start; }
.ah-all { justify-content: center; }
.ah-list { display: flex; flex-direction: column; gap: 2px; max-height: 560px; overflow-y: auto; }
.ah-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.ah-row:hover, .ah-row:focus-visible { background: var(--sh-surface-low); }
.ah-row.on { background: var(--sh-surface-container); }
.ah-main { min-width: 0; flex: 1; }
.ah-name { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.ah-badge { background: var(--sh-secondary); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-weight: 700; padding: 0 6px; }
.ah-pane { min-width: 0; }
.ah-detail summary { display: flex; align-items: center; gap: 10px; padding: 12px 20px; cursor: pointer; list-style: none; }
.ah-detail summary .sb-sub { flex: 1; min-width: 0; }
@media (max-width: 1000px) { .ah-grid { grid-template-columns: 1fr; } .ah-list { max-height: 320px; } }
.sb-pad.ac-composer { box-shadow: none; border-radius: 0; background: transparent; }

/* Map Hunter patrol (mappatrol.js) */
.mp-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.mp-top label { display: inline-flex; align-items: center; gap: 6px; color: var(--sh-on-surface-variant); }
.mp-top .fi { border: none; background: var(--sh-surface-low); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; max-width: 220px; }
.mp-tog { font-size: 12px; font-weight: 600; cursor: pointer; }
.mp-banner { display: flex; gap: 10px; align-items: flex-start; background: #fff4de; color: var(--sh-secondary); border-radius: 10px; padding: 10px 14px; font-size: 12px; margin-bottom: 14px; }
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.mp-stage { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--sh-shadow); background: #101418; }
.mp-map { height: 680px; width: 100%; background: #101418; }
.mp-map.layer-dark .leaflet-tile { filter: saturate(1.1); }
.mp-layers { position: absolute; top: 12px; right: 12px; z-index: 500; display: flex; gap: 4px; padding: 4px; background: rgba(16,20,24,.78); backdrop-filter: blur(6px); border-radius: 12px; }
.mp-lay { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #e7e9ee; }
.mp-lay .material-symbols-outlined { font-size: 16px; }
.mp-lay:hover { background: rgba(255,255,255,.12); }
.mp-lay.on { background: #FFCC00; color: #111; }
.mp-legend { position: absolute; left: 12px; bottom: 12px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.mp-leg { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(16,20,24,.78); color: #fff; backdrop-filter: blur(6px); }
.mp-leg i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); }
.mp-leg.off { opacity: .45; text-decoration: line-through; }
.mp-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mp-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-speed .btn { padding: 6px 10px; }
.mp-score { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mp-k { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; min-width: 0; }
.mp-k b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.mp-k span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sh-on-surface-variant); }
.mp-k em { font-style: normal; font-size: 10px; color: var(--sh-on-surface-variant); overflow-wrap: anywhere; }
.mp-card { margin: 0; }
.mp-now { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mp-now-top { display: flex; gap: 12px; align-items: center; }
.mp-now-top img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--sh-surface-high); }
.mp-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--sh-surface-low); color: var(--sh-on-surface-variant); transition: all .25s; }
.mp-step .material-symbols-outlined { font-size: 14px; }
.mp-step.on { background: #FFCC00; color: #111; transform: scale(1.06); }
.mp-step.ok { background: var(--sh-ok-bg); color: var(--sh-ok); }
.mp-step.off { opacity: .35; text-decoration: line-through; }
.mp-bubble { padding: 8px 12px; border-radius: 12px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; max-width: 94%; overflow-wrap: anywhere; }
.mp-bubble.me { background: var(--sh-primary-container); color: var(--sh-on-primary-container); align-self: flex-start; }
.mp-bubble.them { background: var(--sh-surface-low); align-self: flex-end; }
.mp-caret { display: inline-block; width: 6px; height: 12px; background: currentColor; animation: mp-blink .7s steps(2) infinite; vertical-align: middle; }
@keyframes mp-blink { 50% { opacity: 0; } }
.mp-empty { padding: 22px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--sh-on-surface-variant); font-size: 12px; }
.mp-empty .material-symbols-outlined { font-size: 30px; color: var(--sh-primary); }
.mp-logs { max-height: 220px; overflow-y: auto; padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.mp-log { font-size: 12px; padding-left: 8px; border-left: 3px solid var(--sh-surface-container); overflow-wrap: anywhere; }
.mp-log.won { border-color: var(--sh-ok); color: var(--sh-ok); font-weight: 600; }
.mp-log.warn { border-color: var(--sh-secondary); }
.mp-log.knock { border-color: #FFCC00; }
.mp-log.reply { border-color: var(--sh-tertiary, #565e74); font-style: italic; }
.mp-detail { background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; overflow: hidden; }
.mp-detail-hd { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 0 14px; }
.mp-detail-act { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
/* lead pins: a satellite crop of the address in a ring that says what the lead is */
.mp-pin-wrap { background: none; border: none; }
.mp-pin { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); background: #2b3138; transition: transform .15s; }
.mp-pin img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mp-pin:hover { transform: scale(1.18); }
.mp-pin.st-customer { border-color: #12b76a; }
.mp-pin.st-hot { border-color: #FFCC00; }
.mp-pin.st-dnc { border-color: #98a2b3; filter: grayscale(1); }
.mp-badge { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; background: #111; color: #fff; }
.mp-badge:empty { display: none; }
.st-customer .mp-badge { background: #12b76a; }
.st-hot .mp-badge { background: #FFCC00; color: #111; }
.mp-pin.res-won { border-color: #12b76a; box-shadow: 0 0 0 4px rgba(18,183,106,.35), 0 2px 8px rgba(0,0,0,.5); }
.mp-pin.res-hot { border-color: #FFCC00; box-shadow: 0 0 0 4px rgba(255,204,0,.35), 0 2px 8px rgba(0,0,0,.5); }
.mp-pin.res-cb { border-color: #53b1fd; box-shadow: 0 0 0 4px rgba(83,177,253,.3), 0 2px 8px rgba(0,0,0,.5); }
.mp-pin.res-no { border-color: #f04438; box-shadow: 0 0 0 4px rgba(240,68,56,.3), 0 2px 8px rgba(0,0,0,.5); }
.mp-pin.res-none { border-color: #98a2b3; filter: grayscale(.8); }
.mp-pin.mp-in { animation: mp-pop .55s cubic-bezier(.2,1.4,.4,1); }
@keyframes mp-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
.mp-walker-wrap, .mp-knock-wrap { background: none; border: none; }
.mp-walker { position: relative; width: 46px; height: 46px; border-radius: 50%; background: #111; color: #FFCC00; display: grid; place-items: center; border: 3px solid #FFCC00; box-shadow: 0 4px 14px rgba(0,0,0,.6); animation: mp-bob .5s ease-in-out infinite alternate; }
.mp-walker .material-symbols-outlined { font-size: 26px; }
.mp-pulse { position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #FFCC00; animation: mp-ring 1.4s ease-out infinite; }
@keyframes mp-bob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes mp-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.mp-knock { position: relative; width: 90px; height: 90px; }
.mp-knock i { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #FFCC00; opacity: 0; animation: mp-ring 0.6s ease-out infinite; }
.mp-knock i:nth-child(2) { animation-delay: .25s; }
.mp-knock i:nth-child(3) { animation-delay: .5s; }
/* hover card */
.leaflet-tooltip.mp-tip { padding: 0; border: none; background: transparent; box-shadow: none; }
.leaflet-tooltip.mp-tip::before { display: none; }
.mp-tipcard { width: 290px; background: var(--sh-surface-lowest, #fff); color: var(--sh-on-surface, #111); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45); white-space: normal; }
.mp-tipimg { display: block; width: 100%; height: 130px; object-fit: cover; background: #2b3138; }
.mp-tipbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mp-tiptop { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; font-size: 14px; }
.mp-row { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; overflow-wrap: anywhere; }
.mp-row .material-symbols-outlined { font-size: 15px; color: var(--sh-on-surface-variant); }
.mp-sim { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--sh-secondary); }
.mp-sim .material-symbols-outlined { font-size: 14px; }
.mp-detail .mp-tipcard { width: auto; box-shadow: none; border-radius: 0; }
@media (max-width: 1100px) { .mp-grid { grid-template-columns: 1fr; } .mp-map { height: 520px; } }
@media (max-width: 600px) { .mp-score { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-layers { flex-wrap: wrap; left: 12px; } .mp-map { height: 420px; } }
.mp-legend { bottom: 34px; }
.mp-stage .leaflet-control-attribution { max-width: 72%; font-size: 10px; white-space: normal; text-align: right; }
.mp-ini { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #2b3138; color: #fff; font-weight: 800; font-size: 18px; }

/* Patrol is the real job now (mappatrol.js), plus the 3D engine (mappatrol3d.js) */
.mp-map { background: #1f2a24; }
.mp-banner.mp-real { background: var(--sh-ok-bg); color: var(--sh-ok); }
.mp-job { display: flex; flex-direction: column; gap: 8px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 12px 14px; }
.mp-live { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--sh-ok); }
.mp-live i { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; animation: mp-ring 1.6s ease-out infinite; }
.mp-live .sb-iconbtn { margin-left: auto; width: 28px; height: 28px; }
.mp-job .sb-sub { display: flex; gap: 4px; align-items: flex-start; }
.mp-job .sb-sub .material-symbols-outlined { font-size: 15px; }
.mp-job .fi { border: none; background: var(--sh-surface-low); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; }
.mp-sub2 { font-size: 12px; color: var(--sh-on-surface-variant); margin-top: -4px; }
.mp-block { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--sh-secondary); background: #fff4de; border-radius: 8px; padding: 8px 10px; }
.mp-block .material-symbols-outlined { font-size: 16px; }
.mp-queue { display: flex; flex-direction: column; padding: 4px 8px 10px; }
.mp-q { all: unset; cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; font-size: 12px; }
.mp-q:hover, .mp-q:focus-visible { background: var(--sh-surface-low); }
.mp-q b { width: 22px; height: 22px; border-radius: 50%; background: var(--sh-surface-high); display: grid; place-items: center; font-size: 11px; }
.mp-q i { font-style: normal; font-weight: 700; display: block; overflow-wrap: anywhere; }
.mp-q em { font-style: normal; color: var(--sh-on-surface-variant); display: block; }
.mp-q u { text-decoration: none; color: var(--sh-on-surface-variant); }
.mp-when { color: var(--sh-on-surface-variant); font-size: 11px; }
.mp-detailtxt { font-size: 12px; color: var(--sh-on-surface-variant); margin-top: 2px; overflow-wrap: anywhere; }
.mp-minis { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mp-mini { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: var(--sh-surface-low); color: var(--sh-on-surface-variant); }
.mp-mini .material-symbols-outlined { font-size: 12px; }
.mp-mini.ok { background: var(--sh-ok-bg); color: var(--sh-ok); }
.mp-pin.st-working { border-color: #FFCC00; box-shadow: 0 0 0 3px rgba(255,204,0,.35), 0 2px 8px rgba(0,0,0,.5); }
.st-working .mp-badge { background: #111; color: #FFCC00; font-size: 9px; }
.mp-pin.mp-hit { animation: mp-hit .9s ease-out; }
@keyframes mp-hit { 0% { box-shadow: 0 0 0 0 rgba(255,204,0,.9); } 100% { box-shadow: 0 0 0 22px rgba(255,204,0,0); } }
.mp-dim { display: inline-flex; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid rgba(255,255,255,.25); }
.mp-tilt { position: absolute; left: 12px; top: 96px; z-index: 500; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: rgba(16,20,24,.78); backdrop-filter: blur(6px); border-radius: 12px; color: #e7e9ee; font-size: 12px; font-weight: 600; }
.mp-tilt label { display: flex; align-items: center; gap: 6px; }
.mp-tilt input[type=range] { width: 110px; accent-color: #FFCC00; }
.mp-tilt .mp-lay { align-self: flex-start; }
.mp-tilt .material-symbols-outlined { font-size: 16px; }
.mp3 { cursor: pointer; }
.maplibregl-popup.mp-tip3 .maplibregl-popup-content { padding: 0; background: transparent; box-shadow: none; }
.maplibregl-popup.mp-tip3 .maplibregl-popup-tip { display: none; }
.mp-stage .maplibregl-ctrl-attrib { font-size: 10px; }
.mp-stage .maplibregl-map { font-family: inherit; }
.mp-stage.loading::after { content: 'Loading 3D map…'; position: absolute; inset: 0; display: grid; place-items: center; z-index: 400; color: #fff; font-weight: 700; background: rgba(16,20,24,.55); pointer-events: none; }
.mp-tip3 .mp-tipimg { height: 84px; }

.mp-banner.mp-gate { background: #fef3f2; color: var(--sh-error, #b42318); }
.mp-walker-wrap.mp-blocked .mp-walker { background: #7a271a; color: #fff; border-color: #f04438; animation: none; }
.mp-walker-wrap.mp-blocked .mp-pulse { border-color: #f04438; }
.mp-recenter { position: absolute; left: 12px; top: 96px; z-index: 500; box-shadow: var(--sh-shadow); }
.mp-recenter[hidden] { display: none; }

/* Map Scout */
.ms-map { height: 680px; }
.ms-pin-wrap { background: none; border: 0; }
.ms-pin { width: 40px; height: 40px; border-radius: 50%; background: #111; border: 3px solid var(--c); display: grid; place-items: center; position: relative; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.ms-pin .material-symbols-outlined { font-size: 18px; }
.ms-pin b { position: absolute; bottom: -8px; right: -8px; background: var(--c); color: #111; font-size: 11px; line-height: 1; padding: 3px 5px; border-radius: 999px; }
.ms-tools { display: flex; flex-direction: column; gap: 8px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); border-radius: 12px; padding: 12px; }
.ms-tools label { display: flex; align-items: center; gap: 6px; }
.ms-tools .fi { background: var(--sh-surface-low); border: none; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; width: 100%; }
.ms-actions, .ms-paste { display: flex; gap: 6px; flex-wrap: wrap; }
.ms-paste .fi { flex: 1; min-width: 0; }
.ms-filters { display: flex; flex-direction: column; gap: 8px; }
.ms-kinds { position: static; background: #101418; flex-wrap: wrap; }
.ms-bands { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ms-bands .mp-leg { color: var(--sh-secondary); background: var(--sh-surface-low); backdrop-filter: none; }
.ms-bands .fi { flex: 1; min-width: 100px; background: var(--sh-surface-low); border: none; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.ms-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.ms-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--sh-surface-lowest); box-shadow: var(--sh-shadow); width: 100%; }
.ms-row.on { outline: 2px solid #FFCC00; }
.ms-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-row i { font-style: normal; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-row em { font-style: normal; font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-score { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 3px 8px; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid var(--c); }
.ms-score b { font-size: 16px; line-height: 1.1; }
.ms-score i { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ms-bars { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.ms-bar { display: grid; grid-template-columns: 90px 1fr 44px; gap: 8px; align-items: center; font-size: 12px; }
.ms-bar > div { height: 8px; border-radius: 4px; background: var(--sh-surface-low); overflow: hidden; }
.ms-bar u { display: block; height: 100%; background: #FFCC00; }
.ms-bar b { text-align: right; }
.ms-why { margin: 4px 0 8px 16px; padding: 0; font-size: 12px; }
.ms-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; background: var(--sh-surface-low); }
@media (max-width: 900px) { .ms-map { height: 420px; } }


.mp-pin.nc { border-style: dashed; }
.mp-row.mp-nc { color: var(--sh-error, #b42318); font-weight: 600; }
.mp-row.mp-nc .material-symbols-outlined { color: inherit; }
.mp-nctag { font-style: normal; font-size: 10px; font-weight: 700; color: var(--sh-error, #b42318); background: #fef3f2; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }