/* ==========================================================================
   光量 · 小红书智能创作 — 设计系统 v6「暗夜工坊」
   --------------------------------------------------------------------------
   主张：车间手感 + 琥珀信号色。两套皮肤同一骨架，一键切换。
   默认：白底版（暖灰白 + 琥珀），暗色版（深炭 + 琥珀）跟随 data-theme。
   结构：令牌 → 基础 → 布局 → 组件 → 页面 → 响应式。
   约束：类名与 v5 完全一致，视图无需改动即可整体升级。
   ========================================================================== */

:root {
  /* 品牌：琥珀（白底版加深一档保证对比，暗色版用原金） */
  --brand: #a86f14;
  --brand-dark: #8c5b0f;
  --brand-soft: #f7eedd;
  --brand-soft-2: #f0e2c8;
  --brand-line: #e3cf9f;
  --brand-ink: #8a5a0d;
  --on-brand: #fffdf8;
  --brand-grad: linear-gradient(135deg, #c08420 0%, #9c6710 100%);
  --brand-grad-2: linear-gradient(135deg, #b37a1a 0%, #8a580c 100%);
  --brand-grad-3: linear-gradient(150deg, #c08420, #96620e);
  --sh-brand: 0 4px 14px -6px rgba(168, 111, 20, .5);
  --glow-1: #f6ecd7;
  --glow-2: #efe9db;

  /* 中性：暖灰白 */
  --bg: #f4f1ea;
  --bg-2: #faf8f3;
  --bg-soft: #eeeae1;
  --side: #ece7dd;
  --card: #ffffff;
  --ink: #2b2926;
  --ink-2: #6e6a63;
  --ink-3: #a09a8e;
  --on-ink: #fffdf8;
  --line: #ddd6c8;
  --line-2: #e6e0d2;
  --line-strong: #cfc6b4;
  --scrollbar: #ddd5c4;
  --scrollbar-hover: #cbc2ae;

  /* 语义 */
  --ok: #1f7a5c;
  --ok-soft: #e7f2ec;
  --ok-ink: #17654c;
  --warn: #a96314;
  --warn-soft: #fbf1e3;
  --warn-ink: #8a4f0e;
  --err: #c0392b;
  --err-soft: #fbeceb;
  --err-ink: #a32d22;
  --err-line: #e8b7b1;
  --soft-bg: #ece7dd;
  --soft-ink: #5f5e5a;
  --audio-bg: #f1ecf6;
  --audio-ink: #6b4c8a;
  --scrim: rgba(43, 41, 38, .42);

  /* 形状与光影 */
  --r: 10px;
  --r-card: 16px;
  --sh: 0 1px 2px rgba(43, 38, 30, .04), 0 8px 24px -14px rgba(43, 38, 30, .14);
  --sh-hover: 0 2px 6px rgba(43, 38, 30, .05), 0 18px 36px -18px rgba(43, 38, 30, .2);
  --sh-auth: 0 1px 2px rgba(43, 38, 30, .04), 0 32px 64px -32px rgba(43, 38, 30, .26);
  --sh-focus: 0 0 0 3px rgba(168, 111, 20, .16);

  /* 字体 */
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --num: "SF Pro Display", -apple-system, "Helvetica Neue", sans-serif;
}

/* ---------------- 暗色版「暗夜工坊」 ----------------
   只覆盖令牌，任何组件规则都不重复 —— 骨架同一套，换肤零维护成本。 */
html[data-theme="dark"] {
  --brand: #e0a458;
  --brand-dark: #eab96e;
  --brand-soft: #2e2718;
  --brand-soft-2: #3a3020;
  --brand-line: #4a3d22;
  --brand-ink: #e0a458;
  --on-brand: #241c0d;
  --brand-grad: linear-gradient(135deg, #d99b46 0%, #c08420 100%);
  --brand-grad-2: linear-gradient(135deg, #cc8c30 0%, #b3741c 100%);
  --brand-grad-3: linear-gradient(150deg, #d99b46, #b3741c);
  --sh-brand: 0 4px 14px -6px rgba(224, 164, 88, .35);
  --glow-1: #26221a;
  --glow-2: #1d1c18;

  --bg: #1c1c1f;
  --bg-2: #17171a;
  --bg-soft: #17171a;
  --side: #141416;
  --card: #242428;
  --ink: #e8e6e3;
  --ink-2: #8d8a85;
  --ink-3: #6b6862;
  --on-ink: #17171a;
  --line: #2e2e33;
  --line-2: #2a2a2f;
  --line-strong: #3a3a40;
  --scrollbar: #33333a;
  --scrollbar-hover: #3d3d44;

  --ok: #4fb08c;
  --ok-soft: #1d2b26;
  --ok-ink: #63c39e;
  --warn: #d9973f;
  --warn-soft: #2e2515;
  --warn-ink: #e3ad5e;
  --err: #e06a5c;
  --err-soft: #33201e;
  --err-ink: #eb8578;
  --err-line: #4a2d29;
  --soft-bg: #2e2e33;
  --soft-ink: #a5a29c;
  --audio-bg: #2a2634;
  --audio-ink: #b39ddb;
  --scrim: rgba(0, 0, 0, .55);

  --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .5);
  --sh-hover: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 36px -18px rgba(0, 0, 0, .6);
  --sh-auth: 0 1px 2px rgba(0, 0, 0, .3), 0 32px 64px -32px rgba(0, 0, 0, .6);
  --sh-focus: 0 0 0 3px rgba(224, 164, 88, .28);
}

/* 主题过渡：只对颜色类属性做短过渡，避免布局属性被连坐 */
body, .side, .main, .card, .btn, .badge, .alert, .field input, .field textarea, .field select {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.65 var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-decoration: none; transition: color .15s; }
h1 { font-size: 22px; font-weight: 650; letter-spacing: -.3px; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 650; letter-spacing: -.2px; margin: 8px 0; }
h3 { font-size: 14.5px; font-weight: 650; margin: 0 0 12px; }
code { background: var(--line-2); padding: 1px 6px; border-radius: 5px; font: 12px var(--mono); color: var(--ink-2); }
pre code { background: none; padding: 0; }
.muted { color: var(--ink-2); font-size: 12px; }
.err { color: var(--err); font-size: 12px; }

/* 等宽数字：所有数据位不跳动 */
.kpi-num, .stat-num, .trend-num, .comp-nums .num, .quota-num, .delta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================ 布局 ============================ */
.shell { display: flex; min-height: 100vh; }

.side {
  width: 216px;
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0;
  z-index: 20;
}

.main {
  flex: 1;
  margin-left: 216px;
  padding: 28px 32px 48px;
  max-width: 1240px;
  min-width: 0;
}

.brand {
  font-weight: 650; font-size: 14px;
  padding: 20px 16px 14px;
  display: flex; align-items: center; gap: 9px;
  letter-spacing: -.1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-mark {
  display: inline-flex; width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
  box-shadow: 0 4px 12px -4px rgba(168, 111, 20, .5);
}

/* 侧栏：菜单项可能超过一屏（管理员 5 组），nav 独立滚动，底部操作区永不被挤出 */
.side nav {
  display: flex; flex-direction: column;
  padding: 6px 10px 10px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
/* 还能往下滚时底部渐隐，给一个「下面还有」的视觉提示；滚到底去掉 */
.side nav.can-scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent 100%);
}
.side nav.can-scroll.at-end { -webkit-mask-image: none; mask-image: none; }
.side nav::-webkit-scrollbar { width: 6px; }
.side nav::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }
.side nav::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.nav-group {
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  padding: 14px 12px 5px;
  letter-spacing: .08em;
}

.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--ink);
  margin-bottom: 1px;
  font-size: 13.5px;
  transition: background .15s, color .15s;
}
.nav-link svg { width: 16px; height: 16px; flex: none; opacity: .55; transition: opacity .15s; }
.nav-link span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link:hover { background: var(--bg-2); color: var(--ink); }
.nav-link:hover svg { opacity: .8; }
/* 选中态用墨黑：比品牌红克制，红色只留给「操作」 */
.nav-link.active {
  background: var(--ink); color: var(--on-ink); font-weight: 550;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .7);
}
.nav-link.active svg { opacity: 1; }

.side-foot {
  flex: none;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px;
}
.side-foot a { color: var(--ink-2); display: flex; align-items: center; gap: 7px; padding: 3px 0; border-radius: 6px; }
.side-foot a:hover { color: var(--brand); }

/* 深浅色切换：显示的是点下去会变成的主题（浅色显示月亮 / 暗色显示太阳） */
.theme-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 3px 0; margin: 0 0 3px; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font: 12.5px var(--font); text-align: left;
}
.theme-btn:hover { color: var(--brand); }
.theme-btn svg { width: 14px; height: 14px; opacity: .6; }
html[data-scheme="light"] .ico-sun { display: none; }
html[data-scheme="dark"] .ico-moon { display: none; }
.appbar-btn .ico-sun, .appbar-btn .ico-moon { display: inline-flex; }
.side-foot svg { width: 14px; height: 14px; opacity: .6; flex: none; }
.side-foot .bell { display: flex; align-items: center; gap: 5px; }
.who { font-weight: 600; color: var(--ink); padding: 2px 0; }

.nav-dot {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
  text-align: center;
  background: var(--brand); color: var(--on-brand);
  border-radius: 8px; font-size: 10px; font-weight: 600;
  padding: 0 4px; margin-left: 4px;
}

.page-head { margin-bottom: 20px; }
.page-head h1 { font-size: 23px; }
.page-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ============================ 卡片 ============================ */
.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  padding: 20px 22px;
  margin-bottom: 16px;
  box-shadow: var(--sh);
}
.card.narrow { max-width: 560px; }
.card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.card-head h2, .card-head h3 { margin: 0; }

/* ============================ 表格 ============================ */
.table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  overflow: hidden;
}
.table th, .table td {
  padding: 11px 16px; text-align: left;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.table th {
  background: var(--card);
  font-size: 11px; font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .06em;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--bg-2); }
.table tr:last-child td { border-bottom: none; }
.table td.nw, .table th.nw { white-space: nowrap; }
.table td.ell { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 任务列表「结果」列：缩略图 + 资产号，视频给占位图标 */
.table td .task-result { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.task-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-2); }
.task-ph { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink-2); }
/* 列多的后台表格在窄屏内部横滚，别把整页拖宽 */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .table { min-width: 960px; }

/* ============================ 按钮 ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font: 500 13px/1.2 var(--font);
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s, transform .1s;
}
.btn:hover { border-color: var(--line-strong); background: var(--bg-2); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--sh-focus); }
.btn svg { width: 15px; height: 15px; opacity: .75; }

.btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
  box-shadow: 0 4px 14px -6px rgba(168, 111, 20, .6);
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }
.btn-primary svg { opacity: .9; }

/* 危险操作默认保持中性灰，悬停才转红——整张表 12 个红字会把页面吵散 */
.btn-danger { color: var(--ink-2); }
.btn-danger:hover { background: var(--err-soft); border-color: var(--err-line); color: var(--err); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--ink); }

.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.btn-sm svg { width: 13px; height: 13px; }
.btn-lg { padding: 12px 0; font-size: 14px; font-weight: 600; border-radius: 11px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; font-size: 13px; }

/* ============================ 表单 ============================ */
.field { margin-bottom: 14px; flex: 1; min-width: 0; }
.field label {
  display: block; font-size: 12px; font-weight: 550;
  color: var(--ink-2); margin-bottom: 6px;
}
.field input, .field textarea, .field select,
.searchbar input, .searchbar select, .mini-select {
  width: 100%;
  padding: 8px 11px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 13.5px/1.5 var(--font);
  color: var(--ink);
  background: var(--card);
  transition: border-color .15s, box-shadow .15s;
}
.field select, .searchbar select, .mini-select { padding-right: 30px; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; }
.field textarea { resize: vertical; min-height: 82px; padding: 9px 11px; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus,
.searchbar input:focus, .searchbar select:focus, .mini-select:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--sh-focus);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field-row { display: flex; gap: 14px; }
.searchbar { display: flex; gap: 9px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.searchbar input, .searchbar select { width: auto; min-width: 160px; }
.mini-select { width: auto; min-height: 34px; padding: 5px 28px 5px 11px; font-size: 13px; }
.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.inline-form { display: inline; }

/* 原生 file 控件：默认那个灰方块是整站最突兀的元素，重画「选择文件」按钮 */
input[type="file"] {
  font-size: 12px; color: var(--ink-3);
  max-width: 100%;
}
input[type="file"]::file-selector-button {
  margin-right: 11px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: 500 12.5px var(--font);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--brand-line);
  color: var(--brand);
  background: var(--brand-soft);
}

/* ============================ 提示 / 徽标 ============================ */
.alert {
  padding: 11px 15px;
  border-radius: 11px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid transparent;
}
.alert-ok { background: var(--ok-soft); color: var(--ok-ink); border-color: #cfe6dd; }
.alert-err { background: var(--err-soft); color: var(--err-ink); border-color: #f2d2ce; }
.alert-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: #f0ddc2; }
.alert-info { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); }
.alert-float { max-width: 460px; margin: 20px auto; }
/* 创作端 → 后台跨会话登录提示：图标与两行文案对齐 */
.auth-note { display: flex; align-items: flex-start; gap: 8px; line-height: 1.55; }
.auth-note svg { flex: none; margin-top: 3px; }

.badge {
  display: inline-block; padding: 1px 8px;
  border-radius: 50px;
  font-size: 11.5px; font-weight: 500;
  background: var(--line-2); color: var(--ink-2);
  white-space: nowrap;
}
.badge-success { background: var(--ok-soft); color: var(--ok-ink); }
.badge-warning { background: var(--warn-soft); color: var(--warn-ink); }
.badge-failed { background: var(--err-soft); color: var(--err-ink); }
.badge-pending, .badge-running, .badge-wait_provider { background: var(--brand-soft); color: var(--brand-ink); }
.badge-primary { background: var(--brand-soft); color: var(--brand-ink); }
.badge-soft { background: var(--soft-bg); color: var(--soft-ink); }
.badge-audio { background: var(--audio-bg); color: var(--audio-ink); }
.tag-mini { font-size: 10.5px; padding: 1px 7px; border-radius: 6px; background: var(--line-2); color: var(--ink-2); }

/* ============================ 认证页 ============================ */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(900px 500px at 12% 0%, var(--glow-1) 0%, transparent 62%),
    radial-gradient(760px 460px at 92% 100%, var(--glow-2) 0%, transparent 60%),
    var(--bg);
  padding: 24px;
}
.auth-max { width: 100%; max-width: 424px; }
.auth-card2 {
  background: var(--card);
  border-radius: 20px;
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-auth);
  overflow: hidden;
}
.auth-hero {
  background: transparent;
  padding: 30px 32px 2px; text-align: center;
  position: relative;
}
.auth-hero::after { display: none; }
/* 管理端用墨黑 logo 区分；红色只留给创作端 */
.auth-hero-admin .auth-logo { background: var(--ink); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .55); }
.auth-logo {
  width: 52px; height: 52px; margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--brand);
  color: var(--on-brand); font-size: 23px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: 0 10px 24px -10px rgba(168, 111, 20, .65);
}
.auth-hero-admin .auth-logo { font-size: 22px; width: 52px; height: 52px; }
.auth-hero-admin .auth-logo svg { width: 26px; height: 26px; }
.auth-title { color: var(--ink); font-size: 20px; font-weight: 650; letter-spacing: -.3px; margin: 0; position: relative; z-index: 1; }
.auth-sub { color: var(--ink-3); font-size: 12.5px; margin: 5px 0 0; position: relative; z-index: 1; }
.auth-body { padding: 20px 32px 30px; }

.auth-tabs { display: flex; background: var(--bg-soft); padding: 4px; border-radius: 12px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; padding: 9px 0; border: none; background: transparent;
  border-radius: 9px; font: 500 13.5px var(--font);
  cursor: pointer; color: var(--ink-2);
  transition: color .15s, background .15s, box-shadow .15s;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { background: var(--card); color: var(--brand); font-weight: 600; box-shadow: 0 1px 4px rgba(43, 38, 30, .1); }
.auth-form.hidden { display: none; }
.auth-error { margin-bottom: 14px; }

.input-ico { position: relative; }
.input-ico .ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-3); pointer-events: none;
}
.input-ico .ico svg { width: 100%; height: 100%; }
.input-ico input {
  padding-left: 38px !important; padding-right: 42px;
  height: 44px; border: 1px solid var(--line); border-radius: 11px;
  font-size: 14px;
}
.input-ico input:focus { border-color: var(--brand); box-shadow: var(--sh-focus); outline: none; }
.pwd-toggle {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; background: transparent;
  color: var(--ink-3); cursor: pointer; padding: 0; border-radius: 7px;
}
.pwd-toggle:hover { color: var(--ink-2); background: var(--bg-2); }
.pwd-toggle svg { width: 17px; height: 17px; }

.btn-grad {
  background: var(--brand-grad);
  border: none; color: var(--on-brand);
  box-shadow: 0 8px 22px -10px rgba(168, 111, 20, .75);
}
.btn-grad:hover {
  background: var(--brand-grad-2);
  color: var(--on-brand); border: none;
}
.btn-grad .arrow { margin-left: 6px; transition: transform .18s; }
.btn-grad:hover .arrow { transform: translateX(3px); }
.auth-alt { text-align: center; margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.swap-link { font-weight: 600; margin-left: 4px; }
.auth-copyright { text-align: center; font-size: 11.5px; color: var(--ink-3); margin-top: 24px; }
.admin-badge { background: var(--card); color: var(--brand-ink); }

/* ============================ 工作台 ============================ */
.studio-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 16px; align-items: start; }
/* 结果栏跟随滚动：左侧表单很长时，右侧不留在页面顶部 */
.studio-grid > .card:last-child { position: sticky; top: 20px; }
/* 结果区当「画布」用：给足高度、空态垂直居中，避免顶部一行小字下面一大片死白 */
#resultCard { min-height: 420px; display: flex; flex-direction: column; }
#resultCard #taskPanel { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 7px 16px; border-radius: 50px;
  border: 1px solid var(--line); background: var(--card);
  cursor: pointer; font: 500 13px var(--font); color: var(--ink-2);
  transition: all .15s;
}
.tab:hover { border-color: var(--line-strong); color: var(--ink); }
.tab.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.quota { margin-top: 10px; }
.task-running { padding: 15px; border: 1px dashed var(--brand-line); border-radius: 11px; color: var(--brand); background: var(--brand-soft); }
.task-done { padding: 15px; background: var(--ok-soft); border-radius: 11px; color: var(--ok-ink); }
.task-failed { padding: 15px; background: var(--err-soft); border-radius: 11px; color: var(--err-ink); }
.empty { color: var(--ink-3); text-align: center; padding: 28px 0; font-size: 13px; }
.risk { border-left: 3px solid var(--brand); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip { background: var(--line-2); border-radius: 50px; padding: 2px 10px; font-size: 12px; color: var(--ink-2); }
.prompt-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.mono { font-family: var(--mono); font-size: 12px; width: 100%; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.stat {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 16px 12px; text-align: center;
}
.stat-num { font-size: 23px; font-weight: 650; letter-spacing: -.4px; }
.stat-label { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.draft-head { margin-bottom: 12px; }
.draft-head h2 { margin: 0; }

/* ============================ 资产库 ============================ */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.asset-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.asset-card:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); }
.asset-card img, .asset-card video {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--bg-2);
}
.asset-meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 9px 11px; font-size: 12px; }
.asset-ops { display: inline-flex; gap: 6px; align-items: center; }

/* ============================ 趋势 / 图表 ============================ */
.trend { display: flex; gap: 14px; align-items: flex-end; }
.trend-col { flex: 1; text-align: center; min-width: 0; }
.trend-bar-wrap { height: 120px; display: flex; align-items: flex-end; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.trend-bar { width: 100%; background: linear-gradient(180deg, #f0968b, var(--brand)); border-radius: 8px 8px 0 0; transition: height .3s; }
/* 0 的任务日不画红柱，只留一条灰底线——否则会被误读成「有数据」 */
.trend-zero { width: 100%; height: 3px; background: var(--line); border-radius: 3px; }
.trend-col.is-zero .trend-num { color: var(--ink-3); font-weight: 500; }
.trend-num { font-size: 12px; margin-top: 5px; font-weight: 600; }
.trend-day { font-size: 11px; color: var(--ink-3); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart-grid line { stroke: var(--line-2); stroke-width: 1; }
.chart-axis { font-size: 10px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart-area { fill: url(#areaGrad); }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.chart-tip { font-size: 10px; fill: var(--ink-2); }

/* ============================ 首页仪表盘 ============================ */
.greet { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.greet-hello { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.greet-r { display: flex; gap: 8px; align-items: center; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 16px 17px;
  display: flex; flex-direction: column; gap: 7px;
  transition: box-shadow .18s, transform .18s;
}
.kpi:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: 12px; color: var(--ink-2); }
.kpi-num { font-size: 27px; font-weight: 650; letter-spacing: -.8px; line-height: 1.2; }
.kpi-sub { font-size: 11px; color: var(--ink-3); }
.kpi-ico {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
}
.kpi-ico svg { width: 16px; height: 16px; }
/* 5 张卡给一点色彩节奏，避免整排同构 */
.kpi-grid .kpi:nth-child(2) .kpi-ico { background: var(--ok-soft); color: var(--ok-ink); }
.kpi-grid .kpi:nth-child(3) .kpi-ico { background: var(--warn-soft); color: var(--warn-ink); }
.kpi-grid .kpi:nth-child(4) .kpi-ico { background: var(--soft-bg); color: var(--soft-ink); }
.kpi-grid .kpi:nth-child(5) .kpi-ico { background: var(--audio-bg); color: var(--audio-ink); }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 50px; }
.delta-up { color: var(--ok-ink); background: var(--ok-soft); }
.delta-down { color: var(--err-ink); background: var(--err-soft); }
.delta-flat { color: var(--ink-2); background: var(--line-2); }

.home-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.kv:last-of-type { border-bottom: none; }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 8px;
  border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); font-size: 12.5px;
  transition: all .15s;
}
.quick:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }
.quick-ico { color: currentColor; display: flex; }
.quick-ico svg { width: 20px; height: 20px; }
.tips { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
.tips li { margin-bottom: 7px; }
.thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 9px; background: var(--bg-2); }
.thumb-ph { display: inline-flex; align-items: center; justify-content: center; color: #c0bdb6; background: var(--bg-2); }

/* 分段控件（指标切换 / 时间范围） */
.seg { display: inline-flex; background: var(--bg-soft); border-radius: 10px; padding: 3px; gap: 2px; }
.seg a { padding: 4px 12px; border-radius: 8px; font-size: 12px; color: var(--ink-2); white-space: nowrap; transition: color .15s; }
.seg a:hover { color: var(--ink); }
.seg a.active { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(43, 38, 30, .12); }

/* ============================ 通知 ============================ */
.notif-list { display: flex; flex-direction: column; }
.notif-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 4px; border-bottom: 1px solid var(--line-2); color: var(--ink);
}
.notif-item:last-child { border-bottom: none; }
.notif-item.is-read { opacity: .55; }
.notif-ico {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--on-brand); background: var(--brand); flex: none;
}
.notif-success { background: var(--ok); }
.notif-warning { background: var(--warn); }
.notif-error { background: var(--err); }
.notif-body { flex: 1; min-width: 0; }
.notif-time { white-space: nowrap; font-size: 11px; color: var(--ink-3); }

/* ============================ 数据看板 ============================ */
.donut-wrap { display: flex; gap: 18px; align-items: center; }
.donut { width: 124px; height: 124px; border-radius: 50%; flex: none; }
.legend { font-size: 13px; }
.legend-item { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.hbar-track { flex: 1; height: 9px; background: var(--bg-soft); border-radius: 5px; overflow: hidden; }
.hbar-fill { height: 100%; background: linear-gradient(90deg, var(--brand-soft-2), var(--brand)); border-radius: 5px; }
.progressline { height: 5px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; margin-top: 5px; }
.progressline > i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.quota-num { font-size: 12px; font-weight: 600; }
.stat-mini { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); }

/* ============================ 爆款库 ============================ */
.cat-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
/* 「更新爆款」钉在分类栏最右，且只影响当前选中分类 */
.cat-refresh { margin-left: auto; display: flex; align-items: center; }
.cat-refresh .btn { display: inline-flex; align-items: center; gap: 5px; }
.disc-state { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: -8px 0 16px; font-size: 12px; }
@media screen and (max-width: 640px) {
  .cat-refresh { margin-left: 0; width: 100%; }
  .cat-refresh .btn { width: 100%; justify-content: center; }
}
.chip-btn {
  padding: 5px 13px; border-radius: 50px;
  border: 1px solid var(--line); background: var(--card);
  font: 500 12px var(--font); cursor: pointer; color: var(--ink-2);
  transition: all .15s;
}
.chip-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.chip-btn.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.gal-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.gal-card:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); }
.gal-cover { position: relative; aspect-ratio: 4 / 3; background: var(--bg-2); overflow: hidden; }
.gal-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.gal-card:hover .gal-cover img { transform: scale(1.03); }
.gal-like {
  position: absolute; left: 9px; bottom: 9px;
  background: rgba(20, 18, 16, .62);
  backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 50px;
}
.gal-tag {
  position: absolute; right: 9px; top: 9px;
  background: var(--brand);
  backdrop-filter: blur(4px);
  color: var(--on-brand); font-size: 11px; padding: 2px 9px; border-radius: 50px;
}
.gal-body { padding: 11px 13px; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.gal-title { font-size: 13px; font-weight: 600; line-height: 1.5; max-height: 39px; overflow: hidden; }
.gal-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.gal-ops { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 13px 13px; }
.analysis { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 11px 13px; font-size: 13px; }
.analysis h4 { margin: 8px 0 4px; font-size: 12.5px; color: var(--brand); font-weight: 650; }

/* ============================ 竞品 ============================ */
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.comp-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 11px;
  transition: box-shadow .18s, transform .18s;
}
.comp-card:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); }
.comp-top { display: flex; gap: 11px; align-items: center; }
.comp-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; }
.comp-nums .num { font-weight: 650; font-size: 16px; }

/* ============================ 互动中心 ============================ */
.cmt {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 13px 15px; margin-bottom: 11px;
  transition: box-shadow .15s;
}
.cmt:hover { box-shadow: var(--sh); }
.cmt-top { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.cmt-text { background: var(--bg-2); border-radius: 9px; padding: 9px 11px; font-size: 13px; }
.cmt-ai {
  background: linear-gradient(100deg, var(--glow-1), var(--bg-2));
  border: 1px dashed var(--brand-line);
  border-radius: 10px; padding: 9px 11px; font-size: 13px; margin-top: 9px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cmt-ai:hover { border-color: var(--brand); background: var(--brand-soft); }
.cmt-ops { display: flex; gap: 8px; margin-top: 9px; align-items: center; flex-wrap: wrap; }
.intent { font-size: 11px; padding: 1px 8px; border-radius: 50px; background: var(--line-2); color: var(--ink-2); }
.intent-PRAISE { background: var(--ok-soft); color: var(--ok-ink); }
.intent-COMPLAINT { background: var(--err-soft); color: var(--err-ink); }
.intent-INQUIRY { background: var(--brand-soft); color: var(--brand-ink); }

/* ============================ 视频工程 ============================ */
.vproj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 14px; }
.vproj {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.vproj:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); }
.vproj-cover {
  aspect-ratio: 16 / 9; background: #17171a; color: #8b8b93;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; position: relative; overflow: hidden;
}
.vproj-cover video { width: 100%; height: 100%; object-fit: cover; }
.vproj-cover .badge { position: absolute; top: 9px; left: 9px; }
.vproj-ph { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .09); display: flex; align-items: center; justify-content: center; color: #cfcfd6; }
.vproj-ph-t { position: absolute; bottom: 9px; right: 11px; font-size: 11px; color: #8b8b93; }
.vproj-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; }
.vproj-body .badge { align-self: flex-start; }
.vproj-title { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.vproj-grid .gal-ops { padding: 0 13px 13px; }

.vs-wrap { display: grid; grid-template-columns: 4fr 6fr; gap: 18px; align-items: start; }
.vs-preview {
  background: #17171a; border-radius: 14px; aspect-ratio: 9 / 16;
  display: flex; align-items: center; justify-content: center;
  color: #8b8b93; overflow: hidden;
}
.vs-preview video { width: 100%; height: 100%; object-fit: contain; }
.scene {
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 11px; background: var(--card);
}
.scene-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.scene-body { display: grid; grid-template-columns: 148px 1fr; gap: 12px; }
.scene-thumb {
  background: var(--bg-2); border-radius: 10px; aspect-ratio: 9 / 16; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-3);
}
.scene-thumb video { width: 100%; height: 100%; object-fit: cover; }
.timeline {
  display: flex; gap: 4px; align-items: flex-end;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 11px; overflow-x: auto;
}
.tl-bar {
  height: 46px; border-radius: 7px;
  background: linear-gradient(180deg, var(--brand-soft-2), var(--brand));
  color: var(--on-brand); font-size: 11px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.pipe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pipe-step { font-size: 12px; padding: 2px 9px; border-radius: 8px; background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.pipe-arw { color: var(--ink-3); font-size: 11px; }

/* ============================ 账号矩阵 ============================ */
.acct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.acct-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 11px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.acct-card:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); }
.acct-card.is-primary { border-color: var(--brand-line); box-shadow: 0 0 0 3px var(--brand-soft); }
.acct-card.is-primary:hover { box-shadow: 0 0 0 3px var(--brand-soft), var(--sh-hover); }
.acct-top { display: flex; gap: 12px; align-items: center; }
.acct-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--bg-2); box-shadow: 0 0 0 1px rgba(43, 38, 30, .06); }
.acct-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 650;
  color: var(--brand); background: var(--brand-soft);
}
.acct-id { flex: 1; min-width: 0; }
.acct-name { font-size: 14px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.acct-name .badge { font-weight: 500; flex: none; white-space: nowrap; }
.acct-status { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.acct-persona { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 24px; }
.acct-meta {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3);
  border-top: 1px solid var(--line-2); padding-top: 9px;
}
.acct-meta span, .acct-status .muted, .acct-persona .muted { display: inline-flex; align-items: center; gap: 4px; }
.acct-meta svg { opacity: .5; }
.acct-ops { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: 10px; margin-top: 1px; }
.acct-ops .btn-sm { padding: 4px 10px; }
.acct-sum { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.thumb-acct { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; }
.acct-avatar-xs { width: 30px; height: 30px; font-size: 13px; border-radius: 50%; }
.card-head .btn-row { gap: 8px; }

/* ============================ 人设 ============================ */
.persona-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 14px 16px;
  display: flex; gap: 11px; align-items: flex-start;
  transition: box-shadow .18s, transform .18s;
}
.persona-card:hover { box-shadow: var(--sh-hover); transform: translateY(-1px); }
.persona-avatar {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-weight: 650; font-size: 15px;
}
.persona-body { flex: 1; min-width: 0; }
.persona-name { font-weight: 600; font-size: 13.5px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.persona-desc {
  font-size: 12px; color: var(--ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.persona-ops { display: flex; gap: 6px; align-items: center; margin-top: 8px; }

/* ============================ 草稿 ============================ */
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.draft-card {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 15px 17px;
  display: flex; flex-direction: column; gap: 9px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.draft-card:hover { box-shadow: var(--sh-hover); transform: translateY(-2px); border-color: var(--line); }
.draft-title { font-weight: 600; font-size: 14px; line-height: 1.5; }
.draft-excerpt {
  font-size: 12px; color: var(--ink-2); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.draft-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.draft-ops { display: flex; gap: 6px; border-top: 1px solid var(--line-2); padding-top: 9px; }

/* ============================ 空态 ============================ */
.empty-v2 { text-align: center; padding: 40px 16px; }
.empty-ico {
  width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 15px;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.empty-ico svg { width: 22px; height: 22px; }
.empty-title { font-weight: 600; margin-bottom: 5px; }

/* ============================ 表单分区 ============================ */
.form-sec + .form-sec { border-top: 1px solid var(--line-2); margin-top: 20px; padding-top: 18px; }
.form-sec h3 { display: flex; align-items: center; gap: 7px; font-size: 14px; margin: 0 0 13px; }
.form-sec h3 svg { color: var(--brand); opacity: .9; width: 15px; height: 15px; }
.form-sec .hint { font-size: 12px; color: var(--ink-2); margin: -4px 0 12px; line-height: 1.6; }
.avatar-pick { display: flex; align-items: center; gap: 14px; }
.avatar-pick img, .avatar-pick .acct-avatar-ph { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }

/* ============================ Markdown 预览 ============================ */
.md-preview {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 14px; min-height: 120px;
}
.md-preview h2, .md-preview h3, .md-preview h4, .md-preview h5 { margin: 12px 0 7px; }
.md-preview p { margin: 0 0 9px; }
.md-preview ul { margin: 0 0 9px 20px; }
.md-gap { height: 6px; }

/* ============================ 想法短语 ============================ */
.idea-box { border-top: 1px solid var(--line-2); margin-top: 14px; padding-top: 13px; }
.idea-list { display: flex; flex-wrap: wrap; gap: 6px; }
.idea {
  padding: 5px 11px; border-radius: 50px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 12px; color: var(--ink-2); cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: all .15s;
}
.idea:hover { border-color: var(--brand-line); color: var(--brand); background: var(--brand-soft); }

/* ============================ RPA / 代码块 ============================ */
.codeblock {
  background: #1c1c1f; color: #e2e2e6;
  padding: 14px 16px; border-radius: 12px; overflow-x: auto;
  font: 12px/1.75 var(--mono);
  white-space: pre; margin: 0;
}
.codeblock code { background: none; color: #e0a458; padding: 0; } /* 深底代码块固定用亮琥珀，两版主题都可读 */
.rpa-live { display: flex; align-items: center; gap: 6px; }
.rpa-live svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================ 响应式 ============================ */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .home-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .main { padding: 24px 22px 40px; }
}
@media (max-width: 960px) {
  .side { display: none; }
  .main { margin-left: 0; }
  .studio-grid, .two-col, .stats, .vs-wrap, .home-3col { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .field-row { flex-direction: column; gap: 0; }
}
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .auth-body { padding: 22px 22px 26px; }
  .auth-hero { padding: 24px 22px 20px; }
}

/* 打印/降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   后台运维面板（用户详情 / 批量操作 / 通知群发 / 系统健康）
   追加于 v4 之上，不动既有类，避免影响 22 个页面。
   ========================================================================== */

/* ---- 筛选 chip（可点）---- */
.chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 14px; }
.chiprow .chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 50px;
  padding: 5px 13px; font: 500 12.5px var(--font); color: var(--ink-2);
  transition: all .15s;
}
.chiprow .chip b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 650; }
.chiprow .chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chiprow .chip.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chiprow .chip.on b { color: var(--on-ink); }
.chiprow .chip.on a { color: var(--on-ink); opacity: .7; margin-left: 2px; }
.chiprow .chip.on a:hover { opacity: 1; }

/* ---- 批量操作条 ---- */
.bulkbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 14px; margin-bottom: 12px;
}
.bulk-count { font-size: 13px; color: var(--ink-2); }
.bulk-count b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 650; }
.bulk-quota { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); flex-wrap: wrap; }
.bulk-quota input { width: 74px; padding: 5px 8px; font-size: 12.5px; }

/* ---- 行内操作组 ---- */
.rowact { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rowact .btn-sm { padding: 4px 8px; }

/* ---- 详情页头部 ---- */
.detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-id { display: flex; align-items: center; gap: 12px; }
.detail-avatar {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center;
  font: 650 18px var(--font); letter-spacing: 0;
}
.detail-id h2 { margin: 0; font-size: 17px; font-weight: 650; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.detail-id .muted { font-size: 12.5px; }

/* ---- 配额卡 ---- */
.quota-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; }
.quota-card { border: 1px solid var(--line-2); border-radius: var(--r); padding: 13px 14px; background: var(--bg-2); }
.quota-card .progressline { margin-top: 8px; }
.quota-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; font-size: 13px; color: var(--ink-2); }
.quota-head b { font: 650 15px var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.quota-head b .muted { font-weight: 500; font-size: 12.5px; }

/* ---- 30 天迷你柱 ---- */
.trend-30 .trend-col { flex: 1 1 0; min-width: 0; }
.trend-30 .trend-day { font-size: 9.5px; color: var(--ink-3); white-space: nowrap; }
.trend-30 .trend-bar-wrap { height: 74px; }

/* ---- 精简列表 ---- */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li {
  display: flex; align-items: baseline; gap: 9px;
  padding: 8px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px;
}
.mini-list li:last-child { border-bottom: 0; }
.mini-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-code { font: 12px var(--mono); color: var(--brand); background: var(--brand-soft); border-radius: 5px; padding: 1px 6px; }
.mini-list .muted { font-size: 12px; white-space: nowrap; }

/* ---- 健康监测 ---- */
.signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.signal {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-card);
  padding: 13px 15px; box-shadow: var(--sh);
}
.verdict { list-style: none; margin: 0; padding: 0; }
.verdict li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; }
.verdict li:last-child { border-bottom: 0; }
.verdict .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--ink-3); }
.verdict .signal-ok .dot { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.verdict .signal-warn .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.verdict .signal-err .dot { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }
.verdict b { font-weight: 600; }
.verdict .muted { font-size: 12.5px; margin-top: 2px; }
.logbox {
  margin: 0; padding: 13px 15px; border-radius: var(--r);
  background: #1d1d20; color: #d6d3cc;
  font: 12px/1.7 var(--mono); overflow-x: auto; max-height: 280px;
}

/* ---- 表单小件（通知群发）---- */
.field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-chip { position: relative; }
.radio-chip input { position: absolute; opacity: 0; pointer-events: none; }
.radio-chip span {
  display: inline-block; padding: 6px 14px; border-radius: 50px;
  border: 1px solid var(--line); background: var(--card);
  font: 500 12.5px var(--font); color: var(--ink-2); cursor: pointer;
  transition: all .15s;
}
.radio-chip span b { font-variant-numeric: tabular-nums; }
.radio-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.radio-chip input:focus-visible + span { box-shadow: var(--sh-focus); }
.pick-list {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; background: var(--bg-2);
}
.pick-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; cursor: pointer; }
.pick-item input { margin: 0; }
.pick-item .muted { margin-left: auto; font-size: 12px; }
.form-row { display: flex; gap: 12px; align-items: flex-end; }
.form-row > div + div { flex: 1; }
.form-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.form-foot b { font-variant-numeric: tabular-nums; color: var(--brand); }
.two-col-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

@media (max-width: 980px) {
  .two-col-wide { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; align-items: stretch; }
  .bulkbar { gap: 8px; }
}

/* ---- 后台表单控件补样式（只作用于 v4 未覆盖的原生控件场景）---- */
#notifyForm input:not([type=radio]):not([type=checkbox]),
#notifyForm select,
#notifyForm textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); font: 14px var(--font); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
#notifyForm textarea { resize: vertical; line-height: 1.65; min-height: 120px; }
#notifyForm input:focus, #notifyForm select:focus, #notifyForm textarea:focus {
  border-color: var(--brand); box-shadow: var(--sh-focus); outline: none;
}
.form-row > div:first-child { flex: 0 0 210px; }
.form-row select { width: 100%; }

/* ---- 两栏卡片各自收缩，避免短卡片被拉伸成大块空白 ---- */
.two-col, .two-col-wide { align-items: start; }

/* ---- 表格内的文字链接保持墨黑，悬停才转朱砂（纸感编排，不抢视线）---- */
.table td a:not(.btn) { color: var(--ink); }
.table td a:not(.btn):hover { color: var(--brand); }

/* 通知页右栏记录过多时内部滚动，避免把左栏衬出一大片空白 */
.two-col-wide .mini-list { max-height: 430px; overflow-y: auto; padding-right: 6px; }

/* ==========================================================================
   大盘环比 / 趋势下钻（KPI 整卡可点、柱子即链接）
   ========================================================================== */
a.kpi-link { color: inherit; text-decoration: none; cursor: pointer; }
.kpi-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: -2px; }
.kpi-basis { font-size: 11px; color: var(--ink-3); }

.trend-sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-2); margin: 2px 0 14px;
}
.trend-sum b { font: 650 16px var(--num); color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
.trend-sum strong { color: var(--ink); font-weight: 600; }

.trend a.trend-col {
  display: flex; flex-direction: column; justify-content: flex-end;
  color: inherit; text-decoration: none; border-radius: 8px;
  transition: background .15s;
}
.trend a.trend-col:hover { background: var(--brand-soft); }
.trend a.trend-col:hover .trend-bar { filter: saturate(1.15) brightness(.95); }
.trend a.trend-col:hover .trend-day { color: var(--ink); }
.trend a.trend-col:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.trend-30 .trend-num { display: none; }

/* 大盘 KPI 固定 4 列（8 张正好两行，避免 6+2 的半排留白） */
.kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kpi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .kpi-4 { grid-template-columns: 1fr; } }

/* ---------- 扫码登录 ---------- */
.qr-entry {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--r);
}
.qr-entry-ico {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--card); color: var(--brand);
}
.qr-entry-body { flex: 1; min-width: 0; }
.qr-entry-body b { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.qr-entry-body .hint { font-size: 12px; line-height: 1.65; color: var(--ink-2); }
.tag-hot {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  font-size: 10.5px; line-height: 16px; vertical-align: 1px;
  border-radius: 4px; background: var(--brand); color: var(--on-brand);
}

.qr-mask {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--scrim);
}
.qr-mask[hidden] { display: none; }
.qr-panel {
  width: min(392px, 94vw);
  background: var(--card); border-radius: var(--r-card);
  box-shadow: 0 24px 64px -20px rgba(43, 38, 30, .42);
  overflow: hidden;
}
.qr-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2);
}
.qr-head h3 { margin: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.qr-x {
  border: 0; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-3); padding: 0 2px;
}
.qr-x:hover { color: var(--ink); }

.qr-body { padding: 20px 20px 8px; text-align: center; }
.qr-frame {
  position: relative; width: 208px; height: 208px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
}
.qr-frame img { width: 188px; height: 188px; display: block; image-rendering: pixelated; }
.qr-frame img[hidden] { display: none; }
.qr-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 18px; }
.qr-wait[hidden] { display: none; }
.qr-wait p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }
.qr-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line); border-top-color: var(--brand);
  animation: qrspin .8s linear infinite;
}
@keyframes qrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qr-spin { animation-duration: 2.4s; } }

.qr-tip { margin: 14px 0 0; font-size: 13px; color: var(--ink); line-height: 1.6; }
.qr-note { margin: 6px 0 0; font-size: 12px; color: var(--warn); line-height: 1.6; min-height: 0; }
.qr-note:empty { display: none; }
.qr-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 16px 16px; margin-top: 6px; border-top: 1px solid var(--line-2);
}
@media (max-width: 560px) {
  .qr-entry { flex-wrap: wrap; }
  .qr-entry-body { flex-basis: calc(100% - 52px); }
  .qr-entry .btn { width: 100%; justify-content: center; }
}

/* ============================ 系统设置：模型配置 ============================ */
.field-row > .field { flex: 1 1 0; min-width: 0; }

.kv-list { display: flex; flex-direction: column; gap: 0; }
.kv-row {
  display: flex; gap: 14px; align-items: baseline;
  padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13px;
}
.kv-row:first-child { border-top: 0; padding-top: 2px; }
.kv-k { flex: none; width: 104px; color: var(--ink-3); font-size: 12px; }
.kv-v { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; line-height: 1.7; }
.kv-v code { font-size: 12px; background: var(--bg-soft); padding: 1px 6px; border-radius: 6px; }
.kv-sub { font-size: 12px; flex-basis: 100%; }

.key-row { display: flex; gap: 8px; align-items: center; }
.key-row input { flex: 1 1 auto; min-width: 0; }
.key-row .btn { flex: none; }

.probe-line { font-size: 12px; margin-top: 6px; line-height: 1.6; word-break: break-word; }
.probe-line.ok { color: var(--ok-ink); }
.probe-line.err { color: var(--err-ink); }

@media (max-width: 640px) {
  .kv-row { flex-direction: column; gap: 2px; }
  .kv-k { width: auto; }
  .key-row { flex-wrap: wrap; }
  .key-row .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   v5「自适应 · 手感」— 2026-11
   --------------------------------------------------------------------------
   目标：① 手机上真的能用（抽屉导航 / 表格横滚 / 触控尺寸 / 防聚焦缩放）
        ② 桌面更精致（内容更宽、卡片更柔、品牌两行）
   原则：只追加，类名不变；唯一覆盖既有规则的是窄屏 .side 的 display:none
        —— 那条会让手机端**完全没有导航**，是本轮最主要的修复。
   ========================================================================== */

:root {
  --r-card: 18px;
  --appbar-h: 56px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --sh: 0 1px 2px rgba(43, 38, 30, .035), 0 12px 32px -20px rgba(43, 38, 30, .18);
  --sh-hover: 0 2px 8px rgba(43, 38, 30, .05), 0 24px 48px -24px rgba(43, 38, 30, .22);
}

/* ---------- 侧栏品牌：主名 + 副标两行 ---------- */
.brand { padding: 18px 14px 12px; gap: 10px; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-size: 15px; font-weight: 650; letter-spacing: -.2px; }
.brand-sub {
  font-size: 10.5px; color: var(--ink-3); font-weight: 500; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(150deg, var(--brand-grad-3), var(--brand-grad-3));
  box-shadow: 0 6px 16px -7px rgba(194, 47, 36, .6);
}
.brand-mark.sm { width: 25px; height: 25px; border-radius: 8px; font-size: 13px; box-shadow: none; }
.side-close {
  display: none; margin-left: auto; flex: none;
  width: 32px; height: 32px; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); cursor: pointer;
}
.side-close:hover { background: var(--bg-2); color: var(--ink); }

/* 遮罩：抽屉打开时铺满 */
.nav-scrim {
  display: none; position: fixed; inset: 0; z-index: 30;
  padding: 0; border: 0; background: var(--scrim);
  opacity: 0; transition: opacity .22s;
}

/* 顶栏默认不出现 */
.appbar { display: none; }

/* 桌面：内容区再宽一点 */
@media (min-width: 961px) {
  .main { max-width: 1320px; padding: 30px 36px 56px; }
}

/* ---------------- ≤960：抽屉式导航 ---------------- */
@media (max-width: 960px) {
  .side {
    display: flex;                    /* 覆盖 v4 的 display:none（手机无导航的根因） */
    width: min(84vw, 304px);
    transform: translateX(-103%);
    transition: transform .26s cubic-bezier(.32, .72, .24, 1);
    box-shadow: 0 0 48px rgba(43, 38, 30, .22);
    z-index: 40;
    padding-top: var(--safe-t);
  }
  .shell.nav-open .side { transform: none; }
  .shell.nav-open .nav-scrim { display: block; opacity: 1; }
  .side-close { display: inline-flex; }
  .nav-link { padding: 10px 12px; font-size: 14px; }
  body.no-scroll { overflow: hidden; }

  .main { margin-left: 0; max-width: none; padding: 0 16px calc(32px + var(--safe-b)); }

  .appbar {
    display: flex; align-items: center; gap: 6px;
    position: sticky; top: 0; z-index: 25;
    margin: 0 -16px 16px;
    padding: 7px 10px;
    padding-top: calc(7px + var(--safe-t));
    background: rgba(247, 245, 242, .84);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line-2);
  }
  .appbar-btn {
    position: relative; flex: none; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 12px; background: transparent; color: var(--ink);
    cursor: pointer; transition: background .15s;
  }
  .appbar-btn:active { background: rgba(43, 38, 30, .08); }
  .appbar-brand {
    display: flex; align-items: center; gap: 8px; margin-right: auto;
    font-size: 14.5px; font-weight: 650; letter-spacing: -.2px;
  }
  .appbar .nav-dot {
    position: absolute; top: 3px; right: 3px; margin: 0;
    min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; padding: 0 3px;
  }

  .page-head { margin-bottom: 14px; }
  .page-head h1 { font-size: 20px; }
  .page-sub { font-size: 11.5px; }

  .card { padding: 16px 15px; border-radius: 15px; }
  .card-head { margin-bottom: 12px; }

  /* 多列布局一律降为单列（各页网格类名不完全统一，这里统一兜住） */
  .stats, .two-col, .studio-grid, .vs-wrap, .home-3col,
  .grid-2, .grid-3, .kpi-2 { grid-template-columns: 1fr; }

  /* 表格：运行时补的容器 + 页面自带的 .table-scroll 共用 */
  .table-scroll { margin: 0 -15px; padding: 0 15px; }
  .table-scroll.auto > .table { min-width: 620px; }
  .table th, .table td { padding: 10px 12px; }

  /* 触控尺寸：正文按钮 ≥40px，小按钮 ≥34px */
  .btn { min-height: 40px; padding: 9px 16px; font-size: 13.5px; }
  .btn-sm { min-height: 34px; padding: 6px 12px; }
  .btn-lg { min-height: 46px; }
  .searchbar { gap: 8px; }
  .searchbar input, .searchbar select { flex: 1 1 140px; min-width: 0; }
}

/* ---------------- ≤620：手机细化 ---------------- */
@media (max-width: 620px) {
  .main { padding: 0 13px calc(26px + var(--safe-b)); }
  .appbar { margin: 0 -13px 13px; }
  .table-scroll { margin: 0 -13px; padding: 0 13px; }

  /* iOS 聚焦时字号 <16px 会把整页放大，这里统一顶到 16 */
  .field input, .field textarea, .field select,
  .searchbar input, .searchbar select, .mini-select, .input-ico input { font-size: 16px; }

  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card { padding: 14px 13px; }
  .page-head h1 { font-size: 18.5px; }

  /* 动作按钮铺一行，拇指好按 */
  .btn-row > .btn { flex: 1 1 auto; justify-content: center; }
  .pager { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .alert { font-size: 12.5px; padding: 10px 13px; }
  .kv-row { flex-direction: column; gap: 2px; }
  .kv-k { width: auto; }
  .table td.nw { white-space: normal; }

  /* 认证页：手机整屏铺满，像 App 而不是浮窗（背景改白，底部不再露一条纸色） */
  .auth-wrap { padding: 0; align-items: stretch; background: var(--card); }
  .auth-max { max-width: none; }
  .auth-card2 {
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  }
  .auth-hero { padding: 30px 22px 2px; }
  .auth-body { padding: 18px 22px 30px; }
}

/* ---------------- ≤380：极窄机 ---------------- */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .appbar-brand { font-size: 13.5px; }
}

/* ---------------- 触屏：去掉粘滞 hover ---------------- */
@media (hover: none) {
  .table tbody tr:hover { background: transparent; }
  .nav-link:hover { background: transparent; color: var(--ink); }
  .nav-link.active:hover { background: var(--ink); color: var(--on-ink); }
}

/* ---------------- 表格滚动容器（运行时自动补齐） ----------------
   v4 给页面自带的 .table-scroll 定了 min-width:960px（那是「列多必横滚」的旧策略），
   自动补齐的 .auto 不套那条：桌面按容器自适应，只有窄屏才钉最小宽。 */
.table-scroll.auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll.auto > .table { min-width: 0; }
@media (max-width: 960px) {
  .table-scroll.auto > .table { min-width: 620px; }
}

/* ---------------- ≤620：多列表格转「卡片行」 ----------------
   手机横滚表格只能看到第一列，等于不可用。运行时把 thead 的列名注入每个 td
   的 data-th，这里用 ::before 渲染成「列名 值」。只在很窄时生效，桌面不受影响。 */
@media (max-width: 620px) {
  .table-scroll.auto > .table.as-cards { min-width: 0; }
  .table.as-cards {
    display: block; border: 0; background: transparent; border-radius: 0;
  }
  .table.as-cards thead { display: none; }
  .table.as-cards tbody { display: block; }
  .table.as-cards > tbody > tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: 14px;
    padding: 6px 13px 8px;
    margin-bottom: 10px;
    box-shadow: var(--sh);
  }
  .table.as-cards > tbody > tr:last-child { margin-bottom: 0; }
  .table.as-cards > tbody > tr:hover { background: var(--card); }
  .table.as-cards td {
    display: flex; gap: 10px; align-items: baseline;
    width: auto; max-width: none; padding: 5px 0;
    border: 0; white-space: normal; overflow: visible; text-overflow: clip;
    text-align: left;
  }
  .table.as-cards td::before {
    content: attr(data-th);
    flex: 0 0 68px;
    color: var(--ink-3);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
  }
  /* 没有列名（操作列 / 占位空列）就不占位，也不显示空行 */
  .table.as-cards td:not([data-th]) { padding-left: 0; }
  .table.as-cards td:empty { display: none; }
  .table.as-cards td.ell { max-width: none; }
  /* 操作按钮在卡片里换到下一行、铺开，避免被挤成小方块 */
  .table.as-cards td[data-th="操作"] { padding-top: 8px; }
  .table.as-cards td[data-th="操作"]::before { align-self: center; }
}

/* ---------------- KPI 网格的列数变体 ----------------
   原来 analytics / tasks / RPA 三处写的是内联 grid-template-columns，
   内联样式压过媒体查询，手机上于是永远排 4 列 / 3 列挤成一团。改成类后由这里接管。 */
.kpi-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1180px) {
  .kpi-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .kpi-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kpi-grid.cols-3 { grid-template-columns: 1fr; }   /* 下载卡信息多，手机上单列才看得清 */
  .kpi-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  .kpi-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ---------------- 网格子项必须允许收缩 ----------------
   grid/flex 子项默认 min-width:auto，内容一宽就把轨道顶开，
   窄屏下表现为「卡片比屏幕还宽、整页横向滚动」。这是本轮巡检里
   admin/health、admin/notify 两页 271px / 76px 溢出的根因。 */
.stats > *, .two-col > *, .two-col-wide > *, .studio-grid > *,
.home-3col > *, .kpi-grid > *, .grid-2 > *, .grid-3 > *,
.vs-wrap > *, .split > *, .row-2 > * { min-width: 0; }

/* 卡片里的长串（路径、表名、UA、错误栈）要能断，否则同样顶宽 */
.table.as-cards td { overflow-wrap: anywhere; word-break: break-word; }
.card, .main { overflow-wrap: break-word; }

/* 表单行在窄屏改成纵向后，桌面用的 flex-basis 会变成「高度」——
   admin/notify 页曾因此在「类型」下拉和「标题」之间凭空多出 210px 空白。 */
@media (max-width: 980px) {
  .form-row > div:first-child { flex: 1 1 auto; }
  .form-row { gap: 8px; }
}

/* ==========================================================================
   v7「十二时辰」— 2026-11-07 多主题模板层
   --------------------------------------------------------------------------
   基础双主题（暗夜工坊 浅/深）在文件头部；这里追加 10 套可选皮肤。
   约定：每套只覆盖令牌，骨架零改动；暗底模板同步在 <html> 上标
   data-scheme="dark"（JS 负责），图标显隐等按 scheme 判断。
   选择器 html[data-theme=…] 特异性高于 :root，天然压过 v5 的半径覆盖。
   ========================================================================== */

/* ---- 01 宣纸靛青（亮）：宣纸米 × 藏青靛墨 ---- */
html[data-theme="xuanzhi"] {
  --brand: #2b4a7a; --brand-dark: #23406b; --brand-soft: #e2e8f1; --brand-soft-2: #d6deea;
  --brand-line: #bcc9dc; --brand-ink: #2b4a7a; --on-brand: #f7f9fc;
  --brand-grad: linear-gradient(135deg, #3a5a82 0%, #27436e 100%);
  --brand-grad-2: linear-gradient(135deg, #33517a 0%, #223d66 100%);
  --brand-grad-3: linear-gradient(150deg, #3a5a82, #223d66);
  --sh-brand: 0 4px 14px -6px rgba(43, 74, 122, .45);
  --glow-1: #efe8d9; --glow-2: #e7dfcd;
  --bg: #ece5d8; --bg-2: #f2ecdf; --bg-soft: #e4dccd; --side: #e0d6c4; --card: #f7f2e9;
  --ink: #33302a; --ink-2: #6b665c; --ink-3: #9a927f; --on-ink: #f7f2e9;
  --line: #d8cfbd; --line-2: #e0d8c7; --line-strong: #c5baa2;
  --scrollbar: #d5cbb6; --scrollbar-hover: #c2b6a0;
  --ok: #2e6b4f; --ok-soft: #e2ede6; --ok-ink: #235640;
  --warn: #a3681c; --warn-soft: #f4ead7; --warn-ink: #855413;
  --err: #b03a30; --err-soft: #f6e5e2; --err-ink: #96302a; --err-line: #ddb2ab;
  --soft-bg: #e4dccd; --soft-ink: #5d584c;
  --audio-bg: #e9e4f0; --audio-ink: #5f4b8b;
  --scrim: rgba(51, 48, 42, .45);
  --sh: 0 1px 2px rgba(51, 44, 30, .04), 0 12px 32px -20px rgba(51, 44, 30, .18);
  --sh-hover: 0 2px 8px rgba(51, 44, 30, .05), 0 24px 48px -24px rgba(51, 44, 30, .22);
  --sh-auth: 0 1px 2px rgba(51, 44, 30, .04), 0 32px 64px -32px rgba(51, 44, 30, .26);
  --sh-focus: 0 0 0 3px rgba(43, 74, 122, .18);
}

/* ---- 02 瑞士数据台（亮）：纯白 × 信号红，零圆角 ---- */
html[data-theme="ruishi"] {
  --brand: #f5333f; --brand-dark: #d92b36; --brand-soft: #fdebec; --brand-soft-2: #fbd6d8;
  --brand-line: #f5b8bc; --brand-ink: #c22530; --on-brand: #ffffff;
  --brand-grad: linear-gradient(135deg, #e62e3a 0%, #c22530 100%);
  --brand-grad-2: linear-gradient(135deg, #d92b36 0%, #b02029 100%);
  --brand-grad-3: linear-gradient(150deg, #e62e3a, #b02029);
  --sh-brand: 0 4px 14px -6px rgba(245, 51, 63, .4);
  --glow-1: #f4f4f4; --glow-2: #ebebeb;
  --bg: #fafafa; --bg-2: #ffffff; --bg-soft: #f0f0f0; --side: #ffffff; --card: #ffffff;
  --ink: #111111; --ink-2: #555555; --ink-3: #999999; --on-ink: #ffffff;
  --line: #e0e0e0; --line-2: #eaeaea; --line-strong: #cccccc;
  --scrollbar: #d9d9d9; --scrollbar-hover: #bbbbbb;
  --ok: #0f7a3d; --ok-soft: #e6f4ea; --ok-ink: #0a5e2e;
  --warn: #b96a00; --warn-soft: #fdf2e0; --warn-ink: #965500;
  --err: #d92b36; --err-soft: #fdecec; --err-ink: #b02029; --err-line: #f2b9bd;
  --soft-bg: #f0f0f0; --soft-ink: #444444;
  --audio-bg: #eef0f4; --audio-ink: #3d4a5c;
  --scrim: rgba(17, 17, 17, .5);
  --r: 0px; --r-card: 2px;
  --sh: 0 1px 0 rgba(0, 0, 0, .05), 0 0 0 0 rgba(0, 0, 0, 0);
  --sh-hover: 0 2px 0 rgba(0, 0, 0, .08), 0 0 0 0 rgba(0, 0, 0, 0);
  --sh-auth: 0 1px 0 rgba(0, 0, 0, .05), 0 24px 48px -32px rgba(0, 0, 0, .2);
  --sh-focus: 0 0 0 3px rgba(245, 51, 63, .16);
}

/* ---- 03 墨玉（暗）：黑玉 × 翡翠绿 ---- */
html[data-theme="moyu"] {
  --brand: #3fae8c; --brand-dark: #55c2a0; --brand-soft: #16261f; --brand-soft-2: #1d3229;
  --brand-line: #27493c; --brand-ink: #3fae8c; --on-brand: #06231a;
  --brand-grad: linear-gradient(135deg, #37a183 0%, #2c8a70 100%);
  --brand-grad-2: linear-gradient(135deg, #31917a 0%, #267a63 100%);
  --brand-grad-3: linear-gradient(150deg, #37a183, #267a63);
  --sh-brand: 0 4px 14px -6px rgba(63, 174, 140, .32);
  --glow-1: #16211c; --glow-2: #101815;
  --bg: #101613; --bg-2: #0c110e; --bg-soft: #0c110e; --side: #0a0f0c; --card: #18211d;
  --ink: #dfe7e2; --ink-2: #8fa098; --ink-3: #5f6f66; --on-ink: #0c110e;
  --line: #24352d; --line-2: #202f28; --line-strong: #31473c;
  --scrollbar: #26382f; --scrollbar-hover: #31473c;
  --ok: #52c496; --ok-soft: #16281f; --ok-ink: #6fd3a8;
  --warn: #d9a03f; --warn-soft: #2d2614; --warn-ink: #e5b45e;
  --err: #e06a5c; --err-soft: #331f1e; --err-ink: #eb8578; --err-line: #4a2d29;
  --soft-bg: #223129; --soft-ink: #9db0a5;
  --audio-bg: #1e2733; --audio-ink: #8fb3d9;
  --scrim: rgba(0, 0, 0, .55);
  --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .5);
  --sh-hover: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 36px -18px rgba(0, 0, 0, .6);
  --sh-auth: 0 1px 2px rgba(0, 0, 0, .3), 0 32px 64px -32px rgba(0, 0, 0, .6);
  --sh-focus: 0 0 0 3px rgba(63, 174, 140, .3);
}

/* ---- 04 釉里红（亮）：瓷白 × 釉里红 ---- */
html[data-theme="youlihong"] {
  --brand: #c2372e; --brand-dark: #a92c24; --brand-soft: #f9e9e6; --brand-soft-2: #f3d8d3;
  --brand-line: #e8c0b9; --brand-ink: #b02f27; --on-brand: #fff8f5;
  --brand-grad: linear-gradient(135deg, #cd4036 0%, #a92c24 100%);
  --brand-grad-2: linear-gradient(135deg, #b9352c 0%, #98251e 100%);
  --brand-grad-3: linear-gradient(150deg, #cd4036, #98251e);
  --sh-brand: 0 4px 14px -6px rgba(194, 55, 46, .42);
  --glow-1: #f5ece5; --glow-2: #efe5da;
  --bg: #faf7f4; --bg-2: #fdfbf9; --bg-soft: #f4efe9; --side: #f2ece6; --card: #ffffff;
  --ink: #35302c; --ink-2: #6f6862; --ink-3: #a29a92; --on-ink: #fdfbf9;
  --line: #e6dcd2; --line-2: #ede4da; --line-strong: #d3c6b8;
  --scrollbar: #ddd2c4; --scrollbar-hover: #c9bba9;
  --ok: #2e6b4f; --ok-soft: #e4efe7; --ok-ink: #235640;
  --warn: #a3681c; --warn-soft: #f6eedd; --warn-ink: #855413;
  --err: #b3271e; --err-soft: #f9e8e6; --err-ink: #93201a; --err-line: #e5b7b2;
  --soft-bg: #f4efe9; --soft-ink: #5d574f;
  --audio-bg: #efe9f4; --audio-ink: #6b4c8a;
  --scrim: rgba(53, 48, 44, .45);
  --sh: 0 1px 2px rgba(58, 42, 34, .04), 0 12px 32px -20px rgba(58, 42, 34, .16);
  --sh-hover: 0 2px 8px rgba(58, 42, 34, .05), 0 24px 48px -24px rgba(58, 42, 34, .2);
  --sh-auth: 0 1px 2px rgba(58, 42, 34, .04), 0 32px 64px -32px rgba(58, 42, 34, .24);
  --sh-focus: 0 0 0 3px rgba(194, 55, 46, .16);
}

/* ---- 05 柿染（亮）：米奶油 × 柿子橙，大圆角 ---- */
html[data-theme="shiran"] {
  --brand: #c96a2b; --brand-dark: #b25c22; --brand-soft: #f8e9da; --brand-soft-2: #f2dcc4;
  --brand-line: #e8caa8; --brand-ink: #b25c22; --on-brand: #fff9f2;
  --brand-grad: linear-gradient(135deg, #d4762f 0%, #b25c22 100%);
  --brand-grad-2: linear-gradient(135deg, #c66a28 0%, #a3511d 100%);
  --brand-grad-3: linear-gradient(150deg, #d4762f, #a3511d);
  --sh-brand: 0 4px 14px -6px rgba(201, 106, 43, .42);
  --glow-1: #f3ecdc; --glow-2: #ebe3cf;
  --bg: #f6f1e7; --bg-2: #faf6ee; --bg-soft: #efe8d9; --side: #ede5d4; --card: #fbf7ee;
  --ink: #3a332b; --ink-2: #6f675a; --ink-3: #a39a88; --on-ink: #fbf7ee;
  --line: #e3d9c4; --line-2: #eae1cf; --line-strong: #d0c3a6;
  --scrollbar: #d8cdb4; --scrollbar-hover: #c4b79a;
  --ok: #3f7a46; --ok-soft: #e6f0e2; --ok-ink: #2f6236;
  --warn: #8a6d1c; --warn-soft: #f4ecd6; --warn-ink: #715713;
  --err: #bb3a30; --err-soft: #f7e6e2; --err-ink: #9c2f27; --err-line: #e2b6ae;
  --soft-bg: #efe8d9; --soft-ink: #5f594c;
  --audio-bg: #eee9f2; --audio-ink: #6b5a8a;
  --scrim: rgba(58, 51, 43, .45);
  --r: 12px; --r-card: 20px;
  --sh: 0 1px 2px rgba(74, 60, 38, .04), 0 12px 32px -20px rgba(74, 60, 38, .16);
  --sh-hover: 0 2px 8px rgba(74, 60, 38, .05), 0 24px 48px -24px rgba(74, 60, 38, .2);
  --sh-auth: 0 1px 2px rgba(74, 60, 38, .04), 0 32px 64px -32px rgba(74, 60, 38, .24);
  --sh-focus: 0 0 0 3px rgba(201, 106, 43, .16);
}

/* ---- 06 海盐（亮）：冷灰蓝白 × 板岩青 ---- */
html[data-theme="haiyan"] {
  --brand: #38506b; --brand-dark: #2d425a; --brand-soft: #e5ecf3; --brand-soft-2: #d6e0ea;
  --brand-line: #b9c8d8; --brand-ink: #2d425a; --on-brand: #f6f9fc;
  --brand-grad: linear-gradient(135deg, #406082 0%, #2d425a 100%);
  --brand-grad-2: linear-gradient(135deg, #385677 0%, #263a4f 100%);
  --brand-grad-3: linear-gradient(150deg, #406082, #263a4f);
  --sh-brand: 0 4px 14px -6px rgba(56, 80, 107, .42);
  --glow-1: #edf1f6; --glow-2: #e4eaf1;
  --bg: #f2f5f8; --bg-2: #f8fafc; --bg-soft: #eaeef3; --side: #e4eaf1; --card: #fbfcfe;
  --ink: #2b333c; --ink-2: #64707c; --ink-3: #98a3ad; --on-ink: #f8fafc;
  --line: #d4dde7; --line-2: #dde4ec; --line-strong: #bcc9d6;
  --scrollbar: #cdd8e2; --scrollbar-hover: #b7c6d4;
  --ok: #1f7a5c; --ok-soft: #e2f0ea; --ok-ink: #17654c;
  --warn: #a3681c; --warn-soft: #f2eedd; --warn-ink: #855413;
  --err: #c0392b; --err-soft: #f7e8e6; --err-ink: #ab3226; --err-line: #dfb4ad;
  --soft-bg: #eaeef3; --soft-ink: #57646f;
  --audio-bg: #e9e8f4; --audio-ink: #5b5a9e;
  --scrim: rgba(43, 51, 60, .45);
  --sh: 0 1px 2px rgba(30, 40, 52, .04), 0 12px 32px -20px rgba(30, 40, 52, .16);
  --sh-hover: 0 2px 8px rgba(30, 40, 52, .05), 0 24px 48px -24px rgba(30, 40, 52, .2);
  --sh-auth: 0 1px 2px rgba(30, 40, 52, .04), 0 32px 64px -32px rgba(30, 40, 52, .24);
  --sh-focus: 0 0 0 3px rgba(56, 80, 107, .16);
}

/* ---- 07 紫檀嵌金（暗）：紫檀黑 × 黄铜金 ---- */
html[data-theme="zitan"] {
  --brand: #c9a24e; --brand-dark: #dbb766; --brand-soft: #2c2415; --brand-soft-2: #392e1a;
  --brand-line: #4a3c1f; --brand-ink: #c9a24e; --on-brand: #221a08;
  --brand-grad: linear-gradient(135deg, #c69c44 0%, #ab8438 100%);
  --brand-grad-2: linear-gradient(135deg, #b8903c 0%, #9c7630 100%);
  --brand-grad-3: linear-gradient(150deg, #c69c44, #9c7630);
  --sh-brand: 0 4px 14px -6px rgba(201, 162, 78, .3);
  --glow-1: #251d18; --glow-2: #1c1613;
  --bg: #181217; --bg-2: #130e11; --bg-soft: #130e11; --side: #100c0f; --card: #221a20;
  --ink: #e9e2dd; --ink-2: #9a8f88; --ink-3: #6e635c; --on-ink: #130e11;
  --line: #33262e; --line-2: #2e2229; --line-strong: #42313a;
  --scrollbar: #362a31; --scrollbar-hover: #42313a;
  --ok: #5cb88a; --ok-soft: #1a2a20; --ok-ink: #74cca2;
  --warn: #d4a24a; --warn-soft: #2e2413; --warn-ink: #e2b565;
  --err: #e0655c; --err-soft: #331e1c; --err-ink: #eb8278; --err-line: #4a2a27;
  --soft-bg: #2e2229; --soft-ink: #a89c94;
  --audio-bg: #241f31; --audio-ink: #a99bd1;
  --scrim: rgba(0, 0, 0, .55);
  --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -14px rgba(0, 0, 0, .5);
  --sh-hover: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 36px -18px rgba(0, 0, 0, .6);
  --sh-auth: 0 1px 2px rgba(0, 0, 0, .3), 0 32px 64px -32px rgba(0, 0, 0, .6);
  --sh-focus: 0 0 0 3px rgba(201, 162, 78, .26);
}

/* ---- 08 石墨霓虹（暗）：石墨黑 × 珊瑚红 ---- */
html[data-theme="shimo"] {
  --brand: #ff6b57; --brand-dark: #ff8271; --brand-soft: #2e1d19; --brand-soft-2: #3d2620;
  --brand-line: #4e3129; --brand-ink: #ff6b57; --on-brand: #2a0f0a;
  --brand-grad: linear-gradient(135deg, #f55f4b 0%, #e04f3c 100%);
  --brand-grad-2: linear-gradient(135deg, #e65542 0%, #cc4534 100%);
  --brand-grad-3: linear-gradient(150deg, #f55f4b, #cc4534);
  --sh-brand: 0 4px 14px -6px rgba(255, 107, 87, .32);
  --glow-1: #201d1e; --glow-2: #181719;
  --bg: #16181d; --bg-2: #111318; --bg-soft: #111318; --side: #0f1114; --card: #1d2027;
  --ink: #e4e6ea; --ink-2: #8d919b; --ink-3: #62666e; --on-ink: #111318;
  --line: #2b303b; --line-2: #262b35; --line-strong: #383e4a;
  --scrollbar: #2c323d; --scrollbar-hover: #383e4a;
  --ok: #4fc08d; --ok-soft: #16281f; --ok-ink: #6fd3a8;
  --warn: #e0a04a; --warn-soft: #2c2415; --warn-ink: #ecb465;
  --err: #f2544a; --err-soft: #331c1a; --err-ink: #ff8177; --err-line: #54292a;
  --soft-bg: #262b35; --soft-ink: #a3a8b2;
  --audio-bg: #232635; --audio-ink: #9fa8e8;
  --scrim: rgba(0, 0, 0, .55);
  --sh: 0 1px 2px rgba(0, 0, 0, .32), 0 8px 24px -14px rgba(0, 0, 0, .52);
  --sh-hover: 0 2px 6px rgba(0, 0, 0, .36), 0 18px 36px -18px rgba(0, 0, 0, .62);
  --sh-auth: 0 1px 2px rgba(0, 0, 0, .32), 0 32px 64px -32px rgba(0, 0, 0, .62);
  --sh-focus: 0 0 0 3px rgba(255, 107, 87, .3);
}

/* ---- 09 苔原（亮）：苔绿灰白 × 深松绿 ---- */
html[data-theme="taoyuan"] {
  --brand: #2e5339; --brand-dark: #25452e; --brand-soft: #e2ecdf; --brand-soft-2: #d2e1cd;
  --brand-line: #b3ccb0; --brand-ink: #25452e; --on-brand: #f4f9f2;
  --brand-grad: linear-gradient(135deg, #376243 0%, #25452e 100%);
  --brand-grad-2: linear-gradient(135deg, #305739 0%, #1f3c27 100%);
  --brand-grad-3: linear-gradient(150deg, #376243, #1f3c27);
  --sh-brand: 0 4px 14px -6px rgba(46, 83, 57, .4);
  --glow-1: #e9efe3; --glow-2: #e0e8d8;
  --bg: #eef2ea; --bg-2: #f5f8f1; --bg-soft: #e4eade; --side: #dfe7d8; --card: #f7faf3;
  --ink: #2e352c; --ink-2: #66705f; --ink-3: #98a28c; --on-ink: #f5f8f1;
  --line: #cfdbc2; --line-2: #d9e3cc; --line-strong: #b8c8a8;
  --scrollbar: #ccd8bc; --scrollbar-hover: #b5c4a2;
  --ok: #2e6b3f; --ok-soft: #e1efe2; --ok-ink: #245631;
  --warn: #8a6d1c; --warn-soft: #f0eeda; --warn-ink: #715713;
  --err: #b3452e; --err-soft: #f7e9e3; --err-ink: #983a25; --err-line: #dcb8a8;
  --soft-bg: #e4eade; --soft-ink: #57624f;
  --audio-bg: #e6e9f2; --audio-ink: #5a6b9e;
  --scrim: rgba(46, 53, 44, .45);
  --sh: 0 1px 2px rgba(38, 46, 32, .04), 0 12px 32px -20px rgba(38, 46, 32, .16);
  --sh-hover: 0 2px 8px rgba(38, 46, 32, .05), 0 24px 48px -24px rgba(38, 46, 32, .2);
  --sh-auth: 0 1px 2px rgba(38, 46, 32, .04), 0 32px 64px -32px rgba(38, 46, 32, .24);
  --sh-focus: 0 0 0 3px rgba(46, 83, 57, .16);
}

/* ---- 10 午夜航图（暗）：午夜深蓝 × 航空蓝 ---- */
html[data-theme="wuye"] {
  --brand: #4d8dff; --brand-dark: #6ba3ff; --brand-soft: #16233c; --brand-soft-2: #1c2e4d;
  --brand-line: #24395f; --brand-ink: #4d8dff; --on-brand: #071228;
  --brand-grad: linear-gradient(135deg, #3f82f6 0%, #2d6ce0 100%);
  --brand-grad-2: linear-gradient(135deg, #3775e6 0%, #2760cc 100%);
  --brand-grad-3: linear-gradient(150deg, #3f82f6, #2760cc);
  --sh-brand: 0 4px 14px -6px rgba(77, 141, 255, .3);
  --glow-1: #131b2c; --glow-2: #0f1523;
  --bg: #0d1526; --bg-2: #0a101d; --bg-soft: #0a101d; --side: #080e1b; --card: #131c30;
  --ink: #e2e8f2; --ink-2: #8794ab; --ink-3: #5b6880; --on-ink: #0a101d;
  --line: #1e2b47; --line-2: #1a263e; --line-strong: #293a5c;
  --scrollbar: #20304e; --scrollbar-hover: #293a5c;
  --ok: #45c08d; --ok-soft: #122a1f; --ok-ink: #63d1a4;
  --warn: #e0a94a; --warn-soft: #2b2413; --warn-ink: #ecb862;
  --err: #f0605a; --err-soft: #2f1a1e; --err-ink: #f57f79; --err-line: #55292e;
  --soft-bg: #1a263e; --soft-ink: #9aa7bd;
  --audio-bg: #201d38; --audio-ink: #a296e8;
  --scrim: rgba(0, 0, 0, .6);
  --sh: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -14px rgba(0, 0, 0, .55);
  --sh-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 18px 36px -18px rgba(0, 0, 0, .65);
  --sh-auth: 0 1px 2px rgba(0, 0, 0, .35), 0 32px 64px -32px rgba(0, 0, 0, .65);
  --sh-focus: 0 0 0 3px rgba(77, 141, 255, .3);
}

/* ---------- 主题选择菜单 ----------
   点「主题」弹出的浮层：12 套主题分「基础 / 模板」两组，色点即品牌色。 */
.theme-menu {
  position: fixed; z-index: 260;
  min-width: 190px; max-height: min(420px, 72vh); overflow-y: auto;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 14px;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .35);
  padding: 8px; display: none;
}
.theme-menu.open { display: block; }
.theme-menu .tm-group {
  font-size: 10.5px; color: var(--ink-3); font-weight: 600;
  padding: 7px 10px 3px; letter-spacing: .5px;
}
.theme-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  border-radius: 8px; font: 13px var(--font); color: var(--ink); text-align: left;
}
.theme-item:hover { background: var(--brand-soft); }
.theme-item.cur { color: var(--brand-ink); font-weight: 600; }
.theme-item .tm-dot {
  width: 14px; height: 14px; border-radius: 5px; flex: none;
  border: 1px solid rgba(0, 0, 0, .12);
}
.theme-item .tm-check { margin-left: auto; opacity: 0; font-weight: 700; }
.theme-item.cur .tm-check { opacity: 1; }