/* =================================================================
   快狗AI 管理端 — 浅色一致风格 / 全宽
================================================================= */

:root{
  --fg:#0f172a; --muted:#64748b; --bg:#f1f5f9; --card:#fff; --border:#e2e8f0;
  --primary:#2563eb; --primary-hover:#1d4ed8; --danger:#dc2626; --ok:#16a34a;

  /* 三色高亮（仅用于强调，不做大背景） */
  --c-cache:#0891b2;       /* 青 */
  --c-cache-soft:#ecfeff;
  --c-simple:#059669;      /* 绿 */
  --c-simple-soft:#ecfdf5;
  --c-complex:#7c3aed;     /* 紫 */
  --c-complex-soft:#f5f3ff;

  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg: 0 4px 12px rgba(15,23,42,.08), 0 10px 24px rgba(15,23,42,.08);
  --radius: 8px;
  --pad-x: 32px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Helvetica,Arial,
              'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  background:var(--bg);color:var(--fg);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
code,.mono{font-family:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;font-size:12.5px}
fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;margin:14px 0;background:#fafbfc}
legend{padding:0 8px;color:var(--muted);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}

/* ===== Nav ===== */
.navbar{
  display:flex;align-items:center;background:#0f172a;color:#e2e8f0;
  padding:0 var(--pad-x);height:56px;position:sticky;top:0;z-index:10;
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.navbar .brand{font-weight:700;font-size:15px;margin-right:32px;letter-spacing:.02em}
.navbar .brand::before{content:"⚡";margin-right:6px}
.navbar .nav-links{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex:1}
.navbar .nav-links a{color:#94a3b8;padding:8px 14px;border-radius:6px;font-size:13.5px;transition:all .15s ease;text-decoration:none}
.navbar .nav-links a:hover{color:#fff;background:rgba(255,255,255,.06)}
.navbar .nav-links a.active{color:#fff;background:rgba(37,99,235,.22)}
.navbar .nav-right{display:flex;align-items:center;gap:14px;color:#94a3b8;font-size:13px}
.navbar .link{background:none;border:none;color:#fca5a5;cursor:pointer;font-size:13px}
.navbar .link:hover{color:#f87171}

/* ===== 主容器全宽 ===== */
.container{max-width:none;margin:0;padding:28px var(--pad-x)}

h1{margin:0 0 14px 0;font-size:22px;font-weight:700}
h2{margin:24px 0 12px;font-size:17px}
.hint{color:var(--muted);margin:4px 0 16px;font-size:13px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.row-tools{display:flex;align-items:center;gap:10px}
.row-tools select{width:auto}
.row-tools .clock{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;letter-spacing:.04em;padding:4px 8px;background:#fff;border:1px solid var(--border);border-radius:6px}

/* ===== Tables ===== */
table.data{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
table.data th,table.data td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}
table.data th{background:#f8fafc;color:#475569;font-weight:600;font-size:12.5px;letter-spacing:.02em}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:#fafbfc}
table.data.small td,table.data.small th{padding:7px 10px;font-size:12.5px}
table.data tr.row-err td{background:#fef2f2}
.err-cell{color:var(--danger);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-block;padding:2px 9px;border-radius:12px;background:#e0e7ff;color:#3730a3;font-size:11.5px;font-weight:500}
.muted{color:var(--muted)}
.center{text-align:center}
td.right, th.right{text-align:right}

/* ===== Panels / Cards ===== */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin:14px 0;box-shadow:var(--shadow)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.panel-head h3{margin:0;font-size:14px;font-weight:600;color:#475569;letter-spacing:.06em;text-transform:uppercase}

/* 通用次级卡片（多列） */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0 20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.card-label{color:var(--muted);font-size:12px}
.card-value{font-size:22px;font-weight:700;margin-top:6px;color:var(--fg);font-feature-settings:"tnum" 1}

/* ===== Forms ===== */
label{display:block;margin:12px 0;color:#334155;font-size:13px;font-weight:500}
label.checkbox{display:flex;align-items:center;gap:9px;margin:10px 0;font-weight:400}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--border);border-radius:6px;
  font:inherit;background:#fff;margin-top:5px;transition:border-color .15s, box-shadow .15s
}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)
}
input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}
textarea{font-family:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;font-size:12.5px;resize:vertical;line-height:1.5}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:720px){.grid-2{grid-template-columns:1fr}}

/* ===== Buttons ===== */
.btn{background:#fff;border:1px solid var(--border);padding:7px 16px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500;transition:all .15s ease}
.btn:hover{background:#f8fafc;border-color:#cbd5e1}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
button.link{background:none;border:none;color:var(--primary);cursor:pointer;padding:0 6px;font:inherit;font-size:13px}
button.link:hover{text-decoration:underline}
button.link.danger{color:var(--danger)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.err{color:var(--danger);margin-top:10px;font-size:13px}
.ok{color:var(--ok);margin-left:12px;font-size:13px}
.info{margin-top:14px;padding:12px 14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:6px;word-break:break-all;font-size:13px}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:20;padding:24px;animation:fadeIn .15s ease}
.modal-inner{background:#fff;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:12px;padding:24px 28px;box-shadow:var(--shadow-lg);animation:popIn .15s ease}
.modal-inner.wide{max-width:820px}
.modal-inner h3{margin-top:0;font-size:17px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ===== Login ===== */
.login-box{max-width:360px;margin:88px auto;background:#fff;padding:32px 36px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow-lg)}
.login-box h2{margin:0 0 22px;font-size:19px;text-align:center}
.login-box button{width:100%;margin-top:14px;padding:10px;background:var(--primary);color:#fff;border:none;border-radius:6px;font:inherit;font-weight:500;cursor:pointer;transition:background .15s}
.login-box button:hover{background:var(--primary-hover)}
.login-box button:disabled{opacity:.6;cursor:not-allowed}


/* =================================================================
   总览页 — 浅色一致风格
================================================================= */

.metric-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 20px;
}
@media (max-width:900px){.metric-cards{grid-template-columns:1fr}}

.metric-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.metric-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.metric-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
}
.metric-card.cache  {--accent:var(--c-cache);   --accent-soft:var(--c-cache-soft)}
.metric-card.simple {--accent:var(--c-simple);  --accent-soft:var(--c-simple-soft)}
.metric-card.complex{--accent:var(--c-complex); --accent-soft:var(--c-complex-soft)}

.metric-head{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:12px}
.metric-icon{
  width:30px;height:30px;display:grid;place-items:center;border-radius:8px;
  background:var(--accent-soft);font-size:16px;
}
.metric-name{flex:1;font-weight:500;color:#475569}

.metric-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.metric-num{
  font-size:32px;font-weight:700;line-height:1;color:var(--fg);
  font-feature-settings:"tnum" 1;letter-spacing:-.01em;
}
.metric-pct{font-size:15px;font-weight:600;color:var(--accent);font-feature-settings:"tnum" 1}

.metric-bar{height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden;margin-bottom:10px}
.metric-bar .bar{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.cache-bar  {background:var(--c-cache)}
.simple-bar {background:var(--c-simple)}
.complex-bar{background:var(--c-complex)}

.metric-foot{font-size:12.5px;color:var(--muted)}

/* --- 堆叠分布条 --- */
.stack-track{
  display:flex;height:24px;border-radius:6px;overflow:hidden;
  background:#f1f5f9;border:1px solid var(--border);
}
.stack-track .seg{
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12px;
  transition:width .6s cubic-bezier(.4,0,.2,1);min-width:0;
}
.stack-track .seg:not(:last-child){box-shadow:inset -1px 0 0 rgba(255,255,255,.4)}

.stack-legend{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:#475569}
.stack-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.stack-legend .dot.cache  {background:var(--c-cache)}
.stack-legend .dot.simple {background:var(--c-simple)}
.stack-legend .dot.complex{background:var(--c-complex)}
.stack-legend b{font-feature-settings:"tnum" 1;color:var(--fg);margin-left:3px;font-weight:600}
.stack-legend .save{margin-left:auto;color:var(--c-simple)}
.stack-legend .save b{color:var(--c-simple)}

/* --- TOP 模型表 --- */
.top-table td.bar-cell{width:50%;padding:10px 14px}
.top-table td.bar-cell .bar-mini{height:8px;background:linear-gradient(90deg,var(--primary),var(--c-complex));border-radius:4px;transition:width .6s}


/* =================================================================
   通用：帮助折叠块、空状态、警告
================================================================= */

details.help{
  background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;
  padding:8px 14px;margin:10px 0 16px;font-size:13.5px;color:#1e3a8a;
}
details.help summary{cursor:pointer;font-weight:600;user-select:none;padding:4px 0}
details.help[open] summary{margin-bottom:6px}
details.help ol, details.help ul{margin:6px 0 8px;padding-left:22px;line-height:1.8}
details.help li{margin-bottom:2px}
details.help code{background:#dbeafe;padding:1px 6px;border-radius:3px;font-size:12px}
details.help a{color:#1d4ed8;font-weight:500}
details.help p{margin:6px 0}

.warn-box{
  background:#fef3c7;border:1px solid #fde68a;color:#78350f;
  padding:12px 16px;border-radius:8px;margin:12px 0;font-size:13.5px;
}
.warn-box a{color:#78350f;text-decoration:underline;font-weight:600}

.empty-state{
  text-align:center;padding:48px 24px;background:var(--card);
  border:1px dashed var(--border);border-radius:12px;margin:14px 0;
}
.empty-state .empty-icon{font-size:42px;margin-bottom:12px}
.empty-state h3{margin:0 0 8px;font-size:17px;color:var(--fg)}
.empty-state p{margin:4px 0;color:var(--muted);font-size:13.5px}

.code-list{
  max-height:380px;overflow:auto;background:#0f172a;color:#e2e8f0;
  border-radius:6px;padding:12px 14px;margin:10px 0;
}
.code-list .mono{display:block;padding:2px 0;font-size:12.5px}

.smaller{font-size:12px}