/* 通用小程序后台 · 样式 v1.0
   ------------------------------------------------------------------
   基线：design/后台UI设计规范_v1.0.md（提炼自用户提供的 UI 参考图）
   视觉语法 = 纯黑外框 + 浅蓝紫画布 + 白卡 + 宝蓝动作色 + 柠檬黄唯一高亮

   改样式前先读这 4 条，破了会立刻「丑得很具体」：
   1. Lime 纪律：一屏最多 2 处 Lime（1 主 CTA + 至多 1 焦点胶囊）。
      浅底不铺 Lime；Lime 上只放墨黑字。加组件前先算「余额」。
   2. 深底禁 Lime 辉光：Lime 叠深靛蓝 = 脏橄榄绿，深色区只用蓝色光。
   3. 侧栏永久不含 Lime（它每屏都在）→ 活跃项用宝蓝填充。
   4. 浅底上的蓝字必须用 --blue-ink（4.9:1）；--blue 只用于填充块。
   ------------------------------------------------------------------ */

:root {
  /* 文字 */
  --ink: #0e1116;
  --ink-2: #47506a;
  --ink-3: #7c879e;

  /* 线 / 底 */
  --line: #e2e6f2;
  --line-2: #edf0f8;
  --bg: #edf0f8;
  --surface: #ffffff;

  /* 黑框（侧栏 / 登录页底） */
  --frame: #0b0c0f;
  --frame-2: #17191f;
  --frame-3: #22252d;

  /* 深靛蓝（hero） */
  --indigo-1: #141a57;
  --indigo-2: #2b31a8;

  /* 动作色 */
  --blue: #2b57e8;
  --blue-hi: #3d6bf5;
  --blue-ink: #1e45c8;
  --blue-bg: #e8eefe;
  --sky: #4ba5fb;

  /* 唯一高亮 */
  --lime: #d5f94e;
  --lime-ink: #171a0f;
  --lime-dim: #b9de2f;

  /* 语义 */
  --green: #2f8f5b;
  --green-bg: #eaf6ef;
  --amber: #d98a1f;
  --amber-bg: #fdf6e7;
  --red: #cf3f3f;
  --red-bg: #fdeeee;

  /* 形状 */
  --r-card: 18px;
  --r-sm: 10px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(11, 20, 55, 0.05), 0 8px 24px rgba(11, 20, 55, 0.06);
  --sh-2: 0 18px 48px rgba(11, 20, 55, 0.14);

  /* 兼容旧 token 名（页面与脚本里还有引用，别删） */
  --navy: var(--indigo-1);
  --navy-2: var(--indigo-2);
  --radius: var(--r-card);
  --radius-sm: var(--r-sm);
  --shadow: var(--sh-1);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { letter-spacing: -0.01em; }

/* ── 布局：黑侧栏 + 浅画布 ───────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 224px;
  flex: 0 0 224px;
  background: var(--frame);
  color: #a9b0c2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  /* 深底只允许蓝色光（红线 2） */
  background-image: radial-gradient(420px 220px at 10% -8%, rgba(43, 87, 232, 0.34), transparent 70%);
  background-repeat: no-repeat;
}

.sb-brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 品牌标：宝蓝方块 + 白字。不用 Lime —— 侧栏每屏都在，Lime 会吃光预算 */
.sb-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 9px;
  background: linear-gradient(140deg, var(--blue-hi), var(--blue));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(43, 87, 232, 0.45);
}
.sb-title { color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: 0.2px; }
.sb-sub { color: #767e92; font-size: 11.5px; margin-top: 2px; }

.sb-nav { padding: 14px 10px; flex: 1; overflow-y: auto; }
.sb-nav a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: #b6bccc;
  margin-bottom: 2px;
  font-size: 13.5px;
  transition: background 0.12s ease, color 0.12s ease;
}
.sb-nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.sb-nav a.on {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(43, 87, 232, 0.35);
}

.sb-foot { padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 12px; color: #767e92; }
.sb-foot .who { color: #d6dae4; font-weight: 600; }
.sb-foot form { margin-top: 8px; }
.sb-foot .btn.link { color: #9aa2b5; }
.sb-foot .btn.link:hover { color: #fff; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 60px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 { font-size: 16.5px; margin: 0; font-weight: 700; }
.topbar .crumb { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.wrap { padding: 22px 24px 48px; max-width: 1180px; }

/* ── Hero（对标参考图左侧那部深靛蓝手机） ─────────────── */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  padding: 24px 26px 26px;
  margin-bottom: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--indigo-1) 0%, var(--indigo-2) 100%);
  box-shadow: 0 18px 42px rgba(20, 26, 87, 0.28);
}
/* 装饰光：只用蓝色（红线 2：深底铺 Lime = 脏橄榄绿） */
.hero::after {
  content: "";
  position: absolute;
  right: -70px; top: -90px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 165, 251, 0.55), transparent 66%);
  pointer-events: none;
}
.hero-k { font-size: 12.5px; color: #a8b3e8; letter-spacing: 0.3px; }
.hero-v {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-sub { font-size: 12.5px; color: #9fa9dd; }
.hero .actions { margin-top: 16px; position: relative; z-index: 1; }
.hero .btn { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); color: #fff; }
.hero .btn:hover { background: rgba(255, 255, 255, 0.18); }

/* 焦点胶囊：hero 上唯一允许的 Lime（红线 1，每屏 1 处） */
.pill-lime {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--lime-ink);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── 卡片 ───────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.card > h2 {
  font-size: 14.5px;
  margin: 0 0 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card > h2 .tip { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
/* h2 左侧的宝蓝竖条（不用 Lime） */
.card > h2::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: var(--blue);
  flex: 0 0 3px;
}

.grid { display: grid; gap: 16px; }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1000px) { .grid.c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid.c3, .grid.c2 { grid-template-columns: 1fr; } }

/* ── 指标块 ─────────────────────────────────────────── */

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px 18px;
  box-shadow: var(--sh-1);
}
.stat .k { color: var(--ink-3); font-size: 12.5px; }
.stat .v {
  font-size: 26px; font-weight: 800; line-height: 1.25; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* 状态色：墨 / 琥珀 / 红 —— 不用蓝也不用 Lime（留给动作与焦点） */
.stat .v.ok { color: var(--ink); }
.stat .v.warn { color: var(--amber); }
.stat .v.bad { color: var(--red); }
.stat .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }

/* ── 徽章 ───────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 1.7;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.g { background: var(--green-bg); color: var(--green); border-color: #cbe8d7; }
.badge.y { background: var(--amber-bg); color: var(--amber); border-color: #f2e2bd; }
.badge.r { background: var(--red-bg); color: var(--red); border-color: #f4cfcf; }
.badge.n { background: #f2f4fa; color: var(--ink-2); border-color: var(--line); }
.badge.b { background: var(--blue-bg); color: var(--blue-ink); border-color: #ccd9fb; }

/* ── 表格 ───────────────────────────────────────────── */

table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-3);
  font-size: 12.5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
/* 不用斑马纹：有描边就够，斑马纹会和卡片底打架 */
table.tbl td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 表单 ───────────────────────────────────────────── */

.field { margin-bottom: 14px; }
.field > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.field .hint { color: var(--ink-3); font-size: 12px; margin-top: 4px; }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13.5px;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43, 87, 232, 0.14);
}
textarea { resize: vertical; min-height: 72px; font-family: var(--mono); font-size: 12.5px; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .row2 { grid-template-columns: 1fr; } }

/* ── 按钮：CTA 三档（规范 §3.1） ─────────────────────── */

.btn {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.btn:hover { background: #f6f8fd; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 主 CTA = 唯一那处 Lime（红线 1：一屏 ≤ 1 个） */
.btn.primary {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--lime-ink);
  box-shadow: 0 8px 20px rgba(185, 222, 47, 0.4);
}
.btn.primary:hover { background: var(--lime-dim); border-color: var(--lime-dim); }

/* 终结性动作（对标参考图的 Confirm Long 黑色胶囊） */
.btn.dark {
  background: var(--frame);
  border-color: var(--frame);
  color: #fff;
}
.btn.dark:hover { background: var(--frame-3); }

/* 次级蓝按钮：填色块，所以可以用 --blue */
.btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.blue:hover { background: #2450d8; }

.btn.danger { color: var(--red); border-color: #f0cccc; background: #fff; }
.btn.danger:hover { background: var(--red-bg); }

.btn.sm { padding: 5px 12px; font-size: 12.5px; }
.btn.link { border: none; background: none; color: var(--blue-ink); padding: 0; font-weight: 500; box-shadow: none; }
.btn.link:hover { background: none; text-decoration: underline; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── 提示条 ─────────────────────────────────────────── */

.alert { border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; margin-bottom: 12px; border: 1px solid; }
.alert.ok { background: var(--green-bg); border-color: #cbe8d7; color: #24694a; }
.alert.err { background: var(--red-bg); border-color: #f4cfcf; color: #a32828; }
.alert.warn { background: var(--amber-bg); border-color: #f2e2bd; color: #96601a; }
.alert.info { background: var(--blue-bg); border-color: #ccd9fb; color: var(--blue-ink); }
.alert[hidden] { display: none; }

/* ── 其它 ───────────────────────────────────────────── */

.mono { font-family: var(--mono); font-size: 12.5px; }

pre.code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--frame);
  color: #cdd8ea;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  overflow-x: auto;
  margin: 0;
  line-height: 1.65;
}

.empty { text-align: center; padding: 34px 16px; color: var(--ink-3); font-size: 13.5px; }
.empty .big { font-size: 15px; color: var(--ink-2); margin-bottom: 6px; font-weight: 600; }

.kv { display: grid; grid-template-columns: 132px 1fr; gap: 8px 12px; font-size: 13.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; word-break: break-all; }

.caps { display: flex; flex-wrap: wrap; gap: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 配置中心：作用域 / 分组胶囊 ─────────────────────── */

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}
.chip:hover { background: #f6f8fd; border-color: #d5def4; text-decoration: none; }
.chip.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(43, 87, 232, 0.28);
}
.chip .chip-hint { font-size: 11.5px; color: var(--ink-3); }
.chip.on .chip-hint { color: #bccaf8; }
.chip .n { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* 配置表内的行内编辑控件 —— 比全局输入框矮一档，免得表格被撑成一堵墙 */
table.cfg { font-size: 13px; }
table.cfg td { vertical-align: middle; }
table.cfg .v-input { padding: 5px 9px; font-size: 12.5px; max-width: 220px; border-radius: 8px; }
table.cfg select.v-input { max-width: 220px; }
table.cfg .actions { flex-wrap: nowrap; }

/* 广告位「启用」开关 */
.switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.switch input { width: auto; margin: 0; accent-color: var(--blue); }

.divider { height: 1px; background: var(--line); margin: 18px 0; }

.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.right { text-align: right; }

img.qr { max-width: 240px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 6px; }

/* ── 登录页：黑框 + 浅卡（复刻参考图构图） ───────────── */

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--frame);
  background-image: radial-gradient(560px 400px at 50% -10%, rgba(43, 87, 232, 0.42), transparent 68%);
  background-repeat: no-repeat;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 388px;
  background: var(--surface);
  border-radius: 22px;
  padding: 32px 30px 26px;
  box-shadow: var(--sh-2);
}
.login-card .brand { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.login-card .brand-sub { color: var(--ink-3); font-size: 12.5px; margin: 4px 0 22px; }
.login-card .field > label { font-size: 12.5px; }
/* 全站唯一可以大方用 Lime 的按钮 */
.login-card .btn.primary { width: 100%; margin-top: 6px; padding: 11px; }

.field-totp[hidden] { display: none; }

/* ── 应用工作台：二级导航 ─────────────────────────────
   ⚠️ 活跃项用宝蓝填充，**不用 Lime**：导航每屏都在，用高亮色会吃光整屏的 Lime 余额 */

.appnav {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 16px; padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1);
}
.appnav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  text-decoration: none;
}
.appnav-item:hover { background: #f4f6fc; text-decoration: none; }
.appnav-item.on { background: var(--blue); color: #fff; }
.appnav-item .wip {
  font-style: normal; font-size: 10px; line-height: 1;
  padding: 2px 5px; border-radius: var(--r-pill);
  background: var(--line-2); color: var(--ink-3); font-weight: 700;
}
.appnav-item.on .wip { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ── 筛选与工具行 ───────────────────────────────────── */

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters input[type="search"] { flex: 1; min-width: 190px; }
.grow { flex: 1; }

.bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 12px; margin-bottom: 12px;
  background: var(--blue-bg); border: 1px solid #ccd9fb; border-radius: var(--r-sm);
  font-size: 13px; color: var(--blue-ink);
}
.bulkbar[hidden] { display: none; }

/* ── 用户单元 ───────────────────────────────────────── */

.u-cell { display: flex; align-items: center; gap: 9px; }
.u-meta { min-width: 0; }
.u-name { font-weight: 600; font-size: 13.5px; }
.u-name.lg { font-size: 16px; }
.jrow:hover { background: #fafbfe; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; background: var(--line-2); flex: none;
}
.avatar.lg { width: 52px; height: 52px; }
.avatar.ph {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  color: var(--blue-ink); background: var(--blue-bg);
}
.avatar.lg.ph { font-size: 20px; }
.d-head { display: flex; align-items: center; gap: 12px; }

/* ── 标签胶囊 ───────────────────────────────────────── */

.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tagchip {
  font-style: normal; font-size: 11.5px;
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid; white-space: nowrap;
}
.tagchip.blue { background: var(--blue-bg); color: var(--blue-ink); border-color: #ccd9fb; }
.tagchip.green { background: var(--green-bg); color: var(--green); border-color: #cbe8d7; }
.tagchip.gray { background: var(--line-2); color: var(--ink-2); border-color: var(--line); }
.tagchip.red { background: var(--red-bg); color: var(--red); border-color: #f4cfcf; }
/* ⚠️ 柠檬黄胶囊必须配墨黑字。白字在 #d5f94e 上对比度只有 1.2:1，等于看不见 */
.tagchip.lime { background: var(--lime); color: var(--lime-ink); border-color: var(--lime-dim); }

.tags.pick { gap: 8px; }
.tagpick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tagpick input { width: auto; margin: 0; accent-color: var(--blue); }

/* ── 分页 ───────────────────────────────────────────── */

.pager {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}

/* ── 弹层 ───────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow: auto;
}
.modal[hidden] { display: none; }
.modal-mask { position: fixed; inset: 0; background: rgba(11, 12, 15, 0.42); }
.modal-card {
  position: relative; width: 100%; max-width: 520px;
  background: var(--surface); border-radius: var(--r-card);
  box-shadow: var(--sh-2);
}
.modal-card.wide { max-width: 780px; }
.modal-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid var(--line);
}
.modal-h h3 { margin: 0; font-size: 15px; }
.modal-b { padding: 18px; }

/* ── 模块说明页的清单 ───────────────────────────────── */

.plan { margin: 0; padding-left: 20px; font-size: 13.5px; }
.plan li { margin: 5px 0; }

/* ── 数据统计（M2.5） ────────────────────────────────────────
 *
 * ⚠️ 配色说明：PV 用宝蓝（主角），UV 用 ink-2 深灰蓝（配角）。
 *    刻意**不用 Lime 做数据色** —— #d5f94e 在浅底上的对比度只有约 1.3:1，
 *    柱子会几乎看不见；而且 Lime 是全站「唯一高亮」，拿来当大面积数据填充
 *    会把它的强调意义稀释掉（每屏 ≤2 处的纪律也守不住）。
 *    ⚠️ 两根柱子共用**同一标尺**（都由服务端按 maxPv 算好高度）：
 *    给 UV 单独放大虽然「好看」，但会让 10 个人和 500 次打开看起来一样高。
 */

.chart { display: flex; align-items: flex-end; gap: 6px; height: 176px; padding: 8px 2px 0; }
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-bar { display: block; width: 42%; max-width: 13px; border-radius: 3px 3px 0 0; }
.chart-bar.pv { background: var(--blue); }
.chart-bar.uv { background: var(--ink-2); }
.chart-x { font-size: 10px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12.5px; color: var(--ink-2); margin-top: 12px; }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legend .dot.pvbar { background: var(--blue); }
.legend .dot.uvbar { background: var(--ink-2); }

.delta { font-variant-numeric: tabular-nums; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.flat { color: var(--ink-3); }

/* 多选清单（管理员可见范围）—— 竖排，每行一个开关 */
.picklist { display: flex; flex-direction: column; gap: 8px; margin-top: 7px; }

/* ── 打印：把黑框去掉，免得导出 PDF 一片黑 ───────────── */
@media print {
  .sidebar, .topbar { display: none; }
  .card, .stat { box-shadow: none; }
}

/* ── 题库与试卷 · 分类显隐（2026-09-20）── */
.vis-cat { border: 1px solid var(--line, #e3e6ef); border-radius: 8px; margin: 0 0 10px; padding: 8px 12px; }
.vis-cat legend { padding: 0 6px; font-size: 13px; }
.vis-subs { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 2px 2px; }
.vis-sub { font-size: 13px; white-space: nowrap; }
.vis-sub input, .vis-cat legend input { vertical-align: -2px; margin-right: 4px; }

/* ── 可排序 id 芯片（2026-09-20）────────────────────────────────
   「分类排序」要运营手填 id，可页面上得先能**看见**有哪些 id 可填。
   这里把候选渲染成可点的小 chip：点一下追加进排序框。
   ⚠️ 视觉上刻意做得比主 CTA 安静（浅底、圆角细边）—— 它们不是「提交」，
   只是填表助手；做得太抢眼会把真正的「保存」按钮比下去。 */
.ord-chips { margin: 6px 0 2px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.ord-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.ord-row:last-child { margin-bottom: 0; }
.ord-label { flex: 0 0 92px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ord-chip { font: inherit; font-size: 12px; line-height: 1.6; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.ord-chip:hover { border-color: var(--indigo-2); color: var(--indigo-2); }
.ord-chip .mono { color: var(--ink); }
.ord-chips .sub { margin: 6px 0 0; }

/* ── 应用详情：对接配置信息（2026-09-20）────────────────────────
   这一块是「给开发看的说明书」，排版目标是**可扫读、可复制**：
   接口行与示例走等宽字体并允许横向滚动，参数用窄表格，
   条目之间只画一条分隔线而不是各套一张卡（套卡会套出三层边框，很吵）。
   ⚠️ 不给它上 Lime：Lime 一屏最多两处，余额留给主 CTA（见文件头纪律 1）。 */

.integ-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.integ-bar label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.integ-bar input { flex: 1 1 320px; min-width: 0; font-family: var(--mono); font-size: 13px; }

.integ-list { margin-top: 4px; }
.integ-item { border-top: 1px solid var(--line-2); padding: 16px 0 4px; }
.integ-item:first-child { border-top: none; padding-top: 10px; }

.integ-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.integ-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--blue-bg); color: var(--blue-ink);
  font-size: 11.5px; font-weight: 700;
}
.integ-title { font-size: 14px; }
.integ-head .integ-copy { margin-left: auto; }

.integ-sum { font-size: 13.5px; color: var(--ink-2); margin: 8px 0 10px; line-height: 1.7; }

.integ-ep {
  display: block; background: var(--blue-bg); color: var(--blue-ink);
  border-radius: var(--r-sm); padding: 7px 10px; font-size: 12.5px;
  word-break: break-all;
}

.integ-tbl { margin: 10px 0 4px; font-size: 12.5px; }
.integ-tbl th { font-size: 12px; }
.integ-tbl td { padding: 7px 10px; }

.integ-ret { font-size: 12.5px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.7; }
.integ-ret > span { margin-left: 6px; }

.integ-label { margin: 12px 0 4px; font-weight: 600; }
.integ-steps ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-2); line-height: 1.75; }

.integ-ex { margin: 0; max-height: 360px; overflow: auto; }

.integ-note {
  font-size: 12.5px; color: #96601a; background: var(--amber-bg);
  border-radius: var(--r-sm); padding: 8px 10px; margin: 10px 0 0; line-height: 1.7;
}

.integ-others { margin-top: 16px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.integ-others > summary { cursor: pointer; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.integ-others > summary:hover { color: var(--blue-ink); }

/* ── 题库页：已上传文件列表（默认折叠 + 分页，2026-09-20）────────
   ⚠️ `table.tbl tr[hidden]` 这条**必须显式写**：分页是靠给 <tr> 加 hidden 实现的，
      而部分浏览器里 UA 的 `tr { display: table-row }` 会盖过 `[hidden]` 默认样式 ——
      不写就可能「明明加了 hidden 却还在显示」，且只在某些浏览器上复现。 */
table.tbl tr[hidden] { display: none; }

.fl-sum { cursor: pointer; font-size: 13.5px; color: var(--blue-ink); font-weight: 600; }
.fl-sum:hover { text-decoration: underline; }

.fl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.fl-bar label { font-size: 13px; font-weight: 600; white-space: nowrap; }
.fl-bar select { width: auto; padding: 5px 8px; font-size: 12.5px; }