/* Booty N Buff Pulse. Single dark theme, values from the Apex PDP treatment (spec section 7). */
:root{
  color-scheme:dark;
  --plane:#0b0c0f; --surface:#12141a; --surface-2:#171a21;
  --line:#242832; --line-2:#2e3340;
  --ink:#f4f5f7; --ink-2:#d5d9e0; --muted:#a4abb7; --muted2:#7c8391;
  --brand:#7dc23b; --brand2:#8fd94a; --blue:#57b8ff;
  --f1:#c8e8a0; --f2:#a6d873; --f3:#7dc23b; --f4:#5da42b; --f5:#41871f;
  --bar:#7dc23b; --accent:#7dc23b; --accent-soft:rgba(125,194,59,.13);
  --prior:#3a4152; --neutral:#2e3340;
  --ver:#7dc23b; --lik:#41871f; --untraced:#2e3340;
  --good:#8fd94a; --warn:#e0a52a; --crit:#ff8a8a;
  --good-bg:rgba(125,194,59,.14); --crit-bg:rgba(255,138,138,.13); --warn-bg:rgba(224,165,42,.13);
  --band:#0b0c0f; --band-ink:#ffffff; --band-2:#1b1e26;
  --r:14px; --r2:8px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--plane); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
[hidden]{display:none!important}
.wrap{max-width:1180px; margin:0 auto; padding-inline:16px; padding-block:0 56px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.empty{color:var(--muted); font-size:12.5px; padding:6px 0}

/* ---------- header ---------- */
header.top{position:sticky; top:0; z-index:30; background:var(--band); border-bottom:1px solid var(--line)}
.top-inner{max-width:1180px; margin:0 auto; padding:14px 16px 12px; display:flex; flex-wrap:wrap; gap:14px 20px; align-items:center}
.brand{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.brand b{font-weight:900; letter-spacing:-.01em; text-transform:uppercase; font-size:16px; color:var(--band-ink)}
.brand span{font-weight:600; color:var(--muted2); font-size:12px; text-transform:uppercase; letter-spacing:.14em}
.dot{width:8px;height:8px;border-radius:2px;background:var(--brand);display:inline-block;margin-right:7px;vertical-align:middle}
.seg{display:flex; background:var(--band-2); padding:3px; gap:2px; border-radius:var(--r2); border:1px solid var(--line)}
.seg button{font:inherit; font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.07em;
  text-transform:uppercase; background:none; border:0; padding:6px 14px; cursor:pointer; border-radius:5px; white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--brand); color:#0b0c0f}
.seg button:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.stamp{font-size:11.5px; color:var(--muted2); white-space:nowrap}
.mockflag{font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--warn); border:1px solid rgba(224,165,42,.4); padding:3px 8px; border-radius:5px; background:var(--warn-bg)}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-width:0}
.panel-head{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline; padding:14px 18px 0}
.panel-head h2{margin:0; font-size:13.5px; font-weight:900; letter-spacing:-.02em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px}
.ico{width:15px; height:15px; flex:none; color:var(--brand); opacity:.92}
.panel-head .hint{font-size:12px; color:var(--muted); margin-left:auto}
.panel-body{padding:14px 18px 18px}
section{margin-top:22px}
.section-label{display:flex; align-items:baseline; gap:10px; margin:0 0 9px 2px}
.section-label .rule{flex:1; height:1px; background:var(--line-2)}

/* ---------- kpi strip ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(154px,1fr)); background:var(--line); gap:1px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.kpi{background:var(--surface); padding:13px 15px 14px; min-height:96px}
.kpi .v{font-size:25px; font-weight:900; letter-spacing:-.025em; margin:5px 0 4px; line-height:1.1}
.kpi .v small{font-size:15px; font-weight:600; color:var(--ink-2)}
.chip{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600; padding:2px 6px; border-radius:4px; font-variant-numeric:tabular-nums}
.chip.up{color:var(--good); background:var(--good-bg)}
.chip.down{color:var(--crit); background:var(--crit-bg)}
.chip.flat{color:var(--ink-2); background:var(--surface-2)}
.kpi .cmp{font-size:11px; color:var(--muted); margin-left:5px}

/* ---------- grids ---------- */
.two{display:grid; grid-template-columns:1.55fr 1fr; gap:14px}
.two>*{min-width:0}
@media (max-width:860px){.two{grid-template-columns:1fr}}

/* ---------- charts ---------- */
.chartbox{position:relative}
svg.chart{display:block; width:100%; height:auto; overflow:visible}
.legend:empty{display:none}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin:2px 0 8px}
.legend i{display:inline-block; width:16px; height:3px; border-radius:2px; margin-right:6px; vertical-align:middle}
.tip{position:absolute; pointer-events:none; opacity:0; transition:opacity .09s; background:var(--surface); border:1px solid var(--line-2);
  border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.35); padding:8px 10px; font-size:12px; min-width:128px; z-index:10}
.tip b{display:block; font-size:11px; font-weight:600; color:var(--muted); margin-bottom:4px; font-family:"IBM Plex Mono",monospace; letter-spacing:.04em}
.tip .row{display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums}
.tip .row span:last-child{font-weight:600}

/* ---------- funnel ---------- */
.funnel{display:flex; flex-direction:column; gap:2px}
.fstage{display:grid; grid-template-columns:minmax(112px,auto) 1fr auto; gap:12px; align-items:center}
.ftrack{background:var(--surface-2); border-radius:5px; height:26px; position:relative; overflow:hidden}
.ffill{height:100%; border-radius:5px}
.fstage .lbl{font-size:12.5px; color:var(--ink-2)}
.fstage .val{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; min-width:74px; text-align:right}
.fdrop{font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--muted); padding-left:124px; height:15px; display:flex; align-items:center}
.fdrop.bad{color:var(--crit)}
@media (max-width:480px){.fstage{grid-template-columns:minmax(88px,auto) 1fr auto}.fdrop{padding-left:100px}}

/* ---------- ranked bars ---------- */
.ranked{display:flex; flex-direction:column; gap:11px}
.rrow{display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:baseline}
.rrow .name{font-size:13px; font-weight:500; min-width:0; overflow-wrap:anywhere}
.rrow .figs{font-size:12.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap}
.rrow .figs b{color:var(--ink); font-weight:600}
.rtrack{grid-column:1/-1; height:9px; background:var(--surface-2); border-radius:4px; overflow:hidden}
.rfill{height:100%; background:var(--bar); border-radius:4px}
.rfill.other{background:var(--line-2)}
.flag{font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:1px 6px; border-radius:4px; margin-left:7px; white-space:nowrap}
.flag.low{color:var(--crit); background:var(--crit-bg)}
.flag.sub{color:var(--accent); background:var(--accent-soft)}

/* ---------- tables ---------- */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; font-size:12.5px; min-width:460px}
th,td{padding:8px 10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left; white-space:normal}
thead th{font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-2)}
tbody td{font-variant-numeric:tabular-nums; color:var(--ink-2)}
tbody td:first-child{color:var(--ink); font-weight:500}
tbody tr:last-child td{border-bottom:0}
td .minibar{display:block; height:4px; min-width:2px; border-radius:2px; background:var(--bar); margin-top:4px}
td.best{color:var(--brand); font-weight:600}
td.zero{color:var(--muted2)}

/* ---------- AOV levers ---------- */
.levers{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden}
.lever{background:var(--surface); padding:14px 15px 16px; display:flex; flex-direction:column; gap:5px}
.lever .v{font-size:23px; font-weight:900; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.1}
.lever .sub{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.lever .st{margin-top:2px}
.lever .cmp{font-size:11px; color:var(--muted); margin-left:5px}
.livebadge{font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); background:var(--accent-soft); border:1px solid rgba(125,194,59,.35); padding:2px 7px; border-radius:4px}
.leverfoot{display:flex; flex-wrap:wrap; gap:6px 22px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); margin-top:14px; padding-top:13px; font-variant-numeric:tabular-nums}
.leverfoot:empty{display:none}
.leverfoot b{color:var(--ink-2); font-weight:600}

/* ---------- paid buckets ---------- */
.buckets{display:flex; flex-direction:column; gap:18px}
.pf{display:grid; grid-template-columns:1fr; gap:9px}
.pf .hdr{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline}
.pf .hdr h3{margin:0; font-size:13.5px; font-weight:900; text-transform:uppercase; letter-spacing:-.02em}
.pf .hdr .spend{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.pf .hdr .range{margin-left:auto; font-size:12.5px; font-variant-numeric:tabular-nums; color:var(--ink-2)}
.pf .hdr .range b{color:var(--ink); font-weight:700}
.stack{display:flex; height:32px; background:var(--surface-2); overflow:hidden; border-radius:6px}
.stack div{height:100%; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--surface) inset}
.stack .sv{background:var(--ver); color:#0b0c0f}
.stack .sl{background:var(--lik); color:#e9f5dd}
.stack .su{background:var(--untraced); color:var(--muted)}
.pfacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden}
.pfacts div{background:var(--surface); padding:8px 10px}
.pfacts .k{font-family:"IBM Plex Mono",monospace; font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.pfacts .n{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px}
.bkey{display:flex; flex-wrap:wrap; gap:8px 20px; font-size:12px; color:var(--ink-2); margin-bottom:4px}
.bkey span i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.merbar{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; border-top:1px solid var(--line); padding-top:13px; font-size:12.5px; color:var(--muted); margin-top:16px}
.merbar b{font-size:16px; font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums}

/* ---------- callouts ---------- */
.note{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; line-height:1.5; border-radius:10px; padding:11px 13px; color:var(--ink-2)}
.note.warn{background:var(--warn-bg); border:1px solid rgba(224,165,42,.26)}
.note.plain{background:var(--surface-2); border:1px solid var(--line)}
.note strong{color:var(--ink)}
.note .mk{font-weight:700; color:var(--warn); font-family:"IBM Plex Mono",monospace; flex:none}

/* ---------- device ---------- */
.dev{display:flex; flex-direction:column; gap:14px}
.devrow .top{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; gap:8px; flex-wrap:wrap}
.devrow .top b{font-weight:600}
.devrow .cr{font-variant-numeric:tabular-nums; font-weight:600}
.devtrack{height:22px; background:var(--surface-2); border-radius:5px; margin-top:6px; overflow:hidden}
.devfill{height:100%; border-radius:5px}
.devnote{font-size:12px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:11px}

/* ---------- order feed ---------- */
.feed{display:flex; flex-direction:column}
.fitem{display:grid; grid-template-columns:auto 1fr auto; gap:4px 12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0}
.fitem .t{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted)}
.fitem .d{font-size:12.5px; color:var(--ink-2); min-width:0; overflow-wrap:anywhere}
.fitem .a{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.fitem .src{grid-column:2/-1; font-size:11.5px; color:var(--muted)}

/* ---------- changelog / basket rows ---------- */
.log{display:flex; flex-direction:column; gap:0}
.logitem{display:grid; grid-template-columns:76px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12.5px}
.logitem:last-child{border-bottom:0}
.logitem .when{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted)}
.logitem .what b{font-weight:600}
.logitem .area{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2); margin-left:8px}
.basketrow{grid-template-columns:1fr auto}
.basketrow .note-l{color:var(--muted); font-size:11.5px}
.basketrow .val{text-align:right}
.basketrow .val .num{font-weight:600; font-size:13.5px}

footer{margin-top:26px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); line-height:1.6}
footer b{color:var(--ink-2); font-weight:600}
footer .warnlist{margin:8px 0 0; padding-left:18px; color:var(--warn)}