/* ================================================================
   RESIFACTORY UI KIT — kit.css (Phase 0 of the total-UI redesign)
   ----------------------------------------------------------------
   The single component stylesheet for the whole product: marketing
   pages, dashboard, admin. Requires tokens.css loaded first.

   SOURCES OF TRUTH
   - Marketing components: ported VERBATIM from
     docs/design/resifactory-v8-final.html (v8, owner-locked
     2026-07-18) with color/size literals swapped to tokens. If this
     file and the reference disagree on a marketing component, the
     reference wins and this file has a bug.
   - App components (== APP ==... sections): new post-login grammar,
     owned by docs/design/DESIGN-SPEC-APP.md. Productivity restraint:
     denser padding, no hero text, page title IS the active nav item.

   RULES
   - Zero hex color literals in this file — every color is var(--*)
     or a white/black/olive-alpha material recipe canonical in the
     spec (§2 glass, §3 backdrop). The cohesion lint enforces this.
   - Zero animations, ever. Glass is a material, not a motion.
   - One active-state grammar everywhere: the lime dot.
   - This file is DESIGN-OWNED. Implementation lanes consume it and
     never edit it; component changes route through the design owner.
   ================================================================ */

/* ================= base ================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The [hidden] attribute is the app's universal show/hide switch (the shared
   show() helper in the dashboard/admin bundles toggles it). Author display
   rules on .field/.kv/.card/.seg would otherwise beat the UA [hidden] rule and
   leave a "hidden" element visible — force it here so hidden always means gone. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  min-height: 100vh; color: var(--text); overflow-x: hidden;
  font-family: var(--font-ui); font-size: 15px; line-height: 1.6;
  background: linear-gradient(var(--bg-top), var(--bg-bottom));
}
.mono { font-family: var(--font-mono); }
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 var(--wrap-pad); }
a { color: var(--link); }
a:hover { color: var(--lime); }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 2px; }

/* ================= backdrop (static — zero animation) ================= */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.backdrop .wash1 { position: absolute; left: 50%; top: -340px; width: 1500px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(124,154,62,.17), rgba(124,154,62,.06) 55%, transparent 78%); }
.backdrop .wash2 { position: absolute; right: -420px; bottom: -460px; width: 1100px; height: 1000px;
  background: radial-gradient(closest-side, rgba(74,94,38,.16), transparent 75%); }
.backdrop .wash3 { position: absolute; left: -380px; top: 34%; width: 900px; height: 900px;
  background: radial-gradient(closest-side, rgba(197,232,58,.05), transparent 72%); }
.backdrop .net {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(197,232,58,.075) 1px, transparent 1.4px);
  background-size: 30px 30px;
  mask-image: radial-gradient(1100px 720px at 50% 6%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(1100px 720px at 50% 6%, #000 20%, transparent 72%);
}
.backdrop .net2 {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(124,154,62,.05) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(124,154,62,.045) 0 1px, transparent 1px 72px);
  mask-image: radial-gradient(1300px 1000px at 50% 24%, #000 15%, transparent 76%);
  -webkit-mask-image: radial-gradient(1300px 1000px at 50% 24%, #000 15%, transparent 76%);
}
/* app variant: the washes stay, the motifs go — a workroom, not a storefront */
.backdrop--app .net, .backdrop--app .net2 { display: none; }
.backdrop--app .wash1 { opacity: .55; }
.backdrop--app .wash3 { display: none; }

/* ================= status bar ================= */
.statusbar { background: linear-gradient(180deg, rgba(124,154,62,.1), rgba(0,0,0,.35)); border-bottom: 1px solid var(--edge-faint); }
.statusbar .in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; padding: 8px 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; color: var(--text-status); }
.statusbar b { color: var(--text-status-strong); font-weight: 600; }
.okdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 7px; vertical-align: 1px; }

/* ================= nav ================= */
.navbar { position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.07); }
/* 11px padding + 40px wordmark ≈ 63px sticky nav — stays inside the 64px scroll-margin */
nav.top { display: flex; align-items: center; gap: 24px; padding: 11px 0; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 16.5px; color: var(--text); text-decoration: none; letter-spacing: -.01em; cursor: pointer; }
/* WORDMARK SIZING LAW (spec §8.1): the lockup's TEXT occupies only ~40% of the
   image height — so size by text, not by box. 40px image ≈ 16px brand text
   (production-parity with .mkt-logo). Floor for any NEW surface: 36px — below
   that the name goes illegible. Sole sanctioned exception: the footer at 30px
   (codified in the logo law). Height-constrained, width:auto, never cropped. */
.mark img { height: 40px; width: auto; display: block; }
footer.foot .mark img { height: 30px; }
nav.top a.nl { color: var(--text-muted); text-decoration: none; font-size: 13.5px; cursor: pointer; padding: 4px 2px; }
nav.top a.nl:hover { color: var(--text); }
nav.top a.nl.active { color: var(--text); }
nav.top a.nl.active::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); margin-left: 7px; vertical-align: 2px; }
nav.top .sp { flex: 1; }

/* == APP nav: same chrome, tabs never disappear (they ARE the page title) == */
.navbar--app nav.top { flex-wrap: wrap; row-gap: 0; }
.navbar--app .links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .navbar--app nav.top a.nl { display: inline-block; }   /* marketing hides these; app keeps them */
  .navbar--app .links { width: 100%; order: 9; padding: 4px 0 10px; gap: 16px; }
}

/* ================= buttons ================= */
.btn { display: inline-block; text-decoration: none; text-align: center; padding: 11px 20px; border-radius: var(--r-btn); font-weight: 600; font-size: 13.5px; cursor: pointer; border: 0;
  color: var(--ink-btn); background: linear-gradient(170deg, var(--lime-bright), var(--lime-soft) 65%, var(--lime-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.18); }
.btn:hover { filter: brightness(1.06); }
.btn--ghost { color: var(--text); background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.12); }
.btn--ghost:hover { background: rgba(255,255,255,.08); filter: none; }
.btn--wide { display: block; width: 100%; }
/* == APP button sizes/kinds == */
.btn--sm { padding: 7px 13px; font-size: 12px; border-radius: var(--r-copybtn); }
.btn--danger { color: var(--danger); background: var(--danger-soft);
  box-shadow: inset 0 0 0 1px var(--danger-edge); }
.btn--danger:hover { background: var(--danger-soft); filter: brightness(1.15); }
.btn[disabled], .btn--disabled { opacity: .45; pointer-events: none; }

/* copy button */
.copybtn { appearance: none; border: 0; cursor: pointer; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--text-soft); background: rgba(255,255,255,.05); padding: 6px 12px; border-radius: var(--r-copybtn);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: color .2s, background .2s; }
.copybtn:hover { color: var(--text); background: rgba(255,255,255,.09); }
.copybtn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.copybtn.copied { color: var(--ink-btn); background: var(--lime); }
.copybtn--xs { font-size: 9px; padding: 4px 8px; }

/* ================= materials: matte card + glass ================= */
.card { position: relative; border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.016));
  border: 1px solid var(--edge); border-top-color: var(--edge-strong);
  box-shadow: var(--shadow-card); }
.card--flat { box-shadow: none; background: rgba(255,255,255,.025); }
.glass {
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.022) 55%, rgba(124,154,62,.045));
  backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-color: rgba(255,255,255,.11); border-top-color: var(--edge-glass-top);
  box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,.14);
}
.glass::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.05) 40%, rgba(197,232,58,.16) 66%, rgba(255,255,255,.03));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}
/* padding helpers — components mostly pad themselves; these are for prose cards */
.pad { padding: var(--pad-card); }
.pad--app { padding: var(--pad-card-app); }

/* ================= shared furniture ================= */
.eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 12px; }
h1 { margin: 0 0 16px; font-size: clamp(32px,4.4vw,50px); line-height: 1.07; font-weight: 680; letter-spacing: -.028em; text-wrap: balance; }
h1 .hl { color: var(--lime); }
.lead { color: var(--text-lead); font-size: 16px; max-width: 36em; margin: 0; }
.lead b { color: var(--text); font-weight: 600; }
.sect { padding: var(--sect-pad) 0 8px; scroll-margin-top: 64px; }
.sect-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.sect-head h2 { margin: 0; font-size: clamp(21px,2.6vw,27px); font-weight: 700; letter-spacing: -.024em; }
.sect-head .side { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; }
.pill { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.pill--live { color: var(--lime); box-shadow: inset 0 0 0 1px rgba(197,232,58,.4); }
.pill--soon { color: var(--soon-pill); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.pill--pop { color: var(--ink-btn); background: var(--lime); font-weight: 700; }
/* == APP status pills == */
.pill--warn { color: var(--warn); box-shadow: inset 0 0 0 1px rgba(255,165,2,.4); }
.pill--danger { color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-edge); }
.pill--dim { color: var(--text-dim); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* ================= hero + format card (marketing) ================= */
.hero { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 52px; align-items: center; padding: 56px 0 6px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.micro { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-micro); letter-spacing: .03em; }
.proofline { margin: 34px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--text-muted-2); }
.proofline b { color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.proofline .dim { color: var(--text-faint); }

.fmt { overflow: hidden; }
.fmt-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-label);
  border-bottom: 1px solid rgba(255,255,255,.08); }
.fmt pre { margin: 0; padding: 16px 18px; background: var(--code-bg); }
.fmt code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.8; color: var(--text-soft);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.fmt code .k { color: var(--green-comment); } .fmt code .li { color: var(--lime); }
.fmt-foot { display: grid; grid-template-columns: 1fr 1fr; }
.fmt-foot .fc { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.fmt-foot .fc:nth-child(even) { border-left: 1px solid rgba(255,255,255,.07); }
.fmt-foot dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
.fmt-foot dd { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text-soft); }

/* ================= the shelf: product-card grammar ================= */
.shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.prod { display: flex; flex-direction: column; padding: 20px 20px 18px; }
.prod .top { display: flex; align-items: center; gap: 10px; }
.prod .chip { flex: none; width: 34px; height: 34px; border-radius: var(--r-chip); display: grid; place-items: center;
  color: var(--lime);   /* icons use stroke="currentColor" — soon-cards can mute via color */
  background: rgba(124,154,62,.14); box-shadow: inset 0 0 0 1px rgba(197,232,58,.22); }
.prod--soon .chip { color: var(--soon-text); }
.prod h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.012em; flex: 1; }
.prod .desc { margin: 10px 0 0; color: var(--text-muted); font-size: 13px; min-height: 2.6em; }
.prod ul.specs { list-style: none; margin: 12px 0 4px; padding: 0; font-size: 12.5px; color: var(--text-spec); line-height: 2.05; }
.prod ul.specs li::before { content: "✓"; color: var(--green-check); margin-right: 8px; font-size: 11px; }
.prod--soon ul.specs li::before { content: "·"; color: var(--text-faint); }
.prod .price { margin: 10px 0 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.prod .price .from { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 2px; }
.prod .price b { font-size: 25px; font-weight: 650; color: var(--lime); letter-spacing: -.02em; }
.prod .price span { font-size: 12.5px; color: var(--text-muted-2); }
.prod .tail { margin-top: auto; }
.prod--soon { border-style: dashed; background: rgba(255,255,255,.014); }
.prod--soon h3 { color: var(--soon-title); }
.prod--soon .price b { color: var(--soon-text); font-size: 16px; }
/* the shelf spillover ("talk to a human") — full-width dashed band below the products */
.prod--spill { grid-column: 1 / -1; border-style: dashed; background: rgba(255,255,255,.01); justify-content: center; text-align: center; padding: 28px 22px; }
.prod--spill .desc { min-height: 0; margin: 0 0 14px; }
.prod--spill .btn { align-self: center; }

/* ================= stats band ================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats .st { padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.07); }
.stats .st:last-child { border-right: 0; }
.stats .n { font-family: var(--font-mono); font-size: 24px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats .n em { font-style: normal; color: var(--lime); }
.stats .l { margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); }
.stats-src { margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: .04em; }

/* ================= steps + terminal ================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.step { padding: 20px 22px; }
.step .num { font-family: var(--font-mono); font-size: 11px; color: var(--link); letter-spacing: .1em; }
.step h3 { margin: 8px 0 6px; font-size: 15.5px; font-weight: 650; }
.step p { margin: 0; color: var(--text-muted); font-size: 13px; }
.term { overflow: hidden; margin-top: 16px; }
.term-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); border-bottom: 1px solid rgba(255,255,255,.08); }
.term pre { margin: 0; padding: 15px 16px; overflow-x: auto; background: var(--code-bg-deep); }
.term code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; color: var(--text-soft);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.term code .k { color: var(--green-comment); } .term code .li { color: var(--lime); } .term code .out { color: var(--text-muted-2); }

/* ================= trust strip ================= */
.truststrip { display: grid; grid-template-columns: repeat(3, 1fr); }
.truststrip .tb { padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.07); }
.truststrip .tb:last-child { border-right: 0; }
.truststrip h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 650; }
.truststrip p { margin: 0; color: var(--text-muted); font-size: 12.5px; }
.strip-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 22px; border-top: 1px solid rgba(255,255,255,.08); }
.paychip { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; font-weight: 600; color: var(--text-paychip); padding: 5px 10px; border-radius: var(--r-copybtn); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips .pl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); margin-right: 2px; }
.golink { font-size: 13px; color: var(--link); text-decoration: none; cursor: pointer; white-space: nowrap; }
.golink:hover { color: var(--lime); }

/* ================= FAQ: native accordions, zero JS ================= */
.faqgroup { margin-bottom: 22px; }
.faqgroup h3 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-check); font-weight: 600; }
details.qa { border-top: 1px solid rgba(255,255,255,.07); }
details.qa:first-of-type { border-top: 0; }
details.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 15px 20px; font-weight: 600; font-size: 14px; }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; font-family: var(--font-mono); color: var(--green-check); font-size: 15px; flex: none; }
details.qa[open] summary::after { content: "−"; }
details.qa summary:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
details.qa .a { margin: 0; padding: 0 20px 16px; color: var(--text-muted); font-size: 13px; max-width: 56em; }

/* ================= CTA band ================= */
.ctaband { margin: var(--sect-pad) 0 0; padding: 32px 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.ctaband h2 { margin: 0 0 4px; font-size: clamp(20px,2.6vw,26px); font-weight: 700; letter-spacing: -.024em; }
.ctaband p { margin: 0; color: var(--text-muted); font-size: 13.5px; }

/* ================= subpage head ================= */
.subhead { padding: 50px 0 6px; }
.subhead h1 { font-size: clamp(30px,3.8vw,42px); }

/* ================= pricing matrix ================= */
.tblwrap { overflow-x: auto; }
table.mx { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
table.mx th { text-align: left; padding: 12px 18px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); font-weight: 600; }
table.mx td { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.07); vertical-align: top; }
table.mx .pn { font-weight: 700; font-size: 15px; }
table.mx .pd { color: var(--text-muted); font-size: 13px; margin-top: 3px; max-width: 26em; }
table.mx .pp { font-family: var(--font-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.mx .pp .big { color: var(--lime); font-weight: 650; }
tr.rsoon td { color: var(--text-soon-row); }
tr.rsoon .pn { color: var(--soon-text); }

/* ================= datasheets ================= */
.specgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); align-items: start; }
/* Keep the two tracks a stable 50/50 regardless of content: without min-width:0 a
   grid item's intrinsic min-width is its widest unwrappable child (the longest proxy
   line in the output terminal), which would stretch the column — and sticky lines are
   longer than rotating, so the split would shift after generating. min-width:0 lets the
   .outscroll scroll horizontally inside its fixed track instead. */
.specgrid > * { min-width: 0; }
.spec { overflow: hidden; }
.spec-head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-label); border-bottom: 1px solid rgba(255,255,255,.08); }
.spec table { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec td { padding: 9px 18px; border-top: 1px solid var(--edge-faint); vertical-align: top; }
.spec tr:first-child td { border-top: 0; }
.spec td.k { color: var(--text-muted-2); width: 42%; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
.spec td.v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.spec td.v .live { color: var(--lime); }
.spec .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 18px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); border-top: 1px solid rgba(255,255,255,.07); }
.spec .foot .ep { color: var(--text-soft); }
.specfold summary { display: none; list-style: none; cursor: pointer; padding: 12px 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-status); }
/* guard: a CLOSED fold must always show its summary, even on desktop (where the
   open-state summary is hidden) — otherwise closing on mobile then widening the
   window leaves the whole datasheet invisible with no way to reopen it */
.specfold:not([open]) summary { display: flex; justify-content: space-between; }
.specfold summary::-webkit-details-marker { display: none; }
.specfold summary::after { content: "+"; color: var(--green-check); }
.specfold[open] summary::after { content: "−"; }

/* ================= billing row + paybar ================= */
.billrow { display: grid; grid-template-columns: repeat(3, 1fr); }
.billrow .cell { padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.07); }
.billrow .cell:last-child { border-right: 0; }
.billrow h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.billrow p { margin: 0; color: var(--text-muted); font-size: 13px; }
.billrow .bl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 7px; }
.paybar { margin-top: 14px; padding: 14px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.paybar .sp { flex: 1; }
.paybar .plink { font-size: 12.5px; color: var(--link); text-decoration: none; margin-left: 14px; }
.paybar .plink:hover { color: var(--lime); }

/* ================= ledger (metering proof) ================= */
.ledger table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ledger th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); padding: 13px 18px 7px; }
.ledger td { padding: 9px 18px; border-top: 1px solid var(--edge-faint); font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-soft); }
.ledger td.num { text-align: right; }
.ledger .bar { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--olive), var(--lime)); margin-top: 5px; }
.ledger tfoot td { border-top: 1px solid rgba(255,255,255,.13); color: var(--lime-total); font-weight: 600; padding: 11px 18px; }
.ledger .lhead { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 0; }
.ledger .lhead .t { font-weight: 650; font-size: 13.5px; }
.share { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--lime); box-shadow: inset 0 0 0 1px rgba(197,232,58,.35); padding: 4px 9px; border-radius: var(--r-pill); text-transform: uppercase; }
.mlist { list-style: none; padding: 0; margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-status); line-height: 2.1; }
.mlist li::before { content: "— "; color: var(--text-ghost); }

/* ================= trust page ================= */
.trustgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); align-items: start; }
.tcard { padding: 20px 22px; }
.tcard h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 650; }
.tcard p { margin: 0 0 8px; color: var(--text-muted); font-size: 13px; }
.tcard p:last-child { margin-bottom: 0; }
.tcard ul { margin: 8px 0 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; line-height: 1.9; }
.notclaim { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.012); }
.pending { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--pending); border: 1px dashed rgba(255,165,2,.5); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }

/* ================= footer ================= */
footer.foot { padding: 60px 0 64px; }
.footgrid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 26px; }
.footgrid h5 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); font-weight: 600; }
.footgrid a { display: block; color: var(--text-muted); text-decoration: none; font-size: 12.5px; margin-bottom: 7px; cursor: pointer; }
.footgrid a:hover { color: var(--text); }
.footgrid .blurb { color: var(--text-muted-2); font-size: 12.5px; max-width: 26em; margin: 10px 0 0; }
.footbase { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--edge-faint); font-size: 11.5px; color: var(--text-dim); }
.footbase .paychip { padding: 4px 9px; font-size: 10px; }

/* ================================================================
   == APP GRAMMAR == post-login surfaces (dashboard / admin)
   Owned by DESIGN-SPEC-APP.md. Same materials, working density.
   ================================================================ */

/* ---- app layout ---- */
.wrap--app { max-width: var(--wrap-max-app); }
.sect--app { padding: var(--sect-pad-app) 0 8px; }
/* the app's generic flex row (promoted from the styleguide's demo rows —
   dashboard v3/v4 built its control rows on it) */
.demo { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* micro-subtext: secondary line under a strong label (12px, dim) */
.sub { font-size: 12px; color: var(--text-dim); }
.appbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 22px 0 4px; }
.appbar .sp { flex: 1; }
.appbar .note { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: .04em; }

/* ---- in-page tab bar (dashboard sections) — same lime-dot active grammar ---- */
.tabbar { display: flex; gap: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--edge-faint); margin-bottom: 20px; }
.tabbar a { color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 9px 2px 11px; cursor: pointer; }
.tabbar a:hover { color: var(--text); }
.tabbar a.active { color: var(--text); }
.tabbar a.active::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); margin-left: 7px; vertical-align: 2px; }
/* "Soon" badge next to a not-yet-live tab (e.g. Servers) — a small uppercase pill
   in the muted coming-soon color so it reads as a status, not part of the label. */
.soon-tag { display: inline-block; margin-left: 6px; vertical-align: 1px; font-family: var(--font-mono);
  font-size: 8.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--soon-pill);
  padding: 2px 5px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* ---- wallet card: the feathered-subject pool tile ----
   Ported from the live dashboard's .pool-card-min (style.css §pool-grid) —
   per-pool badge art bleeds off the top-right through a radial feather mask.
   Art treatment is verbatim; the frame is the v8 glass material. */
.wallet { min-height: 128px; overflow: hidden; }
.wallet .art { position: absolute; top: -8%; right: -9%; width: 58%; height: 116%; z-index: 0;
  object-fit: cover; object-position: right center; opacity: .85; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 85% 78% at 72% 50%, #000 0%, #000 22%, rgba(0,0,0,.5) 52%, transparent 80%);
          mask-image: radial-gradient(ellipse 85% 78% at 72% 50%, #000 0%, #000 22%, rgba(0,0,0,.5) 52%, transparent 80%); }
.wallet .in { position: relative; z-index: 1; max-width: 65%; padding: 18px 20px; }
.wallet--noart .in { max-width: 100%; }
.wallet .pool { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 8px; }
.wallet .bal { font-family: var(--font-mono); font-size: 26px; font-weight: 650; line-height: 1.1; letter-spacing: -.02em;
  color: var(--lime); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(197,232,58,.3); }
.wallet .bal .unit { font-size: 12px; font-weight: 400; color: var(--text-muted-2); margin-left: 2px; text-shadow: none; }
.wallet .meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* wallet rail: one even row that tightens as pools are added — never orphans a
   card onto a lonely second row. Mobile = horizontal snap-scroll strip. */
.wallets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--gap-grid); }
@media (max-width: 900px) {
  .wallets { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .wallet { scroll-snap-align: start; }
}

/* ---- LED status primitive (led-state-ramp ruling; ui/led from the gap register) ---- */
.led { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--led-idle); vertical-align: 1px; }
.led--live { background: var(--led-live); box-shadow: 0 0 6px rgba(197,232,58,.5); }
.led--ok { background: var(--led-ok); }
.led--avail { background: var(--led-avail); }
.led--warn { background: var(--led-warn); }
.led--crit { background: var(--alarm); box-shadow: 0 0 6px var(--alarm-soft); }
/* live/crit may pulse under the motion-exceptions ruling — live grammar only */
@media (prefers-reduced-motion: no-preference) {
  .led--live.pulse, .led--crit.pulse { animation: led-pulse 2s ease-in-out infinite; }
  @keyframes led-pulse { 50% { opacity: .45; } }
}

/* ---- user chip (app topbar identity) ---- */
.userchip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: 12.5px; color: var(--text-soft); }
.userchip .av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(124,154,62,.25); color: var(--lime); font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; }

/* ---- segmented control (ui/segmented) — the app's toggle grammar ---- */
.seg { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-btn);
  background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--input-edge); }
.seg button { appearance: none; border: 0; cursor: pointer; padding: 7px 14px; border-radius: var(--r-copybtn);
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: transparent; }
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"] { color: var(--ink-btn); background: var(--lime); }
.seg button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.seg--wide { display: flex; } .seg--wide button { flex: 1; }

/* ---- preset bar (ui/preset-bar) — saved config chips ---- */
.presetbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 16px;
  border-radius: var(--r-btn); background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--edge-faint); }
.presetbar .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); }
/* preset-chip rows outside the bar (qty/session/gb presets) need their own gap */
.presets { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.preset { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); cursor: pointer;
  font-size: 12.5px; color: var(--text-muted); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--edge); }
.preset:hover { color: var(--text); background: rgba(255,255,255,.06); }
.preset.active { color: var(--ink-btn); background: var(--lime); box-shadow: none; font-weight: 600; }
.preset .x { opacity: .55; font-size: 13px; } .preset .x:hover { opacity: 1; }
.preset--add { color: var(--text-dim); border: 1px dashed var(--edge-strong); box-shadow: none; background: transparent; }

/* ---- advanced disclosure (Premium-only Generate options) ---- */
.adv { margin-top: 4px; border-top: 1px solid var(--edge-faint); }
.adv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 13px 2px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-label); }
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::before { content: "▸"; color: var(--text-muted-2); transition: none; }
.adv[open] > summary::before { content: "▾"; }
.adv > summary .tag { margin-left: auto; font-size: 9px; letter-spacing: .12em; color: var(--lime); box-shadow: inset 0 0 0 1px rgba(197,232,58,.4); padding: 2px 7px; border-radius: var(--r-pill); }
.adv-body { padding: 4px 0 8px; }

/* ---- split preview (ui/split-preview) — see the list shape before generating ---- */
.splitprev { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.splitprev .lst { flex: 1 1 92px; min-width: 92px; padding: 9px 11px; border-radius: var(--r-copybtn);
  background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--edge-faint); }
.splitprev .lst .h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); }
.splitprev .lst .n { font-family: var(--font-mono); font-size: 16px; font-weight: 650; color: var(--text-soft); font-variant-numeric: tabular-nums; margin-top: 2px; }
.splitprev .lst .t { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; }

/* ---- output list tabs (ui/output-tabs) ---- */
.otabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 16px 0; }
.otabs button { appearance: none; border: 0; cursor: pointer; padding: 6px 12px 8px; background: transparent;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.otabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--lime); }
.otabs button .c { color: var(--text-dim); }

/* ---- msel (ui/msel) — multi-select with search + chips (US states etc.) ---- */
.msel { position: relative; }
.msel-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.msel-btn::after { content: "▾"; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted-2); flex: none; }
.msel-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: -1px; }
.msel-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--panel-bg);
  border: 1px solid var(--edge); border-top-color: var(--edge-strong); border-radius: var(--r-btn); box-shadow: var(--shadow-card); overflow: hidden; }
.msel-panel[hidden] { display: none; }
.msel-search { display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid var(--edge-faint); }
.msel-search input { flex: 1; padding: 7px 10px; font-size: 12.5px; color: var(--text-soft); background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-copybtn); }
.msel-search input:focus { outline: 2px solid var(--lime); outline-offset: -1px; }
.msel-clear { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; padding: 0 6px; }
.msel-list { max-height: 240px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.msel-list li { padding: 7px 12px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.msel-list li:hover { background: rgba(255,255,255,.04); color: var(--text); }
.msel-list li[aria-selected="true"] { color: var(--text); }
.msel-list li::before { content: ""; width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--input-edge); flex: none; }
.msel-list li[aria-selected="true"]::before { background: var(--lime); box-shadow: none; }
.msel-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.msel-chips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; color: var(--lime); box-shadow: inset 0 0 0 1px rgba(197,232,58,.35); }
.msel-chips .chip .x { cursor: pointer; opacity: .6; } .msel-chips .chip .x:hover { opacity: 1; }

/* auto top-up v1 removed — superseded by .atu2 sentence-form rule cards below
   (owner round 4: v1 was "insanely terrible", needed per-pool discount codes). */

/* ---- section label (the original's rhythm device: label + hairline out to the edge) ---- */
.plabel { display: flex; align-items: center; gap: 12px; margin: 30px 0 13px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); }
.plabel::after { content: ""; flex: 1; height: 1px; background: var(--edge-faint); }
.plabel--side::after { display: none; }
.plabel--side .rule { flex: 1; height: 1px; background: var(--edge-faint); }
.plabel:first-child { margin-top: 4px; }
.plabel .side { color: var(--text-dim); letter-spacing: .06em; }

/* ---- universal bar-row (domains, breakdowns, wallets, patterns) ---- */
.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 168px) 1fr minmax(64px, auto); align-items: center; gap: 12px; }
.bar-row .k { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .k.mono { font-family: var(--font-mono); font-size: 12px; }
.bar-row .track { height: 9px; border-radius: 5px; background: rgba(255,255,255,.05); overflow: hidden; }
.bar-row .track .fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--olive), var(--lime)); box-shadow: 0 0 8px rgba(197,232,58,.3); }
.bar-row .v { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text-soft); text-align: right; }
/* pool-colored dot for series legends (colors are entity-locked — set inline) */
.pooldot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: 1px; margin-right: 6px; }

/* ================================================================
   == CHECKOUT & FORMS GRAMMAR ==
   The layout laws v3 violated with 80 inline styles. Single source now:
   checkout surfaces are FULL COLUMN WIDTH, one padding cadence, summary
   and key-value rows share one grammar. Applied everywhere → no eyeballing.
   ================================================================ */

/* spacing + width utilities (the padding cadence, as classes not inline styles).
   The kit's vertical scale: sm 10 · md 14 · lg 22 · break 34. */
.mb-sm { margin-bottom: 10px; } .mb-md { margin-bottom: 14px; } .mb-lg { margin-bottom: 22px; }
.spill { margin-bottom: 34px; }                 /* pre-major-break breathing room */
.tiny { font-size: 11px; color: var(--text-dim); }
.mono--soft { color: var(--text-soft); }
.hint--block { display: block; margin-top: 7px; }
.presets--pad { margin-bottom: 14px; }
.presets .preset--lg { padding: 8px 16px; }
.field--narrow { max-width: 280px; } .field--narrow-md { max-width: 420px; }
.cardhead .ttl .led { margin-right: 7px; }
/* generic flex spacer (push siblings apart) — app grammar */
[data-panel] .sp, .cardhead .sp { flex: 1; }
/* small text tones */
.t-dim { font-size: 12px; color: var(--text-dim); }
.t-soft { color: var(--text-soft); }
/* panel / breakdown micro-label (analytics column headers) */
.blabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 10px; }
/* mono number/text input in app forms (the boxed field look) */
.numfield { padding: 9px 11px; font-family: var(--font-mono); font-size: 13px; color: var(--text-soft);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-btn); }
.numfield:focus { outline: 2px solid var(--lime); outline-offset: -1px; }
.numfield.w-sm { width: 92px; } .numfield.w-md { width: 118px; } .numfield.w-full { width: 100%; }
/* round monogram avatar (Settings identity) */
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--lime); background: rgba(124,154,62,.25); }
/* 3-up grid (analytics breakdowns / wallet-cost) */
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-grid); align-items: start; }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr; } }
/* the password prefix-snippet field (Generate) — read-only, non-copyable */
.pwsnippet { flex: 1; min-width: 150px; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px; color: var(--text-soft);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-btn); letter-spacing: .02em; }

/* checkout column: a single full-width stack. Cards inside span it fully —
   never a floating 460px mini-card. Used by Purchase, Accounts, Billing. */
.checkout { display: grid; gap: 16px; }
.checkout > .card { width: 100%; }
/* the whole panel content honors this too — kill stray max-widths */
[data-panel] .card.card--full { width: 100%; max-width: none; }

/* text rhythm inside app cards — text never sits on the card edge, blocks
   breathe. First/last child margins collapse so padding stays exact. */
.pad--app > :first-child, .card > :first-child { margin-top: 0; }
.pad--app > :last-child, .card > :last-child { margin-bottom: 0; }
.card p, .pad--app p { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.card p.lead { color: var(--text-soft); }
.card h3, .pad--app h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; }

/* key-value / summary rows — label left, value right, hairline between,
   generous vertical rhythm. ONE grammar for order summaries AND settings meta. */
.kv { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; }
.kv + .kv { border-top: 1px solid var(--edge-faint); }
.kv .k { font-size: 13px; color: var(--text-muted); }
.kv .v { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-soft); display: inline-flex; align-items: center; gap: 8px; }
.kv--total { border-top: 1px solid var(--edge) !important; margin-top: 5px; padding-top: 14px; }
.kv--total .k { font-family: var(--font-ui); font-size: 14px; font-weight: 650; color: var(--text); }
.kv--total .v { font-size: 17px; font-weight: 650; color: var(--lime); }
/* order-summary semantic rows: solidarity discount (accent), applied discount
   (ok), upcharge warning (warn) — the buy summary must read the same as it charges */
.kv--accent .k, .kv--accent .v { color: var(--lime); }
.kv--ok .v { color: var(--lime); }
.kv--warn .k, .kv--warn .v { color: var(--warn); }

/* GB preset chips carry a secondary $ total under the size; keep it legible when
   the chip is the active (lime) selection */
#gbPresets .preset .sub { font-size: 11px; }
#gbPresets .preset.active .sub { color: var(--ink-btn); opacity: .8; }

/* ==== convert exchange module (Purchase → Convert) — two legs + swap ==== */
.conv { padding: 8px 12px; }
.conv-leg { padding: 14px 4px; }
.conv-leg + .conv-leg { border-top: 1px solid var(--edge-faint); }
.conv-leg__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.conv-leg__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); }
.conv-leg__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.conv-leg__meta.is-over { color: var(--danger); }
.conv-max { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 2px 8px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.conv-max:hover { color: var(--lime); background: rgba(255,255,255,.06); }
.conv-leg__body { display: flex; align-items: center; gap: 12px; }
.conv-amount { flex: 1; min-width: 0; font-size: 22px; }
.conv-pool { flex: 0 0 auto; }
/* the convert pool <select> is upgraded to the .ksel widget — give the wrapper a
   fixed lane in the flex leg so its trigger doesn't collapse next to the amount */
.conv-leg__body .ksel { flex: 0 0 auto; width: 190px; }
@media (max-width: 480px) { .conv-leg__body { flex-wrap: wrap; } .conv-leg__body .ksel { width: 100%; } }
.conv-receive { flex: 1; min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--font-mono);
  font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--text); }
.conv-receive__unit { font-size: 12px; font-weight: 400; color: var(--text-muted-2); }
.conv-leg--blocked .conv-receive { color: var(--text-dim); }
.conv-swapline { display: flex; justify-content: center; padding: 2px 0; }
.conv-swap { appearance: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--edge); background: var(--input-bg); color: var(--text-soft); font-size: 15px; line-height: 1; }
.conv-swap:hover { color: var(--lime); border-color: var(--edge-strong); }
.conv-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-dim); }
.conv-meta__rate { color: var(--text-soft); }
.conv-meta__note { display: inline-flex; align-items: center; gap: 7px; }

/* input with an in-box suffix (handle@buyers.resifactory.net as ONE group) */
.ingroup { display: flex; align-items: stretch; border: 1px solid var(--input-edge); border-radius: var(--r-btn); background: var(--input-bg); overflow: hidden; }
.ingroup:focus-within { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.ingroup input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 13px; font-size: 13.5px; color: var(--text-soft); }
.ingroup input:focus { outline: none; }
.ingroup .suffix { display: flex; align-items: center; padding: 0 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); background: rgba(255,255,255,.03); border-left: 1px solid var(--edge-faint); white-space: nowrap; }
.ingroup .btn { border-radius: 0; border: 0; border-left: 1px solid var(--edge-faint); }

/* premium add-on card — the striking green top hairline + faint accent wash
   so an optional upsell reads as premium, not a checkbox. (ms-card fixed.) */
.addon { position: relative; overflow: hidden; padding: 20px 22px;
  background: linear-gradient(180deg, rgba(124,154,62,.07), rgba(255,255,255,.025) 42%); }
.addon::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lime), transparent); box-shadow: 0 0 12px rgba(197,232,58,.5); }
.addon .addon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.addon .eyebrow-pill { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lime); padding: 4px 10px; border-radius: var(--r-pill); background: rgba(124,154,62,.16); box-shadow: inset 0 0 0 1px rgba(197,232,58,.3); }
.addon .feats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 4px 0 14px; }
.addon .feats .f { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 560px) { .addon .feats { grid-template-columns: 1fr; } }
/* Mail-Server tier-preview readout (Accounts checkout, billing-honesty cohorts) */
.ms-tierprev { font-family: var(--font-mono); font-size: 12px; color: var(--lime); text-align: right; line-height: 1.5; margin-top: 10px; }

/* Stripe secure-field placeholder (Purchase / Accounts / Billing) */
.stripefield { padding: 14px; border: 1px solid var(--input-edge); border-radius: var(--r-btn); background: var(--input-bg); color: var(--text-dim); font-size: 12.5px; }
/* top-aligned checkbox row (multi-line acknowledgements) */
.check--top { align-items: flex-start; line-height: 1.55; }
.check--top input { margin-top: 3px; flex: none; }
/* stock strip (Accounts) */
.stockbar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.stockbar .sp { flex: 1; }

/* credential-format code chip (Accounts "delivered as") */
.microlabel { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 5px; }
.codechip { font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); padding: 10px 12px; border-radius: var(--r-copybtn); background: var(--code-bg-deep); overflow-x: auto; }

/* stat scoreboard (Settings account stats, referral scoreboard) */
.statrow { display: flex; flex-wrap: wrap; gap: 36px; }
.statrow .cell .n { font-family: var(--font-mono); font-size: 19px; font-weight: 650; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.statrow .cell .n.accent { color: var(--lime); }
.statrow .cell .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); margin-top: 3px; }

/* small icon badge (Generate member chip, security head) */
.iconbadge { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--lime); background: rgba(124,154,62,.14); box-shadow: inset 0 0 0 1px rgba(197,232,58,.22); }

/* a card header row (title/eyebrow left, status/action right) */
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cardhead .ttl { font-size: 14px; font-weight: 650; }

/* ---- auto top-up v2 — sentence-form rule cards, per-pool discount codes ----
   Each pool gets a full-width rule that reads as a sentence, with the pool's
   feathered badge art (like the wallet cards) so ATU = "rules on your wallets".
   Different pools can carry different discount codes. */
.atu2 { display: grid; gap: 14px; }
.atu2-rule { position: relative; overflow: hidden; padding: 18px 20px; }
.atu2-rule .art { position: absolute; top: -10%; right: -6%; width: 44%; height: 120%; z-index: 0;
  background-size: cover; background-position: right center; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 74% 50%, #000 0%, #000 16%, rgba(0,0,0,.4) 50%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 75% at 74% 50%, #000 0%, #000 16%, rgba(0,0,0,.4) 50%, transparent 78%); }
.atu2-rule > * { position: relative; z-index: 1; }
.atu2-rule .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.atu2-rule .head .pool { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.atu2-rule .head .sp { flex: 1; }
.atu2-rule .sentence { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-muted); max-width: 62%; }
.atu2-rule .price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.atu2-rule .price .was { text-decoration: line-through; color: var(--text-faint); }
.atu2-rule .price .now { color: var(--lime); }
.atu2-rule .price .run { margin-left: auto; color: var(--text-soft); }
.atu2-rule .code { display: flex; align-items: center; gap: 8px; margin-top: 12px; max-width: 62%; }
.atu2-rule .code .lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); flex: none; }
.atu2-rule .code input { flex: 1; min-width: 0; padding: 8px 11px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft); background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-copybtn); }
.atu2-rule .code input:focus { outline: 2px solid var(--lime); outline-offset: -1px; }
.atu2-rule .codenote { margin-top: 7px; font-size: 11px; }
.atu2-rule .codenote.err { color: var(--alarm); } .atu2-rule .codenote.ok { color: var(--led-ok); }
.atu2-rule.is-off { opacity: .55; } .atu2-rule.is-off .art { filter: grayscale(1); opacity: .25; }
.atu2-rule.is-off input, .atu2-rule.is-off .numin { pointer-events: none; }
@media (max-width: 640px) { .atu2-rule .sentence, .atu2-rule .code { max-width: 100%; } .atu2-rule .price .run { margin-left: 0; width: 100%; } }

/* pool badge art as a background (kills inline background-image:url()).
   One class per pool → reusable anywhere feathered pool art is needed. */
.artbg-premium { background-image: url('/img/dashboard/pool-badges/premium.webp'); }
.artbg-retail_select { background-image: url('/img/dashboard/pool-badges/retail_select.webp'); }
.artbg-mobile_dedicated { background-image: url('/img/dashboard/pool-badges/mobile_dedicated.webp'); }
.artbg-walmart_premium { background-image: url('/img/dashboard/pool-badges/walmart_premium.webp'); }
.artbg-dedicated_pool { background-image: url('/img/dashboard/pool-badges/dedicated_pool.webp'); }
/* GATED pools (target_rate_limit, private_pool) get NO artbg class here:
   naming them in a globally-served stylesheet violates the render-nothing
   contract (zero DOM/network surface for ungated users). Gated rows set
   their art via the lint-allowlisted computed inline background at wiring. */

.demo--pad-t { padding-top: 14px; }
/* vertical spacers (explicit gaps between stacked blocks) */
.vspace-xs { height: 12px; } .vspace-sm { height: 16px; } .vspace { height: 22px; } .vspace-lg { height: 34px; }
/* more margin/gap/text utilities used across tabs */
.mt-sm { margin-top: 8px; } .mt-md { margin-top: 12px; } .mt-lg { margin-top: 16px; }
.mb0 { margin-bottom: 0; }
.gap-8 { gap: 8px; } .gap-7 { gap: 7px; } .gap-6 { gap: 6px; }
.between { justify-content: space-between; }
.tar { text-align: right; }
.t-muted { font-size: 12px; color: var(--text-muted); }
.t-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.t-hint { font-size: 11px; color: var(--text-dim); }
.lead-p { font-size: 12.5px; color: var(--text-muted); margin: 0 0 12px; }
.cap-64 { max-width: 64ch; } .cap-44 { max-width: 44ch; }
.strong { font-weight: 650; } .strong-15 { font-weight: 650; font-size: 15px; }
.ttl-row { font-weight: 600; font-size: 13.5px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }
/* settings scoreboard band (bordered stat row) */
.scoreband { display: flex; flex-wrap: wrap; gap: 40px; padding: 14px 0; border-top: 1px solid var(--edge); }
.scoreband--btm { border-bottom: 1px solid var(--edge); }
.scoreband .cell .n, .stat-n { font-family: var(--font-mono); font-size: 19px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.scoreband .cell .n.accent { color: var(--lime); }
.scoreband .cell .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); margin-top: 3px; }
/* final small utilities (converted from inline) */
.t-dim2 { color: var(--text-dim); } .t13 { font-size: 13px; } .items-c { align-items: center; }
.items-start { align-items: flex-start; } .flex-none { flex: none; } .self-c { align-self: center; }
.ml-xs { margin-left: 6px; } .gap-9 { gap: 9px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.bt-faint { border-top: 1px solid var(--edge-faint); }
.microlabel-xs { font-size: 9px; color: var(--text-muted-2); }
.tiles--wide { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
/* member/identity row card (Generate premium chip, etc.) */
.rowcard { display: flex; align-items: center; gap: 14px; }
/* settings security action footer */
.set-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--edge); }
/* referral link readonly field */
.linkfield { flex: 1; min-width: 200px; padding: 9px 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-soft);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-btn); }
/* mac hero heading */
.machero { padding: 8px 0 4px; }
.machero h2 { font-size: 24px; margin: 0 0 6px; }
.preset--sm { padding: 5px 9px; }

/* inline number input that reads as part of a sentence */
.numin { width: 58px; padding: 6px 8px; text-align: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: var(--text); background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-copybtn); font-variant-numeric: tabular-nums; }
.numin:focus { outline: 2px solid var(--lime); outline-offset: -1px; }

/* ---- analytics controls toolbar (range/pool chips · spacer · export) ---- */
/* ===== Analytics tab (data-panel="analytics"). The analytics.js module renders
   legacy .an-* / .surface / .form-input markup that the kit shell doesn't otherwise
   style; ported from style.css §Analytics-v2 and retokenized to kit tokens. The
   module tags KPI/panel containers with `.surface`, so that's where the card frame
   goes. Scoped to #analyticsContent where the class is generic (.surface/.form-input). ===== */
/* Controls toolbar — a flat glass card frame (mockup: .card.card--flat.pad--app) wrapping a
   flex row: range preset pills · hidden custom-date subrow · pool pills · UTC/Export/Refresh. */
.an-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 20px;
  padding: var(--pad-card-app); border-radius: var(--r-card);
  background: rgba(255,255,255,.025); border: 1px solid var(--edge); border-top-color: var(--edge-strong); }
.an-controls__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.an-custom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#analyticsContent .form-input {
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-chip);
  color: var(--text-soft); font: inherit; font-size: 13px; padding: 7px 10px; }
#analyticsContent .form-input:focus { outline: 2px solid var(--lime); outline-offset: -1px; }
.an-custom .form-input { width: 150px; }
.an-dash { color: var(--text-muted); }
/* UTC marker reads as a dim pill (mockup .pill--dim). */
.an-utc { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--text-dim); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); border-radius: var(--r-pill); padding: 3px 9px; }

/* Chips — range presets, pool filters, and events filters. The module emits bare
   <button class="chip"> toggled with .active; kit has no base .chip, so map them to the .preset
   pill grammar (lime .active). Scoped to #analyticsContent so product/msel .chip stay untouched. */
#analyticsContent .chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.an-pools { margin-left: auto; }               /* group pool pills with the right-hand controls */
#analyticsContent .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 0;
  border-radius: var(--r-pill); cursor: pointer; font-family: var(--font-ui); font-size: 12.5px;
  color: var(--text-muted); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--edge); }
#analyticsContent .chip:hover { color: var(--text); background: rgba(255,255,255,.06); }
#analyticsContent .chip.active { color: var(--ink-btn); background: var(--lime); box-shadow: none; font-weight: 600; }
#analyticsContent .chip:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.an-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex: none; }

/* Buttons — the module emits .btn.btn-sm (utilities) and .btn.btn-sm.btn-primary (Apply). kit
   uses .btn--sm; base .btn is lime-primary. Scoped remap: utility .btn read as ghost (matching
   the mockup's restrained controls), .btn-primary keeps the lime primary, .btn-sm = small size. */
#analyticsContent .btn { color: var(--text); background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.12); }
#analyticsContent .btn:hover { background: rgba(255,255,255,.08); filter: none; }
#analyticsContent .btn.btn-primary { color: var(--ink-btn);
  background: linear-gradient(170deg, var(--lime-bright), var(--lime-soft) 65%, var(--lime-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.18); }
#analyticsContent .btn.btn-primary:hover { filter: brightness(1.06); }
#analyticsContent .btn-sm { padding: 7px 13px; font-size: 12px; border-radius: var(--r-copybtn); }

/* Card frames — the module tags KPI/panel/insight containers with `.surface`; match .card. */
#analyticsContent .surface, .an-kpi, .an-insight {
  position: relative; border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.016));
  border: 1px solid var(--edge); border-top-color: var(--edge-strong);
  box-shadow: var(--shadow-card); padding: var(--pad-card-app); }

.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.an-kpi__label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.an-kpi__value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--text); }
.an-kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; min-height: 20px; }
.an-kpi__delta { font-size: 11px; color: var(--text-soft); }
.an-spark { flex-shrink: 0; opacity: .9; }
.an-panel { margin-bottom: 24px; }
.an-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.an-panel__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Panel title — the module emits .psection-label (undefined in kit). Match the kit's mono
   uppercase section-label grammar (.blabel / .plabel / ui-section hairline label). */
.psection-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted-2); }
.an-empty { color: var(--text-muted); font-size: 13px; padding: 20px 4px; }
.an-error { border: 1px solid var(--danger); border-radius: var(--r-card); padding: 12px 16px; color: var(--danger); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.an-skel { position: relative; overflow: hidden; background: rgba(255,255,255,.04); border-radius: var(--r-card); }
.an-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); animation: anShimmer 1.2s infinite; }
@keyframes anShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .an-skel::after { animation: none; } }
.an-chart { width: 100%; }

/* Bar lists — the module emits BEM children .bar-row__label/__bar/__bar-fill/__value, but kit
   only styles .bar-row .k/.track/.fill/.v, so every fill was rendering zero-height & colorless.
   Mirror that recipe onto the emitted names (scoped to #analyticsContent; the global .bar-row
   grid container is shared with the mockup and left untouched). Covers: session lengths, top
   domains, weekday pattern, wallet $/GB, top cost by domain, detection classes, breakdowns. */
#analyticsContent .bar-row__label { font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#analyticsContent .bar-row__bar { height: 9px; border-radius: 5px; background: rgba(255,255,255,.05); overflow: hidden; }
#analyticsContent .bar-row__bar-fill { display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--olive), var(--lime)); box-shadow: 0 0 8px rgba(197,232,58,.3); }
#analyticsContent .bar-row__value { font-family: var(--font-mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--text-soft); text-align: right; }
/* the module never wraps rows in the kit .bars grid, so supply the vertical rhythm here */
#analyticsContent .bar-row + .bar-row { margin-top: 9px; }
.an-domains__bars { margin-bottom: 6px; }

.an-domains__tools { margin: 16px 0 8px; }
.an-domains__tools .form-input { max-width: 280px; }
.an-tablewrap { overflow-x: auto; }
/* Tables — both the domains treegrid and the events table carry class="ptable an-table", but
   kit has no base th/td for them (that look lives under table.dt). Mirror table.dt here so rows
   read as clearly separated: mono uppercase header with a bottom rule, --edge-faint row
   separators, a hover highlight, right-aligned mono .num columns. Scoped so generic .num/.ptable
   never leak onto other panels. */
#analyticsContent table.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#analyticsContent table.an-table th { text-align: left; padding: 11px 14px; font-family: var(--font-mono);
  font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2);
  border-bottom: 1px solid var(--edge); white-space: nowrap; }
#analyticsContent table.an-table td { padding: 10px 14px; border-top: 1px solid var(--edge-faint);
  vertical-align: middle; color: var(--text-muted); }
#analyticsContent table.an-table td b, #analyticsContent table.an-table td .strong { color: var(--text-soft); font-weight: 600; }
#analyticsContent table.an-table th.num, #analyticsContent table.an-table td.num {
  text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#analyticsContent table.an-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.an-table th[data-k] { cursor: pointer; user-select: none; white-space: nowrap; }
.an-table th[data-k].sorted::after { content: ' ↓'; color: var(--lime); }
.an-table th[data-k].sorted.asc::after { content: ' ↑'; }
.an-table__row { cursor: pointer; }
.an-table__row:focus-visible td { background: rgba(255,255,255,.06); }
.an-mono { font-family: var(--font-mono); font-size: 13px; }
.an-drill td { background: rgba(255,255,255,.02); padding: 12px 16px; }
/* visually-hidden — the domains table renders <caption class="sr-only">; kit had no .sr-only,
   so that caption text was showing as visible copy above the table. */
#analyticsContent .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.an-detect__hint { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.an-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.an-breakdowns h4 { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.an-export { position: relative; }
.an-export__menu { position: absolute; right: 0; top: calc(100% + 4px); background: var(--panel-bg); border: 1px solid var(--edge); border-radius: var(--r-btn); padding: 4px; z-index: 30; min-width: 190px; box-shadow: var(--shadow-card); }
.an-export__item { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); font-size: 13px; padding: 8px 10px; border-radius: var(--r-copybtn); cursor: pointer; }
.an-export__item:hover, .an-export__item:focus-visible { background: rgba(255,255,255,.05); }
/* Segmented toggles (GB/Requests · Compare off/vs-prev · gen Total/By-country/By-type) — match
   the kit .seg: inset-rail track, solid-lime active, to read like the mockup's segmented controls. */
.an-toggle { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--r-btn);
  background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--input-edge); }
.an-toggle__btn { appearance: none; border: 0; cursor: pointer; padding: 5px 12px; border-radius: var(--r-copybtn);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-muted); background: transparent; }
.an-toggle__btn:hover { color: var(--text); }
.an-toggle__btn.active { color: var(--ink-btn); background: var(--lime); }
.an-toggle__btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; }
.an-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.an-insight__value { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--text); }
.an-insight__sub { font-size: 11px; color: var(--text-soft); margin-top: 4px; }
.an-badge-new { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--lime-bright); border: 1px solid var(--lime-deep); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.an-drawer { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.an-drawer__stats { font-size: 12px; color: var(--text-soft); line-height: 1.7; }
.an-drawer__stats b { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.an-events__filters { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .an-hide-sm { display: none; }
  .an-controls__right { margin-left: 0; width: 100%; justify-content: flex-end; }
  .an-drawer { grid-template-columns: 1fr; }
}

/* ---- KPI band (analytics headline tiles w/ delta + sparkline) ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); gap: var(--gap-grid); }
.kpi { padding: 15px 17px; }
.kpi .l { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--text-muted-2); }
.kpi .n { font-family: var(--font-mono); font-size: 25px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: 5px; }
.kpi .foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.kpi .delta { font-variant-numeric: tabular-nums; }         /* deltas stay NEUTRAL-toned (original rule) */
.kpi .spark { margin-left: auto; color: var(--olive); }
.kpi--runway .n { color: var(--led-ok); }                    /* runway = the one status-colored tile */
.kpi--runway.warn .n { color: var(--warn); } .kpi--runway.crit .n { color: var(--alarm); }
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--gap-grid); }
.insight { padding: 12px 15px; } .insight .n { font-family: var(--font-mono); font-size: 17px; font-weight: 650; color: var(--text-soft); }
.insight .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); margin-top: 3px; }
.insight .sub { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

/* ---- chart frame (SVG charts render into .chartbox; panel actions ride the head) ---- */
.panelhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panelhead .sp { flex: 1; }
.chartbox { width: 100%; overflow: hidden; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chart-x, .chart-y { font-family: var(--font-mono); font-size: 9px; fill: var(--text-dim); }
.chart-grid { stroke: var(--edge-faint); stroke-width: 1; }
.chart-area { opacity: .26; } .chart-line { fill: none; stroke-width: 1.6; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }

/* ---- scrollable output pane (full list, scrolls — not a fake "…N more") ---- */
/* Fixed-height terminal viewport: the box is the SAME full size before and after
   generation, so nothing jumps/reflows when output arrives (min == max). */
.outscroll { min-height: 340px; max-height: 340px; overflow-y: auto; margin: 0; padding: 15px 16px; background: var(--code-bg-deep); }
.outscroll code { font-family: var(--font-mono); font-size: 12px; line-height: 1.85; color: var(--text-soft); white-space: pre; }
.outscroll .li { color: var(--lime); }
/* Truncation note ("Showing first N of M lines") — align to the terminal's inner
   padding instead of sitting flush against the card wall. */
#outputPreviewNote { display: block; padding: 9px 16px 13px; margin-top: 0; }

/* ---- mac hero card (the "pop" — pulsing dot, glowing price, hover lift) ---- */
.machero .eyebrow { color: var(--green-label); }
.macgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-grid); }
@media (max-width: 760px) { .macgrid { grid-template-columns: 1fr; } }
.maccard { position: relative; padding: 20px 22px; overflow: hidden; }
.maccard::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,232,58,.5), transparent); }
.maccard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.maccard .eb { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); }
.maccard .price { font-family: var(--font-mono); font-size: 34px; font-weight: 650; color: var(--lime); letter-spacing: -.02em; text-shadow: 0 0 22px rgba(197,232,58,.35); margin: 12px 0 2px; }
.maccard .price span { font-size: 13px; color: var(--text-muted-2); font-weight: 400; text-shadow: none; }
.maccard .specs { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.maccard .macchip { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-soft); padding: 4px 9px; border-radius: var(--r-copybtn); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.maccard .wl { border-top: 1px solid var(--edge-faint); padding-top: 14px; }
.maccard .count { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); margin-top: 9px; }
.wldot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 6px; vertical-align: 1px; }
@media (prefers-reduced-motion: no-preference) { .wldot.pulse { animation: led-pulse 1.8s ease-in-out infinite; } }

/* ---- ASN validated add-list (type → validate → chip or "no proxies" alert) ---- */
.asnbox .row { display: flex; gap: 8px; }
.asnbox input { flex: 1; padding: 9px 11px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft); background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-btn); }
.asnbox input:focus { outline: 2px solid var(--lime); outline-offset: -1px; }
.asnbox .msg { font-size: 11px; margin-top: 6px; min-height: 14px; }
.asnbox .msg.ok { color: var(--led-ok); } .asnbox .msg.err { color: var(--alarm); }

/* ---- stat tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--gap-grid); }
.tile { padding: var(--pad-card-app); }
.tile .n { font-family: var(--font-mono); font-size: 22px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .n em { font-style: normal; color: var(--lime); }
.tile .l { margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); }
.tile .sub { margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }

/* ---- forms ---- */
.field { display: block; margin-bottom: 14px; }
.field > label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 6px; }
/* the :not() guards are load-bearing: width:100% on a bare checkbox inflates it (known trap) */
.field input:not([type=checkbox]):not([type=radio]), .field textarea, .field select, .ksel-btn {
  width: 100%; padding: 10px 12px; font-size: 13.5px; font-family: var(--font-ui); color: var(--text-soft);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-btn); }
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.hint { margin-top: 5px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); letter-spacing: .03em; }
/* live handle-check states (Accounts / enable-MS modal) + row-load states */
.hint.is-ok { color: var(--led-ok); }
.hint.is-bad { color: var(--danger); }
.t-ok { color: var(--led-ok); }
.t-danger { color: var(--danger); }
.field--err input, .field--err textarea, .field--err .ksel-btn { border-color: var(--danger-edge); }
.field .err { margin-top: 5px; font-size: 11.5px; color: var(--danger); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
input[type=checkbox], input[type=radio] { accent-color: var(--lime); }
.check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.check:hover { color: var(--text); }

/* toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .knob { flex: none; width: 34px; height: 20px; border-radius: var(--r-pill); background: rgba(255,255,255,.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); position: relative; transition: background .15s; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-soft); transition: left .15s, background .15s; }
.switch input:checked + .knob { background: var(--lime); box-shadow: none; }
.switch input:checked + .knob::after { left: 17px; background: var(--ink-btn); }
.switch input:focus-visible + .knob { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---- kit dropdown (.ksel) — JS-upgraded <select>, single source: js/ui/dropdown.js ----
   Panel is SOLID (--panel-bg): blurred/fixed panels are the known backdrop-filter trap. */
.ksel { position: relative; }
.ksel select.ksel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
/* Disabled dropdown (e.g. CITY before a state is picked): dim + non-interactive. */
.ksel--disabled { opacity: .5; }
.ksel--disabled .ksel-btn { pointer-events: none; cursor: not-allowed; }
.ksel-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.ksel-btn::after { content: "▾"; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted-2); flex: none; }
.ksel-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.ksel--open .ksel-btn { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.ksel-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--panel-bg); border: 1px solid var(--edge); border-top-color: var(--edge-strong);
  border-radius: var(--r-btn); box-shadow: var(--shadow-card); overflow: hidden; }
.ksel-panel[hidden] { display: none; }
.ksel-search { padding: 8px; border-bottom: 1px solid var(--edge-faint); }
.ksel-search input { width: 100%; padding: 7px 10px; font-size: 12.5px; color: var(--text-soft);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-copybtn); }
.ksel-search input:focus { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.ksel-list { max-height: 240px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; }
.ksel-opt { padding: 8px 12px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
.ksel-opt:hover, .ksel-opt.hover { background: rgba(255,255,255,.05); color: var(--text); }
.ksel-opt[aria-selected="true"] { color: var(--text); }
.ksel-opt[aria-selected="true"]::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); margin-left: 7px; vertical-align: 2px; }
.ksel-empty { padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.ksel-group { padding: 8px 12px 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }

/* ---- data table (.dt) ---- */
table.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dt th { text-align: left; padding: 11px 14px; font-family: var(--font-mono); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); }
table.dt td { padding: 10px 14px; border-top: 1px solid var(--edge-faint); vertical-align: middle; color: var(--text-muted); }
table.dt td b, table.dt td .strong { color: var(--text-soft); font-weight: 600; }
table.dt th.num, table.dt td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
table.dt tbody tr:hover { background: rgba(255,255,255,.02); }
table.dt .rowact { display: flex; gap: 8px; justify-content: flex-end; }

/* generic mobile stacking for app tables: add .stack + data-l on cells */
@media (max-width: 760px) {
  table.stack { min-width: 0; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding: 6px 0 12px; border-top: 1px solid rgba(255,255,255,.08); }
  table.stack tr:first-child { border-top: 0; }
  table.stack td { border-top: 0; padding: 4px 16px; text-align: left; }
  table.stack td[data-l]::before { content: attr(data-l); display: inline-block; min-width: 34%; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); font-family: var(--font-mono); }
  table.stack td.na { display: none; }
  table.stack .rowact { justify-content: flex-start; padding-left: 34%; }
}

/* ---- inline alerts ---- */
.alert { display: flex; gap: 10px; align-items: baseline; padding: 12px 16px; border-radius: var(--r-btn);
  font-size: 13px; color: var(--text-muted); background: rgba(255,255,255,.03); border: 1px solid var(--edge); }
.alert b { color: var(--text-soft); }
.alert--ok { border-color: rgba(197,232,58,.25); background: var(--ok-soft); }
.alert--warn { border-color: rgba(255,165,2,.3); background: var(--warn-soft); }
.alert--danger { border-color: var(--danger-edge); background: var(--danger-soft); }

/* ---- toasts (region appended to <body> — never inside a filtered ancestor) ---- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 240px; max-width: 360px; padding: 12px 15px; border-radius: var(--r-btn);
  background: var(--panel-bg); border: 1px solid var(--edge); border-left: 3px solid var(--lime);
  box-shadow: var(--shadow-card); font-size: 13px; color: var(--text-soft); }
.toast--warn { border-left-color: var(--warn); }
.toast--danger { border-left-color: var(--danger); }
.toast .tt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); margin-bottom: 3px; }

/* ---- dialog ---- */
dialog.dlg { padding: 22px 24px; max-width: 440px; width: calc(100% - 40px); color: var(--text);
  background: linear-gradient(180deg, rgba(28,31,25,1), rgba(20,22,18,1));
  border: 1px solid var(--edge); border-top-color: var(--edge-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow-glass); }
dialog.dlg::backdrop { background: rgba(4,5,4,.62); }
.dlg h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 650; }
.dlg p { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; }
.dlg .acts { display: flex; gap: 10px; justify-content: flex-end; }
/* rich-body modal (kitUI.modal) */
dialog.dlg.dlg--wide { max-width: 540px; }
.dlg { position: relative; max-height: 92vh; overflow-y: auto; }
.dlg .body { color: var(--text-muted); font-size: 13px; line-height: 1.55; margin: 0 0 16px; }
.dlg .body p { margin: 0 0 12px; }
.dlg .err { color: var(--danger); font-size: 12.5px; margin: 0 0 12px; }
.dlg-x { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: var(--text-dim);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.dlg-x:hover { color: var(--text); }

/* ---- empty state ---- */
.empty { text-align: center; padding: 44px 20px; }
.empty .t { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.empty p { margin: 8px auto 0; max-width: 34em; font-size: 13px; color: var(--text-faint); }
.empty .act { margin-top: 16px; }

/* ================================================================
   == ADMIN CONSOLE SHELL == (DESIGN-SPEC-APP §3 · PAGE-MAPS-ADMIN)
   Workroom, not storefront: matte everywhere, grouped left rail +
   sticky topbar, the page title IS the active rail item (zero hero).
   Section switching reuses js/ui/tabs.js (same lime-dot grammar).
   ================================================================ */
.ac-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; }

/* ---- left rail: grouped nav, ⌘K filter, count badges, external links ---- */
.ac-rail { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--edge-faint); padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 3px; }
.ac-rail .brand { display: flex; align-items: center; margin: 2px 6px 12px; }
.ac-rail .brand img { height: 40px; width: auto; display: block; }
.ac-filter { position: relative; margin-bottom: 6px; }
.ac-filter input { width: 100%; padding: 8px 11px; font-size: 12.5px; color: var(--text-soft);
  background: var(--input-bg); border: 1px solid var(--input-edge); border-radius: var(--r-btn); }
.ac-filter input:focus { outline: 2px solid var(--lime); outline-offset: -1px; border-color: transparent; }
.ac-filter .kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--text-faint);
  border: 1px solid var(--edge); border-radius: 4px; padding: 1px 5px; }
.ac-group { margin-top: 12px; }
.ac-group > .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); padding: 0 8px; margin-bottom: 5px; }
.ac-navitem { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-copybtn);
  text-decoration: none; color: var(--text-muted); font-size: 13px; cursor: pointer; }
.ac-navitem::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; flex: none; }
.ac-navitem:hover { color: var(--text); background: rgba(255,255,255,.03); }
.ac-navitem.active { color: var(--text); background: rgba(255,255,255,.05); }
.ac-navitem.active::before { background: var(--lime); }
.ac-navitem .ct { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--text-dim); background: rgba(255,255,255,.05); border-radius: var(--r-pill); padding: 1px 7px; }
.ac-navitem.is-ext { color: var(--text-dim); }
.ac-navitem.is-ext .ext { margin-left: auto; font-size: 11px; color: var(--text-faint); }
.ac-navitem.is-ext:hover { color: var(--text-soft); }
.ac-railfoot { margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid var(--edge-faint);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); display: flex; align-items: center; gap: 8px; }

/* ---- sticky topbar: breadcrumb-as-title, KPI strip, live chip, whoami ---- */
.ac-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px;
  padding: 11px 22px; background: var(--nav-bg);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid var(--edge-faint); }
.ac-burger { display: none; appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 18px; padding: 0 2px; }
.ac-crumb { font-size: 13.5px; color: var(--text-dim); white-space: nowrap; }
.ac-crumb .ac-here { color: var(--text); font-weight: 650; }
.ac-kpis { display: flex; gap: 26px; margin-left: auto; overflow-x: auto; }
.ac-kpi { white-space: nowrap; }
.ac-kpi .n { font-family: var(--font-mono); font-size: 15.5px; font-weight: 650; color: var(--text-soft); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ac-kpi .n.accent { color: var(--lime); }
.ac-kpi .l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-2); margin-top: 1px; }
.ac-live { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.ac-body { padding: 20px 24px 64px; }
.ac-body .sect--app:first-child { padding-top: 6px; }

/* ---- kebab overflow menu (native <details>, zero JS) ---- */
details.kebab { position: relative; display: inline-block; }
details.kebab > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border-radius: var(--r-copybtn); color: var(--text-muted);
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 15px; line-height: 1; }
details.kebab > summary::-webkit-details-marker { display: none; }
details.kebab > summary:hover { color: var(--text); }
details.kebab[open] > summary { outline: 2px solid var(--lime); outline-offset: -1px; }
.kebab-menu { position: absolute; right: 0; top: calc(100% + 5px); z-index: 55; min-width: 172px;
  background: var(--panel-bg); border: 1px solid var(--edge); border-top-color: var(--edge-strong);
  border-radius: var(--r-btn); box-shadow: var(--shadow-card); padding: 5px; }
.kebab-menu button, .kebab-menu a { display: block; width: 100%; text-align: left; text-decoration: none; appearance: none;
  border: 0; background: transparent; cursor: pointer; padding: 8px 10px; border-radius: var(--r-copybtn);
  font-family: var(--font-ui); font-size: 12.5px; color: var(--text-muted); }
.kebab-menu button:hover, .kebab-menu a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.kebab-menu .danger { color: var(--danger); }
.kebab-menu .kmeta { padding: 6px 10px 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--text-faint); }
.kebab-menu hr { border: 0; border-top: 1px solid var(--edge-faint); margin: 4px 0; }

/* ---- bot composer 2-col workbench (composer | recent rail) ---- */
.grid-composer { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap-grid); align-items: start; }
@media (max-width: 900px) { .grid-composer { grid-template-columns: 1fr; } }
/* ---- attachment dropzone (ui/dropzone placeholder — dashed drop target) ---- */
.dropzone { border: 1px dashed var(--edge-strong); border-radius: var(--r-btn); padding: 22px; }
.dropzone .t { color: var(--text-muted-2); }

/* ---- bulk selection bar (floating on selection) ---- */
.bulkbar { display: flex; align-items: center; gap: 14px; padding: 9px 15px; margin-bottom: 12px;
  border-radius: var(--r-btn); background: rgba(197,232,58,.06); box-shadow: inset 0 0 0 1px rgba(197,232,58,.28); }
.bulkbar .n { font-weight: 650; color: var(--text); font-size: 13px; }
.bulkbar .n b { color: var(--lime); }
.bulkbar .clear { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; }
.bulkbar .clear:hover { color: var(--text); }
.bulkbar .acts { margin-left: auto; display: flex; gap: 8px; }

/* ---- code/matrix chip rows (discount pricing chips, HWID, etc.) ---- */
.chiprow { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.monchip { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft);
  background: var(--code-bg-deep); border-radius: var(--r-copybtn); padding: 3px 8px; }
/* per-pool discount price matrix (one row per pool) */
.pricematrix { display: grid; gap: 10px; }
.pmrow { display: grid; grid-template-columns: minmax(120px, 1fr) 1fr 1fr; gap: 10px; align-items: center; }
@media (max-width: 720px) { .pmrow { grid-template-columns: 1fr; gap: 6px; } }
.pmrow .pl { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }

/* ---- filter-pills count badge (interactive pill rows carry live counts) ---- */
.preset .ct { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.preset.active .ct { color: var(--ink-btn); }

/* ---- dt row modifiers (disabled-but-actionable, expandable) ---- */
table.dt tr.row--dim td:not(.keepcol) { opacity: .4; }
table.dt tr.row--sub td { border-top: 0; padding-top: 0; color: var(--text-dim); font-size: 12px; }
.dt-detail { background: rgba(255,255,255,.015); }
.dt-detail td { padding: 14px 16px; }

/* ---- admin console responsive: rail → horizontal strip ≤1000px ---- */
@media (max-width: 1000px) {
  .ac-shell { grid-template-columns: 1fr; }
  .ac-rail { position: static; height: auto; flex-direction: row; align-items: center; gap: 4px;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--edge-faint); padding: 8px 12px; }
  .ac-rail .brand, .ac-filter, .ac-group > .lbl, .ac-railfoot { display: none; }
  .ac-group { display: contents; }
  .ac-navitem { white-space: nowrap; padding: 8px 11px; }
  .ac-navitem .ct { margin-left: 6px; }
  .ac-navitem.is-ext .ext { margin-left: 5px; }
  .ac-body { padding: 16px 16px 56px; }
  .ac-kpis { display: none; }   /* KPI strip lives in the rail-strip context; hidden on narrow to keep the topbar clean */
}

/* ================================================================
   == SERVERS + MAC OPS GRAMMAR == (PAGE-MAPS-ADMIN servers/mac suite)
   The densest surfaces in the product. mac-console.css was the donor of
   this row grammar; primitives canonicalized here per the briefs.
   LED state ramp is the DESIGN-SPEC-APP §2 ratified set (--led-*/--alarm).
   ================================================================ */

/* ---- platform launcher tiles (servers overview) ---- */
.platgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap-grid); }
.plattile { display: flex; align-items: center; gap: 13px; padding: 16px 18px; text-decoration: none; color: inherit; }
.plattile .pt-body { flex: 1; min-width: 0; }
.plattile .pt-name { display: block; font-size: 14px; font-weight: 650; color: var(--text); }
.plattile .pt-meta { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); margin-top: 3px; }
.plattile .pt-go { color: var(--text-dim); font-size: 15px; }
.plattile:hover { color: inherit; } .plattile:hover .pt-go { color: var(--lime); }
.plattile.is-soon { opacity: .6; }

/* ---- ui/status-row — the rail-tinted entity row (fleet/intake/monitor/rentals) ---- */
.srlist { display: grid; gap: 5px; }
.srgroup { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.srgroup::after { content: ""; flex: 1; height: 1px; background: var(--edge-faint); }
.statusrow { display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: var(--r-copybtn);
  border-left: 3px solid var(--led-idle); background: rgba(255,255,255,.02); cursor: pointer; text-decoration: none; color: inherit; }
.statusrow:hover { color: inherit; }
.statusrow:hover { background: rgba(255,255,255,.045); }
.statusrow.sr--live { border-left-color: var(--led-live); }
.statusrow.sr--ok { border-left-color: var(--led-ok); }
.statusrow.sr--avail { border-left-color: var(--led-avail); }
.statusrow.sr--warn { border-left-color: var(--led-warn); }
.statusrow.sr--crit { border-left-color: var(--alarm); background: var(--alarm-soft); }
.statusrow.sr--idle { border-left-color: var(--led-idle); opacity: .68; }
.statusrow.is-sel { box-shadow: inset 0 0 0 1px rgba(197,232,58,.45); background: rgba(197,232,58,.05); }
.statusrow .srmain { min-width: 0; flex: 1; }
.statusrow .pri { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.statusrow .pri .idchip { margin-left: 7px; font-weight: 400; color: var(--text-dim); }
.statusrow .rmeta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statusrow .rside { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }

/* ---- ui/micrometer — inline mini meter (CPU etc., 40/90 thresholds) ---- */
.micrometer { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }
.micrometer .mtrack { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.micrometer .mfill { display: block; height: 100%; border-radius: 3px; background: var(--led-ok); }
.micrometer.mm--warn .mfill { background: var(--led-warn); }
.micrometer.mm--crit .mfill { background: var(--alarm); }

/* ---- ui/freshness — relative-time chip (recent/stale/dead) ---- */
.freshness { font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em; color: var(--led-ok); }
.freshness.fr--stale { color: var(--led-warn); }
.freshness.fr--dead { color: var(--text-dim); }

/* ---- ui/master-detail — fixed-height two-pane console (fleet) ---- */
.masterdetail { display: grid; grid-template-columns: 412px minmax(0, 1fr); gap: var(--gap-grid); align-items: start; }
@media (max-width: 1240px) { .masterdetail { grid-template-columns: 360px minmax(0, 1fr); } }
@media (max-width: 900px) { .masterdetail { grid-template-columns: 1fr; } }
.md-master { display: flex; flex-direction: column; gap: 10px; }
.md-list { max-height: 62vh; overflow-y: auto; padding-right: 2px; }
@media (max-width: 900px) { .md-list { max-height: 340px; } }

/* ---- ui/grant-chips — stateful capability chips (access mgmt) ---- */
.grantchips { display: flex; gap: 6px; flex-wrap: wrap; }
.grantchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); cursor: pointer;
  font-size: 11.5px; color: var(--text-dim); background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--edge); }
.grantchip.is-on { color: var(--lime); box-shadow: inset 0 0 0 1px rgba(197,232,58,.4); }
.grantchip.is-on::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.grantchip.is-implicit { color: var(--text-faint); font-style: italic; cursor: default; }

/* ---- ui/log-viewer — tabbed mono feed (fleet detail) ---- */
.logviewer { border-radius: var(--r-btn); overflow: hidden; background: var(--code-bg-deep); box-shadow: inset 0 0 0 1px var(--edge-faint); }
.logviewer .ltabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--edge-faint); }
.logviewer .ltabs button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 5px 10px 7px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); border-bottom: 2px solid transparent; }
.logviewer .ltabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--lime); }
.logviewer .lbody { max-height: 190px; overflow-y: auto; padding: 10px 12px; }
.logviewer .lrow { display: grid; grid-template-columns: 62px 1fr; gap: 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.75; color: var(--text-muted); }
.logviewer .lrow .ts { color: var(--text-faint); }
.logviewer .lrow.l-warn { color: var(--led-warn); } .logviewer .lrow.l-crit { color: var(--alarm); } .logviewer .lrow.l-ok { color: var(--led-ok); }

/* ---- ui/timeline — vertical event rail (fleet detail) ---- */
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 6px; width: 1px; background: var(--edge); }
.tl-node { position: relative; padding: 0 0 14px; }
.tl-node::before { content: ""; position: absolute; left: -18px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--led-idle); box-shadow: 0 0 0 3px var(--bg-bottom); }
.tl-node.tl--live::before { background: var(--led-live); }
.tl-node.tl--ok::before { background: var(--led-ok); }
.tl-node.tl--warn::before { background: var(--led-warn); }
.tl-node.tl--crit::before { background: var(--alarm); }
.tl-node .tt { font-size: 12px; color: var(--text-soft); }
.tl-node .tm { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 1px; }

/* ---- ui/ring-gauge wrapper (SVG donut drawn inline; conditional health tile) ---- */
.ringgauge { position: relative; display: inline-grid; place-items: center; }
.ringgauge .rval { position: absolute; font-family: var(--font-mono); font-size: 16px; font-weight: 650; color: var(--text-soft); }

/* ---- mac console two-pane frame furniture ---- */
.mac-rollup { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mac-rollup .rc { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.mac-rollup .rc b { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.detailhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.detailhead .emblem { font-family: var(--font-mono); font-size: 15px; font-weight: 650; color: var(--text); }
.kvstrip { display: flex; gap: 10px 22px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.kvstrip b { color: var(--text-soft); font-weight: 600; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ================= responsive (marketing, from reference) ================= */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding-top: 40px; }
  .shelf { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats .st { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .stats .st:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07); }
  .stats .st:nth-last-child(-n+2) { border-bottom: 0; }
  .steps { grid-template-columns: 1fr; }
  .truststrip { grid-template-columns: 1fr; }
  .truststrip .tb { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .truststrip .tb:last-child { border-bottom: 0; }
  .specgrid, .trustgrid { grid-template-columns: 1fr; }
  .billrow { grid-template-columns: 1fr; }
  .billrow .cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .billrow .cell:last-child { border-bottom: 0; }
  nav.top a.nl { display: none; }
  .footgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .sect { padding: 40px 0 6px; scroll-margin-top: 58px; }
  .hero { padding-top: 30px; gap: 24px; }
  .subhead { padding: 34px 0 4px; }
  .ctaband { margin-top: 44px; padding: 24px 22px; }
  .prod { padding: 16px 16px 14px; }
  .prod .desc { min-height: 0; }
  .step, .tcard, .truststrip .tb, .billrow .cell, .stats .st { padding: 16px 18px; }
  /* glass budget: cap the blur on small screens */
  .glass, .navbar { backdrop-filter: blur(8px) saturate(1.2) !important; -webkit-backdrop-filter: blur(8px) saturate(1.2) !important; }
  /* pricing matrix becomes stacked per-product cards — no horizontal scroll */
  table.mx { min-width: 0; }
  table.mx thead { display: none; }
  table.mx, table.mx tbody, table.mx tr, table.mx td { display: block; }
  table.mx tr { padding: 6px 0 12px; border-top: 1px solid rgba(255,255,255,.08); }
  table.mx tr:first-child { border-top: 0; }
  table.mx td { border-top: 0; padding: 4px 16px; }
  table.mx td.pp { white-space: normal; }
  table.mx td[data-l]::before { content: attr(data-l); display: inline-block; min-width: 34%; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted-2); font-family: var(--font-mono); }
  table.mx td br { display: none; }
  table.mx td.na { display: none; }
  .specfold summary { display: flex; justify-content: space-between; }
}
@media (max-width: 640px) {
  .shelf { grid-template-columns: 1fr; }
  .statusbar .in span + span { display: none; }
  .fmt-foot { grid-template-columns: 1fr 1fr; }
  .prod ul.specs { line-height: 1.8; margin: 10px 0 2px; }
  .prod ul.specs li { display: inline; }
  .prod ul.specs li::before { content: "✓ "; margin-right: 2px; }
  .prod ul.specs li::after { content: "  ·  "; color: var(--text-ghost); }
  .prod ul.specs li:last-child::after { content: ""; }
  .prod--soon ul.specs li::before { content: "· "; }
}