/* ============================================================
   GBOX AI Access — 控制台亮色主题 (AI 开发者平台风格)
   对照: DeepSeek / Kimi(Moonshot) / 智谱 开放平台后台
   设计语言: 扁平 + 全高白色侧栏贴边 / 白色顶栏 / 发丝分隔线
             / 小圆角 / 无阴影(浮层除外) / 开发者蓝主色
   注意: JS 通过 el.hidden 切换可见性 — 本规则必须永远在最前。
   ============================================================ */
[hidden] { display: none !important; }

:root {
  --bg: #f3f5f6;            /* 内容区画布 */
  --bg-2: #f5f5f5;
  --panel: #ffffff;         /* 卡片表面 */
  --panel-2: #f5f5f5;       /* 次级表面 (表头/代码块) */
  --panel-3: #f5f5f5;
  --line: rgba(0,0,0,.1);          /* 发丝线 */
  --line-hi: #d9d9d9;       /* 控件描边 */
  --text: rgba(0,0,0,.9);
  --muted: rgba(0,0,0,.6);
  --dim: rgba(0,0,0,.45);
  --cyan: #1783ff;          /* 主色 (开发者蓝) — 历史变量名, 全站强调色 */
  --cyan-2: #167ff7;
  --green: #16c456;
  --amber: #d97706;
  --red: #ff3849;
  --blue: #0084d1;
  --purple: #985ffb;
  --ring: rgba(23,131,255,.14);
  --shadow: 0 12px 40px rgba(23,28,42,.14);
  --shadow-sm: none;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-sans: Inter, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
body { overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
::placeholder { color: var(--dim); }
::selection { background: rgba(23,131,255,.16); }

.noise { display: none; }

/* ---- 外壳: 全高白色侧栏贴边 (开发者平台布局) ---- */
/* grid-template-rows: minmax(0,1fr) 是关键 — 默认 auto 行会跟着内容长高,
   把 .workspace 顶出视口 (它自己再 overflow:auto 也永远不会滚, 因为没被约束)。
   配合 .main 的 min-height:0, 滚动才真正落 .workspace 上。 */
.app-shell { height: 100vh; display: grid; grid-template-columns: 232px 1fr; grid-template-rows: minmax(0, 1fr); }
.sidebar { position: relative; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; z-index: 10; overflow: hidden; }
.brand { height: 48px; padding: 0 12.8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); position: relative; flex: none; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4.5px; background: linear-gradient(135deg, #1783ff, #985ffb); }
.brand-mark span { color: #fff; font: 800 15px/1 var(--font-sans); }
.brand-name { font: 800 15px/1 var(--font-sans); letter-spacing: .03em; color: var(--text); }
.brand-sub { margin-top: 3.2px; color: var(--dim); font: 600 8px/1 var(--font-sans); letter-spacing: .16em; }
.version { position: absolute; right: 12px; top: 8px; padding: 1px 4.8px; border-radius: 2.5px; background: var(--panel-3); color: var(--dim); font: 600 9px var(--font-sans); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; flex: none; }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 3px rgba(22,196,86,.14); }
.status-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,149,0,.15); }
.status-dot.off { background: var(--red); box-shadow: 0 0 0 3px rgba(255,56,73,.15); }

.nav { padding: 4.8px 8px 9.6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; flex: 1; }
/* ---- 仪表盘图表 (无图表库: 柱用 div, 线用拉伸的 SVG polyline) ---- */
.trend-line { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }
.trend-line polyline { fill: none; stroke: #d97706; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.chart-axis { display: flex; justify-content: space-between; margin: -14px 4.8px 0 28.8px;
  color: var(--dim); font: 500 10.5px var(--font-sans); }
.chart-legend { display: flex; align-items: center; gap: 9.6px; font-size: 11.5px; }
.chart-key { display: inline-flex; align-items: center; gap: 4.8px; }
.chart-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.chart-key i.k-bar { background: linear-gradient(to top, #5aa3ff, #1783ff); }
.chart-key i.k-line { background: none; border-top: 2px solid #d97706; height: 0; border-radius: 0; }

/* 横向占比条: 比再画一个饼图更好比较大小 */
.h-bar { display: inline-block; width: 100%; height: 6px; border-radius: 3px; background: var(--panel-3);
  overflow: hidden; vertical-align: middle; }
.h-bar i { display: block; height: 100%; border-radius: 3px; }

/* 结论分布: 一条堆叠条 + 图例 */
.stack-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--panel-3); }
.stack-bar span { display: block; height: 100%; }
.stack-legend { display: flex; flex-wrap: wrap; gap: 12.8px; margin-top: 9.6px; font-size: 11.5px; }
.stack-legend > span { display: inline-flex; align-items: center; gap: 4.8px; }

/* 代码块 + 复制按钮 (API 文档页): 按钮浮在右上角, 不占版面 */
.code-wrap { position: relative; margin-bottom: 8px; }
.code-wrap .copy-btn { position: absolute; top: 6.4px; right: 6.4px; z-index: 1; }
.code-wrap .code-block { margin: 0; }

/* 行内文字跳转 (证据链: 发现 → 那次调用/会话)。做成按钮是为了可点可达,
   但外观保持成链接, 不抢主按钮的注意力。 */
.link-btn { border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--cyan); font: inherit; text-align: left; max-width: 100%; }
.link-btn:hover { text-decoration: underline; }
.link-btn.mono { font-family: var(--font-mono); font-size: 11.5px; }

.nav-group-label { padding: 11.2px 8px 4.8px; color: #9b9b9b; font: 500 11.5px var(--font-sans); letter-spacing: .02em; }
/* 组内次级分段小标题 (如 安全 → 策略): 比组名更轻, 顶部发丝线充当分割。
   仅在两侧都有可见项时由 renderNav 渲染, 不会出现悬空标题。 */
.nav-sub-label { margin: 6.4px 8px 2.4px; padding-top: 6.4px; border-top: 1px solid var(--line);
  color: #a8a8a8; font: 500 10.5px var(--font-sans); letter-spacing: .05em; }
.nav-item { width: 100%; height: 40px; padding: 0 9.6px; margin: 1.6px 0; border: 0; border-radius: 4px; background: transparent; display: flex; align-items: center; gap: 8px; color: rgba(0,0,0,.72); cursor: pointer; text-align: left; position: relative; transition: .12s ease; font-size: 13px; }
.nav-item svg { width: 16px; height: 16px; opacity: .8; }
.nav-item span.label { flex: 1; font-size: 13px; font-weight: 500; }
.nav-item .nav-count { min-width: 20px; padding: 1px 4.8px; text-align: center; border-radius: 2.5px; background: var(--panel-3); color: var(--muted); font: 600 10px var(--font-sans); }
.nav-item:hover { color: var(--text); background: var(--panel-3); }
.nav-item.active { color: var(--cyan); background: #e8f3ff; font-weight: 550; }
.nav-item.active svg { opacity: 1; }
.nav-item.active .nav-count { background: rgba(23,131,255,.1); color: var(--cyan); }

.sidebar-foot { margin-top: auto; padding: 9.6px 11.2px 11.2px; border-top: 1px solid var(--line); background: var(--panel); }
.load-label, .foot-grid { display: flex; justify-content: space-between; color: var(--dim); font: 600 9.5px var(--font-sans); letter-spacing: .07em; }
.meter { height: 4px; border-radius: 999px; background: rgba(0,0,0,.08); margin: 5.6px 0 6.4px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1783ff, #985ffb); }
.foot-grid { color: var(--muted); font-weight: 500; letter-spacing: .02em; }

/* ---- 主区 ---- */
.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.topbar { height: 44.8px; flex: 0 0 44.8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--panel); z-index: 5; }
/* Kimi 式顶栏: 左侧工作区 chip + 横向快捷导航 */
.ws-chip { display: flex; align-items: center; gap: 6.4px; height: 28.8px; padding: 0 8px 0 4.8px; border-radius: 4px; cursor: default; transition: .12s; flex: none; }
.ws-chip:hover { background: var(--panel-2); }
.ws-logo { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 3.5px; background: linear-gradient(135deg, #1783ff, #985ffb); color: #fff; font: 800 11px/1 var(--font-sans); }
.ws-chip b { font: 600 13px var(--font-sans); color: var(--text); letter-spacing: .01em; }
.ws-chip .chev { color: var(--dim); font-size: 10px; }
.top-links { display: flex; align-items: center; gap: 1.6px; margin-left: 4.8px; min-width: 0; overflow: hidden; }
.top-links button { height: 32px; padding: 0 9.6px; border: 0; background: transparent; border-radius: 3.5px; color: rgba(0,0,0,.62); font: 500 12.5px var(--font-sans); cursor: pointer; transition: .12s; flex: none; }
.top-links button:hover { background: var(--panel-2); color: var(--text); }
.top-links button.active { color: var(--cyan); background: #e8f3ff; font-weight: 550; }
.top-actions { display: flex; align-items: center; gap: 6.4px; margin-left: auto; flex: none; }
.emergency-btn { height: 32px; padding: 0 8.8px; display: flex; align-items: center; gap: 5.6px; border: 1px solid #ffe58f; background: #fffbe6; color: #d48806; border-radius: 4px; font: 600 11.5px var(--font-sans); cursor: pointer; letter-spacing: .01em; transition: .15s; }
.emergency-btn:hover { border-color: #ffc53d; background: #fff1b8; }
.clock { display: flex; align-items: baseline; gap: 6.4px; margin-right: 6.4px; color: var(--dim); font: 500 11px var(--font-sans); }
.clock b { color: var(--cyan); font: 650 13px var(--font-mono); letter-spacing: .02em; }
.clock em { font-style: normal; color: var(--dim); font-size: 10px; }
.icon-button { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-hi); background: var(--panel); border-radius: 4px; color: var(--muted); cursor: pointer; transition: .15s; }
.icon-button:hover { border-color: rgba(23,131,255,.45); color: var(--cyan); background: var(--panel); }
.alarm-count { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 3.2px; border-radius: 999px; display: grid; place-items: center; background: var(--red); border: 2px solid var(--panel); color: #fff; font: 700 9px var(--font-sans); }
.operator { height: 38px; margin-left: 3.2px; padding: 2.4px 8px 2.4px 3.2px; display: flex; align-items: center; gap: 7.2px; border: 1px solid var(--line); background: var(--panel); border-radius: 4.5px; cursor: pointer; transition: .15s; }
.operator:hover { background: var(--panel-2); }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; background: linear-gradient(135deg, #1783ff, #985ffb); color: #fff; font: 700 12px var(--font-sans); }
.operator div { display: flex; flex-direction: column; min-width: 68px; }
.operator b { font-size: 12px; font-weight: 600; color: var(--text); }
.operator small { color: var(--dim); font-size: 10px; margin-top: 1px; }
.operator .chev { color: var(--dim); font-size: 11px; }
.workspace { flex: 1; min-height: 0; overflow: auto; padding: 14.4px 16px 32px; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.22) transparent; }

/* ---- 页头 / 按钮 ---- */
/* 页头 = 一行面包屑 (位置指示), 不再用大标题+说明 — 左侧菜单已表达同样信息,
   省下的垂直空间留给内容。说明文字保留为悬停提示。 */
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12.8px; margin: 0 0 9.6px; min-height: 30px; }
.crumb { display: flex; align-items: center; gap: 5.6px; font-size: 13px; }
.crumb b { color: var(--cyan); font-weight: 650; letter-spacing: .01em; }
.crumb i { font-style: normal; color: rgba(0,0,0,.25) }
.crumb .cur { color: var(--text); font-weight: 600 }
.eyebrow { display: block; color: var(--cyan); font: 700 10px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 4px; }
.drawer h2, .modal h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.head-actions { display: flex; gap: 6.4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.btn { min-height: 25.6px; padding: 0 10.4px; border: 1px solid var(--line-hi); background: var(--panel); color: rgba(0,0,0,.8); border-radius: 4px; font-size: 12.5px; font-weight: 550; cursor: pointer; letter-spacing: .01em; transition: .14s; display: inline-flex; align-items: center; justify-content: center; gap: 5.6px; }
.btn:hover { border-color: #1783ff; color: #1783ff; background: var(--panel); }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.btn.primary:hover { background: var(--cyan-2); border-color: var(--cyan-2); color: #fff; }
.btn.danger { background: var(--panel); border-color: rgba(255,56,73,.4); color: #e0313f; }
.btn.danger:hover { background: rgba(255,56,73,.06); border-color: rgba(255,56,73,.6); color: #c92f34; }
.btn.amber { background: var(--panel); border-color: #ffe58f; color: #d48806; }
.btn.amber:hover { background: #fffbe6; border-color: #ffc53d; }
.btn.small { min-height: 21.6px; padding: 0 8px; font-size: 11.5px; border-radius: 3.5px; }
.btn svg { width: 14px; height: 14px; }

/* ---- 网格与卡片 (扁平: 细边框, 无阴影) ---- */
.grid { display: grid; gap: 9.6px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-tree { grid-template-columns: minmax(250px, 320px) 1fr; }  /* 用户管理: 左组织树 右用户列表 */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.panel, .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; position: relative; min-width: 0; }
.kpi { padding: 12px 12.8px; min-height: 108px; overflow: hidden; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; font-weight: 550; }
.kpi-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 3.5px; color: var(--cyan); background: #e8f3ff; }
.kpi-icon svg { width: 15px; }
.kpi-value { margin-top: 7.2px; font: 700 24px/1 var(--font-sans); color: var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 12px; color: var(--dim); margin-left: 3.2px; letter-spacing: 0; font-weight: 550; }
.kpi-bottom { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; color: var(--dim); font: 500 11px var(--font-sans); }
.trend.up { color: var(--green); font-weight: 600; }.trend.down { color: var(--red); font-weight: 600; }.trend.warn { color: var(--amber); font-weight: 600; }
.spark { position: absolute; right: 14px; bottom: 13px; width: 90px; height: 30px; opacity: .55; }
.spark polyline { stroke: var(--cyan); stroke-width: 1.6; fill: none; }

.panel-head { min-height: 48px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 9.6px; border-bottom: 1px solid var(--line); }
.panel-title { display: flex; align-items: center; gap: 6.4px; min-width: 0; }
.panel-title h3 { margin: 0; font-size: 13px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.panel-title .index { color: var(--cyan); font: 600 10px var(--font-mono); }
.panel-title .index .idx-icon { display: block; width: 14px; height: 14px; }
.panel-tools { display: flex; gap: 6.4px; align-items: center; color: var(--dim); font-size: 11.5px; }
.panel-body { padding: 12px; }
.panel-body.no-pad { padding: 0; overflow: auto; border-radius: 4.5px; }

/* ---- 过滤栏 / 输入 ---- */
.filters { display: flex; align-items: center; gap: 6.4px; flex-wrap: wrap; padding: 8px 9.6px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); margin-bottom: 9.6px; }
.input, .select { height: 25.6px; border: 1px solid var(--line-hi); background: var(--panel); color: var(--text); border-radius: 4px; padding: 0 8px; outline: none; font-size: 12.5px; transition: border-color .14s, box-shadow .14s; }
.input { min-width: 190px; }
.input:focus, .select:focus, textarea:focus { border-color: #1783ff; box-shadow: 0 0 0 2.5px var(--ring); }
.select { cursor: pointer; }
.filter-spacer { flex: 1; }
.result-count { color: var(--dim); font: 500 11px var(--font-mono); }

/* ---- 数据表 ---- */
.data-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.panel-body.no-pad { overflow-x: auto; }
.data-table th { height: 30.4px; padding: 0 9.6px; text-align: left; color: var(--muted); font: 650 10.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; background: var(--panel-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { height: 36.8px; padding: 5.6px 9.6px; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 12.5px; color: rgba(0,0,0,.75); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr { cursor: pointer; transition: background .1s; }
.data-table tbody tr:hover { background: rgba(0,0,0,.03); }
/* 宽表操作列固定右侧, 横向滚动时主操作始终可见 */
/* 末列钉右**只对操作列有意义** (横向滚动时保持按钮可见)。若末列是长文本
   (审计/告警的摘要), 钉住会让这个超宽列盖住整张表 —— 所以用 :has(button) 限定。 */
.data-table th:last-child:has(button), .data-table td:last-child:has(button) { position: sticky; right: 0; background: inherit; }
.scroll-table { max-height: calc(100vh - 350px); overflow: auto; }
.scroll-table thead th { position: sticky; top: 0; z-index: 3; }
.scroll-table tbody tr:hover td { background: rgba(23,131,255,.04); }
.data-table th:last-child { background: var(--panel-2); }
.data-table tbody tr:hover td:last-child { background: rgba(0,0,0,.03); }
.data-table .primary-cell { color: var(--text); font-weight: 600; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted)!important; }
.text-cyan { color: var(--cyan)!important; }.text-green { color: var(--green)!important; }.text-amber { color: var(--amber)!important; }.text-red { color: var(--red)!important; }

/* ---- 徽章 (小圆角芯片, 开发者平台样式) ---- */
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 1.6px 6.4px; border-radius: 3px; color: rgba(0,0,0,.68); background: rgba(0,0,0,.05); font: 600 11px var(--font-sans); letter-spacing: .01em; }
.badge.green { color: #15a04c; background: rgba(22,196,86,.12); }
.badge.amber { color: #ad6800; background: rgba(255,149,0,.12); }
.badge.red { color: #e0313f; background: rgba(255,56,73,.1); }
.badge.cyan { color: #1677e8; background: rgba(23,131,255,.1); }
.badge.blue { color: #0677c5; background: rgba(14,165,233,.12); }
.badge.purple { color: #8047f0; background: rgba(152,95,251,.12); }

/* ---- 图表 ---- */
.chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; border-left: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); margin: 8px 4px 20.8px 28.8px; background: repeating-linear-gradient(to top, transparent 0, transparent 43px, rgba(0,0,0,.08) 44px); }
.chart-y { position: absolute; left: -36px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; color: var(--dim); font: 500 10px var(--font-mono); }
.bar-group { height: 100%; flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2.4px; position: relative; }
.bar { width: 10px; min-height: 3px; border-radius: 1.5px 1.5px 0 0; background: linear-gradient(to top, #5aa3ff, #1783ff); opacity: .9; transition: .2s; }
.bar.alt { background: linear-gradient(to top, #6fd0f7, #17a3e8); }
.bar:hover { opacity: 1; filter: brightness(1.06); }
.bar-label { position: absolute; bottom: -21px; color: var(--dim); font: 500 10px var(--font-mono); }
.chart-legend { display: flex; gap: 12.8px; color: var(--muted); font-size: 11.5px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 1.5px; margin-right: 4.8px; background: #1783ff; }.chart-legend i.alt { background: #17a3e8; }

.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 24px; min-height: 210px; }
.donut { width: 148px; height: 148px; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(#1783ff 0 34%, #17a3e8 34% 59%, #8b5cf6 59% 76%, #ff9500 76% 89%, rgba(0,0,0,.08) 89% 100%); }
.donut::before { content: ""; width: 98px; height: 98px; border-radius: 50%; background: var(--panel); }
.donut-center { position: absolute; text-align: center; font: 700 18px var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.donut-center small { display: block; margin-top: 3.2px; color: var(--dim); font: 500 10px var(--font-sans); }
.legend-list { min-width: 150px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; gap: 7.2px; align-items: center; margin: 9.6px 0; color: rgba(0,0,0,.7); font-size: 11.5px; }
.legend-row i { width: 9px; height: 9px; border-radius: 1.5px; }.legend-row b { font: 600 12px var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- 状态/告警 ---- */
.status-list { display: flex; flex-direction: column; gap: 5.6px; }
/* 路由映射行 (虚拟模型抽屉): 单行 listview — 状态灯 · 名称 · 优先级/权重 | 控件。
   不用 .status-row 的固定 4 列 grid: weighted 模式下多一个权重输入框+存按钮会换行。 */
.route-row { display: flex; align-items: center; gap: 7.2px; padding: 5.6px 8.8px; margin-bottom: 4.8px;
	border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.route-row:last-child { margin-bottom: 0 }
.route-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 9px }
.route-main strong { font: 600 11.5px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.route-main small { flex: none; color: var(--dim); font: 500 10.5px var(--font-sans); white-space: nowrap }
.route-ctl { display: flex; align-items: center; gap: 4.8px; flex: none }

.status-row { display: grid; grid-template-columns: 9px minmax(100px,1fr) auto auto; align-items: center; gap: 8px; padding: 7.2px 9.6px; border: 1px solid var(--line); border-radius: 4.5px; background: var(--panel); cursor: pointer; transition: .13s; }
.status-row:hover { border-color: rgba(23,131,255,.4); background: rgba(23,131,255,.05); }
.status-row strong { font-size: 12.5px; font-weight: 600; }.status-row small { color: var(--dim); font: 500 10px var(--font-mono); }.status-row .latency { color: var(--cyan); font: 600 11px var(--font-mono); min-width: 46px; text-align: right; }
.alert-list { display: flex; flex-direction: column; }
.alert-item { padding: 8.8px 11.2px; border-bottom: 1px solid rgba(0,0,0,.06); display: grid; grid-template-columns: 3px 1fr auto; gap: 9.6px; cursor: pointer; border-radius: 1px; transition: background .12s; }
.alert-item:last-child { border: 0; }.alert-item:hover { background: rgba(0,0,0,.03); }
.alert-level { background: #ff9500; border-radius: 999px; }.alert-level.critical { background: var(--red); }.alert-level.info { background: #1783ff; }
.alert-item h4 { margin: 0 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }.alert-item p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; }.alert-item time { color: var(--dim); font: 500 10px var(--font-mono); }

.health-ring { --p: 72; width: 82px; height: 82px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#1783ff calc(var(--p)*1%), rgba(0,0,0,.08) 0); position: relative; }
.health-ring::before { content: ""; position: absolute; inset: 7px; background: var(--panel); border-radius: 50%; }
.health-ring b { z-index: 1; font: 700 15px var(--font-sans); color: var(--text); }.health-ring small { z-index: 1; position: absolute; top: 50px; font: 600 8.5px var(--font-sans); color: var(--dim); letter-spacing: .04em; }
.progress { height: 5px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }.progress > i { height: 100%; display: block; border-radius: 999px; background: #1783ff; }.progress.amber > i { background: #ff9500; }.progress.red > i { background: #ff3849; }.progress.green > i { background: #16c456; }
.mini-stat { display: flex; justify-content: space-between; align-items: center; padding: 6.4px 0; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 11.5px; }.mini-stat:last-child { border: 0 }.mini-stat span { color: var(--muted) }.mini-stat b { font: 600 12px var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- 页签 / 开关 ---- */
.tabs { display: flex; gap: 1.6px; border-bottom: 1px solid var(--line); margin-bottom: 11.2px; }
.tab { height: 36px; padding: 0 11.2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 550; cursor: pointer; border-radius: 3.5px 3.5px 0 0; transition: .13s; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.toggle { width: 36px; height: 20px; border: 0; border-radius: 999px; background: rgba(0,0,0,.25); position: relative; cursor: pointer; display: inline-block; vertical-align: middle; transition: background .16s; }
.toggle::after { content: ""; width: 14px; height: 14px; border-radius: 50%; position: absolute; top: 3px; left: 3px; background: #fff; box-shadow: 0 1px 2px rgba(23,28,42,.2); transition: .16s; }
.toggle.on { background: var(--cyan); }.toggle.on::after { left: 19px; background: #fff; }

/* ---- 表单 ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11.2px; }
.form-field { display: flex; flex-direction: column; gap: 4.8px; min-width: 0; }.form-field.full { grid-column: 1/-1 }.form-field label { color: rgba(0,0,0,.75); font-size: 12px; font-weight: 600 }.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line-hi); background: var(--panel); color: var(--text); border-radius: 4px; padding: 6.4px 8.8px; outline: none; font-size: 12.5px; transition: border-color .14s, box-shadow .14s }.form-field input[type=checkbox] { width: auto; padding: 0; accent-color: #1783ff }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #1783ff; box-shadow: 0 0 0 2.5px var(--ring) }.form-field textarea { min-height: 80px; resize: vertical }.form-help { font-size: 11px; color: var(--dim); line-height: 1.5 }.required { color: var(--red) }

.key-value { display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid rgba(0,0,0,.06); padding: 8px 0; gap: 9.6px; align-items: start; }.key-value:last-child { border: 0 }.key-value dt { color: var(--muted); font-size: 11.5px; font-weight: 550 }.key-value dd { margin: 0; color: rgba(0,0,0,.75); font-size: 12.5px; line-height: 1.6; word-break: break-word }

/* 紧凑键值布局 (请求详情等): 两列并排 + 行高压紧, 长内容跨列。 */
.kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 20px }
.kv-grid > .grid-span { grid-column: 1 / -1 }
.compact .key-value { grid-template-columns: 92px 1fr; padding: 4px 0; gap: 10px }
.compact .key-value dt { font-size: 11px }
.compact .key-value dd { font-size: 12px; line-height: 1.5 }
.compact.receipt .receipt-head { padding: 12px 14px }
.compact.receipt .receipt-grid { padding: 6px 14px 10px }

/* 时间范围组件 (内容安全页): 触发框 + 面板 (左快捷预设 / 右自定义日期)。
   预设是组件的一部分, 不散落在筛选栏上。 */
.range-picker { position: relative; display: inline-flex; flex: none }
.range-trigger { height: 32px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5.6px;
	border: 1px solid var(--line-hi); background: var(--panel); border-radius: 4px; cursor: pointer;
	color: rgba(0,0,0,.78); font: 500 12px var(--font-mono); transition: .14s; white-space: nowrap }
.range-trigger svg { width: 14px; height: 14px; color: var(--dim); flex: none }
.range-trigger i { font-style: normal; color: var(--dim); font-size: 10px }
.range-trigger:hover { border-color: var(--cyan); color: var(--cyan) }
.range-trigger:hover svg, .range-trigger:hover i { color: var(--cyan) }
.range-trigger.on svg { color: var(--cyan) }
.range-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: flex;
	background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden }
.range-presets { display: flex; flex-direction: column; padding: 4.8px; gap: 1px; background: var(--panel-2); border-right: 1px solid var(--line) }
.range-presets button { padding: 4.8px 11.2px; border: 0; border-radius: 4px; background: transparent; text-align: left;
	color: var(--muted); font: 500 12px var(--font-sans); cursor: pointer; transition: .12s; white-space: nowrap }
.range-presets button:hover { background: rgba(23,131,255,.06); color: var(--cyan) }
.range-presets button.on { background: #e8f3ff; color: var(--cyan); font-weight: 600 }
/* 双月日历 (范围选择主体) */
.range-cal { padding: 8px 9.6px 0; display: flex; flex-direction: column }
/* 双月并排 (跨月范围不必来回翻页) */
.range-cal > .cal-month { display: inline-block }
.range-cal { display: block; white-space: nowrap }
.range-cal .cal-month + .cal-month { border-left: 1px solid var(--line); margin-left: 11.2px; padding-left: 14px }
.range-cal .cal-foot { white-space: normal }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 28px; margin-bottom: 6px }
.cal-title { color: var(--text); font: 600 12.5px var(--font-sans) }
.cal-nav, .cal-nav-spacer { width: 24px; height: 24px; display: grid; place-items: center }
.cal-nav { border: 1px solid var(--line-hi); background: var(--panel); border-radius: 4px; color: var(--muted);
	font: 600 13px var(--font-sans); cursor: pointer; transition: .12s; padding: 0 }
.cal-nav:hover { border-color: var(--cyan); color: var(--cyan) }
.cal-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 1px 0 }
.cal-wd { height: 22px; display: grid; place-items: center; color: var(--dim); font: 600 10.5px var(--font-sans) }
.cal-day { height: 30px; border: 0; background: transparent; border-radius: 0; cursor: pointer;
	color: rgba(0,0,0,.8); font: 500 12px var(--font-sans); transition: none; padding: 0 }
.cal-day:hover { background: rgba(23,131,255,.1); color: var(--cyan) }
.cal-day.out { color: rgba(0,0,0,.28) }
.cal-day.in { background: #e8f3ff; color: var(--cyan) }
.cal-day.edge { background: var(--cyan); color: #fff; font-weight: 650 }
.cal-day.edge:hover { background: var(--cyan-2); color: #fff }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--cyan) }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 9.6px;
	margin-top: 6.4px; padding: 6.4px 0 8px; border-top: 1px solid var(--line) }
.cal-sel { color: var(--muted); font: 500 11.5px var(--font-mono) }
.cal-foot .btn[disabled] { opacity: .45; cursor: not-allowed }
.panel-foot { border-top: 1px solid var(--line); background: var(--panel) }
/* 计数与每页条数紧贴页码左侧成一组, 整体右对齐 (不两端撑开) */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 11.2px; padding: 8px 11.2px; min-height: 52px }
.pager-info { color: var(--muted); font-size: 12px }
.pager-info b { color: var(--text) }
.select-mini { height: 26px; padding: 0 4.8px; font-size: 11.5px; border-radius: 4px }
.pager-ctl { display: flex; align-items: center; gap: 4px }
.pg-btn { min-width: 28px; height: 28px; padding: 0 5.6px; border: 1px solid var(--line-hi); background: var(--panel);
	color: rgba(0,0,0,.75); border-radius: 4px; font: 550 12px var(--font-sans); cursor: pointer; transition: .12s }
.pg-btn:hover:not([disabled]) { border-color: var(--cyan); color: var(--cyan) }
.pg-btn.on { background: var(--cyan); border-color: var(--cyan); color: #fff; font-weight: 650 }
.pg-btn[disabled] { opacity: .4; cursor: not-allowed }
.pg-gap { min-width: 20px; text-align: center; color: var(--dim); font-size: 12px }

.code-block { padding: 9.6px; border: 1px solid var(--line); border-radius: 4.5px; background: var(--panel-2); color: rgba(0,0,0,.78); font: 500 11px/1.7 var(--font-mono); white-space: pre-wrap; word-break: break-all; }

.timeline { position: relative; padding-left: 17.6px; }.timeline::before { content: ""; position: absolute; left: 6px; top: 7px; bottom: 7px; width: 1px; background: rgba(0,0,0,.1) }.timeline-item { position: relative; padding: 0 0 17px }.timeline-item::before { content: ""; position: absolute; left: -20px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--panel); border: 2px solid #1783ff }.timeline-item.warn::before { border-color: #ff9500 }.timeline-item.danger::before { border-color: #ff3849 }.timeline-item h4 { margin: 0 0 3.2px; font-size: 12.5px; font-weight: 600; color: var(--text) }.timeline-item p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.55 }.timeline-item time { display: block; margin-top: 4px; color: var(--dim); font: 500 10px var(--font-mono) }

/* ---- 拓扑 ---- */
.topology { min-height: 390px; position: relative; display: grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap: 22.4px; align-items: start; padding: 17.6px 14.4px; overflow: auto; background: radial-gradient(circle at 50% 40%, rgba(23,131,255,.05), transparent 46%), repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,.09) 40px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(0,0,0,.07) 80px); }
.topology-col { min-width: 120px; position: relative; z-index: 1; }.topology-label { margin-bottom: 9.6px; color: var(--dim); font: 650 9.5px var(--font-sans); letter-spacing: .13em; text-transform: uppercase; text-align: center; }
.topology-node { min-height: 52px; margin: 6.4px 0; padding: 8px 8.8px; border: 1px solid var(--line-hi); background: var(--panel); border-radius: 4.5px; position: relative; cursor: pointer; transition: .15s; }.topology-node:hover, .topology-node.selected { border-color: rgba(23,131,255,.45); background: rgba(23,131,255,.05); }.topology-node::after { content: ""; position: absolute; top: 50%; right: -29px; width: 28px; height: 1px; background: rgba(0,0,0,.15) }.topology-col:last-child .topology-node::after { display: none }.topology-node b { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text) }.topology-node small { display: block; color: var(--dim); font: 500 10px var(--font-mono) }.topology-node.risk { border-color: rgba(255,56,73,.45) }.topology-node.risk::before { content: "!"; position: absolute; right: 6px; top: 4px; color: var(--red); font: 700 10px var(--font-sans) }

/* ---- 治理凭据 ---- */
.receipt { border: 1px solid rgba(22,196,86,.28); background: linear-gradient(150deg, rgba(22,196,86,.05), var(--panel) 55%); border-radius: 6px; position: relative; overflow: hidden; }.receipt::before { content: "GBOX VERIFIED"; position: absolute; right: -35px; top: 29px; transform: rotate(45deg); width: 150px; text-align: center; padding: 2.4px 0; color: rgba(15,160,76,.55); border: 1px solid rgba(15,160,76,.22); background: rgba(22,196,86,.06); font: 650 8.5px var(--font-sans); letter-spacing: .14em }.receipt-head { padding: 12.8px; border-bottom: 1px dashed rgba(15,160,76,.25); display: flex; justify-content: space-between; align-items: start }.receipt-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); padding: 6.4px 12.8px 12.8px; gap: 0 20px }

.migration-stepper { display: grid; grid-template-columns: repeat(5,1fr); margin: 8px 0 14.4px; }.migration-step { text-align: center; position: relative; color: var(--dim); font-size: 10.5px; padding-top: 27px }.migration-step::before { content: ""; position: absolute; top: 8px; left: calc(50% + 8px); right: calc(-50% + 8px); height: 1px; background: rgba(0,0,0,.12) }.migration-step:last-child::before { display: none }.migration-step i { position: absolute; top: 0; left: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-hi); background: var(--panel); display: grid; place-items: center; font: 600 8.5px var(--font-mono); font-style: normal; color: var(--dim) }.migration-step.done i { border-color: #16c456; color: #15a04c; background: rgba(22,196,86,.12) }.migration-step.active i { border-color: #1783ff; color: #167ff7; background: #e8f3ff; box-shadow: 0 0 0 3px rgba(23,131,255,.14) }

/* ---- 抽屉内 Tab (请求详情: 详情 / 会话 / 工具) ---- */
.drawer-tabs { display: flex; gap: 1.6px; margin: -14.4px -16px 11.2px; padding: 0 9.6px;
	border-bottom: 1px solid var(--line); background: var(--panel) }
.dtab { padding: 8px 11.2px 7.2px; border: 0; background: transparent; cursor: pointer;
	color: var(--muted); font: 500 12.5px var(--font-sans); border-bottom: 2px solid transparent; transition: .12s }
.dtab:hover { color: var(--text) }
.dtab.on { color: var(--cyan); border-bottom-color: var(--cyan); font-weight: 600 }
.dtab-panel[hidden] { display: none }

/* ---- 会话气泡 ---- */
.chat { display: flex; flex-direction: column; gap: 10px }
.chat-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: start }
.chat-role { text-align: right; padding-top: 7.2px; color: var(--dim); font: 600 10.5px var(--font-sans) }
.chat-bubble { padding: 7.2px 9.6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
	font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; max-height: 460px; overflow: auto }
.chat-row.user .chat-bubble { background: #f7f8fa }
.chat-row.assistant .chat-bubble, .chat-row.model .chat-bubble { background: #f2f7ff; border-color: #dce9fb }
.chat-row.system .chat-bubble, .chat-row.tool .chat-bubble { background: var(--panel-2) }
.chat-call { margin: 4.8px 0; padding: 4.8px 7.2px; border-radius: 6px; background: rgba(152,95,251,.07);
	border: 1px solid rgba(152,95,251,.2); font-size: 11.5px }
.chat-result { margin: 4.8px 0; padding: 4.8px 7.2px; border-radius: 6px; background: rgba(22,196,86,.06);
	border: 1px solid rgba(22,196,86,.2); font-size: 11.5px }
.chat-img { display: inline-block; padding: 1.6px 6.4px; border-radius: 5px; background: var(--panel-3); font-size: 11px; color: var(--muted) }
.content-banner { margin-bottom: 8px; display: flex; align-items: center; gap: 6.4px; flex-wrap: wrap }

/* ---- 折叠块 (系统提示词 / 工具参数与结果) ---- */
.fold { margin: 4.8px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); overflow: hidden }
.fold > summary { padding: 5.6px 8px; cursor: pointer; color: var(--muted); font-size: 11.5px; font-weight: 550;
	list-style: none; display: flex; align-items: center; gap: 8px }
.fold > summary::-webkit-details-marker { display: none }
.fold > summary::before { content: "▸"; color: var(--dim); font-size: 10px; transition: .12s }
.fold[open] > summary::before { content: "▾" }
.fold > summary:hover { color: var(--cyan) }
.fold-meta { color: var(--dim); font: 500 10.5px var(--font-mono) }
.fold-body { margin: 0; padding: 7.2px 8.8px; border-top: 1px solid var(--line); background: var(--panel-2);
	font: 500 11px/1.65 var(--font-mono); white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto }
.fold.inline { margin: 3.2px 0 0; border: 0; background: transparent }
.fold.inline > summary { padding: 2px 0 }
.fold.inline > .fold-body { background: transparent; border: 0; padding: 4px 0 0 }

/* ---- 详情 Tab 的三段区域框 ---- */
.detail-block { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-bottom: 9.6px; overflow: hidden }
.detail-block:last-child { margin-bottom: 0 }
.detail-block-head { display: flex; align-items: center; gap: 8px; padding: 7.2px 11.2px;
	background: var(--panel-2); border-bottom: 1px solid var(--line) }
.detail-block-head .eyebrow { margin: 0; flex: none }
.detail-block-head > :not(.eyebrow) { margin-left: auto }
.detail-block-body { padding: 12px 14px }
.detail-block-body > .receipt { border: 0; border-radius: 0; background: transparent }
.detail-block-body > .receipt::before { display: none }
.detail-block-body .receipt-head { padding: 0 0 10px }
.detail-block-body .receipt-grid { padding: 0 }
.detail-block-body > .kv-grid { margin: 0 }
.ev-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px }

/* ---- 原始内容 Tab (JSON 渲染) ---- */
.raw-sec { margin-bottom: 16px }
.raw-sec:last-child { margin-bottom: 0 }
.raw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px }
.raw-head .eyebrow { flex: none }
.raw-head .muted { flex: 1 }
.json-view { margin: 0; padding: 8px 9.6px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2);
	font: 500 11px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto }
.json-view.raw { color: var(--muted) }
.json-view .jk { color: #1783ff }      /* key */
.json-view .js { color: #15a04c }      /* string */
.json-view .jn { color: #d97706 }      /* number */
.json-view .jb { color: #985ffb }      /* bool */
.json-view .jz { color: var(--dim) }   /* null */
.sse-ev { margin-bottom: 6px }
.sse-gap { margin: 6.4px 0; padding: 4.8px 8px; text-align: center; color: var(--dim); font: 500 10.5px var(--font-mono);
	background: var(--panel-3); border-radius: 6px }
.sse-idx { color: var(--dim); font: 500 10px var(--font-mono); margin-bottom: 3px }
.sse-ev .json-view { max-height: 260px }

/* ---- 工具 Tab ---- */
.tool-call { margin-bottom: 8px; padding: 7.2px 8.8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel) }
.tool-call-head { display: flex; align-items: center; gap: 6.4px; font-size: 12.5px }
.tool-call .fold { background: var(--panel-2) }

/* 长文本列截断 (悬停看全量; 详情抽屉里仍是完整值) — 避免列数变多后表格超宽 */
.ellip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap; vertical-align: bottom }

.empty { min-height: 230px; display: grid; place-items: center; text-align: center; color: var(--muted); }.empty svg { width: 38px; height: 38px; color: rgba(0,0,0,.25); margin-bottom: 8px }.empty h3 { color: rgba(0,0,0,.75); font-size: 13px; font-weight: 600; margin: 5px }.empty p { font-size: 11.5px }

/* ---- 抽屉 / 弹窗 (浮层保留阴影) ---- */
.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; background: rgba(23,28,42,.36); opacity: 0; pointer-events: none; transition: .2s; z-index: 40; backdrop-filter: blur(2px); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(870px, 92vw); background: var(--panel); border-left: 1px solid var(--line); z-index: 41; transform: translateX(103%); transition: .24s cubic-bezier(.32,.72,.28,1); display: flex; flex-direction: column; box-shadow: var(--shadow); }
.drawer.open { transform: none; }.drawer-backdrop.open, .modal-backdrop.open { opacity: 1; pointer-events: auto }.drawer-head, .modal-head { min-height: 64px; padding: 10.4px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line) }.drawer-head h2, .modal-head h2 { font-size: 16px }.drawer-body { padding: 14.4px 16px; overflow: auto; flex: 1 }.drawer-foot, .modal-foot { min-height: 58px; padding: 9.6px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: center; gap: 6.4px; background: var(--panel-2) }
.modal { position: fixed; width: min(620px, 92vw); max-height: 86vh; left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.98); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; z-index: 51; opacity: 0; pointer-events: none; transition: .18s; display: flex; flex-direction: column; box-shadow: var(--shadow); }.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1) }.modal.wide { width: min(930px, 94vw) }.modal-backdrop { z-index: 50 }.modal-body { padding: 16px; overflow: auto }.modal-foot { flex: 0 0 auto; border-radius: 0 0 7px 7px }

.command-palette { position: fixed; inset: 0; background: rgba(23,28,42,.4); backdrop-filter: blur(4px); z-index: 70; opacity: 0; pointer-events: none; transition: .15s }.command-palette.open { opacity: 1; pointer-events: auto }.command-box { width: min(640px, 90vw); margin: 11vh auto; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); overflow: hidden }.command-input { height: 56px; display: flex; align-items: center; gap: 8.8px; padding: 0 12.8px; border-bottom: 1px solid var(--line) }.command-input svg { color: var(--cyan) }.command-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 14px }.command-input kbd { font: 600 10px var(--font-mono); color: var(--muted); border: 1px solid var(--line-hi); background: var(--panel-2); border-radius: 2.5px; padding: 3px 6px }.command-results { max-height: 360px; overflow: auto; padding: 8px }.command-item { display: flex; align-items: center; gap: 8.8px; padding: 8px 8.8px; border: 1px solid transparent; border-radius: 4px; cursor: pointer }.command-item:hover { background: rgba(23,131,255,.05); border-color: rgba(23,131,255,.14) }.command-item svg { color: var(--muted) }.command-item div { flex: 1 }.command-item b { display: block; font-size: 12.5px; font-weight: 600 }.command-item small { color: var(--dim); font-size: 11px }.command-item kbd { font: 500 10px var(--font-mono); color: var(--dim) }

.toast-stack { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px }.toast { width: 320px; padding: 9.6px 11.2px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); box-shadow: 0 8px 28px rgba(23,28,42,.14); display: grid; grid-template-columns: 3px 1fr auto; gap: 8.8px; animation: toastIn .22s ease }.toast::before { content: ""; border-radius: 999px; background: #1783ff }.toast.success::before { background: #16c456 }.toast.warning::before { background: #ff9500 }.toast.error::before { background: #ff3849 }.toast b { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 2.4px; color: var(--text) }.toast p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.5 }.toast button { border: 0; background: transparent; color: var(--dim); cursor: pointer; font-size: 14px }.toast button:hover { color: var(--text) }@keyframes toastIn { from { transform: translateX(20px); opacity: 0 } }
.mobile-only { display: none; }

@media (max-width: 1120px) {
  .grid.cols-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .span-3 { grid-column: span 2; }
  .clock span, .clock em { display: none; }
}
@media (max-width: 760px) {
  body { overflow: auto }.app-shell { display: block; height: auto; min-height: 100vh }.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 232px; transform: translateX(-103%); transition: .2s; box-shadow: var(--shadow) }.sidebar.open { transform: none }.main { min-height: 100vh }.mobile-only { display: grid }.top-links, .ws-chip b, .ws-chip .chev { display: none }.ws-chip { padding: 0 6px }.topbar { padding: 0 12px }.breadcrumb span, .breadcrumb i { display: none }.operator div, .operator .chev { display: none }.operator { padding: 3px }.workspace { padding: 14px 12px 30px }.page-head { align-items: flex-start; flex-direction: column }.head-actions { justify-content: flex-start }.grid.cols-4, .grid.cols-3, .grid.cols-2, .grid.cols-tree { grid-template-columns: 1fr }.span-2, .span-3 { grid-column: span 1 }.filters { align-items: stretch }.range-picker { width: 100% }.range-trigger { width: 100%; justify-content: space-between }.pager { flex-direction: column; align-items: flex-end }.input, .select { width: 100%; min-width: 0 }.filter-spacer { display: none }.panel { overflow: auto }.form-grid { grid-template-columns: 1fr }.form-field.full { grid-column: 1 }.donut-wrap { flex-direction: column }.clock { display: none }.emergency-btn { width: 32px; padding: 0; font-size: 0; justify-content: center }.emergency-btn .status-dot { margin: 0 }.topology { grid-template-columns: repeat(5,150px) }.receipt-grid, .kv-grid { grid-template-columns: 1fr }.migration-stepper { min-width: 500px }
}

/* ---- 登录 (开发者平台式: 极简白卡) ---- */
.login-screen { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background:
  radial-gradient(640px 400px at 16% -4%, rgba(23,131,255,.07), transparent 58%),
  radial-gradient(640px 400px at 88% 104%, rgba(153,95,255,.07), transparent 58%),
  var(--bg); }
.login-box { width: min(360px, 92vw); padding: 22.4px 20.8px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 16px 48px rgba(23,28,42,.07); }
.login-brand { display: flex; align-items: center; gap: 8.8px; margin-bottom: 17.6px; }
.login-box .form-field { margin-bottom: 10.4px; }
.login-btn { width: 100%; margin-top: 4.8px; min-height: 38px; font-size: 13px; }
.login-error { margin-top: 10.4px; padding: 7.2px 8.8px; border: 1px solid rgba(255,56,73,.35); border-radius: 4px; background: rgba(255,56,73,.08); color: #d03945; font-size: 12px; }
.login-note { margin: 14.4px 0 0; color: var(--dim); font-size: 11px; text-align: center; }

/* ---- 树形/归属 ---- */
.tree-row td:first-child { padding-left: var(--indent, 0px); }

/* 归属树 (成本分析页): 这是一张**真表格**。
   此前它误用了组织页的 .tree-row —— 那个类是给 <div> 树写的, 带 display:flex,
   套到 <tr> 上会把行拖出表格布局: <td> 变成 flex 项目、宽度塌成内容宽,
   于是数据行合计只有 303px, 与表头完全对不上 (列表一行挤在左边)。
   这里改用专属类, 保持 table 布局, 只做视觉层级。 */
.tree-dept > td { background: var(--panel-2); font-weight: 600; }
/* 用 inset 阴影而不是 border-left: 边框会**占布局宽度**, 把首列文字推右 3px,
   于是部门行与表头「节点」差 2px。inset 画在盒内, 视觉相同、零布局影响。 */
.tree-dept > td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.tree-kid > td:first-child { padding-left: calc(9.6px + 18px); position: relative; }
/* 竖向导引线: 让"成员属于上面那个部门"一眼可见, 而不是靠猜缩进 */
.tree-kid > td:first-child::before { content: ""; position: absolute; left: calc(9.6px + 7px);
  top: 0; bottom: 0; width: 1px; background: var(--line); }
.tree-kid:last-child > td:first-child::before { bottom: 50%; }

/* 数值列右对齐: 费用/Tokens/请求数 要能上下比对大小, 左对齐没法比。
   等宽数字 (tabular-nums) 保证小数点竖向对齐。 */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.tree-toggle { color: var(--dim); cursor: pointer; user-select: none; }
.cost-tags { display: flex; flex-wrap: wrap; gap: 4.8px; }
.cost-tag { padding: 2.4px 7.2px; border-radius: 3px; background: rgba(0,0,0,.05); color: rgba(0,0,0,.68); font: 500 11px var(--font-mono); }
.cost-tag b { color: var(--cyan); font-weight: 650; }

/* ---- KV 列表 ---- */
.kv-list { display: flex; flex-direction: column; }
.empty-line { color: var(--dim); font-size: 12px; padding: 14.4px; text-align: center; }

/* ---- 组织部门树 (§4.2 灵活树形结构): 文件夹式展开/收起 ---- */
.tree-view { user-select: none; min-height: 60px; }
.tree-row {
  display: flex; align-items: center; gap: 4.8px;
  padding: 4px 7.2px 4px calc(8px + var(--indent, 0px));
  cursor: pointer; border-left: 3px solid transparent;
  font-size: 13px; border-radius: 3.5px; color: rgba(0,0,0,.75);
  transition: background .12s;
}
.tree-row:hover { background: rgba(0,0,0,.04); }
.tree-row.selected {
  background: #e8f3ff; color: var(--cyan); font-weight: 600;
  border-left-color: var(--cyan);
}
.tree-caret { width: 14px; flex: none; text-align: center; color: var(--dim); cursor: pointer; }
.tree-caret.leaf { cursor: default; opacity: 0.35; }
.tree-folder { flex: none; font-size: 13px; line-height: 1; }.tree-folder svg { width: 14px; height: 14px; display: block; color: rgba(0,0,0,.45); }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-count { margin-left: auto; font: 500 10.5px var(--font-mono); color: var(--dim); }
.tree-del {
  display: none; margin-left: auto; flex: none;
  width: 18px; height: 18px; padding: 0; line-height: 16px;
  border: none; background: transparent; border-radius: 2px;
  color: rgba(0,0,0,.3); font-size: 14px; cursor: pointer;
}
.tree-row:hover .tree-del { display: block; }
.tree-del:hover { background: rgba(255,56,73,.1); color: #ff3849; }
.tree-row:has(.tree-count) .tree-del { margin-left: 4.8px; }

/* ---- 渠道供应商预设 chips + 选中态 ---- */
.preset-wrap { display: flex; flex-direction: column; gap: 4.8px; margin-bottom: 3.2px; }
.preset-group { display: flex; align-items: baseline; gap: 6.4px; flex-wrap: wrap; }
.preset-group-label { font: 600 10.5px var(--font-mono); letter-spacing: .06em; color: var(--dim); min-width: 34px; }
.preset-chip { font-weight: 500; }
.preset-chip.on {
  background: #e8f3ff; border-color: var(--cyan); color: var(--cyan); font-weight: 600;
}
.form-help { font-size: 11px; color: var(--dim); margin-top: 3.2px; line-height: 1.5; }