/* ==========================================================================
   LeadScope — Product UI components (code-built, not screenshots)
   All components are sized in `em`. Context sets the base:
   · hero dashboard: 1em = 1% of frame width (container query units)
   · panels elsewhere: 1em ≈ 14px
   Swap for real screenshots any time by replacing the markup with <img>.
   ========================================================================== */

/* ---- Icons (mask-based, inherit currentColor) ---- */
.i { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.i-search { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.i-pin { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 21s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.i-grid { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='4' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1.5'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1.5'/%3E%3C/svg%3E"); }
.i-list { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); }
.i-flow { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='3' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='10' y='4' width='5' height='11' rx='1.5'/%3E%3Crect x='17' y='4' width='4' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.i-mail { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.i-phone { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.i-up { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M12 16V4m0 0-5 5m5-5 5 5M4 20h16'/%3E%3C/svg%3E"); }
.i-filter { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Cpath d='M4 5h16l-6 8v6l-4-2v-4z'/%3E%3C/svg%3E"); }
.i-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }

/* ---- Primitives ---- */
.field { display: flex; align-items: center; gap: .7em; height: 3.2em; padding: 0 1em; border-radius: .8em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); white-space: nowrap; overflow: hidden; min-width: 0; }
.field .i { color: var(--dim); }
.field small { color: var(--dim); font-size: 1em; }
.field.is-focus { box-shadow: inset 0 0 0 1px var(--lime-line), 0 0 0 .28em var(--lime-soft); }
.caret { width: 1.5px; height: 1.2em; background: var(--lime); margin-left: -.45em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.seg { display: flex; align-items: center; padding: .25em; gap: .2em; border-radius: .8em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.seg span { padding: .55em .75em; border-radius: .6em; color: var(--dim); white-space: nowrap; }
.seg span.is-on { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.go { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: 0 1.3em; height: 3.2em; border-radius: .8em; background: var(--lime); color: var(--lime-ink); font-weight: 600; white-space: nowrap; }
.go--lg { height: 3.6em; width: 100%; font-size: 1.05em; }
.pill { display: inline-flex; align-items: center; padding: .3em .75em; border-radius: 99em; font-size: .86em; white-space: nowrap; background: rgba(255,255,255,.06); color: var(--dim); }
.pill--accent  { background: var(--lime-soft); color: var(--lime); }
.pill--good    { background: rgba(52,211,180,.12); color: var(--teal); }
.pill--info    { background: rgba(142,184,255,.12); color: var(--info); }
.pill--warn    { background: rgba(245,181,68,.12); color: var(--warn); }
.pill--neutral { background: rgba(255,255,255,.06); color: var(--text-2); }
.ok { color: var(--teal); } .bad { color: var(--bad); } .warn { color: var(--warn); }

.ring { position: relative; width: 3.8em; height: 3.8em; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 3.4; }
.ring .v { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--score, 82)); transition: stroke-dashoffset 1200ms var(--ease-out); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.1em; font-weight: 600; }
.ring--lg { width: 5.6em; height: 5.6em; } .ring--lg b { font-size: 1.6em; }
.ring--xl { width: 7.4em; height: 7.4em; } .ring--xl b { font-size: 2.2em; }
.float .ring { width: 44px; height: 44px; font-size: 13px; }
.float .ring b { font-size: 13px; }

/* ---- Panels (outside the hero) ---- */
.panel { width: 100%; font-size: clamp(12px, .55rem + .45vw, 14px); padding: 1.8em; border-radius: 1.6em; background: var(--panel); box-shadow: var(--shadow-panel); display: grid; gap: 1.2em; }
.panel__title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 1.15em; }
.panel__title em { font-style: normal; font-weight: 400; color: var(--dim); font-size: .85em; }
.panel--xl { font-size: clamp(11px, .45rem + .55vw, 14px); padding: 2em; border-radius: 1.8em; }
.panel--flush { padding: .6em; }
.panel--map { padding: .6em; height: 100%; }

/* ==========================================================================
   HERO DASHBOARD
   ========================================================================== */
.app { font-size: 1cqw; display: grid; grid-template-columns: 15em 1fr; aspect-ratio: 16 / 9.2; border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: 0 0 0 1px var(--line-2), 0 60px 140px -40px rgba(0,0,0,.9); color: var(--text); text-align: left; }
.app-side { display: flex; flex-direction: column; gap: .35em; padding: 1.8em 1.2em; background: rgba(0,0,0,.22); border-right: 1px solid var(--line); }
.app-logo { display: flex; align-items: center; gap: .6em; font-size: 1.35em; font-weight: 650; letter-spacing: -0.03em; margin: 0 0 1.2em .3em; }
.app-logo b { color: var(--lime); font-weight: inherit; }
.app-logo .logo__mark { width: .95em; height: .95em; border-width: .16em; }
.app-logo .logo__mark::after { width: .35em; height: .14em; right: -.3em; bottom: -.18em; }
.app-logo .logo__mark::before { inset: .18em; }
.app-nav { display: flex; align-items: center; gap: .75em; padding: .65em .8em; border-radius: .7em; color: var(--dim); font-size: 1em; }
.app-nav em { margin-left: auto; font-style: normal; font-size: .85em; }
.app-nav.is-on { background: var(--lime-soft); color: var(--lime); }
.app-usage { margin-top: auto; display: grid; gap: .55em; padding: 1em; border-radius: .9em; background: var(--panel-2); font-size: .85em; color: var(--dim); }
.app-usage > div { height: .4em; border-radius: 1em; background: rgba(255,255,255,.08); overflow: hidden; }
.app-usage > div i { display: block; height: 100%; background: var(--lime); border-radius: inherit; }
.app-usage small { color: var(--text); font-size: 1em; }
.app-main { display: grid; grid-template-rows: auto auto auto 1fr; gap: 1.2em; padding: 1.6em 2em 2em; min-width: 0; min-height: 0; }
.app-top { display: flex; justify-content: space-between; align-items: center; }
.app-crumb { display: flex; gap: .6em; color: var(--dim); font-size: 1em; }
.app-crumb i { font-style: normal; opacity: .5; } .app-crumb b { color: var(--text); font-weight: 550; }
.app-user { display: flex; align-items: center; gap: 1em; color: var(--dim); font-size: .95em; }
.app-user i { font-style: normal; width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 50%; background: var(--panel-3); color: var(--text-2); font-size: .85em; }
.app-search { display: grid; grid-template-columns: 1.5fr 1fr auto auto; gap: .7em; font-size: 1.05em; }
.app-search--xl { margin-top: .4em; }
.app-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; font-size: .92em; }
.app-filters span { padding: .42em .9em; border-radius: 99em; box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); }
.app-filters span.is-on { background: var(--lime-soft); box-shadow: inset 0 0 0 1px var(--lime-line); color: var(--lime); }
.app-filters em { margin-left: auto; font-style: normal; color: var(--dim); }
.app-filters em b { color: var(--text); font-weight: 500; }
.app-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2em; min-height: 0; }

/* table (shared) */
.table { border-radius: 1em; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; align-self: start; background: rgba(0,0,0,.08); }
.tr { display: grid; grid-template-columns: 1fr 6.5em 7em 7.2em; align-items: center; gap: 1em; padding: .85em 1.2em; border-top: 1px solid var(--line); transition: background 400ms, opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.th { border-top: 0; font-size: .8em; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); background: rgba(0,0,0,.18); }
.tr b { display: block; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr small { display: block; font-size: .85em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr > span:nth-child(2) { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr.is-new { opacity: 0; transform: translateY(.6em); }
.tr.is-sel { background: rgba(197,242,74,.06); box-shadow: inset .22em 0 0 var(--lime); }
.bar { display: flex; align-items: center; gap: .5em; font-family: var(--font-mono); font-size: .95em; }
.bar i { flex: 1; height: .35em; border-radius: 1em; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.bar i::after { content: ""; position: absolute; inset: 0; width: var(--v); background: var(--c, var(--lime)); border-radius: inherit; transition: width 900ms var(--ease-out); }
.table--wide .tr { grid-template-columns: 1.6fr 1fr 1.2fr .7fr .7fr 1fr 1fr; }
.yes { color: var(--teal); } .no { color: var(--dim-2); }
@media (max-width: 720px) { .table--wide .tr { grid-template-columns: 1.6fr .8fr 1fr; } .table--wide .tr > :nth-child(2), .table--wide .tr > :nth-child(3), .table--wide .tr > :nth-child(4), .table--wide .tr > :nth-child(5) { display: none; } }

/* map (shared) */
.map { position: relative; border-radius: 1em; overflow: hidden; background: radial-gradient(120% 90% at 40% 40%, #121821, #0C1016); box-shadow: inset 0 0 0 1px var(--line); min-height: 14em; }
.map--lg { width: 100%; height: 100%; min-height: 0; border-radius: 1.2em; }
.map__streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__streets path { fill: none; stroke: rgba(255,255,255,.07); stroke-width: .6; vector-effect: non-scaling-stroke; }
.map__streets path.minor { stroke: rgba(255,255,255,.035); }
.map__streets path.river { stroke: rgba(80,140,200,.22); stroke-width: 6; stroke-linecap: round; }
.map__radius { position: absolute; left: 46%; top: 44%; width: 62%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px dashed rgba(197,242,74,.35); background: radial-gradient(closest-side, rgba(197,242,74,.06), transparent); }
.map__pins { position: absolute; inset: 0; }
.pin { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: .9em; height: .9em; translate: -50% -50%; border-radius: 50%; background: var(--c, var(--lime)); box-shadow: 0 0 0 .25em rgba(10,12,16,.8); transform: scale(0); transition: transform 500ms var(--ease-spring); }
.pin.is-on { transform: scale(1); }
.pin--bg { width: .55em; height: .55em; opacity: .7; }
.pin.is-sel { box-shadow: 0 0 0 .25em rgba(10,12,16,.8), 0 0 0 .6em rgba(197,242,74,.25); animation: pinpulse 1.8s infinite; }
@keyframes pinpulse { 50% { box-shadow: 0 0 0 .25em rgba(10,12,16,.8), 0 0 0 1em rgba(197,242,74,0); } }
.map__card { position: absolute; left: 50%; top: 50%; translate: 1.4em -110%; display: grid; gap: .1em; padding: .9em 1.1em; border-radius: .9em; background: rgba(23,27,35,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 1em 2em rgba(0,0,0,.4); min-width: 13em; transition: left 600ms var(--ease-out), top 600ms var(--ease-out), opacity 300ms; }
.map__card b { font-weight: 600; font-size: 1em; white-space: nowrap; }
.map__card > span { font-size: .85em; color: var(--dim); }
.map__score { display: flex; align-items: baseline; gap: .5em; margin-top: .4em; }
.map__score em { font-style: normal; font-family: var(--font-mono); color: var(--lime); font-size: 1.4em; font-weight: 600; }
.map__score small { color: var(--dim); font-size: .8em; }
.map__legend { position: absolute; right: .8em; bottom: .6em; font-size: .7em; color: var(--dim-2); }
.found { position: absolute; left: 1.2em; bottom: 1.2em; display: grid; padding: 1em 1.3em; border-radius: 1em; background: rgba(23,27,35,.88); box-shadow: inset 0 0 0 1px var(--line-2); }
.found b { font-size: 2.4em; font-weight: 600; color: var(--lime); line-height: 1; }
.found span { color: var(--dim); font-size: .95em; }

/* hero dashboard on narrow screens */
@container (max-width: 720px) {
  .app { font-size: 2.3cqw; grid-template-columns: 1fr; aspect-ratio: auto; }
  .app-side, .app-top, .map, .app-filters span:nth-child(n+4) { display: none; }
  .app-main { padding: 1.4em; }
  .app-search { grid-template-columns: 1fr 1fr; }
  .app-search .seg { display: none; }
  .app-search .go { grid-column: 1 / -1; }
  .app-body { grid-template-columns: 1fr; }
  .app .tr { grid-template-columns: 1fr 7em 7.5em; }
  .app .tr > span:nth-child(2) { display: none; }
  .app .tr:nth-child(n+7) { display: none; }
}

/* ==========================================================================
   HOW-IT-WORKS scenes
   ========================================================================== */
.scene .panel { max-width: 520px; }
.pf { display: grid; gap: .5em; }
.pf small { color: var(--dim); font-size: .9em; }
.pf__box { display: flex; align-items: center; gap: .7em; height: 3.4em; padding: 0 1em; border-radius: .8em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.pf__box .i { color: var(--dim); }
.pf__box em { margin-left: auto; font-style: normal; font-size: .85em; color: var(--dim); padding: .2em .6em; border-radius: 99em; background: rgba(255,255,255,.05); }
.pf:first-of-type .pf__box { box-shadow: inset 0 0 0 1px var(--lime-line), 0 0 0 .28em var(--lime-soft); }
.seg--lg { justify-content: space-between; } .seg--lg span { flex: 1; text-align: center; }
.toggles { display: grid; gap: .5em; }
.tg { display: flex; justify-content: space-between; align-items: center; padding: .9em 1em; border-radius: .8em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.tg i { width: 2.4em; height: 1.4em; border-radius: 1em; background: var(--panel-3); position: relative; transition: background 300ms; }
.tg i::after { content: ""; position: absolute; left: .2em; top: .2em; width: 1em; height: 1em; border-radius: 50%; background: var(--dim); transition: transform 400ms var(--ease-spring), background 300ms; }
.tg.is-on i { background: var(--lime); }
.tg.is-on i::after { transform: translateX(1em); background: var(--lime-ink); }
.tg b { font-weight: 500; color: var(--dim); font-size: .9em; }
.qual { display: flex; align-items: center; gap: 1.4em; }
.qual > div:last-child b { display: block; font-size: 1.2em; font-weight: 600; }
.qual > div:last-child span { color: var(--dim); font-size: .9em; }
.qual .ring b { font-size: 2.2em; }
.findings { display: grid; gap: .45em; }
.findings li { display: flex; align-items: center; gap: .8em; padding: .75em 1em; border-radius: .7em; background: var(--panel-2); opacity: 0; transform: translateX(-.6em); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); }
.findings li i { font-style: normal; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: .45em; font-size: .85em; font-weight: 700; }
.findings li.bad i { background: rgba(242,104,90,.14); color: var(--bad); }
.findings li.warn i { background: rgba(245,181,68,.14); color: var(--warn); }
.findings li.ok i { background: rgba(52,211,180,.14); color: var(--teal); }
.findings li b { margin-left: auto; font-weight: 500; }
.scene.is-on .findings li { opacity: 1; transform: none; }
.scene.is-on .findings li:nth-child(2) { transition-delay: 120ms; } .scene.is-on .findings li:nth-child(3) { transition-delay: 240ms; }
.scene.is-on .findings li:nth-child(4) { transition-delay: 360ms; } .scene.is-on .findings li:nth-child(5) { transition-delay: 480ms; } .scene.is-on .findings li:nth-child(6) { transition-delay: 600ms; }
.exp { display: grid; gap: .6em; }
.exp__file { display: flex; align-items: center; gap: 1em; padding: 1em; border-radius: .9em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.exp__file.is-on { box-shadow: inset 0 0 0 1px var(--lime-line); background: rgba(197,242,74,.04); }
.exp__file > i { font-style: normal; width: 3em; height: 3.4em; display: grid; place-items: end center; padding-bottom: .5em; border-radius: .5em; background: rgba(52,211,180,.12); color: var(--teal); font-size: .75em; font-weight: 700; font-family: var(--font-mono); }
.exp__file:nth-child(2) > i { background: rgba(142,184,255,.12); color: var(--info); }
.exp__file b { display: block; font-weight: 550; }
.exp__file span { font-size: .85em; color: var(--dim); }
.exp__hint { display: flex; align-items: center; gap: .6em; color: var(--dim); font-size: .92em; }
.go--dl .dl { width: 1em; height: 1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M12 4v12m0 0-5-5m5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M12 4v12m0 0-5-5m5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat; }
.scene.is-on .go--dl .dl { animation: dl 1.6s var(--ease-in-out) infinite; }
@keyframes dl { 50% { transform: translateY(.25em); } }

/* ==========================================================================
   FEATURE visualisations
   ========================================================================== */
.viz-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.viz-cats span { font-size: 13px; padding: 7px 12px; border-radius: 99px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); transition: all 400ms var(--ease-out); }
.viz-cats span.is-hot { background: var(--lime-soft); color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-line); }
.viz-cats small { width: 100%; font-family: var(--font-mono); font-size: 10.5px; color: var(--dim-2); text-transform: uppercase; letter-spacing: .1em; margin-top: 8px; }
.viz-radius { display: flex; gap: 6px; }
.viz-radius span { flex: 1; text-align: center; padding: 10px 0; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--dim); transition: all 400ms var(--ease-out); }
.viz-radius span.is-on { background: var(--lime); color: var(--lime-ink); box-shadow: none; font-weight: 600; }
.viz-rings { position: relative; height: 110px; margin-bottom: 14px; }
.viz-rings i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; border: 1px dashed var(--line-3); transition: all 600ms var(--ease-out); }
.viz-rings i.is-on { border-color: var(--lime); border-style: solid; background: radial-gradient(closest-side, rgba(197,242,74,.08), transparent); }
.viz-rings b { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; translate: -50% -50%; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.viz-score { display: grid; gap: 7px; }
.viz-score div { display: grid; grid-template-columns: 1fr 90px 26px; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.viz-score div i { height: 5px; border-radius: 4px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
.viz-score div i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--lime); border-radius: inherit; transition: width 900ms var(--ease-out); }
.viz-score b { font-family: var(--font-mono); font-weight: 500; color: var(--text); font-size: 12px; text-align: right; }
.viz-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.viz-filters span { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--text-2); transition: all 400ms var(--ease-out); }
.viz-filters span em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--dim-2); }
.viz-filters span.is-on { box-shadow: inset 0 0 0 1px var(--lime-line); background: rgba(197,242,74,.05); }
.viz-filters span.is-on em { color: var(--lime); }
.viz-pipe { display: flex; flex-wrap: wrap; gap: 6px; }
.viz-pipe .pill { font-size: 12px; transition: all 400ms var(--ease-out); }
.viz-pipe .pill.is-dim { opacity: .35; }
.viz-mail { display: grid; gap: 8px; }
.viz-mail div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--text-2); }
.viz-mail div b { margin-left: auto; font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--dim); }
.viz-mail div i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.viz-mail div:nth-child(2) i { background: var(--info); } .viz-mail div:nth-child(3) i { background: var(--violet); }
.viz-calls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.viz-calls span { font-size: 12px; padding: 9px 8px; border-radius: 9px; text-align: center; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); transition: all 400ms var(--ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-calls span.is-on { background: var(--lime-soft); color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime-line); }
.viz-export { display: flex; gap: 10px; align-items: center; }
.viz-export span { flex: 1; display: grid; gap: 4px; justify-items: center; padding: 16px 0; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.viz-export span b { font-size: 18px; color: var(--text); }
.viz-export i { font-style: normal; color: var(--lime); font-size: 18px; }

/* ==========================================================================
   SHOWCASE components
   ========================================================================== */
.cats { display: grid; gap: 1.1em; }
.cats__group { display: flex; flex-wrap: wrap; gap: .45em; align-items: center; }
.cats__group small { width: 100%; font-family: var(--font-mono); font-size: .78em; text-transform: uppercase; letter-spacing: .1em; color: var(--dim-2); }
.cats__group span { padding: .5em .9em; border-radius: 99em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); font-size: .95em; }
.cats__group span.is-on { background: var(--lime); color: var(--lime-ink); box-shadow: none; font-weight: 600; }
.detail { gap: 1.6em; }
.detail__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.detail__head > div:first-child b { display: block; font-size: 1.5em; letter-spacing: -0.02em; font-weight: 600; }
.detail__head > div:first-child span { color: var(--dim); }
.detail__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.2em; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; align-content: start; }
.checks div { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .7em .85em; border-radius: .7em; background: var(--panel-2); font-size: .95em; }
.checks span { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checks b { font-weight: 550; }
.mail { display: grid; gap: .6em; padding: 1.1em; border-radius: 1em; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); align-content: start; }
.mail__bar { display: flex; gap: .3em; padding: .25em; border-radius: .7em; background: rgba(0,0,0,.25); justify-self: start; }
.mail__bar span { padding: .45em .8em; border-radius: .5em; font-size: .9em; color: var(--dim); }
.mail__bar span.is-on { background: var(--panel-3); color: var(--text); }
.mail__line { display: flex; gap: .8em; padding: .55em 0; border-bottom: 1px solid var(--line); font-size: .95em; white-space: nowrap; overflow: hidden; }
.mail__line small { color: var(--dim-2); width: 4.4em; flex: none; font-size: 1em; }
.mail__body { display: grid; gap: .55em; padding: .6em 0; }
.mail__body i { height: .5em; border-radius: 1em; background: rgba(255,255,255,.07); }
.mail__foot { display: flex; justify-content: space-between; align-items: center; gap: .6em; }
.mail__foot .go { height: 2.6em; font-size: .92em; }
@media (max-width: 720px) { .detail__grid { grid-template-columns: 1fr; } }