/* ============ tokens: ink dark (default) ============ */
:root, [data-theme="dark"]{
  color-scheme: dark;
  --bg:#0a0c10; --panel:#0e1218; --panel2:#141a23;
  --line:#1c2330; --line2:#2a3345;
  --text:#e8edf5; --muted:#8b96a8; --muted2:#556173;
  --accent:#5e8bff; --accent-text:#7ba1ff; --accent-soft:rgba(94,139,255,.12);
  --good:#34d399; --warn:#fbbf24; --dim:#5c6675;
  --topbar:rgba(10,12,16,.82);
  --row-head:#0c1016; --row-hover:rgba(94,139,255,.05); --row-line:#161d29;
  --track:#1a2230; --bar-from:#5e8bff; --bar-to:#38e0ff;
  --pill-bg:#11161f; --pill-border:#232c3c;
  --tip-bg:#11161f; --tip-border:#2a3345;
  --icon:#8b96a8; --icon-hover:#e8edf5;
  --grid-line:rgba(94,139,255,.045);
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Consolas,Menlo,"PingFang SC","Microsoft YaHei",monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#f7f8fa; --panel:#ffffff; --panel2:#f0f2f6;
    --line:#e3e7ee; --line2:#cbd3e0;
    --text:#0b0e13; --muted:#5a6575; --muted2:#98a2b3;
    --accent:#0c5eff; --accent-text:#0c5eff; --accent-soft:rgba(12,94,255,.08);
    --good:#0a8f5f; --warn:#a8760a; --dim:#a0aab8;
    --topbar:rgba(247,248,250,.86);
    --row-head:#f5f6f9; --row-hover:rgba(12,94,255,.04); --row-line:#e9edf3;
    --track:#e2e7f0; --bar-from:#0c5eff; --bar-to:#0ea5c9;
    --pill-bg:#f0f2f6; --pill-border:#dde2ec;
    --tip-bg:#ffffff; --tip-border:#cbd3e0;
    --icon:#5a6575; --icon-hover:#0b0e13;
    --grid-line:rgba(12,94,255,.05);
  }
}
[data-theme="light"]{
  color-scheme: light;
  --bg:#f7f8fa; --panel:#ffffff; --panel2:#f0f2f6;
  --line:#e3e7ee; --line2:#cbd3e0;
  --text:#0b0e13; --muted:#5a6575; --muted2:#98a2b3;
  --accent:#0c5eff; --accent-text:#0c5eff; --accent-soft:rgba(12,94,255,.08);
  --good:#0a8f5f; --warn:#a8760a; --dim:#a0aab8;
  --topbar:rgba(247,248,250,.86);
  --row-head:#f5f6f9; --row-hover:rgba(12,94,255,.04); --row-line:#e9edf3;
  --track:#e2e7f0; --bar-from:#0c5eff; --bar-to:#0ea5c9;
  --pill-bg:#f0f2f6; --pill-border:#dde2ec;
  --tip-bg:#ffffff; --tip-border:#cbd3e0;
  --icon:#5a6575; --icon-hover:#0b0e13;
  --grid-line:rgba(12,94,255,.05);
}

/* ============ base ============ */
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .3s ease,color .3s ease;
}
/* blueprint hairline grid */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:88px 88px;
  background-position:center top;
}
::selection{background:var(--accent);color:#fff}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
.shell{max-width:1440px;margin:0 auto;padding:0 40px;width:100%;box-sizing:border-box}
.main-shell{display:flex;flex-direction:column;align-items:stretch;padding-bottom:8px;position:relative;z-index:1}

/* ============ topbar ============ */
.topbar{height:58px;border-bottom:1px solid var(--line);background:var(--topbar);backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);position:sticky;top:0;z-index:40}
.topbar .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;letter-spacing:-.2px;color:var(--text)}
.brand img{width:24px;height:24px;display:block;flex:0 0 auto}
.brand .brand-word{display:inline-flex;align-items:center;gap:6px}
.brand .brand-word::after{content:"";width:6px;height:6px;background:var(--accent);margin-left:2px}
.brand span span{font-weight:500;color:var(--muted)}
.top-actions{display:flex;align-items:center;gap:6px}
.icon-btn{
  height:32px;min-width:32px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--icon);transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.icon-btn:hover{border-color:var(--line2);color:var(--icon-hover);background:var(--panel2)}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon-btn svg{width:15px;height:15px;display:block}
.icon-btn .lang-glyph{font:600 10.5px/1 var(--mono);letter-spacing:.05em}

/* ============ masthead ============ */
.mast{padding:24px 0 16px;position:relative;z-index:1}
.mast-body{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.mast-content{flex:0 1 auto;max-width:960px}
.mast-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tag{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line2);background:var(--panel);
  padding:5px 10px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);white-space:nowrap;
}
.tag i{font-style:normal;color:var(--muted2)}
.tag i::after{content:":";margin-right:2px}
.tag.live i{color:var(--accent-text)}
.tag.live::before{content:"";width:5px;height:5px;background:var(--accent);animation:blink 1.6s steps(1) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.2}}
.mast h1{
  margin:0;font-size:clamp(36px,5.8vw,76px);line-height:1.05;letter-spacing:-.04em;font-weight:800;
}
.mast h1::after{
  content:"";display:inline-block;width:.13em;height:.8em;background:var(--accent);
  margin-left:.1em;transform:translateY(.07em);animation:blink 1.2s steps(1) infinite;
}
.mast-qr-wrap{flex-shrink:0;margin-left:auto;display:flex;justify-content:flex-end}
.mast-qr{
  display:block;width:clamp(130px,12vw,160px);max-width:100%;height:auto;object-fit:contain;
  border-radius:10px;border:1px solid var(--pill-border);background:var(--pill-bg);
  box-shadow:0 3px 14px rgba(0,0,0,.1);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mast-qr:hover{
  transform:scale(1.04);border-color:var(--line2);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.mast p{margin:10px 0 0;color:var(--muted);font-size:14px;max-width:560px;line-height:1.6}
.hairline{
  margin-top:20px;height:11px;position:relative;border-bottom:1px solid var(--line);
}
.hairline::before,.hairline::after{
  content:"+";position:absolute;bottom:-8px;font:400 13px/1 var(--mono);color:var(--accent-text);
}
.hairline::before{left:-5px}
.hairline::after{right:-5px}

/* ============ board ============ */
.board-frame{position:relative;width:max-content;max-width:100%;margin:10px auto 0}
.x-corner{position:absolute;font:400 13px/1 var(--mono);color:var(--accent-text);pointer-events:none;z-index:5}
.x-corner.tl{top:-16px;left:-5px}
.x-corner.tr{top:-16px;right:-5px}
.x-corner.bl{bottom:-16px;left:-5px}
.x-corner.br{bottom:-16px;right:-5px}
.board{
  border:1px solid var(--line2);background:var(--panel);
  width:max-content;max-width:100%;margin:0 auto;overflow:visible;
}
.board-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 16px;height:34px;border-bottom:1px solid var(--line);
  font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);
}
.board-bar .b-live{display:inline-flex;align-items:center;gap:7px;color:var(--muted)}
.board-bar .b-live::before{content:"";width:5px;height:5px;background:var(--accent);animation:blink 1.6s steps(1) infinite}
.table-wrap{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;width:100%}
.scenario-bar{display:flex;gap:0;border-bottom:1px solid var(--line);background:var(--panel)}
.scenario-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 8px;font:600 11px/1.4 var(--mono);letter-spacing:.1em;color:var(--muted);
  border-right:1px solid var(--line);transition:color .15s ease,background .15s ease;
}
.scenario-btn:last-child{border-right:0}
.scenario-btn:hover{color:var(--text);background:var(--panel2)}
.scenario-btn.active{color:var(--accent-text);background:var(--accent-soft)}
.scenario-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.table{
  display:grid;
  grid-template-columns: repeat(12, max-content);
  column-gap: 0;
  row-gap: 0;
  justify-content: start;
  width: max-content;
  max-width: 100%;
  margin: 0;
  align-items: center;
  padding: 0 24px;
  box-sizing: border-box;
}
#rows{display:contents}
.table.is-empty{display:block;width:100%}
.table.is-empty #rows{display:block}
.table.is-empty .tr.head{display:none}
.tr{display:contents}
.tr > *{
  min-height: 52px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--row-line);
  box-sizing: border-box;
  padding: 9px 12px;
  min-width: 0;
  transition: opacity .18s ease, background-color .18s ease;
}
.tr.head > *{
  position: sticky;
  top: 0;
  z-index: 2;
  overflow: visible;
  background: var(--row-head);
  min-height: 40px;
  border-bottom: 1px solid var(--line2);
}
.tr.data:hover > *{background:var(--row-hover)}
/* hover cascade: dim sibling rows (.table, not #rows — #rows is display:contents) */
.table:hover .tr.data > *{opacity:.4}
.table .tr.data:hover > *{opacity:1}

/* entrance motion — never leave cells stuck at opacity 0 if animation is skipped */
.tr.data > *{opacity:1}
.table.stagger .tr.data > *{animation:rowIn .5s cubic-bezier(.22,.61,.21,1) both;animation-delay:calc(var(--i,0) * 42ms)}
.table:not(.stagger) .tr.data > *{animation:rowFade .2s ease both}
.table.stagger .speed-fill{animation:barIn .8s cubic-bezier(.22,.61,.21,1) both;animation-delay:calc(.2s + var(--i,0) * 42ms)}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes rowFade{from{opacity:0}to{opacity:1}}
@keyframes barIn{from{width:0}}
@media (prefers-reduced-motion: reduce){
  .table.stagger .tr.data > *,.table:not(.stagger) .tr.data > *,.table.stagger .speed-fill{animation:none}
  .mast h1::after,.tag.live::before,.board-bar .b-live::before{animation:none}
  *{transition:none}
}

/* header cells — same padding/box as data cells; label+? glued, sort arrow after */
.th{
  display:flex;align-items:center;gap:0;user-select:none;white-space:nowrap;
  font:600 10px/1.2 var(--mono);letter-spacing:0;text-transform:uppercase;color:var(--muted2);
}
.th-inner{display:inline-flex;align-items:center;gap:2px;min-width:0;max-width:100%}
.th-lab{letter-spacing:.08em}
.th.sortable{cursor:pointer;border-radius:4px;transition:color .15s ease,background .15s ease}
.th.sortable:hover{color:var(--text);background:var(--panel2)}
.th.sortable.active{color:var(--accent-text)}
.tr.head > *.th.is-open{z-index:45}
.sort-ind{font-size:9px;font-weight:700;line-height:1;flex:0 0 auto;margin-left:3px;letter-spacing:0}
.th-e2e_tps,.th-gen_tps,.th-ttft,.th-wall,.th-in_tokens,.th-out_tokens,.th-real_usd_per_mtok,.th-price_usd,.th-monthly_yi{justify-content:flex-end;text-align:right}
.table.mode-pricing{grid-template-columns:repeat(9, max-content)}
.table.mode-speed{grid-template-columns:repeat(12, max-content)}
.th-rank{justify-content:flex-end}
.th-collapse{display:flex;align-items:center;justify-content:center}
.collapse-cell{display:flex;align-items:center;justify-content:center}
.collapse-btn{
  width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);color:var(--muted);font:600 12px/1 var(--mono);
  transition:border-color .15s ease,color .15s ease,background .15s ease;flex:0 0 auto;
}
.collapse-btn:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--panel2)}
.collapse-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.collapse-btn.is-leaf{opacity:0;pointer-events:none}
.tr.group-row > *{background:var(--panel)}
.tr.group-row:hover > *{background:var(--row-hover)}
.tr.child-row > *{background:transparent}
.child-indent{padding-left:26px}
.count-badge{
  display:inline-flex;align-items:center;border:1px solid var(--pill-border);background:var(--pill-bg);
  color:var(--muted);padding:1px 6px;font:500 10px/1.6 var(--mono);white-space:nowrap;flex:0 0 auto;
}

/* tooltip */
.tip{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:11px;height:11px;border:1px solid var(--line2);margin:0;
  color:var(--muted2);font:600 8px/1 var(--mono);cursor:help;flex:0 0 auto;
  transition:border-color .15s ease,color .15s ease;letter-spacing:0;
}
.tip:hover,.tip:focus{color:var(--accent-text);border-color:var(--accent-text);outline:none}
.tip[data-tip]:hover::after,.tip[data-tip]:focus::after{
  content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  width:max-content;max-width:250px;padding:9px 11px;z-index:30;
  background:var(--tip-bg);border:1px solid var(--tip-border);color:var(--text);
  font:400 12px/1.55 var(--sans);letter-spacing:0;text-transform:none;box-shadow:0 12px 30px rgba(0,0,0,.3);
  pointer-events:none;white-space:normal;text-align:left;
}

/* data cells */
.rank{
  justify-content:flex-end;
  font:600 11px/1 var(--mono);color:var(--muted2);font-variant-numeric:tabular-nums;letter-spacing:.05em;
  cursor:help;
}
.rank.top{color:var(--accent-text)}
#rank-tip{
  position:fixed;z-index:10000;display:none;min-width:200px;max-width:320px;padding:10px 12px;border-radius:8px;
  background:var(--tip-bg);border:1px solid var(--tip-border);color:var(--text);
  box-shadow:0 12px 32px rgba(0,0,0,.35);pointer-events:none;text-align:left;
  font:500 12px/1.55 var(--sans);letter-spacing:0;white-space:normal;
}
#rank-tip.mode-pricing{min-width:260px;max-width:min(90vw,420px)}
#rank-tip .rp-title{display:block;margin:0 0 6px;color:var(--muted2);font:600 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
#rank-tip .rp-line{display:block;font:500 12px/1.55 var(--mono);color:var(--text);white-space:nowrap}
#rank-tip .rp-empty{color:var(--muted)}
#rank-tip .rp-promo{display:block;margin:0 0 6px;color:var(--accent-text);font:600 11.5px/1.4 var(--sans)}
#rank-tip .rp-note{display:block;margin:0 0 6px;font:500 11.5px/1.5 var(--sans);color:var(--text)}
#rank-tip .rp-cite{display:block;font:400 10.5px/1.45 var(--mono);color:var(--muted2);word-break:break-all}
.cell-with-logo{display:flex;align-items:center;gap:9px;min-width:0}
.logo{width:19px;height:19px;object-fit:contain;flex:0 0 auto;display:block;background:transparent;border:0;padding:0}
.logo.harness{width:19px;height:19px}
.model-name{font-weight:650;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.15px;min-width:0}
.chip{
  display:inline-flex;align-items:center;border:1px solid var(--pill-border);background:var(--pill-bg);
  color:var(--muted);padding:2px 8px;font:500 10px/1.6 var(--mono);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.harness-cell{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);min-width:0}
.harness-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.metric{font:600 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.2px;justify-content:flex-end}
.metric small{font-size:9.5px;color:var(--muted2);font-weight:500;margin-left:3px;letter-spacing:0}
.metric.na{color:var(--muted2);font-weight:500}
.speed-cell{min-width:108px;flex-direction:column;align-items:stretch;justify-content:center;gap:0}
.speed-cell .metric{align-self:flex-end}
.speed-track{width:100%;height:3px;background:var(--track);margin-top:7px;overflow:hidden}
.speed-fill{
  height:100%;max-width:100%;
  background:linear-gradient(90deg,var(--bar-from),var(--bar-to));
  opacity:.75;
}
.tr.data:first-child .speed-fill{opacity:1}
.plain{font:500 11.5px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;letter-spacing:-.1px}
.rate-hi{color:var(--good)}.rate-mid{color:var(--warn)}.rate-lo{color:var(--dim)}
.num{font:500 12px/1.2 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;justify-content:flex-end}
.empty{padding:60px 20px;text-align:center;color:var(--muted2);font:500 12px/1.6 var(--mono);letter-spacing:.06em}

/* ============ explainer ============ */
.explainer{
  margin:80px auto 72px;max-width:640px;width:100%;color:var(--muted);
  font-size:13.5px;line-height:1.85;text-align:left;
  word-break:keep-all;line-break:strict;overflow-wrap:anywhere;
}
.explainer h2{
  margin:0 0 20px;font-size:24px;color:var(--text);font-weight:750;letter-spacing:-.02em;
  display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;
}
.explainer h2::before{content:"+";font:600 18px/1 var(--mono);color:var(--accent-text)}
.explainer h3{
  margin:28px 0 10px;font:600 10.5px/1.4 var(--mono);color:var(--muted2);
  letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:9px;
}
.explainer h3::before{content:"";width:14px;height:1px;background:var(--accent);flex:0 0 auto}
.explainer p{margin:0 0 10px}
.explainer .metric-list{margin:0;padding:0;list-style:none}
.explainer .metric-list li{margin:0 0 8px;padding-left:0}
.explainer strong{color:var(--text);font-weight:650}
.explainer code{font:500 .9em var(--mono);background:var(--pill-bg);border:1px solid var(--pill-border);padding:1px 5px;color:var(--text)}
.explainer a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.explainer a:hover{text-decoration-color:currentColor}


/* ============ pricing filters (header-anchored) ============ */
.pricing-filters{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  padding:8px 16px;border-bottom:1px solid var(--line);
  background:var(--panel);
}
.pricing-filters[hidden],.pricing-filters:empty{display:none!important}
.pf-summary{
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;width:100%;
}
.pf-pill{
  display:inline-flex;align-items:center;gap:6px;max-width:100%;
  min-height:28px;padding:3px 6px 3px 10px;border:1px solid var(--pill-border);border-radius:8px;
  background:var(--pill-bg);color:var(--text);font:500 12px/1.3 var(--sans);
  white-space:nowrap;
}
.pf-pill-lab{color:var(--muted2);flex:0 0 auto}
.pf-pill-val{overflow:hidden;text-overflow:ellipsis;max-width:14rem}
.pf-pill-x{
  flex:0 0 auto;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;color:var(--muted);font:600 14px/1 var(--sans);
}
.pf-pill-x:hover{color:var(--text);background:var(--panel2)}
.pf-clear{
  min-height:28px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel2);color:var(--muted);font:600 12px/1 var(--sans);
}
.pf-clear:hover{color:var(--text);border-color:var(--line2);background:var(--panel2)}
.pf-results{margin-left:auto;color:var(--muted);font:500 12px/1.4 var(--sans)}

.th.filterable{position:relative;gap:4px}
.th-sort-trigger{
  display:inline-flex;align-items:center;gap:3px;min-width:0;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;
}
.th-sort-trigger:hover{color:var(--text)}
.th-sort-trigger:focus-visible,.th-filter-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.th-filter-trigger{
  flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:6px;color:var(--muted2);transition:all .15s ease;
}
.th-filter-trigger svg{width:13px;height:13px;display:block}
.th-filter-trigger:hover,.th.filterable.is-open .th-filter-trigger{color:var(--accent-text);background:var(--accent-soft);border-color:var(--pill-border)}
.th.filterable.has-filter .th-filter-trigger{color:var(--accent-text)}
.th-filter-dot{
  position:absolute;top:5px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 2px var(--row-head);
}
.th-filter-pop{
  position:absolute;top:calc(100% + 2px);left:0;z-index:50;
  display:flex;flex-direction:column;gap:8px;
  width:min(352px,calc(100vw - 24px));max-height:min(440px,70vh);overflow:hidden;
  padding:14px;border:1px solid var(--tip-border);border-radius:8px;
  background:var(--tip-bg);box-shadow:0 14px 36px rgba(0,0,0,.24);
  text-transform:none;letter-spacing:0;color:var(--text);font:500 13px/1.45 var(--sans);
  white-space:normal;text-align:left;z-index:60;
}
.th-real_usd_per_mtok .th-filter-pop,
.th-price_usd .th-filter-pop,
.th-monthly_yi .th-filter-pop{left:auto;right:0}
.th-filter-pop .pf-lab{
  font:600 13px/1.3 var(--sans);letter-spacing:0;color:var(--text);
}
.pf-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-panel-actions{display:flex;align-items:center;gap:5px}
.pf-selected{color:var(--muted);font:500 12px/1.3 var(--sans)}
.pf-clear-local{color:var(--accent-text);font:600 12px/1.3 var(--sans);padding:3px 5px;border-radius:5px}
.pf-clear-local:hover{background:var(--accent-soft)}
.pf-search,.pf-num{
  width:100%;height:36px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;
  background:var(--panel2);color:var(--text);font:500 13px/1.2 var(--sans);
  outline:none;transition:border-color .15s ease;
}
.pf-search:focus,.pf-num:focus{border-color:var(--accent)}
.pf-search::placeholder,.pf-num::placeholder{color:var(--muted2);opacity:.85}
.pf-options{
  display:flex;flex-direction:column;gap:2px;min-height:42px;max-height:238px;overflow:auto;
  overscroll-behavior:contain;border:1px solid var(--line);border-radius:8px;padding:4px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
.pf-option-row{display:flex;align-items:center;gap:4px;min-height:36px;padding:2px 4px;border-radius:6px;transition:background .12s ease}
.pf-option-row:hover,.pf-option-row:focus-within{background:var(--panel2)}
.pf-option{
  flex:1 1 auto;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px;
  min-width:0;min-height:32px;padding:3px;text-align:left;border-radius:5px;
  color:var(--text);font:500 13px/1.4 var(--sans);
}
.pf-option:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.pf-option input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.pf-option-name{min-width:0;overflow-wrap:anywhere}
.pf-only{
  flex:0 0 auto;opacity:0;color:var(--accent-text);font:600 11px/1.2 var(--sans);padding:6px 5px;border-radius:5px;
}
.pf-option-row:hover .pf-only,.pf-option-row:focus-within .pf-only,.pf-only:focus-visible{opacity:1}
.pf-empty{padding:10px 7px;color:var(--muted);font:400 13px/1.4 var(--sans)}
.pf-unit{color:var(--muted);font:400 12px/1.3 var(--sans)}
.pf-range-field{display:flex;flex:1 1 0;flex-direction:column;gap:5px;min-width:0}
.pf-range-field label{font:500 12px/1.3 var(--sans);color:var(--muted)}
.pf-range-row{display:flex;align-items:flex-end;gap:9px}
.pf-range-row .pf-num{min-width:0;width:100%;font-variant-numeric:tabular-nums}
.pf-range-error{color:var(--warn);font:500 12px/1.4 var(--sans)}
.pf-range-error[hidden]{display:none}
.pf-range-row .pf-dash{align-self:center;padding-bottom:0;transform:translateY(7px)}
.th-filter-pop button,.th-filter-pop input{flex-shrink:0}
.pf-empty-results{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted);font:500 13px/1.4 var(--sans);
}
.table-wrap.has-pf-open{overflow:visible}
@media(max-width:720px){
  .pricing-filters{padding:8px 12px}
  .th-filter-pop{
    position:fixed;inset:auto 0 0;width:100%;max-width:none;max-height:min(76dvh,620px);
    padding:18px 16px max(18px,env(safe-area-inset-bottom));border-radius:16px 16px 0 0;
    border:1px solid var(--tip-border);border-bottom:0;box-shadow:0 -18px 50px rgba(0,0,0,.28);
  }
  .pf-options{max-height:min(38dvh,320px)}
  .pf-only{opacity:1}
  .pf-results{width:100%;margin-left:0}
}

@media(max-width:820px){
  .mast-body{flex-direction:column;align-items:stretch;gap:16px}
  .mast-content{width:100%}
  .mast-qr-wrap{width:100%;margin-left:0;display:flex;justify-content:center}
  .mast-qr{margin:0 auto}
}

@media(max-width:720px){
  .shell{padding:0 16px}
  .mast{padding:18px 0 12px}
  .mast-qr{width:120px}
  .hairline{margin-top:14px}
  .table{padding:0 2px}
  .tr > *{padding:9px 8px}
}