:root {
  --bg: #0b1020; --card: #141b2e; --card2: #1c2540; --border: #263252;
  /* 字体两套：正文/中文与数字分开。
     缘由（2026-10-16）：原先全站共用一个 zh-first 字体栈，导致数字落到
     中文字体的**西文字形**（CJK 字体的 Latin 数字是它最弱的部分）；
     数字单独用等宽数字栈 —— 字形端正、天然等宽（滚动时不跳），且与中文
     混排时中文会自动回退到后面的 CJK 字体。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* 数字专用栈：与正文同族（不用等宽字体 —— 数字用等宽容易显廉价），
     仅把 Latin 字体提到最前，确保数字不走中文字体的西文字形。
     配合 tabular-nums 保证等宽对齐、数字滚动时不跳动。 */
  --font-num: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "PingFang SC", "Noto Sans CJK SC", sans-serif;
  /* v4 大屏需要的补充令牌（别名，指向既有值，不引入新色系） */
  --sans: var(--font-sans);
  --mono: var(--font-num);
  --red-deep: #8a0f12; --orange-deep: #8a4a0d;
  --yellow-deep: #8a740a; --blue-deep2: #1d4e7e;
  --text: #eaf0fb; --muted: #93a4c4;
  /* 交互色：青（与预警蓝彻底分离） */
  --accent: #22d3ee; --accent-deep: #0891b2;
  /* 预警四色：深色底友好值（红色最亮，权重最高） */
  --red: #ff4d4f; --orange: #ff9f43; --yellow: #ffd60a; --blue: #4aa8ff;
  --green: #2ecc71; --amber: #f5a623; --blue-deep: #2d6cdf;
  /* 每色配套低透明底色（卡片内衬） */
  --red-bg: rgba(255,77,79,.10); --orange-bg: rgba(255,159,67,.10);
  --yellow-bg: rgba(255,214,10,.08); --blue-bg: rgba(74,168,255,.10);
  /* P3-5: 半透明色值变量化（替代硬编码 rgba） */
  --accent-soft: rgba(34,211,238,.12); --accent-soft-3: rgba(34,211,238,.3); --accent-faint: rgba(34,211,238,.05);
  --red-soft: rgba(255,77,79,.12); --red-soft-4: rgba(255,77,79,.4);
  --green-soft: rgba(46,204,113,.12); --green-soft-3: rgba(46,204,113,.3);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-sans); background:
  radial-gradient(1200px 600px at 15% -10%, rgba(74,168,255,.08), transparent 60%),
  radial-gradient(1000px 500px at 85% 110%, rgba(255,77,79,.06), transparent 60%),
  radial-gradient(800px 400px at 50% 50%, rgba(34,211,238,.04), transparent 60%),
  var(--bg); color:var(--text); min-height:100vh; background-attachment:fixed; }
button, input, select, textarea { transition:border-color .15s, box-shadow .15s; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  /* P3-7: 仅大幅缩短动画时长（保留淡出等关键反馈），而非全局 0.01ms 抹除 */
  *, *::before, *::after { animation-duration:.3s !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
}
.hidden { display:none !important; }

/* ── 登录页 ── */
#loginPage { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:40px 44px; width:360px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.login-box h1 { font-size:22px; text-align:center; margin-bottom:6px; }
.login-box .sub { text-align:center; color:var(--muted); font-size:13px; margin-bottom:28px; }
.field { margin-bottom:18px; }
.field label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.field input { width:100%; padding:11px 14px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:15px; outline:none; }
.field input:focus { border-color:var(--accent); }
/* ── 按钮体系：.btn 主 / .btn-lg 大 / .btn-xs 微 / .btn-s 小主 / .btn-ghost 次 / .btn-danger 危险 ── */
.btn { width:auto; padding:10px 24px; background:var(--accent); border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:filter .15s, transform .15s; }
.btn:hover { filter:brightness(1.12); } .btn:active { transform:scale(.99); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.login-box .btn { width:100%; padding:12px; font-size:15px; }
.btn-lg { padding:10px 28px; }
.login-error { color:var(--red); font-size:13px; text-align:center; margin-top:12px; min-height:18px; }

/* ── 主界面 ── */
#app { max-width:1320px; margin:0 auto; padding:16px 20px 20px; }
header { display:flex; align-items:center; justify-content:space-between; padding:10px 0 14px; border-bottom:1px solid var(--border); margin-bottom:16px; gap:12px; }
header .brand { display:flex; align-items:center; gap:12px; }
header .brand-logo { width:38px; height:38px; padding:7px; border-radius:10px; background:linear-gradient(135deg, var(--accent-deep), var(--accent)); color:#06212e; flex-shrink:0; }
header .brand-text h1 { font-size:20px; margin:0; letter-spacing:.01em; }
header .brand-sub { font-size:12px; color:var(--muted); margin-top:1px; letter-spacing:.04em; }
header .user { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px; }
header .user .logout { color:var(--muted); cursor:pointer; text-decoration:underline; }
header .user .logout:hover { color:var(--red); }
.hamburger { display:none; width:40px; height:40px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); cursor:pointer; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.hamburger:hover { border-color:var(--accent); }
.layout { display:flex; gap:16px; align-items:flex-start; }
.sidebar { width:216px; flex-shrink:0; position:sticky; top:16px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 10px; }
.sidebar-mask { display:none; }
.main { flex:1; min-width:0; }
.nav { display:block; }
.nav-group { display:block; margin-bottom:14px; }
.nav-group:last-child { margin-bottom:0; }
.nav-label { display:block; font-size:11px; color:var(--muted); opacity:.7; letter-spacing:.08em; text-transform:uppercase; padding:4px 10px 8px; }
.nav button .ic { width:16px; height:16px; flex-shrink:0; }
.nav button { display:flex; width:100%; align-items:center; gap:8px; padding:9px 12px; background:transparent; border:none; border-radius:8px; color:var(--muted); font-size:13px; cursor:pointer; text-align:left; transition:background .15s, color .15s; margin-bottom:2px; }
.nav button:hover { color:var(--text); background:rgba(255,255,255,.05); }
.nav button.active { background:rgba(34,211,238,.12); color:var(--accent); box-shadow:inset 2px 0 0 var(--accent); }
.refresh { padding:7px 14px; background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:12px; cursor:pointer; }
.refresh:hover { color:var(--text); border-color:var(--accent); }
.sidebar .refresh { width:100%; margin-top:6px; text-align:center; }
/* 抽屉头部（仅移动端显示） */
.sb-head { display:none; }
/* ── 统计卡 ── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.stat { position:relative; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px 16px 14px; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .15s, border-color .15s, box-shadow .15s; overflow:hidden; }
.stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:transparent; }
.stat.red::before { background:var(--red); } .stat.orange::before { background:var(--orange); }
.stat.yellow::before { background:var(--yellow); } .stat.blue::before { background:var(--blue); }
.stat:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.24); }
.stat:hover { border-color:var(--accent); }
.stat.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.stat .num { font-size:34px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.1; }
.stat.red { background:linear-gradient(180deg, rgba(255,77,79,.07), transparent 70%), var(--card); }
.stat.orange { background:linear-gradient(180deg, rgba(255,159,67,.06), transparent 70%), var(--card); }
.stat.yellow { background:linear-gradient(180deg, rgba(255,214,10,.05), transparent 70%), var(--card); }
.stat.blue { background:linear-gradient(180deg, rgba(74,168,255,.06), transparent 70%), var(--card); }
.stat .lbl { font-size:12px; color:var(--muted); margin-top:4px; }
.stat.red .num { color:var(--red); } .stat.orange .num { color:var(--orange); }
.stat.yellow .num { color:var(--yellow); } .stat.blue .num { color:var(--blue); }
.hist-stat { flex:0 0 auto; cursor:pointer; }
.hist-stats { display:flex; gap:8px; flex-wrap:wrap; }

/* ── 预警列表 ── */
.filter-bar { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.filter-bar select, .filter-bar input { background:var(--card); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:8px 12px; font-size:13px; outline:none; }
.alert-item { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.alert-item.sev-红 { border-left-color:var(--red); background:linear-gradient(180deg, rgba(255,77,79,.05), transparent 60%), var(--card); box-shadow:0 2px 8px rgba(0,0,0,.14), 0 0 14px rgba(255,77,79,.14); }
.alert-item.sev-橙 { border-left-color:var(--orange); background:linear-gradient(180deg, rgba(255,159,67,.04), transparent 60%), var(--card); }
.alert-item.sev-黄 { border-left-color:var(--yellow); }
.alert-item.sev-蓝 { border-left-color:var(--blue); }
.alert-item.sev-红 { border-left-color:var(--red); } .alert-item.sev-橙 { border-left-color:var(--orange); }
.alert-item.sev-黄 { border-left-color:var(--yellow); } .alert-item.sev-蓝 { border-left-color:var(--blue); }
.alert-item .head { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.alert-item .title { font-size:15px; font-weight:600; flex:1; min-width:200px; line-height:1.5; word-break:break-all; }
.badge { font-size:12px; padding:2px 8px; border-radius:6px; font-weight:600; color:#1a2233; flex-shrink:0; }
.badge.red { background:var(--red); } .badge.orange { background:var(--orange); }
.badge.yellow { background:var(--yellow); color:#333; } .badge.blue { background:var(--blue); }
.alert-item .time { font-size:12px; color:var(--muted); width:100%; }
.alert-item .desc { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.6; max-height:none; overflow:visible; }
.alert-item .desc.clamped { max-height:3.2em; overflow:hidden; position:relative; }
.alert-item .desc-toggle { display:inline-block; margin-top:6px; font-size:12px; color:var(--accent); cursor:pointer; background:none; border:none; padding:4px 8px; }
.alert-item .desc-toggle:hover { text-decoration:underline; }

/* ── 地震列表 ── */
.eq-item { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; display:flex; align-items:center; gap:14px; }
.eq-item .mag { font-size:22px; font-weight:700; color:var(--orange); min-width:60px; }
.eq-item .mag.big { color:var(--red); }
.eq-item .info { flex:1; }
.eq-item .loc { font-size:15px; font-weight:600; }
.eq-item .meta { font-size:12px; color:var(--muted); margin-top:4px; }

/* ── 报告 ── */
.rep-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.rep-card .head { display:flex; align-items:center; gap:10px; }
.rep-card .task { font-size:15px; font-weight:600; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.ok { background:var(--green); } .dot.fail { background:var(--red); }
.rep-card .time { font-size:12px; color:var(--muted); }
.rep-card .detail { font-size:13px; color:var(--muted); margin-top:6px; }

/* ── 健康 ── */
.health-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.h-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.h-card h3 { font-size:14px; margin-bottom:10px; color:var(--muted); }
.timer-row { display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--border); }
.timer-row:last-child { border-bottom:none; }
.timer-row .name { color:var(--text); }
.timer-row .next { color:var(--muted); font-size:12px; }
/* 定时任务表格 */
.tbl-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; min-width:720px; }
.tbl th { text-align:left; padding:12px 14px; font-size:12px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td { padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:middle; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:rgba(255,255,255,.02); }
.tbl .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.tbl .dot.ok { background:var(--green); } .tbl .dot.fail { background:var(--red); } .tbl .dot.run { background:var(--accent); }
.tbl .st { font-size:12px; padding:2px 8px; border-radius:6px; }
.tbl .st.on { background:var(--green-soft); color:var(--green); }
.tbl .st.off { background:var(--red-soft); color:var(--red); }
.tbl .muted { color:var(--muted); font-size:12px; }
.tbl .ops { display:flex; gap:8px; align-items:center; }
.tbl .ops .btn-xs { white-space:nowrap; }

/* ── 移动端：操作列吸底右侧常显（2026-08-26）──
 * 表格 min-width:720px 在窄屏会被横向截断，最右的「重启 timer」
 * 按钮超出屏幕不可见。让最后一列 position:sticky 吸在右侧，
 * 横向滚动时始终可见。 */
@media (max-width: 768px) {
  .tbl th:last-child, .tbl td:last-child {
    position: sticky;
    right: 0;
    background: var(--card);
    box-shadow: -10px 0 10px -10px rgba(0,0,0,.5);
    z-index: 1;
  }
  .tbl thead th:last-child { z-index: 2; }
}

.footer { text-align:center; color:var(--muted); font-size:12px; padding:30px 0 10px; }

/* ── 移动端适配 ── */
#alarmStats .stat { cursor:pointer; }

@media (max-width: 768px) {
  #app { padding:12px; }
  header { padding:8px 0 12px; margin-bottom:12px; }
  header h1 { font-size:18px; }
  /* 窄屏隐藏副标题，避免与右侧用户区挤在一起 */
  header .brand-sub { display:none; }
  header .user { gap:8px; font-size:12px; }
  .hamburger { display:flex; }
  .layout { display:block; }
  /* 侧边栏变抽屉：默认滑出屏幕，汉堡打开后滑入 */
  .sidebar { position:fixed; top:0; left:0; bottom:0; width:248px; z-index:1000; border-radius:0 12px 12px 0; padding:16px 12px; overflow-y:auto; background:var(--card); border-right:1px solid var(--border); box-shadow:0 0 40px rgba(0,0,0,.5); transform:translateX(-110%); transition:transform .22s ease; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-mask { display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; opacity:0; pointer-events:none; transition:opacity .22s ease; }
  .sidebar-mask.open { opacity:1; pointer-events:auto; }
  .main { width:100%; }
  .nav button { min-height:44px; }
  .refresh { margin-left:0; }
  /* 抽屉头部：品牌区 + 关闭按钮 */
  .sb-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 6px 12px; margin-bottom:8px; border-bottom:1px solid var(--border); }
  .sb-head-brand { display:flex; align-items:center; gap:10px; min-width:0; }
  .sb-head .brand-logo { width:32px; height:32px; padding:6px; }
  .sb-head .brand-text h1 { font-size:15px; }
  .sb-head .brand-sub { font-size:10px; }
  .sb-close { width:32px; height:32px; flex-shrink:0; background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
  .sb-close:hover { color:var(--text); border-color:var(--accent); }
  .stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .stat { padding:12px; }
  .stat .num { font-size:22px; }
  .filter-bar input[type="text"] { width:100%; }
  .alert-item { padding:12px 14px; }
  .alert-item .title { font-size:14px; min-width:0; }
  .login-box { width:92%; padding:28px 22px; }
  .footer { font-size:11px; padding:20px 0 8px; }
}
@media (max-width: 480px) {
  .stat .num { font-size:20px; }
  .alert-item .head { flex-direction:column; gap:4px; }
  .alert-item .time { font-size:12px; }
  /* 超窄屏：隐藏当前用户名，只留 帮助/退出 */
  header .user #curUser { display:none; }
  header .brand-logo { width:32px; height:32px; padding:6px; }
  header h1 { font-size:16px; }
}

[id^="tab-"] { animation:tabIn .18s ease; }
@keyframes tabIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ── 通用工具类（frontend-spec：减少内联样式） ── */
.muted { color:var(--muted); }
.muted-13 { color:var(--muted); font-size:13px; }
.muted-12 { color:var(--muted); font-size:12px; }
.muted-11 { color:var(--muted); font-size:11px; }
.tab-title { font-size:18px; margin-bottom:14px; }
.row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row-gap10 { display:flex; gap:10px; flex-wrap:wrap; }
.row-center { display:flex; align-items:center; justify-content:center; }
.w100 { width:100%; }
.w80 { width:80px; }
.flex1-130 { flex:1; min-width:130px; }
.flex1-180 { flex:1; min-width:180px; }
.accent-text { color:var(--accent); }
.red-text { color:var(--red); }
.num-lg { font-size:20px; }
.dashed-card { background:transparent; border-style:dashed; }
.hint-link { cursor:pointer; color:var(--muted); text-decoration:underline; }

.card { background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:border-color .15s, box-shadow .15s; }
.card:hover { border-color:var(--accent); box-shadow:0 4px 14px rgba(0,0,0,.22); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 18px; background:var(--card2); border-bottom:1px solid var(--border); }
.card-head .title { font-size:15px; font-weight:600; }
.card-head .sub { font-size:12px; color:var(--muted); margin-left:8px; }
.card-body { padding:14px 18px; }

.pill { display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); border:1px solid var(--accent-soft-3); color:var(--text); border-radius:16px; padding:4px 10px; font-size:13px; }
.pill-ok { display:inline-flex; align-items:center; gap:6px; background:var(--green-soft); border:1px solid var(--green-soft-3); color:var(--text); border-radius:16px; padding:4px 10px; font-size:13px; }
.pill-bad { display:inline-flex; align-items:center; gap:6px; background:var(--red-soft); border:1px solid var(--red-soft-4); color:var(--text); border-radius:16px; padding:4px 10px; font-size:13px; }
.pill .cnt { color:var(--accent); font-weight:600; }
.pill-x { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; line-height:1; padding:0 2px; }
.pill-x:hover { color:var(--red); }

.inp { background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:8px 12px; font-size:13px; outline:none; }
.inp:focus { border-color:var(--accent); }
.btn-s { background:var(--accent); border:none; border-radius:8px; color:#fff; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.btn-s:hover { filter:brightness(1.1); }
.btn-ghost { background:transparent; border:1px solid var(--border); border-radius:8px; color:var(--muted); padding:8px 16px; font-size:13px; cursor:pointer; }
.btn-ghost:hover { color:var(--text); border-color:var(--accent); }
.btn-danger { background:transparent; border:1px solid var(--red-soft-4); border-radius:8px; color:var(--red); padding:4px 12px; font-size:12px; cursor:pointer; }
.btn-danger:hover { background:var(--red-soft); }
/* 微按钮：叠加在 .btn-s/.btn-ghost 上缩小（定义在后，优先级覆盖） */
.btn-xs { padding:4px 12px; font-size:12px; }
/* 趋势切换 chip */
.trange { background:var(--card2); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:5px 12px; font-size:12px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.trange:hover { border-color:var(--accent); }
.trange.active { background:var(--accent); border-color:var(--accent); color:#fff; }

.pm-row { display:flex; align-items:center; gap:8px; padding:7px 18px; border-bottom:1px dashed var(--border); }
.pm-row:last-of-type { border-bottom:none; }
.pm-row .dist { width:90px; flex-shrink:0; text-align:right; font-size:13px; }
.pm-row .chips { flex:1; display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:30px; }
.pm-row .add { display:flex; gap:6px; flex:1; min-width:0; }
.pm-row .add .inp { flex:1; min-width:0; }
.pm-addline { display:flex; align-items:center; gap:8px; padding:10px 18px; background:var(--accent-faint); border-top:1px dashed var(--border); }
.pm-addline .inp { flex:1; min-width:0; }
.pm-addline .dist-inp { width:110px; flex-shrink:0; }

.msg-line { text-align:center; font-size:13px; min-height:20px; padding:10px 0; }
.sec { margin-bottom:14px; }
.sec-label { font-size:12px; color:var(--muted); margin-bottom:8px; }

/* ── Toast 操作反馈（优秀面板标配） ── */
#toastBox { position:fixed; top:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; max-width:340px; }
.toast { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:10px; font-size:13px; background:var(--card); border:1px solid var(--border); box-shadow:0 6px 24px rgba(0,0,0,.4); animation:toastIn .25s ease; }
.toast.ok { border-left:3px solid var(--green); } .toast.err { border-left:3px solid var(--red); } .toast.info { border-left:3px solid var(--accent); }
.toast.out { animation:toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateX(24px); } }

/* ── 顶部全局状态栏 ── */
#statusBar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 16px; margin-bottom:16px; font-size:12px; color:var(--muted); }
#statusBar .sb-item { display:flex; align-items:center; gap:6px; }
#statusBar .sb-num { font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; }
.sb-item { letter-spacing:.02em; }
#statusBar .sb-num.sb-red { color:var(--red); } #statusBar .sb-num.sb-orange { color:var(--orange); }
#statusBar .sb-num.sb-yellow { color:var(--yellow); } #statusBar .sb-num.sb-blue { color:var(--blue); }
#statusBar .sb-red { color:var(--red); } #statusBar .sb-orange { color:var(--orange); } #statusBar .sb-yellow { color:var(--yellow); } #statusBar .sb-blue { color:var(--blue); } #statusBar .sb-green { color:var(--green); }
.sb-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.sb-dot.ok { background:var(--green); box-shadow:0 0 6px var(--green); } .sb-dot.bad { background:var(--red); box-shadow:0 0 6px var(--red); } .sb-dot.warn { background:var(--orange); }

/* ── 骨架屏（替代加载中文字） ── */
.skeleton { border-radius:10px; background:linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%); background-size:200% 100%; animation:shimmer 1.2s infinite; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.sk-card { height:64px; margin-bottom:10px; } .sk-head { height:28px; width:220px; margin-bottom:14px; }

/* ── 预警时间分组标题 ── */
.group-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); margin:18px 0 10px; }
.group-title::after { content:''; flex:1; height:1px; background:var(--border); }
.group-title .cnt { font-weight:400; font-size:12px; color:var(--muted); }

/* ── 空态与提示统一 ── */
.empty { text-align:center; color:var(--muted); font-size:13px; padding:32px 0; }
.empty-ok { text-align:center; color:var(--green); font-size:14px; padding:36px 0; }
.loading { text-align:center; color:var(--muted); font-size:13px; padding:24px 0; }

/* ══════════════════════════════════════════════════
   特别关注（强化预警）— watchlist.js
   ══════════════════════════════════════════════════ */
.wl-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; margin-bottom:14px; }
.wl-bar-l { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wl-bar-r { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wl-state { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; }
.wl-state.on { color:var(--green); background:var(--green-soft); }
.wl-state.off { color:var(--muted); background:rgba(147,164,196,.10); }
.wl-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.wl-state.on .wl-dot { background:var(--green); box-shadow:0 0 0 3px var(--green-soft-3); }
.wl-state.off .wl-dot { background:var(--muted); }
.wl-hint { font-size:12px; color:var(--muted); background:var(--card2); border:1px dashed var(--border);
  border-radius:10px; padding:11px 16px; margin-bottom:14px; line-height:1.6; }
.wl-hint-info { color:var(--text-2, var(--fg)); background:rgba(88,140,255,.07);
  border-color:rgba(88,140,255,.28); border-style:solid; }
.wl-hint-info b { color:var(--fg); font-weight:600; }
.wl-toggle { padding:8px 18px; font-size:13px; }

/* 上级发布开关 */
.wl-sw { display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--fg);
  min-height:40px; padding:8px 14px; border:1px solid var(--border); border-radius:10px;
  background:var(--card2); cursor:pointer; line-height:1.45; }
.wl-sw:hover { border-color:var(--border-2, var(--border)); background:var(--card3, var(--card2)); }
.wl-sw input { width:16px; height:16px; flex-shrink:0; cursor:pointer; accent-color:var(--blue, #4d7cfe); }
.wl-sw input:focus-visible { outline:2px solid var(--focus, #4d7cfe); outline-offset:2px; }
@media (max-width:860px) {
  .wl-sw { width:100%; font-size:14px; min-height:44px; }
}

/* 新增表单 */
.wl-form { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 18px; align-items:end; }
.wl-f { display:flex; flex-direction:column; gap:7px; min-width:0; }
.wl-f-full { grid-column:1 / -1; }
.wl-f-action { grid-column:1 / -1; }
.wl-f label { font-size:12px; color:var(--muted); font-weight:500; }
.wl-f label .muted-12 { font-weight:400; }
.wl-sel, .wl-inp { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:10px 12px; font-size:14px; outline:none; font-family:inherit; }
.wl-sel:disabled { opacity:.45; cursor:not-allowed; }
.wl-sel:hover:not(:disabled), .wl-inp:hover { border-color:var(--muted); }
.wl-inp::placeholder, .wl-sel::placeholder { color:var(--muted); opacity:.85; }
.wl-chips { display:flex; gap:8px; flex-wrap:wrap; }
.wl-chip { display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--bg);
  color:var(--muted); transition:border-color .15s, color .15s, background .15s; }
.wl-chip input { position:absolute; opacity:0; width:0; height:0; }
.wl-chip:hover { color:var(--text); }
.wl-chip:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.wl-chip:has(input:checked) { color:var(--text); background:var(--card2); }
.wl-chip.lv-r:has(input:checked) { border-color:var(--red); color:var(--red); background:var(--red-bg); }
.wl-chip.lv-o:has(input:checked) { border-color:var(--orange); color:var(--orange); background:var(--orange-bg); }
.wl-chip.lv-y:has(input:checked) { border-color:var(--yellow); color:var(--yellow); background:var(--yellow-bg); }
.wl-chip.lv-b:has(input:checked) { border-color:var(--blue); color:var(--blue); background:var(--blue-bg); }
.wl-preview { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); font-size:13px; }
.wl-pv-on { color:var(--accent); font-weight:600; }

/* 关注点列表 */
.wl-list { display:flex; flex-direction:column; }
.wl-card { margin-bottom:12px; }
.wl-card.wl-off { opacity:.62; }
.wl-card-t { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
.wl-card-t .title { overflow-wrap:anywhere; }
.wl-on-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.wl-on-dot.on { background:var(--green); box-shadow:0 0 0 3px var(--green-soft-3); }
.wl-on-dot.off { background:var(--muted); }
.wl-tag { font-size:11px; font-weight:600; color:var(--accent); background:var(--accent-soft);
  padding:2px 8px; border-radius:6px; flex-shrink:0; }
.wl-meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px 20px; }
.wl-meta > div { display:flex; align-items:baseline; gap:8px; min-width:0; }
.wl-k { font-size:12px; color:var(--muted); flex-shrink:0; }
.wl-v { font-size:13px; color:var(--text); overflow-wrap:anywhere; }
.wl-v.mono { font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.3px; }

/* 运行输出 */
.wl-out { margin-top:14px; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.wl-out-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 16px; background:var(--card2); border-bottom:1px solid var(--border); font-size:13px; font-weight:600; }
.wl-pre { margin:0; padding:14px 16px; font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size:12px; line-height:1.65; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere;
  max-height:340px; overflow:auto; }
.wl-pre::selection, .wl-pre *::selection { background:var(--accent-soft-3); color:var(--text); }

/* 浏览器原生表面：滚动条与选区随主题 */
.wl-pre::-webkit-scrollbar { width:10px; height:10px; }
.wl-pre::-webkit-scrollbar-track { background:var(--bg); }
.wl-pre::-webkit-scrollbar-thumb { background:var(--border); border-radius:6px; }
.wl-pre::-webkit-scrollbar-thumb:hover { background:var(--muted); }

@media (max-width: 860px) {
  .wl-form { grid-template-columns:1fr; }
  .wl-bar { align-items:flex-start; }
  .wl-bar-r { width:100%; }
  .wl-bar-r button { flex:1 1 auto; }
  .wl-meta { grid-template-columns:1fr; }
}

/* ── 触摸目标加固（移动端 ≥36px；作用域限特别关注页，避免影响他页）── */
.wl-chip { min-height:36px; padding:8px 14px; }
.wl-card .card-head .btn-xs { min-height:36px; padding:8px 14px; }
.wl-bar-r .btn-ghost, .wl-bar-r .btn, .wl-bar-r .btn-danger { min-height:40px; }

@media (max-width: 860px) {
  /* 移动端再放宽一档，保证手指可点 */
  .wl-chip { min-height:40px; padding:10px 16px; font-size:13px; }
  .wl-card .card-head .btn-xs { min-height:40px; padding:10px 16px; font-size:13px; }
  .wl-bar-r button { min-height:44px; }
  .wl-sel, .wl-inp { padding:12px 14px; font-size:15px; }
}

/* =====================================================================
   视觉打磨层（2026-10-11）
   ---------------------------------------------------------------------
   原则：**只做覆盖，不改动上面的既有规则** —— 便于审阅与一键回滚
        （删掉本文件末尾这段即可回到原样）。
   范围：设计令牌补充、层次与阴影、按钮/表单/表格/卡片细节、
        滚动条、加载与空状态、数字对齐、响应式与可访问性。
   不涉及：信息架构、导航结构、业务逻辑、接口。
   ===================================================================== */

:root {
  /* 圆角与阴影令牌（原样式大量使用裸值，这里统一收口） */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.16);
  --sh-2: 0 4px 14px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.22);
  --sh-3: 0 12px 32px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.26);
  --ring: 0 0 0 3px rgba(34,211,238,.22);
  --ease: cubic-bezier(.16,.84,.44,1);
  /* 层次化文字（原样式只有 text/muted 两级） */
  --text-2: rgba(234,240,251,.78);
  --text-3: rgba(147,164,196,.85);
}

/* ── 全局 ── */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { scrollbar-width: thin; scrollbar-color: #2f3d61 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2f3d61; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #3d4f7d; background-clip: content-box; }

/* ── 卡片：给平面边框补上层次 ── */
.card, .panel, [class$="-card"], .stat, .stats > div {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card:hover, .panel:hover { box-shadow: var(--sh-2); }
.card, .panel { transition: box-shadow .18s var(--ease), border-color .18s var(--ease); }

/* ── 按钮 ── */
.btn, .btn-lg, .btn-s, .btn-xs, .btn-ghost, .btn-danger {
  border-radius: var(--r-md);
  transition: filter .15s var(--ease), transform .12s var(--ease),
              box-shadow .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);
}
.btn:hover, .btn-s:hover, .btn-lg:hover { box-shadow: 0 4px 14px rgba(34,211,238,.24); }
.btn-ghost:hover { background: rgba(147,164,196,.10); box-shadow: none; }
.btn-danger:hover { box-shadow: 0 4px 14px rgba(255,77,79,.24); }
.btn:active, .btn-s:active, .btn-ghost:active, .btn-danger:active { transform: translateY(1px) scale(.995); }
.btn:disabled, .btn-s:disabled, .btn-ghost:disabled { box-shadow: none; transform: none; }

/* ── 表单：统一高度与聚焦反馈 ── */
.field input, input[type="text"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  border-radius: var(--r-md);
  min-height: 38px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover,
input[type="search"]:hover, select:hover, textarea:hover { border-color: #33436b; }
.field input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  outline: none;
}
input::placeholder, textarea::placeholder { color: rgba(147,164,196,.6); }
select { cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); cursor: pointer; }

/* ── 表格：斑马纹 + 悬停，表头更稳 ── */
table { border-collapse: separate; border-spacing: 0; }
table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--card2);
  font-weight: 600; letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
}
table tbody tr { transition: background-color .12s var(--ease); }
table tbody tr:nth-child(even) { background: rgba(255,255,255,.014); }
table tbody tr:hover { background: rgba(34,211,238,.06); }
table td, table th { padding-top: 9px; padding-bottom: 9px; }

/* ── 徽标 / 药丸 ── */
.badge, .pill, .tag { border-radius: 999px; font-weight: 600; letter-spacing: .01em; }

/* ── 统计数字：等宽数字，避免跳动 ── */
.stat b, .stat .num, .stats b, .hist-stats b, .metric, [class*="stat"] b {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── 加载状态：转圈 + 骨架微光 ── */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); padding: 26px 0; }
.loading::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid rgba(147,164,196,.28);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wx-spin .7s linear infinite;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.035) 25%, rgba(255,255,255,.075) 37%, rgba(255,255,255,.035) 63%);
  background-size: 400% 100%;
  animation: wx-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes wx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 空状态 ── */
.empty, .no-data, .empty-state {
  text-align: center; color: var(--muted); padding: 40px 20px;
  border: 1px dashed var(--border); border-radius: var(--r-lg);
  background: rgba(255,255,255,.012);
}

/* ── 侧边栏 / 导航：选中态更明确 ── */
.sidebar a, .nav-item, .tab-btn, [data-tab] {
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.sidebar a:hover, .nav-item:hover, .tab-btn:hover, [data-tab]:hover { background: rgba(34,211,238,.08); }

/* ── 焦点可见性（键盘用户）── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }

/* ── 内容可读性 ── */
.tab-title { letter-spacing: .01em; }
.muted-11, .muted-12, .muted-13 { color: var(--text-3); }
a { text-underline-offset: 3px; }

/* ── 分割线更含蓄 ── */
hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── 响应式：触控目标与留白 ── */
@media (max-width: 900px) {
  #app { padding: 12px 12px 18px; }
  .btn, .btn-s, .btn-lg { min-height: 40px; }
  .btn-xs { min-height: 32px; }
  table td, table th { padding-left: 10px !important; padding-right: 10px !important; }
  header { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .login-box { width: min(360px, calc(100vw - 32px)); padding: 30px 24px; }
  .tab-title { font-size: 17px; }
}

/* ── 触屏设备：去掉 hover 造成的"粘滞高亮" ── */
@media (hover: none) {
  .card:hover, .panel:hover { box-shadow: var(--sh-1); }
  table tbody tr:hover { background: transparent; }
}

/* ══════════════════════════════════════════════════════════════════════
   配置页视觉层（2026-10-11）
   ──────────────────────────────────────────────────────────────────────
   目标：把「配置类页面」（基本配置 / 群组配置 / 负责人 / 模板 / 特别关注）
        从「窄单列 + 药丸墙」改成清晰的分区结构。
   约束：**只新增类，不修改任何既有规则**；如需回滚，删除本节即可。
   命名：cfg-*（通用配置） / atype-*（预警类型） / chc-*（群组卡片）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 页面骨架：页头 + 内容宽度 ── */
.page { max-width: 1180px; }
.page.narrow { max-width: 900px; }
.page-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.page-hd .ph-ic {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: linear-gradient(140deg, var(--accent-soft), rgba(34,211,238,0));
  border: 1px solid var(--border); box-shadow: var(--sh-1);
}
.page-hd .ph-tx { min-width: 0; }
.page-hd h2 { font-size: 19px; line-height: 1.3; margin: 0 0 5px; letter-spacing: .01em; }
.page-hd p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--muted); max-width: 76ch; }

/* ── 吸顶工具条（保存 / 展开折叠 / 状态） ── */
.cfg-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 11px;
  box-shadow: var(--sh-1);
}
.cfg-bar .cb-info { font-size: 12.5px; color: var(--muted); }
.cfg-bar .cb-info b { color: var(--accent); font-weight: 600; }
.cfg-bar .cb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-bar .cb-msg { font-size: 12.5px; min-height: 0; }

/* ── 分区标题（卡片内的分组） ── */
.cfg-sec {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px 11px; font-size: 12px; font-weight: 600;
  color: var(--muted); letter-spacing: .06em;
  border-top: 1px solid var(--border);
}
.cfg-sec:first-child { border-top: none; }
.cfg-sec::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-deep)); flex-shrink: 0;
}
.cfg-sec .cs-hint { margin-left: auto; font-weight: 400; letter-spacing: 0; color: var(--muted); opacity: .8; font-size: 11.5px; }

/* ── 字段行：左标签 / 右控件（替代内联 label 混排） ── */
.frow {
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  gap: 4px 18px; align-items: start;
  padding: 13px 18px; border-top: 1px solid var(--border);
}
.frow:first-of-type { border-top: none; }
.frow > .fl { font-size: 13px; font-weight: 600; color: var(--text); padding-top: 7px; line-height: 1.5; }
.frow > .fc { min-width: 0; }
.frow .fh { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.frow .fc-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.frow .unit { font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) {
  .frow { grid-template-columns: 1fr; gap: 8px; }
  .frow > .fl { padding-top: 0; }
}

/* ── 选项药丸组（单选 / 多选统一外观） ── */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.35;
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; user-select: none;
  transition: border-color .15s var(--ease), background-color .15s var(--ease),
              color .15s var(--ease), box-shadow .15s var(--ease);
}
.opt:hover { border-color: var(--accent-soft-3); background: color-mix(in srgb, var(--accent-faint) 60%, var(--card2)); }
.opt input { margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.opt.on, .opt:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--accent-soft-3) inset;
}
.opt.on input, .opt:has(input:checked) input { accent-color: var(--accent); }
/* 危险动作药丸（删除类） */
.opt.danger.on, .opt.danger:has(input:checked) { border-color: var(--red-soft-4); background: var(--red-soft); }
/* 级别色点 */
.opt .lv-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(0,0,0,.18); }
.opt .lv-红 { background: var(--red); } .opt .lv-橙 { background: var(--orange); }
.opt .lv-黄 { background: var(--yellow); } .opt .lv-蓝 { background: var(--blue); }

/* ── 开关行（启用类） ── */
.switch-row { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.switch-row input { margin: 2px 0 0; accent-color: var(--accent); flex-shrink: 0; width: 15px; height: 15px; }
.switch-row .sw-tx { font-size: 13px; line-height: 1.6; }
.switch-row .sw-tx .fh { margin-top: 3px; }

/* ── 输入框：与药丸同高，聚焦更明显 ── */
.cfg-inp { background: var(--bg); border: 1px solid var(--border); border-radius: 9px; color: var(--text); padding: 8px 12px; font-size: 13px; outline: none; width: 100%; max-width: 520px; }
.cfg-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-faint); }
.cfg-inp.w-sm { max-width: 130px; }
.cfg-inp.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.cfg-inp::placeholder { color: var(--muted); opacity: .65; }

/* ══ 预警类型开关：分组网格 + 组级全选 ══ */
.atype-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; padding: 14px 18px 18px; }
.atype-group { background: var(--card2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 12px; }
.atype-group.has-on { border-color: var(--accent-soft-3); background: color-mix(in srgb, var(--accent-faint) 45%, var(--card2)); }
.atype-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.atype-hd .ag-name { font-size: 12.5px; font-weight: 600; }
.atype-hd .ag-cnt { font-size: 11px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.atype-hd .ag-all {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); font-size: 11px; padding: 2px 7px; cursor: pointer;
}
.atype-hd .ag-all:hover { color: var(--accent); border-color: var(--accent-soft-3); }
.atype-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atype {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 7px; font-size: 11.5px; line-height: 1.3;
  background: var(--card); border: 1px solid var(--border); color: var(--muted); cursor: pointer;
  transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}
.atype:hover { color: var(--text); border-color: var(--accent-soft-3); }
.atype input { display: none; }
.atype .ad { width: 7px; height: 7px; border-radius: 50%; opacity: .55; flex-shrink: 0; }
.atype.on, .atype:has(input:checked) { color: var(--text); font-weight: 600; background: var(--accent-soft); border-color: var(--accent); }
.atype.on .ad, .atype:has(input:checked) .ad { opacity: 1; }
.atype .ad.红 { background: var(--red); } .atype .ad.橙 { background: var(--orange); }
.atype .ad.黄 { background: var(--yellow); } .atype .ad.蓝 { background: var(--blue); }

/* ══ 群组配置：可折叠通道卡片 ══ */
.chc { background: var(--card); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: var(--sh-1); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.chc.open { border-color: var(--accent-soft-3); box-shadow: var(--sh-2); }
.chc.off { opacity: .72; }
.chc-hd { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; background: var(--card2); }
.chc-hd:hover { background: color-mix(in srgb, var(--accent-faint) 55%, var(--card2)); }
.chc-idx {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-3);
}
.chc-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.chc-name .nm { font-size: 14.5px; font-weight: 600; }
.chc-name .cid { font-size: 11.5px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.chc-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: 4px; }
.chc-tag { font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--card); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.chc-tag.ok { color: var(--green); border-color: var(--green-soft-3); background: var(--green-soft); }
.chc-tag.bad { color: var(--red); border-color: var(--red-soft-4); background: var(--red-soft); }
.chc-tag.warn { color: var(--amber); border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.1); }
.chc-ops { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chc-caret { color: var(--muted); font-size: 12px; transition: transform .2s var(--ease); display: inline-block; }
.chc.open .chc-caret { transform: rotate(90deg); color: var(--accent); }
.chc-bd { border-top: 1px solid var(--border); }
.chc-bd.hidden { display: none; }
.chc-ops .ico-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); font-size: 11.5px; padding: 4px 9px; cursor: pointer; white-space: nowrap;
}
.chc-ops .ico-btn:hover { color: var(--text); border-color: var(--accent-soft-3); }
.chc-ops .ico-btn.danger:hover { color: var(--red); border-color: var(--red-soft-4); }
.chc-msg { font-size: 12px; min-height: 0; }

/* 继承状态带 */
.inherit-strip { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 18px; background: color-mix(in srgb, var(--accent-faint) 40%, transparent); border-bottom: 1px solid var(--border); }
.inherit-strip .plain { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* 私有 webhook 面板（配置页通用） */
.wh-panel { margin: 12px 18px; padding: 13px 15px; background: var(--card2); border: 1px dashed var(--border); border-radius: 10px; }
.wh-panel .wh-tip { font-size: 12px; color: var(--muted); margin-bottom: 9px; line-height: 1.6; }

/* 底部保存区 */
.save-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0 6px; }
.save-wrap .msg-line { text-align: center; }

@media (max-width: 720px) {
  .page-hd .ph-ic { width: 36px; height: 36px; font-size: 17px; }
  .page-hd h2 { font-size: 17px; }
  .cfg-bar { padding: 9px 11px; }
  .chc-ops .ico-btn .lbl { display: none; }
  .atype-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════
   播报大屏 · v4 样式
   来源：外部设计稿 v4 的 assets/app.css，经 tools 脚本加 `#tab-stats ` 前缀后并入，
        避免其通用选择器（.panel/.foot/.kpis/button/.empty 等）污染其他页签。
   仅作用于 #tab-stats 容器内部。
   ═══════════════════════════════════════════════════ */

#tab-stats {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
#tab-stats button { font-family: inherit; cursor: pointer; }
#tab-stats input { font-family: inherit; }
#tab-stats h1 { margin: 0; }

#tab-stats .board {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100vh;
}
#tab-stats .ambience {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(0deg, rgba(27,42,74,.4) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(27,42,74,.4) 0 1px, transparent 1px 80px),
    radial-gradient(900px 400px at 45% -6%, rgba(34,211,238,.09), transparent 62%),
    radial-gradient(1000px 460px at 92% -10%, rgba(61,109,255,.11), transparent 64%),
    radial-gradient(760px 360px at 14% 112%, rgba(8,145,178,.07), transparent 60%);
}
#tab-stats .board > * { position: relative; z-index: 1; }

#tab-stats .panel {
  background: linear-gradient(180deg, rgba(20,27,46,.92), rgba(14,21,38,.94));
  border: 1px solid #35497c;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3), 0 0 24px rgba(34,211,238,.05);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
#tab-stats .panel-hd { display: flex; align-items: center; gap: 9px; }
#tab-stats .panel-bar { width: 3px; height: 15px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(34,211,238,.55); flex: none; }
#tab-stats .panel-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .02em; }
#tab-stats .panel-sub { font-size: 10px; font-family: var(--mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-stats .panel-spring { flex: 1 1 auto; height: 6px; }
#tab-stats .empty { color: var(--text-3); font-size: 12px; padding: 20px 0; text-align: center; }

#tab-stats .topbar {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(20,27,46,.9), rgba(14,21,38,.72));
  border: 1px solid #35497c;
  border-radius: var(--r-lg);
  padding: 10px 16px;
  box-shadow: var(--sh-2), 0 0 24px rgba(34,211,238,.05);
  flex-wrap: wrap;
}
#tab-stats .tb-logo {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 0 16px rgba(34,211,238,.35);
  color: #04121a;
}
#tab-stats .tb-logo svg { width: 18px; height: 18px; }
#tab-stats .tb-name { font-size: 16px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
#tab-stats .tb-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; color: #4ade80;
  background: rgba(46,204,113,.14); border-radius: 999px; padding: 3px 9px;
}
#tab-stats .tb-live i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
#tab-stats .tb-en { display: none; }
#tab-stats .tb-spring { flex: 1 1 auto; }
#tab-stats .tb-full {
  border: 1px solid var(--border); background: rgba(28,37,64,.6); color: var(--muted);
  border-radius: var(--r-sm); padding: 6px 14px; font-size: 12px; font-weight: 600;
  transition: all .18s var(--ease);
}
#tab-stats .tb-full b { font-weight: 600; }
#tab-stats .tb-full:hover { border-color: rgba(34,211,238,.5); color: var(--accent); }
@media (min-width: 1180px) {
  #tab-stats .tb-en { display: block; font-size: 9px; font-family: var(--mono); color: var(--text-3); letter-spacing: .28em; }
}

#tab-stats .filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#tab-stats .seg {
  display: inline-flex; padding: 3px; border-radius: 9px;
  background: rgba(14,21,38,.9); border: 1px solid var(--border);
}
#tab-stats .seg-i {
  border: 0; background: transparent; color: var(--text-3);
  border-radius: 7px; padding: 5px 16px; font-size: 12px; font-weight: 600;
  transition: all .18s var(--ease);
}
#tab-stats .seg-i.on { background: var(--accent-soft); color: var(--accent); }
#tab-stats .dates { display: inline-flex; align-items: center; gap: 8px; }
#tab-stats .date-inp {
  width: 132px; height: 34px; padding: 0 10px;
  background: rgba(14,21,38,.9); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  font-family: var(--mono); font-size: 12px;
  color-scheme: dark;
}
#tab-stats .date-inp:hover { border-color: rgba(34,211,238,.45); }
#tab-stats .date-inp:focus { outline: none; border-color: rgba(34,211,238,.7); box-shadow: var(--ring); }
#tab-stats .flt-hint { font-size: 10px; color: var(--text-3); white-space: nowrap; }
#tab-stats .date-dash { color: var(--text-3); font-size: 12px; }
#tab-stats .btn-query {
  height: 34px; padding: 0 20px; border: 0; border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #04121a; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 16px rgba(34,211,238,.3);
  transition: box-shadow .18s var(--ease);
}
#tab-stats .btn-query:hover { box-shadow: 0 0 22px rgba(34,211,238,.5); }
#tab-stats .btn-query[disabled] { opacity: .65; cursor: progress; }
#tab-stats .quick { display: flex; gap: 6px; }
#tab-stats .quick button {
  height: 26px; padding: 0 10px; border-radius: 999px;
  background: rgba(28,37,64,.6); border: 1px solid var(--border);
  color: var(--text-3); font-size: 11px; transition: all .18s var(--ease);
}
#tab-stats .quick button:hover { border-color: rgba(34,211,238,.5); color: var(--accent); }
#tab-stats .flt-range { font-size: 10px; font-family: var(--mono); color: var(--text-3); white-space: nowrap; }
#tab-stats .flt-range.on { color: var(--accent); }
@keyframes flash { 0% { opacity: .25 } 100% { opacity: 1 } }
#tab-stats .flt-range.flash { animation: flash .45s var(--ease) 2; }
#tab-stats .flt-spring { flex: 1 1 auto; min-width: 8px; }
#tab-stats .pills { display: flex; gap: 8px; flex-wrap: wrap; }
#tab-stats .pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: rgba(20,27,46,.85); border: 1px solid var(--border);
  border-radius: 999px; color: var(--muted); font-size: 11px;
  transition: all .18s var(--ease);
}
#tab-stats .pill:hover { border-color: rgba(34,211,238,.45); color: var(--text); }
#tab-stats .pill.on { background: var(--accent-soft); border-color: rgba(34,211,238,.6); color: var(--accent); }
#tab-stats .pill i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
#tab-stats .pill b { font-family: var(--mono); font-size: 12px; }
#tab-stats .pill.on b { color: var(--accent); }

#tab-stats .kpis {
  display: grid; grid-template-columns: 232px repeat(5, minmax(0, 1fr)) 196px;
  align-items: stretch; gap: 16px;
  background: linear-gradient(180deg, rgba(20,27,46,.92), rgba(14,21,38,.94));
  border: 1px solid #35497c; border-radius: var(--r-lg);
  box-shadow: var(--sh-3), 0 0 24px rgba(34,211,238,.05);
  padding: 12px 20px 12px 16px;
}
#tab-stats .kpi-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; min-width: 0; }
#tab-stats .kpi-cell + .kpi-cell::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 56px; background: #1b2740;
}
#tab-stats .kpi-cell.big, #tab-stats .kpi-cell.hl { align-items: flex-start; }
#tab-stats .kpi-l { font-size: 11px; color: var(--muted); }
#tab-stats .kpi-v { display: flex; align-items: baseline; gap: 4px; font-family: var(--mono); }
#tab-stats .kpi-v b { font-size: 22px; font-weight: 700; line-height: 1.15; }
#tab-stats .kpi-v em { font-style: normal; font-size: 11px; color: var(--text-3); }
#tab-stats .kpi-cell.big .kpi-v b { font-size: 30px; color: var(--text); text-shadow: 0 0 18px rgba(34,211,238,.45); }
#tab-stats .kpi-cell.big .kpi-v em { font-size: 13px; color: var(--text); }
#tab-stats .kpi-s { font-size: 10px; color: var(--text-3); }
#tab-stats .kpi-cell.hl {
  padding: 8px 12px; border-radius: var(--r-md);
  background: rgba(255,159,67,.1); border: 1px solid rgba(255,159,67,.45);
  box-shadow: 0 0 18px rgba(255,159,67,.16);
}
#tab-stats .kpi-cell.hl .kpi-l { color: var(--orange); font-weight: 600; }
#tab-stats .kpi-cell.hl .kpi-v em { color: #c9a06b; }

#tab-stats .row-charts { display: grid; grid-template-columns: minmax(0, 1.155fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }

#tab-stats .donut-wrap { align-self: center; width: 156px; height: 156px; position: relative; flex: none; }
#tab-stats .donut { width: 156px; height: 156px; display: block; }
#tab-stats .donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#tab-stats .donut-v { font-family: var(--mono); font-size: 26px; font-weight: 700; color: var(--text); text-shadow: 0 0 16px rgba(34,211,238,.35); }
#tab-stats .donut-u { font-size: 10px; color: var(--text-3); }
#tab-stats .legend { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; justify-content: space-between; min-height: 0; }
#tab-stats .lg-row { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 8px; min-width: 0; }
#tab-stats .lg-dot { width: 7px; height: 7px; border-radius: 50%; }
#tab-stats .lg-n { font-size: 11px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tab-stats .lg-v { font-size: 11px; font-family: var(--mono); color: var(--muted); }
#tab-stats .lg-note { font-size: 10px; color: var(--text-3); }

#tab-stats .sev-chip { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,159,67,.13); font-size: 10px; font-weight: 600; color: #ffb45c; }
#tab-stats .sev-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
#tab-stats .sev-cols { display: flex; align-items: flex-end; justify-content: space-evenly; gap: 16px; flex: 1 1 auto; min-height: 0; }
#tab-stats .scol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
#tab-stats .scol-v { font-family: var(--mono); font-size: 20px; font-weight: 700; line-height: 1; }
#tab-stats .scol-bar { width: clamp(44px, 4.6vw, 64px); border-radius: 6px; box-shadow: inset 0 0 12px rgba(0,0,0,.22); transition: height .55s var(--ease); }
#tab-stats .scol-n { font-size: 11px; font-weight: 600; }
#tab-stats .scol-p { font-size: 10px; font-family: var(--mono); color: var(--text-3); }
#tab-stats .scol.c-red .scol-v, #tab-stats .scol.c-red .scol-n { color: #ff6b6d; }
#tab-stats .scol.c-orange .scol-v, #tab-stats .scol.c-orange .scol-n { color: #ffb36b; }
#tab-stats .scol.c-yellow .scol-v, #tab-stats .scol.c-yellow .scol-n { color: #ffe066; }
#tab-stats .scol.c-blue .scol-v, #tab-stats .scol.c-blue .scol-n { color: #6db6ff; }
#tab-stats .scol.c-red .scol-v { text-shadow: 0 0 14px rgba(255,77,79,.4); }
#tab-stats .scol.c-orange .scol-v { text-shadow: 0 0 16px rgba(255,159,67,.5); }
#tab-stats .scol.c-yellow .scol-v { text-shadow: 0 0 14px rgba(255,214,10,.38); }
#tab-stats .scol.c-blue .scol-v { text-shadow: 0 0 14px rgba(74,168,255,.4); }
#tab-stats .scol.c-red .scol-bar { background: linear-gradient(180deg, #ff6b6d, var(--red-deep)); box-shadow: 0 0 16px rgba(255,77,79,.22); }
#tab-stats .scol.c-orange .scol-bar { background: linear-gradient(180deg, #ffbf6b, var(--orange-deep)); box-shadow: 0 0 20px rgba(255,159,67,.3); }
#tab-stats .scol.c-yellow .scol-bar { background: linear-gradient(180deg, #ffe066, var(--yellow-deep)); box-shadow: 0 0 14px rgba(255,214,10,.22); }
#tab-stats .scol.c-blue .scol-bar { background: linear-gradient(180deg, #8bc2ff, var(--blue-deep2)); box-shadow: 0 0 14px rgba(74,168,255,.24); }
#tab-stats .sev-note { font-size: 10px; color: var(--text-3); }

#tab-stats .prov-list { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; justify-content: space-between; min-height: 0; }
#tab-stats .prow { display: grid; grid-template-columns: 60px 1fr 32px; align-items: center; gap: 8px; min-width: 0; }
#tab-stats .prow-n { font-size: 12px; color: var(--text); white-space: nowrap; }
#tab-stats .prow-t { height: 8px; border-radius: 4px; background: #1b2740; overflow: hidden; }
#tab-stats .prow-t i { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transform-origin: left center; }
#tab-stats .prow.top .prow-t i { box-shadow: 0 0 12px rgba(34,211,238,.45); }
#tab-stats .prow-v { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); text-align: right; }
#tab-stats .prow.top .prow-v { color: var(--accent); }
#tab-stats .prov-note { font-size: 10px; color: var(--text-3); }

#tab-stats .trend-wrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
#tab-stats .trend-chart { position: relative; height: 130px; flex: 1 1 auto; }
#tab-stats .trend-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#tab-stats .trend-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,180,92,.35); }
#tab-stats .trend-tag {
  position: absolute; top: 2px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  background: rgba(11,18,33,.94); border: 1px solid rgba(255,180,92,.5);
  font-family: var(--mono); font-size: 10px; font-weight: 700; color: #ffb45c; white-space: nowrap;
}
#tab-stats .trend-tag i { width: 6px; height: 6px; border-radius: 50%; background: #ffb45c; }
/* 靠右边时标签改为「向左伸展」，避免溢出图表容器 */
#tab-stats .trend-tag.flip { transform: translateX(-100%); }
#tab-stats .trend-tag[hidden] { display: none; }
#tab-stats .trend-mark[hidden] { display: none; }
#tab-stats .trend-axis { position: relative; height: 14px; flex: none; }
#tab-stats .trend-axis span { position: absolute; transform: translateX(-50%); font-size: 10px; font-family: var(--mono); color: var(--text-3); }

#tab-stats .foot {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: rgba(14,21,38,.6); padding: 9px 16px;
}
#tab-stats .foot-note { font-size: 11px; color: var(--text-3); }
#tab-stats .foot-src { font-size: 11px; font-family: var(--mono); color: var(--text-3); margin-left: auto; white-space: nowrap; }

/* ── 入场动画 ─────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#tab-stats .board.anim > * { animation: rise .55s var(--ease) both; }
#tab-stats .board.anim > *:nth-child(2) { animation-delay: .06s; }
#tab-stats .board.anim > *:nth-child(3) { animation-delay: .12s; }
#tab-stats .board.anim > *:nth-child(4) { animation-delay: .18s; }
#tab-stats .board.anim > *:nth-child(5) { animation-delay: .24s; }
#tab-stats .board.anim > *:nth-child(6) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  #tab-stats .board.anim * { animation: none !important; transition: none !important; }
}

/* ── 响应式 ───────────────────────────────────── */
@media (max-width: 1380px) { #tab-stats .kpis { grid-template-columns: 200px repeat(5, minmax(0, 1fr)) 168px; gap: 12px; } }
@media (max-width: 1180px) {
  #tab-stats .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #tab-stats .row-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  #tab-stats .board { padding: 14px; }
  #tab-stats .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #tab-stats .flt-range, #tab-stats .panel-sub { display: none; }
}


/* ═══════════════════════════════════════════════════
   嵌入产品骨架时的紧凑覆盖
   设计稿 v4 是「独立整页」设计（board 自带 20/12 padding、14px 间距、
   min-height:100vh）。但本页实际嵌在产品骨架内 —— 上方还有产品自己的
   页头（72px）与状态栏（39px），实测骨架占 159px，可用高度只剩
   841px（1600×1000），而 board 自身 1002px ⇒ 超出 161px 需要滚动。
   故在嵌入场景下收紧内边距/间距/图表尺寸，使其在常见笔记本分辨率下
   一屏装完；同时去掉 min-height:100vh（那是整页设计才需要的）。
   ═══════════════════════════════════════════════════ */
#tab-stats .board {
  min-height: 0;
  padding: 10px 16px 8px;
  gap: 9px;
}
#tab-stats .topbar { padding: 7px 14px; }
#tab-stats .filters { gap: 8px; }
#tab-stats .kpis { padding: 9px 16px 9px 14px; gap: 14px; }
#tab-stats .panel { padding: 11px 14px; gap: 7px; }
#tab-stats .foot { padding: 7px 14px; }

/* 图表尺寸：随视口高度伸缩，矮屏自动变小 */
#tab-stats .donut-wrap { width: clamp(118px, 15vh, 152px); height: clamp(118px, 15vh, 152px); }
#tab-stats .donut { width: 100%; height: 100%; }
#tab-stats .donut-v { font-size: clamp(20px, 2.4vh, 26px); }
#tab-stats .scol-bar { max-height: clamp(120px, 19vh, 220px); }
#tab-stats .trend-chart { height: clamp(84px, 13vh, 128px); }
#tab-stats .kpi-cell.big .kpi-v b { font-size: clamp(24px, 3vh, 30px); }
#tab-stats .kpi-v b { font-size: clamp(19px, 2.2vh, 22px); }

/* 全屏：隐藏产品骨架，board 铺满并略微放大 */
#tab-stats:fullscreen .board { min-height: 100vh; padding: 16px 22px 12px; gap: 12px; }
#tab-stats:fullscreen .panel { padding: 13px 16px; }
#tab-stats:fullscreen .trend-chart { height: clamp(110px, 18vh, 168px); }
#tab-stats:fullscreen .scol-bar { max-height: clamp(150px, 26vh, 280px); }
#tab-stats:fullscreen .donut-wrap { width: clamp(140px, 19vh, 180px); height: clamp(140px, 19vh, 180px); }

@media (max-height: 700px) {
  #tab-stats .board { padding: 8px 14px 6px; gap: 7px; }
  #tab-stats .filters { gap: 6px; }
}


/* ── 嵌入场景的高度收敛 ──
   v4 是「独立整页」设计，其 #tab-stats 带 min-height:100vh —— 嵌入产品骨架后
   会把容器强行撑到满屏，叠加产品页脚后总高 1236px（视口 1000px），产生滚动。
   这里去掉 100vh（仅全屏时保留），并再收一档图表尺寸，使嵌入式一屏装完。 */
#tab-stats { min-height: 0; }
body.sc-stats .footer { display: none; }
/* 嵌入式：骨架已占 159px（产品页头+状态栏），可用高度约 841px（1600×1000） */
#tab-stats .board { padding: 8px 14px 6px; gap: 8px; }
#tab-stats .topbar { padding: 6px 13px; }
#tab-stats .kpis { padding: 8px 14px 8px 12px; }
#tab-stats .panel { padding: 10px 13px; gap: 6px; }
#tab-stats .legend { gap: 0; }
#tab-stats .lg-row { line-height: 1.3; }
#tab-stats .donut-wrap { width: clamp(104px, 13vh, 134px); height: clamp(104px, 13vh, 134px); }
#tab-stats .trend-chart { height: clamp(76px, 11vh, 104px); }
#tab-stats .scol-bar { max-height: clamp(104px, 16vh, 190px); }
#tab-stats .lg-note, #tab-stats .prov-note, #tab-stats .sev-note { font-size: 9.5px; }

/* 矮屏再收一档 */
@media (max-height: 820px) {
  #tab-stats .board { padding: 6px 12px 5px; gap: 6px; }
  #tab-stats .filters { gap: 6px; }
  #tab-stats .trend-chart { height: clamp(70px, 10vh, 92px); }
  #tab-stats .donut-wrap { width: clamp(96px, 12vh, 120px); height: clamp(96px, 12vh, 120px); }
  #tab-stats .kpi-cell.big .kpi-v b { font-size: clamp(22px, 2.6vh, 27px); }
  #tab-stats .kpi-v b { font-size: clamp(17px, 2vh, 20px); }
}

/* 全屏：产品骨架隐藏，恢复整页铺满 */
#tab-stats:fullscreen { min-height: 100vh; }
#tab-stats:fullscreen .board { padding: 14px 20px 10px; gap: 11px; }
#tab-stats:fullscreen .trend-chart { height: clamp(104px, 17vh, 160px); }
#tab-stats:fullscreen .donut-wrap { width: clamp(132px, 18vh, 176px); height: clamp(132px, 18vh, 176px); }
#tab-stats:fullscreen .scol-bar { max-height: clamp(140px, 24vh, 264px); }

/* 趋势容器：避免内容顶破（此前 trend-wrap/trend-axis 报溢出） */
#tab-stats .trend-wrap { min-height: 0; }
#tab-stats .trend-axis { flex: none; }