/* ═══ LISTING v2 — Growth & Business Impact ══════════════════════════════════
Scoped to #listing-gcc.lv2. QualifAI client-portal treatment on the MKT
Dashboard base: same font (Plus Jakarta Sans), same blue family, floating
white surfaces on an ambient blue-grey canvas. Nothing here leaks outside
the Listing route. Tokens first, then primitives, then charts, then pages. */
/* Tokens. Declared on the detached overlays too: a drawer, a toast and the
chart tooltip are appended to , OUTSIDE the page root, where these
custom properties are undefined and every var() silently collapses to
nothing. That is how "Save commitment" shipped as white text on a white
button (2026-09-09) — the button was there the whole time. Anything else
appended to has to be added to this list. */
#listing-gcc.lv2,
.lv2-root,
.lv2-surface,
.lv2-drawer,
.lv2-toast,
.modal-overlay,
#lv2-tip{
--lv-primary:#2563EB; --lv-deep:#1E40AF; --lv-soft:#E8F0FF; --lv-hover:#1D4ED8;
--lv-text:#0F172A; --lv-body:#334155; --lv-muted:#64748B; --lv-faint:#94A3B8;
--lv-bg:#F6F9FF; --lv-surface:#fff; --lv-border:#E5E7EB; --lv-border-soft:#EEF2F7;
--lv-success:#10B981; --lv-success-ink:#047857; --lv-success-soft:#ECFDF5;
--lv-warning:#F59E0B; --lv-warning-ink:#B45309; --lv-warning-soft:#FFF7E6;
--lv-danger:#EF4444; --lv-danger-ink:#B91C1C; --lv-danger-soft:#FEF2F2;
--lv-purple:#8B5CF6; --lv-teal:#14B8A6;
--lv-r-sm:10px; --lv-r-md:14px; --lv-r-lg:16px; --lv-r-xl:20px; --lv-r-pill:999px;
--lv-shadow:0 1px 2px rgba(15,23,42,.03),0 8px 30px rgba(15,23,42,.05);
--lv-shadow-hover:0 12px 36px rgba(37,99,235,.10);
--lv-shadow-float:0 16px 50px rgba(15,23,42,.14);
--lv-fast:160ms; --lv-normal:240ms; --lv-slow:360ms; --lv-ease:cubic-bezier(.2,.8,.2,1);
--lv-gap:14px;
}
/* The page canvas itself — the overlays above take the tokens, not this. */
#listing-gcc.lv2,
.lv2-root{
position:relative; border-radius:16px; min-height:100%;
background:
radial-gradient(900px 520px at -8% -12%, rgba(37,99,235,.11), transparent 62%),
radial-gradient(720px 420px at 108% 6%, rgba(20,184,166,.07), transparent 60%),
radial-gradient(640px 400px at 60% 108%, rgba(139,92,246,.05), transparent 60%),
radial-gradient(rgba(15,23,42,.045) 1px, transparent 1px) 0 0/22px 22px,
var(--lv-bg);
color:var(--lv-text);
}
#listing-gcc.lv2 .page{padding:20px 26px 30px}
#listing-gcc.lv2 *{box-sizing:border-box}
/* ── Page head: the static header card, re-dressed as the v2 top bar ──────── */
#listing-gcc.lv2 .card.lgc-head{background:transparent;border:0;box-shadow:none;padding:4px 2px 12px;margin-bottom:6px;overflow:visible}
#listing-gcc.lv2 #lgc-title{font-size:24px!important;font-weight:800!important;letter-spacing:-.02em;line-height:1.15}
#listing-gcc.lv2 #lgc-subtitle{font-size:13px!important;color:var(--lv-muted)!important;margin-top:4px!important;font-weight:500}
#listing-gcc.lv2 #lgc-subtitle b{color:var(--lv-primary);font-weight:700}
#listing-gcc.lv2 #lgc-subtitle .lv2-chainsep{color:var(--lv-faint);margin:0 6px}
#listing-gcc.lv2 .lgc-ds{background:rgba(255,255,255,.72);border:1px solid var(--lv-border-soft);border-radius:var(--lv-r-pill);padding:3px 6px;backdrop-filter:blur(6px)}
#listing-gcc.lv2 .lgc-ds-i,#listing-gcc.lv2 .lgc-ds-hd{border-right-color:var(--lv-border-soft)}
#listing-gcc.lv2 .lgc-head > div:last-child{border-top:0!important;padding-top:4px!important;margin-top:8px!important}
#listing-gcc.lv2 .lgc-ctl-lbl{font-size:10px;color:var(--lv-faint)}
#listing-gcc.lv2 .lgc-inp,#listing-gcc.lv2 .lgc-sel{height:34px;padding:0 11px;border:1px solid var(--lv-border-soft);border-radius:10px;background:var(--lv-surface);box-shadow:var(--lv-shadow);font-size:12.5px;font-weight:600;color:var(--lv-text);transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease)}
#listing-gcc.lv2 .lgc-inp:hover,#listing-gcc.lv2 .lgc-sel:hover{border-color:#C7D2FE;transform:translateY(-1px);box-shadow:var(--lv-shadow-hover)}
#listing-gcc.lv2 .lgc-seg{border:1px solid var(--lv-border-soft);border-radius:10px;background:var(--lv-surface);box-shadow:var(--lv-shadow);padding:3px;gap:2px}
#listing-gcc.lv2 .lgc-seg button{border:0;border-radius:7px;height:26px;padding:0 10px;font-size:11.5px;color:var(--lv-muted);transition:background var(--lv-fast) var(--lv-ease),color var(--lv-fast) var(--lv-ease)}
#listing-gcc.lv2 .lgc-seg button.on{background:var(--lv-soft);color:var(--lv-primary)}
#listing-gcc.lv2 .lgc-btn{height:34px;padding:0 16px;border-radius:10px;box-shadow:0 8px 22px rgba(37,99,235,.24);transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease)}
#listing-gcc.lv2 .lgc-btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(37,99,235,.32)}
#listing-gcc.lv2 .lgc-btn:active{transform:scale(.98)}
#listing-gcc.lv2 #lgc-range-ctl{opacity:1!important}
/* ── Motion ─────────────────────────────────────────────────────────────── */
.lv2-rv{opacity:0;transform:translateY(12px);transition:opacity var(--lv-slow) var(--lv-ease),transform var(--lv-slow) var(--lv-ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
.lv2-rv.is-in{opacity:1;transform:none}
.lv2-count{font-variant-numeric:tabular-nums}
.lv2-grow i,.lv2-grow .lv2-bar__fill{transform:scaleX(0);transform-origin:left;transition:transform 800ms var(--lv-ease);transition-delay:var(--d,0ms)}
.lv2-grow.is-in i,.lv2-grow.is-in .lv2-bar__fill{transform:scaleX(1)}
.lv2-growy .lv2-col__fill{transform:scaleY(0);transform-origin:bottom;transition:transform 800ms var(--lv-ease);transition-delay:var(--d,0ms)}
.lv2-growy.is-in .lv2-col__fill{transform:scaleY(1)}
/* ── Layout ─────────────────────────────────────────────────────────────── */
.lv2-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--lv-gap);align-items:stretch;margin-bottom:var(--lv-gap)}
.lv2-bento>*{min-width:0}
/* A cell that is only a HOST — that JS writes
a panel into — is itself the grid item, so `align-items:stretch` gives IT the
full row height. The panel written inside it is not a grid item and keeps its
content height, so it stops short of the card beside it: Business Status's
dark focus card ended 89px above the bottom of the chart it sits next to.
Make the host a flex box and the panel fills it. */
.lv2-bento > div:has(> .lv2-panel:only-child){display:flex}
.lv2-bento > div > .lv2-panel:only-child{flex:1 1 auto;min-width:0}
.lv2-c2{grid-column:span 2}.lv2-c3{grid-column:span 3}.lv2-c4{grid-column:span 4}.lv2-c5{grid-column:span 5}.lv2-c6{grid-column:span 6}
.lv2-c7{grid-column:span 7}.lv2-c8{grid-column:span 8}.lv2-c9{grid-column:span 9}.lv2-c12{grid-column:span 12}
.lv2-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--lv-gap);margin-bottom:var(--lv-gap)}
.lv2-kpis--7{grid-template-columns:repeat(7,minmax(0,1fr))}
.lv2-kpis--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lv2-kpis--8{grid-template-columns:repeat(4,minmax(0,1fr))}
.lv2-kpis--eq{grid-auto-rows:1fr}
@media(max-width:1280px){.lv2-kpis--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1440px){.lv2-kpis--7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1280px){.lv2-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.lv2-kpis--7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1180px){
.lv2-bento>*{grid-column:span 6}
.lv2-bento>.lv2-c12{grid-column:span 12}
}
@media(max-width:900px){
#listing-gcc.lv2 .page{padding:14px 12px 24px}
.lv2-kpis,.lv2-kpis--7,.lv2-kpis--5{grid-template-columns:repeat(2,minmax(0,1fr))}
.lv2-bento>*,.lv2-bento>.lv2-c12{grid-column:span 12}
#listing-gcc.lv2 #lgc-title{font-size:20px!important}
}
@media(max-width:560px){.lv2-kpis,.lv2-kpis--7,.lv2-kpis--5{grid-template-columns:1fr}}
/* ── Panel ──────────────────────────────────────────────────────────────── */
.lv2-panel{position:relative;display:flex;flex-direction:column;min-width:0;padding:18px 20px;border-radius:var(--lv-r-lg);background:var(--lv-surface);border:1px solid rgba(229,231,235,.7);box-shadow:var(--lv-shadow);transition:transform var(--lv-normal) var(--lv-ease),box-shadow var(--lv-normal) var(--lv-ease),border-color var(--lv-normal) var(--lv-ease)}
.lv2-panel--hover:hover{transform:translateY(-2px);box-shadow:var(--lv-shadow-hover);border-color:#DBE4FF}
.lv2-panel--hero{border-radius:var(--lv-r-xl);padding:20px 22px}
.lv2-panel--tint{background:linear-gradient(160deg,#EEF4FF,#fff 70%)}
.lv2-panel--green{background:linear-gradient(160deg,#ECFDF5,#fff 70%)}
.lv2-panel--intel{background:linear-gradient(150deg,#EEF4FF 0%,#F8FAFF 55%,#fff 100%);border-color:#DBE4FF}
.lv2-panel--dark{color:#fff;background:linear-gradient(150deg,#0F172A 0%,#172554 55%,#1E3A8A 100%);border-color:transparent;box-shadow:0 16px 40px rgba(15,23,42,.22)}
.lv2-panel--dark .lv2-panel__t,.lv2-panel--dark b{color:#fff}
.lv2-panel--dark .lv2-panel__s,.lv2-panel--dark .lv2-muted{color:rgba(255,255,255,.66)}
.lv2-panel--dark .lv2-ichip{color:#fff;background:rgba(255,255,255,.14)}
.lv2-panel--flat{box-shadow:none;background:var(--lv-bg)}
.lv2-panel__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.lv2-panel__titles{min-width:0;flex:1;display:flex;flex-direction:column}
.lv2-panel__t{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--lv-text)}
.lv2-panel__s{display:block;margin-top:2px;font-size:11.5px;line-height:1.4;color:var(--lv-muted)}
.lv2-panel__act{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none;flex-wrap:wrap;justify-content:flex-end}
.lv2-panel__body{display:flex;flex-direction:column;flex:1;min-height:0}
.lv2-panel__body--center{justify-content:center}
.lv2-panel__foot{margin-top:auto;padding-top:10px;font-size:10.5px;color:var(--lv-faint);line-height:1.5}
.lv2-fill{height:100%}
/* ── Atoms ──────────────────────────────────────────────────────────────── */
.lv2-ichip{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;color:var(--lv-primary);background:var(--lv-soft)}
.lv2-ichip--sm{width:28px;height:28px;border-radius:9px}
.lv2-ichip--xs{width:24px;height:24px;border-radius:8px}
.lv2-ichip--green{color:var(--lv-success-ink);background:var(--lv-success-soft)}
.lv2-ichip--amber{color:var(--lv-warning-ink);background:var(--lv-warning-soft)}
.lv2-ichip--purple{color:#6D28D9;background:#F3E8FF}
.lv2-ichip--teal{color:#0F766E;background:#CCFBF1}
.lv2-ichip--slate{color:var(--lv-muted);background:#F1F5F9}
.lv2-ichip--red{color:var(--lv-danger-ink);background:var(--lv-danger-soft)}
.lv2-ichip--white{color:var(--lv-primary);background:#fff;box-shadow:var(--lv-shadow)}
.lv2-ichip svg{display:block}
.lv2-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--lv-r-pill);font-size:11px;font-weight:650;white-space:nowrap;line-height:1}
.lv2-chip--sm{height:19px;padding:0 7px;font-size:10px}
.lv2-chip__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.lv2-chip--green{color:var(--lv-success-ink);background:var(--lv-success-soft)}
.lv2-chip--amber{color:var(--lv-warning-ink);background:var(--lv-warning-soft)}
.lv2-chip--blue{color:var(--lv-deep);background:var(--lv-soft)}
.lv2-chip--red{color:var(--lv-danger-ink);background:var(--lv-danger-soft)}
.lv2-chip--slate{color:var(--lv-body);background:#F1F5F9}
.lv2-chip--purple{color:#6D28D9;background:#F3E8FF}
.lv2-chip--teal{color:#0F766E;background:#CCFBF1}
.lv2-chip--line{color:var(--lv-body);background:#fff;border:1px solid var(--lv-border)}
.lv2-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--lv-border-soft);border-radius:10px;background:var(--lv-surface);font-size:12px;font-weight:600;color:var(--lv-text);white-space:nowrap;cursor:pointer;font-family:inherit;transition:border-color var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),transform var(--lv-fast) var(--lv-ease)}
.lv2-pill:hover{border-color:#BFDBFE;box-shadow:0 4px 14px rgba(37,99,235,.10);transform:translateY(-1px)}
.lv2-pill:active{transform:scale(.98)}
.lv2-pill--soft{border-color:transparent;background:var(--lv-soft);color:var(--lv-deep)}
.lv2-delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.lv2-delta.up{color:#16A34A}.lv2-delta.dn{color:var(--lv-danger)}.lv2-delta.flat{color:var(--lv-faint)}
.lv2-delta svg{flex:none}
.lv2-dpill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--lv-r-pill);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.lv2-dpill.up{color:#15803D;background:var(--lv-success-soft)}
.lv2-dpill.dn{color:var(--lv-danger-ink);background:var(--lv-danger-soft)}
.lv2-dpill.flat{color:var(--lv-muted);background:#F1F5F9}
.lv2-more{display:inline-flex;align-items:center;gap:5px;padding:4px 6px;margin:-4px -6px;border:0;border-radius:8px;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--lv-primary);cursor:pointer;white-space:nowrap;transition:background var(--lv-fast) var(--lv-ease),gap var(--lv-fast) var(--lv-ease)}
.lv2-more:hover{background:var(--lv-soft);gap:8px}
.lv2-muted{color:var(--lv-muted)}
.lv2-faint{color:var(--lv-faint)}
.lv2-num{font-variant-numeric:tabular-nums}
.lv2-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--lv-muted)}
.lv2-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lv2-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.lv2-legend i.dash{width:14px;height:0;border-top:2px dashed currentColor;border-radius:0}
/* Preview / method / source markers — quiet by design (§24). */
.lv2-prev{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:#9AA4B2;letter-spacing:.1px;white-space:nowrap;line-height:1}
.lv2-prev::before{content:'';width:5px;height:5px;border-radius:50%;background:#CBD5E1}
.lv2-prev--pill{height:18px;padding:0 7px;border-radius:var(--lv-r-pill);background:#F4F6FA;border:1px solid var(--lv-border-soft)}
.lv2-panel--dark .lv2-prev{color:rgba(255,255,255,.5)}
.lv2-panel--dark .lv2-prev::before{background:rgba(255,255,255,.35)}
.lv2-panel--dark .lv2-prev--pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.lv2-real{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:var(--lv-success-ink);white-space:nowrap;line-height:1}
.lv2-real::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--lv-success)}
.lv2-method{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 7px;border-radius:6px;background:#F1F5F9;color:var(--lv-body);font-size:10px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.lv2-method--blue{background:var(--lv-soft);color:var(--lv-deep)}
.lv2-foot{font-size:10px;color:#9AA4B2;line-height:1.55;margin:-2px 2px 14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lv2-foot::before{content:'';width:5px;height:5px;border-radius:50%;background:#CBD5E1;flex:none}
/* ── KPI card ───────────────────────────────────────────────────────────── */
.lv2-kpi{position:relative;display:flex;flex-direction:column;min-width:0;padding:15px 16px 13px;border-radius:var(--lv-r-lg);background:var(--lv-surface);border:1px solid rgba(229,231,235,.7);box-shadow:var(--lv-shadow);transition:transform var(--lv-normal) var(--lv-ease),box-shadow var(--lv-normal) var(--lv-ease),border-color var(--lv-normal) var(--lv-ease);overflow:hidden}
.lv2-kpi:hover{transform:translateY(-2px);box-shadow:var(--lv-shadow-hover);border-color:#DBE4FF}
.lv2-kpi--tint{background:linear-gradient(160deg,#EEF4FF,#fff 72%)}
.lv2-kpi--green{background:linear-gradient(160deg,#ECFDF5,#fff 72%)}
.lv2-kpi--hero{color:#fff;background:linear-gradient(150deg,#0F172A 0%,#172554 55%,#1E3A8A 100%);border-color:transparent;box-shadow:0 16px 40px rgba(15,23,42,.22)}
.lv2-kpi--hero::after{content:'';position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.35),transparent 65%);pointer-events:none}
.lv2-kpi__head{display:flex;align-items:center;gap:9px;min-width:0;padding-right:54px}
.lv2-kpi__head b{flex:1;min-width:0;font-size:12px;font-weight:650;color:var(--lv-body);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lv2-kpi--hero .lv2-kpi__head b{color:rgba(255,255,255,.85)}
.lv2-kpi--hero .lv2-ichip{color:#fff;background:rgba(255,255,255,.14)}
.lv2-kpi__fig{display:flex;align-items:baseline;gap:8px;margin-top:10px;flex-wrap:wrap}
.lv2-kpi__val{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--lv-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.lv2-kpi__val small{font-size:14px;font-weight:700;color:var(--lv-muted);letter-spacing:0;margin-left:2px}
.lv2-kpi--hero .lv2-kpi__val{color:#fff}
.lv2-kpi--hero .lv2-kpi__val small{color:rgba(255,255,255,.7)}
.lv2-kpi__note{margin-top:6px;font-size:11px;color:var(--lv-muted);line-height:1.35;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lv2-kpi--hero .lv2-kpi__note{color:rgba(255,255,255,.66)}
.lv2-kpi--hero .lv2-dpill.up{color:#6EE7B7;background:rgba(110,231,183,.14)}
.lv2-kpi--hero .lv2-dpill.dn{color:#FCA5A5;background:rgba(252,165,165,.14)}
.lv2-kpi--hero .lv2-dpill.flat{color:rgba(255,255,255,.7);background:rgba(255,255,255,.1)}
.lv2-kpi__viz{margin-top:auto;padding-top:10px;min-height:30px}
.lv2-kpi__viz svg{display:block;width:100%;height:30px;overflow:visible}
.lv2-kpi__foot{margin-top:7px;padding-top:7px;border-top:1px dashed var(--lv-border-soft);font-size:10.5px;color:var(--lv-muted);line-height:1.4;display:flex;align-items:center;justify-content:space-between;gap:6px}
.lv2-kpi__foot b{color:var(--lv-text);font-weight:700}
.lv2-kpi--hero .lv2-kpi__foot{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.66)}
.lv2-kpi--hero .lv2-kpi__foot b{color:#fff}
.lv2-kpi__src{position:absolute;top:13px;right:14px}
/* mini progress inside a KPI */
.lv2-mini{height:6px;border-radius:4px;background:var(--lv-border-soft);overflow:hidden}
.lv2-mini i{display:block;height:100%;border-radius:4px;background:var(--lv-primary)}
.lv2-kpi--hero .lv2-mini{background:rgba(255,255,255,.14)}
.lv2-kpi--hero .lv2-mini i{background:#93C5FD}
.lv2-mini-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--lv-faint);margin-top:4px}
.lv2-kpi--hero .lv2-mini-lbl{color:rgba(255,255,255,.55)}
/* segment bar */
.lv2-seg{display:flex;gap:3px;height:7px}
.lv2-seg i{display:block;height:100%;border-radius:4px;opacity:.9;transition:opacity var(--lv-fast) var(--lv-ease)}
.lv2-seg:hover i{opacity:.5}.lv2-seg i:hover{opacity:1}
.lv2-seg-lg{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;font-size:10px;color:var(--lv-muted)}
.lv2-seg-lg span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lv2-seg-lg i{width:7px;height:7px;border-radius:50%}
.lv2-kpi--hero .lv2-seg-lg{color:rgba(255,255,255,.7)}
/* ── Inner tabs ─────────────────────────────────────────────────────────── */
.lv2-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.72);border:1px solid var(--lv-border-soft);box-shadow:var(--lv-shadow);backdrop-filter:blur(6px);margin-bottom:var(--lv-gap);max-width:100%;overflow-x:auto;scrollbar-width:none}
.lv2-tabs::-webkit-scrollbar{display:none}
.lv2-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;border-radius:9px;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--lv-muted);cursor:pointer;white-space:nowrap;transition:background var(--lv-fast) var(--lv-ease),color var(--lv-fast) var(--lv-ease),transform var(--lv-fast) var(--lv-ease)}
.lv2-tab:hover{color:var(--lv-text);background:#F6F8FC}
.lv2-tab:active{transform:scale(.98)}
.lv2-tab.on{background:var(--lv-soft);color:var(--lv-primary);font-weight:700}
.lv2-tab .lv2-tab__n{font-size:10px;font-weight:700;color:var(--lv-faint);background:#F1F5F9;border-radius:6px;padding:2px 5px}
.lv2-tab.on .lv2-tab__n{color:var(--lv-primary);background:#fff}
.lv2-tabrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* ── Charts ─────────────────────────────────────────────────────────────── */
.lv2-chart{position:relative;width:100%;min-width:0;flex:1;min-height:120px}
.lv2-chart svg{display:block;overflow:visible;width:100%}
.lv2-chart .grid{stroke:rgba(100,116,139,.12);stroke-width:1}
.lv2-chart .axis{font-family:inherit;font-size:10.5px;fill:var(--lv-faint)}
.lv2-chart .axis-t{font-family:inherit;font-size:10px;fill:var(--lv-faint);font-weight:600}
.lv2-chart .cursor{stroke:#94A3B8;stroke-width:1;stroke-dasharray:3 4}
.lv2-chart .marker{stroke:#64748B;stroke-width:1.2;stroke-dasharray:4 4}
.lv2-chart .marker-lbl{font-family:inherit;font-size:10.5px;font-weight:700;fill:var(--lv-text)}
.lv2-chart .marker-sub{font-family:inherit;font-size:9.5px;fill:var(--lv-muted)}
.lv2-chart .lift-lbl{font-family:inherit;font-size:13px;font-weight:800;fill:var(--lv-primary);letter-spacing:-.02em}
.lv2-chart .lift-sub{font-family:inherit;font-size:9.5px;font-weight:600;fill:var(--lv-muted)}
.lv2-chart .bar-lbl{font-family:inherit;font-size:11px;font-weight:700;fill:var(--lv-text)}
.lv2-chart .bub-lbl{font-family:inherit;font-size:10.5px;font-weight:600;fill:var(--lv-body)}
.lv2-chart .quad-lbl{font-family:inherit;font-size:9.5px;font-weight:700;fill:var(--lv-faint);letter-spacing:.3px;text-transform:uppercase}
.lv2-chart .draw{transition:width 1200ms var(--lv-ease)}
.lv2-chart .hit{fill:transparent;cursor:crosshair}
.lv2-chart .bar{transition:opacity var(--lv-fast) var(--lv-ease),transform 800ms var(--lv-ease);transform-origin:bottom;transform-box:fill-box}
.lv2-chart .bar.dim{opacity:.45}
.lv2-chart .bub{transition:opacity var(--lv-fast) var(--lv-ease),r var(--lv-normal) var(--lv-ease)}
.lv2-chart .bub.dim{opacity:.35}
.lv2-chart .arc{transition:stroke-dasharray 1100ms var(--lv-ease)}
.lv2-chart .pt{transition:cx var(--lv-fast) var(--lv-ease),cy var(--lv-fast) var(--lv-ease)}
.lv2-chart--sm{min-height:90px}
.lv2-chart-h{height:250px}
.lv2-chart-h-sm{height:190px}
.lv2-chart-h-xs{height:150px}
.lv2-chsum{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border-radius:12px;background:var(--lv-bg);border:1px solid var(--lv-border-soft)}
.lv2-chsum > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lv2-chsum .l{font-size:9.5px;font-weight:700;color:var(--lv-faint);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
.lv2-chsum .v{font-size:15px;font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.lv2-chsum .v.up{color:#15803D}.lv2-chsum .v.dn{color:var(--lv-danger-ink)}
.lv2-panel--dark .lv2-chsum{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.lv2-panel--dark .lv2-chsum .v{color:#fff}.lv2-panel--dark .lv2-chsum .l{color:rgba(255,255,255,.55)}
/* Tooltip — one floating dark surface for every chart and data-tip. */
#lv2-tip{position:fixed;z-index:9999;min-width:120px;max-width:280px;padding:8px 11px 9px;border-radius:10px;background:#0F172A;color:#fff;box-shadow:0 16px 50px rgba(15,23,42,.24);font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transform:translateY(4px) scale(.97);transition:opacity var(--lv-fast,160ms) cubic-bezier(.2,.8,.2,1),transform var(--lv-fast,160ms) cubic-bezier(.2,.8,.2,1);display:grid;gap:3px}
#lv2-tip.is-on{opacity:1;transform:none}
#lv2-tip .t{font-size:12px;font-weight:700;color:#fff;margin-bottom:1px}
#lv2-tip .r{display:flex;align-items:center;gap:7px;font-size:11.5px;color:rgba(255,255,255,.78);white-space:nowrap}
#lv2-tip .r i{width:7px;height:7px;border-radius:50%;flex:none}
#lv2-tip .r b{margin-left:auto;padding-left:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
#lv2-tip .x{font-size:10.5px;color:#6EE7B7;margin-top:1px}
#lv2-tip .x.n{color:#FCA5A5}
#lv2-tip .m{font-size:10.5px;color:rgba(255,255,255,.55);margin-top:2px;white-space:normal}
/* ── Sparkline + spark bars ─────────────────────────────────────────────── */
.lv2-spark path{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lv2-spark .area{stroke:none}
/* ── Progression funnel ─────────────────────────────────────────────────── */
.lv2-funnel{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:4px 0 2px;scrollbar-width:thin}
.lv2-fstage{flex:1 1 0;min-width:92px;display:flex;flex-direction:column;gap:5px;padding:11px 10px 9px;border-radius:14px;background:#F8FAFF;border:1px solid var(--lv-border-soft);transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease);cursor:default}
.lv2-fstage:hover{transform:translateY(-2px);box-shadow:var(--lv-shadow-hover);border-color:#C7D2FE;background:#fff}
.lv2-fstage.last{background:linear-gradient(160deg,#ECFDF5,#fff 70%);border-color:#A7F3D0}
.lv2-fstage__l{font-size:10.5px;font-weight:700;color:var(--lv-muted);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-fstage__v{font-size:18px;font-weight:800;color:var(--lv-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.lv2-fstage__col{height:54px;display:flex;align-items:flex-end;margin-top:2px}
.lv2-fstage__col i{display:block;width:100%;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,#3B82F6,#2563EB);min-height:4px}
.lv2-fstage.last .lv2-fstage__col i{background:linear-gradient(180deg,#34D399,#10B981)}
.lv2-fstage__share{font-size:10px;color:var(--lv-faint);font-variant-numeric:tabular-nums}
.lv2-fstage__cmp{font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums}
.lv2-fstep{flex:0 0 auto;width:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative}
.lv2-fstep::before{content:'';position:absolute;left:4px;right:4px;top:50%;border-top:1.5px dashed #C7D2FE;z-index:0}
.lv2-fstep__r{position:relative;z-index:1;height:21px;padding:0 6px;border-radius:var(--lv-r-pill);background:#fff;border:1px solid #C7D2FE;color:var(--lv-deep);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:3px;box-shadow:0 2px 8px rgba(37,99,235,.10)}
.lv2-fstep__d{position:relative;z-index:1;font-size:9.5px;color:var(--lv-faint);white-space:nowrap;background:var(--lv-surface);padding:0 3px;font-variant-numeric:tabular-nums}
/* ── Distribution buckets (HTML columns) ────────────────────────────────── */
.lv2-dist{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;align-items:end;flex:1;min-height:150px;padding-top:22px}
.lv2-dcol{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:120px;cursor:default}
.lv2-dcol .lv2-col__fill{border-radius:9px 9px 4px 4px;background:#BFDBFE;transition:background var(--lv-fast) var(--lv-ease),transform 800ms var(--lv-ease);min-height:5px}
.lv2-dcol:hover .lv2-col__fill{background:var(--lv-primary)}
.lv2-dcol .v{position:absolute;left:0;right:0;text-align:center;font-size:11.5px;font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums}
.lv2-dcol .l{margin-top:7px;text-align:center;font-size:10.5px;color:var(--lv-muted);line-height:1.25;white-space:nowrap}
.lv2-dcol .l small{display:block;font-size:9.5px;color:var(--lv-faint);font-weight:500}
/* ── Ranked rows / metric rows ──────────────────────────────────────────── */
.lv2-rows{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.lv2-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;border:1px solid var(--lv-border-soft);background:var(--lv-surface);transition:background var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease),transform var(--lv-fast) var(--lv-ease);cursor:default}
.lv2-row:hover{background:var(--lv-bg);border-color:#C7D2FE;transform:translateX(2px)}
.lv2-row.on{background:var(--lv-soft);border-color:#BFDBFE}
.lv2-row__n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--lv-primary);background:var(--lv-soft)}
.lv2-row__n.top{color:#fff;background:var(--lv-primary)}
.lv2-row__b{min-width:0;display:flex;flex-direction:column;gap:3px}
.lv2-row__t{font-size:12.5px;font-weight:650;color:var(--lv-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.lv2-row__s{font-size:10.5px;color:var(--lv-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-row__bar{height:5px;border-radius:3px;background:var(--lv-border-soft);overflow:hidden;margin-top:2px}
.lv2-row__bar i{display:block;height:100%;border-radius:3px;background:var(--lv-primary)}
.lv2-row__r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.lv2-row__v{font-size:13px;font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.lv2-row__m{font-size:10px;color:var(--lv-faint);font-variant-numeric:tabular-nums}
.lv2-mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--lv-border-soft);font-size:12px}
.lv2-mrow:last-child{border-bottom:0}
.lv2-mrow .l{color:var(--lv-body);display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv2-mrow .v{font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.lv2-mrow .v small{font-weight:600;color:var(--lv-faint);margin-left:5px;font-size:10.5px}
.lv2-panel--dark .lv2-mrow{border-bottom-color:rgba(255,255,255,.12)}
.lv2-panel--dark .lv2-mrow .l{color:rgba(255,255,255,.75)}
.lv2-panel--dark .lv2-mrow .v{color:#fff}
/* horizontal bars list */
.lv2-hbars{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.lv2-hbars li{display:grid;grid-template-columns:minmax(0,var(--lw,120px)) minmax(24px,1fr) var(--vw,52px);align-items:center;gap:10px}
.lv2-hbars .lbl{font-size:11.5px;color:var(--lv-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.lv2-hbars .track{height:8px;border-radius:5px;background:var(--lv-border-soft);overflow:hidden}
.lv2-hbars .track i{display:block;height:100%;border-radius:5px;background:var(--lv-primary)}
.lv2-hbars .val{font-size:11.5px;font-weight:700;color:var(--lv-text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ── Insight card ───────────────────────────────────────────────────────── */
.lv2-insight{display:flex;flex-direction:column;gap:10px}
.lv2-insight ol{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.lv2-insight li{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid rgba(219,228,255,.8);transition:transform var(--lv-fast) var(--lv-ease),background var(--lv-fast) var(--lv-ease)}
.lv2-insight li:hover{transform:translateX(2px);background:#fff}
.lv2-insight__n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;font-size:11.5px;font-weight:800;color:var(--lv-primary);background:var(--lv-soft)}
.lv2-insight b{display:block;font-size:12.5px;font-weight:700;color:var(--lv-text);line-height:1.3}
.lv2-insight i{display:block;margin-top:2px;font-style:normal;font-size:11px;line-height:1.45;color:var(--lv-muted)}
.lv2-insight em{font-style:normal;font-weight:700;color:var(--lv-primary)}
/* ── Impact story (dark focus) ──────────────────────────────────────────── */
.lv2-story{display:flex;flex-direction:column;gap:0;flex:1;justify-content:space-evenly}
.lv2-story__step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;position:relative;padding:7px 0}
.lv2-story__step + .lv2-story__step::before{content:'';position:absolute;left:14px;top:-9px;height:16px;border-left:1.5px dashed rgba(255,255,255,.28)}
.lv2-story__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff}
.lv2-story__ic.ok{background:rgba(110,231,183,.18);color:#6EE7B7}
.lv2-story__v{font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-story__l{font-size:10.5px;color:rgba(255,255,255,.62);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-story__k{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.lv2-story__q{margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.08);font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.lv2-story__q b{color:#fff}
/* ── Table ──────────────────────────────────────────────────────────────── */
.lv2-scroll{overflow:auto;border-radius:12px;max-height:420px;border:1px solid var(--lv-border-soft)}
.lv2-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
.lv2-tbl th{position:sticky;top:0;z-index:2;padding:9px 12px;text-align:left;font-size:10.5px;font-weight:700;color:var(--lv-muted);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;background:#F8FAFF;border-bottom:1px solid var(--lv-border-soft)}
.lv2-tbl th.num,.lv2-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.lv2-tbl th.mid,.lv2-tbl td.mid{text-align:center}
.lv2-tbl td{padding:10px 12px;border-bottom:1px solid var(--lv-border-soft);color:var(--lv-body);white-space:nowrap;vertical-align:middle;background:#fff;transition:background var(--lv-fast) var(--lv-ease)}
.lv2-tbl tbody tr:last-child td{border-bottom:0}
.lv2-tbl tbody tr:hover td{background:var(--lv-bg)}
.lv2-tbl td.strong,.lv2-tbl .strong{font-weight:750;color:var(--lv-text)}
.lv2-tbl td:first-child{position:sticky;left:0;z-index:1}
.lv2-tbl th:first-child{z-index:3;left:0}
.lv2-tbl .rk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:10px;font-weight:800;color:var(--lv-primary);background:var(--lv-soft);margin-right:8px;vertical-align:middle}
.lv2-tbl .rk.top{color:#fff;background:var(--lv-primary)}
.lv2-tbl .ibar{display:inline-block;vertical-align:middle;width:64px;height:6px;border-radius:4px;background:var(--lv-border-soft);overflow:hidden;margin-left:8px}
.lv2-tbl .ibar i{display:block;height:100%;border-radius:4px;background:var(--lv-primary)}
.lv2-tbl .ibar.g i{background:var(--lv-success)}
.lv2-tbl .ibar.p i{background:var(--lv-purple)}
.lv2-tbl .who{display:inline-flex;align-items:center;gap:9px;font-weight:650;color:var(--lv-text)}
.lv2-tbl .who .lv2-init{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:800;color:var(--lv-primary);background:#DBEAFE;flex:none}
.lv2-tbl .thumb{display:inline-grid;place-items:center;width:44px;height:32px;border-radius:8px;background:linear-gradient(135deg,#DBEAFE,#EEF2FF);color:var(--lv-primary);flex:none;box-shadow:inset 0 0 0 1px rgba(37,99,235,.08)}
.lv2-tbl .sub{display:block;font-size:10.5px;color:var(--lv-faint);font-weight:500;margin-top:1px}
.lv2-tbl tfoot td{background:#F8FAFF;font-weight:800;color:var(--lv-text);border-top:1px solid var(--lv-border)}
/* ── Map ─────────────────────────────────────────────────────────────────── */
.lv2-map{position:relative;flex:1;height:100%;min-height:150px;border-radius:14px;background:linear-gradient(160deg,#F4F8FF,#EEF4FF);overflow:hidden}
.lv2-map svg{position:absolute;inset:0;width:100%;height:100%}
.lv2-map .land{fill:#DBEAFE;stroke:#BFDBFE;stroke-width:.8}
.lv2-map .city{fill:rgba(37,99,235,.28);stroke:var(--lv-primary);stroke-width:1.2;cursor:pointer;transition:fill var(--lv-fast) var(--lv-ease),r var(--lv-normal) var(--lv-ease)}
.lv2-map .city:hover,.lv2-map .city.on{fill:rgba(37,99,235,.6)}
.lv2-map .city-lbl{font-family:inherit;font-size:7.5px;font-weight:700;fill:var(--lv-text);pointer-events:none;paint-order:stroke;stroke:#F4F8FF;stroke-width:2.5px;stroke-linejoin:round}
.lv2-map .city-sub{font-size:6.8px;font-weight:600;fill:var(--lv-primary)}
.lv2-map__cap{position:absolute;right:10px;bottom:8px;font-size:9.5px;color:var(--lv-faint)}
.lv2-map__scale{position:absolute;left:10px;bottom:8px;display:flex;align-items:center;gap:6px;font-size:9.5px;color:var(--lv-faint)}
.lv2-map__scale i{width:34px;height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(37,99,235,.15),rgba(37,99,235,.7))}
.lv2-geo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;flex:1;min-height:0}
@media(max-width:1180px){.lv2-geo{grid-template-columns:1fr}}
/* ── Gauge / donut layouts ──────────────────────────────────────────────── */
.lv2-gauge{display:flex;align-items:center;gap:16px}
.lv2-gauge__body{position:relative;flex:none}
.lv2-gauge__c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.lv2-gauge__c b{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--lv-text);line-height:1}
.lv2-gauge__c i{font-style:normal;font-size:9.5px;color:var(--lv-muted);margin-top:3px;max-width:80px;line-height:1.2}
.lv2-donut{display:flex;align-items:center;gap:18px}
.lv2-donut__legend{display:grid;gap:8px;flex:1;min-width:0;margin:0;padding:0;list-style:none}
.lv2-donut__legend li{display:grid;grid-template-columns:9px minmax(0,1fr) auto auto;align-items:center;gap:8px;font-size:12px;color:var(--lv-body);white-space:nowrap}
.lv2-donut__legend i{width:9px;height:9px;border-radius:50%}
.lv2-donut__legend b{font-weight:700;color:var(--lv-text);font-variant-numeric:tabular-nums}
.lv2-donut__legend small{color:var(--lv-faint);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}
.lv2-health{display:flex;flex-direction:column;gap:7px}
.lv2-health li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:12px;color:var(--lv-body);list-style:none}
.lv2-health .ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--lv-success-soft);color:var(--lv-success-ink)}
.lv2-health .warn{background:var(--lv-warning-soft);color:var(--lv-warning-ink)}
.lv2-health b{font-variant-numeric:tabular-nums;color:var(--lv-text)}
.lv2-health-ok{display:flex;align-items:center;gap:9px;margin-top:10px;padding:9px 11px;border-radius:11px;background:var(--lv-success-soft);border:1px solid #A7F3D0;font-size:11.5px;color:var(--lv-success-ink)}
.lv2-health-ok b{display:block;font-weight:750}
.lv2-health-ok i{display:block;font-style:normal;font-size:10.5px;color:#059669;opacity:.85}
/* ── Compare tiles (depth purchase) ─────────────────────────────────────── */
.lv2-cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch}
.lv2-cmp__tile{padding:12px 13px;border-radius:13px;border:1px solid var(--lv-border-soft);background:#F8FAFF;display:flex;flex-direction:column;gap:4px;min-width:0}
.lv2-cmp__tile.on{background:linear-gradient(160deg,#EEF4FF,#fff 75%);border-color:#BFDBFE}
.lv2-cmp__k{font-size:10.5px;font-weight:700;color:var(--lv-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-cmp__v{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--lv-text);font-variant-numeric:tabular-nums;line-height:1.05}
.lv2-cmp__s{font-size:10.5px;color:var(--lv-faint)}
.lv2-cmp__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.lv2-cmp__arrow{color:var(--lv-faint)}
.lv2-win{display:flex;gap:6px;margin-top:10px}
.lv2-win button{flex:1;height:28px;border-radius:8px;border:1px solid var(--lv-border-soft);background:#fff;font:inherit;font-size:11px;font-weight:700;color:var(--lv-muted);cursor:pointer;transition:background var(--lv-fast) var(--lv-ease),color var(--lv-fast) var(--lv-ease),transform var(--lv-fast) var(--lv-ease)}
.lv2-win button:hover{color:var(--lv-text)}
.lv2-win button:active{transform:scale(.98)}
.lv2-win button.on{background:var(--lv-soft);border-color:#BFDBFE;color:var(--lv-primary)}
/* ── Waterfall / stat pairs ─────────────────────────────────────────────── */
.lv2-pair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.lv2-pair > div{padding:9px 10px;border-radius:11px;background:var(--lv-bg);border:1px solid var(--lv-border-soft);display:flex;flex-direction:column;gap:2px;min-width:0}
.lv2-pair .k{font-size:9.5px;font-weight:700;color:var(--lv-faint);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-pair .v{font-size:16px;font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.lv2-pair .v.up{color:#15803D}
.lv2-pair > div.hi{background:linear-gradient(160deg,#ECFDF5,#fff 75%);border-color:#A7F3D0}
/* ── Risk bands / cohort stacked columns ────────────────────────────────── */
.lv2-stack{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px;align-items:end;flex:1;min-height:150px;padding-top:22px}
.lv2-stack__col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:120px;gap:2px;cursor:default}
.lv2-stack__col .v{position:absolute;left:0;right:0;top:-20px;text-align:center;font-size:11.5px;font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums}
.lv2-stack__seg{border-radius:4px;transition:opacity var(--lv-fast) var(--lv-ease),transform 800ms var(--lv-ease);transform-origin:bottom;min-height:3px;display:grid;place-items:center;font-size:9.5px;font-weight:700;color:#fff;overflow:hidden}
.lv2-stack__col:hover .lv2-stack__seg{opacity:.85}
.lv2-stack__col .l{margin-top:7px;text-align:center;font-size:10.5px;color:var(--lv-muted);white-space:nowrap}
/* ── Empty state ────────────────────────────────────────────────────────── */
.lv2-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:1;min-height:110px;padding:16px;border-radius:12px;border:1px dashed var(--lv-border);color:var(--lv-faint);font-size:11.5px;text-align:center}
.lv2-empty b{color:var(--lv-muted);font-weight:700}
/* ── Media diagnostics (existing tree, re-dressed) ─────────────────────── */
#listing-gcc.lv2 .lgc-md{border-radius:var(--lv-r-lg);border:1px solid rgba(229,231,235,.7);box-shadow:var(--lv-shadow)}
#listing-gcc.lv2 .lgc-md-hd{padding:14px 18px}
#listing-gcc.lv2 .lgc-tbl th{background:#F8FAFF;border-bottom-color:var(--lv-border-soft);font-size:10.5px}
#listing-gcc.lv2 .lgc-tbl td{height:auto;padding:10px 12px;border-bottom-color:var(--lv-border-soft)}
#listing-gcc.lv2 .lgc-scroll{border-color:var(--lv-border-soft);border-radius:12px}
#listing-gcc.lv2 .lgc-md-note{border-radius:12px;background:var(--lv-bg);border-color:var(--lv-border-soft)}
/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.lv2-rv{opacity:1;transform:none;transition:none}
.lv2-grow i,.lv2-grow .lv2-bar__fill,.lv2-growy .lv2-col__fill{transform:none;transition:none}
.lv2-chart .draw,.lv2-chart .arc,.lv2-chart .bar,.lv2-chart .bub,.lv2-stack__seg,.lv2-panel,.lv2-kpi,.lv2-pill,.lv2-tab,.lv2-row,.lv2-fstage{transition:none}
.lv2-panel--hover:hover,.lv2-kpi:hover,.lv2-pill:hover,.lv2-row:hover,.lv2-fstage:hover{transform:none}
#lv2-tip{transition:none}
}
@media(max-width:1180px){.lv2-feat{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* ── Fulfilments: bullet chart + expandable tracker detail ─────────────── */
.lv2-bullet{display:flex;flex-direction:column;gap:9px}
.lv2-bullet__row{display:grid;grid-template-columns:130px minmax(0,1fr) 110px;align-items:center;gap:10px}
.lv2-bullet__l{font-size:11.5px;color:var(--lv-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv2-bullet__t{height:12px;border-radius:7px;background:var(--lv-border-soft);overflow:hidden}
.lv2-bullet__t i{display:block;height:100%;border-radius:7px}
.lv2-bullet__v{font-size:12px;font-weight:700;color:var(--lv-text);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lv2-bullet__v small{font-weight:600;color:var(--lv-faint);margin-left:5px;font-size:10.5px}
.lv2-ffdet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lv2-ffdet > div > b{display:block;font-size:11px;font-weight:700;color:var(--lv-muted);letter-spacing:.3px;text-transform:uppercase;margin-bottom:4px}
.lv2-ffdet .lv2-mrow{padding:5px 0;font-size:11.5px}
.lv2-ffdet .lv2-mrow .v small{font-size:10px}
@media(max-width:900px){.lv2-ffdet{grid-template-columns:1fr}.lv2-bullet__row{grid-template-columns:90px minmax(0,1fr) 90px}}
/* ══ BANKS · MORTGAGES ═══════════════════════════════════════════════════════
No new visual language — these are only the shapes Listing v2 had no need
for: a denser funnel (eight real stages, not five), the acquisition tree,
the platform/CRM gap, the bank-process timeline and the discrepancy notes. */
.lv2-funnel--dense .lv2-fstage{min-width:78px;padding:10px 8px 8px;gap:4px}
.lv2-funnel--dense .lv2-fstage__v{font-size:16px}
.lv2-funnel--dense .lv2-fstage__l{font-size:10px}
.lv2-funnel--dense .lv2-fstage__share{font-size:9px}
.lv2-funnel--dense .lv2-fstage__col{height:44px}
.lv2-funnel--dense .lv2-fstep{width:40px}
.lv2-funnel--dense .lv2-fstep__r{height:19px;padding:0 5px;font-size:10px}
.lv2-funnel--dense .lv2-fstep__d{font-size:9px}
/* A quiet inline note. Amber only where the source genuinely disagrees with
itself — never as a page-wide banner. */
.lv2-mtnote{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:9px 11px;border-radius:11px;background:var(--lv-bg);border:1px solid var(--lv-border-soft);font-size:11px;line-height:1.55;color:var(--lv-muted)}
.lv2-mtnote svg{flex:none;margin-top:1px;color:var(--lv-faint)}
.lv2-mtnote b{color:var(--lv-text);font-weight:700}
.lv2-mtnote--warn{background:var(--lv-warning-soft);border-color:#FDE68A;color:var(--lv-warning-ink)}
.lv2-mtnote--warn svg{color:var(--lv-warning)}
.lv2-mtnote--warn b{color:#92400E}
/* Acquisition tree — one nested visual instead of two channel charts. */
.lv2-mttree{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.lv2-mttree__row{display:flex;align-items:center;gap:12px}
.lv2-mttree__row .l{font-size:11.5px;font-weight:650;color:var(--lv-body);white-space:nowrap;min-width:86px}
.lv2-mttree__row .v{font-size:13px;font-weight:800;color:var(--lv-text);font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.lv2-mttree__row.is-sub .l{padding-left:10px;color:var(--lv-muted);font-weight:600}
.lv2-mttree__row.is-sub .v{font-size:12px;color:var(--lv-muted)}
.lv2-mttree .lv2-seg{height:12px}
/* Platform → CRM: two counts and a question mark, never a division. */
.lv2-mtrec{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.lv2-mtrec__box{padding:11px 13px;border-radius:12px;border:1px solid var(--lv-border-soft);background:#F8FAFF;display:flex;flex-direction:column;gap:2px}
.lv2-mtrec__box.on{background:linear-gradient(160deg,#EEF4FF,#fff 75%);border-color:#BFDBFE}
.lv2-mtrec__box .k{font-size:10.5px;font-weight:700;color:var(--lv-muted)}
.lv2-mtrec__box .v{font-size:24px;font-weight:800;letter-spacing:-.03em;color:var(--lv-text);font-variant-numeric:tabular-nums;line-height:1.05}
.lv2-mtrec__box .s{font-size:10px;color:var(--lv-faint);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lv2-mtrec__mid{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--lv-faint)}
.lv2-mtrec__q{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lv-warning-soft);color:var(--lv-warning-ink);font-size:12px;font-weight:800}
/* Bank process — volume column, stage name, preview duration bar. */
.lv2-mtproc{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:6px 0 2px;margin-top:4px}
.lv2-mtproc__st{flex:1 1 0;min-width:96px;display:flex;flex-direction:column;gap:4px;padding:10px 9px;border-radius:13px;border:1px solid var(--lv-border-soft);background:#F8FAFF;transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease)}
.lv2-mtproc__st:hover{transform:translateY(-2px);box-shadow:var(--lv-shadow-hover);border-color:#C7D2FE;background:#fff}
.lv2-mtproc__st.is-slow{background:linear-gradient(160deg,#FFF7E6,#fff 75%);border-color:#FDE68A}
.lv2-mtproc__st .n{font-size:19px;font-weight:800;color:var(--lv-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.lv2-mtproc__st .bar{height:38px;display:flex;align-items:flex-end}
.lv2-mtproc__st .bar i{display:block;width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#3B82F6,#2563EB);min-height:4px}
.lv2-mtproc__st.is-slow .bar i{background:linear-gradient(180deg,#FBBF24,#F59E0B)}
.lv2-mtproc__st .l{font-size:10px;font-weight:650;color:var(--lv-muted);line-height:1.25}
.lv2-mtproc__st .d{font-size:11.5px;font-weight:800;color:var(--lv-primary);font-variant-numeric:tabular-nums}
.lv2-mtproc__st .d.over{color:var(--lv-warning-ink)}
.lv2-mtproc__st .dbar{height:4px;border-radius:3px;background:var(--lv-border-soft);overflow:hidden}
.lv2-mtproc__st .dbar i{display:block;height:100%;border-radius:3px}
.lv2-mtproc__arrow{flex:0 0 auto;width:20px;display:flex;align-items:center;justify-content:center;color:#C7D2FE}
/* Bottleneck. */
.lv2-mtbn{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border-radius:13px;background:rgba(255,255,255,.7);border:1px solid #FDE68A;margin-bottom:12px}
.lv2-mtbn__k{font-size:9.5px;font-weight:700;color:var(--lv-warning-ink);letter-spacing:.4px;text-transform:uppercase}
.lv2-mtbn__v{font-size:19px;font-weight:800;color:var(--lv-text);letter-spacing:-.02em;line-height:1.15}
.lv2-mtbn__d{font-size:30px;font-weight:800;color:var(--lv-warning-ink);letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.lv2-mtbn__d small{font-size:12px;font-weight:600;color:var(--lv-muted);letter-spacing:0;margin-left:4px}
.lv2-mtbn .lv2-dpill{align-self:flex-start;margin-top:5px}
/* The three disagreements, stated once. */
.lv2-mtdisc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lv2-mtdisc > div{padding:12px 13px;border-radius:12px;background:#F8FAFF;border:1px solid var(--lv-border-soft)}
.lv2-mtdisc b{display:block;font-size:12px;font-weight:700;color:var(--lv-text);line-height:1.35;margin-bottom:5px}
.lv2-mtdisc p{margin:0;font-size:11px;line-height:1.6;color:var(--lv-muted)}
.lv2-mtdisc p b{display:inline;font-size:inherit;margin:0}
@media(max-width:1180px){.lv2-mtdisc{grid-template-columns:1fr}}
/* The quality month picker sits in the body, not the header — five months of
buttons never fit a four-column card header without crushing the title. */
.lv2-mtpick{display:flex;justify-content:flex-end;margin:-2px 0 10px}
.lv2-mtpick .lv2-win{flex-wrap:wrap;justify-content:flex-end}
.lv2-mtpick .lv2-win button{flex:0 0 auto;padding:0 9px}
/* Page-level tabs directly under the controls (Mortgages): ~10–12px from the
control row, and the standard 14px gap to whatever the view renders next. */
.lv2-tabrow--top{margin-top:-6px}
.lv2-tabrow--top .lv2-tabs{margin-bottom:var(--lv-gap)}
/* ═══ REQUESTS — form, portal shell, timeline ════════════════════════════════
Added 2026-09-08 with Listing Fulfilment Requests. Shared by TWO surfaces —
Listing → Requests inside the dashboard, and the requester portal at
/request/listing — which is why this file left index.html and became an
asset. Same tokens, same cards, same motion; the portal is a different
product surface, not a second design system. */
/* ── Portal shell ────────────────────────────────────────────────────────── */
.lv2-root{
font-family:'Plus Jakarta Sans','Inter',sans-serif; color:var(--lv-text);
min-height:100vh; -webkit-font-smoothing:antialiased;
}
.rq-top{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:16px;padding:12px 26px;
background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(229,231,235,.8)}
.rq-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--lv-text)}
.rq-brand img{height:26px;width:auto;display:block}
.rq-nav{display:flex;align-items:center;gap:4px;margin-left:14px}
.rq-nav button{height:32px;padding:0 13px;border:0;border-radius:9px;background:none;font:inherit;font-size:12.5px;
font-weight:600;color:var(--lv-muted);cursor:pointer;transition:background var(--lv-fast) var(--lv-ease),color var(--lv-fast) var(--lv-ease),transform var(--lv-fast) var(--lv-ease)}
.rq-nav button:hover{background:#F6F8FC;color:var(--lv-text)}
.rq-nav button:active{transform:scale(.98)}
.rq-nav button.on{background:var(--lv-soft);color:var(--lv-primary);font-weight:700}
.rq-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--lv-muted);font-weight:600}
.rq-user .lv2-init{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:10.5px;
font-weight:800;color:var(--lv-primary);background:#DBEAFE;flex:none}
.rq-wrap{max-width:1240px;margin:0 auto;padding:22px 26px 40px}
.rq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.rq-head h1{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0}
.rq-head p{font-size:13px;color:var(--lv-muted);font-weight:500;margin:5px 0 0}
.rq-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--lv-primary);
background:none;border:0;padding:0;cursor:pointer;margin-bottom:10px}
.rq-back:hover{text-decoration:underline}
@media(max-width:900px){
.rq-top{padding:10px 14px;gap:10px;flex-wrap:wrap}
.rq-wrap{padding:16px 14px 32px}
.rq-head h1{font-size:20px}
}
/* Sign-in card — the whole portal before there is a session. */
.rq-gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.rq-gate__card{width:100%;max-width:430px;background:#fff;border-radius:var(--lv-r-xl);border:1px solid rgba(229,231,235,.7);
box-shadow:var(--lv-shadow);padding:36px 34px;text-align:center}
.rq-gate__card img{height:52px;width:auto;margin:0 auto 18px;display:block}
.rq-gate__card h1{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.rq-gate__card p{font-size:13px;color:var(--lv-muted);line-height:1.6;margin:0 0 24px}
.rq-google{width:100%;height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
border:1px solid var(--lv-border);border-radius:11px;background:#fff;font:inherit;font-size:13.5px;font-weight:700;
color:var(--lv-text);cursor:pointer;box-shadow:var(--lv-shadow);
transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease)}
.rq-google:hover{transform:translateY(-1px);box-shadow:var(--lv-shadow-hover);border-color:#C7D2FE}
.rq-google:active{transform:scale(.98)}
.rq-gate__note{font-size:11.5px;color:var(--lv-faint);margin-top:18px;line-height:1.6}
/* ── Form primitives ─────────────────────────────────────────────────────── */
.lv2-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 14px}
.lv2-fgrid--1{grid-template-columns:minmax(0,1fr)}
.lv2-fgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lv2-fgrid .span2{grid-column:span 2}
@media(max-width:760px){
.lv2-fgrid,.lv2-fgrid--3{grid-template-columns:minmax(0,1fr)}
.lv2-fgrid .span2{grid-column:span 1}
}
.lv2-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lv2-field__l{font-size:10.5px;font-weight:700;color:var(--lv-muted);letter-spacing:.4px;text-transform:uppercase;
display:flex;align-items:center;gap:5px}
.lv2-field__l i{font-style:normal;color:#EF4444;font-weight:800}
.lv2-inp{width:100%;height:40px;padding:0 12px;border:1px solid var(--lv-border);border-radius:10px;background:#fff;
font:inherit;font-size:13px;font-weight:600;color:var(--lv-text);outline:none;
transition:border-color var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease)}
.lv2-inp::placeholder{color:#C3CBD6;font-weight:500}
.lv2-inp:hover{border-color:#C7D2FE}
.lv2-inp:focus{border-color:var(--lv-primary);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.lv2-inp:disabled,.lv2-inp[readonly]{background:var(--lv-bg);color:var(--lv-muted);cursor:default}
textarea.lv2-inp{height:auto;min-height:92px;padding:10px 12px;line-height:1.6;font-weight:500;resize:vertical}
select.lv2-inp{appearance:none;cursor:pointer;padding-right:32px;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 11px center}
.lv2-field.bad .lv2-inp{border-color:#FCA5A5;box-shadow:0 0 0 3px rgba(239,68,68,.10)}
.lv2-hint{font-size:11px;color:var(--lv-faint);line-height:1.55}
.lv2-err{display:none;font-size:11px;font-weight:650;color:var(--lv-danger-ink);line-height:1.5}
.lv2-field.bad .lv2-err{display:block}
.lv2-money{position:relative;display:block}
.lv2-money>span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;
color:var(--lv-faint);pointer-events:none;line-height:1}
.lv2-money .lv2-inp{padding-left:36px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lv2-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;border:0;
border-radius:10px;background:var(--lv-primary);color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;
box-shadow:0 8px 22px rgba(37,99,235,.24);white-space:nowrap;
transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),background var(--lv-fast) var(--lv-ease)}
.lv2-btn:hover{background:var(--lv-hover);transform:translateY(-1px);box-shadow:0 12px 30px rgba(37,99,235,.32)}
.lv2-btn:active{transform:scale(.98)}
.lv2-btn:disabled{opacity:.42;box-shadow:none;cursor:not-allowed;transform:none;background:var(--lv-primary)}
.lv2-btn--ghost{background:#fff;color:var(--lv-body);border:1px solid var(--lv-border);box-shadow:var(--lv-shadow)}
.lv2-btn--ghost:hover{background:#fff;color:var(--lv-text);border-color:#C7D2FE;box-shadow:var(--lv-shadow-hover)}
.lv2-btn--danger{background:var(--lv-danger);box-shadow:0 8px 22px rgba(239,68,68,.22)}
.lv2-btn--danger:hover{background:#DC2626;box-shadow:0 12px 30px rgba(239,68,68,.3)}
.lv2-btn--sm{height:32px;padding:0 13px;font-size:12px;border-radius:9px;box-shadow:none}
.lv2-btn--sm:hover{box-shadow:var(--lv-shadow-hover)}
.lv2-btn--block{width:100%}
.lv2-btnrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* ── Submission checklist ────────────────────────────────────────────────── */
.lv2-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lv2-check li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;
font-size:12px;font-weight:600;color:var(--lv-muted);line-height:1.5}
.lv2-check li b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
background:#F1F5F9;color:#B6BFCC;font-size:10px;transition:background var(--lv-fast) var(--lv-ease),color var(--lv-fast) var(--lv-ease)}
.lv2-check li.ok{color:var(--lv-text)}
.lv2-check li.ok b{background:var(--lv-success-soft);color:var(--lv-success-ink)}
.lv2-sticky{position:sticky;top:16px}
@media(max-width:1180px){.lv2-sticky{position:static}}
/* ── Timeline ────────────────────────────────────────────────────────────── */
.lv2-tl{list-style:none;margin:0;padding:0}
.lv2-tl li{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:11px;padding:0 0 15px}
.lv2-tl li::before{content:'';position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--lv-border-soft)}
.lv2-tl li:last-child{padding-bottom:0}
.lv2-tl li:last-child::before{display:none}
.lv2-tl__d{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;background:#F1F5F9;
color:#94A3B8;border:2px solid #fff;box-shadow:0 0 0 1px var(--lv-border-soft)}
.lv2-tl li.on .lv2-tl__d{background:var(--lv-soft);color:var(--lv-primary);box-shadow:0 0 0 1px #C7D2FE}
.lv2-tl li.done .lv2-tl__d{background:var(--lv-success-soft);color:var(--lv-success-ink);box-shadow:0 0 0 1px #A7F3D0}
.lv2-tl__t{font-size:12.5px;font-weight:750;color:var(--lv-text);line-height:1.4}
.lv2-tl__s{display:block;font-size:11px;font-weight:600;color:var(--lv-faint);line-height:1.55;margin-top:2px;
white-space:normal;overflow-wrap:anywhere}
/* ── Status stepper: Submitted → Marketing Review → Setup → Live → Fulfilled ─ */
.lv2-step{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.lv2-step__i{flex:1 1 0;min-width:104px;display:flex;flex-direction:column;gap:5px;padding:9px 11px;border-radius:11px;
background:var(--lv-bg);border:1px solid var(--lv-border-soft)}
.lv2-step__i .k{font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--lv-faint)}
.lv2-step__i .v{font-size:12px;font-weight:750;color:var(--lv-muted)}
.lv2-step__i.done{background:var(--lv-success-soft);border-color:#A7F3D0}
.lv2-step__i.done .k{color:#059669}
.lv2-step__i.done .v{color:var(--lv-success-ink)}
.lv2-step__i.on{background:linear-gradient(160deg,#EEF4FF,#fff 75%);border-color:#C7D2FE}
.lv2-step__i.on .k{color:var(--lv-primary)}
.lv2-step__i.on .v{color:var(--lv-deep)}
/* ── Requester delivery card: the two fulfilment dimensions, side by side ──── */
.lv2-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lv2-dual>div{padding:13px 14px;border-radius:13px;border:1px solid var(--lv-border-soft);background:var(--lv-bg)}
.lv2-dual .k{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--lv-faint)}
.lv2-dual .v{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--lv-text);
font-variant-numeric:tabular-nums;margin:3px 0 7px}
.lv2-dual .s{font-size:11px;font-weight:600;color:var(--lv-muted)}
.lv2-dual>div.good{background:var(--lv-success-soft);border-color:#A7F3D0}
.lv2-dual>div.good .v{color:var(--lv-success-ink)}
.lv2-dual>div.warn{background:var(--lv-warning-soft);border-color:#FDE68A}
.lv2-dual>div.warn .v{color:var(--lv-warning-ink)}
@media(max-width:560px){.lv2-dual{grid-template-columns:minmax(0,1fr)}}
/* ── Toast ───────────────────────────────────────────────────────────────── */
.lv2-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:120;max-width:min(560px,92vw);
display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:#0F172A;color:#fff;
font-size:12.5px;font-weight:600;line-height:1.5;box-shadow:var(--lv-shadow-float);opacity:0;pointer-events:none;
transition:opacity var(--lv-normal) var(--lv-ease),transform var(--lv-normal) var(--lv-ease)}
.lv2-toast.is-on{opacity:1;transform:translate(-50%,0)}
.lv2-toast.bad{background:#7F1D1D}
.lv2-toast.good{background:#065F46}
/* ── Drawer — the marketing commitment form on the internal Requests page ─── */
.lv2-drawer{position:fixed;inset:0;z-index:110;display:none}
.lv2-drawer.is-on{display:block}
.lv2-drawer__bg{position:absolute;inset:0;background:rgba(15,23,42,.34);backdrop-filter:blur(2px);
animation:lv2fade var(--lv-normal) var(--lv-ease)}
.lv2-drawer__p{position:absolute;top:0;right:0;bottom:0;width:min(560px,100vw);background:#fff;
box-shadow:var(--lv-shadow-float);display:flex;flex-direction:column;animation:lv2slide var(--lv-normal) var(--lv-ease)}
.lv2-drawer__h{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--lv-border-soft)}
.lv2-drawer__h b{font-size:15px;font-weight:800;letter-spacing:-.01em;display:block}
.lv2-drawer__h span{font-size:11.5px;color:var(--lv-muted);font-weight:600;display:block;margin-top:3px}
.lv2-drawer__x{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--lv-border-soft);
background:#fff;color:var(--lv-muted);cursor:pointer;display:grid;place-items:center;flex:none}
.lv2-drawer__x:hover{background:var(--lv-bg);color:var(--lv-text)}
.lv2-drawer__b{flex:1;overflow:auto;padding:18px 22px}
.lv2-drawer__f{padding:14px 22px 18px;border-top:1px solid var(--lv-border-soft);display:flex;gap:9px;
align-items:center;background:#fff}
@keyframes lv2fade{from{opacity:0}to{opacity:1}}
@keyframes lv2slide{from{transform:translateX(22px);opacity:.4}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){
.lv2-drawer__bg,.lv2-drawer__p{animation:none}
}
/* ── Section heading inside a form panel ─────────────────────────────────── */
.lv2-sect{display:flex;align-items:center;gap:9px;margin:2px 0 12px}
.lv2-sect b{font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:var(--lv-text)}
.lv2-sect span{font-size:11px;color:var(--lv-faint);font-weight:600}
/* ── Request list — one DOM, a record card on every width ─────────────────── */
.rq-list{display:flex;flex-direction:column;gap:10px}
.rq-card{display:grid;grid-template-columns:132px minmax(0,1.5fr) 108px 120px 168px 122px 128px;gap:12px 16px;
align-items:start;padding:14px 16px;border-radius:var(--lv-r-md);background:var(--lv-surface);
border:1px solid rgba(229,231,235,.7);box-shadow:var(--lv-shadow);cursor:pointer;text-align:left;width:100%;font:inherit;
transition:transform var(--lv-normal) var(--lv-ease),box-shadow var(--lv-normal) var(--lv-ease),border-color var(--lv-normal) var(--lv-ease)}
.rq-card:hover{transform:translateY(-2px);box-shadow:var(--lv-shadow-hover);border-color:#DBE4FF}
.rq-card:active{transform:scale(.995)}
.rq-card .k{display:block;font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;
color:var(--lv-faint);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rq-card .v{font-size:12.5px;font-weight:700;color:var(--lv-text);line-height:1.45;overflow-wrap:anywhere}
.rq-card .v small{display:block;font-size:11px;font-weight:600;color:var(--lv-muted);margin-top:2px}
.rq-card .code{color:var(--lv-primary);font-variant-numeric:tabular-nums}
@media(max-width:1120px){.rq-card{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.rq-card{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px 14px}}
/* Filter pills above the list */
.rq-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rq-filters button{height:30px;padding:0 12px;border:1px solid var(--lv-border-soft);border-radius:var(--lv-r-pill);
background:#fff;font:inherit;font-size:12px;font-weight:650;color:var(--lv-muted);cursor:pointer;
transition:background var(--lv-fast) var(--lv-ease),color var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease)}
.rq-filters button:hover{color:var(--lv-text);border-color:#C7D2FE}
.rq-filters button.on{background:var(--lv-soft);border-color:#C7D2FE;color:var(--lv-primary);font-weight:750}
.rq-filters button b{font-weight:800;margin-left:5px;font-size:11px;opacity:.75}
/* ═══ REPORTING & INTEGRATION — the v2 treatment on the legacy shell ═════════
Added 2026-09-09. The nine pages under REPORTING and INTEGRATION already
shared a normalisation layer — .page, .card, .ui-page-t/-s, .ui-inp/-sel/-btn,
.ui-tbl. Rather than rewriting nine pages of markup to emit .lv2-* classes,
the v2 TREATMENT is applied to those shared classes inside .lv2-surface.
That is the "generalize, don't duplicate" rule taken literally: no
.reporting-v2 namespace and no copied rules. Listing keeps its own scoped
overrides under #listing-gcc.lv2, which come later in this file and still win,
so nothing there changes. Anything with the token block above can also drop in
a real .lv2-panel / .lv2-kpi and it simply works.
docs/reporting-integration-v2-design-mapping.md */
.lv2-surface{
position:relative; min-height:100%;
color:var(--lv-text);
background:
radial-gradient(900px 520px at -8% -12%, rgba(37,99,235,.10), transparent 62%),
radial-gradient(720px 420px at 108% 4%, rgba(20,184,166,.06), transparent 60%),
radial-gradient(rgba(15,23,42,.040) 1px, transparent 1px) 0 0/22px 22px,
var(--lv-bg);
}
.lv2-surface .page{padding:20px 26px 30px}
@media(max-width:900px){ .lv2-surface .page{padding:14px 12px 24px} }
/* ── Page header: one anatomy everywhere (title · subtitle · controls) ────── */
.lv2-surface .ui-page-t{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--lv-text)}
.lv2-surface .ui-page-s{font-size:13px;font-weight:500;color:var(--lv-muted);margin-top:4px;line-height:1.55}
.lv2-surface .ui-page-s b{color:var(--lv-body);font-weight:700}
.lv2-surface .ui-sec-t{font-size:11px;font-weight:800;color:var(--lv-muted);letter-spacing:.5px;text-transform:uppercase}
/* ── Cards become v2 panels ──────────────────────────────────────────────── */
.lv2-surface .card{
background:var(--lv-surface); border:1px solid rgba(229,231,235,.7);
border-radius:var(--lv-r-lg); box-shadow:var(--lv-shadow); overflow:visible;
transition:box-shadow var(--lv-normal) var(--lv-ease),border-color var(--lv-normal) var(--lv-ease);
}
.lv2-surface .card:hover{box-shadow:var(--lv-shadow-hover);border-color:#DBE4FF}
.lv2-surface .card-header{
padding:16px 20px 14px; border-bottom:1px solid var(--lv-border-soft);
display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
/* The page-title card is the header, not a card: let it sit on the canvas.
Everything BELOW it keeps its surface — that is the whole rule (§8): canvas,
then a white section, then content. Ads Mapping and Members used to put the
title and the work in ONE card, so stripping the title card stripped the work
with it and the table ended up floating on the dots. They are two cards now. */
.lv2-surface .card:has(> .card-header > div > .ui-page-t){
background:transparent; border:0; box-shadow:none;
}
.lv2-surface .card:has(> .card-header > div > .ui-page-t):hover{box-shadow:none;border-color:transparent}
.lv2-surface .card:has(> .card-header > div > .ui-page-t) > .card-header{
padding:4px 2px 14px; border-bottom:0;
}
/* The page header is ONE line: title block left, controls hard right.
`.card-header` is `flex-wrap:wrap`, and a flex line break is decided on
hypothetical (max-content) sizes BEFORE any shrinking happens — so a long
one-line subtitle, plus Ads Mapping's filter sizing itself to its widest
option, threw the controls onto a line of their own with 600px to spare.
A small flex-basis lets the title block share the line and wrap inside it. */
.lv2-surface .card:has(> .card-header > div > .ui-page-t) > .card-header > div:first-child{
flex:1 1 320px; min-width:0;
}
.lv2-surface .card:has(> .card-header > div > .ui-page-t) > .card-header > .ui-ctl{
margin-left:auto;
}
/* ── Controls: the v2 sizes, on the shared legacy classes ────────────────── */
.lv2-surface .ui-ctl-lbl{font-size:10px;color:var(--lv-faint)}
.lv2-surface .ui-inp,.lv2-surface .ui-sel{
height:34px; padding:0 11px; border:1px solid var(--lv-border-soft); border-radius:10px;
background:var(--lv-surface); box-shadow:var(--lv-shadow); font-size:12.5px; font-weight:600; color:var(--lv-text);
transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease);
}
.lv2-surface .ui-inp:hover,.lv2-surface .ui-sel:hover{border-color:#C7D2FE;transform:translateY(-1px);box-shadow:var(--lv-shadow-hover)}
.lv2-surface .ui-inp:focus,.lv2-surface .ui-sel:focus{border-color:var(--lv-primary);box-shadow:0 0 0 3px rgba(37,99,235,.13);transform:none}
.lv2-surface .ui-btn{
height:34px; padding:0 16px; border:0; border-radius:10px; background:var(--lv-primary); color:#fff;
font-size:12.5px; font-weight:700; box-shadow:0 8px 22px rgba(37,99,235,.24);
transition:transform var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease),background var(--lv-fast) var(--lv-ease);
}
.lv2-surface .ui-btn:hover{background:var(--lv-hover);transform:translateY(-1px);box-shadow:0 12px 30px rgba(37,99,235,.32)}
.lv2-surface .ui-btn:active{transform:scale(.98)}
.lv2-surface .ui-btn:disabled{opacity:.42;box-shadow:none;transform:none;cursor:not-allowed}
.lv2-surface .ui-btn-ghost{
background:var(--lv-surface); color:var(--lv-body); border:1px solid var(--lv-border); box-shadow:var(--lv-shadow);
}
.lv2-surface .ui-btn-ghost:hover{background:var(--lv-surface);color:var(--lv-text);border-color:#C7D2FE;box-shadow:var(--lv-shadow-hover)}
.lv2-surface .ui-note{
font-size:11px; color:var(--lv-muted); line-height:1.6; border-radius:12px;
background:var(--lv-bg); border:1px solid var(--lv-border-soft); padding:11px 13px;
}
/* ── Tables: quiet headers, tabular numerals, hover, sticky identity ─────── */
.lv2-surface .ui-scroll,.lv2-surface .lgc-scroll{border:1px solid var(--lv-border-soft);border-radius:12px;overflow:auto}
.lv2-surface .ui-tbl,.lv2-surface .lgc-tbl{font-size:12.5px;border-collapse:separate;border-spacing:0}
.lv2-surface .ui-tbl th,.lv2-surface .lgc-tbl th{
position:sticky; top:0; z-index:2; padding:9px 12px; text-align:left;
font-size:10.5px; font-weight:700; color:var(--lv-muted); letter-spacing:.3px; text-transform:uppercase;
white-space:nowrap; background:#F8FAFF; border-bottom:1px solid var(--lv-border-soft);
}
.lv2-surface .ui-tbl td,.lv2-surface .lgc-tbl td{
padding:10px 12px; border-bottom:1px solid var(--lv-border-soft); color:var(--lv-body);
vertical-align:middle; background:var(--lv-surface); transition:background var(--lv-fast) var(--lv-ease);
}
.lv2-surface .ui-tbl tbody tr:last-child td,.lv2-surface .lgc-tbl tbody tr:last-child td{border-bottom:0}
.lv2-surface .ui-tbl tbody tr:hover td,.lv2-surface .lgc-tbl tbody tr:hover td{background:var(--lv-bg)}
.lv2-surface .ui-tbl th.num,.lv2-surface .ui-tbl td.num,.lv2-surface .lgc-tbl th.num,.lv2-surface .lgc-tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.lv2-surface .ui-tbl tfoot td,.lv2-surface .lgc-tbl tfoot td{background:#F8FAFF;font-weight:800;color:var(--lv-text);border-top:1px solid var(--lv-border-soft)}
/* ── Reveal, matching Listing. Surfaces only — never every row (§25). ──────
Deliberately a KEYFRAME with `both`, not an opacity:0 default flipped by a
class. A class-driven reveal is one missed JS call away from a fully painted
page at opacity 0 — which is exactly how Banks shipped blank on 2026-09-08.
An animation always reaches its end state, even if every script fails, and it
replays by itself when the root goes display:none → block. */
@keyframes lv2Rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.lv2-surface .card{animation:lv2Rise var(--lv-slow) var(--lv-ease) both}
.lv2-surface .card:nth-of-type(2){animation-delay:60ms}
.lv2-surface .card:nth-of-type(3){animation-delay:120ms}
.lv2-surface .card:nth-of-type(n+4){animation-delay:180ms}
@media(prefers-reduced-motion:reduce){
.lv2-surface .card{animation:none}
}
/* ── v2 components dropped into a legacy surface animate themselves ────────
.lv2-rv defaults to opacity:0 and is flipped to .is-in by an
IntersectionObserver that only ever runs inside #lgc-view. Outside it, a
perfectly rendered KPI strip is invisible — which is precisely how PMKT's new
cards vanished the first time (2026-09-09), and how Banks shipped blank the
week before. Same stateless keyframe as the cards above: it cannot get stuck.
lv2Count() already writes the final formatted value as text, so skipping the
count-up costs a flourish, never a number. */
.lv2-surface .lv2-rv{
opacity:1; transform:none;
animation:lv2Rise var(--lv-slow) var(--lv-ease) both;
animation-delay:var(--d,0ms);
}
.lv2-surface .lv2-grow i,.lv2-surface .lv2-grow .lv2-bar__fill{transform:scaleX(1)}
.lv2-surface .lv2-growy .lv2-col__fill{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){ .lv2-surface .lv2-rv{animation:none} }
/* ── Shared modals ────────────────────────────────────────────────────────
Four overlays share .modal-overlay / .modal: the Project Index edit panel,
Lead Details, Bookings and Unqualified Categories. One treatment, not four —
and they live outside .lv2-surface, which is why .modal-overlay is in the
token selector at the top of this file.
Sizing is left alone on purpose: the leads modal is deliberately wide
(max-width 1700px) because it carries a wide table, and narrowing it here
would be a product change wearing a design change's clothes. */
.modal-overlay{background:rgba(15,23,42,.34);backdrop-filter:blur(2px)}
.modal{
border-radius:var(--lv-r-xl); box-shadow:var(--lv-shadow-float);
border:1px solid rgba(229,231,235,.7); color:var(--lv-text);
}
.modal-header{padding:18px 22px 15px;border-bottom:1px solid var(--lv-border-soft)}
.modal-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--lv-text)}
.modal-sub{font-size:11.5px;color:var(--lv-muted);font-weight:600;margin-top:3px}
.modal-search{
height:34px;padding:0 12px;border:1px solid var(--lv-border-soft);border-radius:10px;
background:var(--lv-surface);font-size:12.5px;font-weight:600;color:var(--lv-text);
transition:border-color var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease);
}
.modal-search:focus{outline:none;border-color:var(--lv-primary);box-shadow:0 0 0 3px rgba(37,99,235,.13)}
.modal-table th{
font-size:10.5px;font-weight:700;color:var(--lv-muted);letter-spacing:.3px;text-transform:uppercase;
background:#F8FAFF;border-bottom:1px solid var(--lv-border-soft);
}
.modal-table td{border-bottom:1px solid var(--lv-border-soft);color:var(--lv-body);font-variant-numeric:tabular-nums}
.modal-table tbody tr:hover td{background:var(--lv-bg)}
/* ── Management pages: compact stat pills, not a KPI strip ────────────────
Ads Mapping and Members are tools, not reports (§7), so their figures are
pills in the toolbar rather than six big cards. This toolbar is STICKY through
Save changes while hundreds of campaigns scroll under it, so every pixel it
grows is a row the person mapping cannot see. That sticky behaviour is a
shipped requirement — nothing here may make the header taller than the work. */
/* Opaque, not frosted. It used to float over the dotted canvas, where 94% white
plus a blur read as glass; now it is the white card's own top edge, and the
6% let the table header ghost through it as the list scrolled underneath. */
.lv2-surface .am-stickyhead{
background:var(--lv-surface);
border-radius:var(--lv-r-lg) var(--lv-r-lg) 0 0;
border-bottom:1px solid var(--lv-border-soft);
box-shadow:0 10px 12px -12px rgba(15,23,42,.22);
}
/* The bar is the card's own top edge, not a floating strip: what is on screen on
the left, what is unsaved and Save changes on the right, one row so the sticky
head never costs more than one row of campaigns. Show and Search are NOT here
— they live in the page header, because picking a list is a decision you make
once and saving is one you make after scrolling. */
.lv2-surface .am-bar{
display:flex; align-items:center; justify-content:space-between;
gap:12px 14px; flex-wrap:wrap; padding:12px 20px;
}
.lv2-surface .am-bar-stats{display:flex; align-items:center; flex-wrap:wrap; row-gap:6px; min-width:0}
.lv2-surface .am-bar-ctl{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto}
.lv2-surface .am-dirty{font-size:11.5px; font-weight:700; color:var(--lv-warning-ink)}
.lv2-surface .am-empty{padding:28px 16px; text-align:center; color:var(--lv-muted); font-size:12px}
/* A fix-type group: its heading, its one-line explanation, then a rule. The rule
is what tells a reader the table under it belongs to THIS group rather than to
the card. */
.lv2-surface .am-grp{margin:20px 0 11px; padding-bottom:10px; border-bottom:1px solid var(--lv-border-soft)}
.lv2-surface #am-body > .am-grp:first-of-type{margin-top:14px}
.lv2-surface .am-grp-n{color:var(--lv-faint); font-weight:600}
.lv2-surface .am-grp-h{font-size:11px; color:var(--lv-muted); line-height:1.6; margin-top:4px}
.lv2-surface .am-tbl{width:100%; font-size:11.5px; border-collapse:separate; border-spacing:0}
.lv2-surface .am-tbl th{
padding:9px 10px; text-align:left; font-size:10.5px; font-weight:700; color:var(--lv-muted);
letter-spacing:.3px; text-transform:uppercase; white-space:nowrap;
background:#F8FAFF; border-bottom:1px solid var(--lv-border-soft);
}
.lv2-surface .am-tbl th.num{text-align:right}
.lv2-surface .am-tbl td{
padding:8px 10px; border-bottom:1px solid var(--lv-border-soft); vertical-align:middle;
background:var(--lv-surface); transition:background var(--lv-fast) var(--lv-ease);
}
.lv2-surface .am-tbl tbody tr:last-child td{border-bottom:0}
.lv2-surface .am-tbl tbody tr:hover td{background:var(--lv-bg)}
.lv2-surface .am-tbl td.num{text-align:right; font-variant-numeric:tabular-nums}
.lv2-surface .am-tbl td.nw,.lv2-surface .am-tbl th.nw{white-space:nowrap}
.lv2-surface .am-th-opt{font-weight:500; text-transform:none; letter-spacing:0; color:var(--lv-faint)}
.lv2-surface .am-c-name{max-width:360px}
.lv2-surface .am-cname{font-weight:650; color:var(--lv-text); word-break:break-word; line-height:1.35}
.lv2-surface .am-ctags{margin-top:3px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:10.5px}
.lv2-surface .am-now,.lv2-surface .am-muted{color:var(--lv-muted)}
.lv2-surface .am-faint{color:var(--lv-faint); line-height:1.45}
.lv2-surface .am-spend{font-weight:700; color:var(--lv-text); white-space:nowrap}
.lv2-surface .am-rowmsg{font-size:10.5px}
.lv2-surface .am-scroll{margin-bottom:4px}
/* ── A control INSIDE a table cell ───────────────────────────────────────────
The page-header treatment above is tuned for a control sitting on the canvas:
a nearly invisible border carried by a soft shadow. Drop the same control into
a white card and both disappear — a select reads as plain text until it is
clicked. In a cell the border does the work instead, and the lift on hover is
dropped: a row of nudging inputs is noise, not feedback. */
/* background-COLOR, never the `background` shorthand: the shorthand resets
background-image, and a