/* style.css */
/* ══════════════════════════════════════════════════════════════
   设计 token
   ══════════════════════════════════════════════════════════════
   两套主题共用同一组变量名，只在 [data-theme] 下重定义取值。
   这样所有组件样式都不需要关心当前是明还是暗。

   变量分层：
     --bg / --bg-2 / --bg-3      背景三级（越往后越靠前/越浅）
     --border                    常规边框
     --text / --muted / --faint  正文 / 次要 / 极弱文字
     --accent                    强调色（品牌蓝）
     --green / --red / --orange  状态色
     --hover / --active          交互态叠加层（中性，随主题变化）
     --overlay                   模态遮罩
     --shadow*                   阴影（亮色更明显，暗色更弱）
*/
/* ── 暗色（默认，与改造前保持一致）──
   注意：:root 与 [data-theme='dark'] 写在同一条规则里，"默认"和"显式选暗色"共用一套值。
   不要再把 :root 单独拆出来写（曾经拆出过一个只有 color-scheme 的 :root 块，
   既冗余又容易让人误以为变量定义在别处）。 */
:root,
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0b1220;
  --bg-2: #111b2d;
  --bg-3: #182742;
  --border: #22304d;
  --text: #e7edf8;
  --muted: #96a5bf;
  --faint: #6c7d99;
  --accent: #4c8dff;
  --green: #2fd07a;
  --red: #ff6b6b;
  --orange: #f7b955;

  /* 交互态：暗色下用白色提亮 */
  --hover: rgba(255, 255, 255, .05);
  --active: rgba(255, 255, 255, .09);
  --overlay: rgba(0, 0, 0, .55);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);

  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

/* ── 亮色 ── */
[data-theme='light'] {
  color-scheme: light;

  --bg: #f4f7fc;
  --bg-2: #ffffff;
  --bg-3: #eef3fb;
  --border: #e0e7f2;
  --text: #14202f;
  --muted: #5b6b83;
  --faint: #8a99ad;
  --accent: #2f6fe4;
  --green: #1f9d55;
  --red: #d94a4a;
  --orange: #c97a12;

  /* 交互态：亮色下用黑色压暗 */
  --hover: rgba(0, 0, 0, .045);
  --active: rgba(0, 0, 0, .08);
  --overlay: rgba(20, 24, 33, .35);

  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, .1);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .14);

  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
}

/* ══════════════════════════════════════════════════════════════
   动效 token
   ══════════════════════════════════════════════════════════════
   设计取向：Linear 的丝滑转场 + Vercel 的克制配色。
   控制台是要长时间盯着的界面，动效的目标是"让变化可追踪"，
   而不是炫技 —— 所以位移都控制在 12px 以内、时长都在 360ms 以内，
   强调色只用于传达状态，不用于装饰。

   缓动曲线（为什么选这几条）：
     --ease-out-quart  减速收尾，元素"到位"感最强。用于入场、悬浮抬升
     --ease-in-out     两端慢中间快。用于颜色/背景这类对称变化
     --ease-spring     轻微过冲，给交互一点"手感"。用于弹窗、按压
   时长分级：越快 = 越接近即时反馈；越慢 = 越像"场景切换"
     --dur-fast   120ms  按压、hover 这类即时反馈
     --dur-base   180ms  颜色/边框变化
     --dur-slow   260ms  位移、展开收起
     --dur-slower 360ms  模态框、页面转场
*/
:root {
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-slower: 360ms;

  /* 位移尺度：统一控制"动多远"，避免各处乱写 px */
  --shift-sm: 4px;
  --shift-md: 8px;
  --shift-lg: 12px;
}

/* ── 全局基础过渡 ──
   给常见交互元素一个默认过渡，这样新增组件"天然就有"动效，
   而不是每次都要记得补 transition。具体组件可按需覆盖。 */
a,
button,
input,
textarea,
select,
summary,
[role='button'],
[role='tab'],
.clickable {
  transition:
    background-color var(--dur-base) var(--ease-in-out),
    border-color var(--dur-base) var(--ease-in-out),
    color var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-base) var(--ease-in-out),
    transform var(--dur-fast) var(--ease-out-quart),
    opacity var(--dur-base) var(--ease-in-out);
}

/* ── 主题切换平滑过渡 ──
   切换明暗时让颜色渐变而不是硬切，避免"闪一下"的廉价感。
   注意：只过渡颜色相关属性，不过渡 transform —— 否则所有元素会一起抖动。 */
body,
.topbar,
.settings-menu,
.model-modal,
.usage-card,
.tier-bar,
.tier-param,
.usage-table th,
.usage-table td {
  transition:
    background-color var(--dur-slow) var(--ease-in-out),
    border-color var(--dur-slow) var(--ease-in-out),
    color var(--dur-slow) var(--ease-in-out);
}

/* ══════════════════════════════════════════════════════════════
   无障碍：尊重"减少动态效果"系统偏好
   ══════════════════════════════════════════════════════════════
   部分用户会因动画产生眩晕/恶心（前庭功能障碍）。开启后：
     - 位移、缩放、旋转全部禁用（保留 opacity 淡入淡出，那是最温和的）
     - 时长压到 1ms 让过渡"瞬间完成"，避免残留动画
   这是 WCAG 2.1 的建议项，不是可选项。
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  /* 位移/缩放类动画直接停掉，只留纯淡入淡出 */
  .model-modal,
  .usage-card,
  .tier-btn,
  .toast,
  [class*='itemIn'],
  [class*='popIn'],
  [class*='slideIn'] {
    animation: none !important;
    transform: none !important;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'Microsoft YaHei', system-ui, sans-serif;
  font-size: 14px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── 启动 loading 壳 ── */
/* 启动提示改成"浮层"而不是"整屏遮罩"：
   以前它会用背景色盖住整页，等 /api/status 就绪才淡出——点进控制台就是白屏闪一下。
   现在外壳（侧栏 + 视图）立即可见，只有一张小卡片浮在顶部，服务慢或没起来时才看得到。 */
.loading-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: transparent;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 78px 16px 16px;
  pointer-events: none;              /* 不挡操作；卡片本身恢复可点击 */
  opacity: 0;                        /* 默认静态隐藏：正常进入时一秒都不出现 */
  transition: opacity .22s ease;
}
/* 只有 html 上没有 boot-silent（= 脚本判定启动过慢，或 8 秒兜底被触发）时才显示 */
html.boot-show .loading-overlay { opacity: 1; }
.loading-card {
  width: min(400px, 88vw);
  padding: 16px 18px;
  background: color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: auto;
}
.loading-title { font-size: 14.5px; font-weight: 600; }
.loading-sub { color: var(--muted); font-size: 12.5px; }
.loading-spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-logs {
  margin-top: 6px;
  max-height: 180px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ══ 外壳：左侧导航 + 右侧工作区 ══
   结构性重排：原来"横排 11 个页签 + 顶栏塞状态"改成侧栏导航 + 工作区状态条。
   所有元素 ID / class 保持不变，JS 只按 ID 与 .tab/.view 查找，因此无需改脚本。 */
#shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
}

/* ── 侧栏 ── */
#sidebar {
  width: 236px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
}
.side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 6px;
}
.side-head .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: block; }
.side-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.side-title strong { font-size: 14px; font-weight: 650; letter-spacing: .2px; }
.brand-sub { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.side-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 0;
  border-top: 1px solid var(--border);
}
.side-foot .runtime-control { flex: 1; min-width: 0; display: flex; }
.side-foot #runtime-mode { width: 100%; }
.side-foot .icon-btn { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ── 导航（垂直）── */
#tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  overflow-y: auto;
  background: none;
  border: 0;
}
.nav-group-label {
  padding: 12px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--faint);
}
/* ⚠️ .tab 的基础定义必须完整写在这一处（历史教训：在别处再写一条 .tab 会在清理重复时被删掉）。
   追加属性请合并进下面这条规则。 */
.tab {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.tab::before { content: attr(data-icon); font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; opacity: .95; }
.tab:hover { background: var(--hover); color: var(--text); }
.tab.active {
  background: rgba(76, 141, 255, .15);
  border-color: rgba(76, 141, 255, .34);
  color: var(--text);
  font-weight: 600;
}

/* ── 工作区与状态条 ── */
#workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 86%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  flex-shrink: 0;
}
.top-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.top-status > .muted {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.top-status .sep { display: none; }
#topbar .dot { margin-left: 2px; }

/* 窄屏：侧栏折叠成顶部的横向导航条 */
@media (max-width: 900px) {
  #shell { flex-direction: column; }
  #sidebar {
    width: 100%;
    gap: 6px;
    padding: 10px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .side-head { padding: 0 2px 4px; }
  #tabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 6px; padding-bottom: 4px; }
  .nav-group-label { display: none; }
  .tab { width: auto; flex-shrink: 0; }
  .side-foot { border-top: 0; padding-top: 4px; }
}

/* ── 布局 ── */
#layout { flex: 1; display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.view { display: none; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.view.active { display: flex; }

.list-pane {
  width: 320px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--bg-2);
}
/* 列表头：字号从 11px 提到 12px 并加字重，此前过小且与正文层级脱节 */
.list-head {
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 2;
}

.detail-pane { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 20px 24px; }
/* 空状态：用 flex 居中而非固定 vh 偏移，窗口高度变化时始终居中 */
.empty-hint {
  color: var(--muted);
  text-align: center;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 240px;
}
.empty-hint::before {
  content: '';
  width: 40px; height: 40px;
  border: 2px dashed var(--border);
  border-radius: 10px;
  opacity: .7;
}

/* ── 会话列表 ── */
.session-item, .chat-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.session-item:hover, .chat-item:hover { background: var(--bg-3); }
.session-item.selected, .chat-item.selected { background: var(--bg-3); border-left: 3px solid var(--accent); padding-left: 11px; }
.session-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.session-chat { font-weight: 600; font-size: 13px; }
.session-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.session-trigger {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  overflow: hidden;
  white-space: nowrap;
}
.session-trigger > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.trigger-method { flex: 0 0 auto; color: var(--mode-color, var(--text)); font-weight: 600; }
.session-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--muted); align-items: center; }

.status-badge { font-size: 11px; padding: 1px 7px; border-radius: 9px; max-width: 100%; white-space: normal; }
.status-done { background: rgba(63,206,122,.15); color: var(--green); }
.status-noreply { background: rgba(139,147,167,.15); color: var(--muted); }
.status-running { background: rgba(91,140,255,.18); color: var(--accent); }
.status-waiting { background: rgba(255,180,84,.18); color: var(--orange); }
.status-error { background: rgba(255,107,107,.15); color: var(--red); }
.status-aborted { background: rgba(255,180,84,.15); color: var(--orange); }
.session-wait { font-size: 11px; color: var(--orange); font-variant-numeric: tabular-nums; }
.session-item.session-waiting-row { border-left: 3px solid var(--orange); padding-left: 11px; }
.session-activity { font-size: 11px; color: var(--accent); }
.mode-legacy { --mode-color: var(--green); --mode-soft: rgba(63, 206, 122, .11); }
.mode-threaded { --mode-color: var(--accent); --mode-soft: rgba(91, 140, 255, .12); }
.mode-lifecycle { --mode-color: var(--orange); --mode-soft: rgba(255, 180, 84, .12); }
.mode-chip,
.thread-pill {
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--mode-color) 45%, transparent);
  border-radius: 7px;
  background: var(--mode-soft);
  color: var(--mode-color);
  padding: 1px 6px;
  font-size: 10.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.session-item.session-thread-group {
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--mode-color) 60%, transparent);
}

/* ── 会话详情 ── */
.detail-header { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.detail-header h2 { font-size: 16px; margin-bottom: 6px; }
.detail-header .sub { color: var(--muted); font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.session-mobile-back { display: none; margin-left: 8px; vertical-align: middle; }
.session-mode-band {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(110px, .8fr) minmax(220px, 2fr) auto;
  align-items: center;
  gap: 12px;
  margin: -2px 0 16px;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--mode-color) 35%, var(--border));
  border-bottom: 1px solid color-mix(in srgb, var(--mode-color) 35%, var(--border));
  background: var(--mode-soft);
  font-size: 12px;
}
.session-mode-name { color: var(--mode-color); font-weight: 700; }
.session-mode-state { font-weight: 600; }
.session-mode-detail { color: var(--muted); min-width: 0; }
.session-mode-ref { color: var(--faint); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.lifecycle-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lifecycle-overview > div {
  min-width: 0;
  padding: 10px 12px;
}
.lifecycle-overview > div + div { border-left: 1px solid var(--border); }
.lifecycle-overview span,
.lifecycle-overview strong,
.lifecycle-overview small { display: block; overflow-wrap: anywhere; }
.lifecycle-overview span { color: var(--muted); font-size: 10.5px; }
.lifecycle-overview strong { margin-top: 3px; font-size: 13px; }
.lifecycle-overview small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.lifecycle-remaining { color: var(--mode-color, var(--orange)); font-variant-numeric: tabular-nums; }
.thread-timeline {
  min-width: 0;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.thread-timeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.thread-timeline-head strong,
.thread-timeline-head span { display: block; }
.thread-timeline-head strong { color: var(--mode-color); font-size: 13px; }
.thread-timeline-head > div > span {
  margin-top: 2px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  overflow-wrap: anywhere;
}
.thread-timeline-head > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.thread-run-list {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  touch-action: pan-x pan-y;
  padding: 1px 0 7px;
}
.thread-run-list::-webkit-scrollbar { height: 7px; }
.thread-run-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 7px; }
.thread-run {
  flex: 0 0 148px;
  min-width: 0;
  height: 58px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--muted);
  padding: 6px 8px;
  cursor: pointer;
  text-align: left;
}
.thread-run > span,
.thread-run > strong,
.thread-run > small { display: block; }
.thread-run > span { color: var(--faint); font-size: 9px; }
.thread-run > strong { margin: 1px 0; color: var(--text); font-family: var(--mono); font-size: 11px; }
.thread-run > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; }
.thread-run:hover { border-color: color-mix(in srgb, var(--mode-color) 55%, var(--border)); }
.thread-run.active {
  border-color: var(--mode-color);
  background: var(--mode-soft);
  color: var(--mode-color);
}
@media (max-width: 760px) {
  .lifecycle-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle-overview > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .lifecycle-overview > div:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 600px) {
  #view-sessions .list-pane { width: 100%; border-right: 0; }
  #view-sessions .detail-pane { display: none; width: 100%; padding: 16px; }
  #view-sessions.mobile-detail-open .list-pane { display: none; }
  #view-sessions.mobile-detail-open .detail-pane { display: block; }
  .session-mobile-back { display: inline-flex; }
  .session-mode-band {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }
  .session-mode-detail { grid-column: 1 / -1; grid-row: 2; }
  .session-mode-ref { grid-column: 1 / -1; grid-row: 3; white-space: normal; }
}
.context-inspector {
  margin: 0 0 18px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.context-inspector-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.context-inspector-head strong,
.context-inspector-head span { display: block; }
.context-inspector-head strong { font-size: 14px; }
.context-inspector-head > div > span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.context-layout {
  max-width: 48%;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10.5px;
  overflow-wrap: anywhere;
  text-align: right;
}
.context-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.context-metrics > div {
  min-width: 0;
  padding: 9px 10px;
  background: var(--bg);
}
.context-metrics span,
.context-metrics small { display: block; color: var(--muted); font-size: 10px; }
.context-metrics strong {
  display: block;
  margin: 3px 0 1px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.context-request-summary {
  margin-top: 8px;
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.5;
}
.context-call-table-wrap { margin-top: 10px; overflow-x: auto; }
.context-call-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.context-call-table th,
.context-call-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.context-call-table th { color: var(--muted); font-weight: 500; }
.context-call-table th:first-child,
.context-call-table td:first-child { text-align: left; }
.context-tabs {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  border-bottom: 1px solid var(--border);
}
.context-tabs button {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 1px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.context-tabs button:hover { color: var(--text); }
.context-tabs button.active { border-bottom-color: var(--accent); color: var(--accent); }
.identity-pilot-people {
  margin-top: 12px;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
}
.identity-pilot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.identity-pilot-table th,
.identity-pilot-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.identity-pilot-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--bg-3);
  font-weight: 500;
}
.identity-pilot-table td:nth-child(n+4) { text-align: right; }
.identity-pilot-table tr:last-child td { border-bottom: none; }
.identity-pilot-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  white-space: normal;
}
#identity-friend-proposal-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#identity-friend-proposal-box h4 {
  margin: 0 0 12px;
  font-size: 13px;
}
#identity-friend-proposals .proposal-decision + .proposal-decision {
  margin-left: 6px;
}
.context-tab-body {
  min-height: 140px;
  max-height: 520px;
  overflow: auto;
  padding: 12px 0;
}
.context-json,
.reasoning-entry pre {
  margin: 0;
  color: #aab3c5;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.context-empty {
  min-height: 116px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.context-warning {
  margin-bottom: 10px;
  border-left: 3px solid var(--orange);
  background: rgba(255, 180, 84, .08);
  color: var(--muted);
  padding: 7px 10px;
  font-size: 11px;
}
.reasoning-entry { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.reasoning-entry:last-child { margin-bottom: 0; border-bottom: none; }
.reasoning-entry-head { margin-bottom: 7px; color: var(--accent); font-size: 11px; font-weight: 600; }

.collapsible { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; background: var(--bg-2); }
.collapsible > summary::before { content: '▸ '; }
.collapsible[open] > summary::before { content: '▾ '; }
.collapsible .coll-body { padding: 4px 14px 12px; white-space: pre-wrap; font-family: var(--mono); font-size: 11.5px; color: #aab3c5; line-height: 1.65; max-height: 300px; overflow-y: auto; }
.memory-handoff .coll-body { max-height: none; overflow: visible; white-space: normal; font-family: inherit; }
.memory-handoff-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.memory-handoff-actions .muted { margin-right: auto; font-size: 11px; }

.msg-flow { display: flex; flex-direction: column; gap: 10px; }

.bubble {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: 12px;
  line-height: 1.6;
  word-break: break-word;
}
.bubble-user { align-self: flex-start; background: var(--bg-3); border: 1px solid var(--border); white-space: pre-wrap; }
.bubble-assistant { align-self: flex-end; background: rgba(91,140,255,.12); border: 1px solid rgba(91,140,255,.3); }
.bubble-assistant .asr-label { color: var(--muted); font-size: 11px; margin-bottom: 4px; }

.tool-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  padding: 9px 13px;
  font-size: 12.5px;
}
.tool-card.tool-error { border-color: rgba(255,107,107,.5); }
.tool-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.tool-name { color: var(--orange); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.tool-args { font-family: var(--mono); font-size: 11.5px; color: #aab3c5; white-space: pre-wrap; }
.tool-result { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 5px; white-space: pre-wrap; border-top: 1px dashed var(--border); padding-top: 5px; }
.tool-result.is-error { color: var(--red); }

.sent-badge {
  align-self: flex-end;
  background: rgba(63,206,122,.12);
  border: 1px solid rgba(63,206,122,.4);
  color: var(--green);
  border-radius: 12px;
  padding: 7px 13px;
  font-size: 13px;
  line-height: 1.6;
}
.sent-badge .asr-label { color: rgba(63,206,122,.7); font-size: 11px; margin-bottom: 3px; }

.session-error {
  border: 1px solid rgba(255,107,107,.5); background: rgba(255,107,107,.08);
  color: var(--red); border-radius: 8px; padding: 10px 14px; white-space: pre-wrap;
}

/* ── 存档 ── */
.chat-item-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item-title .chat-runtime-control { margin-left: auto; flex: 0 0 28px; width: 28px; height: 28px; }
.incident-severity { font-weight: 600; }
.incident-severity.severity-critical { color: var(--red); }
.incident-severity.severity-error { color: var(--orange); }
.incident-severity.severity-warning { color: var(--yellow, #e6b94a); }
.incident-severity.severity-info { color: var(--muted); }
.incident-table td { vertical-align: top; }
.incident-table summary { cursor: pointer; max-width: 420px; white-space: normal; }
.incident-detail { margin-top: 8px; color: var(--muted); line-height: 1.6; max-width: 520px; overflow-wrap: anywhere; }
.incident-actions { min-width: 72px; flex-wrap: nowrap; }
.chat-item.unread-row { background: rgba(255,180,84,.07); }
.unread-pill { background: var(--red); color: #fff; font-size: 11px; border-radius: 9px; padding: 0 7px; }
.chat-item-sub { color: var(--muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-chip { cursor: pointer; font-size: 12px; color: #dbe2f0; background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; }
.member-chip:hover { border-color: var(--accent); }
.member-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.member-table td, .member-table th { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: left; }
.member-table th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--bg-2); }

.chat-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chat-action-result { max-width: 220px; font-size: 11px; overflow-wrap: anywhere; }
#test-send-text {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 12.5px;
  outline: none;
}
#test-send-text:focus { border-color: var(--accent); }

.archive-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.archive-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.archive-table .t { color: var(--muted); white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
.archive-table .w { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.archive-table .w.self { color: var(--accent); }
.archive-table .unread td { background: rgba(255,180,84,.05); }
.archive-table .text { word-break: break-word; white-space: pre-wrap; }

/* ── 设置 ── */
.settings-sidebar {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--bg-2);
  overflow-y: auto;
  padding: 14px 10px;
}
.settings-runstate {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.settings-runstate .rs-title { font-weight: 600; font-size: 13px; }
.settings-runstate .rs-row { display: flex; align-items: center; gap: 8px; }
.settings-runstate .rs-row .dot { width: 8px; height: 8px; }
.settings-menu { display: flex; flex-direction: column; gap: 2px; }
.settings-menu-item {
  background: none; border: none; text-align: left;
  color: var(--muted); padding: 8px 12px; border-radius: 7px;
  cursor: pointer; font-size: 13px; width: 100%;
}
.settings-menu-item:hover { background: var(--bg-3); color: var(--text); }
.settings-menu-item.active { background: var(--bg-3); color: var(--accent); font-weight: 600; }

.settings-pane { flex: 1; max-width: 860px; margin: 0 auto; padding: 22px 26px 40px; overflow-y: auto; width: 100%; }
.settings-pane h3 { margin: 22px 0 12px; font-size: 14px; color: var(--accent); }
.settings-pane h3:first-child { margin-top: 0; }
.settings-divider { border: none; border-top: 1px dashed var(--border); margin: 22px 0; }
.conversation-mode-shell { margin-bottom: 16px; }
.conversation-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.conversation-mode-option {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--muted);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}
.conversation-mode-option span,
.conversation-mode-option small { display: block; overflow-wrap: anywhere; }
.conversation-mode-option span { color: var(--text); font-size: 13px; font-weight: 650; }
.conversation-mode-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.conversation-mode-option:hover { border-color: color-mix(in srgb, var(--mode-color) 55%, var(--border)); }
.conversation-mode-option.active {
  border-color: var(--mode-color);
  background: var(--mode-soft);
  box-shadow: inset 0 -2px 0 var(--mode-color);
}
.conversation-mode-option.active span { color: var(--mode-color); }
.conversation-mode-stage {
  min-height: 190px;
  border-bottom: 1px solid var(--border);
}
.conversation-mode-panel {
  padding: 16px 2px 14px;
  animation: pageIn var(--dur-base) var(--ease-out-quart);
}
.conversation-mode-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.conversation-mode-heading strong,
.conversation-mode-heading span { display: block; }
.conversation-mode-heading strong { color: var(--mode-color); font-size: 15px; }
.conversation-mode-heading > div > span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.mode-state-token {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--mode-color) 45%, transparent);
  border-radius: 7px;
  background: var(--mode-soft);
  color: var(--mode-color);
  padding: 4px 8px;
  font-size: 11px;
}
.conversation-mode-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 14px;
  color: var(--text);
  font-size: 12px;
}
.conversation-mode-flow span {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--mode-color) 32%, var(--border));
  border-radius: 6px;
  background: var(--bg-2);
  padding: 5px 8px;
}
.conversation-mode-flow i {
  flex: 1 1 24px;
  min-width: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--mode-color) 45%, var(--border));
}
.conversation-mode-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.conversation-mode-facts div { min-width: 0; }
.conversation-mode-facts dt { color: var(--muted); font-size: 11px; }
.conversation-mode-facts dd { margin: 4px 0 0; color: var(--text); font-size: 12.5px; overflow-wrap: anywhere; }
.conversation-mode-fields { margin-bottom: 8px; }
.conversation-mode-fields .field { min-width: 180px; }
.conversation-scope {
  margin: 10px 0 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.conversation-scope-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.conversation-scope-heading strong { font-size: 13px; }
.conversation-scope-heading span { color: var(--muted); font-size: 11px; text-align: right; }
.conversation-scope-actions { display: flex; align-items: center; gap: 8px; }
.conversation-scope-actions .hint { margin: 0; }
.conversation-trigger-hint { margin: -6px 0 12px; }
.persona-save-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.persona-role-text { min-height: 360px; font-size: 12.5px; line-height: 1.7; font-family: var(--mono); }
.model-rows-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.model-rows-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 400; padding: 4px 6px; }
.model-rows-table td { padding: 4px 6px; }
.model-rows-table input { width: 100%; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; outline: none; }
.model-rows-table input:focus { border-color: var(--accent); }

/* 模型选择/添加/删除 模态框 */
.model-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;             /* 小屏时留出边距，避免贴边 */
}
/* ⚠️ .model-modal 的基础定义必须完整写在这一处。
   曾经因为在动效段又写了一条 `.model-modal { animation: ... }`，
   清理重复时被当成"旧版"删掉，弹窗变成没有背景/边框的裸内容。
   追加属性请合并进下面这条规则，不要另开一条 .model-modal。 */
.model-modal {
  width: 760px; max-width: 94vw; max-height: 86vh;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column;
  padding: 16px; gap: 10px;
  box-shadow: var(--shadow-lg);
  /* 关键：允许内部收缩，否则内容会把弹窗撑出屏幕 */
  min-height: 0; overflow: hidden;
}
.model-modal.danger { border-color: rgba(255,107,107,.6); box-shadow: 0 0 0 1px rgba(255,107,107,.25), 0 12px 40px rgba(255,107,107,.12); }
.model-modal.danger .model-modal-head { color: var(--red); }

/* 头部：标题可换行，关闭按钮不参与压缩 */
.model-modal-head {
  font-weight: 600; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; flex-shrink: 0;
}
.model-modal-head > span {
  min-width: 0; overflow-wrap: anywhere;   /* 长模型名换行而非撑宽 */
}
.model-modal-close {
  background: none; border: none; color: var(--muted); font-size: 18px;
  cursor: pointer; flex-shrink: 0; line-height: 1; padding: 0 2px;
}

/* 主体：min-height:0 是 flex 子项能正确收缩/滚动的前提。
   默认**纵向**堆叠 —— 明细、批量编辑这类弹窗都是从上往下排的。
   需要左右分栏的（模型目录）请显式加 class="model-modal-body row"。 */
.model-modal-body {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 0; flex: 1; overflow: hidden;
}
.model-modal-body:not(.row) { overflow-y: auto; overflow-x: hidden; }
.model-modal-body.row { flex-direction: row; }
/* 纵向模式下表格自己滚动，不再依赖外层横向布局 */
.model-modal-body > .usage-table-scroll { flex: 1; min-height: 0; overflow: auto; }
.model-modal-left {
  /* 用 flex-basis 而非固定 width：窄屏时按比例缩小，不会把右侧挤成竖条 */
  flex: 0 0 200px; max-width: 40%;
  overflow-y: auto; border-right: 1px solid var(--border); padding-right: 8px;
  min-width: 96px;
}
.model-modal-right { flex: 1; min-width: 0; overflow-y: auto; }

/* 窄屏：纵向堆叠，彻底避免挤压 */
@media (max-width: 560px) {
  .model-modal { padding: 12px; }
  .model-modal-body { flex-direction: column; }
  .model-modal-left {
    flex: 0 0 auto; max-width: none;
    border-right: none; border-bottom: 1px solid var(--border);
    padding-right: 0; padding-bottom: 8px; max-height: 30vh;
  }
}

/* 弹窗内的表格：容器可滚动，单元格不撑破 */
.model-modal .usage-table { width: 100%; table-layout: auto; }
.model-modal .usage-table td,
.model-modal .usage-table th {
  overflow-wrap: anywhere;      /* 长内容换行，避免"字竖着排" */
  white-space: normal;
}
.model-modal .usage-table td:first-child,
.model-modal .usage-table th:first-child { max-width: 22ch; }
.mm-prov { padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--muted); }
.mm-prov:hover { background: var(--bg-3); color: var(--text); }
.mm-prov.active { background: var(--bg-3); color: var(--accent); font-weight: 600; }
.mm-model { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.mm-model:hover { background: var(--bg-3); }
.mm-model .mm-check { color: var(--accent); width: 16px; }
.mm-model .mm-del { margin-left: auto; border: 1px solid rgba(255,107,107,.5); color: var(--red); background: none; border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 11px; }
.mm-model .mm-del:hover { background: rgba(255,107,107,.12); }
.model-modal-foot { display: flex; gap: 10px; justify-content: flex-end; }
.field-row { display: flex; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.field { flex: 1; min-width: 220px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field input[type=text], .field input[type=password], .field input[type=number], .moment-window-row input[type=time], .field select, .field textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
.field textarea { min-height: 84px; resize: vertical; font-family: inherit; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.experimental-settings .checkbox-row { flex-wrap: wrap; }
.experimental-settings .checkbox-row .muted { flex: 1 1 220px; min-width: 0; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.settings-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.daily-moments-status { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.daily-moments-content { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.daily-moments-status .field { min-width: 0; margin-bottom: 12px; overflow-wrap: anywhere; }
.daily-moments-status .table-wrap { overflow-x: auto; }
.moment-window-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(60px, .7fr) 32px; align-items: end; gap: 10px; margin-bottom: 10px; }
.moment-window-row .field { min-width: 0; margin: 0; }
.moment-window-row input { min-width: 0; width: 100%; height: 34px; box-sizing: border-box; }
.moment-window-remove { width: 32px; height: 32px; padding: 0; margin-bottom: 2px; }
.moment-schedule { margin-bottom: 14px; min-width: 0; }
.moment-schedule summary { cursor: pointer; padding: 8px 0; font-size: 13px; }
@media (max-width: 420px) {
  .moment-window-row { gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px 28px; }
  .moment-window-row input { padding: 6px 3px; }
  .moment-window-remove { width: 28px; }
}
.moment-error { color: var(--red); overflow-wrap: anywhere; margin: 12px 0; font-size: 13px; }
.qzone-run-detail-row td { padding: 0 10px 10px; background: var(--bg-2); }
.qzone-run-details { display: grid; gap: 10px; min-width: 280px; }
.qzone-run-detail { display: grid; gap: 4px; padding-left: 10px; border-left: 2px solid var(--border); }
.qzone-run-detail div { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.qzone-run-detail small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.moment-summaries { padding: 12px 0; border-top: 1px solid var(--border); }
.moment-summaries summary { cursor: pointer; font-size: 13px; margin-bottom: 12px; }
.time-control-settings { max-width: 960px; min-width: 0; }
.time-control-settings > .field, #tc-rule-editor > .field { margin: 14px 0; }
.time-control-summary { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin: 12px 0; }
.time-control-preset { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 10px; font-size: 13px; }
.time-control-preset dd { margin: 0; overflow-wrap: anywhere; }
.tc-window { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px 28px; align-items: end; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.tc-window .field { min-width: 0; }
.tc-days { display: flex; flex-wrap: wrap; gap: 10px; align-self: center; }
.tc-days label { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; }
.tc-window input[type=time] { width: 100%; min-width: 0; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); padding: 7px 10px; border-radius: 7px; font: inherit; }
@media (max-width: 900px) {
  .tc-window { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; }
  .tc-days { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #view-settings { flex-direction: column; overflow-y: auto; }
  #view-settings .settings-sidebar {
    width: 100%; flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--border);
  }
  #view-settings .settings-runstate { display: none; }
  #view-settings .settings-menu {
    flex-direction: row; overflow-x: auto; gap: 6px;
  }
  #view-settings .settings-menu-item { flex: 0 0 auto; width: auto; }
  #view-settings .settings-pane {
    padding: 16px; min-width: 0; flex: 0 0 auto; overflow: visible;
  }
  .asset-pane { padding: 16px; }
  .asset-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-toolbar { align-items: stretch; flex-direction: column; }
  .asset-kinds { overflow-x: auto; }
  .asset-kinds button { flex: 0 0 auto; }
  .asset-search input { width: 100%; min-width: 0; }
  .asset-sticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-table-wrap { max-height: none; }
  .time-control-settings .field { min-width: 0; }
}
.save-bar { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }

/* ── 动效 ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes itemIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes checkPop { 0% { transform: scale(.85); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes savedFlash { 0% { color: var(--green); } 100% { color: var(--muted); } }
/* 页面切换：轻微上浮淡入，比纯 fadeIn 多一点"到位"感 */
@keyframes pageIn { from { opacity: 0; transform: translateY(var(--shift-sm)); } to { opacity: 1; transform: none; } }
/* 抽屉/面板从右侧滑入 */
@keyframes slideInRight { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
/* 呼吸：用于"运行中"这类持续状态，很轻，不抢注意力 */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* 脉冲环：保存成功、新消息这类瞬时正反馈 */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(63, 206, 122, .45); }
  70% { box-shadow: 0 0 0 8px rgba(63, 206, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 206, 122, 0); }
}
/* 骨架微光：加载占位（如果以后用到） */
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ── 组件动效挂载 ──
   统一用 token 里的时长/曲线，不要在这里再写死 ms 值。 */
.model-modal-overlay { animation: fadeIn var(--dur-base) var(--ease-in-out); }
.model-modal { animation: popIn var(--dur-slow) var(--ease-spring); }
.session-item.new-item, .chat-item.new-item { animation: itemIn var(--dur-slow) var(--ease-out-quart); }
/* 表格行不要挂入场动画：表格每次刷新都会重建行，动画会跟着重放＝整片闪。
   需要入场感的地方用「新增行才加类」的方式（见 .session-item.new-item）。 */
.member-table tr { animation: none; }

/* 页面容器上的入场动画已移除：这些容器的内容会被整块重建，
   动画会在每次刷新时重放（观感＝整页闪一下）。页签切换本身是即时切换，不需要它。 */

/* 统计卡片：悬浮轻微抬升（1px 位移 + 阴影），让"可看"变成"可感" */
.usage-card {
  transition:
    transform var(--dur-slow) var(--ease-out-quart),
    box-shadow var(--dur-slow) var(--ease-out-quart),
    background-color var(--dur-slow) var(--ease-in-out),
    border-color var(--dur-slow) var(--ease-in-out);
}
.usage-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
/* 成本卡片是重点数字，给更强的抬升 */
.usage-card.accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* 表格行：悬浮时背景 + 左侧强调条，帮助横向阅读时不串行 */
.usage-table tbody tr {
  transition: background-color var(--dur-base) var(--ease-in-out);
}
.usage-table.clickable tbody tr:active { background: var(--active); }
/* 可点击行的 hover 由 .clickable 提供；这里补一个左侧指示条 */
.usage-table.clickable tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

/* 会话/会话列表条目：入场 + 悬浮位移（右侧一点点，暗示"可展开"） */
.session-item, .chat-item {
  transition:
    background-color var(--dur-base) var(--ease-in-out),
    border-color var(--dur-base) var(--ease-in-out),
    transform var(--dur-fast) var(--ease-out-quart);
}
.session-item:hover, .chat-item:hover { transform: translateX(2px); }
.session-item.selected, .chat-item.selected {
  transition:
    background-color var(--dur-base) var(--ease-in-out),
    border-color var(--dur-base) var(--ease-in-out),
    padding var(--dur-base) var(--ease-out-quart);
}

/* 状态点：运行/等待中呼吸，让用户一眼看出"还活着" */
.dot-wait { animation: breathe 1.8s var(--ease-in-out) infinite; }
/* 连接正常时不呼吸（静态更稳），只有异常态才动 —— 避免常态干扰 */

/* 页签：切换时下划线滑动感（用 transform 而非 width，性能更好） */
.tab { position: relative; }
.tab.active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: -1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: tabSlide var(--dur-slow) var(--ease-out-quart);
}
@keyframes tabSlide {
  from { opacity: 0; transform: scaleX(.4); }
  to { opacity: 1; transform: none; }
}

/* 档位按钮：按下时轻微缩放，选中态用 spring 弹一下 */
.tier-btn:active { transform: scale(.97); }
.tier-btn.on { animation: checkPop var(--dur-slow) var(--ease-spring); }

/* 保存成功：绿色脉冲环 + 文字闪一下 */
.saved-pulse { animation: pulseRing var(--dur-slower) var(--ease-out-quart); }
.saved-flash { animation: savedFlash var(--dur-slower) var(--ease-in-out); }

/* 折叠面板：展开时内容淡入 */
.collapsible[open] > *:not(summary) {
  animation: pageIn var(--dur-base) var(--ease-out-quart);
}

/* ── 输入框：聚焦时边框/阴影变化，让"我在这里输入"很明确 ──
   .field 是布局容器不需要动效，动的是里面的控件。 */
.field input,
.field textarea,
.field select,
.pc-row input[type=number],
.tier-param input[type=number],
.tier-param textarea,
.ma-toolbar input[type=text],
.model-rows-table input {
  transition:
    border-color var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-base) var(--ease-in-out),
    background-color var(--dur-base) var(--ease-in-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.pc-row input[type=number]:focus,
.tier-param input[type=number]:focus,
.tier-param textarea:focus {
  box-shadow: 0 0 0 3px rgba(91, 140, 255, .12);
}

/* 页签：基础态过渡（.tab:hover 已有，这里补基础） */
.tab {
  transition:
    color var(--dur-base) var(--ease-in-out),
    background-color var(--dur-base) var(--ease-in-out),
    border-color var(--dur-base) var(--ease-in-out);
}

/* 模型目录：左侧厂商 / 右侧模型条目，悬浮高亮 + 选中态。
   ⚠️ 过渡定义统一在下面的「长列表性能」块里，这里不要再写一份
   （曾经写过，两处重复容易改错地方）。 */
.mm-prov.active,
.mm-model:hover { background: var(--hover); }
/* 勾选框弹一下，确认"选上了" */
.mm-model input[type=checkbox]:checked { animation: checkPop var(--dur-base) var(--ease-spring); }

/* 主题选择卡片：悬浮抬升 + 选中态描边 */
.theme-option {
  transition:
    transform var(--dur-slow) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-in-out),
    background-color var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-slow) var(--ease-out-quart);
}
.theme-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.theme-option.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* 会话/会话条目：已有基础过渡，这里补入场与选中态的平滑 */
.session-item.selected,
.chat-item.selected { border-left-color: var(--accent); }
.chat-item.unread-row { animation: itemIn var(--dur-slow) var(--ease-out-quart); }

/* 折叠面板头部：三角形旋转 */
.collapsible > summary::before {
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.collapsible[open] > summary::before { transform: rotate(90deg); }
.collapsible { transition: border-color var(--dur-base) var(--ease-in-out); }

/* 复选框：勾选时的缩放反馈 */
.checkbox-row input[type=checkbox]:checked { animation: checkPop var(--dur-base) var(--ease-spring); }

/* 档位参数块：明暗切换（未生效档位变暗）的平滑过渡 */
.tier-param {
  transition:
    opacity var(--dur-slow) var(--ease-in-out),
    background-color var(--dur-slow) var(--ease-in-out),
    border-color var(--dur-slow) var(--ease-in-out);
}

/* ══════════════════════════════════════════════════════════════
   性能：长列表要降低动效成本
   ══════════════════════════════════════════════════════════════
   模型目录可能有 1000+ 条（"共 N 个模型"）。如果每条都挂 6 个属性的
   transition，浏览器要为上千个元素维护过渡状态，滚动/搜索时明显掉帧。

   对策：长列表条目只保留 background-color / color 这类**合成层属性**
   （不触发重排，GPU 友好），去掉 transform / box-shadow（会触发重排与重绘）。
   视觉上几乎无差别 —— 列表项本来也不需要"抬升"效果。 */
.mm-prov,
.mm-model,
.model-rows-table tr,
.member-table tr,
.usage-table tbody tr {
  transition:
    background-color var(--dur-fast) var(--ease-in-out),
    color var(--dur-fast) var(--ease-in-out);
}

/* 不要用 will-change 做"提前优化"：
   它会强制每个元素单独建合成层，上百个条目就是上百个层，反而吃内存、
   甚至更卡。只在真正需要持续动画的元素（呼吸状态点）上用。 */
.dot-wait { will-change: opacity; }

/* ── 按钮（完整定义，务必保持在一处）──
   ⚠️ 这里曾经只剩一条 `transition`，基础样式（背景/边框/圆角/padding/cursor）被
   前面的"重复清理"误删，导致所有按钮回落到浏览器默认外观。
   追加属性请合并进这条规则，不要另开 `.btn { ... }`，否则清理时会再次误删。 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  padding: 7px 16px;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-in-out),
    color var(--dur-base) var(--ease-in-out),
    background-color var(--dur-base) var(--ease-in-out),
    box-shadow var(--dur-base) var(--ease-in-out),
    opacity var(--dur-base) var(--ease-in-out);
}
/* 悬浮：轻微抬升 + 阴影，给"可点"的暗示（位移只有 1px，克制） */
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:not(:disabled):hover { box-shadow: var(--shadow-sm); }
/* 按压：回弹曲线，模拟物理按下的手感 */
.btn:active { transform: scale(.96); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .92; }
.btn-small { padding: 4px 12px; font-size: 12px; }
.btn-danger { border-color: rgba(255,107,107,.5); color: var(--red); }
.btn-danger:hover { border-color: var(--red); color: var(--red); background: rgba(255,107,107,.1); }

.checkbox-row input[type=checkbox] { accent-color: var(--accent); transition: transform .1s ease; }
.checkbox-row input[type=checkbox]:checked { animation: checkPop .18s ease; }
.collapsible > summary { transition: color .14s ease; }
.collapsible > summary:hover { color: var(--text); }

#cfg-save-result.saved-flash { animation: savedFlash 1.1s ease; }

/* ── 横幅（预算/连接提示） ── */
.banner {
  padding: 8px 18px;
  font-size: 13px;
  background: rgba(255, 180, 84, .12);
  border-bottom: 1px solid rgba(255, 180, 84, .4);
  color: var(--orange);
  flex-shrink: 0;
}
.banner a { color: var(--accent); }
.banner.hidden { display: none; }

/* ── 体检卡 ── */
.health-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.health-card.all-ok { border-color: rgba(63, 206, 122, .5); }
.health-card .h-title { font-weight: 600; margin-bottom: 10px; }
.health-card.all-ok .h-title { color: var(--green); }
.h-item { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.h-item.ok { color: var(--green); }
.h-item.bad { color: var(--orange); }
.h-item.mute { color: var(--muted); }
.h-label { flex: 1; }
.health-card .btn-small { margin-left: 4px; }

/* ── 白名单选择弹窗 ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal {
  width: 480px; max-height: 70vh;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column;
  padding: 16px;
}
.modal-head { font-weight: 600; margin-bottom: 12px; }
.modal-list { overflow-y: auto; flex: 1; min-height: 120px; }
.pick-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.pick-item:hover { background: var(--bg-3); }
.pick-item span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }

/* ── 滚动条贴边：列表/详情/设置面板都是块级容器，把滚动条放到容器最边缘而不是内容中间 */
#session-list, #chat-list, .detail-pane, .settings-pane, .modal-list {
  scrollbar-gutter: stable;
}

/* ── 模型目录面板（替代下拉框） ── */
.model-pick { position: relative; flex: 1; }
.model-pick-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-2); color: var(--text); cursor: pointer; font-size: 13px;
  text-align: left;
}

/* ── 模型目录弹窗 ── */
.model-pick-btn {
  flex: 1; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-2); color: var(--text); cursor: pointer; font-size: 13px;
  text-align: left;
}
.model-pick-btn:hover { border-color: var(--accent, #6c8cff); }
.model-pick-btn .chev { margin-left: auto; opacity: .6; font-size: 12px; }
.model-pick-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 两栏悬停下拉（左供应商 / 右模型） ── */
.model-dd-wrap { position: relative; flex: 1; }
.model-dd {
  position: absolute; z-index: 70; top: calc(100% + 6px); left: 0;
  width: 560px; max-width: 80vw; height: 340px;
  display: flex; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.model-dd-left {
  width: 220px; flex-shrink: 0; overflow-y: auto; padding: 5px;
  border-right: 1px solid var(--border);
}
.model-dd-right { flex: 1; overflow-y: auto; padding: 5px 6px; }
.mdd-prov {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.mdd-prov:hover, .mdd-prov.active { background: var(--bg-3); }
.mdd-prov-name { font-weight: 500; }
.mdd-prov-meta { font-size: 11px; opacity: .6; }
.mp-provider {
  font-size: 11px; opacity: .72; padding: 7px 8px 4px;
  display: flex; gap: 8px; align-items: baseline;
}
.mp-provider .mp-url { font-size: 10px; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.mp-row:hover { background: var(--bg-3); }
.mp-row.current { background: var(--bg-3); }
.mp-row .mp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbadge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.vbadge.ok { color: #3fae6a; border-color: rgba(63, 174, 106, .4); background: rgba(63, 174, 106, .1); }
.vbadge.no { color: #d06a5c; border-color: rgba(208, 106, 92, .4); background: rgba(208, 106, 92, .1); }
.vbadge.unk { color: var(--text); opacity: .5; border-color: var(--border); }

/* ── 全局：hidden 属性必须永远生效 ──
   作者样式里的 display（如 .model-dd { display:flex }）会压过浏览器对 [hidden] 的
   默认 display:none，导致元素"收不回去"（模型目录下拉两次踩同一个坑）。
   这条规则保证任何带 hidden 属性的元素一律不可见。 */
[hidden] { display: none !important; }
/* .hidden 工具类：与 [hidden] 属性同义（JS 侧用 classList 切换更方便）。
   曾经只有 .banner.hidden 一条专属规则 —— 其他地方（确认金句按钮、删除人设按钮）
   加了 hidden 类却没有任何效果，按钮常态显示。 */
.hidden { display: none !important; }

/* ── 用量/成本看板 ── */
.usage-pane { flex: 1; overflow-y: auto; padding: 22px 26px 40px; }

/* ── 服务与访问控制 ── */
.control-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px 26px 40px;
}
.control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.control-head h2 { margin: 0 0 3px; font-size: 18px; }
.control-head span { font-size: 11px; }
.control-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 9px;
}
.control-service {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  text-decoration: none;
}
.control-service:hover { border-color: var(--accent); background: var(--bg-3); }
.control-service-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
}
.control-service-copy { display: grid; min-width: 0; }
.control-service-copy strong,
.control-service-copy small { overflow-wrap: anywhere; }
.control-service-copy strong { font-size: 13px; }
.control-service-copy small { margin-top: 3px; color: var(--muted); font-size: 10.5px; }
.control-service-state { font-size: 10.5px; white-space: nowrap; }
.control-service-state.online { color: var(--green); }
.control-service-state.offline { color: var(--red); }
.control-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.control-section h3 { margin: 0 0 10px; font-size: 14px; }
.control-section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.control-section-title h3 { margin-bottom: 3px; }
.control-section-title span { display: block; font-size: 11px; }
.control-key-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.control-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.control-key-row:last-child { border-bottom: 0; }
.control-key-row:hover { background: var(--bg-3); }
.control-key-row > span { display: grid; min-width: 0; }
.control-key-row strong { font-size: 12.5px; }
.control-key-row small { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.control-key-row b { color: var(--accent); font-size: 11px; font-weight: 500; }
.control-password-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 9px;
  margin-top: 12px;
}
.control-password-form label { display: grid; gap: 5px; min-width: 0; }
.control-password-form label > span { color: var(--muted); font-size: 11px; }
.control-password-form input { min-width: 0; }
.control-password-form .btn { min-height: 34px; white-space: nowrap; }
.control-result { min-height: 18px; margin-top: 8px; font-size: 11px; }
.control-result.success { color: var(--green); }
.control-result.error { color: var(--red); }
.update-deploy-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.update-deploy-summary > div { min-width: 0; padding: 10px 12px; }
.update-deploy-summary > div + div { border-left: 1px solid var(--border); }
.update-deploy-summary span,
.update-deploy-summary strong { display: block; overflow-wrap: anywhere; }
.update-deploy-summary span { color: var(--muted); font-size: 10.5px; }
.update-deploy-summary strong { margin-top: 4px; font-family: var(--mono); font-size: 11.5px; }
.update-deploy-settings {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, .5fr) auto;
  align-items: end;
  gap: 9px;
  margin-top: 12px;
}
.update-deploy-settings label { display: grid; gap: 5px; min-width: 0; }
.update-deploy-settings label > span { color: var(--muted); font-size: 11px; }
.update-deploy-settings input { min-width: 0; width: 100%; }

@media (max-width: 600px) {
  .control-pane { padding: 16px; }
  .control-service-grid { grid-template-columns: 1fr; }
  .control-password-form { grid-template-columns: 1fr; }
  .update-deploy-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .update-deploy-summary > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .update-deploy-summary > div:nth-child(4) { border-top: 1px solid var(--border); }
  .update-deploy-settings { grid-template-columns: 1fr; }
  .control-section-title {
    align-items: stretch;
    flex-direction: column;
  }
  .control-section-title .btn { align-self: flex-start; }
}

/* ── AI 资产观测 ── */
.asset-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 22px 26px 40px;
}
.asset-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.asset-head h2 { margin: 0 0 3px; font-size: 18px; }
.asset-head > div > span { font-size: 11px; }
.asset-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.asset-summary-item {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.asset-summary-item:hover { border-color: var(--accent); background: var(--bg-3); }
.asset-summary-item span,
.asset-summary-item small { display: block; color: var(--muted); font-size: 10px; }
.asset-summary-item strong { display: block; margin: 3px 0; font-size: 20px; }
.asset-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 12px;
}
.asset-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.asset-toolbar-actions .asset-search { flex: 1; }
.asset-toolbar-actions > .btn { flex: 0 0 auto; }
.asset-kinds {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.asset-kinds button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px 11px;
  cursor: pointer;
}
.asset-kinds button.active { background: var(--active); color: var(--accent); }
.asset-search { display: flex; gap: 6px; min-width: 0; }
.asset-search input { width: min(240px, 32vw); }
.asset-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.asset-sticker {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-2);
}
.asset-sticker-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-3);
}
.asset-sticker-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.asset-sticker-body { padding: 8px; }
.asset-sticker-body strong,
.asset-sticker-body > span,
.asset-sticker-body small {
  display: block;
  overflow-wrap: anywhere;
}
.asset-sticker-body strong { font-size: 12px; }
.asset-sticker-body > span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.asset-sticker-body small { margin-top: 6px; color: var(--faint); font-size: 10px; }
.asset-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
  white-space: nowrap;
}
.asset-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.asset-tags span {
  padding: 2px 5px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 9px;
}
.asset-table-wrap {
  max-height: calc(100vh - 330px);
  overflow: auto;
  border: 1px solid var(--border);
}
.asset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.asset-table th,
.asset-table td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.asset-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-3);
  color: var(--muted);
  font-weight: 500;
}
.asset-table td small { display: block; margin-top: 3px; color: var(--faint); }
.asset-table .r { text-align: right; }
.asset-table tr:last-child td { border-bottom: 0; }

@media (max-width: 600px) {
  .asset-toolbar-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .asset-toolbar-actions .asset-search { width: 100%; }
  .asset-actions { justify-content: flex-start; }
}

.usage-wrap { max-width: 940px; margin: 0 auto; }
.usage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.usage-head h2 { font-size: 17px; font-weight: 600; }
.usage-days { display: flex; gap: 6px; }
/* 五张统计卡片固定一行排开（估算成本 / 调用 / 搜索 / 输入 / 缓存命中率）。
   minmax(0,1fr) 防止长数字把列撑爆；曾经第一张跨两列、五张卡占两行，
   空间利用率低，已按需求改为一行。 */
.usage-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
/* 窗口太窄时退回自动换行，不把卡片压成纸条 */
@media (max-width: 860px) {
  .usage-cards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
.usage-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.usage-card.accent { border-color: rgba(91,140,255,.45); background: rgba(91,140,255,.07); }
.uc-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-value { font-size: 22px; font-weight: 600; font-family: var(--mono); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 主指标（估算成本）靠 accent 描边/底色突出 —— 一行五列的布局里各卡同宽，
   不再靠放大字号做视觉重心（大数字在长金额下会溢出卡片）。 */
.uc-sub { font-size: 11px; color: var(--muted); margin-top: 6px; }
.usage-bar { height: 5px; background: var(--bg-3); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.usage-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.usage-bar-fill.ok { background: var(--green); }
.usage-note { font-size: 12px; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 20px; line-height: 1.6; }
.usage-h3 { font-size: 13px; font-weight: 600; margin: 22px 0 8px; color: var(--muted); }
/* 表格基础：统一一份（此前有两处定义、padding 还不一致，合并后取更舒适的行高） */
.usage-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
  background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.usage-table th, .usage-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.usage-table th { color: var(--muted); font-weight: 500; background: var(--bg-3); }
.usage-table tr:last-child td { border-bottom: none; }
.usage-table .r, .usage-table th.r { text-align: right; font-family: var(--mono); }
/* 名称列允许换行，其余列不换行 —— 长模型名不会撑爆布局，也不会被挤成竖排 */
.usage-table td:first-child,
.usage-table th:first-child {
  white-space: normal; overflow-wrap: anywhere; min-width: 120px; max-width: 260px;
}
.usage-table td:not(:first-child):not(.r) { overflow: hidden; text-overflow: ellipsis; }
/* 表头吸顶：长表格滚动时始终能看到列名 */
.usage-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-3); }

/* ── 模型添加弹窗：搜索 + 双列（中转站常有几百个模型）── */
.ma-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-shrink: 0; }
.ma-toolbar input[type=text] {
  flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 7px; color: var(--text); outline: none;
}
.ma-toolbar input[type=text]:focus { border-color: var(--accent); }
/* 限高：中转站可能返回上千个模型，不限高会把弹窗撑出屏幕。
   两列各自滚动，搜索框和底部按钮始终可见。 */
.ma-body {
  display: flex; gap: 10px; min-height: 0; flex: 1; overflow: hidden;
  max-height: min(56vh, 460px);
}
.ma-body .model-modal-left,
.ma-body .model-modal-right { overflow-y: auto; min-height: 120px; }
.ma-body.single .model-modal-right { border-left: none; }
.ma-body.dual .model-modal-left { width: 190px; }
.mm-model-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-model input[type=checkbox] { flex-shrink: 0; accent-color: var(--accent); }

/* ── 峰谷拆分（仅 DeepSeek 等分时段计价的厂商会显示）── */
.usage-peak {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 20px;
}
.up-title { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.up-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 7px; }
.up-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.up-dot.peak { background: var(--orange, #ffb454); }
.up-dot.off { background: var(--green, #3fce7a); }
.up-label { width: 62px; flex-shrink: 0; color: var(--muted); }
.up-val { width: 78px; flex-shrink: 0; font-family: var(--mono); }
.up-bar { flex: 1; min-width: 40px; height: 5px; background: var(--bg-3); border-radius: 999px; overflow: hidden; }
.up-bar i { display: block; height: 100%; background: var(--orange, #ffb454); }
.up-bar i.off { background: var(--green, #3fce7a); }
.up-pct { width: 78px; flex-shrink: 0; text-align: right; color: var(--muted); font-size: 11.5px; }
.up-hint { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 8px; opacity: .85; }

/* ── 用量页：可点击表格行 + 模态框内页签 ── */
.usage-hint { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.usage-table.clickable tbody tr { cursor: pointer; }
.usage-table.clickable tbody tr:hover { background: var(--bg-3); }

/* 弹窗内的表格：可点击行 + 页签换行（弹窗比页面窄，页签要能折行） */
.ub-tabs { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.ub-tabs .btn-small { white-space: nowrap; }
/* 弹窗里的峰谷块不需要页面版那么大的下边距 */
.usage-peak { margin-bottom: 12px; }

/* ── 模型单价卡片 + 批量编辑 ── */
.price-card {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px; margin-top: 8px;
}
.price-card.locked { opacity: .82; border-style: dashed; }
.pc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pc-title { font-size: 12px; color: var(--muted); }
.pc-model { font-size: 13px; font-family: var(--mono); color: var(--accent); word-break: break-all; }
.pc-rows { display: flex; gap: 16px; flex-wrap: wrap; }
.pc-row { display: flex; align-items: center; gap: 6px; }
.pc-label { font-size: 12px; color: var(--muted); width: 52px; }
.pc-row input[type=number] {
  width: 82px; padding: 5px 8px; font-size: 12.5px; font-family: var(--mono);
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); outline: none;
}
.pc-row input[type=number]:focus { border-color: var(--accent); }
.pc-row input[type=number]:disabled { opacity: .6; cursor: not-allowed; }
.pc-unit { font-size: 11px; color: var(--muted); }
.pc-note { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-top: 10px; }
.bp-del {
  border: 1px solid var(--border); background: none; color: var(--muted);
  border-radius: 6px; padding: 2px 8px; cursor: pointer; font-size: 11px;
}
.bp-del:hover { color: var(--red); border-color: rgba(255,107,107,.5); }
.bp-in, .bp-out, .bp-cached {
  width: 74px; padding: 4px 6px; font-size: 12px; font-family: var(--mono);
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); outline: none;
}
.bp-in:focus, .bp-out:focus, .bp-cached:focus { border-color: var(--accent); }

/* ── 下钻明细弹窗 ── */
/* 表格外层可滚动，避免行多时撑破弹窗 */
.model-modal .usage-table { display: table; }
.model-modal > table.usage-table { display: block; overflow-y: auto; min-height: 0; }
.model-modal > table.usage-table thead,
.model-modal > table.usage-table tbody { display: table; width: 100%; }
.model-modal > table.usage-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-2);
}
/* 页签下方的说明文字（峰谷提示等）不参与压缩 */
.model-modal .hint,
.model-modal .up-hint { flex-shrink: 0; }
.model-modal #ub-peak { flex-shrink: 0; }

/* 下钻弹窗：整体纵向布局，表格区独占滚动 */
.ub-wrap {
  display: flex; flex-direction: column;
  min-height: 0; flex: 1; gap: 10px;
}
.ub-scroll {
  flex: 1; min-height: 120px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
.ub-scroll .usage-table { width: 100%; }
.ub-scroll thead th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-2);
}

/* ── 读取历史档位：长条按钮 + 参数区 ── */
.tier-bar {
  display: flex; gap: 6px; margin: 8px 0 4px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px;
}
.tier-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: none; border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer;
  font-size: 12px; transition: background .12s, color .12s;
  min-width: 0;
}
.tier-btn:hover { background: var(--hover); }
.tier-btn.on {
  background: var(--accent); color: #fff;
}
.tier-num { font-size: 15px; font-weight: 700; line-height: 1; }
.tier-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.tier-params { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tier-param {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
}
.tier-param.dim { opacity: .42; }
.tier-param label { display: block; font-size: 12.5px; margin-bottom: 4px; }
.tier-param input[type=number] {
  width: 68px; padding: 3px 6px; font-family: var(--mono);
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); outline: none;
}
.tier-param input[type=number]:focus { border-color: var(--accent); }
.tier-param textarea {
  width: 100%; margin-top: 4px; padding: 6px 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 12.5px;
  font-family: var(--mono); resize: vertical; outline: none;
}
.tier-param textarea:focus { border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   UI 优化：通用控件
   ══════════════════════════════════════════════════════════════ */

/* 图标按钮（顶栏主题切换用）：方正规整，hover 有反馈，键盘可达 */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
  cursor: pointer; font-size: 14px; line-height: 1;
  transition: background .12s, border-color .12s;
}
.icon-btn:hover { background: var(--hover); border-color: var(--accent); }
.icon-btn:active { background: var(--active); }

/* 键盘可达性：统一焦点环。此前完全没有 focus 样式，Tab 导航时没有任何视觉提示。 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 主题选择组（设置页） */
.theme-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-option {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 84px; padding: 10px 6px;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 8px; cursor: pointer; font-size: 12px; color: var(--muted);
  transition: border-color .12s, color .12s, background .12s;
}
.theme-option:hover { background: var(--hover); }
.theme-option.on { border-color: var(--accent); color: var(--text); }
.theme-option .t-ico { font-size: 18px; }

/* 滚动条：跟随主题（此前未定义，亮色主题下滚动条会很难看） */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid var(--bg);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* 过渡：颜色变化时平滑，避免切换主题时"咔"一下 */
body, .btn, .tab, .model-modal, .price-card, .tier-btn, .icon-btn {
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

/* 列表底部的分页提示（滚动加载更多） */
.list-more {
  padding: 10px 14px;
  font-size: 11.5px;
  text-align: center;
  border-top: 1px solid var(--border);
  min-height: 1px;
}
.list-more:empty { border-top: none; padding: 0; }

/* ── 骨架屏（用量页加载占位）──
   用微光扫过表示"正在加载"，比一行静态文字更能传达进度感。
   颜色用 --hover / --border，自动适配明暗主题。 */
.skeleton { pointer-events: none; }
.sk-line, .sk-row {
  display: block;
  border-radius: 5px;
  background: var(--hover);
  position: relative;
  overflow: hidden;
}
.sk-line { height: 13px; margin: 8px 0; width: 70%; }
.sk-line.short { width: 42%; }
.sk-row { height: 26px; margin: 6px 0; }
.sk-block { margin-top: 18px; }

/* 微光扫过：用 transform 而非 background-position（GPU 友好） */
.sk-line::after, .sk-row::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--active), transparent);
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}

/* ── 响应档位滑条 ── */
.tier-slider-wrap { margin: 12px 0 4px; }
.tier-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  /* 已填充部分用强调色，未填充用中性色；--pos 由 JS 实时写入 */
  background: linear-gradient(90deg,
    var(--accent) 0 var(--pos, 100%),
    var(--border) var(--pos, 100%) 100%);
  outline: none;
  cursor: pointer;
  transition: background var(--dur-fast) linear;
}
/* 滑块 */
.tier-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-2);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-base) var(--ease-out-quart);
}
.tier-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tier-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.tier-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(91,140,255,.25); }
.tier-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-2);
  box-shadow: var(--shadow-sm);
  cursor: grab;
}

/* 四段刻度：宽度按各段占比（inline flex 由 JS 给出），视觉上对齐滑条 */
.tier-scale { display: flex; gap: 2px; margin-top: 8px; }
.tier-seg {
  font-size: 10.5px;
  color: var(--faint);
  text-align: center;
  padding: 3px 2px;
  border-top: 2px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--dur-base) var(--ease-in-out), border-color var(--dur-base) var(--ease-in-out);
  min-width: 0;
}
/* 未选中的段：弱化（细线用中性色） */
.tier-seg.seg4 { border-top-color: var(--border); }

/* ── 选中态：滑到哪一档，那一档的标签 + 上边线一起变色 ──
   ⚠️ 之前颜色是按 .s1/.s4 写死的静态样式（s1 永远亮、s4 永远橙），
      跟滑条完全无关，所以拖动时刻度毫无反应。
      现在统一由 JS 加/去 .on 类驱动，各档用不同语义色：
      越往右越"话痨"，颜色也从冷到暖，扫一眼就知道当前激进度。 */
.tier-seg.on {
  color: var(--text);
  font-weight: 600;
}
.tier-seg.seg1.on { border-top-color: var(--accent); }
.tier-seg.seg2.on { border-top-color: var(--green); }
.tier-seg.seg3.on { border-top-color: var(--accent); }
.tier-seg.seg4.on { border-top-color: var(--orange); }

/* 选中段的标签给一点底色，让"当前档"更明确 */
.tier-seg.on {
  background: linear-gradient(180deg, transparent, var(--hover));
  border-radius: 0 0 5px 5px;
}

/* ── 用量卡片：可点击 / 小标签 ── */
.usage-card.clickable { cursor: pointer; }
.usage-card.clickable:hover { border-color: var(--accent); }
.uc-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* "明细 ›" 提示：默认很淡，悬浮才显现，避免干扰读数 */
.uc-more {
  font-size: 10px;
  color: var(--accent);
  opacity: .55;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.usage-card.clickable:hover .uc-more { opacity: 1; }
/* "不计入成本" 小标签：明确告诉用户这数字不进钱 */
.uc-tag {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--muted);
  background: var(--hover);
  border: 1px solid var(--border);
  font-weight: 400;
}

/* ── 调用明细弹窗 ── */
.tool-breakdown { min-width: 380px; }
.tb-lead {
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.tb-cat { margin-bottom: 14px; }
.tb-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.tb-cat-sum { font-weight: 400; color: var(--faint); font-size: 10.5px; }
.tb-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  font-size: 12px;
}
.tb-icon { width: 16px; text-align: center; flex: none; }
.tb-name { width: 74px; flex: none; color: var(--text); }
.tb-code {
  width: 118px;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 条形：宽度按最大次数归一，视觉上能立刻看出谁是主力 */
.tb-bar {
  flex: 1;
  height: 5px;
  background: var(--hover);
  border-radius: 999px;
  overflow: hidden;
  min-width: 40px;
}
.tb-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  /* 入场时从 0 展开，比直接画出来更有"生长感" */
  animation: barGrow var(--dur-slower) var(--ease-out-quart);
}
@keyframes barGrow { from { width: 0 !important; } }
.tb-n {
  width: 34px;
  flex: none;
  text-align: right;
  font-family: var(--mono);
  color: var(--text);
}


#console-login {
  width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg, #fff);
  color: var(--text, #202020);
  padding: 24px;
}
#console-login::backdrop { background: #0008; }
#console-login-form { display: grid; gap: 12px; }
#console-login-form h2 { font-size: 20px; margin: 0 0 8px; }
#console-token { width: 100%; min-width: 0; box-sizing: border-box; }
#console-login-error { color: #d64848; margin: 0; }
#runtime-mode { width: 84px; padding: 5px; }
@media (max-width: 760px) {
  #topbar, .top-status { flex-wrap: wrap; height: auto; gap: 8px; }
  #model-label { max-width: 220px; overflow-wrap: anywhere; }
  #tabs { flex-wrap: nowrap; height: auto; }
  .session-mode-band {
    grid-template-columns: minmax(100px, 1fr) minmax(120px, 1fr);
  }
  .session-mode-detail,
  .session-mode-ref { grid-column: 1 / -1; }
  .thread-timeline-head { display: block; }
  .thread-timeline-head > span { margin-top: 5px; white-space: normal; }
  .context-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-tabs { gap: 12px; overflow-x: auto; }
  .context-tabs button { flex: 0 0 auto; }
  .context-layout { max-width: 56%; }
  .conversation-mode-switch { grid-template-columns: 1fr; }
  .conversation-mode-stage { min-height: 0; }
  .conversation-mode-facts { grid-template-columns: 1fr; gap: 10px; }
  .conversation-mode-flow { flex-wrap: wrap; }
  .conversation-mode-flow i { flex-basis: 14px; }
  .conversation-scope-heading { display: block; }
  .conversation-scope-heading span { display: block; margin-top: 4px; text-align: left; }
  .conversation-scope-actions { align-items: flex-start; flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════════
   视觉刷新层
   ══════════════════════════════════════════════════════════════
   只改观感，不动布局与交互：配色对齐项目标记的深海蓝，统一圆角 / 描边 / 阴影 / 间距，
   给悬停、选中、聚焦补上明确反馈。放在文件末尾，同选择器覆盖上面的旧规则。
   新增组件请优先用这里的习惯（圆角 10/12/14，边框 var(--border)，阴影 var(--shadow-*)）。
*/

/* ── 页面底色与排版 ── */
body {
  background-image:
    radial-gradient(1100px 520px at 12% -10%, rgba(76, 141, 255, .10), transparent 60%),
    radial-gradient(900px 420px at 88% -18%, rgba(47, 208, 122, .07), transparent 62%);
  background-attachment: fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Noto Sans SC', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
[data-theme='light'] body { background-image: none; }
::selection { background: rgba(76, 141, 255, .28); }
:focus-visible { outline: 2px solid rgba(76, 141, 255, .55); outline-offset: 1px; }

/* ── 按钮 ── */
.btn {
  border-radius: 10px; padding: 6px 14px; border: 1px solid var(--border);
  background: var(--bg-3); color: var(--text); font-weight: 550;
  transition: background .15s, border-color .15s, transform .06s, box-shadow .15s;
}
.btn:hover { border-color: rgba(76, 141, 255, .55); color: var(--text); background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #5590ff, #3f7ef0); border-color: rgba(255, 255, 255, .14);
  color: #fff; box-shadow: 0 2px 10px rgba(63, 126, 240, .28);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-danger { background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .45); color: var(--red); }
.btn-small { padding: 4px 10px; border-radius: 9px; font-size: 12.5px; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.icon-btn {
  border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* ── 表单控件 ── */
input, textarea, select {
  border-radius: 10px; border: 1px solid var(--border); background: var(--bg-3);
  color: var(--text); padding: 7px 10px; transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: rgba(76, 141, 255, .6);
  box-shadow: 0 0 0 3px rgba(76, 141, 255, .18);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
#runtime-mode { font-weight: 550; }

/* ── 面板、列表与卡片 ── */
.list-pane, .detail-pane, .settings-sidebar, .settings-pane, .tool-card, .asset-pane,
.control-pane, .usage-card, .health-card, .price-card, .context-inspector, .conversation-mode-shell {
  border-radius: 14px;
}
.chat-item, .session-item, .pick-item, .settings-menu-item, .tool-card, .health-card {
  border-radius: 12px;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.chat-item:hover, .session-item:hover, .pick-item:hover, .settings-menu-item:hover {
  background: var(--hover); box-shadow: var(--shadow-sm);
}
.chat-item.selected, .session-item.selected, .settings-menu-item.active {
  background: rgba(76, 141, 255, .10);
  border-left: 3px solid var(--accent);
}
.chat-item-title, .session-title { font-weight: 600; letter-spacing: .1px; }
.chat-item-sub, .session-meta, .session-time { color: var(--muted); }
.list-head, .detail-header, .control-section-title { letter-spacing: .2px; }

/* ── 状态徽标：从描边改成"淡底 + 同色文字"的胶囊 ── */
.status-badge, .vbadge, .mode-chip, .member-chip, .unread-pill, .sent-badge, .thread-pill, .mode-state-token {
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 550;
  border: 1px solid var(--border); background: var(--bg-3); color: var(--muted);
}
.status-done, .status-waiting, .mode-lifecycle {
  background: rgba(47, 208, 122, .12); border-color: rgba(47, 208, 122, .38); color: var(--green);
}
.status-running, .mode-threaded {
  background: rgba(76, 141, 255, .12); border-color: rgba(76, 141, 255, .40); color: var(--accent);
}
.status-error, .status-aborted {
  background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .40); color: var(--red);
}
.status-noreply, .mode-legacy {
  background: rgba(247, 185, 85, .13); border-color: rgba(247, 185, 85, .40); color: var(--orange);
}

/* ── 气泡 ── */
.bubble { border-radius: 14px; box-shadow: var(--shadow-sm); }
.bubble-assistant { background: var(--bg-3); }
.bubble-user { background: rgba(76, 141, 255, .13); border: 1px solid rgba(76, 141, 255, .22); }

/* ── 表格 ── */
.usage-table, .asset-table, .incident-table, .member-table, .model-rows-table,
.context-call-table, .archive-table, .identity-pilot-table { border-collapse: separate; border-spacing: 0; }
.usage-table th, .asset-table th, .incident-table th, .member-table th, .model-rows-table th,
.context-call-table th, .archive-table th, .identity-pilot-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-2); color: var(--muted); font-weight: 600; font-size: 12.5px;
  letter-spacing: .3px; border-bottom: 1px solid var(--border);
}
.usage-table td, .asset-table td, .incident-table td, .member-table td, .model-rows-table td,
.context-call-table td, .archive-table td, .identity-pilot-table td { border-bottom: 1px solid var(--border); }
.usage-table tbody tr:hover, .asset-table tbody tr:hover, .incident-table tbody tr:hover,
.member-table tbody tr:hover, .model-rows-table tbody tr:hover, .context-call-table tbody tr:hover,
.archive-table tbody tr:hover, .identity-pilot-table tbody tr:hover { background: var(--hover); }
.asset-table-wrap, .context-call-table-wrap { border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }

/* ── 对话框 / 登录卡 / 加载页 ── */
/* 弹窗类才需要压暗背景；启动提示是浮层，不压暗（否则进控制台会整屏闪一下） */
.modal-overlay, .model-modal-overlay { backdrop-filter: blur(3px); background: var(--overlay); }
.modal, .model-modal, .loading-card { border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.modal-head, .model-modal-head { border-bottom: 1px solid var(--border); }
.modal-foot, .model-modal-foot { border-top: 1px solid var(--border); }

/* ── 空状态与提示条 ── */
.empty-hint, .context-empty {
  border: 1px dashed var(--border); border-radius: 14px; color: var(--muted);
  padding: 22px 18px; background: color-mix(in srgb, var(--bg-2) 60%, transparent);
}
.banner { border-radius: 12px; border: 1px solid rgba(76, 141, 255, .35); background: rgba(76, 141, 255, .10); }

/* ── 滚动条 ── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }

/* ── 骨架屏 ── */
.skeleton, .sk-line, .sk-block { border-radius: 8px; }

/* ══════════════════════════════════════════════════════════════
   表单系统
   ══════════════════════════════════════════════════════════════
   背景：原来字段容器是 flex + flex:1，输入框会被拉到整行宽（一个 QQ 号占 900px），
   标签只是 12px 灰字，复选框行的文字会被挤成三行。这里统一成：
     · 字段自适应网格，列宽 200~300px，输入框不再无限拉伸；
     · 标签统一 12px / 600 字重 / 与控件 6px 间距；
     · 控件统一 36px 高、10px 圆角、悬停与聚焦都有反馈；
     · 复选框 / 单选框行横向排列、不换行、与控件同高；
     · 提交类按钮单独占一行并右对齐（在网格里跨列）。
   仍然只动样式：所有控件 ID、class、JS 逻辑不变。
*/

/* ── 字段容器：flex 拉伸 → 自适应网格 ── */
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 340px));
  gap: 12px 18px;
  align-items: end;
  margin-bottom: 14px;
}
/* 数字/短文本字段不必占满列宽；文本框（URL、模型名等）保留较宽的列 */
.field:has(input[type=number]) { max-width: 220px; }
.update-deploy-settings > label:has(input[type=number]) { max-width: 220px; }
.field { min-width: 0; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--muted);
}
.field input[type=text], .field input[type=password], .field input[type=number],
.field input[type=search], .field select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-3);
  font-size: 13.5px;
}
.field textarea { width: 100%; padding: 10px 12px; border-radius: 10px; background: var(--bg-3); font-size: 13.5px; }
.field input:hover:not(:disabled), .field select:hover:not(:disabled), .field textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .6; cursor: not-allowed; }
.field input[type=number] { font-variant-numeric: tabular-nums; }

/* ── 旧式内联字段（<label><span>标题</span><input></label>，如"更新部署"）── */
.update-deploy-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  gap: 12px 16px;
  align-items: end;
}
.update-deploy-settings > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.update-deploy-settings > label > span { font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--muted); }
.update-deploy-settings input[type=text],
.update-deploy-settings input[type=number],
.update-deploy-settings input[type=search] { width: 100%; height: 36px; padding: 0 12px; border-radius: 10px; }
.update-deploy-settings > label:has(> input[type=checkbox]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 2px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.update-deploy-settings > .btn { grid-column: 1 / -1; justify-self: end; }

/* ── 勾选类控件 ── */
input[type=checkbox], input[type=radio] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--accent);
  margin: 0;
}
.checkbox-row { align-items: center; gap: 8px; min-height: 32px; font-size: 13px; }
.checkbox-row label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.experimental-settings .checkbox-row { flex-wrap: nowrap; }

/* ── 概览数字（当前版本 / 目标版本 / 上次检查 …）── */
.update-deploy-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 12px 0 16px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.update-deploy-summary > div {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; background: var(--bg-2);
}
.update-deploy-summary span { font-size: 11.5px; color: var(--muted); }
.update-deploy-summary strong { font-family: var(--mono); font-size: 13.5px; font-weight: 600; }

/* ── 区块标题与说明 ── */
.control-section-title h3 { font-size: 15px; font-weight: 650; letter-spacing: .2px; }
.control-section-title .muted { font-size: 12px; }
.settings-pane section > h3 { font-size: 15px; font-weight: 650; letter-spacing: .2px; margin: 0 0 6px; }
.hint { font-size: 12px; line-height: 1.55; }
.control-result { border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }

/* ── 操作条：按钮成组出现时统一间距与对齐 ── */
.settings-actions { gap: 10px; margin: 16px 0; }
.control-password-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); gap: 12px 16px; align-items: end; }
.control-key-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); gap: 12px 16px; align-items: end; }

/* ── 登录对话框 ── */
#console-login { border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; background: var(--bg-2); box-shadow: var(--shadow-lg); }
#console-login::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
#console-login-form { display: flex; flex-direction: column; gap: 10px; }
#console-login-form h2 { font-size: 16px; font-weight: 650; margin: 0 0 4px; }
#console-login-form label { font-size: 12px; font-weight: 600; letter-spacing: .2px; color: var(--muted); }
#console-login-form input { height: 36px; }
#console-login-form .btn { height: 36px; justify-content: center; }

/* 其余长文本字段（URL 等）：不再铺满整行，但保留比普通字段更宽的宽度 */
#cfg-price-remote-url, #new-baseurl, #auto-update-branch-advanced { max-width: 520px; }
#cfg-model-pick { max-width: 560px; }

/* ── 主题切换的平滑过渡与状态条对齐（消除"闪"与横向位移）──
   主题在启动时可能被后端配置调整一次；直接换色会"啪"地一下，这里给常用表面加上
   0.2s 过渡。状态条右对齐：文字从"模型：-"变成完整信息时会变长，右对齐让增长向左
   展开，位置更稳。 */
body, #sidebar, #topbar, #tabs, .view, .list-pane, .detail-pane, .chat-item, .session-item,
.btn, .icon-btn, input, select, textarea, .control-section, .health-card, .usage-card,
.tool-card, .price-card, .modal, .banner, .empty-hint, .tab, table, th, td {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#topbar { justify-content: flex-end; }
.top-status { justify-content: flex-end; }

/* ── 顶栏高度固定：状态条文字变长时不再换行，避免"整块内容被顶下去再回来" ──
   实测 1024px 窗口：数据到达后状态条从 27px 变 63px（换行），顶栏 48 → 83px，
   下面所有内容整体位移 35px。这里锁死顶栏高度 + 状态条不换行 + 超长省略。 */
#topbar { height: 54px; flex-wrap: nowrap; gap: 10px; overflow: hidden; }
.top-status { flex-wrap: nowrap; overflow: hidden; min-width: 0; }
.top-status > .muted {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 34vw; flex-shrink: 1; min-width: 0;
}
@media (max-width: 760px) {
  .top-status > .muted { max-width: 42vw; }
}

/* maintenance.css */
#maintenance-page h2 { margin: 0 0 10px; }
#maintenance-page h3 { margin: 24px 0 10px; }
#maintenance-page p { margin: 8px 0 12px; line-height: 1.7; }
#maintenance-page .usage-table { min-width: 620px; }
#maintenance-page .usage-table td:first-child { white-space: nowrap; }
#maintenance-result:empty { display: none; }

/* content-manager.css */
.content-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.content-heading h2,.content-heading h3{margin:0}.content-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.content-message{color:#b45309;line-height:1.5}.content-message:empty{display:none}.btn.danger{color:#af4f58}.collection-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px}.collection-folders{display:flex;flex-direction:column;gap:7px}.folder{display:flex;justify-content:space-between;gap:8px;padding:12px;border:1px solid var(--border,#dce5f3);border-radius:10px;background:var(--panel,#fff);color:inherit;text-align:left;cursor:pointer;overflow-wrap:anywhere}.folder.active{background:rgba(93,146,255,.1);border-color:#79a6ff}.folder strong{opacity:.6}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.collection-card,.subscription-card{border:1px solid var(--border,#dce5f3);border-radius:14px;background:var(--panel,#fff);overflow:hidden}.collection-image{display:block;width:100%;height:210px;padding:12px;border:0;background:rgba(125,142,166,.07);cursor:zoom-in}.collection-image img{width:100%;height:100%;object-fit:contain}.collection-details,.subscription-body{padding:16px}.collection-details small{font-size:11px;opacity:.65}.collection-details p{min-height:20px;overflow-wrap:anywhere}.pagination{justify-content:center;margin:20px}.content-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 40px);border:1px solid var(--border,#dce5f3);border-radius:16px;padding:24px;background:var(--panel,#fff);color:inherit;box-shadow:0 24px 80px rgba(20,35,65,.2)}.content-dialog::backdrop{background:rgba(14,24,42,.4)}.content-dialog h2{margin:0 0 20px}.content-dialog label{display:grid;gap:8px;margin:16px 0}.content-dialog input:not([type=checkbox]),.content-dialog select,.content-dialog textarea{width:100%}.content-dialog small{opacity:.7}.content-dialog footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.content-dialog .content-checkbox{display:flex;align-items:center;gap:8px}.content-full-image{display:block;max-width:100%;max-height:65vh;object-fit:contain;margin:auto}.content-filters{margin-bottom:20px}.content-filters label{display:flex;gap:8px;align-items:center}.subscription-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}.subscription-cover{width:100%;height:190px;object-fit:cover;background:rgba(125,142,166,.09)}.cover-empty{display:flex;align-items:center;justify-content:center;opacity:.7}.subscription-body h3{font-size:18px;margin:10px 0;line-height:1.5}.subscription-body p{line-height:1.6;margin:8px 0}@media(max-width:760px){.collection-layout{grid-template-columns:1fr}.collection-folders{flex-direction:row;overflow:auto}.folder{min-width:110px}.collection-grid,.subscription-grid{grid-template-columns:1fr}.content-dialog{padding:18px}}

/* modern.css */
/* Console presentation. Business views retain their existing IDs and handlers. */
:root,[data-theme='dark'] {
  --bg:#101216;--bg-2:#191c22;--bg-3:#232730;--panel:var(--bg-2);
  --border:#2b303a;--text:#edf0f5;--muted:#a0a8b8;--faint:#818b9d;
  --accent:#9d9bff;--green:#65cfa4;--red:#f28e96;--orange:#e6b575;
  --hover:rgba(190,195,215,.06);--active:rgba(190,195,215,.11);
  --brand-soft:rgba(157,155,255,.12);--sidebar-bg:#15171c;
  --shadow-sm:0 2px 8px rgba(0,0,0,.12);--shadow-md:0 8px 28px rgba(0,0,0,.2);
  --shadow-lg:0 20px 60px rgba(0,0,0,.32);
}
[data-theme='light'] {
  --bg:#f5f6f8;--bg-2:#fff;--bg-3:#f0f2f6;--panel:var(--bg-2);
  --border:#e5e8ee;--text:#252a36;--muted:#667085;--faint:#7c8595;
  --accent:#625ad7;--green:#16866a;--red:#c74555;--orange:#b76b17;
  --hover:rgba(30,40,65,.035);--active:rgba(30,40,65,.07);
  --brand-soft:#eeecfb;--sidebar-bg:#fbfbfd;
  --shadow-sm:0 2px 8px rgba(24,35,55,.035);--shadow-md:0 8px 28px rgba(24,35,55,.055);
  --shadow-lg:0 20px 60px rgba(24,35,55,.14);
}
body{font-family:Inter,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:.01em;background-image:none;}
#sidebar{width:224px;padding:24px 14px 16px;background:var(--sidebar-bg);gap:16px;}
.side-head{padding:0 10px 10px;gap:12px;}
.side-head .brand-mark{width:34px;height:34px;border-radius:11px;}
.side-title strong{font-size:17px;letter-spacing:-.4px;}
.brand-sub{margin-top:3px;font-size:11px;}
#tabs{gap:4px;padding:0 2px;scrollbar-width:thin;}
.nav-group-label{padding:16px 12px 7px;font-size:10px;letter-spacing:1.2px;color:var(--faint);}
.tab{padding:10px 12px;border-radius:9px;gap:12px;font-size:13px;font-weight:500;min-height:39px;}
.tab::before{content:'';width:18px;height:18px;background:currentColor;mask:var(--nav-icon) center/contain no-repeat;opacity:.8;}
.tab.active{background:var(--brand-soft);color:var(--accent);border-color:transparent;box-shadow:none;}
.tab.active::before{opacity:1;}
.tab.active::after{display:none;}
.side-foot{padding:14px 4px 0;gap:6px;}
#topbar{min-height:76px;padding:15px 30px;justify-content:space-between;background:var(--bg-2);gap:20px;}
.console-location{flex-shrink:0;display:flex;flex-direction:column;gap:4px;}
.console-location strong{font-size:15px;letter-spacing:-.25px;}
.console-location span{font-size:11px;color:var(--muted);}
.top-status{justify-content:flex-end;gap:6px;}
.top-status>.muted{font-size:11px;padding:5px 9px;border-color:transparent;background:var(--bg-3);border-radius:6px;}
#onebot-label{color:var(--text);background:transparent;}
.dot{box-shadow:none;}
.usage-pane,.asset-pane,.control-pane{padding:32px clamp(20px,3vw,44px) 40px;}
#collections-page,#subscriptions-page,#maintenance-page{width:100%;}
.content-heading{gap:16px;margin-bottom:22px;}
.content-heading h2,.usage-head h2,#maintenance-page>h2{font-size:25px;font-weight:650;letter-spacing:-.7px;line-height:1.35;}
.content-heading .hint{max-width:640px;margin-top:7px;line-height:1.7;font-size:12px;}
.content-heading h3{font-size:16px;font-weight:600;}
.hint{color:var(--muted);}
.content-actions{gap:7px;}
.btn{border-radius:8px;padding:8px 13px;min-height:34px;font-size:12px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.025);}
.btn:not(:disabled):hover{background:var(--bg-3);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(1px);}
.btn-primary,.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:not(:disabled):hover,.btn.primary:not(:disabled):hover{background:var(--accent);color:#fff;}
.btn.danger,.btn-danger{color:var(--red);}
.btn-small{padding:5px 10px;min-height:28px;font-size:11px;}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:8px;background:var(--bg-2);border-color:var(--border);color:var(--text);font-family:inherit;}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select{min-height:36px;padding:8px 11px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:2px;border-color:var(--accent);}
input::placeholder,textarea::placeholder{color:var(--faint);}
.collection-layout{grid-template-columns:190px minmax(0,1fr);gap:28px;}
.collection-folders{gap:3px;border:1px solid var(--border);background:var(--bg-2);border-radius:14px;padding:10px;align-self:start;}
.folder{padding:11px 12px;background:transparent;border:0;border-radius:8px;font-size:12px;min-height:40px;align-items:center;}
.folder:hover{background:var(--hover);}
.folder.active{background:var(--brand-soft);color:var(--accent);}
.folder strong{font-size:10px;font-weight:500;opacity:1;background:var(--bg-3);padding:2px 6px;border-radius:5px;color:var(--muted);}
.collection-main>.content-heading{padding:4px 0 16px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.collection-grid{grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:18px;}
.collection-card,.subscription-card{border-radius:14px;background:var(--bg-2);box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s;}
.collection-card:hover,.subscription-card:hover{border-color:color-mix(in srgb,var(--accent) 25%,var(--border));box-shadow:var(--shadow-md);}
.collection-image{height:220px;padding:16px;background:var(--bg-3);}
.collection-image img{border-radius:5px;}
.collection-details{padding:16px;}
.collection-details .content-heading{margin-bottom:8px;gap:8px;}
.collection-details .content-heading strong{font-size:11px;font-weight:600;color:var(--muted);}
.collection-details small{font-size:10px;opacity:1;color:var(--faint);}
.collection-details p{font-size:12px;line-height:1.65;margin-bottom:16px;}
.collection-details .content-actions .btn{font-size:11px;min-height:28px;padding:5px 10px;}
.content-filters{padding:14px 16px;border:1px solid var(--border);background:var(--bg-2);border-radius:12px;margin-bottom:24px;gap:18px;}
.content-filters label{font-size:12px;color:var(--muted);gap:10px;min-width:0;white-space:nowrap;}
.content-filters>.hint{margin-left:auto;font-size:11px;}
.subscription-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.subscription-cover{height:180px;background:var(--bg-3);}
.cover-empty{opacity:1;font-size:24px;letter-spacing:2px;color:var(--faint);background:linear-gradient(135deg,var(--bg-3),var(--brand-soft));}
.subscription-body{padding:22px;}
.subscription-body .content-heading{margin-bottom:10px;}
.subscription-body .content-heading small{font-size:10px;background:var(--bg-3);color:var(--muted);padding:4px 8px;border-radius:5px;}
.subscription-body h3{font-size:17px;font-weight:600;letter-spacing:-.25px;line-height:1.5;}
.subscription-body p{font-size:12px;color:var(--muted);line-height:1.9;}
.subscription-body>.content-actions{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.content-dialog{background:var(--bg-2);color:var(--text);border-radius:18px;padding:28px;box-shadow:var(--shadow-lg);}
.content-dialog h2{font-size:20px;letter-spacing:-.5px;}
.content-dialog label{font-size:12px;color:var(--muted);}
.content-dialog::backdrop{backdrop-filter:blur(4px);background:var(--overlay);}
#console-login{background:var(--bg-2);color:var(--text);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);}
.usage-card,.asset-summary-card,.control-card{border-radius:13px;background:var(--bg-2);box-shadow:var(--shadow-sm);}
.usage-card{padding:20px;}
.usage-card:hover{transform:none;}
.usage-card.accent{background:var(--brand-soft);border-color:color-mix(in srgb,var(--accent) 25%,var(--border));}
.usage-card.accent:hover{transform:none;box-shadow:var(--shadow-md);}
.usage-table{border-radius:12px;background:var(--bg-2);}
.usage-table th{background:var(--bg-2);font-size:11px;font-weight:600;color:var(--muted);}
.usage-table th,.usage-table td{padding:12px 14px;border-bottom-color:var(--border);}
.usage-table tbody tr:hover{background:var(--hover);}
#maintenance-page>h3{font-size:15px;font-weight:600;margin:32px 0 12px;}
#maintenance-page>p{font-size:12px;}
.list-pane{width:310px;padding:8px;background:var(--bg-2);}
.list-head{padding:13px 12px;border-bottom:0;font-size:11px;}
.session-item,.chat-item{border:1px solid transparent;border-radius:10px;margin:4px 0;padding:13px 12px;}
.session-item:hover,.chat-item:hover{transform:none;background:var(--hover);}
.session-item.selected,.chat-item.selected{padding-left:12px;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);}
.session-item.session-waiting-row{padding-left:12px;border-left:3px solid var(--orange);}
.detail-pane{padding:28px 32px;}
.empty-hint{font-size:13px;}
.settings-sidebar{background:var(--bg-2);padding:16px 12px;}
.settings-menu-item{border-radius:8px;padding:10px 12px;font-size:12px;}
.settings-menu-item.active{background:var(--brand-soft);color:var(--accent);}
.settings-pane{padding:28px 32px 40px;max-width:1000px;}
.settings-pane h3{font-size:16px;letter-spacing:-.2px;color:var(--text);}
.pagination{font-size:11px;color:var(--muted);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
@media(min-width:1600px){.usage-pane,.asset-pane,.control-pane{padding-left:56px;padding-right:56px;}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}}
@media(max-width:1100px){#topbar{padding:14px 20px;}.top-status>.muted{font-size:10px;padding:4px 7px;}.console-location span{display:none;}.collection-layout{grid-template-columns:155px minmax(0,1fr);gap:18px;}}
@media(max-width:900px){
  #sidebar{width:100%;padding:12px 16px 8px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr) auto;}
  .side-head{grid-column:1;grid-row:1;padding:0;}.side-head .brand-mark{width:28px;height:28px;}.side-title strong{font-size:15px;}.brand-sub{display:none;}
  .side-foot{grid-column:2;grid-row:1;border:0;padding:0;}.side-foot .runtime-control{width:88px;}.side-foot #runtime-mode{min-height:30px;font-size:11px;padding:5px 8px;}.side-foot .btn{min-height:30px;}
  #tabs{grid-column:1/-1;grid-row:2;gap:4px;scrollbar-width:none;}.tab{padding:8px 11px;gap:7px;min-height:35px;font-size:12px;}.tab::before{width:15px;height:15px;}
  #topbar{min-height:54px;padding:10px 16px;gap:12px;}.console-location strong{font-size:12px;}.top-status{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;}.top-status>*{flex-shrink:0;}
}
@media(max-width:760px){
  .usage-pane,.asset-pane,.control-pane{padding:24px 18px 32px;}.content-heading h2,.usage-head h2,#maintenance-page>h2{font-size:22px;}.content-heading{gap:12px;margin-bottom:18px;}
  .collection-layout{grid-template-columns:1fr;gap:18px;}.collection-folders{flex-direction:row;border:0;background:transparent;padding:0;border-radius:0;overflow-x:auto;gap:6px;}.folder{background:var(--bg-2);min-width:110px;border:1px solid var(--border);}.folder.active{border-color:color-mix(in srgb,var(--accent) 30%,var(--border));}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.collection-image{height:170px;padding:10px;}.collection-details{padding:12px;}.collection-details .content-actions{gap:5px;}.collection-details .content-actions .btn{padding:5px 7px;min-height:30px;}
  .subscription-grid{grid-template-columns:1fr;gap:18px;}.content-filters{gap:12px;}.content-filters label{flex:1 1 140px;}.content-filters input{width:100%;min-width:0;}.content-filters>.hint{margin-left:0;}
  .content-dialog{padding:22px;}.settings-pane{padding:22px 18px 32px;}.detail-pane{padding:20px 18px;}
}
@media(max-width:480px){.console-location{display:none;}.top-status{width:100%;}.side-head{gap:8px;}.side-foot{gap:4px;}.collection-grid{grid-template-columns:1fr;}.collection-image{height:240px;}.content-heading>.content-actions{width:100%;}.content-heading h3{font-size:15px;}}




/* Consistent navigation icons, no remote assets. */
 .tab[data-tab="sessions"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2011.5a8.4%208.4%200%200%201-8.5%208.5H5l-3%202v-9.5A8.5%208.5%200%200%201%2010.5%204h2A8.5%208.5%200%200%201%2021%2011.5Z%22%2F%3E%3Cpath%20d%3D%22M8%2011h8M8%2015h5%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="chats"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4m8-4v4M4%2010h16m-11%204h6%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="control"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M4%2017h16%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="memory"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M9%209h6v6H9zM9%202v3m6-3v3M9%2019v3m6-3v3M2%209h3m-3%206h3m14-6h3m-3%206h3%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="people-memory"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020v-2a6%206%200%200%201%2012%200v2m1-15a3%203%200%200%201%200%206m2%203a5%205%200%200%201%203%204v2%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="identity"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2016a3%203%200%200%201%206%200m3-7h4m-4%204h4%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="friends"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M2%2020v-2a6%206%200%200%201%2012%200v2m4-13v8m-4-4h8%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="assets"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%209%205-9%205-9-5%209-5Zm-9%209%209%205%209-5M3%2016l9%205%209-5%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="usage"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203v17h17M8%2016v-5m5%205V7m5%209V4%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="incidents"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%2010%2018H2L12%203Zm0%206v5m0%203v.1%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="collections"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%221.5%22%2F%3E%3Cpath%20d%3D%22m3%2017%205-5%204%204%204-6%205%207%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="subscriptions"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22m9%202%203%203%203-3m-5%208%205%203-5%203v-6Z%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="maintenance"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%203v4H5V3m0%204v3a4%204%200%200%200%208%200V7m-4%207v7m9-18v10m-3%203h6m-3-3v8%22%2F%3E%3C%2Fsvg%3E")}
 .tab[data-tab="settings"]{--nav-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%203%201%202h4l1-2%203%202-.5%202%202%203%202%20.5v3l-2%20.5-2%203%20.5%202-3%202-1-2h-4l-1%202-3-2%20.5-2-2-3-2-.5v-3l2-.5%202-3L6%205l3-2Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")}

/* console-auth.css */
#console-login{width:min(430px,calc(100vw - 36px));margin:auto;box-sizing:border-box;max-height:calc(100vh - 36px);overflow:auto;padding:36px;border-radius:20px;background:var(--bg-2);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-lg);}
#console-login::backdrop{background:var(--overlay);backdrop-filter:blur(9px);}
#console-login-form{display:flex;flex-direction:column;gap:0;}
.console-login-brand{display:flex;gap:10px;align-items:center;margin-bottom:30px;font-size:14px;font-weight:600;}.console-login-brand img{width:34px;height:34px;}
#console-login-form h2{font-size:24px;letter-spacing:-.6px;margin:0 0 10px;}
#console-login-hint{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:24px;}
#console-login-form label{font-size:12px;font-weight:500;margin:0 0 8px;color:var(--text);}
#console-login-form input{height:43px;min-width:0;width:100%;border-radius:9px;margin-bottom:20px;padding:10px 12px;}
#console-confirm-field:not([hidden]){display:flex;flex-direction:column;}
#console-login-error{font-size:12px;color:var(--red);line-height:1.6;margin:0 0 14px;}#console-login-error:empty{display:none;}
#console-login-form button[type=submit]{height:43px;background:var(--accent);color:#fff;border-color:var(--accent);border-radius:9px;font-size:13px;}
.console-remember{font-size:11px;color:var(--muted);line-height:1.6;margin:16px 0 0;text-align:center;}
.console-logout{flex-shrink:0;}
@media(max-width:600px){#console-login{padding:28px;}.console-login-brand{margin-bottom:24px;}#console-login-form h2{font-size:22px;}}

/* magazine.css */
/* Shared with the flat editorial cards: white paper, ink, rules and functional colour. */
:root,[data-theme='light']{--bg:#f7f9fc;--bg-2:#fff;--bg-3:#f7f9fc;--panel:#fff;--sidebar-bg:#fff;--text:#192335;--muted:#5d6c80;--faint:#7e8b9c;--border:#e5ebf3;--accent:#15976b;--green:#15976b;--red:#d7556d;--orange:#a56c29;--brand-soft:#eef7f3;--hover:#f7f9fc;--active:#f0f5f8;--shadow-sm:none;--shadow-md:none;--shadow-lg:0 16px 48px #19233516;--overlay:#1923355c;color-scheme:light}
[data-theme='dark']{--bg:#141a22;--bg-2:#19222c;--bg-3:#202c38;--panel:var(--bg-2);--sidebar-bg:#171f28;--text:#e7eef6;--muted:#a8b8c9;--faint:#8195aa;--border:#304052;--accent:#7ac6a6;--green:#7ac6a6;--red:#f49aaa;--orange:#d8ba8c;--brand-soft:#203b34;--hover:#22303e;--active:#293a49;--shadow-sm:none;--shadow-md:none;--shadow-lg:0 16px 48px #0004;--overlay:#0008;color-scheme:dark}
[data-section='collections']{--accent:#d14d7d;--brand-soft:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
[data-section='subscriptions']{--accent:#ad7338;--brand-soft:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
[data-section='usage'],[data-section='memory'],[data-section='people-memory']{--accent:#3976a3;--brand-soft:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
[data-section='maintenance'],[data-section='incidents']{--accent:#8d6596;--brand-soft:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
[data-theme='dark'][data-section='collections']{--accent:#f293b3}
[data-theme='dark'][data-section='subscriptions']{--accent:#dab786}
[data-theme='dark'][data-section='usage'],[data-theme='dark'][data-section='memory'],[data-theme='dark'][data-section='people-memory']{--accent:#8ebfe0}
[data-theme='dark'][data-section='maintenance'],[data-theme='dark'][data-section='incidents']{--accent:#c5a1cf}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:0}
#sidebar{width:226px;padding:32px 20px 18px;gap:22px;border-right:1px solid var(--border)}
.side-head{position:relative;padding:19px 0 15px;gap:11px}
.side-head::before{content:'';position:absolute;top:0;left:0;width:38px;height:4px;background:var(--accent)}
.side-head .brand-mark{width:31px;height:31px;border-radius:0;box-shadow:none}
.side-title strong{font-size:17px;font-weight:750;letter-spacing:-.5px}
#tabs{padding:0;gap:3px}
.nav-group-label{padding:19px 10px 8px;letter-spacing:1.5px;font-size:10px;font-weight:650}
.tab{border-radius:3px;min-height:39px;padding:10px;gap:11px;font-size:12px}
.tab.active{position:relative;background:var(--brand-soft);font-weight:700;color:var(--accent)}
.tab.active::after{display:block;content:'';position:absolute;left:0;top:11px;bottom:11px;width:2px;background:var(--accent);border-radius:0}
.tab::before{width:17px;height:17px;opacity:.85}
.side-foot{padding-top:17px;border-top:1px solid var(--border)}
#topbar{min-height:87px;padding:20px 34px;gap:18px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.console-location{position:relative;padding-left:16px}
.console-location::before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:3px;background:var(--accent)}
.console-location strong{font-size:18px;font-weight:750;letter-spacing:-.5px}
.console-location span{font-size:11px;line-height:1.6}
.top-status{margin-left:auto;gap:7px;min-width:0;flex-wrap:wrap}
.top-status>.muted{border-radius:2px;background:transparent;padding:4px 8px;font-size:10px;border-left:1px solid var(--border)}
.top-status #onebot-label{padding-left:0;border-left:0}
.usage-pane,.asset-pane,.control-pane{padding:35px clamp(22px,3vw,48px) 48px}
.content-heading{margin-bottom:24px;gap:14px}
.content-heading h2,.usage-head h2,#maintenance-page>h2{font-size:25px;line-height:1.35;font-weight:750;letter-spacing:-.7px;color:var(--text)}
.content-heading .hint{font-size:12px;line-height:1.8}
.content-heading h3,.control-section-head h3{font-size:17px;letter-spacing:-.3px;font-weight:700}
.control-section{border-top:1px solid var(--border);padding-top:22px;margin-top:28px}
.control-section:first-child{border-top:0;padding-top:0;margin-top:0}
.control-section-head{align-items:start;margin-bottom:18px}
.control-section-head h3{font-size:23px;font-weight:750;line-height:1.4}
.control-service-grid{gap:16px}
.control-service{position:relative;min-height:108px;border:1px solid var(--border);border-radius:3px;padding:24px 17px 17px;background:var(--bg-2);box-shadow:none;transition:background .15s,border-color .15s;gap:13px}
.control-service::before{content:'';position:absolute;left:17px;top:12px;width:29px;height:3px;background:var(--service-color,var(--accent))}
.control-service:hover{transform:none;background:var(--hover);border-color:var(--service-color,var(--accent));box-shadow:none}
.control-service[data-hub-service='agent']{--service-color:#15976b}
.control-service[data-hub-service='snowluma']{--service-color:#3f8dbc}
.control-service[data-hub-service='novnc']{--service-color:#bc7c4d}
.control-service[data-hub-service='dsh']{--service-color:#6c75ad}
.control-service[data-hub-service='bridge']{--service-color:#a16d8c}
.control-service-mark{width:39px;height:39px;flex:0 0 39px;border-radius:2px;font-size:12px;background:color-mix(in srgb,var(--service-color,var(--accent)) 8%,var(--bg-2));color:var(--service-color,var(--accent));border:0;font-weight:700}
.control-service-copy{min-width:0}
.control-service-copy strong{font-size:14px;font-weight:700;line-height:1.5}
.control-service-copy small{font-size:10px;line-height:1.7;color:var(--muted)}
.control-service-state{font-size:10px;white-space:nowrap}
.control-service[aria-disabled='true']{opacity:.62;pointer-events:none}
.control-service[aria-disabled='true']::before{background:var(--faint)}
.control-card,.usage-card,.asset-summary-card,.control-key-card,.collection-card,.subscription-card,.usage-table,.control-update-grid{border-radius:3px;background:var(--bg-2);box-shadow:none}
.usage-card,.asset-summary-card{border-color:var(--border);padding:22px}
.usage-card.accent{background:var(--bg-2);border-top:3px solid var(--accent);border-left-color:var(--border);border-right-color:var(--border);border-bottom-color:var(--border)}
.usage-card:hover,.usage-card.accent:hover,.collection-card:hover,.subscription-card:hover{transform:none;box-shadow:none}
.control-key-row,.content-filters{border-radius:3px;box-shadow:none}
.content-filters{background:var(--bg-2);padding:13px 16px;margin-bottom:22px}
.btn{border-radius:3px;font-size:11px;min-height:32px;padding:7px 12px;box-shadow:none;font-weight:600}
.btn-small{min-height:28px;padding:5px 10px;font-size:10px}
.btn:not(:disabled):hover{box-shadow:none}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{border-radius:3px;background:var(--bg-2);border-color:var(--border)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select{font-size:12px;min-height:36px}
.collection-layout{grid-template-columns:176px minmax(0,1fr);gap:28px}
.collection-folders{padding:9px 0;border:0;border-top:1px solid var(--text);border-bottom:1px solid var(--border);border-radius:0;background:transparent}
.folder{border-radius:2px;padding:11px 10px;font-size:12px}
.folder.active{background:var(--brand-soft);font-weight:650}
.folder strong{background:transparent;border-radius:0;color:var(--muted);padding:0 3px}
.collection-main>.content-heading{border-bottom:1px solid var(--text);margin-bottom:22px;padding:3px 0 15px}
.collection-grid{gap:20px;grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.collection-image{background:var(--bg-3);padding:14px;height:230px;border-bottom:1px solid var(--border)}
.collection-image img{border-radius:1px}
.collection-details{padding:17px}
.collection-details .content-heading strong{color:var(--accent);font-size:11px}
.collection-details p{font-size:12px;line-height:1.8;margin-bottom:17px}
.collection-details>.content-actions{border-top:1px solid var(--border);padding-top:13px}
.subscription-grid{gap:22px}
.subscription-cover{height:195px;border-radius:0;border-bottom:1px solid var(--border)}
.cover-empty{background:var(--bg-3);font-size:19px;font-weight:500}
.subscription-body{padding:22px}
.subscription-body .content-heading small{border-radius:0;background:transparent;padding:0;color:var(--accent);font-weight:650}
.subscription-body h3{font-size:18px;font-weight:750;letter-spacing:-.4px}
.subscription-body p{font-size:12px;line-height:1.9}
.subscription-body>.content-actions{border-top:1px solid var(--border);padding-top:15px}
.list-pane{background:var(--bg-2);width:295px;padding:8px}
.list-head{font-size:11px;padding:14px 12px}
.session-item,.chat-item{border-radius:2px;font-size:12px;padding:13px 12px;border-bottom:1px solid var(--border)}
.session-item.selected,.chat-item.selected{background:var(--brand-soft);border:1px solid var(--border);border-left:3px solid var(--accent);padding-left:10px}
.detail-pane,.settings-pane{padding:30px 34px}
.settings-sidebar{border-right:1px solid var(--border)}
.settings-menu-item{border-radius:2px;font-size:12px}
.settings-pane h3{font-size:18px;font-weight:750;border-bottom:1px solid var(--border);padding-bottom:12px}
.content-dialog,#console-login{border-radius:4px;border-top:3px solid var(--accent);box-shadow:var(--shadow-lg)}
.console-login-brand{position:relative;padding-top:17px}
.console-login-brand::before{content:'';position:absolute;left:0;top:0;width:30px;height:3px;background:var(--accent)}
#console-login-form h2{font-size:25px;font-weight:750;letter-spacing:-.5px}
#console-login-form input,#console-login-form button[type=submit]{border-radius:3px}
.console-remember{border-top:1px solid var(--border);padding-top:15px;margin-top:21px}
.usage-table th{color:var(--muted);font-weight:650;background:var(--bg-2)}
.usage-table td,.usage-table th{padding:12px 14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:1200px){#topbar{padding:17px 24px;gap:12px}.console-location strong{font-size:16px}.top-status>.muted{font-size:10px;padding:3px 5px}.control-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.control-service{padding:22px 14px 16px}.control-service-copy strong{font-size:13px}}
@media(max-width:900px){#sidebar{width:100%;padding:14px 18px 8px;gap:10px;border-right:0}.side-head{padding:0}.side-head::before{display:none}.side-head .brand-mark{width:27px;height:27px}.side-title strong{font-size:15px}#tabs{gap:4px}.tab{font-size:11px;padding:9px 11px}.tab.active::after{top:auto;left:12px;right:12px;bottom:2px;height:2px;width:auto}.side-foot{border:0;padding:0}#topbar{min-height:68px;padding:14px 18px;align-items:center;gap:12px}.top-status{justify-content:flex-start;flex-wrap:nowrap;overflow:auto}.console-location{padding-left:12px}.console-location strong{font-size:14px}.console-location span{display:none}.usage-pane,.asset-pane,.control-pane{padding:28px 22px 38px}.content-heading h2,.usage-head h2,#maintenance-page>h2{font-size:23px}.control-section-head h3{font-size:21px}.collection-layout{grid-template-columns:145px minmax(0,1fr);gap:18px}.settings-pane,.detail-pane{padding:24px}.list-pane{width:265px}}
@media(max-width:600px){#sidebar{padding:13px 14px 7px}#topbar{padding:12px 14px;gap:10px}.console-location strong{font-size:13px}.top-status #model-label,.top-status #usage-label,.top-status #search-count-label{display:none}#topbar>.console-logout{margin-left:auto}.usage-pane,.asset-pane,.control-pane{padding:25px 17px 34px}.content-heading h2,.usage-head h2,#maintenance-page>h2{font-size:22px}.control-section-head h3{font-size:20px}.control-service-grid{grid-template-columns:1fr;gap:12px}.control-service{min-height:94px;padding:22px 15px 16px}.control-service-copy strong{font-size:14px}.control-service-copy small{font-size:11px}.control-service-state{font-size:11px}.content-heading{gap:12px}.content-filters{padding:12px;gap:12px}.collection-layout{grid-template-columns:1fr;gap:19px}.collection-folders{display:flex;flex-direction:row;overflow:auto;border-top:0;border-bottom:1px solid var(--border);padding:0 0 10px;gap:4px}.folder{white-space:nowrap;min-width:fit-content;padding:10px 12px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-image{height:168px;padding:9px}.collection-details{padding:12px}.collection-details p{font-size:11px}.collection-details .content-actions{gap:5px}.collection-details .btn{padding:5px 7px;font-size:10px}.subscription-grid{grid-template-columns:1fr;gap:18px}.subscription-body{padding:20px}.content-dialog{padding:22px}.btn{min-height:34px}input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}.settings-pane,.detail-pane{padding:20px 17px}.list-pane{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.usage-activity{margin:0 0 30px;padding:22px 0 24px;border-bottom:1px solid var(--border)}
.activity-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:21px}.activity-heading h3{font-size:15px;margin:0;font-weight:750;color:var(--text)}.activity-heading p{margin:7px 0 0;color:var(--muted);font-size:11px}.activity-heading>span{color:var(--muted);font-size:11px;white-space:nowrap}
.activity-scroll{overflow-x:auto;padding:2px 0 8px}.activity-chart{min-width:690px;display:grid;grid-template-columns:18px 1fr;gap:9px 10px}.activity-weekdays{height:108px;display:flex;flex-direction:column;justify-content:space-around;padding-top:13px;font-size:10px;color:var(--faint)}.activity-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);grid-template-columns:repeat(var(--activity-weeks),minmax(10px,1fr));gap:4px}
.activity-cell{display:block;width:100%;height:12px;min-height:0;border:0;border-radius:3px;padding:0;background:var(--border);cursor:pointer;transition:filter .12s}.activity-cell:hover{filter:brightness(.87)}.activity-cell:focus-visible{outline:2px solid var(--text);outline-offset:1px}.activity-cell.padding{visibility:hidden}.activity-cell.level-1{background:#c1dfef}.activity-cell.level-2{background:#89c5e4}.activity-cell.level-3{background:#4e9cc9}.activity-cell.level-4{background:#256b9c}
.activity-months{grid-column:2;display:grid;grid-template-columns:repeat(var(--activity-weeks),minmax(10px,1fr));gap:4px;color:var(--faint);font-size:10px}.activity-months span{white-space:nowrap}
.activity-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:13px;font-size:11px;color:var(--muted)}.activity-legend{display:flex;gap:4px;align-items:center;white-space:nowrap}.activity-legend .activity-cell{width:12px;cursor:default}.activity-legend span:first-child{margin-right:5px}.activity-legend span:last-child{margin-left:5px}.activity-note{font-size:10px;color:var(--faint);margin:9px 0 0;line-height:1.6}.activity-loading{height:130px;padding:45px 0;color:var(--muted);font-size:12px}
[data-theme='dark'] .activity-cell.level-1{background:#24435a}[data-theme='dark'] .activity-cell.level-2{background:#31688b}[data-theme='dark'] .activity-cell.level-3{background:#449dcc}[data-theme='dark'] .activity-cell.level-4{background:#80caef}
@media(max-width:600px){.activity-heading>span{font-size:10px}.activity-heading p{font-size:10px}.activity-footer{align-items:flex-start;flex-wrap:wrap;gap:9px}.activity-chart{min-width:690px}.usage-activity{padding-top:18px}}

#tabs .tab.active::after{display:block!important;left:3px!important;right:auto!important;top:7px!important;bottom:7px!important;width:3px!important;height:auto!important;background:var(--accent)!important;border-radius:0;z-index:1}
#tabs .tab.active{padding-left:18px}.collection-folders .folder.active{border-left:3px solid var(--accent)}
.collection-card{content-visibility:auto;contain-intrinsic-size:auto 345px}.collection-image img{opacity:1;transition:opacity .12s;decoding:async}.collection-image img:not([src]){opacity:0}.collection-image{background:var(--bg-3)}
.collection-loading{min-height:150px;padding:45px 15px;color:var(--muted);font-size:13px}.collection-main[aria-busy=true]{cursor:progress}.content-message{font-size:12px}
.image-viewer{position:fixed;inset:0;margin:auto;width:min(1050px,calc(100vw - 30px));max-height:calc(100dvh - 30px);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:4px;background:var(--panel);color:var(--text);padding:18px;box-shadow:var(--shadow-lg)}.image-viewer::backdrop{background:#101722b8}.image-viewer header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.image-viewer-stage{min-height:180px;display:flex;align-items:center;justify-content:center;background:var(--bg-3)}.image-viewer-stage img{display:block;max-width:100%;max-height:calc(100dvh - 180px);object-fit:contain}.image-viewer footer{font-size:12px;color:var(--muted);margin-top:12px}.image-viewer footer p{margin:8px 0 0;overflow-wrap:anywhere;line-height:1.6}.image-viewer footer p:empty{display:none}
@media(max-width:600px){.image-viewer{padding:12px}.image-viewer-stage img{max-height:calc(100dvh - 150px)}#tabs .tab.active::after{top:8px!important;bottom:8px!important;width:3px!important}}
.chat-image-preview{display:inline-block;padding:0;border:0;background:transparent;cursor:zoom-in;vertical-align:top}