/* ============ 柔和暗色 · 视觉分级设计 ============ */
:root{
  /* 白底黑字明亮版 */
  --bg:#f5f6f8;         /* 页面底 暖白 */
  --card:#ffffff;       /* 卡片 */
  --card2:#f0f1f4;      /* 卡片内嵌层/hover */
  --line:#e2e4e9;       /* 分隔线 */
  --line-soft:#e9eaee;
  /* 文字：主文/次文/弱提示 三级层次 */
  --txt:#1f2329;        /* 主文字 近黑 */
  --txt2:#5c6470;       /* 次文字 深灰 */
  --muted:#9aa1ad61;    /* 弱化 */
  --muted2:#8a90a0;     /* 弱提示 */
  /* 语义色：白底加深保证可读 */
  --pri:#3b5bdb;        /* 主色 深蓝 */
  --pri-dim:#3b5bdb1a;
  --ok:#1e7a4f;         /* 深绿 */
  --ok-dim:#1e7a4f1a;
  --warn:#b07d2b;       /* 深琥珀 */
  --warn-dim:#b07d2b1a;
  --err:#c0392b;        /* 深红 */
  --err-dim:#c0392b1a;
  --info:#2c6fbb;      /* 深青蓝 */
  --gold:#8a6d1f;      /* 金额 深金 */
}
/* 调用日志: 耗时色阶需适配白底（原亮色白底看不清） */
.t-ok  { color: #1e7a4f; }
.t-w1  { color: #b07d2b; }
.t-w2  { color: #c96a1b; }
.t-w3  { color: #c0392b; }
.t-w4  { color: #8b1a1a; font-weight: 700; }
.t-sub { color: var(--txt2); }
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;font-size:13.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--pri-dim)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#39415280}
::-webkit-scrollbar-track{background:transparent}

/* ---- 布局 ---- */
.layout{display:flex;min-height:100vh}
.side{width:212px;background:var(--card);border-right:1px solid var(--line-soft);padding:18px 0;flex-shrink:0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.logo{padding:2px 22px 16px;font-size:16.5px;font-weight:700;letter-spacing:.5px}
.logo span{color:var(--pri);font-weight:500;margin-left:6px;font-size:12.5px}
.logo .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:8px;box-shadow:0 0 6px var(--ok);vertical-align:2px}
nav{flex:1}
.nav-item{display:flex;align-items:center;gap:11px;padding:10.5px 22px;color:var(--txt2);cursor:pointer;border-left:2.5px solid transparent;user-select:none;transition:all .16s;font-size:13.5px}
.nav-item:hover{color:var(--txt);background:var(--card2)}
.nav-item.active{color:var(--pri);border-left-color:var(--pri);background:linear-gradient(90deg,var(--pri-dim),transparent 70%)}
.nav-item .ic{width:19px;text-align:center;font-size:14px;opacity:.85}
.nav-item.has-sub .arrow{margin-left:auto;font-size:10px;transition:transform .18s;color:var(--muted2)}
.nav-item.has-sub.open .arrow{transform:rotate(90deg)}
.nav-sub{display:none}
.nav-sub.open{display:block}
.nav-sub .nav-item{padding-left:48px;font-size:12.5px;color:var(--muted2)}
.nav-sub .nav-item.active{color:var(--pri)}
.nav-sub .nav-item:hover{color:var(--txt)}
.side-foot{padding:14px 22px;border-top:1px solid var(--line-soft);color:var(--muted2);font-size:11px;line-height:1.7}
.main{flex:1;padding:24px 30px;overflow:auto;max-width:1460px}
.page{display:none;animation:fadein .18s ease}
.page.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- 头部 ---- */
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
h2{font-size:20px;font-weight:800;letter-spacing:.3px;color:var(--txt)}
.head .sub{color:var(--muted2);font-size:10.5px;margin-top:4px;font-weight:400;letter-spacing:.2px;opacity:.82}
.head-act{display:flex;gap:9px;align-items:center}

/* ---- 卡片/表格 ---- */
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:11px;margin-bottom:16px;box-shadow:0 1px 3px #00000030}
.card+.card, .stats+.card{margin-top:0}
.card-h{padding:13px 19px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-h b{font-size:14px;font-weight:600}
.card-b{padding:17px 19px}
table{table-layout:fixed;width:100%;border-collapse:collapse}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--line-soft);font-size:13px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
th{color:var(--muted2);font-weight:600;font-size:11px;text-transform:none;letter-spacing:.3px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--card2)}
td .sub2{color:var(--muted2);font-size:11px;display:block;margin-top:1px}
.tbl-note{font-size:10.5px;color:var(--muted2);opacity:.85}
.pager{display:flex;justify-content:space-between;align-items:center;padding:11px 19px;border-top:1px solid var(--line-soft)}
.pager .info{color:var(--muted2);font-size:12px}
.pager .btns{display:flex;gap:8px;align-items:center}
.pagenum{color:var(--txt2);font-size:12.5px;min-width:70px;text-align:center;font-variant-numeric:tabular-nums}

/* ---- 元素 ---- */
.mono{font-family:inherit;font-size:13px}
.badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 10px;border-radius:20px;font-size:11px;font-weight:500;letter-spacing:.2px}
.b-ok{background:var(--ok-dim);color:var(--ok)}
.b-off{background:var(--err-dim);color:var(--err)}
.b-warn{background:var(--warn-dim);color:var(--warn)}
.b-err{background:rgba(239,68,68,.14);color:var(--err)}
.b-ch{background:var(--pri-dim);color:var(--pri)}
.b-info{background:#8fb7de1f;color:var(--info)}
.b-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--txt);cursor:pointer;font-size:12.5px;user-select:none;transition:all .15s}
.btn:hover{border-color:var(--pri);color:#fff}
.btn-pri{background:linear-gradient(135deg,#7c9cf5,#6b8bef);border-color:#7c9cf555;color:#fff;box-shadow:0 2px 8px #7c9cf530}
.btn-pri:hover{filter:brightness(1.08);color:#fff}
.btn-sm{padding:4px 11px;font-size:12px;border-radius:7px}
.btn-ghost{background:transparent;border-color:transparent;color:var(--txt2)}
.btn-danger{color:var(--err);border-color:#e08d8d55}
.btn-danger:hover{background:var(--err-dim)}
.btn-good{color:var(--ok);border-color:#79c2a255}
.btn-good:hover{background:var(--ok-dim)}
.btn-ghost:hover{color:var(--pri);border-color:transparent;background:var(--pri-dim)}
.btn:disabled{opacity:.4;cursor:not-allowed}
input,select{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:7.5px 11px;font-size:13px;outline:none;transition:border .15s}
input:focus,select:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-dim)}
input::placeholder{color:var(--muted2)}
input.nu{width:86px;text-align:center}
.search{width:230px}
.help{color:var(--muted2);font-size:11px;margin-top:6px;line-height:1.6}
.empty{color:var(--muted2);text-align:center;padding:40px;font-size:13px}

/* ---- 统计卡 ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px;margin-bottom:18px}
.stat{background:linear-gradient(160deg,var(--card),var(--card2));border:1px solid var(--line-soft);border-radius:11px;padding:16px 18px;position:relative;overflow:hidden;transition:border-color .15s}
.stat:hover{border-color:#39415299}
.stat .num{font-size:25px;font-weight:700;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.stat .lbl{color:var(--muted2);font-size:11px;margin-top:4px}
.stat .ic{position:absolute;right:13px;top:13px;font-size:17px;opacity:.5}
.stat.c-pri .num{color:var(--pri)} .stat.c-ok .num{color:var(--ok)}
.stat.c-gold .num{color:var(--gold)} .stat.c-warn .num{color:var(--warn)}
.stat.c-err .num{color:var(--err)} .stat.c-info .num{color:var(--info)}

/* ---- 模型块 ---- */
.model-block{border:1px solid var(--line-soft);border-radius:11px;margin-bottom:13px;overflow:hidden;background:var(--card);transition:border-color .15s}
.model-block:hover{border-color:#39415280}
.model-h{display:flex;align-items:center;gap:12px;padding:12px 18px;background:linear-gradient(90deg,var(--card2),transparent);flex-wrap:wrap}
.model-h .mname{font-family:Consolas,monospace;font-size:14.5px;font-weight:600;color:var(--pri);letter-spacing:.3px}
.model-h .st{color:var(--muted2);font-size:11.5px}
.model-h .sp{flex:1}
.ch-row{display:flex;align-items:center;gap:12px;padding:8.5px 18px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.ch-row:first-of-type{border-top:none}
.ch-row .cname{min-width:190px;font-size:13px;display:flex;align-items:center;gap:8px}
.ch-row .cid{color:var(--muted2);font-size:11.5px}
.ch-row label{color:var(--muted2);font-size:11.5px}
.ch-row .actions{margin-left:auto;display:flex;gap:7px}
.prio-hi{color:var(--warn);font-weight:600}
.money{color:var(--gold);font-variant-numeric:tabular-nums}
.tk{color:var(--info);font-variant-numeric:tabular-nums}

/* ---- 弹窗 ---- */
.modal-mask{position:fixed;inset:0;background:#05070bcc;backdrop-filter:blur(3px);z-index:50;display:none;align-items:flex-start;justify-content:center;padding-top:2.5vh}
.modal-mask.show{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:13px;width:620px;max-width:96vw;max-height:94vh;overflow:auto;box-shadow:0 18px 60px #00000080;animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}}
.modal-h{padding:15px 21px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:14.5px}
.modal-h .x{cursor:pointer;color:var(--muted2);font-size:15px;padding:2px 6px;border-radius:6px}
.modal-h .x:hover{color:var(--txt);background:var(--card2)}
.modal-b{font-size:13.5px;padding:16px 20px}
.fgrp{margin-bottom:14px}
.hint{color:var(--muted2);font-size:12.5px;margin:0 0 7px;line-height:1.5;font-weight:400}
.fgrp>label{display:block;color:var(--txt);font-size:13px;margin-bottom:3px;font-weight:600;letter-spacing:.2px}
.log-chip{border-radius:999px}
.log-chip.active{background:var(--pri,var(--pri));color:#fff}
.stat-chip{white-space:nowrap;cursor:default}
.stat-chip:hover{border-color:var(--line);color:var(--txt)}
.stat-chip b{font-variant-numeric:tabular-nums;font-weight:700}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.mcell{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line-soft);border-radius:8px;padding:6px 10px}
.mcell:hover{border-color:#39415299}

/* ---- toast ---- */
.toast{position:fixed;top:20px;right:20px;padding:12px 19px;border-radius:10px;z-index:99;font-size:13px;display:none;box-shadow:0 8px 30px #00000066;animation:pop .2s ease}
.toast.ok{background:#16241d;color:var(--ok);border:1px solid #79c2a266;display:block}
.toast.err{background:#291a1a;color:var(--err);border:1px solid #e08d8d66;display:block}

/* ---- 仪表盘 ---- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:1100px){.grid2{grid-template-columns:1fr}}
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:172px;padding:22px 4px 0}
.bar{flex:1;background:linear-gradient(180deg,var(--pri),#7c9cf560);border-radius:5px 5px 0 0;min-height:2px;position:relative;transition:filter .15s;cursor:default}
.bar:hover{filter:brightness(1.25)}
/* 柱顶常显数值（非零才显示），肉眼直接读数 */
.bar .v{position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:600;color:var(--txt2);white-space:nowrap;font-variant-numeric:tabular-nums}
.bar.zero .v{display:none}
.bar .tip{position:absolute;bottom:calc(100% + 22px);left:50%;transform:translateX(-50%);background:#0c0e14;border:1px solid var(--line);padding:4px 9px;border-radius:7px;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:5}
.bar:hover .tip{opacity:1}
.bar-lbls{display:flex;gap:10px;margin-top:6px}
.bar-lbls span{flex:1;text-align:center;color:var(--muted2);font-size:10.5px}
.loading-anim{color:var(--muted2);text-align:center;padding:40px;font-size:13px}
.loading-anim::after{content:"…";animation:dots 1.2s infinite steps(4)}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
/* ---- 展开行 (用户详情) ---- */
tr.detail-row > td{background:var(--card2)!important;padding:0}
.detail-box{padding:14px 19px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:7px;padding:2px 9px;font-size:10.5px;margin:2px 4px 2px 0;color:var(--muted2)}
.chip .m{font-size:10.5px}
.chip .m{color:var(--pri);font-family:Consolas,monospace}
.chip .d{color:var(--warn);font-weight:600}
.chip .c{color:var(--info)}
.chip.none{color:var(--muted2);border-style:dashed}
.mini-tbl{width:100%;border-collapse:collapse}
.mini-tbl th{padding:6px 10px;font-size:11px;color:var(--muted2);border-bottom:1px solid var(--line-soft);text-align:left}
.mini-tbl td{padding:7px 10px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.cp-mrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-soft)}
.cp-mrow .mn{min-width:150px;color:var(--pri);font-family:Consolas,monospace;font-size:13px}
.cp-mrow select{flex:1;max-width:250px}
/* ===== 表格统一布局 ===== */
table{table-layout:fixed}
th,td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td .chip{white-space:nowrap}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px;flex-wrap:wrap}
.pager select.pagesize{background:var(--card2);border:1px solid var(--line);color:var(--txt2);border-radius:7px;padding:3px 6px;font-size:12px;margin-left:2px}

/* ===== 调用日志: 0xtoken 风格 —— 全表 14px 系统字体 ===== */
#logs-body td, #page-logs td { font-size: 14px; color: var(--txt); }
#page-logs th { font-size: 13px; color: var(--txt2); font-weight: 500; }
/* 胶囊徽章: 深字 + 15% 同色底 */
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 1.6; white-space: nowrap; background: var(--card2); color: var(--txt2); }
.pill-done { background: rgba(20, 100, 64, .18); color: #146640; font-weight: 600; }
.pill-fail { background: rgba(192, 57, 43, .15); color: #c0392b; }
.pill-processing { background: rgba(59, 130, 246, .16); color: #2563eb; font-weight: 600; }
.pill-cancel { background: rgba(100, 116, 139, .14); color: #64748b; }
.pill-type-consume { background: rgba(59, 91, 219, .15); color: #3b5bdb; }
.pill-type-err { background: rgba(192, 57, 43, .15); color: #c0392b; }
/* Token 列: 12px 灰, 横排三段 */
.tok3 { font-size: 12px; color: #8a90a0; line-height: 1.6; }
.tok3 div { display: flex; }
.tok3 div::before { content: ''; margin-right: 0; }
/* ===== 令牌用量: 三行统一缩进 ===== */
.tk3 { line-height: 1.55; white-space: nowrap; }
.tk3 div { display: flex; gap: 6px; }
.tk3 div span:first-child { color: var(--txt2); flex: 0 0 auto; }
/* ===== 徽章: 方式/状态 底色填充, 字体统一 ===== */
.boxbadge { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 13px; line-height: 1.5; white-space: nowrap; }
.box-stream   { background: #dbeafe; color: #1d4ed8; }
.box-nostream { background: #e5e7eb; color: #4b5563; }
/* 状态: 对齐 0xtoken */
.box-done    { background: #d1fae5; color: #065f46; }
.box-fail    { background: #fee2e2; color: #991b1b; }
.box-pending { background: #dbeafe; color: #1e40af; }
.box-cancel  { background: #f1f2f4; color: #6b7280; }
.box-other   { background: #e5e7eb; color: #4b5563; }
/* ===== 模型色板: 高对比亮色, 黑底清晰可辨 ===== */
.tbl-model { font-weight: 600; letter-spacing: .3px; }


/* ===== 仪表盘: 0xtoken 风格 ===== */
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.d-cards .d-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.d-cards .d-card .lbl { font-size: 13px; color: var(--txt2); margin-bottom: 8px; }
.d-cards .d-card .num { font-size: 24px; font-weight: 600; color: var(--txt); }
.d-perf { display: flex; gap: 24px; padding: 12px 4px 4px; flex-wrap: wrap; }
.d-perf .pf { display: flex; align-items: baseline; gap: 8px; }
.d-perf .pf .k { font-size: 13px; color: var(--txt2); }
.d-perf .pf .v { font-size: 18px; font-weight: 600; }
.d-charts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.d-charts3 .card { min-width: 0; }


.usage-st { margin-left: 6px; }
.usage-st .chip.u-t { background: rgba(16,185,129,.12); color: #0a8a56; }
.usage-st .chip.u-y { background: rgba(245,158,11,.12); color: #b45309; }
/* 日志详情展开行 */
.log-row { cursor: pointer; }
.log-detail-row td { background: var(--card2); padding: 10px 14px; }
.ldet .k { display: inline-block; min-width: 70px; color: var(--txt2); font-size: 12px; margin-right: 10px; }
.ldet .v { font-size: 13px; color: var(--txt); }
.ldet-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 16px; margin-bottom: 8px; }
.ldet-err { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 4px; }
.ldet-err .v { color: #c0392b; }


.ui-toast { position:fixed; top:18px; right:18px; background:#1f2b3d; color:#fff; padding:10px 16px; border-radius:8px; z-index:9999; opacity:0; transition:.25s; pointer-events:none; }
.ui-toast.show { opacity:1; }
.ui-toast.err { background:#b3261e; }

/* ===== 2026-09-16 UI迭代: 浅蓝胶囊/表格压缩/仪表盘v2 ===== */
.pill-blue{background:#d6e9f8;color:#1f2329;font-weight:500}
th,td{padding:6px 13px}
.money{font-size:14px;font-weight:600}
.chip .m{font-size:13px;color:var(--pri);font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;font-weight:600}
.chip{font-size:12.5px}
.chip .d{font-weight:700;font-size:12.5px}
#users-body td{font-size:13.5px}
#users-body td b{font-size:14px}
.d4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.dc{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:15px 17px;cursor:pointer;transition:border-color .15s}
.dc:hover{border-color:var(--pri)}
.dc .lbl{font-size:12.5px;color:var(--txt2);margin-bottom:7px}
.dc .num{font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}
.dc .delta{font-size:11.5px;margin-top:5px;font-weight:500}
.delta.flat{color:var(--muted2)} .delta.down{color:var(--err)}
.chrow{display:flex;align-items:center;gap:13px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}
.chrow:last-child{border-bottom:0}
.chname{width:150px;display:flex;align-items:center;gap:8px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chname .cid{color:var(--muted2);font-size:11px}
.chbar{flex:1;height:26px;background:var(--card2);border-radius:6px;overflow:hidden;display:flex;position:relative}
.b-ok2{background:linear-gradient(90deg,#00968999,#009689);height:100%}
.b-err{background:var(--err);height:100%;opacity:.85}
.b-tok{background:linear-gradient(90deg,#3b82f699,#3b82f6);height:100%}
.bartxt{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:11.5px;color:#fff;font-weight:600;text-shadow:0 1px 2px #0006;white-space:nowrap}
.chmetric{width:82px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.chmetric small{display:block;font-weight:400;color:var(--muted2);font-size:10px}
.dash-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dash-dot.g{background:var(--ok);box-shadow:0 0 5px var(--ok)} .dash-dot.y{background:var(--warn);box-shadow:0 0 5px var(--warn)} .dash-dot.off{background:#b9bec9}
.rtbox{position:relative}
.rtbox svg{display:block}