/* ============================================================
   Hoxkai AI 模型价格总表 — 前台样式（浅色 / 现代 / 高可读）
   设计原则：保留全部 class 名，仅升级视觉层；
   不使用 content-visibility（避免跨浏览器布局错乱）。
   ============================================================ */
:root {
  --bg:#f5f6fb;
  --bg-tint:radial-gradient(1100px 560px at 50% -8%, #eceeff 0%, rgba(236,238,255,0) 62%);
  --card:#ffffff;
  --text:#15162b;
  --muted:#6b7280;
  --border:#e7e9f2;
  --primary:#6366f1;
  --primary-d:#4f46e5;
  --primary-l:#eef0ff;
  --green:#10b981; --green-l:#d8f5ea; --green-d:#047857;
  --amber:#f59e0b; --amber-l:#fef3c7; --amber-d:#b45309;
  --red:#ef4444; --red-l:#fee2e2; --red-d:#b91c1c;
  --code:#f3f4f9;
  --blue:#3b82f6; --purple:#8b5cf6; --indigo-soft:#eef0ff;
  --shadow-sm:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md:0 6px 20px rgba(16,24,40,.08);
  --radius:14px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans SC","PingFang SC",sans-serif;
  background:var(--bg);
  background-image:var(--bg-tint);
  background-repeat:no-repeat;
  color:var(--text);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
:focus-visible{outline:3px solid rgba(99,102,241,.45);outline-offset:2px;border-radius:6px}
.wrap{max-width:1340px;margin:0 auto;padding:26px 20px 64px}

/* ---------- Header ---------- */
.header{
  position:relative;overflow:hidden;
  background:linear-gradient(125deg,#6366f1 0%,#7c3aed 55%,#8b5cf6 100%);
  color:#fff;border-radius:18px;padding:30px 32px;margin-bottom:20px;
  box-shadow:0 10px 30px rgba(99,102,241,.22);
}
.header::after{
  content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  background:radial-gradient(circle at center, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.header h1{font-size:25px;font-weight:700;letter-spacing:.2px;line-height:1.25}
.header .sub{opacity:.92;font-size:13.5px;margin-top:6px;max-width:760px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.stats .pill{
  background:rgba(255,255,255,.16);padding:6px 13px;border-radius:20px;
  font-size:12.5px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);
}
.stats .pill b{font-weight:700}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;flex-direction:column;gap:13px;margin-bottom:14px}
.row1{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.search{
  flex:1;min-width:230px;padding:11px 38px 11px 16px;border:1.5px solid var(--border);
  border-radius:11px;font-size:14px;outline:none;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
  background:var(--card);color:var(--text);box-shadow:var(--shadow-sm);
}
.search::placeholder{color:#9aa0ad}
.search:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.search-wrap{position:relative;flex:1;min-width:230px;display:flex}
.search-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border:none;background:var(--bg);color:var(--muted);
  border-radius:50%;font-size:16px;line-height:1;cursor:pointer;display:none;
  align-items:center;justify-content:center;transition:background .12s var(--ease),color .12s var(--ease);
}
.search-clear:hover{background:var(--red-l);color:var(--red-d)}
.toggle{display:flex;background:var(--card);border:1.5px solid var(--border);border-radius:11px;overflow:hidden;box-shadow:var(--shadow-sm)}
.toggle button{
  padding:10px 17px;border:none;background:transparent;font-size:13.5px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease);white-space:nowrap;
}
.toggle button:hover{color:var(--primary-d)}
.toggle button.active{background:var(--primary);color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:7px 14px;border:1.5px solid var(--border);background:var(--card);border-radius:20px;
  font-size:13px;color:var(--muted);cursor:pointer;transition:all .15s var(--ease);font-weight:500;
  box-shadow:var(--shadow-sm);
}
.chip b{color:var(--primary);margin-left:3px;font-size:12px}
.chip:hover{border-color:var(--primary);color:var(--primary-d);transform:translateY(-1px)}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 4px 12px rgba(99,102,241,.28)}
.chip.active b{color:#fff}
.opt{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none;padding:4px 0}
.opt input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.count-tag{margin-left:auto;font-size:13px;color:var(--muted);font-weight:500}

/* ---------- Legend ---------- */
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:16px 2px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.legend .lg{background:var(--green-l)}
.legend .ln{background:var(--amber-l)}
.legend .le{background:var(--red-l)}

/* ---------- Model cards ---------- */
#modelView .model{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease);
}
#modelView .model:hover{box-shadow:var(--shadow-md);border-color:#d8dbec}
.m-head{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer}
.m-head:hover{background:#fafbff}
.m-name{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-name code{background:var(--code);padding:2px 8px;border-radius:6px;font-family:inherit}
.vbadge{font-size:11px;padding:3px 10px;border-radius:7px;background:var(--primary-l);color:var(--primary-d);font-weight:600;white-space:nowrap}
.ratio-info{font-size:12px;color:var(--muted);white-space:nowrap}
.ratio-info b{color:var(--text);font-family:"SF Mono",ui-monospace,monospace}
.best{display:flex;gap:14px;font-size:12px;white-space:nowrap}
.best .in{color:var(--green-d)}
.best .out{color:var(--blue)}
.best b{font-family:"SF Mono",ui-monospace,monospace;font-weight:700}
.chev{transition:transform .22s var(--ease),color .18s var(--ease);color:var(--muted);font-size:11px;margin-left:4px;display:inline-block;width:14px;text-align:center}
.model.open .chev{transform:rotate(90deg);color:var(--primary-d)}
/* ---------- 展开/选中态（"我正选中这一行"）---------- */
#modelView .model.open{
  border-color:var(--primary);
  box-shadow:inset 3px 0 0 var(--primary), 0 0 0 1px rgba(99,102,241,.22), var(--shadow-md);
}
#modelView .model.open .m-head{
  background:linear-gradient(90deg, var(--primary-l) 0%, rgba(238,240,255,.4) 70%, rgba(238,240,255,0) 100%);
}
#modelView .model.open .m-name code{background:rgba(99,102,241,.12);color:var(--primary-d)}
#modelView .model.open .disc-rib{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.m-body{display:none;padding:0 18px 18px;border-top:1px solid var(--border)}
.model.open .m-body{display:block;animation:fade .22s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.gtable{width:100%;border-collapse:collapse;font-size:13px;margin-top:12px}
.gtable th{text-align:left;padding:9px 11px;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1.5px solid var(--border);font-weight:600}
.gtable td{padding:9px 11px;border-bottom:1px solid #f0f1f5;vertical-align:top}
.gtable tr:last-child td{border-bottom:none}
.gtable .num{text-align:right;font-family:"SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.gtable .price{font-weight:600}
.gtable .cache{color:var(--muted)}
.gtable code{background:var(--code);padding:2px 7px;border-radius:5px;font-size:12px}
.gtable .orig{color:var(--muted);text-decoration:line-through;font-size:11px;margin-left:6px;font-weight:400}
.cheapest td{background:var(--green-l)}
.cheapest .grp-name::after{content:" ⭐";font-size:11px}
.star{color:var(--green);font-weight:700;font-size:11px}
.gr-badge{display:inline-block;padding:1px 9px;border-radius:11px;font-size:11px;font-weight:700;font-family:"SF Mono",ui-monospace,monospace}
.g-cheap{background:var(--green-l);color:var(--green-d)}
.g-norm{background:var(--amber-l);color:var(--amber-d)}
.g-exp{background:var(--red-l);color:var(--red-d)}
.mode-tag{font-size:11px;padding:2px 9px;border-radius:6px;font-weight:500}
.mode-标准{background:#e0e7ff;color:#4338ca}
.mode-分档{background:var(--amber-l);color:var(--amber-d)}
.tier-cell{padding:0}
.tier-table{width:100%;border-collapse:collapse;font-size:12px}
.tier-table td{padding:5px 0;border:none}
.tier-table .num{font-family:"SF Mono",ui-monospace,monospace;text-align:right;padding-right:8px}
.tier-name{color:var(--primary-d);font-weight:600;background:var(--primary-l);padding:1px 8px;border-radius:11px;font-size:11px;white-space:nowrap}
.tier-cond{color:var(--muted);font-size:11px}
.disc-rib{display:inline-block;margin-left:8px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:11px;vertical-align:middle}
.feat-star{color:#f59e0b;font-weight:700;margin-right:6px}

/* ---------- Series compare ---------- */
#seriesView{display:none}
.series{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:box-shadow .18s var(--ease)}
.series:hover{box-shadow:var(--shadow-md)}
.s-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.s-head h3{font-size:16px;font-weight:700}
.s-count{font-size:11px;padding:3px 11px;border-radius:12px;background:var(--primary-l);color:var(--primary-d);font-weight:600}
.s-ref{font-size:12px;color:var(--muted)}
.s-ref code{background:var(--code);padding:2px 7px;border-radius:5px;font-size:11.5px}
.s-cards{display:flex;align-items:stretch;gap:12px;overflow-x:auto;padding-bottom:6px}
.s-col{flex:1;min-width:174px;max-width:250px;background:#fafbfe;border:1px solid var(--border);border-radius:12px;padding:18px 13px 13px;position:relative;transition:transform .15s var(--ease);display:flex;flex-direction:column;min-height:200px}
.s-col:hover{transform:translateY(-2px)}
.s-col.best-col{border-color:var(--green);background:var(--green-l);box-shadow:0 0 0 2px rgba(16,185,129,.18)}
.best-rib{position:absolute;top:-6px;right:10px;background:var(--green);color:#fff;font-size:10px;font-weight:700;padding:2px 9px;border-radius:11px}
.s-col-head code{font-family:"SF Mono",ui-monospace,monospace;font-size:13px;font-weight:600;background:var(--code);padding:3px 8px;border-radius:6px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.best-col .s-col-head code{background:#fff}
.s-vendor{font-size:11px;color:var(--muted);margin-top:9px}
.s-ratio{font-size:11.5px;color:var(--muted);margin-top:3px}
.s-ratio b{font-family:"SF Mono",ui-monospace,monospace;color:var(--text)}
.s-metrics{margin-top:auto;padding-top:11px;display:flex;flex-direction:column;gap:7px}
.metric{display:flex;flex-direction:column;background:#fff;border-radius:9px;padding:8px 11px;box-shadow:var(--shadow-sm)}
.metric.ref{background:#eef2ff}
.metric span{font-size:10.5px;color:var(--muted)}
.metric b{font-family:"SF Mono",ui-monospace,monospace;font-size:14px;font-weight:700}
.metric small{font-size:10px;color:var(--muted);margin-top:1px}
.metric .orig{font-size:10px}
.best-col .metric{background:rgba(255,255,255,.72)}
.s-tiers{margin-top:8px;display:flex;flex-direction:column;gap:4px;font-size:11px}
.s-tier{background:#fff;border-radius:7px;padding:6px 9px;border:1px solid #e8eaf0}
.s-tier-name{font-weight:600;color:var(--primary-d);font-size:10.5px}
.s-tier-prices{color:var(--muted)}
.s-tier-prices b{font-family:"SF Mono",ui-monospace,monospace;color:var(--text);font-weight:600}

/* ---------- Flat table ---------- */
#flatView{display:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;max-height:78vh;box-shadow:var(--shadow-sm)}
#flatView table{width:100%;border-collapse:collapse;font-size:13px}
#flatView thead th{
  position:sticky;top:0;background:#f7f8fc;padding:11px 13px;text-align:left;font-size:11.5px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--border);
  cursor:pointer;white-space:nowrap;z-index:1;
}
#flatView thead th:hover{color:var(--primary-d)}
#flatView thead th .ar{opacity:.35;font-size:9px}
#flatView thead th.sorted .ar{opacity:1;color:var(--primary)}
#flatView tbody td{padding:8px 13px;border-bottom:1px solid #f0f1f5;white-space:nowrap}
#flatView tbody tr:hover{background:#fafbff}
#flatView tbody tr:nth-child(even){background:#fcfcfe}
#flatView .num{text-align:right;font-family:"SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
#flatView code{background:var(--code);padding:2px 7px;border-radius:5px;font-size:12px}
#flatView tbody tr.flat-row{cursor:pointer;transition:background .12s var(--ease)}
#flatView tbody tr.flat-row:hover{background:#f3f5ff}
#flatView tbody tr.flat-row td:first-child{position:relative;padding-left:28px}
.flat-chev{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--muted);transition:transform .18s var(--ease),color .15s var(--ease)}
.flat-row[aria-expanded="true"] .flat-chev{transform:translateY(-50%) rotate(90deg);color:var(--primary-d)}
/* 选中态：左侧色条 + 紫底高亮，hover 时保持高亮不褪色 */
#flatView tbody tr.flat-row[aria-expanded="true"]{background:var(--primary-l);box-shadow:inset 3px 0 0 var(--primary)}
#flatView tbody tr.flat-row[aria-expanded="true"]:hover{background:#e3e7ff}
#flatView tbody tr.flat-row[aria-expanded="true"] code{background:rgba(99,102,241,.16);color:var(--primary-d)}
#flatView tbody tr.flat-detail{background:#fafbff}
#flatView tbody tr.flat-detail:hover{background:#fafbff}
#flatView tbody tr.flat-detail>td{padding:0;border-bottom:1px solid var(--border)}
.flat-detail-wrap{padding:10px 13px 14px}
.flat-detail-table{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid #e8eaf0;border-radius:10px;overflow:hidden}
.flat-detail-table th{background:#f5f6fb;padding:8px 10px;font-size:11px;color:var(--muted);text-align:left;font-weight:600}
.flat-detail-table td{padding:7px 10px;border-bottom:1px solid #f0f1f5}
.flat-detail-table tbody tr:last-child td{border-bottom:none}
.flat-detail-table tbody tr:hover{background:#f8f9fd}
.flat-detail-table .num{text-align:right;font-family:"SF Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.flat-detail-table code{background:#f3f4f9;padding:2px 6px;border-radius:4px;font-size:11px}
.mode-mixed{background:#fef3c7;color:var(--amber-d)}
.mode-tier{background:#e0e7ff;color:#4338ca}
.mode-std{background:#f3f4f9;color:var(--muted)}

/* ---------- 分组倍率总览 ---------- */
#groupsView{display:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-sm)}
.gv-note{font-size:13px;color:var(--muted);background:var(--primary-l);padding:12px 16px;border-radius:11px;margin-bottom:16px;line-height:1.7}
.gv-note code{background:#fff;padding:1px 8px;border-radius:5px;font-size:12px}
.gv-note b{color:var(--primary-d)}
.groups-table td.examples{font-size:11.5px;color:var(--muted)}
.groups-table td.examples code{background:var(--code);padding:1px 6px;border-radius:4px;font-size:11px;margin-right:5px;display:inline-block}
.groups-table td.desc{font-size:12.5px;color:var(--muted);max-width:360px;line-height:1.65}

.footer{text-align:center;color:var(--muted);font-size:12px;margin-top:32px;border-top:1px solid var(--border);padding-top:18px}
.empty{text-align:center;color:var(--muted);padding:50px;font-size:14px}
.loading{text-align:center;color:var(--muted);padding:60px;font-size:15px}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .wrap{padding:14px 11px 44px}
  .header{padding:20px 17px}
  .header h1{font-size:20px}
  .best{display:none}
  .ratio-info{display:none}
  .m-name{font-size:13px}
  .gtable th,.gtable td{padding:6px 7px;font-size:11.5px}
  .gtable .hide-sm{display:none}
  .s-col{min-width:150px}
  .toggle button{padding:9px 12px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- 音频输入价格（薰衣草紫，左侧色条 + 极淡紫底，区别于绿调"最便宜"）---------- */
.price.audio{color:#6d28d9;font-weight:600;letter-spacing:.2px}
.gtable td.price.audio{box-shadow:inset 3px 0 0 #a78bfa;background:rgba(139,92,246,.04);transition:background .15s ease}
.gtable tr:hover td.price.audio{background:rgba(139,92,246,.08)}
td.audio.muted,.price.audio.muted{color:#d4d4d4;font-weight:400;box-shadow:none;background:transparent}
.metric.audio{
  border-left:3px solid #8b5cf6;
  padding:4px 10px 4px 9px;
  margin:2px 0;
  background:linear-gradient(90deg,rgba(139,92,246,.06) 0%,rgba(139,92,246,0) 90%);
  border-radius:0 6px 6px 0;
}
.s-tier-prices b,.metric b{white-space:nowrap}

/* ---------- 缓存读取（emerald 绿，已缓存=省）---------- */
.price.cache-read{color:#047857;font-weight:600;letter-spacing:.2px}
.gtable td.price.cache-read{box-shadow:inset 3px 0 0 #34d399;background:rgba(16,185,129,.04);transition:background .15s ease}
.gtable tr:hover td.price.cache-read{background:rgba(16,185,129,.08)}
td.cache-read.muted,.price.cache-read.muted{color:#d4d4d4;font-weight:400;box-shadow:none;background:transparent}
.metric.cache-read{
  border-left:3px solid #10b981;
  padding:4px 10px 4px 9px;
  margin:2px 0;
  background:linear-gradient(90deg,rgba(16,185,129,.06) 0%,rgba(16,185,129,0) 90%);
  border-radius:0 6px 6px 0;
}

/* ---------- 缓存写入（teal 青绿，与读取区分）---------- */
.price.cache-create{color:#0f766e;font-weight:600;letter-spacing:.2px}
.gtable td.price.cache-create{box-shadow:inset 3px 0 0 #14b8a6;background:rgba(20,184,166,.04);transition:background .15s ease}
.gtable tr:hover td.price.cache-create{background:rgba(20,184,166,.08)}
td.cache-create.muted,.price.cache-create.muted{color:#d4d4d4;font-weight:400;box-shadow:none;background:transparent}
.metric.cache-create{
  border-left:3px solid #14b8a6;
  padding:4px 10px 4px 9px;
  margin:2px 0;
  background:linear-gradient(90deg,rgba(20,184,166,.06) 0%,rgba(20,184,166,0) 90%);
  border-radius:0 6px 6px 0;
}

/* ---------- 图片输入（sky 天蓝，图像语义）---------- */
.price.image{color:#0369a1;font-weight:600;letter-spacing:.2px}
.gtable td.price.image{box-shadow:inset 3px 0 0 #38bdf8;background:rgba(56,189,248,.04);transition:background .15s ease}
.gtable tr:hover td.price.image{background:rgba(56,189,248,.08)}
td.image.muted,.price.image.muted{color:#d4d4d4;font-weight:400;box-shadow:none;background:transparent}
.metric.image{
  border-left:3px solid #38bdf8;
  padding:4px 10px 4px 9px;
  margin:2px 0;
  background:linear-gradient(90deg,rgba(56,189,248,.06) 0%,rgba(56,189,248,0) 90%);
  border-radius:0 6px 6px 0;
}

/* 扁平明细主表新增的 2 列（缓存读/写）也用上面配色，无需重复 */