/* ============================================================================
   AI 网关 · 用户侧样式
   设计约束：无框架、无动画、无图表、无侧边栏；卡片 12px 圆角 + 1px 边框，禁用阴影。
   ========================================================================== */
:root{
  --bg:#fff; --fg:#1a1a1f; --muted:#7a7a85; --border:#e7e7ec;
  --card:#fff; --brand:#4d6bfe; --brand-weak:#eef1ff;
  --danger:#d94848; --ok:#1a9c62;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --heat-0:#f3f4f6; --heat-1:#dbeafe; --heat-2:#93c5fd; --heat-3:#3b82f6; --heat-4:#1e3a8a;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#111114; --fg:#ececf1; --muted:#8b8b96; --border:#26262c;
         --card:#17171b; --brand:#6b83ff; --brand-weak:#1d2440;
         --heat-0:#1c1c22; --heat-1:#172554; --heat-2:#1e40af; --heat-3:#3b82f6; --heat-4:#93c5fd; }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
button{ font:inherit; cursor:pointer; }
.hidden{ display:none !important; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.danger{ color:var(--danger); }
.ok{ color:var(--ok); }

/* ---------- 登录 / 注册 ---------- */
.auth-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card{ width:380px; max-width:100%; }
.auth-tabs{ display:flex; gap:4px; margin-bottom:18px; }
.auth-tab{
  flex:1; padding:8px 0; border:1px solid transparent; background:transparent;
  color:var(--muted); border-radius:8px;
}
.auth-tab.active{ color:var(--fg); border-color:var(--border); background:var(--card); font-weight:600; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--fg); font:inherit; outline:none;
}
.field input:focus{ border-color:var(--brand); }
.code-row{ display:flex; gap:10px; }
.code-row input{ flex:1; }
.msg{ margin-top:12px; font-size:13px; padding:10px 12px; border-radius:8px;
      background:var(--brand-weak); color:var(--fg); }
.msg.err{ background:transparent; color:var(--danger); border:1px solid var(--danger); }
.msg.ok{ background:transparent; color:var(--ok); border:1px solid var(--ok); }

/* ---------- 通用 ---------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; }
.btn{
  border:1px solid var(--border); background:var(--bg); color:var(--fg);
  padding:8px 14px; border-radius:8px;
}
.btn:hover{ border-color:var(--muted); }
.btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn-sm{ padding:4px 10px; font-size:13px; border-radius:6px; }
.btn-danger{ color:var(--danger); border-color:var(--border); }
.btn-block{ width:100%; padding:11px 14px; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ---------- 顶部导航 ---------- */
.topbar{
  display:flex; align-items:center; gap:24px;
  padding:14px 24px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg); z-index:5;
}
.brand{ font-weight:700; letter-spacing:.2px; }
.tabs{ display:flex; gap:4px; flex:1; }
.tab-btn{
  border:1px solid transparent; background:transparent; color:var(--muted);
  padding:6px 14px; border-radius:8px;
}
.tab-btn.active{ color:var(--brand); border-color:var(--brand); background:var(--brand-weak); font-weight:600; }
.who{ display:flex; align-items:center; gap:12px; font-size:14px; }

main{ max-width:1040px; margin:0 auto; padding:24px; }
.stack{ display:flex; flex-direction:column; gap:16px; }

/* ---------- 概览 ---------- */
.balance-card{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.balance-main .num{ font-family:var(--mono); font-size:40px; font-weight:600; line-height:1.1; }
.balance-main .sub{ color:var(--muted); font-size:13px; margin-top:2px; }
.metrics{ display:flex; gap:32px; }
.metric .k{ color:var(--muted); font-size:13px; }
.metric .v{ font-family:var(--mono); font-size:17px; }

.endpoint{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 16px; border-radius:10px; background:var(--brand-weak);
  border:1px solid var(--border); flex-wrap:wrap;
}
.endpoint .url{ font-family:var(--mono); font-size:15px; word-break:break-all; }

/* ---------- 表格 ---------- */
.table-wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
th{ color:var(--muted); font-weight:500; font-size:13px; }
tr:last-child td{ border-bottom:none; }
td.num, th.num{ text-align:right; font-family:var(--mono); }
.pill{
  display:inline-block; padding:1px 8px; border-radius:999px;
  border:1px solid var(--border); font-size:12px; color:var(--muted);
}
.pill.on{ color:var(--ok); border-color:var(--ok); }
.pill.off{ color:var(--muted); }
.empty{ padding:28px 0; text-align:center; color:var(--muted); font-size:14px; }

/* ---------- 分页 / 工具条 ---------- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.seg{ display:flex; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg button{ border:none; background:transparent; color:var(--muted); padding:6px 14px; }
.seg button.active{ background:var(--brand-weak); color:var(--brand); font-weight:600; }
.pager{ display:flex; align-items:center; gap:12px; justify-content:flex-end; margin-top:14px; font-size:13px; }

/* ---------- 充值 ---------- */
.tiers{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.tier{
  flex:1; min-width:120px; padding:16px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); text-align:center; font-family:var(--mono); font-size:18px;
}
.tier.selected{ border-color:var(--brand); background:var(--brand-weak); color:var(--brand); font-weight:600; }
.pay-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
          padding-top:14px; border-top:1px solid var(--border); }
.pay-amount{ font-family:var(--mono); font-size:22px; }

/* ---------- 弹层 ---------- */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.42); display:flex;
        align-items:center; justify-content:center; padding:24px; z-index:20; }
.modal-card{ width:420px; max-width:100%; }
.token-box{
  font-family:var(--mono); font-size:14px; word-break:break-all;
  background:var(--brand-weak); border:1px solid var(--border); border-radius:8px;
  padding:12px; margin:12px 0;
}

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .topbar{ flex-wrap:wrap; gap:10px; padding:12px 16px; }
  .tabs{ order:3; width:100%; overflow-x:auto; }
  main{ padding:16px; }
  .card{ padding:16px; }
  .balance-main .num{ font-size:32px; }
  .metrics{ gap:20px; }
  .tiers{ flex-direction:column; }
  .table-hide-sm{ display:none; }
  .who span{ max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* ============================================================================
   模型页 / 用量页（DeepSeek 管理页风格）/ 全年热力图
   ========================================================================== */
.row-inline{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ---------- 模型页 ---------- */
.model-group{ margin-bottom:22px; }
.model-group h3{
  font-size:15px; margin:0 0 8px; font-weight:600;
  display:flex; align-items:baseline; gap:10px;
}
.model-group h3 .count{ font-size:12px; font-weight:400; color:var(--muted); }
.model-table td{ vertical-align:top; }
.price-main{ font-family:var(--mono); }
.price-sub{ font-size:12px; color:var(--muted); font-family:var(--mono); }
.cap{ display:inline-block; padding:1px 7px; border-radius:999px; font-size:12px;
      border:1px solid var(--border); color:var(--muted); margin-right:4px; white-space:nowrap; }
.cap.on{ color:var(--brand); border-color:var(--brand); background:var(--brand-weak); }
.cap-off{ opacity:.5; }

/* ---------- 用量页 ---------- */
.usage-summary{
  display:flex; gap:28px; flex-wrap:wrap; align-items:baseline;
  padding:2px 0 14px; margin-bottom:2px; border-bottom:1px solid var(--border);
}
.usage-summary .item .k{ font-size:12px; color:var(--muted); }
.usage-summary .item .v{ font-family:var(--mono); font-size:16px; }
.usage-table th{ font-weight:500; }
.usage-table td{ padding:8px; }
.usage-table tbody tr:hover{ background:var(--brand-weak); }

/* ---------- 热力图 ---------- */
.heat-block{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; margin-top:14px; }
.heat-year-wrap{ overflow-x:auto; padding-bottom:4px; }
.heat-months{
  display:grid; gap:3px; margin-left:0; margin-bottom:4px;
  font-size:11px; color:var(--muted); height:14px;
}
.heat-months span{ white-space:nowrap; }
.heat-body{ display:flex; gap:6px; }
.heat-weekdays{
  display:grid; grid-template-rows:repeat(7, 12px); gap:3px;
  font-size:10px; color:var(--muted); text-align:right; width:28px;
}
.heat-weekdays span{ line-height:12px; }
.heat-year{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7, 12px); gap:3px; }
.heat-cell{
  width:12px; height:12px; border-radius:2px;
  background:var(--heat-0); border:1px solid transparent;
}
.heat-cell.lv1{ background:var(--heat-1); }
.heat-cell.lv2{ background:var(--heat-2); }
.heat-cell.lv3{ background:var(--heat-3); }
.heat-cell.lv4{ background:var(--heat-4); }
.heat-cell.blank{ background:transparent; }
.heat-legend{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted);
              flex-wrap:wrap; margin-top:10px; }
.heat-legend .sw{ width:12px; height:12px; border-radius:2px; display:inline-block; }
.heat-legend .lbl{ font-family:var(--mono); }
.heat-calendar{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px 20px;
}
.cal-month .cal-title{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.cal-dow{ font-size:10px; color:var(--muted); text-align:center; }
.cal-day{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:10px; border-radius:3px; color:var(--fg); background:var(--heat-0);
  font-family:var(--mono);
}
.cal-day.other{ color:var(--muted); background:transparent; }
.cal-day.lv1{ background:var(--heat-1); }
.cal-day.lv2{ background:var(--heat-2); }
.cal-day.lv3{ background:var(--heat-3); color:#fff; }
.cal-day.lv4{ background:var(--heat-4); color:#fff; }

@media (max-width:640px){
  .usage-summary{ gap:18px; }
  .heat-cell{ width:10px; height:10px; }
  .heat-year{ grid-template-rows:repeat(7, 10px); }
}
/* ---------- 充值：支付方式 ---------- */
.pay-types{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.pay-type{
  flex:1; min-width:140px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--fg); font-size:15px;
}
.pay-type.selected{ border-color:var(--brand); background:var(--brand-weak); color:var(--brand); font-weight:600; }
.pay-icon{
  width:22px; height:22px; border-radius:5px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff;
}
.pay-icon.alipay{ background:#1677ff; }
.pay-icon.wx{ background:#07c160; }