/* ============================================================
   Bruno — Bootstrap 5 brand theme (refined, lightly comic)
   Black / white / yellow with magenta chroma accent.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink:#17171a; --ink-2:#5b5b63; --ink-3:#9a9aa2;
  --paper:#f7f6f1; --card:#ffffff; --line:#e7e5dd; --edge:#1b1b1e;
  --brand:#FFD21E; --brand-d:#E8B600;
  --brand-magenta:#FF2BD6; --brand-magenta-d:#D81FAE;
  --accent:#2BB3FF; --pos:#1FAE63; --neg:#E5484D; --hot:#FF5A4D;
  --soft:0 8px 24px -12px rgba(0,0,0,.22);
  --soft-sm:0 4px 14px -8px rgba(0,0,0,.20);
  --hard:3px 3px 0 var(--edge);
  --r:16px; --r-sm:11px;
  --fh:"Archivo Black",system-ui,sans-serif;
  --ff:"Plus Jakarta Sans",system-ui,sans-serif;
  --fm:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  --bs-body-font-family:var(--ff);
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--paper);
  --bs-warning:#FFD21E; --bs-warning-rgb:255,210,30;
  --bs-primary:#17171a; --bs-primary-rgb:23,23,26;
  --bs-border-color:var(--line);
  --bs-border-radius:var(--r-sm);
}
[data-theme="dark"]{
  --ink:#f3f2ee; --ink-2:#cfcfd6; --ink-3:#a0a0a8; --paper:#0f0f12; --card:#1a1a1f;
  --line:#33333c; --edge:#f3f2ee; --soft:0 10px 28px -12px #000; --soft-sm:0 6px 16px -10px #000;
  --hard:3px 3px 0 #000;
  --bs-body-color:var(--ink); --bs-body-bg:var(--paper); --bs-border-color:var(--line);
  --bs-emphasis-color:var(--ink);
}

/* ============================================================
   DARK-THEME CONTRAST FIXES
   - Light theme stays untouched.
   - Force-dark "hero" panels keep working in dark mode.
   - Yellow / magenta surfaces always carry ink-coloured text.
   ============================================================ */

/* Yellow surfaces — text MUST stay dark regardless of theme.
   IMPORTANT: only list elements whose background is actually yellow
   (var(--brand) / #FFD21E / pale-yellow). Card-on-paper elements DO NOT belong here. */
.chip.on,
.seg .opt.sel:not(.sky):not(.magenta),
.eyebrow:not(.magenta),
.docnav a.on,
.pipe .step.active,
.pipe .step.wait,
.stage-head .badge-stage,
.pin-slot .pin-star:not(.paid),
.tier .ribbon,
.format-row .fmt:hover,
.padbtn.down,.padbtn:active{ color:#17171a !important }
.padbtn.down *,.padbtn:active *{ color:#17171a }
.flag.hot{ color:#fff }
.flag.new{ color:#08263a }

/* Magenta surfaces — text always #fff */
.eyebrow.magenta,
.chip.magenta,
.btn-magenta,
.qs-bubble,
.quickstart-pill,
.pin-slot.paid .pin-star,
.seg .opt.sel.magenta { color:#fff }

/* "Dark hero" panels — lock to actual dark hex values both themes */
.deal,
.leadbar,
.mini-leader,
.global-stat,
.embed-card{ background:#17171a !important; color:#f3f2ee !important; border-color:#17171a }

[data-theme="dark"] .deal,
[data-theme="dark"] .leadbar,
[data-theme="dark"] .mini-leader,
[data-theme="dark"] .global-stat,
[data-theme="dark"] .embed-card{ border-color:#3a3a44 }

/* Make sure inner sub-shades on those dark panels stay legible */
.deal .img,
.leadbar .leadcell,
.mini-leader .lc{ background:#17171a }
.leadbar .hd,
.mini-leader .hd{ background:#0d0d12 !important; border-color:#2a2a32 !important }
.leadbar .leadrow,
.mini-leader .lr{ background:#2a2a32 }

/* Bootstrap utility patches for dark mode */
[data-theme="dark"] .text-bg-dark{ background-color:#2a2a32!important; color:#f3f2ee!important }
[data-theme="dark"] .text-bg-light{ background-color:#33333c!important; color:#f3f2ee!important }
[data-theme="dark"] .text-bg-warning{ color:#17171a!important }
[data-theme="dark"] .btn-light{ --bs-btn-bg:#22222a; --bs-btn-border-color:#3a3a44; --bs-btn-color:#f3f2ee;
  --bs-btn-hover-bg:#2c2c36; --bs-btn-hover-border-color:#4a4a55; --bs-btn-hover-color:#fff;
  --bs-btn-active-bg:#16161c; --bs-btn-active-color:#fff }
[data-theme="dark"] .btn-outline-light{ color:#f3f2ee; border-color:#f3f2ee }
[data-theme="dark"] .btn-close{ filter:invert(1) grayscale(100%) brightness(2) }

/* Forms - placeholders + selects */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }
[data-theme="dark"] .form-control::placeholder{ color:#a0a0a8 }
[data-theme="dark"] .input-group-text{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }

/* Modal */
[data-theme="dark"] .modal-content{ background:var(--card); color:var(--ink) }

/* Tables */
[data-theme="dark"] .table{ --bs-table-color:var(--ink); --bs-table-bg:transparent }

/* Generic chip / option borders in dark — keep them visible without being harsh white */
[data-theme="dark"] .chip,
[data-theme="dark"] .seg .opt,
[data-theme="dark"] .format-row .fmt,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .wallet,
[data-theme="dark"] .stat,
[data-theme="dark"] .padbtn,
[data-theme="dark"] .key-row,
[data-theme="dark"] .quickstep,
[data-theme="dark"] .logo-card,
[data-theme="dark"] .legalnote,
[data-theme="dark"] .pin-slot,
[data-theme="dark"] .review,
[data-theme="dark"] .usedin,
[data-theme="dark"] .tier,
[data-theme="dark"] .fmt-card,
[data-theme="dark"] .motion-card,
[data-theme="dark"] .proj-bar,
[data-theme="dark"] .stage-wrap,
[data-theme="dark"] .composer-dock,
[data-theme="dark"] .topbar,
[data-theme="dark"] .legend-dock,
[data-theme="dark"] .zoom-dock,
[data-theme="dark"] .preview-pop,
[data-theme="dark"] .pipe .step{ border-color:#3a3a44 }

/* edge-class cards keep the strong outline but still readable */
[data-theme="dark"] .card.edge{ border-color:#55555f }

/* Pale-yellow waiting state needs dark text in dark theme too */
[data-theme="dark"] .pipe .step.wait{ background:#3a3220; color:#ffe89a; border-color:#5a4a20 }
[data-theme="dark"] .pipe .step.wait .h{ color:#ffd21e }
[data-theme="dark"] .pipe .step.wait .text-muted2{ color:#d8d8df!important }

/* Step.active is yellow — keep dark text */
.pipe .step.active .text-muted2{ color:rgba(0,0,0,.65)!important }
.pipe .step.active .h{ color:#17171a }

/* Stage area floor — keep a uniform readable contrast in dark */
[data-theme="dark"] .stage-area{
  background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.05) 31px 32px),
             repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.05) 31px 32px),#15151b
}
[data-theme="dark"] .stage-area .preview-char{ color:#cfcfd6 }
[data-theme="dark"] .stage-area .corner{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }

/* hero scene floor in index */
[data-theme="dark"] .scene .floor{
  background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.04) 31px 32px),
             repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.04) 31px 32px),#15151b
}

/* checkerboard checker visibility in dark */
[data-theme="dark"] .checker{
  background:repeating-conic-gradient(#1a1a1f 0 25%,#2a2a32 0 50%) 0/20px 20px
}

/* sidenav body / on / hover */
[data-theme="dark"] .docnav a{ color:#cfcfd6 }
[data-theme="dark"] .docnav a:hover{ background:#22222a; color:#fff }
[data-theme="dark"] .docnav a.on{ background:var(--brand); color:#17171a }
[data-theme="dark"] .docnav a.on::before{ background:#17171a }

/* graph mind map — boost contrast of base/transition nodes */
[data-theme="dark"] .node{ background:#22222a; color:#f3f2ee }
[data-theme="dark"] .node.main{ background:#FFD21E; color:#17171a }
[data-theme="dark"] .node.base{ background:#2BB3FF; color:#08263a }
[data-theme="dark"] .node .su{ color:#a0a0a8 }
[data-theme="dark"] .node.main .su{ color:#3a2e00 }
[data-theme="dark"] .node.base .su{ color:#0a3553 }
[data-theme="dark"] .graph-bg-wrap::before{ opacity:.12 }

/* "ph" character pose placeholder icons */
[data-theme="dark"] .heropose .ph,
[data-theme="dark"] .keypose .pose .ph,
[data-theme="dark"] .cell .fr .ph,
[data-theme="dark"] .mk-pic .ph,
[data-theme="dark"] .itempic .ph,
[data-theme="dark"] .pin-slot .ip .ph{ color:#9a9aa6 }

/* Hover background tweak for nav links */
[data-theme="dark"] .navbar.bruno{ background:#0f0f12 }
[data-theme="dark"] .navbar.bruno .nav-link{ color:#f3f2ee }
[data-theme="dark"] .navbar.bruno .nav-link.active{ background:#FFD21E; color:#17171a }

/* footer */
[data-theme="dark"] footer.bruno{ background:#15151b }
[data-theme="dark"] footer.bruno a{ color:#cfcfd6 }
[data-theme="dark"] footer.bruno a:hover{ color:#fff }
[data-theme="dark"] footer.bruno .text-dim{ color:#a0a0a8!important }

/* Top-up modal pieces */
[data-theme="dark"] .form-check-input{ background-color:#22222a; border-color:#55555f }

/* Tier card in dark — base (non-pop) needs visible foreground */
[data-theme="dark"] .tier:not(.pop){ background:#1a1a1f; color:#f3f2ee }
[data-theme="dark"] .tier:not(.pop) .save{ color:#7be09c }
[data-theme="dark"] .tier:not(.pop) ul{ color:#cfcfd6 }
[data-theme="dark"] .tier:not(.pop) .over{ color:#a0a0a8 }

/* commission bar darker bg */
[data-theme="dark"] .commission-bar{ background:#22222a; color:#f3f2ee }
[data-theme="dark"] .commission-bar .platform{ color:#cfcfd6 }

/* progress bar baseline */
[data-theme="dark"] .progress{ background:#22222a!important; border-color:#3a3a44!important }

/* nav-pills in dark */
[data-theme="dark"] .nav-pills .nav-link{ color:#f3f2ee; border-color:transparent }
[data-theme="dark"] .nav-pills .nav-link:hover{ background:#22222a }
[data-theme="dark"] .nav-pills .nav-link.active{ background:#f3f2ee; color:#17171a }

/* quota meter visibility */
[data-theme="dark"] .quota .bar{ background:#22222a; border-color:#3a3a44 }
[data-theme="dark"] .quota .row .left{ color:#cfcfd6 }
[data-theme="dark"] .quota .row .right{ color:#f3f2ee }

/* topbar / floating panels on graph page in dark */
[data-theme="dark"] .topbar{ background:rgba(20,20,26,.88); color:#f3f2ee }
[data-theme="dark"] .topbar .crumb,
[data-theme="dark"] .topbar .crumb a{ color:#cfcfd6 }
[data-theme="dark"] .topbar .crumb a:hover{ color:#fff }
[data-theme="dark"] .legend-dock,
[data-theme="dark"] .zoom-dock{ background:rgba(20,20,26,.88); color:#cfcfd6 }
[data-theme="dark"] .zoom-dock .pct{ color:#cfcfd6 }
[data-theme="dark"] .zoom-dock button{ background:#22222a; color:#f3f2ee }
[data-theme="dark"] .legend-dock .text-dim{ color:#a0a0a8!important }
[data-theme="dark"] .preview-pop{ background:#1a1a1f; color:#f3f2ee }
[data-theme="dark"] .preview-pop .stage{ background:#15151b }
[data-theme="dark"] .preview-pop .meta{ color:#cfcfd6 }
[data-theme="dark"] .branch-monitor{ background:rgba(20,20,26,.92); border-color:#3a3a44 }
[data-theme="dark"] .branch-monitor .hd{ background:#15151b; border-bottom-color:#3a3a44; color:#f3f2ee }
[data-theme="dark"] .branch-monitor .sq{ border-color:#3a3a44;
  background:repeating-linear-gradient(0deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px),
             repeating-linear-gradient(90deg,transparent 0 14px,rgba(255,255,255,.05) 14px 15px),#15151b }
[data-theme="dark"] .branch-monitor .ft{ color:#cfcfd6 }

/* sub-gate banner — magenta side stays magenta with white text; warning side dark text */
[data-theme="dark"] .sub-gate.locked{ background:#3a3220; color:#ffe89a }
[data-theme="dark"] .sub-gate.locked .meter .row .left,
[data-theme="dark"] .sub-gate.locked .meter .row .right{ color:#ffe89a }

/* ============================================================
   YELLOW CARDS — text MUST stay dark even in dark theme
   Attribute selectors match any inline `background:var(--brand)`
   or `background:var(--brand-magenta)` so we don't need new classes.
   ============================================================ */
.card[style*="var(--brand)"]:not([style*="brand-"]),
.card[style*="background:var(--brand)"]:not([style*="brand-"]),
.card.pop[style*="--brand)"]:not([style*="brand-magenta"]){
  color:#17171a !important;
}
.card[style*="var(--brand)"]:not([style*="brand-"]) *:where(p,span,small,div,li,h1,h2,h3,h4,h5,h6,b,strong,a){
  color:#17171a;
}
.card[style*="var(--brand)"]:not([style*="brand-"]) .text-muted2,
.card[style*="var(--brand)"]:not([style*="brand-"]) .text-dim{ color:#3a3a3f !important }
.card[style*="var(--brand)"]:not([style*="brand-"]) .text-magenta{ color:#a8005c !important }
.card[style*="var(--brand)"]:not([style*="brand-"]) .text-success{ color:#0a6a3a !important }
.card[style*="var(--brand)"]:not([style*="brand-"]) a.text-reset{ color:#17171a !important }
/* Keep dark CTA buttons readable inside yellow cards */
.card[style*="var(--brand)"]:not([style*="brand-"]) .btn-dark,
.card[style*="var(--brand)"]:not([style*="brand-"]) .btn-dark *{
  color:#fff !important;
}
/* Magenta CTA cards keep white text */
.card[style*="var(--brand-magenta)"]{ color:#fff !important }
.card[style*="var(--brand-magenta)"] *:where(p,span,small,div,li,h1,h2,h3,h4,h5,h6,b,strong){ color:#fff }
.card[style*="var(--brand-magenta)"] .text-muted2{ color:rgba(255,255,255,.85) !important }

/* Storyboard / keypose meta + cell labels readability */
[data-theme="dark"] .keypose .meta{ color:#cfcfd6; background:#15151b; border-top-color:#2a2a32 }
[data-theme="dark"] .keypose .lab.muted{ background:#22222a }
[data-theme="dark"] .strip{ background:#1a1a1f; border-color:#33333c }
[data-theme="dark"] .cell{ background:#15151b; border-color:#33333c }
[data-theme="dark"] .cell .n{ background:#0f0f12; border-top-color:#2a2a32; color:#cfcfd6 }
[data-theme="dark"] .actions-toolbar{ background:#1a1a1f; border-color:#33333c }
[data-theme="dark"] .actions-toolbar h4{ color:#f3f2ee }

/* Download formats — make buttons strongly readable in dark */
[data-theme="dark"] .format-row .fmt{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }
[data-theme="dark"] .format-row .fmt b{ color:#fff }
[data-theme="dark"] .format-row .fmt:hover{ background:#FFD21E; color:#17171a; border-color:#FFD21E }
[data-theme="dark"] .format-row .fmt:hover b{ color:#17171a }

/* "About format trade-offs" link — keep visible in dark on a card-on-yellow context */
.format-row + .text-muted2 a{ color:inherit }

/* Specifically the "Storyboard" toolbar in dark */
[data-theme="dark"] .specrow{ border-color:#2a2a32 }
[data-theme="dark"] .specrow .text-muted2{ color:#cfcfd6!important }

/* Pricing tier card extra polish in dark */
[data-theme="dark"] .tier{ background:#1a1a1f }
[data-theme="dark"] .tier .ttl{ color:#f3f2ee }
[data-theme="dark"] .tier ul li{ color:#cfcfd6 }

/* Spec rows in try.html sidebar */
[data-theme="dark"] .specrow .text-muted2{ color:#cfcfd6!important }

/* Sidenav spacing — wider gap between items, padding between section headers */
.docnav{ padding:1.2rem 1rem }
.docnav h6{ margin:1.6rem 0 .55rem .3rem; padding-bottom:.4rem; border-bottom:1px dashed var(--line) }
.docnav h6:first-of-type{ margin-top:.2rem }
.docnav a{ padding:.5rem .6rem .5rem 1.75rem; margin-bottom:.2rem; font-size:.88rem; line-height:1.35 }
.docnav a + h6{ margin-top:1.8rem }
[data-theme="dark"] .docnav h6{ border-color:#33333c }

/* Section spacing in docs */
.docsection{ margin-bottom:5rem; padding-top:1rem }
.docsection h2{ margin-bottom:.8rem }
.docsection > .lead2{ margin-bottom:1.5rem }
.docsection h3{ margin:2.2rem 0 .8rem }
.docsection .callout{ margin:1.2rem 0 1.6rem }
.docsection .code{ margin-bottom:1.4rem }
.docsection .row.g-3 + .row.g-3{ margin-top:1rem }

/* graph page — fully theme-able */
[data-theme="dark"] body{ background:var(--paper) }
[data-theme="dark"] .graph-bg-wrap{ background:#0f0f12 }
[data-theme="dark"] .topbar{ background:rgba(20,20,26,.92); border-color:#3a3a44; box-shadow:0 6px 18px -8px rgba(0,0,0,.7) }
[data-theme="dark"] .legend-dock{ background:rgba(20,20,26,.92); border-color:#3a3a44 }
[data-theme="dark"] .zoom-dock{ background:rgba(20,20,26,.92); border-color:#3a3a44 }
[data-theme="dark"] .bar-toggle{ background:#1a1a1f; color:#f3f2ee; border-color:#3a3a44 }
[data-theme="dark"] .hint{ background:#FFD21E; color:#17171a }
[data-theme="dark"] .edge-line{ stroke:#55555f; opacity:.7 }
[data-theme="dark"] .edge-line.lit{ stroke:#FFD21E }
[data-theme="dark"] .node{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }
[data-theme="dark"] .node .key{ background:#15151b; border-color:#3a3a44; color:#f3f2ee }
[data-theme="dark"] .node.main .key{ background:#fff; color:#17171a; border-color:#17171a }
[data-theme="dark"] .node.act{ border-color:#FFD21E }
[data-theme="dark"] .preview-pop{ background:#1a1a1f; border-color:#3a3a44 }
[data-theme="dark"] .preview-pop .ph{ background:#FFD21E; border-color:#17171a; color:#17171a }
[data-theme="dark"] .preview-pop .meta{ color:#cfcfd6 }

/* Make text-dim visible on graph light theme */
.legend-dock .text-dim{ color:#4a4a55!important }
[data-theme="dark"] .legend-dock .text-dim{ color:#a0a0a8!important }
.legend-dock .kbd{ background:var(--card); color:var(--ink); border-color:var(--edge) }

/* Bar-toggle pinned to topbar (no longer floats over content) */
.topbar .bar-close{ background:transparent; border:0; color:var(--ink); font-size:1.1rem; padding:.2rem .4rem; border-radius:8px; cursor:pointer }
.topbar .bar-close:hover{ background:rgba(0,0,0,.06) }
[data-theme="dark"] .topbar .bar-close:hover{ background:rgba(255,255,255,.08) }
.bar-show{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:11; display:none;
  font-weight:800; font-size:.78rem; background:var(--card); color:var(--ink); border:2px solid var(--edge); border-radius:999px;
  padding:.4rem .8rem; box-shadow:var(--hard); cursor:pointer; gap:.4rem; align-items:center }
.bar-show.on{ display:inline-flex }
[data-theme="dark"] .bar-show{ background:#1a1a1f; color:#f3f2ee; border-color:#3a3a44 }

/* sale-toast clickable */
.sale-card{ cursor:pointer; transition:transform .12s, box-shadow .12s }
.sale-card:hover{ transform:translateY(-2px); box-shadow:var(--soft) }

*{ -webkit-font-smoothing:antialiased; }
body{font-family:var(--ff);font-weight:600;color:var(--ink);background:var(--paper)}
h1,h2,h3,h4,h5,.font-display{font-family:var(--fh);letter-spacing:-.4px;line-height:1.06}
a{text-decoration:none}
::selection{background:var(--brand);color:#17171a}
.text-muted2{color:var(--ink-2)!important}
.text-dim{color:var(--ink-3)!important}
.bg-card{background:var(--card)!important}
.bg-brand{background:var(--brand)!important}
.bg-magenta{background:var(--brand-magenta)!important;color:#fff}
.text-brand{color:var(--brand-d)!important}
.text-magenta{color:var(--brand-magenta)!important}
.hl{background:var(--brand);border-radius:4px;padding:0 .1em;box-decoration-break:clone}
.mono{font-family:var(--fm)}

/* ---- navbar ---- */
.navbar.bruno{background:var(--paper);border-bottom:2px solid var(--edge);padding:.55rem 0}
.navbar.bruno .navbar-brand{font-family:var(--fh);font-size:1.25rem;display:flex;align-items:center;gap:.55rem}
.navbar.bruno .dog{width:38px;height:38px}
.navbar.bruno .nav-link{font-weight:700;color:var(--ink);border-radius:9px;padding:.5rem .85rem;display:flex;align-items:center;gap:.4rem;transition:background .14s,color .14s}
.navbar.bruno .nav-link:hover{background:rgba(0,0,0,.05)}
[data-theme="dark"] .navbar.bruno .nav-link:hover{background:rgba(255,255,255,.07)}
.navbar.bruno .nav-link.active{background:var(--ink);color:var(--paper)}
.wallet{display:inline-flex;align-items:center;gap:.45rem;border:2px solid var(--edge);border-radius:10px;
  padding:.45rem .7rem;font-weight:800;background:var(--card)}
.icon-btn{width:40px;height:40px;border:2px solid var(--edge);border-radius:10px;background:var(--card);
  display:inline-grid;place-items:center;font-size:1.05rem;color:var(--ink)}
.icon-btn:hover{background:var(--brand)}
.quickstart-pill{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.78rem;
  border:2px solid var(--edge);border-radius:999px;padding:.36rem .8rem;background:var(--brand-magenta);color:#fff;
  box-shadow:0 0 0 0 rgba(255,43,214,.55);animation:qsPulse 2.4s infinite}
.quickstart-pill:hover{background:var(--brand-magenta-d);color:#fff}
@keyframes qsPulse{0%{box-shadow:0 0 0 0 rgba(255,43,214,.5)}70%{box-shadow:0 0 0 9px rgba(255,43,214,0)}100%{box-shadow:0 0 0 0 rgba(255,43,214,0)}}

/* floating Quick start bubble */
.qs-bubble{position:fixed;right:18px;bottom:18px;z-index:1090;
  display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.85rem;color:#fff;
  background:var(--brand-magenta);border:2px solid var(--edge);border-radius:999px;
  padding:.6rem .95rem;box-shadow:var(--hard);transition:transform .15s,box-shadow .15s}
.qs-bubble:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge);color:#fff}

/* dog logo */
.dog .fw{fill:var(--card)} .dog .fy{fill:var(--brand)} .dog .ik{stroke:var(--edge);fill:none} .dog .ikf{fill:var(--edge)}

/* ---- buttons ---- */
.btn{font-weight:800;border-radius:var(--r-sm);border-width:2px;padding:.55rem 1rem;transition:transform .1s,box-shadow .12s,background .12s}
.btn-warning{--bs-btn-bg:var(--brand);--bs-btn-border-color:var(--edge);--bs-btn-hover-bg:var(--brand-d);
  --bs-btn-hover-border-color:var(--edge);--bs-btn-active-bg:var(--brand-d);--bs-btn-active-border-color:var(--edge);color:#17171a}
.btn-dark{
  /* Keep one stable high-contrast CTA style in both themes */
  --bs-btn-bg:#17171a;
  --bs-btn-border-color:#17171a;
  --bs-btn-color:#ffffff;
  --bs-btn-hover-bg:#000000;
  --bs-btn-hover-border-color:#000000;
  --bs-btn-hover-color:#ffffff;
  --bs-btn-active-bg:#000000;
  --bs-btn-active-border-color:#000000;
  --bs-btn-active-color:#ffffff;
  --bs-btn-disabled-bg:#2a2a32;
  --bs-btn-disabled-border-color:#2a2a32;
  --bs-btn-disabled-color:#cfcfd6;
}
[data-theme="dark"] .btn-dark{
  /* In dark theme button can blend into dark surfaces; keep visible edge */
  --bs-btn-border-color:#f3f2ee;
  --bs-btn-hover-border-color:#FFD21E;
  --bs-btn-active-border-color:#FFD21E;
  box-shadow:0 0 0 1px rgba(243,242,238,.06) inset;
}
.btn-outline-dark{--bs-btn-color:var(--ink);--bs-btn-border-color:var(--edge);--bs-btn-hover-bg:var(--ink);--bs-btn-hover-color:var(--paper);background:var(--card)}
.btn-light{--bs-btn-bg:var(--card);--bs-btn-border-color:var(--line);--bs-btn-color:var(--ink)}
.btn-magenta{background:var(--brand-magenta);color:#fff;border-color:var(--edge)}
.btn-magenta:hover{background:var(--brand-magenta-d);color:#fff}
.btn-pop{box-shadow:var(--hard)}
.btn-pop:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--edge)}
.btn-pop:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--edge)}
.btn-lg{padding:.8rem 1.4rem;font-size:1.05rem}
.btn-sm{padding:.4rem .7rem}

/* ---- cards ---- */
.card{border:2px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--soft-sm)}
.card.edge{border-color:var(--edge)}
.card.flat{box-shadow:none}
.card.pop{border-color:var(--edge);box-shadow:var(--hard)}
.lift{transition:transform .12s,box-shadow .12s}
.lift:hover{transform:translateY(-3px);box-shadow:var(--soft)}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:.35rem;border:2px solid var(--edge);border-radius:999px;
  padding:.28rem .7rem;font-weight:800;font-size:.8rem;background:var(--card);color:var(--ink)}
.chip.on{background:var(--brand)}
.chip.sky{background:var(--accent);color:#08263a;border-color:var(--accent)}
.chip.magenta{background:var(--brand-magenta);color:#fff;border-color:var(--edge)}
.chip.pos{background:var(--pos);color:#fff;border-color:var(--edge)}
.badge.soft{background:var(--brand);color:#17171a;border:2px solid var(--edge);font-weight:800}
.kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 .35rem;border:2px solid var(--edge);
  border-radius:6px;background:var(--card);font-weight:800;font-size:.72rem;box-shadow:0 2px 0 var(--edge)}

/* commission bar */
.commission-bar{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.78rem;
  background:var(--paper);border:2px solid var(--edge);border-radius:999px;padding:.2rem .65rem}
.commission-bar .creator{color:var(--pos)}
.commission-bar .platform{color:var(--ink-2)}
.commission-bar i{color:var(--brand-magenta)}

/* eyebrow */
.eyebrow{display:inline-block;font-family:var(--fh);font-size:.8rem;letter-spacing:.6px;text-transform:uppercase;
  background:var(--brand);color:#17171a;border:2px solid var(--edge);border-radius:8px;padding:.2rem .6rem}
.eyebrow.magenta{background:var(--brand-magenta);color:#fff}

/* sections */
.section{padding:5rem 0}
.lead2{color:var(--ink-2);font-size:1.12rem;font-weight:600;max-width:42rem}

/* forms */
.form-control,.form-select{border:2px solid var(--line);border-radius:var(--r-sm);font-weight:600;background:var(--card);color:var(--ink)}
.form-control:focus,.form-select:focus{border-color:var(--edge);box-shadow:0 0 0 .2rem rgba(255,210,30,.35)}
.form-control::placeholder{color:var(--ink-3)}

/* segmented */
.seg{display:flex;flex-wrap:wrap;gap:.45rem}
.seg .opt{border:2px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font-weight:800;
  font-size:.85rem;padding:.45rem .8rem;cursor:pointer;transition:transform .08s,border-color .12s,background .12s}
.seg .opt:hover{border-color:var(--edge);transform:translateY(-1px)}
.seg .opt.sel{background:var(--brand);border-color:var(--edge)}
.seg .opt.sel.sky{background:var(--accent);color:#08263a;border-color:var(--accent)}
.seg .opt.sel.magenta{background:var(--brand-magenta);color:#fff;border-color:var(--edge)}

/* checkerboard preview */
.checker{background:repeating-conic-gradient(var(--paper) 0 25%,transparent 0 50%) 0/20px 20px}

/* footer */
footer.bruno{border-top:2px solid var(--edge);background:var(--card);padding:2.6rem 0 2rem}
footer.bruno a{color:var(--ink-2);font-weight:600;display:block;margin-bottom:.5rem}
footer.bruno a:hover{color:var(--ink)}

/* modal */
.modal-content{border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--soft)}

/* halftone */
.dots{background-image:radial-gradient(var(--edge) 1px,transparent 1.2px);background-size:18px 18px;opacity:.05}

/* urgency */
.flame{color:var(--hot)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--pos);display:inline-block;box-shadow:0 0 0 0 rgba(31,174,99,.5);animation:pd 1.6s infinite}
@keyframes pd{0%{box-shadow:0 0 0 0 rgba(31,174,99,.5)}70%{box-shadow:0 0 0 7px rgba(31,174,99,0)}100%{box-shadow:0 0 0 0 rgba(31,174,99,0)}}

/* avatars */
.avatar{display:inline-grid;place-items:center;border-radius:50%;border:2px solid var(--edge);
  font-family:var(--fh);color:#17171a;flex:none;background:var(--brand)}
.avatar.xs{width:22px;height:22px;font-size:.62rem;border-width:2px}
.avatar.sm{width:30px;height:30px;font-size:.72rem}
.avatar.md{width:40px;height:40px;font-size:.9rem}
.avatar.lg{width:84px;height:84px;font-size:1.9rem}
.avatar.xl{width:128px;height:128px;font-size:3rem}
.av-stack{display:flex}.av-stack .avatar{margin-left:-8px}.av-stack .avatar:first-child{margin-left:0}

/* author mini-line */
.author-line{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--ink-2)}
.author-line .earn{color:var(--pos);font-weight:800}

/* sparkline */
.spark{display:block;width:100%;height:38px}
.spark rect{fill:var(--brand-d)}

/* linechart */
.linechart{display:block;width:100%;font-family:var(--fm)}
.linechart text{font-family:var(--fm)}

/* ---- UI animations ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.floaty{animation:floaty 4s ease-in-out infinite}
@keyframes popin{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
.popin{animation:popin .3s cubic-bezier(.2,1.4,.4,1)}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shine{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:200% 100%;animation:shimmer 2.6s linear infinite}
@keyframes spinz{to{transform:rotate(360deg)}}
.spinz{animation:spinz 14s linear infinite}
.fade-swap{animation:fadeSwap .5s}
@keyframes fadeSwap{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
.glow-y{box-shadow:0 0 0 0 rgba(255,210,30,.5);animation:glowY 2s infinite}
@keyframes glowY{0%{box-shadow:0 0 0 0 rgba(255,210,30,.5)}70%{box-shadow:0 0 0 12px rgba(255,210,30,0)}100%{box-shadow:0 0 0 0 rgba(255,210,30,0)}}
.glow-m{animation:glowM 2s infinite}
@keyframes glowM{0%{box-shadow:0 0 0 0 rgba(255,43,214,.55)}70%{box-shadow:0 0 0 14px rgba(255,43,214,0)}100%{box-shadow:0 0 0 0 rgba(255,43,214,0)}}

/* pipeline stage pulse */
.stage-pulse{position:relative;overflow:hidden}
.stage-pulse::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,210,30,.35),transparent);
  transform:translateX(-100%);animation:stagePulse 1.6s linear infinite}
@keyframes stagePulse{to{transform:translateX(100%)}}

/* drag-drop slot */
.drop-slot{transition:border-color .15s,background .15s,transform .12s}
.drop-slot.drag-over{border-color:var(--brand-magenta)!important;background:rgba(255,43,214,.08);transform:scale(1.03)}

/* tooltip (CSS-only) */
[data-tip]{position:relative}
[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;background:var(--ink);color:var(--paper);font-size:.74rem;font-weight:700;padding:.3rem .55rem;border-radius:6px;
  border:2px solid var(--edge);box-shadow:var(--soft-sm);z-index:1000;pointer-events:none}

/* pin slot */
.pin-slot{position:relative;border:2px dashed var(--edge);border-radius:var(--r);background:var(--card);min-height:200px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-weight:800}
.pin-slot.filled{border-style:solid;background:var(--paper)}
.pin-slot .pin-star{position:absolute;top:8px;left:8px;background:var(--brand);border:2px solid var(--edge);border-radius:6px;
  font-size:.66rem;padding:.1rem .4rem;font-weight:800}
.pin-slot.paid .pin-star{background:var(--brand-magenta);color:#fff}

/* leaderboard cell sparkline */
.leadcell .sparkmini{flex:0 0 60px}
.leadcell .sparkmini .spark rect{fill:var(--brand)}

/* rail (app.html studio) */
.studio-rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.studio-rail .rail-btn{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--ink);
  border:2px solid var(--line);border-radius:12px;background:var(--card);padding:.55rem .7rem;font-size:.85rem;
  transition:transform .12s,border-color .12s,background .12s}
.studio-rail .rail-btn:hover{transform:translateX(2px);border-color:var(--edge)}
.studio-rail .rail-btn.on{background:var(--ink);color:var(--paper);border-color:var(--edge)}

/* pipeline rail (right) */
.pipe{display:flex;flex-direction:column;gap:.55rem}
.pipe .step{border:2px solid var(--line);border-radius:12px;background:var(--card);padding:.7rem .85rem;position:relative}
.pipe .step.active{border-color:var(--edge);box-shadow:var(--hard);background:var(--brand)}
.pipe .step.done{border-color:var(--pos);background:rgba(31,174,99,.12)}
.pipe .step.wait{border-color:var(--edge);background:#fff7d6}
.pipe .step .h{display:flex;align-items:center;gap:.4rem;font-weight:800}
.pipe .step .badge{font-size:.66rem}
.pipe .step .approve{display:none;margin-top:.5rem;gap:.4rem}
.pipe .step.wait .approve{display:flex}

/* logo grid for docs */
.logo-card{display:flex;flex-direction:column;gap:.5rem;align-items:center;justify-content:center;
  border:2px solid var(--line);border-radius:14px;background:var(--card);padding:1rem;text-align:center;
  transition:transform .12s,border-color .12s;min-height:140px}
.logo-card:hover{transform:translateY(-3px);border-color:var(--edge)}
.logo-card .lg{width:54px;height:54px;display:grid;place-items:center}
.logo-card .nm{font-family:var(--fh);font-size:.95rem}
.logo-card .ds{font-size:.72rem;color:var(--ink-2);font-weight:700}

/* code blocks */
.code{background:#0f0f14;color:#e8e8ee;border:2px solid var(--edge);border-radius:var(--r);overflow:hidden;position:relative}
[data-theme="dark"] .code{background:#000}
.code .head{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border-bottom:1px solid #2a2a32;background:#16161c}
.code .head .d{width:11px;height:11px;border-radius:50%}
.code .head .t{margin-left:.5rem;font-family:var(--fm);font-size:.8rem;color:#9a9aa6}
.code pre{margin:0;padding:1rem 1.1rem;font-family:var(--fm);font-size:.84rem;line-height:1.7;overflow-x:auto}
.code .copy-btn{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;background:#16161c;color:#cfcfd6;
  border:1px solid #2a2a32;border-radius:8px;padding:.3rem .55rem;font-family:var(--fm);font-size:.75rem;font-weight:700;cursor:pointer;transition:.15s}
.code .copy-btn:hover{background:#22222a;color:#fff;border-color:#3a3a44}
.code .copy-btn.done{background:var(--pos);color:#fff;border-color:var(--pos)}
.code:not(.has-head) .copy-btn{position:absolute;top:8px;right:8px}

/* Docs sidenav hierarchy */
.docnav h6{font-family:var(--fh);font-size:.74rem;margin:1rem 0 .25rem .35rem;color:var(--ink-3);letter-spacing:.6px;text-transform:uppercase;
  display:flex;align-items:center;gap:.35rem}
.docnav h6::before{content:"";display:inline-block;width:14px;height:2px;background:var(--ink-3);border-radius:1px}
.docnav h6:first-of-type{margin-top:.25rem}
.docnav a{display:flex;align-items:center;gap:.45rem;font-weight:700;color:var(--ink-2);padding:.35rem .55rem .35rem 1.55rem;
  border-radius:8px;font-size:.85rem;position:relative;line-height:1.25}
.docnav a::before{content:"";position:absolute;left:.85rem;top:50%;width:5px;height:5px;border-radius:50%;
  background:var(--ink-3);opacity:.45;transform:translateY(-50%);transition:.15s}
.docnav a.on::before,.docnav a:hover::before{background:var(--ink);opacity:1}
.docnav a.on{background:var(--brand);color:var(--ink)}
.docnav a.on::before{background:var(--ink)}

/* subscription tier card */
.tier{border:2px solid var(--edge);border-radius:var(--r);background:var(--card);padding:1.4rem 1.2rem;display:flex;flex-direction:column;height:100%;
  transition:transform .12s,box-shadow .15s;position:relative;overflow:hidden}
.tier .ttl{font-family:var(--fh);font-size:1.2rem;line-height:1}
.tier .price{font-family:var(--fh);font-size:2.4rem;line-height:1;margin-top:.4rem}
.tier .price .suf{font-size:.9rem;color:var(--ink-2);font-family:var(--ff);font-weight:700}
.tier .inc{font-weight:800;font-size:.95rem;margin-top:.2rem}
.tier ul{list-style:none;padding:0;margin:.9rem 0 1.1rem;display:flex;flex-direction:column;gap:.4rem;font-weight:600;font-size:.86rem;color:var(--ink-2);flex-grow:1}
.tier ul li i{color:var(--pos);margin-right:.35rem}
.tier .over{font-size:.74rem;color:var(--ink-3);font-weight:700;font-family:var(--fm)}
.tier.pop{box-shadow:var(--hard);transform:translateY(-2px)}
.tier.pop .ttl{color:#fff}
.tier.pop ul{color:rgba(255,255,255,.92)}
.tier.pop .price{color:#fff}
.tier.pop .price .suf{color:rgba(255,255,255,.78)}
.tier.pop .over{color:rgba(255,255,255,.85)}
.tier.pop ul li i{color:#fff}
.tier .ribbon{position:absolute;top:10px;right:-30px;transform:rotate(38deg);background:var(--brand);border:2px solid var(--edge);
  font-family:var(--fh);font-size:.66rem;padding:.15rem 2.2rem;color:var(--ink)}
.tier .save{font-size:.7rem;color:var(--pos);font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.tier.pop .save{color:var(--brand)}

/* quota meter */
.quota{display:flex;flex-direction:column;gap:.3rem}
.quota .bar{height:10px;border-radius:6px;background:var(--paper);border:2px solid var(--edge);overflow:hidden}
.quota .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pos),var(--brand) 60%,var(--brand-magenta));transition:width .4s}
.quota .row{display:flex;justify-content:space-between;font-weight:700;font-size:.78rem}
.quota .row .left{color:var(--ink-2)}
.quota .row .right{color:var(--ink)}

/* subscription gate banner */
.sub-gate{border:2px solid var(--edge);border-radius:var(--r);background:linear-gradient(120deg,var(--brand) 0%,var(--brand-magenta) 100%);
  padding:.9rem 1.1rem;color:#17171a;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.sub-gate.locked{background:#fff7d6}
.sub-gate .meter{flex:1;min-width:180px}
.code .k{color:#ffd21e}.code .s{color:#7ee787}.code .c{color:#6a6a76}.code .f{color:#79c0ff}.code .n{color:#ffa657}
.code .m{color:#ff7bcf}

/* review card */
.review{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:1rem}
.review .stars{color:var(--brand-d);font-weight:800}
.review .who{font-weight:800}
.review .when{color:var(--ink-3);font-weight:700;font-size:.78rem}
.review .shot{margin-top:.6rem;border:2px solid var(--line);border-radius:10px;height:140px;background:var(--paper) repeating-conic-gradient(var(--paper) 0 25%,transparent 0 50%) 0/16px 16px;display:grid;place-items:center;color:var(--ink-3)}

/* used-in card */
.usedin{border:2px solid var(--line);border-radius:14px;background:var(--card);padding:.9rem;display:flex;flex-direction:column;gap:.5rem}
.usedin .pic{height:130px;border:2px solid var(--line);border-radius:10px;background:var(--paper) repeating-conic-gradient(var(--paper) 0 25%,transparent 0 50%) 0/14px 14px;display:grid;place-items:center;color:var(--ink-3)}

/* ratings bar */
.rate-row{display:flex;align-items:center;gap:.5rem;font-weight:700}
.rate-row .bar{flex:1;height:8px;border:2px solid var(--edge);border-radius:999px;overflow:hidden;background:var(--card)}
.rate-row .bar i{display:block;height:100%;background:var(--brand)}

/* magenta chroma keyframes (used in app.html stage during render) */
@keyframes chromaPulse{0%,100%{background-color:#FF00FF}50%{background-color:#ff66e0}}
.chroma-bg{background:#FF00FF;animation:chromaPulse 2.4s ease-in-out infinite}

/* confetti dots */
.confetti{position:absolute;width:8px;height:8px;border-radius:2px;animation:cfFall 1.4s ease-out forwards}
@keyframes cfFall{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--cx,40px),var(--cy,140px)) rotate(420deg);opacity:0}}

/* graph background mode */
.graph-bg-wrap{position:fixed;inset:66px 0 0 0;z-index:0;background:var(--paper);overflow:hidden}
.graph-bg-wrap::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--edge) 1px,transparent 1.2px);background-size:22px 22px;opacity:.06;pointer-events:none}
.graph-overlay{position:relative;z-index:2;pointer-events:none}
.graph-overlay > *{pointer-events:auto}
.graph-floating{position:relative;z-index:2;backdrop-filter:saturate(1.2) blur(8px);background:color-mix(in srgb, var(--card) 80%, transparent);border-radius:var(--r);border:2px solid var(--edge);box-shadow:var(--soft)}

/* ============================================================
   HOVER / FOCUS / ACTIVE — global, works in BOTH themes.
   Goal: every clickable element must visibly change on hover
         without blending into the background.
   ============================================================ */

/* card-like elements with .lift get a clear yellow outline + soft shadow on hover in BOTH themes */
.card.lift,
.case,
.testi,
.tier,
.pin-slot,
.format-row .fmt,
.review,
.usedin,
.sale-card,
.template,
.activity .row-i,
.move,
.faq-item{ transition: transform .14s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }

.card.lift:hover,
.case:hover,
.testi:hover,
.review:hover,
.usedin:hover,
.template:hover{
  border-color:var(--ink) !important;
  box-shadow: 6px 6px 0 var(--ink);
  transform: translate(-2px,-2px);
}
[data-theme="dark"] .card.lift:hover,
[data-theme="dark"] .case:hover,
[data-theme="dark"] .testi:hover,
[data-theme="dark"] .review:hover,
[data-theme="dark"] .usedin:hover,
[data-theme="dark"] .template:hover{
  border-color:#FFD21E !important;
  box-shadow: 6px 6px 0 rgba(255,210,30,.35);
}

/* tier cards — same hover but never on the popular one */
.tier:hover{ border-color:var(--ink); box-shadow:6px 6px 0 var(--ink); transform:translate(-2px,-2px) }
[data-theme="dark"] .tier:hover{ border-color:#FFD21E; box-shadow:6px 6px 0 rgba(255,210,30,.35) }

/* chip & seg-opt — clear hover */
.chip,.seg .opt{ transition:background .14s, color .14s, border-color .14s, transform .12s; cursor:pointer }
.chip:hover:not(.on){ background:var(--brand); color:#17171a; border-color:var(--edge) }
.seg .opt:hover:not(.sel){ background:rgba(255,210,30,.18); color:var(--ink) }
[data-theme="dark"] .chip:hover:not(.on){ background:#FFD21E; color:#17171a }
[data-theme="dark"] .seg .opt:hover:not(.sel){ background:rgba(255,210,30,.18); color:#fff }

/* chip.magenta hover */
.chip.magenta:hover:not(.on){ background:var(--brand-magenta); color:#fff }

/* btn-outline-dark — make hover visible in dark theme too */
[data-theme="dark"] .btn-outline-dark{ --bs-btn-color:#f3f2ee; --bs-btn-border-color:#3a3a44;
  --bs-btn-hover-bg:#FFD21E; --bs-btn-hover-border-color:#FFD21E; --bs-btn-hover-color:#17171a;
  --bs-btn-active-bg:#FFD21E; --bs-btn-active-color:#17171a; --bs-btn-active-border-color:#FFD21E }
[data-theme="dark"] .btn-outline-light:hover{ background:#fff; color:#17171a }

/* btn-warning hover keeps yellow but adds shadow depth */
.btn-warning:hover{ box-shadow:5px 5px 0 var(--ink); transform:translate(-2px,-2px) }
.btn-warning{ transition: transform .12s, box-shadow .15s }
.btn-magenta:hover{ box-shadow:5px 5px 0 var(--ink); transform:translate(-2px,-2px); background:#ff44dd; color:#fff }
.btn-magenta{ transition: transform .12s, box-shadow .15s }

/* generic anchor hover indication for clickable cards inside dark hero blocks */
.leadbar .leadcell{ transition:background .14s }
.leadbar .leadcell:hover{ background:#22222a }
.mini-leader .lc{ transition:background .14s }
.mini-leader .lc:hover{ background:#22222a; cursor:pointer }

/* iconbtn hover */
.iconbtn{ transition:background .12s, color .12s, border-color .12s }
.iconbtn:hover{ background:var(--brand); color:#17171a; border-color:var(--edge) }
[data-theme="dark"] .iconbtn{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }
[data-theme="dark"] .iconbtn:hover{ background:#FFD21E; color:#17171a; border-color:#FFD21E }

/* docnav hover (light theme — was missing) */
.docnav a:hover:not(.on){ background:rgba(255,210,30,.2); color:var(--ink) }

/* nav-pills active */
.nav-pills .nav-link{ transition:background .14s, color .14s }
.nav-pills .nav-link:hover:not(.active){ background:rgba(255,210,30,.18); color:var(--ink) }

/* activity row hover */
.activity .row-i:hover{ background:rgba(255,210,30,.12) }
[data-theme="dark"] .activity .row-i:hover{ background:rgba(255,210,30,.07) }

/* faq item hover (when collapsed) */
.faq-item summary:hover{ background:rgba(255,210,30,.12) }
[data-theme="dark"] .faq-item summary:hover{ background:rgba(255,210,30,.06) }

/* agent picker active state */
.agent-pick:hover:not(.sel){ border-color:var(--ink); background:rgba(255,210,30,.18) }
[data-theme="dark"] .agent-pick:hover:not(.sel){ border-color:#FFD21E; background:rgba(255,210,30,.08); color:#fff }

/* link / nav-link defaults: focus ring visible in dark */
:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; border-radius:6px }

/* avatars are clickable when wrapped in <a> — small hover lift */
a:hover > .avatar, a:hover > .author-line .avatar{ transform:translateY(-1px); box-shadow:0 4px 0 var(--edge) }
a > .avatar{ transition:transform .14s, box-shadow .14s }

/* ============================================================
   CONTRAST FIXES for elements previously living in the "yellow" group
   ============================================================ */
/* .stat — actually card-on-paper, must inherit ink color */
.stat{ color:var(--ink) }
.stat b{ color:var(--ink) }
.stat .lbl{ color:var(--ink-2); font-weight:700; font-size:.78rem }
[data-theme="dark"] .stat{ background:#1a1a1f; border-color:#3a3a44; color:#f3f2ee }
[data-theme="dark"] .stat b{ color:#fff }
[data-theme="dark"] .stat .lbl{ color:#cfcfd6 }

/* .proj-bar .branch — same fix */
.proj-bar .branch{ color:var(--ink-2) }
[data-theme="dark"] .proj-bar .branch{ background:#22222a; border-color:#3a3a44; color:#cfcfd6 }

/* .flag — base is card; HOT/NEW have their own colors */
.flag{ color:var(--ink); background:var(--card); border-color:var(--edge) }
[data-theme="dark"] .flag{ background:#22222a; color:#f3f2ee; border-color:#3a3a44 }

/* text-dim visibility in BOTH themes (was washed out) */
.text-dim{ color:#5a5a64 !important; font-weight:700 }
[data-theme="dark"] .text-dim{ color:#a0a0a8 !important }
.text-muted2{ color:#5a5a64 }
[data-theme="dark"] .text-muted2{ color:#cfcfd6 }

/* Hover lift for global-stat (clickable looking blocks) shouldn't blend */
.global-stat,.mini-leader{ transition:transform .15s, box-shadow .15s }
.global-stat:hover,.mini-leader:hover{ transform:translateY(-2px); box-shadow:6px 6px 0 #000 }

/* responsive helpers used by character.html */
.row-act{display:grid;grid-template-columns:1fr;gap:.9rem;margin-bottom:1rem}
@media(min-width:1100px){
  .acts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
  .acts-grid > .row-act{grid-template-columns:200px 1fr;align-items:stretch}
}
@media(min-width:1600px){
  .acts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}