/* ==========================================================================
   QUICKCHALLENGE 2.0 — COMPONENT SYSTEM
   Every component defines: default · hover · active · selected · disabled ·
   loading · success · warning · error · empty · locked · expired
   ========================================================================== */

/* =========================== 1. BUTTONS ================================= */
.btn{
  --btn-h:38px;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  height:var(--btn-h); padding:0 16px; min-width:44px;
  border-radius:var(--r-sm); border:1px solid transparent;
  font-size:var(--t-sm); font-weight:600; letter-spacing:-.005em;
  white-space:nowrap; position:relative; overflow:hidden;
  transition:background var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out),
             color var(--d-2) var(--e-out), transform var(--d-1) var(--e-out),
             box-shadow var(--d-2) var(--e-out);
}
.btn svg{ flex:none; }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn.is-disabled{ opacity:.42; pointer-events:none; filter:saturate(.3); }

/* primary — one per view region, never two competing */
.btn-primary{ background:var(--lime); color:var(--on-lime); font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.18) inset; }
.btn-primary:hover{ background:var(--lime-hi); box-shadow:var(--glow-lime-s); }
.btn-primary:active{ background:var(--lime-deep); }
.btn-primary.is-selected{ background:var(--lime-hi); box-shadow:var(--glow-lime-s); }

/* secondary */
.btn-secondary{ background:var(--surface-3); border-color:var(--line-2); color:var(--tx-1); }
.btn-secondary:hover{ background:var(--surface-4); border-color:var(--line-3); }
.btn-secondary:active{ background:var(--surface-5); }

/* outline — quiet, for secondary CTAs on dense screens */
.btn-outline{ background:transparent; border-color:var(--line-3); color:var(--tx-1); }
.btn-outline:hover{ border-color:var(--lime-45); color:var(--lime); background:var(--lime-04); }

/* ghost — tertiary */
.btn-ghost{ background:transparent; color:var(--tx-2); }
.btn-ghost:hover{ background:var(--surface-3); color:var(--tx-1); }

/* danger */
.btn-danger{ background:rgba(255,92,92,.14); border-color:rgba(255,92,92,.35); color:#ff8f8f; }
.btn-danger:hover{ background:rgba(255,92,92,.22); color:#ffb0b0; }

/* link-as-button */
.btn-link{ background:transparent; color:var(--lime); padding:0 6px; height:auto; }
.btn-link:hover{ text-decoration:underline; text-underline-offset:3px; }

/* sizes */
.btn-sm{ --btn-h:30px; padding:0 11px; font-size:var(--t-xs); gap:6px; }
.btn-lg{ --btn-h:48px; padding:0 22px; font-size:15px; border-radius:var(--r-md); }
.btn-xl{ --btn-h:56px; padding:0 28px; font-size:16px; border-radius:var(--r-md); letter-spacing:-.01em; }
.btn-block{ width:100%; }
.btn-icon{ --btn-h:34px; width:34px; padding:0; }
.btn-icon.btn-sm{ --btn-h:28px; width:28px; }

/* loading */
.btn.is-loading{ color:transparent !important; pointer-events:none; }
.btn.is-loading::after{
  content:''; position:absolute; left:50%; top:50%; width:15px; height:15px;
  margin:-7.5px 0 0 -7.5px; border-radius:50%;
  border:2px solid rgba(0,0,0,.28); border-top-color:currentColor;
  animation:spin .7s linear infinite;
}
.btn-secondary.is-loading::after,.btn-outline.is-loading::after,.btn-ghost.is-loading::after{
  border-color:rgba(255,255,255,.2); border-top-color:var(--tx-1);
}

/* ripple on challenge start (subtle confirmation) */
@keyframes btn-confirm{ 0%{box-shadow:0 0 0 0 var(--acc-glow)} 100%{box-shadow:0 0 0 18px rgba(0,0,0,0)} }
.btn.is-confirmed{ animation:btn-confirm .62s var(--e-out); }

/* icon button */
.icon-btn{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); color:var(--tx-3); border:1px solid transparent;
  transition:all var(--d-2) var(--e-out); flex:none;
}
.icon-btn:hover{ background:var(--surface-3); color:var(--tx-1); border-color:var(--line); }
.icon-btn.is-active{ background:var(--lime-08); color:var(--lime); border-color:var(--line-lime); }

/* =========================== 2. FORM CONTROLS =========================== */
.field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.label{ font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3); }
.label .req{ color:var(--lime); margin-left:3px; }
.hint{ font-size:var(--t-xs); color:var(--tx-4); line-height:1.45; }
.err-msg{ font-size:var(--t-xs); color:#ff8f8f; display:flex; gap:6px; align-items:flex-start; font-weight:500; }

.input,.select,.textarea{
  width:100%; height:40px; padding:0 12px;
  background:var(--surface-1); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--tx-1); font-size:var(--t-sm); font-weight:450;
  transition:border-color var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out), background var(--d-2);
}
.textarea{ height:auto; min-height:92px; padding:11px 12px; line-height:1.55; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:var(--tx-5); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--line-3); }
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--lime); box-shadow:0 0 0 3px var(--lime-12); background:var(--bg);
}
.input[disabled],.select[disabled],.textarea[disabled]{ background:var(--surface-1); color:var(--tx-5); opacity:.6; cursor:not-allowed; }
.input.is-error,.select.is-error{ border-color:rgba(255,92,92,.6); box-shadow:0 0 0 3px rgba(255,92,92,.10); }
.input.is-ok{ border-color:rgba(127,220,90,.45); }
.input-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

.select{
  appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23939cab' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
}
.select option{ background:var(--surface-2); color:var(--tx-1); }

/* input with unit prefix/suffix */
.input-group{ display:flex; align-items:stretch; }
.input-group .input{ border-radius:var(--r-sm) 0 0 var(--r-sm); }
.input-affix{
  display:flex; align-items:center; padding:0 12px; font-size:var(--t-xs); font-weight:600;
  background:var(--surface-3); border:1px solid var(--line-2); border-left:0;
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--tx-3); font-family:var(--mono);
}

/* checkbox / radio */
.check{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; min-height:20px; }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check .box{
  width:18px; height:18px; flex:none; border-radius:5px; border:1.5px solid var(--line-3);
  background:var(--surface-1); display:grid; place-items:center; margin-top:1px;
  transition:all var(--d-2) var(--e-out);
}
.check .box svg{ opacity:0; transform:scale(.6); transition:all var(--d-2) var(--e-out); color:var(--on-lime); }
.check input:checked + .box{ background:var(--lime); border-color:var(--lime); }
.check input:checked + .box svg{ opacity:1; transform:scale(1); }
.check input:focus-visible + .box{ box-shadow:0 0 0 3px var(--lime-18); }
.check:hover .box{ border-color:var(--tx-4); }
.check input:disabled + .box{ opacity:.4; }
.check.is-locked .box{ background:var(--surface-3); border-style:dashed; }

/* toggle */
.toggle{ width:38px; height:22px; border-radius:99px; background:var(--surface-4); border:1px solid var(--line-2); position:relative; cursor:pointer; transition:all var(--d-3) var(--e-out); flex:none; }
.toggle::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--tx-3); transition:all var(--d-3) var(--e-out); }
.toggle[aria-checked="true"],.toggle.is-on{ background:var(--lime-18); border-color:var(--lime-45); }
.toggle[aria-checked="true"]::after,.toggle.is-on::after{ left:18px; background:var(--lime); }

/* segmented control */
.seg{ display:inline-flex; padding:3px; gap:2px; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-md); }
.seg button,.seg a{
  height:30px; padding:0 13px; border-radius:var(--r-sm); font-size:var(--t-xs); font-weight:600;
  color:var(--tx-3); display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:all var(--d-2) var(--e-out);
}
.seg button:hover,.seg a:hover{ color:var(--tx-1); background:var(--surface-3); }
.seg button.is-selected,.seg a.is-selected{ background:var(--surface-4); color:var(--tx-1); box-shadow:var(--sh-1); }
.seg button.is-selected.lime,.seg a.is-selected.lime{ background:var(--lime); color:var(--on-lime); }
.seg-block{ display:flex; width:100%; }
.seg-block button,.seg-block a{ flex:1 1 0; justify-content:center; }

/* tabs (underlined) */
.tabs{ display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  height:42px; padding:0 15px; display:inline-flex; align-items:center; gap:7px;
  font-size:var(--t-sm); font-weight:550; color:var(--tx-3); white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--d-2) var(--e-out), border-color var(--d-2) var(--e-out);
}
.tab:hover{ color:var(--tx-1); }
.tab.is-selected{ color:var(--lime); border-bottom-color:var(--lime); font-weight:650; }
.tab .count{ font-family:var(--mono); font-size:11px; padding:1px 6px; border-radius:99px; background:var(--surface-3); color:var(--tx-3); }
.tab.is-selected .count{ background:var(--lime-12); color:var(--lime); }

/* =========================== 3. NAVIGATION ============================== */
/* public top nav */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h-pub);
  background:var(--nav-bg); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; gap:var(--s6); height:100%; }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-link{
  height:36px; padding:0 12px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:7px;
  font-size:var(--t-sm); font-weight:550; color:var(--tx-3); transition:all var(--d-2) var(--e-out);
}
.nav-link:hover{ color:var(--tx-1); background:var(--surface-4); }
.nav-link.is-selected{ color:var(--tx-1); background:var(--surface-4); box-shadow:inset 0 0 0 1px var(--line-2); }
.nav-link.is-selected::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--lime); }

/* brand lockup */
.brand{ display:inline-flex; align-items:center; gap:10px; flex:none; }
.brand-mark{
  width:28px; height:28px; border-radius:8px; background:var(--lime); display:grid; place-items:center;
  box-shadow:var(--mark-glow); font-family:var(--font-head); font-weight:800; font-size:16px;
  color:var(--on-lime); line-height:1; letter-spacing:-.02em;
}
.brand-mark svg{ width:16px; height:16px; color:var(--on-lime); }
.brand-name{ font-family:var(--font-head); font-size:16px; font-weight:800; letter-spacing:-.045em; color:var(--tx-1); line-height:1; }
.brand-name span{ color:var(--lime); font-weight:800; letter-spacing:-.01em; }
.brand-tag{ font-size:9.5px; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--tx-4); margin-top:2px; }

/* app shell: rail + topbar */
.app-shell{ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; }
.app-shell.rail-sm{ grid-template-columns:var(--rail-w-sm) minmax(0,1fr); }
.rail{
  border-right:1px solid var(--line); background:var(--surface-1);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden;
}
.rail-head{ height:var(--nav-h); display:flex; align-items:center; padding:0 var(--s4); border-bottom:1px solid var(--line); flex:none; gap:10px; }
.rail-nav{ padding:var(--s4) var(--s3); display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; }
.rail-group{ margin-top:var(--s5); }
.rail-group:first-child{ margin-top:0; }
.rail-group .micro{ padding:0 10px 8px; color:var(--tx-4); }
.rail-item{
  display:flex; align-items:center; gap:11px; height:36px; padding:0 10px;
  border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:520; color:var(--tx-3);
  transition:all var(--d-2) var(--e-out); position:relative; width:100%; text-align:left;
}
.rail-item svg{ flex:none; opacity:.85; }
.rail-item:hover{ background:var(--surface-3); color:var(--tx-1); }
.rail-item.is-selected{ background:var(--lime-08); color:var(--lime); font-weight:650; }
.rail-item.is-selected::before{ content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--lime); }
.rail-item .badge-n{ margin-left:auto; font-family:var(--mono); font-size:10.5px; padding:1px 6px; border-radius:99px; background:var(--surface-4); color:var(--tx-3); }
.rail-item.is-selected .badge-n{ background:var(--lime-18); color:var(--lime); }
.rail-item.is-locked{ color:var(--tx-5); }
.rail-item.is-locked svg{ opacity:.5; }
.rail-foot{ padding:var(--s3); border-top:1px solid var(--line); flex:none; }

.topbar{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:var(--topbar-bg); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--s4);
  padding:0 var(--s5);
}
.topbar-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.page{ padding:var(--s6) var(--s6) var(--s9); display:flex; flex-direction:column; gap:var(--s5); }
.page-flush{ padding:0; }

/* breadcrumb */
.crumbs{ display:flex; align-items:center; gap:7px; font-size:var(--t-xs); color:var(--tx-4); }
.crumbs a:hover{ color:var(--tx-1); }
.crumbs .sep{ opacity:.5; }
.crumbs .cur{ color:var(--tx-2); font-weight:550; }

/* mobile bottom nav */
.tabbar{ display:none; }

/* =========================== 4. CHIPS / BADGES / PILLS ================== */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px;
  border-radius:var(--r-pill); background:var(--surface-3); border:1px solid var(--line-2);
  font-size:11.5px; font-weight:600; color:var(--tx-2); white-space:nowrap;
}
.chip-mono{ font-family:var(--mono); letter-spacing:-.01em; }
.chip-lime{ background:var(--lime-08); border-color:var(--line-lime); color:var(--lime); }
.chip-outline{ background:transparent; border-color:var(--line-2); color:var(--tx-3); }
.chip-info{ background:var(--info-12); border-color:rgba(87,183,255,.3); color:#8ccfff; }
.chip-warn{ background:var(--risk-caution-bg); border-color:rgba(245,197,66,.32); color:var(--risk-caution); }
.chip-danger{ background:var(--risk-breach-bg); border-color:rgba(255,92,92,.34); color:#ff9a9a; }
.chip-ok{ background:var(--risk-safe-bg); border-color:rgba(127,220,90,.3); color:var(--risk-safe); }
.chip-lock{ background:var(--surface-1); border-style:dashed; border-color:var(--line-3); color:var(--tx-4); }
button.chip{ transition:all var(--d-2) var(--e-out); }
button.chip:hover{ border-color:var(--line-3); color:var(--tx-1); background:var(--surface-4); }
button.chip.is-selected{ background:var(--lime-12); border-color:var(--line-lime); color:var(--lime); }
button.chip[disabled]{ opacity:.4; pointer-events:none; }

.pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--r-pill); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.dot{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.dot-lg{ width:8px; height:8px; }
@keyframes pulse-dot{ 0%,100%{opacity:1; box-shadow:0 0 0 0 currentColor} 50%{opacity:.55; box-shadow:0 0 0 4px transparent} }
.dot-live{ animation:pulse-dot 1.8s var(--e-inout) infinite; }

/* status pill — semantic, always icon+label+color */
.status{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
  border-radius:var(--r-pill); font-size:11px; font-weight:650; letter-spacing:.02em;
  border:1px solid; white-space:nowrap;
}
.status svg{ width:12px; height:12px; }
.status-safe,.status-ok,.status-active{ color:var(--risk-safe); border-color:rgba(127,220,90,.3); background:var(--risk-safe-bg); }
.status-caution{ color:var(--risk-caution); border-color:rgba(245,197,66,.32); background:var(--risk-caution-bg); }
.status-warning,.status-pending{ color:var(--risk-warning); border-color:rgba(255,154,60,.34); background:var(--risk-warning-bg); }
.status-breach,.status-error,.status-failed{ color:#ff9a9a; border-color:rgba(255,92,92,.36); background:var(--risk-breach-bg); }
.status-neutral,.status-idle{ color:var(--tx-3); border-color:var(--line-2); background:var(--surface-1); }
.status-info{ color:#8ccfff; border-color:rgba(87,183,255,.3); background:var(--info-12); }
.status-lime{ color:var(--lime); border-color:var(--line-lime); background:var(--lime-08); }
.status-locked,.status-expired{ color:var(--tx-4); border-color:var(--line-2); background:var(--surface-1); border-style:dashed; }

/* =========================== 5. METRICS ================================= */
/* metric block — the atomic unit of every dashboard. NOT a card. */
.metric{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.metric-k{ font-size:var(--t-micro); font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-4); display:flex; align-items:center; gap:6px; }
.metric-v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:26px; font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--tx-1); }
.metric-v.sm{ font-size:19px; }
.metric-v.lg{ font-size:34px; }
.metric-v.xl{ font-size:46px; letter-spacing:-.045em; }
.metric-s{ font-size:var(--t-xs); color:var(--tx-4); display:flex; align-items:center; gap:5px; }
.metric.lime .metric-v{ color:var(--lime); }
.metric.up .metric-v{ color:var(--up); }
.metric.down .metric-v{ color:var(--down); }
.metric.warn .metric-v{ color:var(--risk-warning); }
.metric.breach .metric-v{ color:var(--risk-breach); }

/* delta */
.delta{ display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:-.01em; }
.delta-up{ color:var(--up); } .delta-down{ color:var(--down); } .delta-flat{ color:var(--tx-4); }

/* KPI strip — divided row, no nested cards */
.kpi-row{
  display:grid; gap:0; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.kpi{ padding:var(--s4) var(--s5); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:7px; min-width:0; position:relative; }
.kpi:last-child{ border-right:0; }
.kpi-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.kpi-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.kpi-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.kpi-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.kpi-hero{ background:linear-gradient(135deg,var(--acc-08),transparent 62%); }
.kpi::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; }
.kpi.is-alert::after{ background:var(--risk-warning); }
.kpi.is-breach::after{ background:var(--risk-breach); }

/* inline metric list — key/value rows inside a panel, no boxes */
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding:9px 0; border-bottom:1px solid var(--line-soft); }
.kv:last-child{ border-bottom:0; }
.kv-k{ font-size:var(--t-sm); color:var(--tx-3); }
.kv-v{ font-size:var(--t-sm); font-weight:600; color:var(--tx-1); text-align:right; }
.kv-v.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.kv-dense .kv{ padding:6px 0; }

/* =========================== 6. PROGRESS / RISK ========================= */
.bar{ height:6px; border-radius:99px; background:var(--surface-4); overflow:hidden; position:relative; }
.bar i{ display:block; height:100%; border-radius:99px; background:var(--lime); transition:width var(--d-5) var(--e-out); }
.bar.thin{ height:3px; }
.bar.thick{ height:10px; }
.bar.safe i{ background:var(--risk-safe); }
.bar.caution i{ background:var(--risk-caution); }
.bar.warning i{ background:var(--risk-warning); }
.bar.breach i{ background:var(--risk-breach); }
.bar.info i{ background:var(--info); }
.bar.striped i{ background-image:linear-gradient(45deg,rgba(0,0,0,.16) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.16) 50%,rgba(0,0,0,.16) 75%,transparent 75%); background-size:8px 8px; }

/* risk meter — the core risk primitive. color + icon + label + number always. */
.risk-meter{ display:flex; flex-direction:column; gap:8px; }
.risk-top{ display:flex; align-items:center; gap:8px; }
.risk-top .name{ font-size:var(--t-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--tx-3); display:flex; align-items:center; gap:6px; }
.risk-top .val{ margin-left:auto; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; color:var(--tx-1); letter-spacing:-.015em; }
.risk-track{ height:8px; border-radius:99px; background:var(--surface-1); border:1px solid var(--line); position:relative; overflow:hidden; }
.risk-fill{ position:absolute; inset:0 auto 0 0; border-radius:99px; transition:width var(--d-4) var(--e-out); }
.risk-track .cap{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--line-3); }
.risk-foot{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--tx-4); }
.risk-meter.safe .risk-fill{ background:linear-gradient(90deg,rgba(127,220,90,.55),var(--risk-safe)); }
.risk-meter.safe .state{ color:var(--risk-safe); }
.risk-meter.caution .risk-fill{ background:linear-gradient(90deg,rgba(245,197,66,.5),var(--risk-caution)); }
.risk-meter.caution .state{ color:var(--risk-caution); }
.risk-meter.warning .risk-fill{ background:linear-gradient(90deg,rgba(255,154,60,.5),var(--risk-warning)); }
.risk-meter.warning .state{ color:var(--risk-warning); }
.risk-meter.breach .risk-fill{ background:linear-gradient(90deg,rgba(255,92,92,.5),var(--risk-breach)); }
.risk-meter.breach .state{ color:#ff9a9a; }
.state{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:750; letter-spacing:.09em; text-transform:uppercase; }
@keyframes risk-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,154,60,.0) } 50%{ box-shadow:0 0 0 3px rgba(255,154,60,.16) } }
.risk-meter.warning .risk-track{ animation:risk-pulse 1.9s var(--e-inout) infinite; }
@keyframes breach-flash{ 0%,100%{ background:rgba(255,92,92,.06) } 50%{ background:rgba(255,92,92,.13) } }
.risk-meter.breach{ animation:breach-flash 1.5s var(--e-inout) infinite; border-radius:var(--r-md); }

/* rule row — compliance checklist */
.rule-row{ display:flex; align-items:center; gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--line-soft); }
.rule-row:last-child{ border-bottom:0; }
.rule-ico{ width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; border:1px solid; }
.rule-ico svg{ width:14px; height:14px; }
.rule-ok .rule-ico{ color:var(--risk-safe); border-color:rgba(127,220,90,.3); background:var(--risk-safe-bg); }
.rule-caution .rule-ico{ color:var(--risk-caution); border-color:rgba(245,197,66,.32); background:var(--risk-caution-bg); }
.rule-warn .rule-ico{ color:var(--risk-warning); border-color:rgba(255,154,60,.34); background:var(--risk-warning-bg); }
.rule-breach .rule-ico{ color:#ff9a9a; border-color:rgba(255,92,92,.36); background:var(--risk-breach-bg); }
.rule-lock .rule-ico{ color:var(--tx-4); border-color:var(--line-2); background:var(--surface-1); }

/* =========================== 7. SCORE =================================== */
.score-dial{ position:relative; display:grid; place-items:center; }
.score-dial svg{ overflow:visible; }
.score-dial .sc-track{ fill:none; stroke:var(--surface-4); }
.score-dial .sc-fill{ fill:none; stroke-linecap:round; transition:stroke-dashoffset 1s var(--e-out); }
.score-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; }
.score-n{ font-family:var(--mono); font-weight:700; letter-spacing:-.05em; line-height:.9; color:var(--tx-1); font-variant-numeric:tabular-nums; }
.score-n.xl{ font-size:64px; }
.score-n.lg{ font-size:46px; }
.score-n.md{ font-size:30px; }
.score-of{ font-family:var(--mono); font-size:11px; color:var(--tx-4); letter-spacing:.02em; }

/* segmented score bar — the 4 weighted parts */
.score-seg{ display:flex; height:10px; border-radius:99px; overflow:hidden; gap:2px; background:var(--surface-1); }
.score-seg i{ display:block; height:100%; }
.score-legend{ display:flex; flex-direction:column; gap:10px; }
.score-leg{ display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:10px; align-items:center; }
.score-leg .sw{ width:10px; height:10px; border-radius:3px; }
.score-leg .nm{ font-size:var(--t-sm); color:var(--tx-2); }
.score-leg .nm small{ display:block; font-size:11px; color:var(--tx-4); margin-top:1px; }
.score-leg .vv{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:600; color:var(--tx-1); }
.score-leg .vv em{ font-style:normal; color:var(--tx-5); font-size:11px; }

/* tier ladder */
.tier{ display:flex; align-items:center; gap:var(--s3); }
.tier-badge{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:13px; font-weight:700; border:1px solid;
}
.tier-elite .tier-badge{ color:var(--elite); border-color:var(--lime-40); background:var(--lime-10); }
.tier-pro .tier-badge{ color:var(--gold); border-color:rgba(240,193,75,.36); background:rgba(240,193,75,.09); }
.tier-core .tier-badge{ color:var(--silver); border-color:rgba(185,192,204,.3); background:rgba(185,192,204,.08); }
.tier-none .tier-badge{ color:var(--tx-4); border-color:var(--line-2); background:var(--surface-1); }

/* =========================== 8. TABLES ================================== */
.tbl-wrap{ overflow-x:auto; }
.tbl{ width:100%; font-size:var(--t-sm); }
.tbl thead th{
  font-size:var(--t-micro); font-weight:650; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tx-4); text-align:left; padding:9px var(--s4); background:var(--surface-1);
  border-bottom:1px solid var(--line-2); white-space:nowrap; position:sticky; top:0; z-index:2;
}
.tbl tbody td{ padding:10px var(--s4); border-bottom:1px solid var(--line-soft); color:var(--tx-2); vertical-align:middle; }
.tbl tbody tr{ transition:background var(--d-1) var(--e-out); }
.tbl tbody tr:hover{ background:var(--surface-3); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr.is-selected{ background:var(--lime-04); box-shadow:inset 2px 0 0 var(--lime); }
.tbl tbody tr.is-you{ background:var(--acc-08); }
.tbl tbody tr.is-you td:first-child{ box-shadow:inset 3px 0 0 var(--lime); }
.tbl tbody tr.is-danger{ background:rgba(255,92,92,.05); }
.tbl tbody tr.is-muted{ opacity:.55; }
.tbl .r{ text-align:right; } .tbl .c{ text-align:center; }
.tbl .num-cell{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.015em; color:var(--tx-1); font-weight:500; }
.tbl-dense thead th{ padding:7px 12px; }
.tbl-dense tbody td{ padding:7px 12px; font-size:var(--t-xs); }
.tbl-rowlink{ cursor:pointer; }
.sortable{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.sortable:hover{ color:var(--tx-2); }
.sortable.is-asc,.sortable.is-desc{ color:var(--lime); }

/* =========================== 9. CHARTS ================================== */
.chart{ width:100%; display:block; overflow:visible; }
.chart .grid-l{ stroke:var(--line); stroke-width:1; stroke-dasharray:2 5; }
.chart .axis-t{ font-family:var(--mono); font-size:10px; fill:var(--tx-4); letter-spacing:.02em; }
.chart .ln{ fill:none; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.chart .ln-lime{ stroke:var(--lime); }
.chart .ln-up{ stroke:var(--up); }
.chart .ln-down{ stroke:var(--down); }
.chart .ln-info{ stroke:var(--info); }
.chart .ln-warn{ stroke:var(--risk-warning); }
.chart .area-lime{ fill:url(#g-lime); }
.chart .area-up{ fill:url(#g-up); }
.chart .area-down{ fill:url(#g-down); }
.chart .candle-up{ fill:var(--up); stroke:var(--up); }
.chart .candle-down{ fill:var(--down); stroke:var(--down); }
.chart .last-dot{ fill:var(--lime); }
.chart .sl-line{ stroke:var(--risk-breach); stroke-width:1; stroke-dasharray:4 3; }
.chart .tp-line{ stroke:var(--up); stroke-width:1; stroke-dasharray:4 3; }
.chart .entry-line{ stroke:var(--info); stroke-width:1; stroke-dasharray:5 4; }
@keyframes draw{ from{ stroke-dashoffset:var(--len) } to{ stroke-dashoffset:0 } }
.chart .animate-draw{ stroke-dasharray:var(--len); animation:draw 1.1s var(--e-out) forwards; }

/* funnel — decision-oriented: every stage shows volume + step conversion */
.funnel{ display:flex; flex-direction:column; gap:3px; }
.fn-row{ display:grid; grid-template-columns:132px minmax(0,1fr) 92px 74px; gap:var(--s3); align-items:center; }
.fn-name{ font-size:var(--t-xs); color:var(--tx-3); display:flex; align-items:center; gap:7px; }
.fn-name .n{ font-family:var(--mono); font-size:10.5px; color:var(--tx-4); }
.fn-bar{ height:30px; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; position:relative; }
.fn-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--acc-14),var(--acc-08)); border-right:1px solid var(--lime-45); transition:width var(--d-5) var(--e-out); }
.fn-row.is-drop i{ background:linear-gradient(90deg,rgba(255,154,60,.3),rgba(255,154,60,.1)); border-right-color:rgba(255,154,60,.45); }
.fn-row.is-end i{ background:linear-gradient(90deg,var(--lime-50),var(--lime-20)); }
.fn-val{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; color:var(--tx-1); text-align:right; }
.fn-conv{ font-family:var(--mono); font-size:11.5px; color:var(--tx-4); text-align:right; }
.fn-conv.good{ color:var(--up); } .fn-conv.bad{ color:var(--risk-warning); }
.fn-head{ display:grid; grid-template-columns:132px minmax(0,1fr) 92px 74px; gap:var(--s3); padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:6px; }

/* horizontal bar chart */
.hbar{ display:grid; grid-template-columns:minmax(90px,140px) minmax(0,1fr) 64px; gap:var(--s3); align-items:center; padding:5px 0; }
.hbar .k{ font-size:var(--t-xs); color:var(--tx-3); }
.hbar .t{ height:8px; background:var(--surface-1); border-radius:99px; overflow:hidden; }
.hbar .t i{ display:block; height:100%; background:var(--lime); border-radius:99px; }
.hbar .v{ font-family:var(--mono); font-size:12px; color:var(--tx-1); text-align:right; font-variant-numeric:tabular-nums; }

/* =========================== 10. LEADERBOARD ============================ */
.podium{ display:grid; grid-template-columns:1fr 1.14fr 1fr; gap:var(--s4); align-items:end; }
.pod{
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:var(--s5); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  position:relative; overflow:hidden;
}
.pod-1{ border-color:var(--line-lime); background:linear-gradient(180deg,var(--lime-09),var(--surface-2) 55%); padding-top:var(--s7); padding-bottom:var(--s7); }
.pod-2{ background:linear-gradient(180deg,rgba(185,192,204,.07),var(--surface-2) 55%); }
.pod-3{ background:linear-gradient(180deg,rgba(205,139,82,.07),var(--surface-2) 55%); }
.pod-rank{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--tx-4); }
.pod-1 .pod-rank{ color:var(--lime); }
.avatar{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:13px; font-weight:700; color:var(--tx-1);
  background:var(--surface-4); border:1px solid var(--line-3); letter-spacing:-.02em;
}
.avatar.lg{ width:56px; height:56px; font-size:17px; }
.avatar.sm{ width:28px; height:28px; font-size:10.5px; }
.avatar.xl{ width:72px; height:72px; font-size:22px; }
.pod-1 .avatar{ border-color:var(--lime-45); box-shadow:0 0 0 3px var(--lime-10); }
.pod-name{ font-size:var(--t-sm); font-weight:650; color:var(--tx-1); }
.pod-score{ font-family:var(--mono); font-size:26px; font-weight:700; letter-spacing:-.04em; color:var(--tx-1); line-height:1; }
.pod-1 .pod-score{ font-size:34px; color:var(--lime); }

.lb-row{
  display:grid; grid-template-columns:52px 1fr 92px 92px 88px; gap:var(--s3); align-items:center;
  padding:9px var(--s4); border-bottom:1px solid var(--line-soft); transition:background var(--d-1) var(--e-out);
}
.lb-row:hover{ background:var(--surface-3); }
.lb-row.is-you{ background:var(--acc-08); box-shadow:inset 3px 0 0 var(--lime); }
.lb-rank{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--tx-3); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px; }
.lb-rank.top{ color:var(--lime); font-weight:700; }
.rank-move{ display:inline-flex; align-items:center; font-size:10px; }
.rank-move.up{ color:var(--up); } .rank-move.down{ color:var(--down); } .rank-move.flat{ color:var(--tx-5); }
@keyframes rank-shift{ 0%{ background:var(--lime-16) } 100%{ background:transparent } }
.lb-row.moved{ animation:rank-shift 1.4s var(--e-out); }

/* =========================== 11. CARDS (used sparingly) ================= */
/* Only for genuinely independent concepts: partner, reward, plan, challenge */
.o-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); position:relative;
  transition:border-color var(--d-2) var(--e-out), transform var(--d-2) var(--e-out), box-shadow var(--d-2) var(--e-out);
}
.o-card:hover{ border-color:var(--line-3); transform:translateY(-2px); box-shadow:var(--sh-2); }
.o-card.is-featured{ border-color:var(--line-lime); box-shadow:var(--glow-lime-s); }
.o-card.is-locked{ opacity:.62; border-style:dashed; }
.o-card.is-locked:hover{ transform:none; }
.o-card.is-expired{ opacity:.5; filter:grayscale(.5); }
.o-card.is-selected{ border-color:var(--lime); box-shadow:var(--glow-lime-s); background:linear-gradient(180deg,var(--acc-04),var(--surface-2)); }
.o-card.is-selected::after{ content:''; position:absolute; top:12px; right:12px; width:18px; height:18px; border-radius:50%; background:var(--lime); }

/* selectable option tile (wizard) */
.opt{
  display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md);
  cursor:pointer; text-align:left; width:100%;
  transition:all var(--d-2) var(--e-out); position:relative;
}
.opt:hover{ border-color:var(--line-3); background:var(--surface-3); }
.opt.is-selected{ border-color:var(--lime); background:var(--lime-05); box-shadow:var(--glow-lime-s); }
.opt.is-selected .opt-check{ background:var(--lime); border-color:var(--lime); color:var(--on-lime); }
.opt.is-disabled,.opt.is-locked{ opacity:.45; pointer-events:none; }
.opt-check{ width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line-3); display:grid; place-items:center; flex:none; margin-top:1px; transition:all var(--d-2) var(--e-out); }
.opt-check svg{ width:11px; height:11px; opacity:0; }
.opt.is-selected .opt-check svg{ opacity:1; }
.opt-t{ font-size:var(--t-sm); font-weight:650; color:var(--tx-1); }
.opt-s{ font-size:var(--t-xs); color:var(--tx-3); line-height:1.45; margin-top:2px; }
.opt-m{ font-size:11px; color:var(--tx-4); margin-top:6px; display:flex; gap:8px; flex-wrap:wrap; }

/* =========================== 12. OVERLAYS =============================== */
.modal-root{ position:fixed; inset:0; z-index:200; background:rgba(3,5,8,.74); backdrop-filter:blur(6px); display:grid; place-items:center; padding:var(--s5); animation:fade-in var(--d-2) var(--e-out); }
.modal{ width:100%; max-width:520px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-xl); box-shadow:var(--sh-3); overflow:hidden; animation:pop-in var(--d-3) var(--e-out); max-height:88vh; display:flex; flex-direction:column; }
@keyframes fade-in{ from{opacity:0} to{opacity:1} }
@keyframes pop-in{ from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none} }
.modal-head{ padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--line); display:flex; gap:var(--s3); align-items:flex-start; }
.modal-body{ padding:var(--s5); overflow-y:auto; }
.modal-foot{ padding:var(--s4) var(--s5); border-top:1px solid var(--line); display:flex; gap:var(--s2); justify-content:flex-end; background:var(--surface-1); }

.drawer-root{ position:fixed; inset:0; z-index:200; background:rgba(3,5,8,.6); backdrop-filter:blur(4px); animation:fade-in var(--d-2) var(--e-out); }
.drawer{ position:absolute; top:0; right:0; bottom:0; width:min(460px,100%); background:var(--surface-2); border-left:1px solid var(--line-2); box-shadow:var(--sh-3); display:flex; flex-direction:column; animation:slide-in var(--d-3) var(--e-out); }
@keyframes slide-in{ from{transform:translateX(24px); opacity:.4} to{transform:none; opacity:1} }

.toasts{ position:fixed; right:var(--s5); bottom:var(--s5); z-index:300; display:flex; flex-direction:column; gap:var(--s2); align-items:flex-end; }
.toast{
  display:flex; align-items:center; gap:10px; padding:11px 15px; min-height:44px;
  background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--r-md);
  box-shadow:var(--sh-2); font-size:var(--t-sm); color:var(--tx-1); font-weight:500;
  animation:toast-in var(--d-3) var(--e-out); max-width:380px;
}
@keyframes toast-in{ from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none} }
.toast.ok{ border-color:rgba(127,220,90,.35); } .toast.ok svg{ color:var(--risk-safe); }
.toast.err{ border-color:rgba(255,92,92,.4); } .toast.err svg{ color:#ff9a9a; }
.toast.warn{ border-color:rgba(245,197,66,.35); } .toast.warn svg{ color:var(--risk-caution); }
.toast.info svg{ color:var(--info); }
.toast.lime{ border-color:var(--line-lime); background:linear-gradient(180deg,var(--lime-10),var(--surface-3)); }

/* alert — persistent, in-flow (toast = transient) */
.alert{ display:flex; gap:var(--s3); padding:13px var(--s4); border-radius:var(--r-md); border:1px solid; align-items:flex-start; }
.alert svg{ flex:none; margin-top:1px; }
.alert-t{ font-size:var(--t-sm); font-weight:650; color:var(--tx-1); }
.alert-s{ font-size:var(--t-xs); color:var(--tx-3); margin-top:2px; line-height:1.5; }
.alert-info{ background:var(--info-12); border-color:rgba(87,183,255,.28); } .alert-info>svg{ color:var(--info); }
.alert-warn{ background:var(--risk-caution-bg); border-color:rgba(245,197,66,.3); } .alert-warn>svg{ color:var(--risk-caution); }
.alert-danger{ background:var(--risk-breach-bg); border-color:rgba(255,92,92,.32); } .alert-danger>svg{ color:#ff9a9a; }
.alert-ok{ background:var(--risk-safe-bg); border-color:rgba(127,220,90,.28); } .alert-ok>svg{ color:var(--risk-safe); }
.alert-lime{ background:var(--lime-08); border-color:var(--line-lime); } .alert-lime>svg{ color:var(--lime); }
.alert-neutral{ background:var(--surface-1); border-color:var(--line-2); } .alert-neutral>svg{ color:var(--tx-3); }

/* tooltip */
.tip{ position:relative; display:inline-flex; }
.tip::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(3px);
  background:var(--surface-5); color:var(--tx-1); font-size:11px; font-weight:500; padding:5px 9px;
  border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none; z-index:80;
  border:1px solid var(--line-3); box-shadow:var(--sh-2); transition:all var(--d-2) var(--e-out);
}
.tip:hover::after{ opacity:1; transform:translateX(-50%); }

/* =========================== 13. EMPTY / LOCKED ========================= */
.empty{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:var(--s9) var(--s5); text-align:center; }
.empty-ico{ width:46px; height:46px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--surface-3); border:1px solid var(--line-2); color:var(--tx-4); }
.empty-t{ font-size:var(--t-body); font-weight:650; color:var(--tx-1); }
.empty-s{ font-size:var(--t-sm); color:var(--tx-4); max-width:42ch; line-height:1.55; }
.empty.is-locked .empty-ico{ color:var(--lime); border-color:var(--line-lime); background:var(--lime-08); }
.empty.is-error .empty-ico{ color:#ff9a9a; border-color:rgba(255,92,92,.3); background:var(--risk-breach-bg); }

/* =========================== 14. WIZARD ================================= */
.wiz{ display:flex; align-items:center; gap:0; }
.wiz-step{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.wiz-n{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:11.5px; font-weight:700;
  background:var(--surface-3); border:1px solid var(--line-2); color:var(--tx-4);
  transition:all var(--d-3) var(--e-out);
}
.wiz-l{ min-width:0; }
.wiz-l .a{ font-size:var(--t-xs); font-weight:650; color:var(--tx-4); letter-spacing:.02em; white-space:nowrap; }
.wiz-l .b2{ font-size:10.5px; color:var(--tx-5); letter-spacing:.06em; text-transform:uppercase; font-weight:600; }
.wiz-line{ flex:1; height:1px; background:var(--line-2); margin:0 var(--s3); min-width:16px; }
.wiz-step.is-done .wiz-n{ background:var(--lime-12); border-color:var(--line-lime); color:var(--lime); }
.wiz-step.is-done .wiz-l .a{ color:var(--tx-2); }
.wiz-step.is-current .wiz-n{ background:var(--lime); border-color:var(--lime); color:var(--on-lime); box-shadow:0 0 0 4px var(--lime-12); }
.wiz-step.is-current .wiz-l .a{ color:var(--tx-1); }
.wiz-step.is-current + .wiz-line,.wiz-step.is-done + .wiz-line{ background:var(--lime-28); }

/* =========================== 15. MISC =================================== */
.code-box{
  display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  background:var(--surface-1); border:1px dashed var(--line-3); border-radius:var(--r-md);
}
.code-val{ font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:.1em; color:var(--lime); }

.rating{ display:inline-flex; align-items:center; gap:2px; }
.rating svg{ width:12px; height:12px; color:var(--gold); }
.rating svg.off{ color:var(--surface-5); }

.verified{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:650; color:var(--info); }

.logo-tile{ width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--surface-3); border:1px solid var(--line-2); font-family:var(--mono); font-weight:700; font-size:14px; color:var(--tx-2); flex:none; letter-spacing:-.03em; }
.logo-tile.lg{ width:56px; height:56px; font-size:19px; border-radius:var(--r-md); }
.logo-tile.xl{ width:72px; height:72px; font-size:25px; border-radius:var(--r-lg); }

.eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:var(--t-micro); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.eyebrow-dim{ color:var(--tx-4); }
.eyebrow::before{ content:''; width:14px; height:1px; background:currentColor; opacity:.6; }
.eyebrow.no-rule::before{ display:none; }

.sec-head{ display:flex; flex-direction:column; gap:12px; max-width:70ch; }
.sec-head.wide{ max-width:none; }
.sec-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s6); flex-wrap:wrap; }

/* sparkline inline */
.spark{ width:88px; height:26px; }

/* heatmap cells (activity) */
.heat{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9px,1fr)); gap:3px; }
.heat i{ aspect-ratio:1; border-radius:2px; background:var(--surface-3); }
.heat i.l1{ background:var(--lime-16); } .heat i.l2{ background:var(--lime-30); }
.heat i.l3{ background:var(--lime-50); } .heat i.l4{ background:var(--lime-78); }
.heat i.neg{ background:rgba(255,92,92,.4); }

/* =========================== 16. RESPONSIVE COMPONENT RULES ============= */
@media (max-width:1439px){
  .kpi-6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpi-6 .kpi:nth-child(3){ border-right:0; }
  .kpi-6 .kpi:nth-child(n+4){ border-top:1px solid var(--line); }
  .fn-row,.fn-head{ grid-template-columns:112px minmax(0,1fr) 84px 66px; }
  .lb-row{ grid-template-columns:44px 1fr 80px 80px 76px; }
}
@media (max-width:1023px) and (min-width:768px){
  /* tablet: compact icon rail (not bottom tabs) */
  .app-shell{ grid-template-columns:var(--rail-w-sm) minmax(0,1fr); }
  .rail-item{ justify-content:center; padding:11px 0; position:relative; }
  .rail-item > span:not(.badge-n){ display:none; }
  .rail-item .badge-n{ position:absolute; top:3px; right:12px; min-width:14px; height:14px; font-size:8.5px; }
  .rail-group > .micro{ display:none; }
  .rail-head{ justify-content:center; padding:14px 0; }
  .rail-head .brand > span:last-child{ display:none; }
  .rail-foot .panel-well .row > .grow,.rail-foot .panel-well .icon-btn{ display:none; }
  .rail-foot .panel-well .row{ justify-content:center; }
  .rail-foot .btn-block span{ display:none; }
}
@media (max-width:1023px){
  .kpi-5,.kpi-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-4 .kpi:nth-child(2n),.kpi-5 .kpi:nth-child(2n){ border-right:0; }
  .kpi-4 .kpi:nth-child(n+3),.kpi-5 .kpi:nth-child(n+3){ border-top:1px solid var(--line); }
  .podium{ grid-template-columns:1fr; }
  .pod-1{ order:-1; }
  .wiz-l .b2{ display:none; }
  .nav-links{ display:none; }
  .page{ padding:var(--s4) var(--s4) var(--s8); gap:var(--s4); }
}
@media (max-width:767px){
  .app-shell{ grid-template-columns:1fr; }
  .rail{ display:none; }
  .tabbar{
    display:grid; grid-template-columns:repeat(5,1fr); position:sticky; bottom:0; z-index:60;
    background:rgba(11,14,19,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:var(--r-sm); font-size:9.5px; font-weight:600; color:var(--tx-4); letter-spacing:.02em; min-height:44px; justify-content:center; }
  .tabbar a.is-selected{ color:var(--lime); background:var(--lime-08); }
  .btn-lg,.btn-xl{ width:100%; }
  .fn-row,.fn-head{ grid-template-columns:92px minmax(0,1fr) 68px; }
  .fn-conv{ display:none; }
  .lb-row{ grid-template-columns:38px 1fr 66px 62px; }
  .lb-row .hide-m{ display:none; }
  .kpi-3,.kpi-5,.kpi-4,.kpi-6{ grid-template-columns:1fr; }
  .kpi{ border-right:0; border-bottom:1px solid var(--line); }
  .kpi:last-child{ border-bottom:0; }
  .wiz-line{ display:none; }
  .wiz{ gap:var(--s2); overflow-x:auto; }
  .wiz-step{ flex:none; }
  .modal{ max-width:100%; border-radius:var(--r-lg); }
  .drawer{ width:100%; }
  .toasts{ left:var(--s4); right:var(--s4); bottom:78px; align-items:stretch; }
  .toast{ max-width:none; }
  .score-n.xl{ font-size:52px; }
}

/* ---- stacking fixes (spans used as blocks inside composite components) -- */
.wiz-l{ display:flex; flex-direction:column; gap:1px; }
.opt .grow{ display:flex; flex-direction:column; }
.opt-t,.opt-s{ display:block; }
.opt-m{ display:flex; }
.j-gain{ display:flex; }
.trust-i .tstack{ display:flex; flex-direction:column; }
.score-leg .nm{ display:block; }
.fn-name{ display:flex; }
.pod > div{ display:block; }
.metric-k,.metric-s{ display:flex; }

/* ---- five-state risk (SAFE/WATCH/CAUTION/WARNING/BREACH) ------------------ */
.risk-meter.watch .risk-fill{ background:linear-gradient(90deg,rgba(87,183,255,.4),var(--info)); }
.risk-meter.watch .state{ color:var(--info); }
.risk-meter.watch .name{ color:var(--tx-2); }

/* ---- proprietary score core --------------------------------------------- */
.score-core{ display:flex; flex-direction:column; gap:var(--s3); }
.sc-num{ font-family:var(--mono); font-size:56px; font-weight:700; line-height:.9; letter-spacing:-.04em; color:var(--tx-1); }
.score-core.lg .sc-num{ font-size:84px; }
.sc-den{ font-family:var(--mono); font-size:15px; color:var(--tx-4); }
.sc-bar{ position:relative; display:flex; gap:3px; height:14px; }
.sc-seg{ position:relative; background:var(--surface-3); border-radius:3px; overflow:hidden; }
.sc-seg i{ position:absolute; inset:0 auto 0 0; border-radius:3px; }
.sc-tick{ position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--line-2); }
.sc-tick em{ position:absolute; top:-16px; left:-8px; font-style:normal; font-family:var(--mono); font-size:9px; color:var(--tx-5); }
.sc-leg{ display:flex; flex-wrap:wrap; gap:6px 18px; }
.sc-leg-i{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--tx-3); }
.sc-leg-i b{ width:8px; height:8px; border-radius:2px; flex:none; }
.sc-leg-i em{ font-style:normal; color:var(--tx-1); font-weight:650; margin-left:2px; }

/* ---- marketplace match reason -------------------------------------------- */
.match-why{ display:flex; gap:8px; align-items:flex-start; margin-top:12px; padding:9px 11px;
  background:var(--acc-08); border:1px solid var(--acc-line); border-radius:var(--r-sm);
  font-size:11.5px; line-height:1.5; color:var(--tx-2); }
.match-why svg{ flex:none; color:var(--acc); margin-top:1px; }

/* ---- rule-row watch + overlay/control demos ------------------------------ */
.rule-watch .rule-ico{ color:var(--info); background:rgba(87,183,255,.1); border-color:rgba(87,183,255,.3); }
.demo-modal{ position:relative; padding:18px; border-radius:var(--r-md); background:rgba(4,6,9,.6); }
.dm-box{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-3); }
.demo-drawer{ border-left:2px solid var(--acc); background:var(--surface-2); border-radius:0 var(--r-md) var(--r-md) 0; padding:14px; }
.dd-head{ letter-spacing:.12em; color:var(--tx-4); margin-bottom:10px; }
.cmd{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md); padding:8px; }
.cmd-in{ padding:8px 10px; border-bottom:1px solid var(--line); margin-bottom:8px; color:var(--tx-3); }
.cmd-i{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r-sm); color:var(--tx-3); }
.cmd-i.is-selected{ background:var(--acc-08); color:var(--tx-1); }
.pager{ display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:12px; }
.tl{ display:flex; flex-direction:column; gap:14px; }
.tl-i{ display:flex; gap:12px; position:relative; padding-left:2px; }
.tl-i::before{ content:''; position:absolute; left:5px; top:14px; bottom:-14px; width:1px; background:var(--line); }
.tl-i:last-child::before{ display:none; }
.tl-dot{ width:11px; height:11px; border-radius:50%; flex:none; margin-top:2px; border:2px solid var(--surface-2); background:var(--tx-5); }
.tl-i.ok .tl-dot{ background:var(--up); } .tl-i.caution .tl-dot{ background:var(--gold); }
.tl-i.lime .tl-dot{ background:var(--acc); } .tl-i.neutral .tl-dot{ background:var(--tx-4); }

/* ================= identity bands + high-fidelity mockups (landing 1.2) ==== */
.band{ padding:var(--s11) 0; position:relative; }
.band-tight{ padding:var(--s11) 0; }
.id-prop,.id-broker{ color:var(--tx-1); background:var(--bg); box-shadow:inset 0 2px 0 var(--acc); }
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); font-weight:600; display:inline-flex; align-items:center; gap:8px; }
.eyebrow::before{ content:''; width:18px; height:1px; background:var(--acc); }
.h-display{ font-size:clamp(38px,4.6vw,60px); font-weight:800; letter-spacing:-.035em; line-height:1.02; color:var(--tx-1); }
.h-band{ font-size:clamp(30px,3.2vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.06; color:var(--tx-1); }
.lead{ font-size:var(--t-body-lg); color:var(--tx-2); line-height:1.65; max-width:52ch; }
.band-edge{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent); }

/* mockup frame — a believable product surface, not a grey box */
.mk{ border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--surface-2); box-shadow:var(--sh-2); overflow:hidden; }
.mk-bar{ display:flex; align-items:center; gap:10px; height:36px; padding:0 var(--s4); background:var(--surface-1); border-bottom:1px solid var(--line); }
.mk-bar .dots{ display:flex; gap:5px; } .mk-bar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--surface-5); }
.mk-url{ font-family:var(--mono); font-size:10.5px; color:var(--tx-4); background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:3px 12px; flex:1; max-width:340px; }
.mk-tag{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--acc); text-transform:uppercase; }
.mk-body{ padding:var(--s5); display:flex; flex-direction:column; gap:var(--s4); background:var(--bg); }
.mk-row{ display:grid; gap:var(--s3); }
.mk-kpis{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface-2); }
.mk-kpis div{ padding:10px 12px; border-right:1px solid var(--line); }
.mk-kpis div:last-child{ border-right:0; }
.mk-kpis .micro{ color:var(--tx-4); }
.mk-kpis b{ display:block; font-family:var(--mono); font-size:16px; font-weight:700; color:var(--tx-1); letter-spacing:-.02em; margin-top:3px; }
.mk-kpis b.acc{ color:var(--acc); }
.mk-panel{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); padding:var(--s4); }
.mk-panel .micro{ color:var(--tx-4); margin-bottom:8px; }
.mk-chart{ width:100%; height:auto; display:block; }
.mk-chart .grid{ stroke:var(--line); stroke-width:1; }
.mk-chart .axis{ font-family:var(--mono); font-size:9px; fill:var(--tx-4); }
.mk-chart .line{ fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mk-chart .line2{ fill:none; stroke:var(--tx-4); stroke-width:1.4; stroke-dasharray:3 4; }
.mk-chart .lbl{ font-family:var(--mono); font-size:9.5px; fill:var(--tx-2); }
.mk-chart .lbl-acc{ fill:var(--acc); font-weight:700; }
.mk-meter{ display:grid; grid-template-columns:86px 1fr 74px; align-items:center; gap:10px; font-size:11px; color:var(--tx-2); }
.mk-meter .track{ display:block; height:6px; border-radius:99px; background:var(--surface-4); overflow:hidden; }
.mk-meter .fill{ display:block; height:100%; border-radius:99px; background:var(--acc); }
.mk-meter .fill.warn{ background:var(--risk-caution); } .mk-meter .fill.bad{ background:var(--risk-breach); }
.mk-meter .val{ font-family:var(--mono); font-size:10.5px; color:var(--tx-3); text-align:right; }
.mk-tbl{ width:100%; border-collapse:collapse; font-size:11.5px; }
.mk-tbl th{ font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-4); text-align:left; padding:6px 8px; border-bottom:1px solid var(--line-2); font-weight:600; }
.mk-tbl td{ padding:7px 8px; border-bottom:1px solid var(--line); color:var(--tx-2); }
.mk-tbl td.m{ font-family:var(--mono); font-size:11px; }
.mk-tbl tr:last-child td{ border-bottom:0; }
.mk-tbl .up{ color:var(--up); } .mk-tbl .dn{ color:var(--down); }
.mk-float{ position:absolute; border:1px solid var(--line-2); background:var(--surface-3); border-radius:var(--r-md); box-shadow:var(--sh-2); padding:8px 12px; font-family:var(--mono); font-size:11px; color:var(--tx-1); }
.mk-float .micro{ color:var(--tx-4); display:block; margin-bottom:2px; }

/* identity cards on the landing */
.id-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.id-card{ border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; background:var(--bg); display:flex; flex-direction:column; }
.id-card .id-head{ padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--line); }
.id-card .id-head h3{ font-size:var(--t-h2); font-weight:700; letter-spacing:-.02em; color:var(--tx-1); margin:10px 0 6px; }
.id-card .id-head p{ font-size:var(--t-sm); color:var(--tx-3); line-height:1.55; }
.id-card .id-mock{ padding:var(--s4); background:var(--bg); }
.id-card .id-foot{ margin-top:auto; padding:var(--s4) var(--s5); border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.swatches{ display:flex; gap:6px; } .swatches i{ width:14px; height:14px; border-radius:4px; border:1px solid var(--line-2); }
@media (max-width:1024px){ .id-cards{ grid-template-columns:1fr; } .mk-kpis{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .mk-float{ position:static; display:inline-block; margin-top:8px; } }
.hero-g{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--s9); align-items:center; }
.journey-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
@media (max-width:1024px){ .hero-g{ grid-template-columns:1fr; gap:var(--s8); } .journey-g{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .journey-g{ grid-template-columns:1fr; } }

/* loading skeleton — precision instrument, not a shimmer toy */
.skel{ position:relative; overflow:hidden; background:var(--surface-3); border-radius:var(--r-xs); }
.skel::after{ content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--lime-08),transparent); animation:skel 1.4s var(--e-inout) infinite; }
@keyframes skel{ 100%{ transform:translateX(100%); } }
.skel-row{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s3); }
.skel-row .skel{ height:14px; } .skel-row .skel.tall{ height:34px; }

/* environment switcher */
.env-sw{ display:inline-flex; align-items:center; gap:2px; background:var(--surface-1); border:1px solid var(--line-2); border-radius:99px; padding:3px; margin-right:10px; }
.env-it{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:99px; font-size:11.5px; font-weight:600; color:var(--tx-3); }
.env-it i{ width:6px; height:6px; border-radius:50%; background:var(--tx-5); }
.env-it:hover{ color:var(--tx-1); background:var(--surface-3); }
.env-it.is-active{ color:var(--tx-1); background:var(--lime-12); }
.env-it.is-active i{ background:var(--lime); box-shadow:0 0 0 3px var(--lime-18); }

h1,h2,h3,.h-display,.h-band,.t-h1,.t-h2,.t-h3,.mk-kpis b{ font-family:var(--font-head); }
.panel{ background:var(--card-glass); backdrop-filter:blur(10px); border-radius:var(--r-xl); }
.mk{ border-radius:var(--r-xl); background:var(--card-glass); backdrop-filter:blur(10px); }
.mk-bar{ background:rgba(0,0,0,.35); }
.mk-bar .dots{ order:3; margin-left:auto; }
.mk-bar .mk-tag{ order:2; margin-left:12px; margin-right:0; }
.mk-url{ order:1; flex:1; background:rgba(0,0,0,.4); border-color:rgba(255,255,255,.08); }
/* deck ticker */
.ticker{ display:flex; gap:18px; align-items:center; overflow:hidden; background:rgba(0,0,0,.5);
  padding:10px 18px; border-radius:8px; border:1px solid rgba(255,255,255,.08);
  font-family:var(--mono); font-size:12px; color:var(--tx-3); flex-wrap:wrap; }
.ticker b{ color:var(--tx-1); font-weight:600; }
.ticker .sep{ color:var(--tx-5); }
.ticker .live i{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--up); margin-right:6px; animation:blink 1.4s infinite; vertical-align:middle; }
@keyframes blink{ 50%{ opacity:.25; } }

.floor-vis{ margin-top:10px; border:1px dashed var(--lime-35); border-radius:6px; padding:8px 10px;
  font-family:var(--mono); font-size:11px; line-height:1.5; color:var(--tx-3); background:rgba(0,0,0,.25); }
.floor-vis b{ color:var(--lime); font-weight:600; }
.floor-vis .fv-t{ display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-5); margin-bottom:2px; }

.fv-grid{ display:grid; grid-template-columns:1.1fr .9fr .7fr .9fr 1.2fr .7fr; gap:12px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); }
.fv-grid .right{ text-align:right; }
.fv-grid.fv-head{ border-bottom:1px solid var(--line-2); padding:6px 0; }
.fv-grid.fv-head span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--tx-5); }