/* 灵枢AI 控制台设计令牌 v2（对标细节修正 2026-10-16；developer/operator 两端同源维护）
   修正：浅灰底+纯白卡片（分区辨识）、hover 特效、元素尺寸放大、图表容器规范 */
:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --card-bg: #f6f7f9;
  --surface-2: #edeff4;
  --card-border: #e9ecf1;
  --radius: 12px;
  --primary: #0891B2;
  --primary-strong: #0E7490;
  --primary-soft: #e2f7fb;
  --chart-grad: linear-gradient(180deg, #0891B2, #06B6D4);
  --text: #111827;
  --text-2: #6b7280;
  --text-3: #6b7280;
  --ok: #10b981;
  --bad: #ef4444;
  --warn: #f59e0b;
  /* A-4 语义色阶（bg/border/text/hover 四阶） */
  --ok-bg: #e7f8f1; --ok-border: #b7ecd8; --ok-text: #0f9d6c; --ok-hover: #0da271;
  --bad-bg: #fdecec; --bad-border: #f6c9c9; --bad-text: #dc2626; --bad-hover: #e03535;
  --warn-bg: #fdf3e2; --warn-border: #f5ddb0; --warn-text: #b45309; --warn-hover: #d97706;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 6px 18px rgba(17, 24, 39, 0.08);
  --sidebar-w: 232px;
  --topbar-h: 56px;
  /* A-7 间距/字号刻度 */
  --space-0: 2px; --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 14px; --space-6: 16px; --space-7: 18px; --space-8: 20px; --space-9: 22px; --space-10: 24px; --space-11: 26px; --space-12: 30px; --space-13: 44px; --space-x1: 6px; --space-x2: 7px; --space-x3: 9px;
  --fs-xs: 10px; --fs-sm: 11px; --fs-md: 12px; --fs-base: 13px; --fs-lg: 13.5px; --fs-xl: 15px; --fs-2xl: 20px; --fs-3xl: 26px;
  /* A-1 z-index 刻度 */
  --z-base: 0; --z-sticky: 5; --z-drawer: 20; --z-drawer-box: 21; --z-modal: 30; --z-login: 60; --z-toast: 99;
  --font: -apple-system, "Segoe UI", "Microsoft YaHei", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.6 var(--font);
}
a { color: var(--primary); text-decoration: none; }

/* 布局壳 */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: #fff; border-right: 1px solid var(--card-border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--space-5) var(--space-3);
}
.brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-x1) var(--space-3) var(--space-6); }
.brand .brand-mark { display: block; }
.brand .logo {
  width: 32px; height: 32px; border-radius: 9px; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-xl);
}
.brand .name { font-weight: 700; font-size: var(--fs-xl); }
.brand .ver { font-size: var(--fs-xs); color: var(--text-3); }
.nav-group { margin-top: var(--space-6); }
.nav-group > .g-title { font-size: var(--fs-md); color: #8a92a3; font-weight: 600; padding: 0 var(--space-3) var(--space-x1); letter-spacing: 0.5px; }
.nav-item {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin: var(--space-0) 0;
  border-radius: 9px; color: var(--text-2); cursor: pointer; user-select: none;
  font: inherit; font-size: var(--fs-lg); transition: background 0.15s, color 0.15s;
}
button.nav-item { text-align: left; border: none; background: transparent; width: 100%; }
button.nav-item:hover { border-color: transparent; }
.nav-item:hover { background: var(--card-bg); color: var(--text); }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-item.hidden-by-toggle { display: none !important; }
.main { flex: 1; min-width: 0; }
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-9); background: rgba(246, 247, 249, 0.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--card-border); position: sticky; top: 0; z-index: var(--z-sticky);
}
.topbar .crumb { font-weight: 600; font-size: var(--fs-xl); }
.topbar .spacer { flex: 1; }
.content { padding: var(--space-x1) var(--space-9) var(--space-13); }

/* 卡片：纯白 + 边框 + 轻阴影，hover 微抬（对标分区辨识度） */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin: var(--space-5) 0; }
.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: var(--space-7) var(--space-8); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card .k { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); color: var(--text-2); }
.card .k .ico {
  width: 24px; height: 24px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: var(--fs-base);
}
.card .v { font-size: var(--fs-3xl); font-weight: 700; margin-top: 8px; letter-spacing: -0.6px; line-height: 1.25; }
.card .s { font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px; min-height: 15px; }
/* A-5 图标方块：浅彩底 + 同色字形（替代实心底白字形） */
.i-blue { background: #e8f0fe; color: #3b82f6; } .i-green { background: #e7f8f1; color: #0f9d6c; } .i-orange { background: #fdf3e2; color: #c2690a; }
.i-purple { background: #e2f7fb; color: #0E7490; } .i-pink { background: #fdeaf3; color: #ec4899; } .i-cyan { background: #e2f7fb; color: #0891b2; }

/* 表格：白卡容器 + 边框 */
table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th { text-align: left; font-size: var(--fs-md); color: var(--text-2); font-weight: 500; padding: var(--space-3) var(--space-4); background: var(--card-bg); white-space: nowrap; border-bottom: 1px solid #dde1e8; }
td { padding: var(--space-4) var(--space-4); border-top: 1px solid var(--card-border); font-size: var(--fs-base); text-align: left; line-height: 1.45; transition: background 0.12s; }
/* 模型/名称列限宽省略（悬浮 title 看全名由渲染层 title 提供） */
table th:first-child, table td:first-child { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
tr:hover td { background: #f2f4f8; }
/* A-2 数字列右对齐（表头同名类对齐）；文本列左对齐 */
.num, th.num { font-variant-numeric: tabular-nums; text-align: right; }
td.empty { text-align: center; color: var(--text-3); padding: var(--space-12); }
/* 表格内操作按钮不折行（中文可在任意字符间断行，窄操作列会把按钮拆成两行） */
td button, td .btn { white-space: nowrap; }

/* 徽标 */
.badge { display: inline-block; padding: var(--space-0) var(--space-x3); border-radius: 999px; font-size: var(--fs-sm); line-height: 18px; white-space: nowrap; }
.badge.ok { background: #e7f8f1; color: var(--ok); border: 1px solid var(--ok-border); }
.badge.bad { background: #fdecec; color: var(--bad); border: 1px solid var(--bad-border); }
.badge.warn { background: #fdf3e2; color: var(--warn); border: 1px solid var(--warn-border); }
.badge.muted { background: var(--card-bg); color: var(--text-2); border: 1px solid var(--card-border); }
.badge.tier { background: #eefaf3; color: #0f9d6c; border: 1px solid var(--ok-border); }
.badge.addon { background: var(--card-bg); color: var(--text-3); border: 1px solid var(--card-border); }

/* 控件（统一 hover 过渡） */
button, .btn {
  font: inherit; font-size: var(--fs-base); padding: var(--space-x1) var(--space-5); border-radius: 9px;
  border: 1px solid var(--card-border); background: #fff; color: var(--text); cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
button:hover { border-color: #d5d9e0; box-shadow: var(--shadow-sm); }
button:active { transform: translateY(1px); }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover { background: var(--primary-strong); box-shadow: 0 3px 10px rgba(8, 145, 178, 0.35); }
/* B-3 高危操作警示按钮（死信重放/驳回等；视觉警示，确认弹窗归 P5-5） */
button.danger { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-text); }
button.danger:hover { background: var(--bad-hover); border-color: var(--bad-hover); color: #fff; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
input, select {
  font: inherit; font-size: var(--fs-base); padding: var(--space-x2) var(--space-3); border-radius: 9px;
  border: 1px solid var(--card-border); background: #fff; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* A-3 键盘焦点可见：与 input focus 同款湖青环（仅键盘触发，鼠标点击不显示） */
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-soft); border-radius: 6px; }
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.note { color: var(--text-2); font-size: var(--fs-md); }
.section-title { font-size: var(--fs-xl); font-weight: 700; margin: var(--space-10) 0 var(--space-3); }
h2 { font-size: var(--fs-2xl); margin: var(--space-2) 0; }

/* 图表容器（白卡 + 规范留白）与图表元素交互 */
.chart-box, #us-trend, #an-day-chart, #lat-dist { background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-sm); }
svg rect:hover { opacity: 0.78; }
svg path:hover { opacity: 0.9; }

/* 开关 */
.switch { position: relative; width: 36px; height: 20px; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: #d6d9e0; transition: background 0.15s; cursor: pointer; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { left: 18px; }

/* 抽屉/弹层 */
.drawer-mask { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.35); z-index: var(--z-drawer); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw;
  background: #fff; z-index: var(--z-drawer-box); padding: var(--space-7); overflow-y: auto; box-shadow: -8px 0 24px rgba(0,0,0,0.06);
}
.drawer h3 { margin: 0 0 var(--space-4); font-size: var(--fs-xl); }
.field { margin: var(--space-4) 0; }
.field label { display: block; font-size: var(--fs-md); color: var(--text-2); margin-bottom: 5px; }
.field input, .field select { width: 100%; }
.modal-mask { position: fixed; inset: 0; background: rgba(17,24,39,0.35); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; }
.modal { background: #fff; border-radius: 14px; padding: var(--space-9); width: 480px; max-width: 94vw; margin-top: 8vh; max-height: 84vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.modal h3 { margin: 0 0 var(--space-4); }

/* 进度条 */
.bar { height: 6px; border-radius: 4px; background: #e8eaf0; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.3s ease; }

/* toast */
#toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; padding: var(--space-x3) var(--space-7); border-radius: 10px;
  font-size: var(--fs-base); z-index: var(--z-toast); display: none; box-shadow: var(--shadow-md);
}

/* 账单页内页签（独立于全局导航） */
.btab-btn { border-radius: 9px 9px 0 0; border-bottom: none; }
.btab-btn.active { background: #fff; color: var(--primary); font-weight: 600; border-color: var(--card-border); }

/* M3-P2 管理登录遮罩（复用现有设计令牌，无新视觉体系） */
#login-mask { position: fixed; inset: 0; background: rgba(17, 24, 39, 0.35); z-index: var(--z-login); display: flex; align-items: center; justify-content: center; }
#login-mask[hidden] { display: none; }
#login-mask .login-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: var(--space-10); width: 360px; max-width: 92vw; box-shadow: var(--shadow-md); }
#login-mask .login-brand { font-weight: 700; font-size: var(--fs-base); color: var(--primary); margin-bottom: 10px; }
#login-mask .field { margin: var(--space-3) 0; }
#login-mask .login-err { background: #fdecec; color: var(--bad); border-radius: 9px; padding: var(--space-2) var(--space-4); font-size: var(--fs-base); margin: var(--space-3) 0; }

/* M3-P5-3 结构与空态批（两端同源追加） */
.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.table-scroll > table { border: none; box-shadow: none; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px; background: #fff; border: 1px solid var(--card-border); border-radius: var(--radius); text-align: center; }
.empty-state h2 { margin: 4px 0 0; }
.empty-state .s { font-size: 13px; color: var(--text-2); max-width: 420px; }
.empty-state .primary { margin-top: 6px; }
.empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.card-locked { opacity: 0.62; }
.card-locked .v, .card-locked .bar { filter: grayscale(1); }
.nav-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
#login-mask .login-logo { display: block; margin: 0 auto 8px; }
#login-mask .login-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* M3-P5-5-a 写操作收口批（两端同源追加）：危险确认弹窗 + 提交中状态 */
.modal.danger-modal { width: 520px; }
.modal .d-row { font-size: 13px; line-height: 1.7; margin: 6px 0; }
.modal .d-row b { color: var(--text-2); font-weight: 500; }
.modal .d-err { background: #fdecec; color: var(--bad); border-radius: 9px; padding: 8px 12px; font-size: 12.5px; margin: 10px 0; }
.modal .field input { width: 100%; }
.is-submitting { opacity: 0.7; cursor: wait !important; }

/* M3-P5-5-b 列表七态（两端同源追加） */
.list-state { padding: 8px; }
.list-state-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; }
.list-state-block { padding: 8px 0; }
.list-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.list-title { font-weight: 600; font-size: 14px; }
.list-desc { font-size: 12px; color: var(--text-2); max-width: 420px; text-align: center; }

/* M4B-037 双端视觉打磨（两端同源追加） */
/* V-1 内联线稿图标：侧栏 nav-ico 16px / 空态 empty-ico 28px；stroke 1.5px、currentColor、24 viewBox、无填充 */
.nav-item svg.nav-ico { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.empty-icon svg.empty-ico { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
/* V-4 表格扫读：滚动容器内 sticky 表头（z-index 低于 --z-sticky） */
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }
/* V-5 空态按钮 ghost 化（disabled 功能状态不动，仅降视觉权重） */
.empty-state .primary:disabled { background: transparent; border-color: var(--card-border); color: var(--text-2); box-shadow: none; opacity: 1; }
.empty-state .primary:disabled:hover { background: transparent; border-color: var(--card-border); box-shadow: none; }
/* V-6 disabled 不响应 hover 阴影（避免"看起来能点"） */
button:disabled:hover { border-color: var(--card-border); box-shadow: none; }

/* M4B-043 图标槽位与行内 SVG：与 037 nav-ico/empty-ico 同源（viewBox 24 / stroke 1.5 / currentColor / 无填充） */
.card .k .ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
.list-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
svg.ico-inline { width: 1em; height: 1em; vertical-align: -0.12em; fill: none; stroke: currentColor; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
svg.warn-amber { stroke: #d97706; }