/* ============================================================
   LLM Rank Hub — sidebar console
   Sections: leaderboard (merged rankings) / price / clicks /
             coverage / method
   i18n: zh-CN + en, toggle in sidebar
   Deps: none
   ============================================================ */
:root{
  /* Warm paper palette, lifted from arena.ai: an off-white ground, near-black
     warm ink, hairlines instead of shadows. No blue, no gradients. */
  --bg:#fcfaf8;--side:#fcfaf8;--card:#fffdfa;--card-soft:#faf8f5;
  --stroke:#eeedec;--stroke-2:#e2dfdc;
  --txt:#2e2b29;--txt-dim:#413d39;--txt-faint:#67625b;
  --blue:#252523;--cyan:#252523;--violet:#252523;
  --green:#38a341;--amber:#8a6a2f;--red:#b4544a;
  --code:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* Numbers read as text here, not as a terminal readout. */
  --mono:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* Fraunces is the open stand-in for arena's licensed Martina Plantijn.
     It has no CJK glyphs, so Chinese headings fall through to Songti. */
  --display:Fraunces,"Songti SC","Noto Serif SC","Source Han Serif SC",serif;
  --r:12px;--side-w:240px;
  --shadow:none;--shadow-hi:none;
}
@font-face{font-family:Inter;src:url("/assets/fonts/inter-var.woff2?v=20261104") format("woff2-variations");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url("/assets/fonts/fraunces-var.woff2?v=20261104") format("woff2-variations");font-weight:300 700;font-style:normal;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
code,kbd,samp,pre{font-family:var(--code)}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.5;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- sidebar ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:60;background:var(--side);border-right:1px solid var(--stroke);display:flex;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.side-top{display:flex;align-items:center;gap:9px;padding:20px 18px 16px;position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:1 1 auto;min-width:0}
.logo-mark{width:32px;height:32px;border-radius:6px;flex-shrink:0;position:relative;background:#fff;border:1px solid var(--stroke-2);display:grid;place-items:center;overflow:hidden}
.logo-mark::after{content:"";position:absolute;width:56%;height:1.5px;background:var(--txt);transform:rotate(-45deg)}
.logo-mark svg{position:relative;z-index:1}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-line1{display:flex;align-items:baseline;gap:4px;font-family:var(--display);font-weight:400;letter-spacing:-.2px}
.logo-llm{font-size:18px;font-weight:400;letter-spacing:-.3px}
.logo-rank{font-size:18px;font-weight:400;letter-spacing:-.3px;color:var(--txt-faint)}
.logo-hub{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:1.4px;color:var(--txt-faint);margin-top:2px;display:none}

.nav{flex:1;overflow-y:auto;padding:8px 12px}
.nav::-webkit-scrollbar{width:4px}
.nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1)}
.nav-label{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-faint);padding:10px 10px 6px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:4px;margin-bottom:1px;font-size:13.5px;color:var(--txt-dim);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;font-family:var(--sans);transition:background .12s,color .12s}
.nav-item:hover{background:#f4f0eb;color:var(--txt)}
.nav-item.active{background:#f4f0eb;color:var(--txt);font-weight:500}
.nav-item.active svg{color:var(--txt)}
.nav-item svg{flex-shrink:0;color:var(--txt-faint)}
.nav-link{text-decoration:none}
.nav-item .badge{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:3px;background:#f4f0eb;color:var(--txt-faint)}

.side-foot{padding:0 12px 14px;flex-shrink:0}
.acct{display:flex;align-items:center;gap:9px;padding:10px 10px;border-top:1px solid var(--stroke);cursor:pointer;background:none;border-radius:0;margin-bottom:0}
.acct:hover{background:#f4f0eb}
.acct-av{width:24px;height:24px;border-radius:50%;flex-shrink:0;background:#2e2b29;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:500}
.acct-info{min-width:0;flex:1}
.acct-main{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.acct-sub{font-size:11px;color:var(--txt-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-block{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid var(--stroke);background:none;border-radius:0}
.tz-left{display:flex;align-items:center;gap:6px;min-width:0}
.tz-name{font-size:11px;color:var(--txt-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{font-family:var(--sans);font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--txt)}
.clock-sub{font-family:var(--sans);font-size:10px;color:var(--txt-faint);text-align:right;margin-top:1px;font-variant-numeric:tabular-nums}
.lang-btn{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;border-top:1px solid var(--stroke);background:none;border-radius:0;cursor:pointer;font-family:var(--sans);font-size:11.5px;color:var(--txt-faint);transition:color .12s}
.lang-btn:hover{color:var(--txt)}
.lang-seg{margin-left:auto;display:flex;gap:6px;background:none;padding:0}
.lang-seg span{padding:0;border-radius:0;font-family:var(--sans);font-size:11px;color:var(--txt-faint)}
.lang-seg span.on{background:none;color:var(--txt);font-weight:500;box-shadow:none}

.menu-btn{display:none;position:fixed;top:12px;left:12px;z-index:70;width:36px;height:36px;border-radius:6px;border:1px solid var(--stroke);background:#fff;cursor:pointer;align-items:center;justify-content:center;color:var(--txt-dim)}
.scrim{display:none;position:fixed;inset:0;z-index:55;background:rgba(46,43,41,.28)}
.scrim.show{display:block}

/* ---------- main ---------- */
.main{margin-left:var(--side-w);min-height:100vh;background:var(--bg)}
.wrap{max-width:1320px;margin:0 auto;padding:28px 32px 72px}
.page-head{margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
/* Title, subtitle and freshness chips share one baseline row. Each group
   is separated by a hairline, so the header reads as a compact strip
   instead of three stacked lines. */
.page-head > :first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;min-width:0}
.page-title{font-family:var(--display);font-size:32px;font-weight:300;letter-spacing:-.9px;line-height:1.1;color:var(--txt)}
.page-sub{font-size:13px;color:var(--txt-faint);margin-top:0;padding-left:14px;border-left:1px solid var(--stroke-2);line-height:1.45}
.board-head{align-items:center}
.page-head > .board-head-main{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;min-width:0;flex:1 1 auto}
/* The subtitle and the freshness figures form one left-aligned column beside
   the big title: same x, no dot separators, nothing to drift out of line. */
.board-head-info{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.board-head-info .page-sub{padding-left:0;border-left:0;margin:0;font-size:12px;line-height:1.35}
.board-head-info .board-meta{flex-direction:row;align-items:baseline;align-self:stretch;padding-left:0;border-left:0;margin:0;gap:0;font-size:10.5px;line-height:1.35}
.board-head-info .board-meta > * + *::before{content:"·";margin:0 6px;color:#c9c4bd}
.board-meta{display:flex;align-items:center;align-self:center;gap:0;flex-wrap:wrap;margin:0;padding-left:14px;border-left:1px solid var(--stroke-2);font-size:12px;color:var(--txt-faint);line-height:1.6}
.board-meta > *{display:inline-flex;align-items:center}
.board-meta > * + *::before{content:"·";margin:0 8px;color:#c9c4bd}
.page-hint{font-size:12px;color:var(--txt-faint);padding-bottom:0;white-space:nowrap}
.view{display:none}
.view.active{display:block}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--r);box-shadow:none;transition:border-color .16s}
.card:hover{border-color:var(--stroke-2)}

/* ---------- filters ---------- */
.filters{display:flex;flex-direction:column;gap:6px;padding:0;margin:0 0 6px;background:none;border:none;border-radius:0}
.frow{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.frow-domains{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;padding-bottom:2px}
.frow-domains::-webkit-scrollbar{display:none}
.frow-sub{gap:20px;padding:2px 0 14px;border-bottom:1px solid var(--stroke);margin-bottom:6px}
.fgroup{display:flex;align-items:center;gap:10px;flex-shrink:0}
.fgroup > label{font-family:var(--display);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--txt-faint);white-space:nowrap}
.seg{display:flex;gap:2px;background:none;padding:0;border:none;border-radius:0}
.seg button{display:inline-flex;align-items:center;height:36px;padding:0 13px;border:none;background:transparent;border-radius:4px;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--txt-faint);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.seg button:hover{color:var(--txt)}
.seg button.on{background:#f0ebe5;color:var(--txt);font-weight:500}
.frow-sub .seg button{height:28px;padding:0 9px;font-size:12.5px;color:var(--txt-faint)}
.frow-sub .seg button.on{background:#f4f0eb;color:var(--txt);font-weight:500}

/* ---------- KPI ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
@media(max-width:960px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.bento{grid-template-columns:1fr}}
.kpi{padding:14px 16px 13px}
.kpi-label{font-family:var(--display);font-size:12px;color:var(--txt-faint);letter-spacing:.04em;margin-bottom:8px}
.kpi-val{font-size:26px;font-weight:400;letter-spacing:-.8px;line-height:1;color:var(--txt);font-variant-numeric:tabular-nums}
.kpi-val .u{font-size:12px;color:var(--txt-dim);font-weight:400;margin-left:3px}
.kpi-foot{margin-top:8px;font-size:11px;color:var(--txt-dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

.chip{font-family:var(--sans);font-size:12px;padding:0;border:none;border-radius:0;background:none;color:var(--txt-faint);white-space:nowrap}
.chip.ok,.chip.warn,.chip.pend,.chip.peak,.chip.off{color:var(--txt-faint);background:none;border:none}
.chip.warn{color:var(--amber)}
.chip.peak{color:var(--red)}
.chip.off{color:var(--green)}

.sec-head{display:flex;align-items:baseline;gap:12px;margin:24px 0 10px;flex-wrap:wrap}
.sec-title{font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:-.3px}
.sec-title::before{display:none}
.sec-note{font-size:12px;color:var(--txt-faint)}
.sec-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--txt-faint)}
.sec-meta .mono{font-family:var(--sans)}
.sec-hint{margin-left:auto;font-size:12px;color:var(--txt-faint);white-space:nowrap}
@media(max-width:1240px){.sec-hint{display:none}}
.title-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- leaderboard table ----------
   One shared row geometry for the ranking board and the token-volume
   board. Columns are declared once as a custom property so the sticky
   header, the rows and the mobile rules cannot drift apart. */
.board-table{--cols:44px 30px minmax(200px,1fr) 84px 210px 96px 28px}
.board-table.mode-usage{--cols:44px 30px minmax(190px,1fr) 104px 74px 82px 168px 96px 28px}
.model-list{display:flex;flex-direction:column;gap:0}
.table-cols{display:grid;grid-template-columns:var(--cols);align-items:center;height:42px;padding:0 14px;border-bottom:1px solid var(--stroke-2);font-size:12px;color:var(--txt-faint);letter-spacing:.01em}
.table-cols span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table-cols .num{text-align:right}
.table-cols span:nth-child(5){padding-left:12px}
.model{background:transparent;border:none;border-bottom:1px solid var(--stroke);border-radius:0;box-shadow:none;overflow:visible;transition:background .12s}
.model:hover{background:#fbf9f7}
/* the opened row keeps the page ground: a tinted panel read as a darker
   block behind the prices and was hard on the eyes */
.model.open{background:var(--bg)}
.model-head{display:grid;grid-template-columns:var(--cols);align-items:center;gap:0;padding:0 14px;min-height:64px;cursor:pointer;user-select:none;transition:background .12s;border-radius:0}
.model-head:hover{background:transparent}
.model.open .model-head{background:transparent}
.m-avatar{width:24px;height:24px;border-radius:6px;flex-shrink:0;display:grid;place-items:center;font-size:11px;color:#fff}
.m-info{min-width:0;flex:1;padding-right:16px}
.m-name{font-size:14px;font-weight:450;color:var(--txt);display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-name a{color:inherit}
.m-sub{font-family:var(--sans);font-size:12px;color:var(--txt-faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sub .lic{margin-left:8px;font-size:11px;padding:0;border:none;background:none;color:var(--txt-faint);text-transform:none}
.m-stats{display:flex;align-items:center;gap:16px;flex-shrink:0}
.m-stat{text-align:right;min-width:58px}
.m-stat .v{font-family:var(--sans);font-size:13.5px;font-weight:500}
.m-stat .l{font-size:11px;color:var(--txt-faint);margin-top:1px}
.prov-count{font-size:11px;padding:0;border:none;background:none;color:var(--txt-faint);white-space:nowrap}
.caret{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;color:#a9a39c;transition:transform .2s}
.model.open .caret{transform:rotate(180deg)}
.model-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease;border-top:0 solid var(--stroke)}
.model.open .model-body{grid-template-rows:1fr;border-top-width:1px}
.model-body > .inner{overflow:hidden;min-height:0}
.model.open .model-body > .inner{overflow:visible}
.model.open .model-body{background:transparent}

/* ---------- rank / score cells ---------- */
.rank-first{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex-shrink:0}
.rank-num{font-size:12px;font-weight:400;color:var(--txt-faint);letter-spacing:0;line-height:1.2;font-variant-numeric:tabular-nums}
.rank-rng{font-size:10px;color:#a9a39c;white-space:nowrap}
.m-score{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;padding-left:12px}
.m-score .v{font-size:14px;font-weight:500;color:var(--txt);white-space:nowrap;font-variant-numeric:tabular-nums}
.m-score .l{font-size:11px;color:var(--txt-faint);margin-top:2px}
@media(max-width:1180px){.m-score.hide-lg{display:none}}
/* cost/task cell: hoverable like the price cell, but anchored to the right
   edge so a 300px panel cannot run off the viewport from the last column */
.cost-cell{position:relative;cursor:help}
html[lang="en"] .cost-cell .l{white-space:nowrap;font-size:9.5px;letter-spacing:0;margin-top:3px}
.cost-cell .tip{left:auto;right:-4px;transform:translateY(4px)}
.cost-cell:hover .tip{transform:translateY(0)}
.cost-cell .tip.below{transform:translateY(-4px)}
.cost-cell:hover .tip.below{transform:translateY(0)}

/* ---------- empty provider panel ---------- */
.prov-empty{padding:20px 18px;font-size:12px;color:var(--txt-faint);line-height:1.7;text-align:center}

/* ---------- provider panel while its JSON is still in flight ----------
   The table used to print "no providers" during the gap between the
   first board paint and models.json/extra_channels.json landing, then
   pop the rows in. A spinner states what is actually happening. */
.prov-loading{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:20px 18px;font-size:12px;color:var(--txt-faint);line-height:1.7}
.prov-spinner{width:12px;height:12px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--stroke-2);border-top-color:var(--amber);
  animation:provspin .8s linear infinite}
@keyframes provspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .prov-spinner{animation:none;border-top-color:var(--stroke-2);border-left-color:var(--amber)}
}



/* ---------- vendor avatar: national flag + brand mark ----------
   Two separate slots. Previously a single overflow:hidden box held both,
   which clipped the flag (positioned at -4px) and let the generic
   `img{width:21px}` rule override the flag's own sizing. */
.m-avatar-vendor{display:flex;align-items:center;gap:0;flex-shrink:0}
.m-avatar-vendor .flag{display:none}
.cur-chip{font-size:10px;padding:0;border:none;background:none;color:var(--txt-faint);white-space:nowrap}

/* ---------- merged board: rank-first row, vendor logo, live price ---------- */
.freshness{font-size:12px;padding:0;border:none;background:none;white-space:nowrap;color:var(--txt-faint)}
.freshness.ok,.freshness.warn{color:var(--txt-faint);background:none;border:none}

/* brand mark sits in its own bounded tile so it can never clip the flag */
/* The mirror ships many marks as WHITE fills (drawn for its own dark
   theme). On a white tile they vanished. A dark tile makes both the white
   and the coloured marks legible, so every provider is visible. */
.m-brand{width:24px;height:24px;border-radius:4px;flex-shrink:0;display:grid;place-items:center;background:#fff;border:1px solid var(--stroke);overflow:hidden}
.m-brand img{width:16px;height:16px;object-fit:contain;display:block}
.m-brand .vendor-init{font-weight:500;font-size:10px;color:var(--txt-dim)}
.vendor-init{font-weight:500;font-size:11px;color:var(--txt-dim)}



/* ---------- rank chips ---------- */
.m-chips{display:flex;flex-direction:column;gap:3px;flex-shrink:0;align-items:flex-start;min-width:96px}
@media(max-width:820px){.m-chips{display:none}}
.rchip{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:9.5px;padding:1.5px 7px;border-radius:5px;
  background:var(--bg);border:1px solid var(--stroke);color:var(--txt-dim);
  white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis;
}
.rchip.rank{color:var(--txt);border-color:var(--stroke);background:none;font-weight:500}
.rchip.open{color:var(--green);border-color:rgba(5,150,105,.24);background:rgba(5,150,105,.06)}
.rchip.cn{color:var(--red);border-color:rgba(220,38,38,.2);background:rgba(220,38,38,.05)}
.rchip.none{color:var(--txt-faint);font-style:italic}
.rchip.score{color:var(--violet);border-color:rgba(124,58,237,.22);background:rgba(124,58,237,.05);font-weight:600}

/* ---------- provider row ---------- */
.prov-row{display:grid;grid-template-columns:minmax(140px,1.5fr) minmax(128px,1.1fr) minmax(110px,1fr) minmax(74px,.7fr) 44px;gap:12px;align-items:center;padding:12px 16px 12px 58px;border-bottom:1px solid var(--stroke);transition:background .12s}
.prov-row:last-child{border-bottom:none}
.prov-row:hover{background:var(--card-soft)}
.prov-row.is-pending{opacity:.58}
@media(max-width:1000px){.prov-row{grid-template-columns:minmax(120px,1.4fr) minmax(120px,1fr) minmax(70px,.7fr) 40px}.prov-row .hide-md{display:none}}
@media(max-width:640px){.prov-row{grid-template-columns:1.3fr 1fr;gap:9px;padding:12px 13px}.prov-row .hide-sm{display:none}}

.p-name{display:flex;align-items:center;gap:9px;min-width:0}
.p-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.p-txt{min-width:0}
.p-txt .n{font-size:13px;font-weight:450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-txt .s{font-size:11px;color:var(--txt-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plink{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;border-bottom:1px solid #ddd8d1;transition:color .12s,border-color .12s}
.plink:hover{color:var(--blue);border-bottom-color:var(--blue)}
.plink .ext{opacity:.45;flex-shrink:0}
.plink:hover .ext{opacity:1}

.p-cell{min-width:0}
.p-label{font-size:10px;color:var(--txt-faint);margin-bottom:2px;display:none}
@media(max-width:640px){.p-label{display:block}}
.p-val{font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.p-val.na{color:var(--txt-faint);font-weight:400}

/* ---------- price cell with hover tooltip ----------
   Fixes:
   1) The tip travels with the cursor into itself. Because .tip is a DOM
      child of .price, leaving the cell for the tip never fires mouseleave
      on the cell, so the tooltip stays open while the user reads it.
   2) The tip must sit above every sibling card. Ancestors that create a
      stacking context are lifted on hover, and the tip itself gets a very
      high z-index so it can never be painted under another .model. */
.tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);z-index:9000;width:300px;padding:14px 15px;border-radius:8px;background:#fff;border:1px solid var(--stroke-2);color:var(--txt);font-size:12px;line-height:1.6;box-shadow:0 10px 30px rgba(46,43,41,.10);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;text-align:left;white-space:normal;
  /* Long provider/peak tables used to run off the screen. Cap the panel and
     let the wheel scroll inside it; the page behind stays put because the
     wheel is contained. */
  max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* The 10px gap between the cell and the panel is a dead zone: crossing it
   fired mouseleave on the cell and closed the tip before the pointer could
   reach it. This transparent bridge keeps the hover chain intact. */
.tip::before{content:"";position:absolute;left:0;right:0;bottom:-12px;height:13px}
/* The tip flips pointer-events off while hidden, so its own bridge cannot
   catch the pointer crossing the gap. Extend the hover target itself: a
   transparent 13px strip above (tips open upward) and below (flipped tips)
   keeps :hover on the cell until the pointer is inside the panel. */
.price::before,.peak-cell::before,.cost-cell::before,
.price::after,.peak-cell::after,.cost-cell::after{
  content:"";position:absolute;left:0;right:0;height:13px}
.price::before,.peak-cell::before,.cost-cell::before{bottom:100%}
.price::after,.peak-cell::after,.cost-cell::after{top:100%}
/* A price cell near the top of the viewport would push the tip above the
   document and under the browser chrome. JS adds .below in that case. */
.tip.below{top:calc(100% + 9px);bottom:auto;transform:translateX(-50%) translateY(-4px)}
.tip.below::before{top:-12px;bottom:auto}
.tip h6{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:8px;font-weight:500}
.tip table{width:100%;border-collapse:collapse;font-size:11.5px}
.tip td{padding:2.5px 0;vertical-align:top}
.tip td:last-child{text-align:right;white-space:nowrap}
.tip .k{color:var(--txt-faint)}
.tip .src{margin-top:9px;padding-top:8px;border-top:1px solid var(--stroke);color:var(--txt-faint);font-size:10.5px;line-height:1.5}
.tip .warnline{color:var(--amber)}

/* any element hosting a tip becomes a positioned, attachable anchor */
.price,.peak-cell{position:relative;cursor:help}
.price .io{display:flex;align-items:baseline;gap:4px;font-size:13px;color:var(--txt);padding-left:12px}
.price .io .arw{color:#b8b2aa;font-size:11px}
.price .io b{font-weight:450;font-variant-numeric:tabular-nums}
.price .io .in,.price .io .out{color:var(--txt)}
.price .unit{font-size:11px;color:var(--txt-faint);margin-top:3px;padding-left:12px}

/* show on hover, and keep showing while the pointer is inside the tip
   itself (the third selector). pointer-events flips on so the tip is
   hoverable, but only once it is visible. */
.price:hover .tip,
.peak-cell:hover .tip,
.tip:hover{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* lift ancestors so the tip is never clipped by, or painted under,
   a neighbouring card (the accordion body clips via overflow:hidden) */
.model:hover,.model:focus-within{position:relative;z-index:40}
.model.open:hover,.model.open:focus-within{z-index:45}
.prov-row:hover{position:relative;z-index:50}
.prov-row:hover .p-cell{position:relative;z-index:60}
@media(max-width:1000px){.prov-row{padding-bottom:15px}}

/* peak/off-peak badge */
.price-cell{display:flex;align-items:center;gap:12px;min-width:0}
.price-cell .price{flex:0 0 auto}
.peak-slot{display:none}
.peak-cell{display:flex;align-items:center;justify-content:flex-end;cursor:help;position:relative}
.peak-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:0;border:none;border-radius:0;white-space:nowrap;background:none}
.peak-badge.peak{color:var(--amber)}
.peak-badge.off{color:var(--green)}
.peak-badge.none{color:var(--txt-faint)}

/* compact "peak / off-peak" marker next to model and provider names.
   A real border, unlike the price-column badge: the user asked for a
   small boxed word, and it has to read at 10px on a busy row. */
.peak-tag{display:inline-flex;align-items:center;margin-left:6px;padding:0 4px;
  border:1px solid var(--stroke-2);border-radius:3px;background:var(--card);
  font-size:10px;line-height:14px;color:var(--amber);vertical-align:1px;
  white-space:nowrap;cursor:help;font-weight:400;letter-spacing:.02em}
.peak-tag.plan{color:var(--txt-faint)}

.time-cell{font-family:var(--mono);font-size:10.5px;color:var(--txt-dim);line-height:1.45}
.time-cell .tz{color:var(--txt-faint);font-size:9px}
.time-cell .rel{color:var(--txt-faint);font-size:9px;display:block}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl thead th{text-align:left;padding:10px 14px;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-faint);font-weight:600;border-bottom:1px solid var(--stroke);white-space:nowrap}
.tbl th.num,.tbl td.num{text-align:right;font-family:var(--mono)}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid #f1f4f9}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--card-soft)}
.rank-n{font-family:var(--mono);font-size:10.5px;color:var(--txt-faint);width:22px;display:inline-block}
.rank-n.top{color:var(--blue);font-weight:700}
.cbar{height:4px;border-radius:2px;background:#efeae4;overflow:hidden;min-width:60px}
.cbar > i{display:block;height:100%;border-radius:2px;background:var(--txt)}

.empty{padding:46px 22px;text-align:center;color:var(--txt-faint);font-size:12.5px;line-height:1.75}
.empty svg{opacity:.32;margin-bottom:11px}
.empty b{color:var(--txt-dim)}
.empty code{font-family:var(--mono);font-size:11px;background:var(--bg);padding:2px 6px;border-radius:5px;border:1px solid var(--stroke);color:var(--txt-dim)}

.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px;padding:15px}
.st{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;background:var(--card-soft);border:1px solid var(--stroke)}
.st-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.st-name{font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-val{font-family:var(--mono);font-size:10px;white-space:nowrap}

.foot{margin-top:36px;padding-top:18px;border-top:1px solid var(--stroke);font-size:11.5px;color:var(--txt-dim);line-height:1.85}
.foot code{font-family:var(--mono);font-size:10.5px;background:var(--bg);padding:2px 6px;border-radius:5px;border:1px solid var(--stroke);color:var(--txt-dim)}
.notice{margin-top:14px;padding:13px 15px;border-radius:11px;background:rgba(217,119,6,.05);border:1px solid rgba(217,119,6,.2);font-size:11.5px;color:#7c5a1a;line-height:1.75}
.notice b{color:var(--amber)}
.notice code{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.2);color:#7c5a1a}



.seg-wrap{flex-wrap:wrap}
.mauthor{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;border-bottom:1px solid #ddd8d1;transition:color .12s,border-color .12s}
.mauthor:hover{color:var(--blue);border-bottom-color:var(--blue)}
.mauthor .ext{opacity:.45}
.mauthor:hover .ext{opacity:1}
.m-sub .lic{margin-left:7px;font-size:9px;padding:1px 5px;border-radius:4px;background:var(--bg);border:1px solid var(--stroke);color:var(--txt-faint);text-transform:uppercase}
.prov-head{padding:12px 16px 6px 58px;font-size:11px;letter-spacing:.02em;color:var(--txt-faint);font-weight:500;display:flex;align-items:center;gap:7px;border-top:1px solid var(--stroke)}
.prov-head:first-child{border-top:none}


/* ---------- usage leaderboard ---------- */
.usage-fresh{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.usage-tbl td{vertical-align:middle}
.usage-vendor{font-size:12px;color:var(--txt-dim)}
.usage-tok{font-weight:600}
.wow-up{color:var(--green);font-family:var(--mono);font-size:11.5px}
.wow-down{color:var(--red);font-family:var(--mono);font-size:11.5px}

.wow-none{color:var(--txt-faint);font-family:var(--mono);font-size:11.5px}
/* usage rows reuse the model card, but carry three numeric columns */
.model-head .m-score.hide-lg{display:flex}
@media(max-width:1100px){.model-head .m-score.hide-lg{display:none}}
.share-cell{display:flex;align-items:center;flex-shrink:0}
.wow-new{color:var(--violet);font-family:var(--mono);font-size:11.5px}
.share-cell{display:none}
.share-bar{display:none}
.share-bar > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.share-cell span{font-family:var(--mono);font-size:11px;color:var(--txt-dim);min-width:42px;text-align:right}
.usage-foot{padding:11px 15px;font-size:10.5px;color:var(--txt-faint);border-top:1px solid var(--stroke);font-family:var(--mono)}

/* ---------- provider pricing table with header ---------- */
.ptable{margin:0}
/* Explicit, fixed column widths shared by the header and every data row.
   The previous fractional template let the first column stretch to fit a
   long provider name, which shifted all following columns out of line
   with the header. */
.pt-head,.pt-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px 76px 84px 84px 68px;
  gap:10px;align-items:center;padding:8px 16px 8px 58px;
}
.pt-head span,/* Applies to every span in a row, so any rule that needs different
   alignment inside a row must carry at least this specificity. */
.pt-row span{min-width:0;min-height:22px;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-sortable{cursor:pointer;user-select:none;transition:color .16s}
.pt-sortable:hover{color:var(--txt)}
.pt-sortable.on{color:var(--txt);font-weight:500}
.pt-head{background:transparent;border-bottom:1px solid var(--stroke-2);font-size:11px;letter-spacing:.01em;text-transform:none;color:var(--txt-faint);font-weight:400}
.pt-head em{display:block;font-style:normal;font-size:8.5px;color:var(--txt-faint);opacity:.8;letter-spacing:0;text-transform:none;margin-top:1px}
.pt-row{border-bottom:1px solid var(--stroke);transition:background .12s}
.pt-row:last-child{border-bottom:none}
.pt-row:hover{background:var(--card-soft)}
/* Single line only. Wrapping here made a row taller than the header,
   which pushed every following column out of alignment. Long names
   truncate instead of wrapping. */
/* First column: always left-aligned, and the icon slot keeps a fixed
   width whether or not a logo exists — otherwise rows with no logo started
   their text further left, which read as "misaligned". */
.pt-c0{display:flex;align-items:flex-start;justify-content:flex-start;gap:8px;min-width:0;flex-wrap:nowrap;overflow:hidden;text-align:left}
.pt-c0 > .pt-logo,.pt-c0 > .pt-logo-ph{width:18px;height:18px;flex:0 0 18px;margin-top:2px}
.pt-logo-ph{display:block;border-radius:4px;background:var(--card-soft)}
.pt-logo{width:16px;height:16px;border-radius:4px;flex-shrink:0;object-fit:contain}
/* Provider name block. All of it sits on one line, left-aligned:
   provider name, then the regional qualifier, then the payment marks
   inline to the right of the name. */
.pt-row .pt-nm{min-width:0;flex:1 1 auto;font-size:12.5px;font-weight:540;display:flex;flex-direction:row;align-items:center;gap:6px;overflow:hidden}
.pt-row .pt-nm > .plink{display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row .pt-nm > .plink{font-size:12.5px;font-weight:540}
/* Regional and plan qualifiers share one quiet chip; the plan chip above
   keeps the stronger border so the label still leads the eye. */
.pt-qual{flex-shrink:0;font-style:normal;font-size:10px;font-weight:400;color:var(--txt-faint);background:var(--bg);border:1px solid var(--stroke);border-radius:3px;padding:0 4px;line-height:1.5;white-space:nowrap}
/* Payment mark: the real brand symbol, inline to the right of the name.
   Monochrome marks draw in the current text colour so they stay legible
   on the light card; the few multi-colour marks (UnionPay) keep their
   own palette. */
.pt-row .pm{display:none}
.pt-row{min-height:44px;padding-top:7px;padding-bottom:7px}
/* Discount badge: a small bordered box, deliberately mixing a label in
   the UI font with the number in mono so it reads as a tag rather than a
   sentence. */
.pt-disc{flex-shrink:0;display:inline-flex;align-items:center;gap:4px;font-style:normal;padding:0;border:none;border-radius:0;background:none;white-space:nowrap;line-height:1.5}
.pt-disc-k{font-size:10px;color:var(--txt-faint);letter-spacing:0}
.pt-disc b{font-size:10.5px;font-weight:600;color:var(--amber)}
.pt-plan{flex-shrink:0;display:inline-flex;align-items:center;font-style:normal;padding:0 4px;border:1px solid var(--stroke-2);border-radius:3px;background:var(--card-soft);color:var(--txt-dim);font-size:9.5px;font-weight:500;letter-spacing:.03em;line-height:1.5;white-space:nowrap}
.pt-price{flex-shrink:0;font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--txt-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.pt-c{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--txt)}
.pt-c.pt-num{justify-content:flex-end}
.pt-head .pt-c{justify-content:flex-end}
.pt-head .pt-c0,.pt-row .pt-c0{justify-content:flex-start}
.pt-num{text-align:right;font-weight:400}
.pt-na{color:var(--txt-faint)}
.pt-dim{color:var(--txt-faint);font-size:11px}
.pt-dropped{display:inline-block;margin-left:8px;padding:0;border:none;background:none;color:var(--txt-faint);font-size:10.5px}
/* Price-cell qualifiers: a plan that only publishes a blended rate, and a
   provider that does not publish a cache-read rate at all. The footnote
   spells both out; the glyphs keep the number readable. */
.pt-blend{font-style:normal;font-size:9px;line-height:1;color:var(--amber);margin-left:2px;vertical-align:super}
.pt-perreq{font-style:normal;font-size:10.5px;color:var(--txt-faint);white-space:nowrap}
.pt-approx{color:var(--txt-dim)}
.pt-foot{padding:10px 17px;font-size:10.5px;color:var(--txt-faint);border-top:1px solid var(--stroke)}
@media(max-width:960px){
  .pt-head,.pt-row{grid-template-columns:minmax(120px,1.5fr) repeat(2,minmax(58px,.8fr)) minmax(54px,.7fr)}
  .pt-head .pt-wide,.pt-row .pt-wide{display:none}
}
@media(max-width:640px){
  .pt-head,.pt-row{grid-template-columns:minmax(100px,1.4fr) minmax(54px,.8fr) minmax(54px,.8fr);padding:8px 13px 8px 20px}
  .pt-head span:nth-child(4),.pt-row span:nth-child(4),
  .pt-head span:nth-child(5),.pt-row span:nth-child(5),
  .pt-head span:nth-child(6),.pt-row span:nth-child(6){display:none}
}

/* ---------- free board: quota-forward channel table ---------- */
.pt-free{flex-shrink:0;display:inline-flex;align-items:center;font-style:normal;padding:0 5px;border:1px solid rgba(5,150,105,.24);border-radius:3px;background:rgba(5,150,105,.07);color:#067a46;font-size:9.5px;font-weight:600;letter-spacing:.04em;line-height:1.6;white-space:nowrap}
.pt-free-q{font-size:10px;color:var(--txt-faint);margin-left:4px;white-space:nowrap}
.price .io .freeval{color:var(--green);font-weight:600;letter-spacing:.04em}
.price .io .freecount{color:var(--txt-faint);font-size:11px;margin-left:4px}
.model .m-sub .free-count{color:var(--green);font-weight:500}
.ptable.free .pt-head,.ptable.free .pt-row{grid-template-columns:minmax(0,1.35fr) minmax(128px,1fr) minmax(88px,.7fr) minmax(86px,.6fr)}
.ptable.free .pt-head .pt-c,.ptable.free .pt-row .pt-c{justify-content:flex-start}
.free-row .quota-cell{max-width:170px}
.free-row .quota-cell .v{white-space:normal;text-align:right;line-height:1.35;font-size:12px}
.free-row .price-cell{min-width:0;flex-wrap:wrap}
.free-row .pt-free-q{white-space:normal;overflow-wrap:anywhere}
.ptable.free .pt-quota{font-size:12px;color:var(--txt)}
.ptable.free .pt-quota.unknown{color:var(--txt-faint);font-size:11px}
.ptable.free .pt-src a{font-size:11px;color:var(--txt-faint)}
.ptable.free .pt-src a:hover{color:var(--txt)}
@media(max-width:960px){
  .ptable.free .pt-head,.ptable.free .pt-row{grid-template-columns:minmax(120px,1.4fr) minmax(120px,1fr)}
  .ptable.free .pt-wide,.ptable.free .pt-src{display:none}
}
@media(max-width:640px){
  .ptable.free .pt-head,.ptable.free .pt-row{grid-template-columns:minmax(100px,1.3fr) minmax(90px,1fr);padding:8px 13px 8px 20px}
  .ptable.free .pt-wide{display:none}
}


/* ---------- logo ticker ---------- */
.ticker{display:none!important}
.ticker-track{display:flex;align-items:center;gap:26px;white-space:nowrap;animation:tickmove 90s linear infinite;will-change:transform;padding-left:12px}
.ticker.paused .ticker-track{animation-play-state:paused}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick{display:flex;align-items:center;gap:7px;flex-shrink:0;cursor:default}
/* Marks are drawn on a white chip with no border. Several brands ship a
   dark tile as their mark (KlingAI, HiDream, Leonardo) and a few are dark
   glyphs on transparency (Z.ai, Recraft); on the page background both read
   as a black blob. The chip gives every mark the same light ground, and
   dropping the hairline border stops the row looking boxed-in. */
.tick-logo{width:24px;height:24px;border-radius:6px;background:#fff;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.tick-logo img{width:19px;height:19px;object-fit:contain}
.tick .tflag{width:14px;height:14px;border-radius:2px;object-fit:cover;flex-shrink:0}
.tick > span{font-size:11.5px;color:var(--txt-dim);white-space:nowrap}
.ticker-btn{flex-shrink:0;width:26px;height:26px;border-radius:7px;border:1px solid var(--stroke);background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--txt-dim);margin-right:14px}
.ticker-btn:hover{border-color:var(--stroke-2);color:var(--txt)}
@media(max-width:820px){.ticker{margin-top:52px}}

/* ---------- admin monitoring ---------- */
.ad-conv{color:var(--green);font-weight:600}
.ad-rev{color:var(--blue);font-weight:600}
#v-admin .kpi-val{font-size:22px}

/* ---------- business / sponsorship page ---------- */
.biz-lead{font-size:13.5px;line-height:1.85;color:var(--txt);padding:14px 16px;border-left:3px solid var(--blue);background:var(--card-soft);border-radius:0 10px 10px 0;margin-bottom:20px}
.biz-h{font-size:13.5px;font-weight:660;margin:20px 0 9px;color:var(--txt)}
.biz-h:first-of-type{margin-top:4px}
.biz-ul{list-style:none;padding:0;margin:0;font-size:12.5px;line-height:1.9;color:var(--txt-dim)}
.biz-ul li{position:relative;padding-left:16px;margin-bottom:3px}
.biz-ul li::before{content:"—";position:absolute;left:0;color:var(--txt-faint)}
.biz-warn{margin:16px 0;padding:12px 15px;border-radius:10px;background:rgba(217,119,6,.06);border:1px solid rgba(217,119,6,.22);font-size:12px;line-height:1.75;color:#7c5a1a}
.biz-warn b{color:var(--amber)}
.biz-contact{margin-top:8px;padding:15px 17px;border-radius:11px;background:var(--card-soft);border:1px solid var(--stroke)}
.fb-item{padding:13px 15px;border-bottom:1px solid var(--stroke)}
.fb-item:last-child{border-bottom:none}
.fb-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fb-mail{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--blue);word-break:break-all}
.fb-who{font-size:11.5px;color:var(--txt-dim)}
.fb-time{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--txt-faint);white-space:nowrap}
.fb-mail-state{font-size:10px;padding:2px 7px;border-radius:6px;background:rgba(217,119,6,.1);color:#7c5a1a;white-space:nowrap}
.fb-mail-state.ok{background:rgba(5,150,105,.1);color:#065f46}
.fb-msg{margin-top:7px;font-size:12.5px;line-height:1.75;color:var(--txt);white-space:pre-wrap;word-break:break-word}
.biz-mail{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14px;font-weight:600;color:var(--blue)}
.biz-mail a{color:inherit;text-decoration:none;border-bottom:1px solid #ddd8d1}
.biz-mail a:hover{color:var(--txt);border-bottom-color:var(--txt)}
.biz-note{margin-top:9px;font-size:11.5px;color:var(--txt-faint);line-height:1.7}
.fb-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.fb-2{grid-template-columns:1fr}}


.field select,.field textarea{width:100%;padding:9px 11px;border-radius:4px;border:1px solid var(--stroke-2);background:#fff;font-family:var(--sans);font-size:13px;color:var(--txt)}
.field textarea{resize:vertical;min-height:96px;line-height:1.6}
.field select:focus,.field textarea:focus{outline:none;border-color:var(--txt);box-shadow:none}

/* ---- Partnership enquiry: paper-soft, hairline fields ---------------- */
.fb-card{padding:28px 28px 24px;max-width:820px;margin-top:14px}
.fb-head{border-bottom:1px solid var(--stroke);padding-bottom:16px;margin-bottom:22px}
.fb-eyebrow{display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:9px}
.fb-title{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin:0 0 7px;color:var(--txt)}
.fb-sub{margin:0;font-size:12.5px;line-height:1.75;color:var(--txt-faint);max-width:62ch}
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.fb-field{display:flex;flex-direction:column;min-width:0}
.fb-field label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-faint);margin-bottom:6px}
.fb-field input,.fb-field select{width:100%;height:38px;padding:0;border:0;border-bottom:1px solid var(--stroke-2);border-radius:0;background:transparent;font-family:var(--sans);font-size:13.5px;color:var(--txt);transition:border-color .16s}
.fb-field input::placeholder,.fb-field textarea::placeholder{color:#b7b1a9}
.fb-field input:hover,.fb-field select:hover{border-bottom-color:var(--txt-faint)}
.fb-field input:focus,.fb-field select:focus{outline:none;border-bottom-color:var(--txt);box-shadow:none}
.fb-select{position:relative}
.fb-select select{appearance:none;-webkit-appearance:none;padding-right:22px;cursor:pointer}
.fb-select::after{content:"";position:absolute;right:2px;bottom:13px;width:7px;height:7px;border-right:1.5px solid var(--txt-faint);border-bottom:1.5px solid var(--txt-faint);transform:rotate(45deg);pointer-events:none}
.fb-message{margin-top:22px}
.fb-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.fb-labelrow label{margin:0}
.fb-count{font-size:10.5px;color:var(--txt-faint);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.fb-field textarea{width:100%;min-height:120px;padding:14px 15px;border:1px solid var(--stroke);border-radius:12px;background:var(--card-soft);font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--txt);resize:vertical;transition:border-color .16s,background .16s}
.fb-field textarea:hover{border-color:var(--stroke-2)}
.fb-field textarea:focus{outline:none;border-color:var(--stroke-2);background:#fff}
.fb-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}
.fb-privacy{margin:0;font-size:11px;line-height:1.6;color:var(--txt-faint);max-width:46ch}
.fb-submit{flex:0 0 auto;min-width:116px;padding:11px 26px;border:0;border-radius:999px;background:var(--txt);color:#fffdfa;font-family:var(--sans);font-size:13px;font-weight:560;letter-spacing:.01em;cursor:pointer;transition:background .16s,transform .12s,opacity .16s}
.fb-submit:hover{background:#413d39}
.fb-submit:active{transform:translateY(1px)}
.fb-submit:disabled{opacity:.55;cursor:default;transform:none}
@media (max-width:640px){
  .fb-card{padding:22px 18px 20px}
  .fb-grid{grid-template-columns:1fr;gap:18px}
  .fb-actions{flex-direction:column-reverse;align-items:stretch;gap:14px}
  .fb-submit{width:100%}
}

/* ---- Custom select: one visual language for every dropdown ---------- */
.psel{position:relative;display:block;min-width:0}
.psel > select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.psel-btn{width:100%;height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border:1px solid var(--stroke-2);border-radius:8px;background:var(--card);font-family:var(--sans);font-size:13px;color:var(--txt);text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.psel-btn:hover{border-color:var(--txt-faint)}
.psel-btn:focus-visible{outline:none;border-color:var(--txt);box-shadow:0 0 0 3px rgba(46,43,41,.06)}
.psel-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.psel-caret{flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid var(--txt-faint);border-bottom:1.5px solid var(--txt-faint);transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.psel.open .psel-caret{transform:rotate(225deg) translateY(-2px)}
.psel-menu{position:absolute;z-index:80;left:0;right:0;top:calc(100% + 6px);padding:5px;background:var(--card);border:1px solid var(--stroke-2);border-radius:10px;box-shadow:0 20px 44px -28px rgba(35,30,25,.42),0 1px 3px rgba(35,30,25,.05);max-height:262px;overflow:auto;display:none}
.psel.open .psel-menu{display:block;animation:pselIn .14s cubic-bezier(.2,.8,.2,1)}
@keyframes pselIn{from{transform:translateY(-3px)}to{transform:none}}
.psel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:7px;font-size:13px;line-height:1.4;color:var(--txt-dim);cursor:pointer;user-select:none}
.psel-opt:hover,.psel-opt.focus{background:var(--card-soft);color:var(--txt)}
.psel-opt[aria-selected="true"]{color:var(--txt);font-weight:560}
.psel-opt[aria-selected="true"]::after{content:"";flex:0 0 auto;width:9px;height:5px;border-left:1.6px solid var(--txt);border-bottom:1.6px solid var(--txt);transform:rotate(-45deg);margin-right:2px}
/* underline variant, used by the enquiry form */
.psel-line .psel-btn{height:38px;padding:0 22px 0 0;border:0;border-bottom:1px solid var(--stroke-2);border-radius:0;background:transparent}
.psel-line .psel-btn:hover{border-bottom-color:var(--txt-faint)}
.psel-line .psel-btn:focus-visible{border-bottom-color:var(--txt);box-shadow:none}
.psel-line .psel-caret{position:absolute;right:2px;top:15px}
.psel-line .psel-menu{right:auto;min-width:220px}
/* compact variant, used by the token-meter key editor */
.psel-compact .psel-btn{height:26px;padding:0 8px;border-radius:6px;font-size:11px}
.psel-compact .psel-menu{min-width:158px;padding:4px}
.psel-compact .psel-opt{padding:6px 8px;font-size:12px;border-radius:5px}


/* ---------- auth modal ---------- */
.modal-bg{position:fixed;inset:0;z-index:200;background:rgba(24,21,18,.46);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex;animation:fade .18s ease}
.modal{width:100%;max-width:432px;background:var(--card);border-radius:16px;box-shadow:0 30px 80px -30px rgba(35,30,25,.5),0 2px 8px rgba(35,30,25,.06);border:1px solid var(--stroke-2);position:relative;animation:rise .22s cubic-bezier(.2,.8,.2,1);max-height:92vh;overflow-y:auto;overflow-x:hidden}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.auth-head{display:flex;align-items:center;gap:12px;padding:18px 22px 16px;border-bottom:1px solid var(--stroke)}
.auth-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.auth-mark{width:38px;height:38px;border-radius:10px;flex:0 0 38px;background:#fff;border:1px solid var(--stroke-2);position:relative;overflow:hidden;display:grid;place-items:center}
.auth-mark::after{content:"";position:absolute;width:19px;height:2px;background:var(--txt);transform:rotate(-45deg);border-radius:2px}
.auth-word{display:flex;flex-direction:column;line-height:1;min-width:0}
.auth-word-main{display:flex;align-items:baseline;gap:4px;font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:-.35px;white-space:nowrap}
.auth-word-main .dim{color:var(--txt-faint)}
.auth-word-sub{font-family:var(--sans);font-size:8px;font-weight:600;letter-spacing:.24em;color:var(--txt-faint);margin-top:5px}
.auth-intro{padding:24px 24px 0}
.modal-title{font-family:var(--display);font-size:30px;font-weight:400;letter-spacing:-.7px;line-height:1.15;color:var(--txt)}
.modal-desc{font-size:12.5px;color:var(--txt-faint);margin-top:7px;line-height:1.6}
.modal-body{padding:20px 24px 24px}
.modal-close{position:absolute;top:14px;right:14px;z-index:2;width:28px;height:28px;border:none;background:transparent;cursor:pointer;color:var(--txt-faint);font-size:19px;line-height:1;border-radius:8px;display:grid;place-items:center;transition:background .12s,color .12s}
.modal-close:hover{background:var(--bg);color:var(--txt)}
.modal .tabs{display:flex;gap:0;background:none;padding:0;border-radius:0;margin:0 0 20px;border-bottom:1px solid var(--stroke)}
.modal .tab{flex:1;padding:0 0 11px;border:none;background:transparent;border-radius:0;font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--txt-faint);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.modal .tab:hover{color:var(--txt-dim)}
.modal .tab.active{background:none;color:var(--txt);border:none;border-bottom:2px solid var(--txt);box-shadow:none}
.modal .lmode{display:inline-flex;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--stroke);border-radius:9px;margin:0 0 18px;font-size:12px}
.modal .lmode .lm{padding:6px 12px;border:1px solid transparent;background:transparent;cursor:pointer;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--txt-faint);border-radius:6px;transition:background .15s,color .15s,border-color .15s}
.modal .lmode .lm:hover{color:var(--txt)}
.modal .lmode .lm.on{background:#fff;color:var(--txt);border-color:var(--stroke);box-shadow:0 1px 2px rgba(46,43,41,.07)}
.modal .field{margin-bottom:14px}
.modal .field label{display:block;font-size:11px;color:var(--txt-dim);margin-bottom:7px;font-weight:500;letter-spacing:.01em}
.modal .field input{width:100%;height:44px;padding:0 12px;border-radius:9px;border:1px solid var(--stroke-2);background:#fff;font-family:var(--sans);font-size:13.5px;color:var(--txt);transition:border-color .15s,box-shadow .15s}
.modal .field input::placeholder{color:#aaa49c}
.modal .field input:focus{outline:none;border-color:var(--txt);box-shadow:0 0 0 3px rgba(46,43,41,.07)}
.auth-input{position:relative}
.auth-input .auth-ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--txt-faint);pointer-events:none}
.modal .auth-input input{padding-left:37px}
.modal .field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.modal .field-head label{margin-bottom:0}
.btn-send{padding:0;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--txt);text-decoration:underline;text-decoration-color:var(--stroke-2);text-underline-offset:3px;white-space:nowrap}
.btn-send:hover:not(:disabled){text-decoration-color:var(--txt)}
.btn-send:disabled{color:var(--txt-faint);cursor:default;text-decoration:none}
.otp-field{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:7px;border-radius:9px}
.otp-input{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:0;border:0;background:transparent;font-size:16px;cursor:text}
.otp-cell{height:46px;border:1px solid var(--stroke-2);border-radius:9px;background:#fff;display:grid;place-items:center;font-family:var(--code);font-size:19px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s,background .15s;position:relative}
.otp-cell.is-filled{background:var(--card-soft)}
.otp-cell.is-active{border-color:var(--txt);box-shadow:0 0 0 3px rgba(46,43,41,.07)}
.otp-cell.is-active::after{content:"";position:absolute;width:1.5px;height:18px;background:var(--txt);border-radius:1px;animation:otp-caret 1.1s steps(1,end) infinite}
@keyframes otp-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.modal .pw-hint{font-size:11px;color:var(--txt-faint);margin-top:7px;line-height:1.6}
.modal .btn-forgot{display:block;margin:11px 0 0;padding:0;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:11.5px;color:var(--txt-faint);text-align:left;text-decoration:none;transition:color .12s}
.modal .btn-forgot:hover{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.btn-primary{width:100%;padding:11px;border-radius:4px;border:none;background:#252523;color:#fff;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:500;margin-top:5px}
.btn-primary:hover{background:#3a3734}
.modal .auth-submit{height:46px;padding:0 16px;border-radius:9px;background:var(--txt);font-size:13.5px;letter-spacing:.01em;margin-top:8px;box-shadow:0 1px 2px rgba(46,43,41,.18);transition:background .15s,transform .1s,box-shadow .15s}
.modal .auth-submit:hover{background:#3a3734}
.modal .auth-submit:active{transform:translateY(1px);box-shadow:none}
.modal-note{margin-top:13px;padding:10px 12px;border-radius:9px;background:var(--bg);border:1px solid var(--stroke);font-size:11px;color:var(--txt-dim);line-height:1.65}
.modal-note.err{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.2);color:#991b1b}
.modal-note.good{background:rgba(5,150,105,.05);border-color:rgba(5,150,105,.2);color:#065f46}
.modal .modal-note:not(.err):not(.good){margin-top:15px;padding:0;border:none;background:none;font-size:11.5px;color:var(--txt-faint);text-align:center}
.modal .modal-note.err,.modal .modal-note.good{margin-top:14px;padding:9px 11px;border-radius:8px;font-size:11.5px;text-align:left}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--stroke);font-size:10.5px;color:var(--txt-faint);line-height:1.5;text-align:center}
.auth-foot svg{width:11px;height:11px;flex:0 0 11px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auth-foot .sep{color:var(--stroke-2)}
@media (max-width:520px){
  .modal{border-radius:14px}
  .auth-head{padding:16px 18px 14px}
  .auth-intro{padding:20px 18px 0}
  .modal-body{padding:18px 18px 20px}
  .modal-title{font-size:26px}
  .otp-field{gap:6px}
  .otp-cell{height:44px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .modal{animation:none}
  .otp-cell.is-active::after{animation:none}
}
/* Placeholders on the account page carry no text until an action runs. */
#accPrefsNote:empty,#accDelNote:empty{display:none}
/* First-paint placeholder: the data feeds land a few hundred ms after the
   shell, and an empty column reads as "broken" on a slow link. */
.skel-row{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--stroke)}
.skel-row:last-child{border-bottom:none}
.skel-dot{width:26px;height:26px;border-radius:8px;flex:0 0 26px}
.skel-bar{height:10px;border-radius:4px;background:#f1ece7}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel-bar{animation:none}}
.spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-1px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- arena (竞技场) ---------- */
.arena-head{margin-bottom:16px}
.arena-shuffle{display:inline-flex;align-items:center;gap:8px;padding:0 14px;height:36px;border-radius:4px;border:1px solid var(--stroke-2);background:var(--card);font-family:var(--sans);font-size:13px;font-weight:500;color:var(--txt);cursor:pointer;transition:background .12s,border-color .12s}
.arena-shuffle:hover{background:var(--card-soft);border-color:var(--txt-faint)}
.arena-shuffle:active{transform:translateY(1px)}
.arena-shuffle svg{transition:transform .45s cubic-bezier(.3,1.3,.4,1)}
.arena-shuffle:hover svg{transform:rotate(180deg)}

.arena-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 0 16px;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x proximity}
.arena-cats::-webkit-scrollbar{display:none}
.ar-cat{display:inline-flex;align-items:center;gap:7px;padding:0 13px;height:36px;border-radius:4px;border:none;background:transparent;font-family:var(--sans);font-size:14px;color:var(--txt-faint);cursor:pointer;white-space:nowrap;scroll-snap-align:start;transition:background .12s,color .12s}
.ar-cat:hover{color:var(--txt)}
.ar-cat.on{background:#f0ebe5;color:var(--txt);font-weight:500}
.ar-cat .n{font-size:11px;line-height:1;padding:0;border-radius:0;background:none;border:none;color:var(--txt-faint);transition:none}
.ar-cat.on .n{background:none;border-color:transparent;color:var(--txt-faint)}

/* podium: the three leaders are cards, not rows */
.arena-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;margin-bottom:22px}
.pod{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:22px 20px 18px;border-radius:10px;border:1px solid var(--stroke);background:var(--card);font-family:var(--sans);color:var(--txt);cursor:pointer;overflow:hidden;transition:border-color .16s,transform .2s cubic-bezier(.2,.9,.2,1);animation:podIn .5s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--d,0ms)}
.pod:hover{border-color:var(--txt);transform:translateY(-3px)}
.pod:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.pod-1{order:2;min-height:264px;padding-top:26px;border-color:var(--txt)}
.pod-2{order:1;min-height:232px}
.pod-3{order:3;min-height:232px}
/* a ghost numeral gives each card weight without a colour block */
.pod-ghost{position:absolute;right:8px;top:-8px;font-family:var(--display);font-size:92px;line-height:1;letter-spacing:-.07em;color:rgba(46,43,41,.05);pointer-events:none;user-select:none;font-variant-numeric:tabular-nums}
.pod-1 .pod-ghost{font-size:114px;top:-14px;color:rgba(46,43,41,.075)}
.pod-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.pod-rank{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--txt-faint)}
.pod-1 .pod-rank{color:var(--txt)}
.pod-tag{font-family:var(--sans);font-size:8px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--txt);padding:2px 7px;border-radius:3px}
.pod-av{position:relative;margin:14px 0 9px;width:42px;height:42px;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid var(--stroke)}
.pod-1 .pod-av{width:50px;height:50px}
.pod-av .ar-logo{width:100%;height:100%;background:none;border-radius:inherit;font-size:12px}
.pod-av .ar-logo img,.pod-av .ar-logo svg{width:26px;height:26px}
.pod-1 .pod-av .ar-logo img,.pod-1 .pod-av .ar-logo svg{width:32px;height:32px}
.pod-name{position:relative;font-family:var(--display);font-size:17px;font-weight:400;line-height:1.24;letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px}
.pod-1 .pod-name{font-size:19px}
.pod-vend{margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--txt-faint);letter-spacing:.02em;position:relative}
.pod-score{position:relative;margin-top:auto;padding-top:14px;font-size:30px;font-weight:400;letter-spacing:-.045em;line-height:1;color:var(--txt);font-variant-numeric:tabular-nums}
.pod-1 .pod-score{font-size:40px}
.pod-ci{font-size:11px;font-weight:400;color:var(--txt-faint);letter-spacing:0;margin-left:4px}
.pod-meta{position:relative;margin-top:6px;font-size:9.5px;color:var(--txt-faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pod-bar{position:relative;width:100%;height:3px;border-radius:0;background:#efeae4;margin-top:12px;overflow:hidden}
.pod-bar i{display:block;height:100%;background:var(--txt);transform-origin:left;animation:podBar .9s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(var(--d,0ms) + 180ms)}
.pod-2 .pod-bar i{background:#b8b2aa}
.pod-3 .pod-bar i{background:#cfc9c2}
@keyframes podIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes podBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* two columns: ranked bars + live duel */
.arena-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(330px,.9fr);gap:16px;align-items:start}
.panel{background:var(--card);border:1px solid var(--stroke);border-radius:10px;overflow:hidden}
.panel-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--stroke)}
.panel-title{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:16px;font-weight:400;letter-spacing:-.2px}
.pt-dot{width:5px;height:5px;border-radius:50%;background:var(--txt-faint)}
.duel-panel .pt-dot{background:var(--amber)}
.panel-note{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--txt-faint)}
.panel-mini{padding:4px 10px;height:26px;border-radius:3px;border:1px solid var(--stroke-2);background:var(--card);font-family:var(--sans);font-size:11.5px;color:var(--txt-dim);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.panel-mini:hover{background:var(--card-soft);border-color:var(--txt-faint);color:var(--txt)}

.arena-bars{display:flex;flex-direction:column;padding:6px 8px 8px}
.ab-row{display:grid;grid-template-columns:24px 28px minmax(120px,215px) minmax(90px,1fr) 56px;align-items:center;gap:10px;padding:8px 10px;border:none;border-radius:5px;background:none;width:100%;text-align:left;font-family:var(--sans);color:inherit;cursor:pointer;transition:background .12s;animation:abIn .45s cubic-bezier(.2,.9,.2,1) both;animation-delay:var(--d,0ms)}
.ab-row:hover{background:var(--card-soft)}
.ab-row:focus-visible{outline:2px solid var(--txt);outline-offset:-2px}
.ab-rank{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--txt-faint);text-align:right;font-variant-numeric:tabular-nums}
.ab-av{display:block;width:26px;height:26px}
.ab-av .ar-logo{width:26px;height:26px;border-radius:6px}
.ab-av .ar-logo img,.ab-av .ar-logo svg{width:18px;height:18px}
.ab-main{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ab-name{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-vend{font-size:9.5px;color:var(--txt-faint);font-family:var(--mono);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-track{height:7px;border-radius:0;background:#efeae4;overflow:hidden}
.ab-track i{display:block;height:100%;width:0;background:var(--txt);transition:width .75s cubic-bezier(.2,.9,.2,1)}
.ab-row.in .ab-track i{width:var(--w)}
.ab-val{font-family:var(--mono);font-size:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-more{display:inline-flex;align-items:center;justify-content:center;gap:7px;align-self:center;margin:7px 0 4px;padding:6px 16px;border-radius:999px;border:1px solid var(--stroke);background:var(--card);font-family:var(--sans);font-size:11.5px;color:var(--txt-dim);cursor:pointer;transition:border-color .12s,color .12s}
.ab-more:hover{border-color:var(--txt-faint);color:var(--txt)}
.ab-more svg{transition:transform .2s}
.ab-more.up svg{transform:rotate(180deg)}
@keyframes abIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* duel */
.duel-stage{display:flex;align-items:stretch;gap:8px;padding:16px 16px 8px;background:transparent}
.duel-side{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;padding:6px;border:none;border-radius:6px;background:none;font-family:var(--sans);color:inherit;cursor:pointer;transition:background .12s}
.duel-side:hover{background:var(--card-soft)}
.duel-side:focus-visible{outline:2px solid var(--txt);outline-offset:-2px}
.duel-av{display:block}
.duel-av .ar-logo{width:40px;height:40px;border-radius:8px;font-size:12px}
.duel-av .ar-logo img,.duel-av .ar-logo svg{width:30px;height:30px}
.duel-nm{margin-top:8px;font-family:var(--display);font-size:13.5px;font-weight:400;line-height:1.26;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.duel-sub{margin-top:3px;font-size:9.5px;color:var(--txt-faint);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.duel-hint{margin-top:7px;font-size:9px;color:var(--txt-faint);letter-spacing:.02em;opacity:0;transition:opacity .12s}
.duel-side:hover .duel-hint{opacity:1}
.duel-hint b{font-size:11px}
.duel-vs{align-self:center;display:grid;place-items:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--txt);color:#fff;font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.04em}
.duel-metrics{display:flex;flex-direction:column;gap:11px;padding:8px 16px 14px}
.dm{min-width:0}
.dm-top{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.dm-v{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34%;font-variant-numeric:tabular-nums}
.dm-v.r{margin-left:auto;text-align:right}
.dm-label{flex:1;text-align:center;font-size:9.5px;letter-spacing:.03em;color:var(--txt-faint);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-track{display:flex;gap:2px;height:7px;border-radius:0;overflow:hidden;background:#efeae4}
.dm-track span{display:block;height:100%;transition:width .7s cubic-bezier(.2,.9,.2,1)}
.dm-left{background:var(--txt)}
.dm-right{background:#b99a63}
.duel-score{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--stroke);background:transparent}
.ds-verdict{font-size:11px;color:var(--txt-dim);line-height:1.4;min-width:0}
.ds-num{font-family:var(--sans);font-size:18px;font-weight:500;letter-spacing:-.3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ds-num small{color:var(--txt-faint);font-size:12px;margin:0 2px}
.duel-in .dm-track span{animation:dmGrow .6s cubic-bezier(.2,.9,.2,1) both}
@keyframes dmGrow{from{transform:scaleX(.3);transform-origin:left}to{transform:none}}
.panel-foot{padding:10px 16px;border-top:1px solid var(--stroke);font-size:10px;line-height:1.7;color:var(--txt-faint);font-family:var(--mono)}
.panel-foot:empty{display:none}
.ar-empty{padding:30px 16px;text-align:center;font-size:12.5px;color:var(--txt-faint)}

/* trend chart
   The history of each board, drawn the way the source chart draws it: a
   thirty-day window crosses three months of daily points at a constant
   speed, every line is fed by an exponentially smoothed value so it never
   jerks, the mark of whoever leads rides the right edge on a hairline
   leader, and a change of leader throws a small burst of particles. The
   series palette and marks are copied from that chart on purpose. */
.trend-panel{margin:0 0 16px}
.trend-panel[hidden]{display:none}
.trend-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 18px;padding:14px 16px 8px}
.trend-title{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:16px;font-weight:400;line-height:1.3;letter-spacing:-.2px;color:var(--txt)}
.trend-caption{margin-top:4px;font-family:var(--mono);font-size:10px;line-height:1.65;color:var(--txt-faint)}
.trend-boards{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;padding-left:8px}
.trend-bd{height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--stroke-2);background:transparent;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--txt-faint);cursor:pointer;transition:color .15s,border-color .15s,background .15s;white-space:nowrap}
.trend-bd:hover{color:var(--txt);border-color:var(--txt-faint)}
.trend-bd.on{color:var(--txt);border-color:var(--txt);background:var(--card-soft)}
.trend-tabs{display:flex;flex-wrap:wrap;gap:2px 22px;padding:2px 16px 0}
.trend-tab{position:relative;padding:4px 0 11px;border:none;background:none;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--txt-faint);cursor:pointer;transition:color .15s}
.trend-tab:hover,.trend-tab.active{color:var(--txt)}
.trend-prog{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:var(--stroke);overflow:hidden}
.trend-prog i{display:block;height:100%;width:0;border-radius:999px;background:var(--txt)}
.trend-stage{position:relative;height:380px;margin:0 6px;cursor:crosshair;touch-action:pan-y}
.trend-stage.fade{animation:trendFade .35s ease-in-out}
@keyframes trendFade{from{opacity:0}to{opacity:1}}
.trend-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.trend-chips{position:absolute;inset:0;pointer-events:none}
.trend-chip{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:22px;min-width:22px;padding:0 3px;border:1px solid transparent;border-radius:999px;background:var(--card);opacity:0;will-change:transform;pointer-events:auto;cursor:pointer;transition:border-color .12s}
.trend-chip.has-name{padding:0 8px 0 3px}
.trend-chip:focus-visible{outline:2px solid var(--txt);outline-offset:1px}
.trend-chip .tc-in{display:flex;align-items:center;gap:6px;animation:trendRoll .4s cubic-bezier(.2,0,0,1)}
.trend-chip .tc-n{font-family:var(--sans);font-size:11px;line-height:1;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-chip .ar-logo{width:16px;height:16px;border-radius:0;background:none;flex:0 0 16px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:8px;color:var(--txt-faint);overflow:hidden}
.trend-chip .ar-logo img,.trend-chip .ar-logo svg{width:16px;height:16px;object-fit:contain}
.trend-emoji{font-size:15px;line-height:1}
@keyframes trendRoll{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.trend-tip{position:absolute;left:0;top:0;z-index:3;padding:8px 11px 9px;border-radius:8px;border:1px solid var(--stroke-2);background:var(--card);box-shadow:0 6px 20px rgba(46,43,41,.1);opacity:0;pointer-events:none;will-change:transform;transition:opacity .12s}
.trend-tip-date{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;color:var(--txt-dim);white-space:nowrap}
.trend-tip ul{list-style:none;display:grid;gap:4px;margin:0;padding:0}
.trend-tip li{display:grid;grid-template-columns:auto auto auto auto;align-items:center;column-gap:7px;white-space:nowrap}
.trend-tip .tt-dot{width:6px;height:6px;border-radius:50%}
.trend-tip .tt-glyph{display:flex;align-items:center}
.trend-tip .tt-glyph .ar-logo{width:16px;height:16px;border-radius:0;background:none;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--txt-faint)}
.trend-tip .tt-glyph .ar-logo img,.trend-tip .tt-glyph .ar-logo svg{width:16px;height:16px}
.trend-tip .tt-n{font-family:var(--sans);font-size:11.5px;color:var(--txt)}
.trend-tip .tt-v{padding-left:8px;text-align:right;font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--txt)}
.trend-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;margin:0;padding:12px 16px 16px}
.trend-legend li{display:flex;flex:0 0 auto}
.trend-lg{display:flex;flex:0 0 auto;align-items:center;gap:6px;margin:-4px -6px;padding:4px 6px;border:none;border-radius:6px;background:none;font-family:var(--sans);font-size:11.5px;color:var(--txt);cursor:pointer;transition:opacity .15s,background .15s}
.trend-lg:hover{background:var(--card-soft)}
.trend-lg.is-dim{opacity:.4}
.trend-lg .lg-r{width:12px;text-align:right;font-family:var(--mono);font-size:10.5px;color:var(--txt-faint);font-variant-numeric:tabular-nums}
.trend-lg .lg-sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.trend-lg .lg-dash{width:16px;height:8px;flex:0 0 16px}
.trend-lg .ar-logo{width:16px;height:16px;border-radius:0;background:none;flex:0 0 16px;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--txt-faint)}
.trend-lg .ar-logo img,.trend-lg .ar-logo svg{width:16px;height:16px}
.trend-lg .lg-n{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
@media(prefers-reduced-motion:reduce){
  .trend-chip .tc-in{animation:none}
  .trend-stage.fade{animation:none}
}
@media(max-width:720px){
  .trend-head{padding:12px 12px 6px}
  .trend-tabs{padding:2px 12px 0}
  .trend-stage{height:320px;margin:0 2px}
  .trend-legend{gap:4px 12px;padding:10px 12px 14px}
  .trend-boards{margin-left:0;order:3;width:100%;padding-left:0}
}

/* model drawer */
.arena-scrim{position:fixed;inset:0;z-index:88;background:rgba(46,43,41,.3);opacity:0;pointer-events:none;transition:opacity .22s}
.arena-scrim.show{opacity:1;pointer-events:auto}
.arena-drawer{position:fixed;top:0;right:0;bottom:0;z-index:89;width:min(400px,94vw);background:var(--card);border-left:1px solid var(--stroke-2);transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:0;padding-bottom:22px}
.arena-drawer.show{transform:none}
.arena-drawer::-webkit-scrollbar{width:5px}
.arena-drawer::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:3px}
html.ad-open{overflow:hidden}
.ad-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 10px;background:var(--card);border-bottom:1px solid transparent}
.ad-kicker{font-family:var(--display);font-size:13px;letter-spacing:.02em;color:var(--txt-dim)}
.ad-close{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--stroke);background:var(--card);color:var(--txt-dim);cursor:pointer;transition:border-color .12s,color .12s}
.ad-close:hover{border-color:var(--txt-faint);color:var(--txt)}
.ad-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2px 20px 16px}
.ad-rank{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--txt-faint)}
.ad-av{margin:12px 0 9px;display:block}
.ad-av .ar-logo{width:56px;height:56px;border-radius:10px;font-size:15px}
.ad-av .ar-logo img,.ad-av .ar-logo svg{width:42px;height:42px}
.ad-name{font-family:var(--display);font-size:22px;font-weight:400;letter-spacing:-.3px;line-height:1.22}
.ad-vend{margin-top:4px;font-family:var(--mono);font-size:10.5px;color:var(--txt-faint)}
.ad-gauge-wrap{display:flex;align-items:center;gap:18px;padding:4px 22px 18px}
.ad-gauge{position:relative;flex:0 0 132px;width:132px;height:132px}
.ad-gauge svg{display:block;width:132px;height:132px;transform:rotate(-90deg)}
.ad-gauge .g-track{fill:none;stroke:#efeae4;stroke-width:9}
.ad-gauge .g-fill{fill:none;stroke:var(--txt);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.9,.2,1)}
.ad-gauge>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1;padding:0 18px}
.ad-gauge b{display:block;font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-gauge span{display:block;margin-top:4px;font-size:9px;color:var(--txt-faint);letter-spacing:.06em;text-transform:uppercase}
.ad-gauge-side{min-width:0}
.ad-gl{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.01em}
.ad-gd{margin-top:5px;font-size:11px;color:var(--txt-faint);line-height:1.5}
.ad-gd b{color:var(--txt);font-family:var(--mono);font-weight:600}
.ad-sub{padding:0 22px 8px;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-faint);font-weight:500}
.ad-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 22px}
.ad-stat{padding:9px 11px;border-radius:6px;background:var(--card-soft);border:1px solid var(--stroke);min-width:0}
.ad-stat span{display:block;font-size:9px;letter-spacing:.03em;color:var(--txt-faint);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-stat b{display:block;margin-top:3px;font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-cmp{padding:0 22px 6px;display:flex;flex-direction:column;gap:8px}
.ac-row{display:grid;grid-template-columns:74px minmax(0,1fr) 58px 58px;gap:8px;align-items:center;font-size:10px}
.ac-k{color:var(--txt-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-track{height:6px;border-radius:0;background:#efeae4;overflow:hidden}
.ac-track i{display:block;height:100%;background:var(--txt)}
.ac-v{font-family:var(--mono);font-size:10.5px;font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ac-v.r{color:var(--txt-faint);font-weight:400}
.ad-cta{margin:14px 22px 0;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:none;border-radius:4px;background:var(--txt);color:#fff;font-family:var(--sans);font-size:12.5px;font-weight:500;cursor:pointer;transition:background .12s}
.ad-cta:hover{background:#3a3734}
.ad-cta span{font-family:var(--mono)}
@media(max-width:1040px){.arena-main{grid-template-columns:1fr}}
@media(max-width:760px){
  .arena-head{margin-bottom:12px}
  .arena-podium{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 2px 10px;align-items:stretch;gap:10px;scrollbar-width:none}
  .arena-podium::-webkit-scrollbar{display:none}
  .pod{order:0;scroll-snap-align:center;min-height:0}
  .pod-1{order:0;padding-top:26px}
  .pod-ghost{font-size:76px}
  .pod-1 .pod-ghost{font-size:88px}
  .ab-row{grid-template-columns:24px 26px minmax(0,1fr) 54px;grid-template-areas:"r a m v" "r a t t";row-gap:6px}
  .ab-rank{grid-area:r}.ab-av{grid-area:a}.ab-main{grid-area:m}.ab-track{grid-area:t}.ab-val{grid-area:v}
  .ad-gauge-wrap{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:480px){
  .duel-stage{padding:12px 10px 4px}
  .duel-nm{font-size:12px}
  .duel-metrics{padding:6px 12px 10px}
  .ad-cmp,.ad-stats,.ad-sub{padding-left:16px;padding-right:16px}
  .ad-cta{margin-left:16px;margin-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .pod,.ab-row,.pod-bar i,.duel-in .dm-track span{animation:none}
  .ab-track i,.dm-track span,.ad-gauge .g-fill{transition:none}
}

/* ---- responsive: one column set per breakpoint so the header and the
   rows can never disagree about how many cells they have ---- */
@media(max-width:1180px){
  .board-table:not(.mode-usage){--cols:44px 30px minmax(180px,1fr) 84px 200px 28px}
  .board-table .table-cols span:nth-child(6){display:none}
  /* usage board: drop the share column first, it is derivable from tokens */
  .board-table.mode-usage{--cols:44px 30px minmax(170px,1fr) 92px 66px 158px 88px 26px}
  .board-table.mode-usage .u-share{display:none}
}
@media(max-width:900px){
  .board-table:not(.mode-usage){--cols:38px 28px minmax(150px,1fr) 72px 160px 24px}
  .board-table.mode-usage{--cols:38px 28px minmax(150px,1fr) 84px 150px 80px 24px}
  .board-table.mode-usage .u-wow{display:none}
  .wrap{padding:24px 20px 60px}
  .page-title{font-size:26px;letter-spacing:-.6px}
  .page-sub{font-size:12px;padding-left:11px}
  .board-meta{margin-top:0;font-size:11.5px;padding-left:11px}
  .model-head{min-height:58px;padding:0 12px}
  .table-cols{padding:0 12px;height:38px}
  .price-cell{gap:8px}
  .price .io{font-size:12.5px;padding-left:8px}
  .price .unit{padding-left:8px}
  .m-score{padding-left:8px}
  .pt-head,.pt-row{padding-left:44px;padding-right:12px}
  .prov-row{padding-left:44px;padding-right:12px}
  .prov-head{padding-left:44px}
}
@media(max-width:760px){
  .board-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .board-table .table-cols,.board-table .model-list{min-width:660px}
  .filters{margin-bottom:4px}
  .page-hint{display:none}
}
@media(max-width:820px){
  .side{transform:translateX(-100%)}
  .side.open{transform:none;border-right:1px solid var(--stroke);box-shadow:none}
  .main{margin-left:0}
  .menu-btn{display:flex}
  .wrap{padding-top:24px}
}

/* ---- account & subscription page ---- */
.acc-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--stroke);font-size:13px}
.acc-row:last-of-type{border-bottom:none}
.acc-k{color:var(--txt-dim);flex:0 0 auto}
.acc-v{font-family:var(--mono);color:var(--txt);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:860px){.acc-grid{grid-template-columns:1fr}}
.btn-ghost{width:100%;margin-top:14px;padding:11px;border-radius:10px;border:1px solid var(--stroke-2);background:transparent;color:var(--txt);cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:560}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.acc-sub-note{font-size:12px;color:var(--txt-dim);margin:0 0 6px;line-height:1.5}
.acc-sub-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan-badge{font-size:10.5px;line-height:1.6;padding:1px 8px;border-radius:999px;background:var(--txt);color:#fff;white-space:nowrap;font-weight:500}
.plan-badge.free{background:var(--stroke-2);color:var(--txt-dim)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 10px}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr}}
.plan-card{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--stroke);border-radius:10px;background:var(--card-soft)}
.plan-card.on{border-color:var(--txt);background:var(--card)}
.plan-name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:600}
.plan-price{font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.plan-price small{font-size:11px;font-weight:400;color:var(--txt-faint);margin-left:2px}
.plan-year{font-size:11px;color:var(--txt-faint);font-variant-numeric:tabular-nums}
.plan-feat{list-style:none;margin:2px 0 4px;padding:0;flex:1;font-size:11.5px;line-height:1.75;color:var(--txt-dim)}
.plan-feat li::before{content:"·";margin-right:6px;color:var(--txt-faint)}
.plan-cta{display:block;width:100%;text-align:center;text-decoration:none;padding:8px 10px;border-radius:8px;border:1px solid var(--stroke-2);background:#fff;color:var(--txt);font-size:12px;font-weight:560;cursor:pointer;font-family:var(--sans)}
.plan-cta:hover{border-color:var(--txt);color:var(--txt)}
.plan-cta.on{cursor:default;opacity:.6}
.plan-mail{display:block;text-align:center;font-size:11px;color:var(--txt-faint);margin-top:6px;text-decoration:none}
.plan-mail:hover{color:var(--txt)}
.pay-box{margin-top:14px;border:1px solid var(--stroke);border-radius:10px;padding:14px;background:var(--card-soft)}
.pay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.pay-head b{font-size:12.5px}
.pay-grid{display:grid;grid-template-columns:150px 150px 1fr;gap:14px;align-items:start}
@media(max-width:760px){.pay-grid{grid-template-columns:1fr 1fr}.pay-info{grid-column:1/-1}}
.pay-qr{text-align:center;font-size:11px;color:var(--txt-dim);line-height:1.8}
.pay-qr img{width:140px;height:140px;object-fit:contain;border:1px solid var(--stroke);border-radius:8px;background:#fff;padding:6px}
.pay-qr-empty{width:140px;height:140px;margin:0 auto;display:grid;place-items:center;border:1px dashed var(--stroke-2);border-radius:8px;font-size:11px;color:var(--txt-faint);padding:10px;line-height:1.6;text-align:center}
.pay-info{font-size:12px;color:var(--txt-dim);line-height:1.9;min-width:0}
.pay-info b{color:var(--txt)}
.pay-ref{font-family:var(--mono);font-size:13px;color:var(--txt);background:#fff;border:1px solid var(--stroke);padding:2px 7px;border-radius:5px}
.pay-steps{margin:8px 0 10px;padding-left:18px}
.pay-steps li{margin:3px 0}
.pay-actions{display:flex;gap:8px;flex-wrap:wrap}
.pay-actions .btn-primary{width:auto;padding:8px 14px}
.pay-txn{width:100%;margin:8px 0;padding:8px 10px;border:1px solid var(--stroke-2);border-radius:7px;background:#fff;color:var(--txt);font-family:var(--sans);font-size:12px}
.pay-note{font-size:11.5px;color:var(--txt-faint);margin-top:8px;line-height:1.7}
#accClaimNote:empty{display:none}
.acc-lock-note{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:9px 11px;border:1px solid var(--stroke-2);border-radius:8px;background:var(--card-soft);font-size:11.5px;color:var(--txt-dim);line-height:1.5}
.acc-lock-link{color:var(--txt);font-weight:600;text-decoration:none;border-bottom:1px solid var(--stroke-2);white-space:nowrap}
.sw-row.locked{opacity:.55}
.acc-del-row select{padding:11px;border-radius:10px;border:1px solid var(--stroke-2);background:var(--card-soft);color:var(--txt);font-family:var(--sans);font-size:13px}
.sw-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--stroke);font-size:13.5px;cursor:pointer;user-select:none}
.sw-row input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.sw{flex:0 0 38px;width:38px;height:22px;border-radius:99px;background:var(--stroke-2);position:relative;transition:background .18s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.sw-row input:checked + .sw{background:var(--blue)}
.sw-row input:checked + .sw::after{transform:translateX(16px)}
.acc-del-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.acc-del-row input{flex:1 1 160px;min-width:0;padding:11px;border-radius:10px;border:1px solid var(--stroke-2);background:var(--card-soft);color:var(--txt);font-family:var(--mono);font-size:13px}
.btn-danger{padding:11px 18px;border-radius:10px;border:none;background:#dc2626;color:#fff;cursor:pointer;font-family:var(--sans);font-size:13.5px;font-weight:570;white-space:nowrap}
.btn-danger:hover{background:#b91c1c}
.btn-code{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 12px;border:1px solid var(--stroke-2);border-radius:6px;background:#fff;color:var(--txt);cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:520;white-space:nowrap;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}
.btn-code:hover{border-color:var(--blue);color:var(--blue);background:var(--card-soft)}
.btn-code:disabled{opacity:.45;cursor:default}
/* ---------- token meter ---------- */
.tm-pill{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--stroke-2);border-radius:999px;font-size:11.5px;color:var(--txt-dim);background:var(--card);white-space:nowrap}
.tm-bento{grid-template-columns:repeat(3,1fr)}
.tm-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;margin-bottom:12px}
.tm-panel{padding:15px 16px 16px;min-width:0}
.tm-panel-h{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.tm-panel-h b{font-size:12.5px;font-weight:600;color:var(--txt);letter-spacing:.01em}
.tm-seg{margin-left:auto;display:inline-flex;border:1px solid var(--stroke-2);border-radius:4px;overflow:hidden;flex:0 0 auto}
.tm-seg button{border:none;background:#fff;padding:4px 9px;font-size:11px;color:var(--txt-faint);cursor:pointer;font-family:var(--sans);line-height:1.4}
.tm-seg button+button{border-left:1px solid var(--stroke-2)}
.tm-seg button:hover{background:var(--card-soft)}
.tm-seg button.on{background:var(--txt);color:#fff}
.tm-chart{height:180px;display:flex;align-items:flex-end;gap:3px;padding-top:6px;border-bottom:1px solid var(--stroke);overflow:hidden}
.tm-bar{flex:1;min-width:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;background:var(--txt);border-radius:2px 2px 0 0;overflow:hidden}
.tm-bar.empty{background:var(--stroke);opacity:1}
.tm-bar.now{outline:1px solid var(--txt-dim);outline-offset:-1px}
.tm-bar-seg{display:block;width:100%;flex:0 0 auto;min-height:0}
.tm-bar-seg.peak{background:var(--amber)}
.tm-bar-seg.off{background:var(--green)}
.tm-bar-seg.flat{background:var(--txt);opacity:.78}
.tm-peakkey{display:flex;flex-wrap:wrap;gap:12px;margin-top:7px;font-size:10.5px;color:var(--txt-faint)}
.tm-peakkey span{display:inline-flex;align-items:center;gap:5px}
.tm-peakkey i{width:8px;height:8px;border-radius:2px;display:inline-block}
.tm-peakkey i.peak{background:var(--amber)}
.tm-peakkey i.off{background:var(--green)}
.tm-peakkey i.flat{background:var(--txt);opacity:.78}
.tm-x{display:flex;justify-content:space-between;margin-top:7px;font-size:10.5px;color:var(--txt-faint);font-variant-numeric:tabular-nums}
.tm-stack{display:flex;height:12px;border-radius:3px;overflow:hidden;background:var(--stroke);margin:4px 0 16px}
.tm-stack i{display:block;height:100%}
.tm-legend{display:flex;flex-direction:column;gap:9px}
.tm-lg{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-dim)}
.tm-lg i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.tm-lg em{font-style:normal;color:var(--txt-faint);font-size:11px;margin-left:auto;font-variant-numeric:tabular-nums}
.tm-lg b{font-weight:600;color:var(--txt);width:62px;text-align:right;font-variant-numeric:tabular-nums}
.tm-bench+.tm-bench{border-top:1px solid var(--stroke)}
.tm-bench-h{display:flex;align-items:center;gap:8px;padding:11px 0 9px}
.tm-bench-h b{font-size:12.5px;font-weight:600}
.tm-bench-h .meta{margin-left:auto;font-size:11px;color:var(--txt-faint)}
.tm-bench-row{display:grid;grid-template-columns:92px 118px 1fr 76px;align-items:center;gap:10px;padding:6px 0}
.tm-bench-k{font-size:11.5px;color:var(--txt-dim)}
.tm-bench-n{font-size:11.5px;font-variant-numeric:tabular-nums;display:flex;gap:6px;align-items:baseline}
.tm-bench-n b{font-weight:600;color:var(--txt)}
.tm-bench-n span{color:var(--txt-faint);font-size:10.5px}
.tm-bench-bar{position:relative;height:5px;background:var(--stroke);border-radius:3px}
.tm-bench-bar i{position:absolute;top:0;bottom:0;left:0;background:var(--txt);opacity:.72;border-radius:3px}
.tm-bench-bar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber);border-radius:1px;transform:translateX(-50%)}
.tm-bench-bar i.good{background:var(--green);opacity:.9}
.tm-bench-bar i.bad{background:var(--red);opacity:.85}
.tm-bench-d{text-align:right}
.tm-chip{display:inline-flex;padding:1px 6px;border-radius:999px;font-size:10px;font-weight:600;white-space:nowrap}
.tm-chip.good{background:#ecfdf5;color:#047857}
.tm-chip.bad{background:#fef2f2;color:#b91c1c}
.tm-chip.flat{background:var(--card-soft);color:var(--txt-faint)}
.tm-insight{display:flex;gap:8px;align-items:center;padding:9px 12px;border:1px solid var(--stroke-2);border-radius:6px;background:var(--card-soft);font-size:12px;color:var(--txt-dim);margin-bottom:10px}
.tm-insight b{color:var(--txt);font-weight:600}
.tm-panel-sub{margin-left:auto;font-size:11px;color:var(--txt-faint)}
.tm-table{width:100%;border-collapse:collapse;font-size:12.5px}
.tm-table th{text-align:left;font-weight:500;color:var(--txt-faint);font-size:10.5px;letter-spacing:.04em;padding:0 0 8px;border-bottom:1px solid var(--stroke)}
.tm-table td{padding:9px 0;border-bottom:1px solid #f6f4f2;font-variant-numeric:tabular-nums;color:var(--txt-dim)}
.tm-table tr:last-child td{border-bottom:none}
.tm-table .num{text-align:right}
.tm-table .name{color:var(--txt)}
.tm-empty{padding:22px 0;text-align:center;color:var(--txt-faint);font-size:12px}
.tm-bar-mini{display:inline-block;width:46px;height:3px;background:var(--stroke);vertical-align:middle;margin-right:8px;border-radius:2px;overflow:hidden}
.tm-bar-mini i{display:block;height:3px;background:var(--txt);opacity:.7}
.tm-sec-h{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px;flex-wrap:wrap}
.tm-sec-h b{font-family:var(--display);font-size:19px;font-weight:400;letter-spacing:-.3px}
.tm-sec-h span{font-size:11.5px;color:var(--txt-faint)}
.tm-form-wrap{padding:14px 16px;border-bottom:1px solid var(--stroke)}
.tm-form{display:grid;grid-template-columns:1fr 178px 146px auto;gap:10px;align-items:end}
.tm-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.tm-field label{font-size:10.5px;color:var(--txt-faint);font-weight:520;letter-spacing:.02em}
.tm-field input,.tm-field select{width:100%;padding:0 12px;border-radius:6px;border:1px solid var(--stroke-2);background:#fff;font-family:var(--sans);font-size:13px;color:var(--txt);height:40px;transition:border-color .12s,box-shadow .12s}
.tm-field input:focus,.tm-field select:focus{outline:none;border-color:var(--txt);box-shadow:0 0 0 3px rgba(0,0,0,.05)}
.tm-keyf input{font-family:var(--code);font-size:13px;letter-spacing:.01em}
.tm-provf select{font-family:var(--code);font-size:12.5px}
.tm-add{height:40px;padding:0 20px;border-radius:6px;border:none;background:#252523;color:#fff;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:560;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.tm-add:hover{background:#3a3734}
.tm-add:disabled{opacity:.5;cursor:default}
.tm-keyrow{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--stroke)}
.tm-keyrow:last-child{border-bottom:none}
.tm-keymain{flex:1;min-width:0}
.tm-keyname{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt)}
.tm-keysub{margin-top:3px;font-size:11px;color:var(--txt-faint);font-family:var(--code);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tm-tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:3px;font-size:10px;background:var(--card-soft);border:1px solid var(--stroke-2);color:var(--txt-dim);white-space:nowrap}
.tm-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.tm-dot.ok{background:var(--green)}.tm-dot.bad{background:var(--red)}.tm-dot.warn{background:var(--amber)}
.tm-copy{display:flex;align-items:center;gap:7px;border:1px solid var(--stroke-2);border-radius:4px;padding:6px 8px;margin-bottom:8px;background:var(--card-soft)}
.tm-copy span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--code);font-size:11.5px;color:var(--txt-dim)}
.tm-copy .btn-code{height:26px;padding:0 9px;font-size:11px}
.tm-note{font-size:11.5px;color:var(--txt-faint);line-height:1.55;margin-top:6px}
.tm-note a{color:var(--txt);text-decoration:underline}
/* The gateway is the front door, not a footnote: it gets more room and a
   stronger frame than the bound-key rows above, so the eye lands here first. */
.tm-gw{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px 18px 15px;border-top:1px solid var(--stroke-2);background:var(--card-soft);font-size:12.5px;color:var(--txt-faint);border-radius:0 0 8px 8px;box-shadow:inset 4px 0 0 var(--txt)}
.tm-gw code{font-family:var(--code);font-size:13px;color:var(--txt);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#fff;border:1px solid var(--stroke-2);border-radius:4px;padding:4px 8px;line-height:1.3}
.tm-gw .btn-code{height:30px;padding:0 11px;font-size:11.5px}
.tm-gw-x{margin-left:auto;color:var(--txt-faint);text-decoration:underline;font-size:11.5px}
/* The requirement, not a footnote: a solid dark pill reads as a condition
   while staying inside the same quiet visual system as the controls. */
.tm-gw-lead{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--txt);border:1px solid var(--txt);font-size:12px;font-weight:650;color:#fff;letter-spacing:.01em;white-space:nowrap}
.tm-gw-lead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:0 0 auto}
.tm-gw-flag{display:inline-flex;align-items:center;padding:3px 7px;border-radius:4px;background:#fdf1e3;border:1px solid #f0d3ad;color:#8a5a12;font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.tm-gw-sub{flex-basis:100%;margin-top:2px;font-size:12px;line-height:1.5;color:var(--txt-dim)}
.tm-gw-sub::before{content:"→ ";color:var(--amber);font-weight:700}
.tm-gw-more{display:inline}
.tm-gw-more[open]{flex-basis:100%}
.tm-gw-more summary{list-style:none;display:inline;color:var(--txt);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:12px;white-space:nowrap}
.tm-gw-more summary::-webkit-details-marker{display:none}
.tm-gw-rule{width:1px;height:16px;background:var(--stroke-2);align-self:center;margin:0 2px}
.tm-gw-k{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt-faint);font-weight:600}
.tm-gw-how{padding:9px 0 2px;font-size:11.5px;line-height:1.65;color:var(--txt-faint);max-width:760px;flex-basis:100%}
.tm-gw-how p{margin:0 0 4px}
.tm-scope{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.tm-scope-l{font-size:11px;color:var(--txt-faint);margin-right:2px}
.tm-scope-b{border:1px solid var(--stroke-2);background:#fff;border-radius:20px;padding:4px 12px;font-size:11.5px;color:var(--txt-dim);cursor:pointer;font-family:var(--sans);line-height:1.4}
.tm-scope-b.on{background:var(--txt);border-color:var(--txt);color:#fff}
.tm-keydetail{margin-top:4px;font-size:11px;color:var(--txt-faint);line-height:1.5}
.tm-keydetail.warn{color:var(--amber)}
.tm-keydetail.bad{color:var(--red)}
.tm-keyhint{grid-column:1/-1;margin-top:3px;font-size:11px;line-height:1.45;color:var(--txt-faint)}
.tm-keyhint.ok{color:var(--green)}
.tm-keyhint.warn{color:var(--amber)}
.tm-minsel,.tm-mininp{padding:0 8px;border-radius:4px;border:1px solid var(--stroke-2);font-size:11px;background:#fff;color:var(--txt);font-family:var(--sans);height:26px}
.tm-mininp{width:190px}
.tm-code{margin:0;background:#2e2b29;color:#f2efe9;border-radius:5px;padding:13px 14px;font-family:var(--code);font-size:11.5px;line-height:1.7;overflow:auto;max-height:212px;white-space:pre}
.tm-priv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.tm-pv{padding:14px 15px;display:flex;gap:10px}
.tm-pv .ico{width:26px;height:26px;border-radius:6px;background:var(--card-soft);border:1px solid var(--stroke-2);display:grid;place-items:center;flex:0 0 auto;color:var(--txt-dim)}
.tm-pv b{display:block;font-size:12px;font-weight:600}
.tm-pv p{font-size:11px;color:var(--txt-faint);margin-top:4px;line-height:1.55}
.tm-gate{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;margin-bottom:12px;border:1px solid var(--stroke-2);border-radius:8px;background:var(--card-soft);text-align:left}
.tm-gate-b{flex:1;min-width:220px}
.tm-gate-t{font-size:12.5px;font-weight:600;line-height:1.5}
.tm-gate-s{font-size:11.5px;color:var(--txt-faint);line-height:1.6;margin-top:2px}
/* Anonymous visitors keep the key parser and see the empty panels; only the
   account actions are gated. */
.tm-flash{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);background:var(--txt);color:#fff;padding:8px 15px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:200}
.tm-flash.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){
  .tm-bento{grid-template-columns:repeat(2,1fr)}
  .tm-grid,.tm-priv{grid-template-columns:1fr}
  .tm-form{grid-template-columns:1fr}
  .tm-bench-row{grid-template-columns:1fr auto auto;gap:6px 8px}
  .tm-bench-bar{display:none}
}