/* ============================================================
   tokgoai 控制台 — 设计系统
   品牌 DNA 延续官网 styles.css(暗墨黑 + 琥珀金 + Archivo/Geist Mono +
   终端美学),但表达为 product-grade:信息密度、组件克制、状态完整。
   token 复用 styles.css 的 :root(--bg/bg2/bg3, --sig, --teal, --ok, --red,
   --ink/body/muted, --line/line-soft, --font/mono)。
   ============================================================ */

:root{
  /* 控制台专属补充 token(基于官网色域延伸) */
  --bg4: oklch(0.275 0.016 264);
  --sig-soft: oklch(0.82 0.16 78 / .08);
  --sig-line: oklch(0.82 0.16 78 / .32);
  --teal-soft: oklch(0.76 0.1 178 / .08);
  --radius: 10px;
  --radius-sm: 7px;
  /* z 轴语义层级 */
  --z-sticky: 100; --z-dropdown: 200; --z-backdrop: 300; --z-modal: 400; --z-toast: 500;
  /* 动效 */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: .15s; --t: .2s;
}

/* ---------- 顶栏 ---------- */
.cnav{position:sticky;top:0;z-index:var(--z-sticky);height:60px;
  background:oklch(0.165 0.014 264 / .9);backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--line-soft)}
.cnav-in{display:flex;align-items:center;gap:1rem;height:100%;max-width:1400px;margin-inline:auto;
  padding-inline:clamp(1rem,3vw,1.6rem)}
.cnav .brand{font-family:var(--mono);font-weight:800;letter-spacing:-0.03em;font-size:1.06rem;color:var(--ink)}
.cnav .brand small{font-size:.56rem;letter-spacing:.14em;color:var(--sig);text-transform:uppercase;margin-left:.3rem}
.cnav .crumb{font-family:var(--mono);font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:.5rem}
.cnav .crumb .sep{opacity:.4}
.cnav .crumb .on::before{content:"● ";color:var(--ok);font-size:.7em}
.cnav-right{margin-left:auto;display:flex;align-items:center;gap:.7rem}
.usermenu{font-family:var(--mono);font-size:.78rem;color:var(--body);display:flex;align-items:center;gap:.55rem;
  border:1px solid var(--line);border-radius:999px;padding:.32rem .35rem .32rem .75rem;cursor:default}
.usermenu .avatar{width:24px;height:24px;border-radius:50%;background:var(--sig-soft);border:1px solid var(--sig-line);
  color:var(--sig);display:grid;place-items:center;font-weight:700;font-size:.72rem}

/* ---------- 外壳:侧栏 + 主区 ---------- */
.cshell{display:grid;grid-template-columns:236px 1fr;max-width:1400px;margin-inline:auto;
  min-height:calc(100vh - 60px)}
.cside{border-right:1px solid var(--line-soft);padding:1.3rem .8rem;display:flex;flex-direction:column;gap:.1rem;
  position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto}
.cside .sgroup{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);opacity:.6;padding:1rem .7rem .4rem}
.cside .sgroup:first-child{padding-top:.2rem}
.cside a{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--body);
  padding:.52rem .7rem;border-radius:var(--radius-sm);position:relative;transition:background var(--t-fast),color var(--t-fast)}
.cside a .ic{width:15px;text-align:center;color:var(--muted);font-size:.82rem;transition:color var(--t-fast)}
.cside a:hover{background:var(--bg2);color:var(--ink)}
.cside a:hover .ic{color:var(--body)}
.cside a.active{background:var(--sig-soft);color:var(--ink);font-weight:500}
.cside a.active .ic{color:var(--sig)}
.cside a.active::before{content:"";position:absolute;left:-0.8rem;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--sig);border-radius:0 3px 3px 0}
.cmain{padding:clamp(1.3rem,3vw,2.2rem);min-width:0}

/* ---------- 页头 ---------- */
.chead{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem}
.chead h1{font-size:1.55rem;font-weight:700;letter-spacing:-0.025em;line-height:1.1}
.chead .csub{margin-top:.3rem;color:var(--muted);font-size:.88rem}
.chead .cactions{display:flex;gap:.6rem;align-items:center}

/* ---------- 按钮(复用官网 .btn,补 product 尺寸/状态) ---------- */
.btn{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.86rem;
  padding:.5rem .9rem;border-radius:var(--radius-sm);cursor:pointer;background:transparent;border:1px solid transparent;
  color:var(--ink);font-family:var(--font);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),opacity var(--t-fast);white-space:nowrap}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sig{background:var(--sig);color:var(--on-sig);font-family:var(--mono);box-shadow:none}
.btn-sig:hover{background:oklch(0.86 0.16 78)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{background:var(--bg2);border-color:var(--line)}
.btn-sm{padding:.34rem .7rem;font-size:.8rem}
.btn :focus-visible,.btn:focus-visible{outline:2px solid var(--sig);outline-offset:2px}

/* ---------- 数据卡(克制,非 hero-metric 模板) ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem}
.stat{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;background:var(--bg2);
  position:relative;transition:border-color var(--t-fast)}
.stat:hover{border-color:var(--line)}
.stat .slab{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.4rem}
.stat .sval{margin-top:.65rem;font-family:var(--mono);font-weight:500;font-size:1.72rem;letter-spacing:-0.02em;color:var(--ink);line-height:1}
.stat .sval.sig{color:var(--sig)}
.stat .sdelta{margin-top:.5rem;font-family:var(--mono);font-size:.76rem;display:flex;align-items:center;gap:.35rem}
.stat .sdelta.up{color:var(--ok)} .stat .sdelta.down{color:var(--red)} .stat .sdelta.flat{color:var(--muted)}

/* ---------- 面板 ---------- */
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:1.1rem;margin-top:1.1rem}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);overflow:hidden}
.panel .phd{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line-soft);font-family:var(--mono);font-size:.78rem;color:var(--body)}
.panel .phd .pttl{display:flex;align-items:center;gap:.5rem}
.panel .phd .pmeta{color:var(--muted);font-size:.74rem}
.panel .pbd{padding:1.1rem}
.panel .pbd.flush{padding:0}

/* ---------- 请求流水(品牌记忆点:官网装饰 tape → 控制台真实日志) ---------- */
.tape{font-family:var(--mono);font-size:.78rem;line-height:1.5}
.tline{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:.9rem;align-items:center;
  padding:.5rem 1.1rem;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tline:last-child{border-bottom:0}
.tline:hover{background:var(--bg3)}
.tline .tid{color:var(--muted)}
.tline .tcode{font-weight:500}
.tline .tcode.ok{color:var(--ok)} .tline .tcode.err{color:var(--red)}
.tline .tmodel{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.tline .tmodel .dot{color:var(--sig);margin-right:.4rem}
.tline .tlat{color:var(--muted)}
.tline .tcost{color:var(--teal);text-align:right}

/* ---------- 迷你柱状(7天用量,纯 CSS) ---------- */
.spark{display:flex;align-items:flex-end;gap:5px;height:96px;padding:.4rem 0}
.spark .bar{flex:1;background:var(--bg4);border-radius:3px 3px 0 0;position:relative;min-height:3px;
  transition:height .6s var(--ease),background var(--t-fast)}
.spark .bar:hover{background:var(--sig)}
.spark .bar.peak{background:var(--sig-line)}
.sparkx{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:.5rem}

/* ---------- 模型分布(横条) ---------- */
.dist{display:flex;flex-direction:column;gap:.85rem}
.distrow{display:grid;grid-template-columns:1fr;gap:.35rem}
.distrow .dtop{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.78rem}
.distrow .dtop .dn{color:var(--ink)} .distrow .dtop .dp{color:var(--muted)}
.dtrack{height:6px;background:var(--bg);border:1px solid var(--line-soft);border-radius:5px;overflow:hidden}
.dfill{height:100%;border-radius:5px;transition:width .7s var(--ease)}

/* ---------- 表格(keys/logs/transactions 统一) ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);font-weight:500;padding:.6rem 1.1rem;border-bottom:1px solid var(--line);background:var(--bg2)}
.tbl td{padding:.8rem 1.1rem;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--bg3)}
.tbl .mono{font-family:var(--mono)}

/* ---------- 徽章/状态 ---------- */
.badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;padding:.16rem .5rem;border-radius:999px;
  font-weight:500;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.badge.on{color:var(--ok);background:oklch(0.78 0.15 150 / .1);border:1px solid oklch(0.78 0.15 150 / .28)}
.badge.off{color:var(--muted);background:var(--bg3);border:1px solid var(--line)}
.badge.warn{color:var(--sig);background:var(--sig-soft);border:1px solid var(--sig-line)}
.badge .d{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------- 空状态(教育性) ---------- */
.empty{text-align:center;padding:2.6rem 1.5rem;color:var(--muted)}
.empty .eic{font-size:1.6rem;opacity:.5}
.empty .ett{margin-top:.7rem;color:var(--body);font-size:.95rem;font-weight:600}
.empty .esub{margin-top:.35rem;font-size:.85rem;max-width:34ch;margin-inline:auto;line-height:1.5}
.empty .btn{margin-top:1.1rem}

/* ---------- 骨架加载 ---------- */
.sk{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);
  background-size:200% 100%;border-radius:5px;animation:skl 1.3s linear infinite}
@keyframes skl{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------- 进入动效(克制,只在挂载时一次) ---------- */
@media(prefers-reduced-motion:no-preference){
  .rise{animation:rise .4s var(--ease) both}
  .rise.d1{animation-delay:.04s}.rise.d2{animation-delay:.08s}.rise.d3{animation-delay:.12s}.rise.d4{animation-delay:.16s}
  @keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---------- 演示横幅 ---------- */
.demobar{font-family:var(--mono);font-size:.74rem;color:var(--sig);background:var(--sig-soft);
  border-bottom:1px solid var(--sig-line);text-align:center;padding:.4rem 1rem}

/* ---------- 响应式 ---------- */
@media(max-width:760px){
  .cshell{grid-template-columns:1fr}
  .cside{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);
    padding:.6rem .8rem;gap:.3rem}
  .cside .sgroup{display:none}
  .cside a{white-space:nowrap;flex-shrink:0}
  .cside a.active::before{display:none}
  .cnav .crumb{display:none}
}

/* ---------- 登录 / 注册 ---------- */
.authnav{height:60px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;
  padding-inline:clamp(1rem,3vw,1.6rem);max-width:1400px;margin-inline:auto}
.authnav .brand{font-family:var(--mono);font-weight:800;letter-spacing:-0.03em;font-size:1.06rem;color:var(--ink)}
.authnav .brand small{font-size:.56rem;letter-spacing:.14em;color:var(--sig);text-transform:uppercase;margin-left:.3rem}
.auth-wrap{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:2rem 1.2rem;
  background:radial-gradient(120% 80% at 50% -10%,var(--sig-soft),transparent 55%)}
.auth-card{width:100%;max-width:404px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.1rem);box-shadow:0 34px 64px -34px #000}
.auth-card h1{font-size:1.5rem;letter-spacing:-0.025em}
.auth-sub{margin-top:.5rem;color:var(--muted);font-size:.9rem}
.field{margin-top:1.1rem}
.field label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;margin-bottom:.4rem}
.field input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--ink);font-family:var(--font);font-size:.95rem;padding:.65rem .8rem;transition:border-color var(--t)}
.field input:focus{outline:none;border-color:var(--sig)}
.btn-block{width:100%;justify-content:center;margin-top:1.4rem;padding:.65rem}
.auth-alt{margin-top:1.2rem;font-size:.86rem;color:var(--muted);text-align:center}
.auth-alt a{color:var(--sig);font-family:var(--mono)}
.formmsg{margin-top:1rem;font-family:var(--mono);font-size:.8rem;padding:.55rem .75rem;border-radius:var(--radius-sm);display:none}
.formmsg.err{display:block;color:var(--red);background:oklch(0.64 0.19 25 / .08);border:1px solid oklch(0.64 0.19 25 / .3)}
.formmsg.ok{display:block;color:var(--ok);background:oklch(0.78 0.15 150 / .08);border:1px solid oklch(0.78 0.15 150 / .3)}

/* ---------- API Key 页 ---------- */
.newkey{margin-bottom:1.3rem;border:1px solid var(--sig-line);border-radius:var(--radius);background:var(--sig-soft);padding:1.05rem 1.15rem}
.nktitle{font-family:var(--mono);font-size:.8rem;color:var(--sig);margin-bottom:.65rem}
.nkrow{display:flex;align-items:center;gap:.6rem}
.nkval{flex:1;min-width:0;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .7rem;font-size:.84rem;color:var(--ink);white-space:nowrap}
.nkinput{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.55rem .7rem;font-size:.88rem;color:var(--ink);font-family:var(--mono)}
.nkinput:focus{outline:none;border-color:var(--sig)}
.keycode{font-family:var(--mono);font-size:.82rem;color:var(--body)}

/* ---------- 接入信息:代码块 / 提示 ---------- */
.codeblock{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:.82rem;padding:.85rem 1rem;display:flex;align-items:flex-start;
  justify-content:space-between;gap:1rem}
.codeblock code{white-space:pre;overflow-x:auto;color:var(--body);line-height:1.75;flex:1}
.codeblock code .tk{color:var(--sig)}
.codeblock code .cm{color:var(--muted)}
.codeblock .btn{flex-shrink:0}
.note{display:flex;gap:.7rem;align-items:flex-start;border:1px solid var(--sig-line);background:var(--sig-soft);
  border-radius:var(--radius);padding:1rem 1.1rem;margin-top:1.1rem}
.note .nic{color:var(--sig);font-size:1rem;line-height:1.4}
.note .ntx{color:var(--body);font-size:.88rem;line-height:1.6}
.note .ntx b{color:var(--ink)}