/* ==========================================================================
   REC ADM — Design System v3
   编辑级排版 / 克制动效 / 清晰层级 / 双主题
   ========================================================================== */

:root {
  /* 中性灰阶（企业风 · Ant Design 5 色系） */
  --n-0:#ffffff; --n-25:#fcfcfc; --n-50:#fafafa; --n-100:#f5f5f5; --n-150:#f0f0f0;
  --n-200:#e8e8e8; --n-300:#d9d9d9; --n-400:#bfbfbf; --n-500:#8c8c8c;
  --n-600:#595959; --n-700:#434343; --n-800:#262626; --n-900:#141414;

  --bg:#f5f7fa; --bg-elevated:#ffffff; --surface:#ffffff; --surface-sunk:#fafafa;
  --side-bg:#eef1f5;
  --border:#e8e8e8; --border-soft:#f0f0f0; --border-strong:#d9d9d9;
  --text:#141414; --text-2:#595959; --text-3:#8c8c8c; --text-4:#a8a8a8;

  --accent:#3b82f6; --accent-hover:#2563eb; --accent-ink:#1d4ed8;
  --accent-soft:#dbeafe; --accent-soft-2:#bfdbfe;
  --accent-line:linear-gradient(90deg,#3b82f6,#60a5fa);

  --ok:#10b981; --ok-soft:#d1fae5; --warn:#f59e0b; --warn-soft:#fef3c7;
  --danger:#ef4444; --danger-soft:#fee2e2; --teal:#14b8a6; --teal-soft:#ccfbf1;
  --violet:#8b5cf6; --violet-soft:#ede9fe;

  --radius-xs:4px; --radius-sm:6px; --radius:10px; --radius-lg:14px;
  --sh-1:0 1px 3px rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.03);
  --sh-2:0 4px 12px -2px rgba(16,24,40,.06), 0 2px 6px -2px rgba(16,24,40,.04);
  --sh-3:0 12px 32px -8px rgba(16,24,40,.10);

  --side-w:224px; --top-h:56px; --page-max:1780px;
  --e-out:cubic-bezier(.4,0,.2,1); --t-fast:.12s; --t-base:.18s; --t-slow:.3s;

  --mono:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Microsoft YaHei","微软雅黑","PingFang SC","Hiragino Sans GB","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --n-0:#141414; --n-25:#191919; --n-50:#1f1f1f; --n-100:#262626; --n-150:#2c2c2c;
  --n-200:#303030; --n-300:#3a3a3a; --n-400:#525252; --n-500:#8c8c8c;
  --n-600:#a6a6a6; --n-700:#c4c4c4; --n-800:#e0e0e0; --n-900:#f0f0f0;
  --bg:#141414; --bg-elevated:#1f1f1f; --surface:#1f1f1f; --surface-sunk:#191919;
  --side-bg:#181818;
  --border:#303030; --border-soft:#262626; --border-strong:#424242;
  --text:#e8e8e8; --text-2:#a6a6a6; --text-3:#8c8c8c; --text-4:#6b6b6b;
  --accent:#4096ff; --accent-hover:#69b1ff; --accent-ink:#91caff;
  --accent-soft:#111a2c; --accent-soft-2:#15325b;
  --accent-line:linear-gradient(90deg,#4096ff,#69b1ff);
  --ok:#49aa19; --ok-soft:#162312; --warn:#d89614; --warn-soft:#2b2111;
  --danger:#d32029; --danger-soft:#2a1215; --teal:#13c2c2; --teal-soft:#112123;
  --violet:#b37feb; --violet-soft:#1a1325;
  --sh-1:0 1px 2px rgba(0,0,0,.45);
  --sh-2:0 1px 4px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
  --sh-3:0 4px 12px rgba(0,0,0,.55);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.5715;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; font-weight:620; letter-spacing:-.018em; line-height:1.25; }
a { color:var(--accent-ink); text-decoration:none; }
code,.mono { font-family:var(--mono); font-size:.95em; font-variant-numeric:tabular-nums; }
/* 数字列：用正文字体（微软雅黑）+ 表格数字，保证同宽对齐但不换字体观感 */
.num { font-family:var(--sans); font-variant-numeric:tabular-nums; }
img { max-width:100%; display:block; }
::selection { background:var(--accent-soft-2); color:var(--accent-ink); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
* { scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-track { background:transparent; }

/* 骨架 */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:var(--side-w); flex:0 0 var(--side-w); position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; background:var(--side-bg);
  border-right:1px solid var(--border); z-index:40;
}
.brand { height:var(--top-h); flex:0 0 var(--top-h); display:flex; align-items:center; gap:10px; padding:0 20px; border-bottom:1px solid var(--border); }
.brand-mark { width:24px; height:24px; flex:0 0 24px; border-radius:7px; background:var(--accent-line); position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px -2px rgba(79,70,229,.55); }
.brand-mark::after { content:""; position:absolute; inset:6px 6px auto 6px; height:2px; background:rgba(255,255,255,.9); border-radius:2px; box-shadow:0 4px 0 rgba(255,255,255,.6), 0 8px 0 rgba(255,255,255,.32); }
.brand-word { font-size:15px; font-weight:700; letter-spacing:.14em; }
.brand-word b { color:var(--text-4); font-weight:600; margin-left:2px; }

.nav { flex:1; overflow-y:auto; padding:12px 10px 16px; }
.nav-group { margin-bottom:18px; }
.nav-title { font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--text-4); padding:0 10px 8px; }
.nav-item { position:relative; display:flex; align-items:center; gap:9px; padding:5px 9px; margin-bottom:0; border-radius:var(--radius-sm); color:var(--text-2); font-size:14px; font-weight:400; transition:color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out); }
.nav-item:hover { background:var(--surface-sunk); color:var(--text); }
.nav-item:active { transform:scale(.988); }
.nav-item.on { background:var(--surface); color:var(--text); font-weight:620; }
.nav-item.on::before { content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:#141414; }
.nav-item .ico { width:17px; height:17px; flex:0 0 17px; transition:background var(--t-fast), color var(--t-fast); }
.nav-item .count { margin-left:auto; min-width:22px; height:19px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11.5px; font-weight:600; border-radius:99px; background:var(--surface-sunk); color:var(--text-3); border:1px solid var(--border-soft); }
.nav-item.on .count { background:var(--surface); color:var(--text-2); border-color:var(--border-strong); }
.nav-item .count.hot { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.sidebar-foot { padding:12px 18px 16px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--text-4); display:flex; align-items:center; gap:6px; }
.dot-live { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px var(--ok-soft); }

.content { flex:1; min-width:0; display:flex; flex-direction:column; }
/* 顶栏：不使用 backdrop-filter。
   原因：backdrop-filter 会强制该元素成为独立合成层，在 Windows + 部分 GPU/远程桌面/
   非原生分辨率下会被按低分辨率光栅化，导致顶栏内的文字整片发虚。
   而 --bg-elevated 本身是不透明纯色，毛玻璃几乎看不出来，去掉零视觉损失。 */
.topbar { position:sticky; top:0; z-index:30; height:var(--top-h); flex:0 0 var(--top-h); display:flex; align-items:center; gap:14px; padding:0 clamp(17px,2.4vw,33px); background:var(--bg-elevated); border-bottom:1px solid var(--border); }
.crumbs { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-4); min-width:0; }
.crumbs .sep { opacity:.45; }
.crumbs .cur { color:var(--text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-spacer { flex:1; }
.topbar-right { display:flex; align-items:center; gap:8px; }

.icon-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-2); cursor:pointer; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.icon-btn:hover { background:var(--surface-sunk); color:var(--text); border-color:var(--border-strong); }
.icon-btn:active { transform:scale(.94); }
.icon-btn svg { width:16px; height:16px; }

.user-chip { display:flex; align-items:center; gap:8px; padding:3px; white-space:nowrap; border:1px solid var(--border); border-radius:99px; background:var(--surface); font-size:14px; }
.user-chip .avatar { width:26px; height:26px; border-radius:50%; flex:0 0 26px; background:var(--accent-line); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; text-transform:uppercase; }
.user-chip .name { font-weight:550; padding-right:2px; }
.user-chip .logout { color:var(--text-4); font-size:13px; padding:0 9px 0 2px; white-space:nowrap; transition:color var(--t-fast); }
.user-chip .logout:hover { color:var(--danger); }

.page { width:100%; max-width:var(--page-max); margin:0 auto; padding:clamp(16px,1.8vw,26px) clamp(12px,1.5vw,22px) 56px; animation:page-in var(--t-slow) var(--e-out) both; }
@keyframes page-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.page-eyebrow { font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.page-eyebrow::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); max-width:120px; }
.page-title { font-family:var(--sans); font-size:clamp(23px,2.2vw,28px); font-weight:700; letter-spacing:-.022em; }
.page-sub { color:var(--text-3); font-size:14px; margin-top:5px; max-width:68ch; }
.page-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* ---------- 卡片 ---------- */
.card { position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--sh-1); margin-bottom:18px; overflow:hidden; transition:box-shadow var(--t-base) var(--e-out), border-color var(--t-base); }
.card:hover { box-shadow:var(--sh-2); }
.card-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); }
html[data-theme="dark"] .card-head { background:none; }
.card-head h3 { font-family:var(--sans); font-size:14.5px; font-weight:650; letter-spacing:-.01em; }
.card-head .hint { color:var(--text-4); font-size:12.5px; }
.card-head .spacer { flex:1; }
.card-body { padding:16px; }
.card-body.tight { padding:0; }
.card-foot { padding:12px 18px; border-top:1px solid var(--border-soft); background:var(--surface-sunk); }

/* ---------- KPI ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(166px,1fr)); gap:12px; margin-bottom:18px; }
.kpi { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px 15px; box-shadow:var(--sh-1); transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out), border-color var(--t-base); }
.kpi:hover { transform:translateY(-2px); box-shadow:var(--sh-2); border-color:var(--border-strong); }
.kpi .k-label { font-size:12px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--text-4); display:flex; align-items:center; gap:6px; }
.kpi .k-value { font-size:clamp(26px,2.2vw,32px); font-weight:700; letter-spacing:-.03em; margin-top:7px; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi .k-foot { color:var(--text-4); font-size:12.5px; margin-top:6px; display:flex; align-items:center; gap:5px; }
.kpi .k-foot .up { color:var(--ok); }
.kpi.accent { border-color:var(--accent-soft-2); }
.kpi.accent::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent-line); }
.kpi.accent .k-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* ---------- 统计卡（_stats.html 用）—— 整块实色 + 白字 ---------- */
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 16px; }
.stat-cards > .stat-card:nth-child(6n+1) { --h: 262; --lt: 52%; }
.stat-cards > .stat-card:nth-child(6n+2) { --h: 172; --lt: 34%; }
.stat-cards > .stat-card:nth-child(6n+3) { --h: 34;  --lt: 45%; }
.stat-cards > .stat-card:nth-child(6n+4) { --h: 291; --lt: 48%; }
.stat-cards > .stat-card:nth-child(6n+5) { --h: 199; --lt: 42%; }
.stat-cards > .stat-card:nth-child(6n+6) { --h: 340; --lt: 50%; }
.stat-card {
  --h: 262; --lt: 52%;
  position:relative; overflow:hidden;
  background:hsl(var(--h) 62% var(--lt));
  border:1px solid hsl(var(--h) 62% var(--lt));
  border-radius:var(--radius);
  padding:14px 16px 14px 18px;
  color:#fff;
  box-shadow:0 4px 14px -6px hsl(var(--h) 55% 38% / .45);
}
.stat-card::before { display:none; }
.stat-label { font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.86); }
.stat-value { font-size:26px; font-weight:700; margin-top:6px; line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:#fff; }
.stat-sub { font-size:11.5px; margin-top:4px; color:rgba(255,255,255,.74); }

/* ---------- 进度条 ---------- */
.progress { display:flex; align-items:center; gap:10px; }
.progress-bar { flex:1; height:6px; border-radius:99px; background:var(--surface-sunk); overflow:hidden; min-width:56px; }
.progress-bar > i { display:block; height:100%; border-radius:99px; background:var(--accent-line); transition:width .5s var(--e-out); }
.progress-val { font-size:12px; font-weight:600; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.progress.sm .progress-bar { height:4px; }
.progress.lg .progress-bar { height:8px; }
.progress.ok .progress-bar > i { background:linear-gradient(90deg,#10b981,#34d399); }
.progress.warn .progress-bar > i { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.progress.danger .progress-bar > i { background:linear-gradient(90deg,#ef4444,#f87171); }
.progress.violet .progress-bar > i { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x:auto; position:relative; }
/* 宽表（列多）：给足最小宽度，宁可横向滚动也不折行压字 */
table.table.table-wide { min-width:1260px; }
table.table.table-wide td, table.table.table-wide th { white-space:nowrap; }
table.table.table-wide td.wrap { white-space:normal; }
table.table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
table.table thead th { position:sticky; top:0; z-index:2; text-align:left; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0; color:var(--text); background:var(--surface-sunk); padding:11px 12px; border-bottom:1px solid var(--border-strong); white-space:nowrap; }
table.table tbody td { padding:9px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
table.table tbody tr { transition:background var(--t-fast) var(--e-out); }
table.table tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--surface-sunk) 72%, transparent); }
table.table tbody tr:hover td { background:var(--accent-soft); }
table.table tbody tr:last-child td { border-bottom:0; }
table.table td.num, table.table th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.table .nowrap { white-space:nowrap; }
/* IP 列：IPv6 有 39 字符，不限制会把整行横向撑爆、逼出横向滚动条。
   固定宽度 + 省略号，完整值走 title 悬浮提示。 */
table.table td.ip-cell { width:176px; max-width:176px; }
table.table td.ip-cell code {
  display:block; max-width:152px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; cursor:default;
}
/* 表格里过长的 code（UUID / UA / path 之类）同样收口，避免单列挤压整行 */
table.table td code:only-child {
  max-width:100%; overflow:hidden; text-overflow:ellipsis; display:inline-block;
  vertical-align:bottom;
}
table.table code { color:var(--text-2); font-size:13.5px; }
table.table tbody tr:hover code { color:var(--text); }

/* ---------- 徽标 / 标签 ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; border-radius:99px; font-size:12px; font-weight:600; background:var(--surface-sunk); color:var(--text-2); border:1px solid transparent; white-space:nowrap; }
/* 语义化胶囊标签 —— 一色一义 */
.badge.blue   { background:var(--accent-soft);  color:#1d4ed8; }
.badge.green  { background:var(--ok-soft);      color:#047857; }
.badge.amber  { background:var(--warn-soft);    color:#b45309; }
.badge.red    { background:var(--danger-soft);  color:#b91c1c; }
.badge.violet { background:var(--violet-soft);  color:#6d28d9; }
.badge.teal   { background:var(--teal-soft);    color:#0f766e; }
.badge.on { background:var(--ok-soft); color:#047857; border-color:transparent; }
.badge.off { background:var(--surface-sunk); color:var(--text-4); border-color:transparent; }
.badge.coruna { background:var(--accent-soft); color:#1d4ed8; border-color:transparent; }
.badge.darksword { background:var(--violet-soft); color:#6d28d9; border-color:transparent; }
.badge.warn, .badge.likely { background:var(--warn-soft); color:#b45309; border-color:transparent; }
.badge.danger { background:var(--danger-soft); color:var(--danger); border-color:transparent; }
.badge.done { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.badge.pending { background:var(--surface-sunk); color:var(--text-4); border-color:var(--border-soft); }
.badge.solid { background:var(--accent); color:#fff; border-color:transparent; }
.tag { display:inline-flex; align-items:center; height:22px; padding:0 7px; border-radius:var(--radius-xs); background:var(--surface-sunk); color:var(--text-2); border:1px solid var(--border-soft); font-family:var(--mono); font-size:12.5px; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
a.tag:hover { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-soft-2); }

/* ---------- 按钮 ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--text); font-size:13px; font-weight:500; font-family:inherit; cursor:pointer; transition:background var(--t-fast) var(--e-out), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); white-space:nowrap; }
.btn:hover { background:var(--surface-sunk); }
.btn:active { transform:scale(.975); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(22,119,255,.20); }
.btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }
.btn.ghost { background:transparent; border-color:transparent; color:var(--text-2); }
.btn.ghost:hover { background:var(--surface-sunk); color:var(--text); }
.btn.danger { background:var(--danger-soft); border-color:transparent; color:var(--danger); }
.btn.danger:hover { background:var(--danger); color:#fff; }
.btn.sm { height:28px; padding:0 10px; font-size:13px; border-radius:var(--radius-xs); }
.btn svg { width:15px; height:15px; }

/* ---------- 表单 ---------- */
input[type="text"],input[type="password"],input[type="search"],input[type="number"],input[type="email"],select,textarea { height:34px; padding:0 11px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font:inherit; font-size:14px; outline:none; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); max-width:100%; }
textarea { height:auto; padding:9px 11px; line-height:1.55; }
input::placeholder,textarea::placeholder { color:var(--text-4); }
input:hover,select:hover,textarea:hover { border-color:var(--n-400); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3.5px var(--accent-soft); }
select { appearance:none; padding-right:30px; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8595' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
input[type="search"] { min-width:210px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--text-3); }
.field > input,.field > select,.field > textarea { width:100%; }

/* ---------- 文本 ---------- */
.muted { color:var(--text-2); }
.small { font-size:13px; }
.pre { white-space:pre-wrap; word-break:break-word; font-family:var(--mono); font-size:13px; line-height:1.65; background:var(--surface-sunk); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:12px 14px; max-height:420px; overflow:auto; color:var(--text-2); }
.secret { font-family:var(--mono); font-size:13.5px; line-height:1.75; }
.secret-cell { max-width:420px; }
.secret-blur { cursor:pointer; color:var(--text-2); transition:color var(--t-fast); }
.secret-blur:hover { color:var(--accent-ink); }

/* ---------- 分页 ---------- */
.pager { padding:12px 18px; }
.pager ul,.pager .pagination { display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.pager li > a,.pager li > span,.pager a,.pager span { display:inline-flex; align-items:center; justify-content:center; min-width:31px; height:31px; padding:0 9px; border:1px solid var(--border); border-radius:var(--radius-xs); background:var(--surface); color:var(--text-2); font-size:13.5px; font-variant-numeric:tabular-nums; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.pager a:hover { background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-soft-2); }
.pager .active > span,.pager .active > a,.pager li.active span { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:620; }
.pager .disabled > span,.pager .disabled > a { opacity:.4; }

/* ---------- 空状态 ---------- */
.empty { padding:52px 20px; text-align:center; color:var(--text-4); }
.empty .e-ico { width:46px; height:46px; margin:0 auto 14px; border-radius:14px; background:var(--surface-sunk); border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; }
.empty .e-ico svg { width:21px; height:21px; opacity:.5; }
.empty .e-title { color:var(--text-2); font-weight:620; font-size:14.5px; margin-bottom:4px; }
.empty .e-desc { font-size:13.5px; max-width:40ch; margin:0 auto; }

/* ---------- 照片墙 ---------- */
.photo-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); }
.photo-item { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); position:relative; transition:transform var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out); }
.photo-item:hover { transform:translateY(-3px); box-shadow:var(--sh-2); }
.photo-thumb { display:block; position:relative; aspect-ratio:1/1; background:var(--surface-sunk); overflow:hidden; }
.photo-thumb img { width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--e-out); }
.photo-item:hover .photo-thumb img { transform:scale(1.045); }
.photo-scan-badge { position:absolute; top:8px; left:8px; z-index:2; backdrop-filter:blur(8px); }
.photo-meta { padding:9px 11px 11px; display:flex; flex-direction:column; gap:3px; font-size:12.5px; }
.photo-meta .m1 { display:flex; align-items:center; gap:6px; color:var(--text-2); }
.lightbox { position:fixed; inset:0; z-index:100; display:none; background:color-mix(in srgb,#06080d 92%,transparent); backdrop-filter:blur(6px); align-items:center; justify-content:center; padding:34px; }
.lightbox.open { display:flex; animation:fade-in .2s var(--e-out); }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
.lightbox img { max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:var(--sh-3); }
.lightbox .lb-close { position:absolute; top:20px; right:22px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.13); color:#fff; border:1px solid rgba(255,255,255,.16); cursor:pointer; font-size:18px; transition:background var(--t-fast), transform var(--t-fast); }
.lightbox .lb-close:hover { background:rgba(255,255,255,.24); transform:rotate(90deg); }

/* ---------- 备忘录 ---------- */
.note-list { display:flex; flex-direction:column; }
.note-row { display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--border-soft); transition:background var(--t-fast); }
.note-row:hover { background:var(--surface-sunk); }
.note-row:last-child { border-bottom:0; }
.note-dev { flex:0 0 190px; font-size:13px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; }
.note-main { flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-meta { flex:0 0 auto; display:flex; align-items:center; gap:8px; }

/* ---------- 抽屉 ---------- */
.drawer-mask { position:fixed; inset:0; z-index:60; background:rgba(11,14,20,.42); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity var(--t-base) var(--e-out); }
.drawer-mask.open { opacity:1; pointer-events:auto; }
.drawer { position:fixed; top:0; right:0; height:100vh; width:min(700px,94vw); z-index:61; background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--sh-3); transform:translateX(100%); transition:transform .3s var(--e-out); display:flex; flex-direction:column; }
.drawer.open { transform:none; }
.drawer-head { display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
.drawer-body { padding:18px; overflow:auto; flex:1; }

/* ---------- 统计 / 条形 ---------- */
.stat-row { display:flex; gap:30px; flex-wrap:wrap; }
.stat { display:flex; flex-direction:column; gap:3px; }
.stat .s-v { font-size:21px; font-weight:660; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .s-l { font-size:12.5px; color:var(--text-4); letter-spacing:.03em; }
.bar-list { display:flex; flex-direction:column; gap:11px; }
.bar-item { display:grid; grid-template-columns:92px 1fr 46px; gap:12px; align-items:center; font-size:13.5px; }
.bar-item .bar-k { color:var(--text-2); font-family:var(--mono); font-size:12.5px; }
.bar-track { display:block; height:6px; border-radius:99px; background:var(--surface-sunk); overflow:hidden; }
.bar-fill { display:block; height:100%; border-radius:99px; background:var(--accent-line); transform-origin:left center; animation:bar-grow .72s var(--e-out) both; }
@keyframes bar-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.bar-item .bar-v { text-align:right; color:var(--text-2); font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:12.5px; }
/* ---------- 登录页 ---------- */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--bg); }
.login-card { width:100%; max-width:392px; padding:34px 32px 30px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--sh-3);
  animation:card-in .5s var(--e-out) both; }
@keyframes card-in { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:none; } }
.login-card .l-brand { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.login-card h1 { font-size:22px; letter-spacing:-.03em; margin-bottom:5px; }
.login-card .l-sub { color:var(--text-4); font-size:13.5px; margin-bottom:22px; }
.login-card .field { margin-bottom:14px; }
.login-card .btn { width:100%; height:38px; margin-top:6px; }
.login-err { background:var(--danger-soft); color:var(--danger); border-radius:var(--radius-sm);
  padding:9px 12px; font-size:13.5px; margin-bottom:14px; animation:shake .32s var(--e-out); }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---------- 提示 ---------- */
.notice { display:flex; gap:9px; align-items:flex-start; background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent-soft-2); border-radius:var(--radius-sm); padding:10px 13px; font-size:13.5px; margin-bottom:14px; }
.notice.warn { background:var(--warn-soft); color:var(--warn); border-color:transparent; }

/* ---------- 动效编排 ---------- */
.stagger > * { animation:rise .46s var(--e-out) both; }
.stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s} .stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s} .stagger > *:nth-child(6){animation-delay:.22s}
@keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- 响应式 ---------- */
.nav-toggle { display:none; }
.nav-scrim { display:none; }

@media (max-width:900px) {
  :root { --side-w:72px; }
  .brand { justify-content:center; padding:0; }
  .brand-word { display:none; }
  .nav { padding:14px 10px; }
  .nav-title { display:none; }
  .nav-item { justify-content:center; padding:10px 0; }
  .nav-item > span:not(.count), .nav-item .count { display:none; }
  .sidebar-foot { justify-content:center; font-size:0; }
}
@media (max-width:860px) {
  :root { --side-w:264px; --top-h:58px; }
  .nav-toggle { display:inline-flex; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; transform:translateX(-102%);
    transition:transform .28s var(--e-out); box-shadow:var(--sh-3); }
  body.nav-open .sidebar { transform:none; }
  .nav-scrim { display:block; position:fixed; inset:0; z-index:39; background:rgba(11,14,20,.42);
    opacity:0; pointer-events:none; transition:opacity var(--t-base); }
  body.nav-open .nav-scrim { opacity:1; pointer-events:auto; }
  .brand { justify-content:flex-start; padding:0 20px; }
  .brand-word { display:flex; }
  .nav-title { display:block; }
  .nav-item { justify-content:flex-start; padding:9px 10px; }
  .nav-item > span:not(.count), .nav-item .count { display:inline-flex; }
  .sidebar-foot { justify-content:flex-start; font-size:12px; }
  .page-head { align-items:flex-start; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-2 { grid-template-columns:1fr; }
  .user-chip .name { display:none; }
  .user-chip .logout { padding:0 8px 0 2px; }
  .topbar { gap:8px; }
}
@media (max-width:560px) {
  .kpi-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi { padding:13px 14px; }
  .kpi .k-value { font-size:25px; }
  .page-actions { width:100%; }
  .page-actions .row { width:100%; }
  input[type="search"],input[type="text"] { min-width:0; flex:1 1 100%; }
  .note-dev { display:none; }
}

/* ---------- 兼容层：设备详情页等既有标记 ---------- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.board-chart-card { margin-bottom: 0; }
.board-chart-wrap { height: 260px; position: relative; }

/* 钱包监控 · TronGrid 配置卡 */
.wl-tron-cfg { margin-bottom: 16px; }
.tron-cfg-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.tron-cfg-row label {
  font-size: 13px; color: var(--text-3); font-weight: 600; min-width: 64px;
}
.tron-cfg-row input[type="password"],
.tron-cfg-row input[type="text"] {
  flex: 1 1 240px; min-width: 180px; max-width: 420px;
}
.text-danger { color: var(--danger, #ef4444); }
/* 只有一个子卡片时跨满整行，避免右侧留半屏空白 */
.grid-2 > :only-child { grid-column: 1 / -1; }
.grow { flex:1; min-width:0; }
.err { color:var(--danger); }
.ok { color:var(--ok); }
.kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(164px,1fr)); gap:12px 20px; }
.kv > div { font-size:13.5px; color:var(--text-2); }
.kv b { display:block; color:var(--text-4); font-weight:600; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; margin-bottom:2px; }
.cmd-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; align-items:end; }
.photos { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); }
.photos .photo-thumb { aspect-ratio:1/1; border-radius:var(--radius-sm); }
.apps-all { display:none; }
.apps-all.show { display:block; }

/* ---- 设备详情页整体 ---- */
.device-page { display: flex; flex-direction: column; gap: 14px; }
.device-hero { overflow: hidden; }
.device-hero .dev-source {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 18px 14px; border-top: 1px solid var(--border-soft);
  font-size: 12.5px; background: var(--surface-sunk, #f8fafc);
}
.device-hero .dev-source-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-4);
}
.device-tabs {
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 14px; padding: 6px; gap: 4px;
}
.device-tabs .tab {
  border-radius: 10px; padding: 8px 12px;
}
.device-tabs .tab.on {
  background: var(--accent, #2563eb); color: #fff;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent, #2563eb) 70%, transparent);
}
.device-tabs .tab.on b { color: inherit; opacity: .9; }
.device-panel { border-radius: 16px; }
.kv-grid-cards > div {
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface-sunk, #f8fafc); border: 1px solid var(--border-soft);
}
.photo-grid-device { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.note-list-device .note-row {
  border-radius: 12px; margin: 6px 10px; border: 1px solid var(--border-soft);
  background: var(--surface-sunk, #fafafa);
}
.social-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}
.social-card {
  border: 1px solid var(--border); border-radius: 14px; padding: 14px;
  background: var(--surface-sunk, #fafafa); display: flex; flex-direction: column; gap: 10px;
}
.social-card-top { display: flex; gap: 12px; align-items: center; }
.social-ico {
  width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff;
}
.social-ico.tg { background: linear-gradient(145deg, #2AABEE, #229ED9); }
.social-ico.wa { background: linear-gradient(145deg, #25D366, #128C7E); }
.social-flags, .social-actions, .social-times { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.event-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.event-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface-sunk, #fafafa);
}
.event-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.inj-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 900px) {
  .inj-kv { grid-template-columns: repeat(2, 1fr); }
  .event-row { grid-template-columns: 1fr; }
}

/* ---- 设备详情 · 应用 Tab（一行 4 个） ---- */
.apps-page { display: flex; flex-direction: column; gap: 18px; }
.apps-section {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface, #fff); padding: 16px 18px 14px;
}
.apps-section-wallet {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ok, #10b981) 8%, transparent), transparent 120px),
    var(--surface, #fff);
}
.apps-sec-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.apps-sec-head h3 { margin: 0; font-size: 16px; font-weight: 750; }
.apps-sec-head .muted { margin: 4px 0 0; }
.apps-count {
  min-width: 36px; height: 28px; padding: 0 10px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  background: var(--ok-soft, #d1fae5); color: var(--ok, #10b981);
}
.apps-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.apps-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-2); cursor: pointer; user-select: none;
}
.apps-search {
  min-width: 200px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface-sunk, #f8fafc);
  padding: 0 12px; font-size: 13px; color: var(--text);
}
.apps-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.apps-grid-4 { max-height: 720px; overflow: auto; padding: 2px; }
.app-card {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--border-soft); border-radius: 14px;
  padding: 12px; background: var(--surface-sunk, #fafafa);
  min-width: 0; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.app-card:hover {
  border-color: color-mix(in srgb, var(--accent, #2563eb) 35%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -14px rgba(0,0,0,.35);
}
.app-card-wallet { border-color: color-mix(in srgb, var(--ok, #10b981) 35%, var(--border)); }
.app-card.is-system { opacity: .78; }
.app-card.is-hidden { display: none !important; }
.app-ico {
  width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
  overflow: hidden; background: var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.app-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-letter {
  display: inline-flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; color: var(--text-2);
  background: linear-gradient(145deg, var(--border-soft), transparent);
}
.app-ico:has(img) .app-letter { display: none; }
.app-body { min-width: 0; flex: 1; }
.app-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.app-name {
  font-size: 13.5px; font-weight: 700; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.app-bundle {
  display: block; margin-top: 3px; font-size: 11px; color: var(--text-3);
  background: transparent; padding: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px;
  font-size: 11.5px; color: var(--text-3);
}
.app-uuid { opacity: .75; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.apps-empty { padding: 28px 12px; }
.apps-filter-hint { margin: 10px 0 0; }
html[data-theme="dark"] .apps-section,
html[data-theme="dark"] .device-tabs,
html[data-theme="dark"] .social-card,
html[data-theme="dark"] .event-row,
html[data-theme="dark"] .note-list-device .note-row { background: var(--surface); }
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .kv-grid-cards > div,
html[data-theme="dark"] .device-hero .dev-source {
  background: color-mix(in srgb, var(--surface) 88%, #000);
}
@media (max-width: 1200px) {
  .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .apps-grid { grid-template-columns: 1fr; }
  .apps-search { min-width: 0; width: 100%; }
}
.card.wallet-group { border-left:3px solid var(--accent); }
.note-list-tg { display:flex; flex-direction:column; }
.note-row-tg { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:14px; }
.note-row-tg:last-child { border-bottom:0; }
.note-row-device { flex:0 0 182px; font-size:13px; }
.note-row-main { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-row-meta { display:flex; align-items:center; gap:8px; }
.note-detail-block p { margin:0 0 8px; }
.note-detail-body { max-height:52vh; }
.jk { color:#722ed1; } .js { color:#13c2c2; } .jn { color:#d46b08; } .jl { color:#cf1322; }
html[data-theme="dark"] .jk { color:#b794ff; } html[data-theme="dark"] .js { color:#4fd1c5; }
.swal-json { max-height:56vh; overflow:auto; text-align:left; font-size:13px; }
.promo-url { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; font-size:12.5px; }
.promo-url-wrap { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.promo-link-col { min-width:260px; max-width:520px; }
.promo-link-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.promo-link-actions .btn.on {
  color: var(--accent-ink, var(--accent));
  background: var(--accent-soft);
  border-color: transparent;
}
.promo-iframe-wrap {
  margin-top:10px; padding:10px 12px; border-radius:var(--radius-sm, 8px);
  background:var(--surface-sunk); border:1px solid var(--border-soft);
}
.promo-iframe-snippet {
  display:block; font-size:12px; color:var(--text-3); word-break:break-all;
  line-height:1.55; max-height:96px; overflow:auto;
}
.tg-inline-form { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tg-inline-form input { max-width:232px; }
.tg-inline-form input[name="tg_chat_id"] { max-width:148px; }
table.t { width:100%; border-collapse:collapse; font-size:14px; }
table.t td, table.t th { padding:7px 9px; border-bottom:1px solid var(--border-soft); }
/* ==========================================================================
   22. 设备详情页组件
   ========================================================================== */
.hero { padding: 0; }
.hero-top { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; flex-wrap: wrap; }
.hero-uuid { font-size: 12.5px; color: var(--text-2); letter-spacing: -.01em; }
.hero .badge.on .dot-live { width: 5px; height: 5px; box-shadow: none; background: currentColor; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px; margin-top: 16px; background: var(--border-soft); border-top: 1px solid var(--border-soft); }
.st { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--surface); transition: background var(--t-fast); }
.st:hover { background: var(--surface-sunk); }
.st-v { font-size: 18px; font-weight: 660; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.st-l { font-size: 11px; color: var(--text-4); letter-spacing: .05em; text-transform: uppercase; }
.st.hot .st-v { color: var(--ok); }

/* 标签页：同上，去掉 backdrop-filter 与半透明背景，避免整条 tabs 文字发虚 */
.tabs {
  position: sticky; top: var(--top-h); z-index: 20;
  display: flex; gap: 2px; overflow-x: auto; margin: 0 0 18px; padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--sh-1); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-xs); white-space: nowrap;
  font-size: 13px; font-weight: 500; color: var(--text-3);
  transition: color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--text); background: var(--surface-sunk); }
.tab b {
  font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums;
  color: #059669; font-size: 12.5px; letter-spacing: -0.01em;
}
.tab.on b { color: #047857; }
.tab b:empty { display: none; }
.tab.on { color: var(--accent-ink); background: var(--accent-soft); font-weight: 620; }
.tab-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); }

/* 定义列表 */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 24px; margin: 0; }
.kv-grid > div { min-width: 0; }
.kv-grid dt { font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); margin-bottom: 3px; }
.kv-grid dd { margin: 0; font-size: 13px; color: var(--text); word-break: break-all; }
.kv-grid dd code { font-size: 12px; color: var(--text-2); }

/* 折叠块 */
details.fold { margin-top: 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunk); }
details.fold > summary {
  cursor: pointer; list-style: none; padding: 9px 13px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 550; color: var(--text-2);
  transition: background var(--t-fast);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: ""; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(0deg); transition: transform var(--t-fast) var(--e-out); opacity: .55;
}
details.fold[open] > summary::before { transform: rotate(90deg); }
details.fold > summary:hover { background: var(--border-soft); }
details.fold .table-wrap, details.fold .pre { background: var(--surface); border-top: 1px solid var(--border-soft); }
details.fold .pre { margin: 0; border: 0; border-radius: 0; }

/* 密钥保险库 */
.vault-card .vault-avatar {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; font-weight: 700;
}
.vault {
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface-sunk); padding: 12px 14px; margin-bottom: 12px;
}
.secret-line { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; }
.secret-line + .secret-line { border-top: 1px dashed var(--border); margin-top: 5px; padding-top: 8px; }
.sl-k { flex: 0 0 52px; font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-4); }
.sl-v { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.7; color: var(--text); word-break: break-word; }
.secret-meta { margin-top: 8px; font-size: 11px; color: var(--text-4); font-family: var(--mono); letter-spacing: -.01em; }
.inline-note {
  margin: 8px 0 4px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--warn); font-size: 12px; line-height: 1.6;
}
/* ---------- 23. 筛选条 ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 18px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-1);
}
.filter-bar input[type="search"] { flex: 1 1 220px; min-width: 0; }
.filter-bar select { flex: 0 0 auto; min-width: 120px; }
.filter-bar .btn { flex: 0 0 auto; }
/* ---------- 24. 登录页：记住我 ---------- */
.login-card .remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-3); margin: 2px 0 14px; cursor: pointer;
  user-select: none;
}
.login-card .remember input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0;
}
.login-card .login-tip {
  margin-top: 14px; font-size: 11.5px; line-height: 1.7; color: var(--text-4);
  border-top: 1px solid var(--border-soft); padding-top: 12px;
}
.login-card .login-tip b { color: var(--text-2); font-weight: 600; }
/* ==========================================================================
   25. 语义色系统 —— 小面积上色，大面积保持中性
   ========================================================================== */

/* ---------- 25.1 KPI 六色（整块实色 + 白字） ---------- */
.kpi { --h: 262; --lt: 52%; --k: hsl(var(--h) 80% 54%); }
.kpi-grid > .kpi:nth-child(6n+1) { --h: 262; --lt: 52%; }   /* 靛蓝 · 设备 */
.kpi-grid > .kpi:nth-child(6n+2) { --h: 172; --lt: 34%; }   /* 青绿 · 事件 */
.kpi-grid > .kpi:nth-child(6n+3) { --h: 34;  --lt: 45%; }   /* 琥珀 · 钱包 */
.kpi-grid > .kpi:nth-child(6n+4) { --h: 291; --lt: 48%; }   /* 紫罗兰 · 密钥 */
.kpi-grid > .kpi:nth-child(6n+5) { --h: 199; --lt: 42%; }   /* 天蓝 · 照片 */
.kpi-grid > .kpi:nth-child(6n+6) { --h: 340; --lt: 50%; }   /* 玫红 · 备忘录 */

/* 卡片本体：整块实色 + 白字 */
.kpi {
  background: hsl(var(--h) 62% var(--lt));
  border-color: hsl(var(--h) 62% var(--lt));
  color: #fff;
  box-shadow: 0 4px 14px -6px hsl(var(--h) 55% 38% / .45);
}
.kpi .k-label { color: rgba(255,255,255,.86); }
.kpi .k-label .k-dot,
.kpi .k-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px;
  background: rgba(255,255,255,.92); box-shadow: none;
}
.kpi .k-label:has(.k-dot)::before { display: none; }
.kpi .k-value { color: #fff; }
.kpi .k-foot { color: rgba(255,255,255,.74); }
.kpi .k-value small, .kpi .k-value .unit { color: rgba(255,255,255,.78); }
/* 整块统一色：不再叠加任何条纹/色条 */
.kpi::before { display:none; }
.kpi.accent { border-color: hsl(var(--h) 62% var(--lt)); }
.kpi:hover {
  border-color: hsl(var(--h) 62% var(--lt));
  box-shadow: 0 8px 22px -8px hsl(var(--h) 55% 34% / .58);
}

html[data-theme="dark"] .kpi {
  background: hsl(var(--h) 55% calc(var(--lt) - 6%));
  border-color: hsl(var(--h) 55% calc(var(--lt) - 6%));
  color: #fff;
}
html[data-theme="dark"] .kpi .k-label { color: rgba(255,255,255,.84); }
html[data-theme="dark"] .kpi .k-value { color: #fff; }
html[data-theme="dark"] .kpi .k-foot { color: rgba(255,255,255,.72); }
html[data-theme="dark"] .kpi::before { background: rgba(255,255,255,.26); }
html[data-theme="dark"] .kpi:hover { border-color: hsl(var(--h) 55% calc(var(--lt) - 6%)); box-shadow:0 8px 22px -8px rgba(0,0,0,.65); }
html[data-theme="dark"] .stat-card {
  background: hsl(var(--h) 55% calc(var(--lt) - 6%));
  border-color: hsl(var(--h) 55% calc(var(--lt) - 6%));
  color:#fff;
}
html[data-theme="dark"] .stat-card::before { background: rgba(255,255,255,.26); }
html[data-theme="dark"] .stat-label { color: rgba(255,255,255,.84); }
html[data-theme="dark"] .stat-value { color: #fff; }
html[data-theme="dark"] .stat-sub { color: rgba(255,255,255,.72); }

/* ---------- 25.2 条形图六色 ---------- */
.bar-list > .bar-item .bar-fill { background: linear-gradient(90deg, hsl(262 80% 58%), hsl(262 80% 70%)); }
.bar-list > .bar-item:nth-child(6n+2) .bar-fill { background: linear-gradient(90deg, hsl(172 72% 38%), hsl(172 72% 56%)); }
.bar-list > .bar-item:nth-child(6n+3) .bar-fill { background: linear-gradient(90deg, hsl(34 86% 48%), hsl(34 86% 62%)); }
.bar-list > .bar-item:nth-child(6n+4) .bar-fill { background: linear-gradient(90deg, hsl(291 66% 52%), hsl(291 66% 68%)); }
.bar-list > .bar-item:nth-child(6n+5) .bar-fill { background: linear-gradient(90deg, hsl(199 82% 44%), hsl(199 82% 60%)); }
.bar-list > .bar-item:nth-child(6n+6) .bar-fill { background: linear-gradient(90deg, hsl(340 76% 52%), hsl(340 76% 68%)); }

/* ---------- 25.3 平台 / 设备徽标 ---------- */
.badge.win     { background:#dbeafe; color:#1d4ed8; border-color: transparent; }
.badge.mac     { background:#f1f5f9; color:#475569; border-color: transparent; }
.badge.android { background:#d1fae5; color:#047857; border-color: transparent; }
.badge.ios     { background:#e0f2fe; color:#0369a1; border-color: transparent; }
.badge.linux   { background:#fef3c7; color:#b45309; border-color: transparent; }
.badge.bot     { background: hsl(0 72% 94%);   color: hsl(0 62% 42%);   border-color: transparent; }
.badge.desktop { background: hsl(262 60% 94%); color: hsl(262 52% 42%); border-color: transparent; }
.badge.mobile  { background: hsl(172 55% 92%); color: hsl(172 60% 28%); border-color: transparent; }
.badge.tablet  { background: hsl(291 55% 94%); color: hsl(291 48% 42%); border-color: transparent; }

html[data-theme="dark"] .badge.win     { background: hsl(212 50% 20%); color: hsl(212 85% 76%); }
html[data-theme="dark"] .badge.mac     { background: hsl(240 10% 22%); color: hsl(240 12% 78%); }
html[data-theme="dark"] .badge.android { background: hsl(140 40% 16%); color: hsl(140 65% 70%); }
html[data-theme="dark"] .badge.ios     { background: hsl(200 50% 18%); color: hsl(200 85% 74%); }
html[data-theme="dark"] .badge.linux   { background: hsl(32 45% 18%);  color: hsl(32 85% 70%); }
html[data-theme="dark"] .badge.bot     { background: hsl(0 40% 20%);   color: hsl(0 75% 76%); }
html[data-theme="dark"] .badge.desktop { background: hsl(262 35% 22%); color: hsl(262 80% 80%); }
html[data-theme="dark"] .badge.mobile  { background: hsl(172 40% 16%); color: hsl(172 70% 72%); }
html[data-theme="dark"] .badge.tablet  { background: hsl(291 32% 22%); color: hsl(291 70% 80%); }

/* ---------- 25.4 状态码 ---------- */
.s2 { color: hsl(152 62% 32%); font-weight: 600; }
.s3 { color: hsl(212 70% 42%); font-weight: 600; }
.s4 { color: hsl(34 88% 38%);  font-weight: 600; }
.s5 { color: hsl(0 68% 46%);   font-weight: 600; }
html[data-theme="dark"] .s2 { color: hsl(152 60% 62%); }
html[data-theme="dark"] .s3 { color: hsl(212 80% 70%); }
html[data-theme="dark"] .s4 { color: hsl(34 90% 66%); }
html[data-theme="dark"] .s5 { color: hsl(0 75% 70%); }

/* ---------- 25.5 通道路由标签 ---------- */
.tag[data-ch] { font-weight: 600; }
.tag[data-ch="event"] { background: hsl(262 70% 94%); color: hsl(262 55% 40%); border-color: transparent; }
.tag[data-ch="t"]     { background: hsl(199 80% 93%); color: hsl(199 65% 34%); border-color: transparent; }
.tag[data-ch="us"]    { background: hsl(172 60% 92%); color: hsl(172 55% 28%); border-color: transparent; }
.tag[data-ch="ub"]    { background: hsl(291 55% 94%); color: hsl(291 45% 42%); border-color: transparent; }
.tag[data-ch="a"]     { background: hsl(34 85% 92%);  color: hsl(30 70% 34%);  border-color: transparent; }
.tag[data-ch="u"]     { background: hsl(340 65% 94%); color: hsl(340 55% 40%); border-color: transparent; }
.tag[data-ch^="tg"]   { background: hsl(200 85% 93%); color: hsl(200 70% 34%); border-color: transparent; }
.tag[data-ch^="wp"]   { background: hsl(140 50% 92%); color: hsl(140 50% 30%); border-color: transparent; }
html[data-theme="dark"] .tag[data-ch="event"] { background: hsl(262 40% 22%); color: hsl(262 80% 82%); }
html[data-theme="dark"] .tag[data-ch="t"]     { background: hsl(199 40% 20%); color: hsl(199 80% 78%); }
html[data-theme="dark"] .tag[data-ch="us"]    { background: hsl(172 35% 18%); color: hsl(172 70% 74%); }
html[data-theme="dark"] .tag[data-ch="ub"]    { background: hsl(291 32% 22%); color: hsl(291 72% 82%); }
html[data-theme="dark"] .tag[data-ch="a"]     { background: hsl(34 40% 20%);  color: hsl(34 85% 74%); }
html[data-theme="dark"] .tag[data-ch="u"]     { background: hsl(340 32% 22%); color: hsl(340 75% 82%); }
html[data-theme="dark"] .tag[data-ch^="tg"]   { background: hsl(200 40% 20%); color: hsl(200 82% 78%); }
html[data-theme="dark"] .tag[data-ch^="wp"]   { background: hsl(140 30% 16%); color: hsl(140 60% 74%); }

/* ---------- 25.6 侧栏图标 —— 实心图标 + 统一灰阶底块 ---------- */
.nav-item { position:relative; }
.nav-item .ico {
  width:14px; height:14px; flex:0 0 auto; padding:4px; box-sizing:content-box;
  border-radius:7px; background:#dde1e6; color:#3d3d3d;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.nav-item:hover .ico { transform:scale(1.06); background:#cfd4da; color:#141414; }
/* 六个分组统一灰度，不再用彩色区分 */
.nav-group:nth-child(1) .nav-item .ico,
.nav-group:nth-child(2) .nav-item .ico,
.nav-group:nth-child(3) .nav-item .ico,
.nav-group:nth-child(4) .nav-item .ico,
.nav-group:nth-child(5) .nav-item .ico,
.nav-group:nth-child(6) .nav-item .ico { background:#dde1e6; color:#3d3d3d; }

/* 选中态：白底浮起 + 左侧深色竖条 + 图标反白 */
.nav-item.on {
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  box-shadow:0 1px 3px rgba(16,24,40,.08), inset 0 0 0 1px var(--border-soft);
}
.nav-item.on::before {
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:18px; border-radius:0 3px 3px 0; background:#141414;
}
.nav-item.on .ico { background:#141414; color:#ffffff; }

/* 深色主题下的灰阶图标 */
html[data-theme="dark"] .nav-item .ico,
html[data-theme="dark"] .nav-group:nth-child(1) .nav-item .ico,
html[data-theme="dark"] .nav-group:nth-child(2) .nav-item .ico,
html[data-theme="dark"] .nav-group:nth-child(3) .nav-item .ico,
html[data-theme="dark"] .nav-group:nth-child(4) .nav-item .ico,
html[data-theme="dark"] .nav-group:nth-child(5) .nav-item .ico,
html[data-theme="dark"] .nav-group:nth-child(6) .nav-item .ico { background:#2c2c2c; color:#b8b8b8; }
html[data-theme="dark"] .nav-item:hover .ico { background:#3a3a3a; color:#e8e8e8; }
html[data-theme="dark"] .nav-item.on::before { background:#e8e8e8; }
html[data-theme="dark"] .nav-item.on .ico { background:#e8e8e8; color:#141414; }

/* 分组标题：更清晰的分隔 */
.nav-title {
  font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-4); padding:0 9px 5px; margin-top:0;
}
.nav-group { margin-bottom:9px; }
.nav-group + .nav-group { padding-top:9px; border-top:1px solid var(--border-soft); }
/* 菜单项：比原始 5px 只松一点点，避免整体拉高后一屏放不下 */
.nav-item { padding:6px 10px; }
.nav-item + .nav-item { margin-top:1px; }
.nav-item .count {
  min-width:22px; height:19px; padding:0 6px; font-size:11.5px;
  /* 数字统一用正文字体（微软雅黑）+ 绿色高亮，和表格数字口径一致 */
  font-family:var(--sans); font-weight:700;
  color:#059669; background:var(--ok-soft); border-color:transparent;
}
.nav-item.on .count { color:#059669; background:var(--ok-soft); border-color:transparent; }
.nav-item .count.hot { color:var(--danger); background:var(--danger-soft); border-color:transparent; }

.page-eyebrow { background:none; -webkit-text-fill-color:currentColor; color:var(--text-3); }
.page-eyebrow::after { background:linear-gradient(90deg,var(--border),transparent); }

/* ---------- 25.7 设备页统计条着色 ---------- */
.stat-strip > .st:nth-child(8n+1) .st-v { color: hsl(262 60% 40%); }
.stat-strip > .st:nth-child(8n+2) .st-v { color: hsl(34 75% 40%); }
.stat-strip > .st:nth-child(8n+3) .st-v { color: hsl(291 50% 46%); }
.stat-strip > .st:nth-child(8n+4) .st-v { color: hsl(199 70% 38%); }
.stat-strip > .st:nth-child(8n+5) .st-v { color: hsl(340 60% 46%); }
.stat-strip > .st:nth-child(8n+6) .st-v { color: hsl(200 75% 38%); }
.stat-strip > .st:nth-child(8n+7) .st-v { color: hsl(140 55% 32%); }
.stat-strip > .st:nth-child(8n+8) .st-v { color: hsl(0 55% 46%); }
html[data-theme="dark"] .stat-strip > .st .st-v { filter: brightness(1.45) saturate(1.1); }

/* ---------- 25.8 钱包品牌色标 ---------- */
.vault-card .vault-avatar { background: hsl(262 80% 94%); color: hsl(262 60% 40%); }
.vault-card:nth-of-type(6n+1) .vault-avatar { background: hsl(262 80% 94%); color: hsl(262 60% 40%); }
.vault-card:nth-of-type(6n+2) .vault-avatar { background: hsl(34 88% 92%);  color: hsl(30 72% 34%); }
.vault-card:nth-of-type(6n+3) .vault-avatar { background: hsl(172 55% 90%); color: hsl(172 58% 26%); }
.vault-card:nth-of-type(6n+4) .vault-avatar { background: hsl(291 60% 94%); color: hsl(291 48% 42%); }
.vault-card:nth-of-type(6n+5) .vault-avatar { background: hsl(199 80% 93%); color: hsl(199 65% 32%); }
.vault-card:nth-of-type(6n+6) .vault-avatar { background: hsl(340 65% 94%); color: hsl(340 55% 42%); }
html[data-theme="dark"] .vault-card:nth-of-type(6n+1) .vault-avatar { background: hsl(262 40% 22%); color: hsl(262 85% 82%); }
html[data-theme="dark"] .vault-card:nth-of-type(6n+2) .vault-avatar { background: hsl(34 40% 20%);  color: hsl(34 85% 76%); }
html[data-theme="dark"] .vault-card:nth-of-type(6n+3) .vault-avatar { background: hsl(172 35% 18%); color: hsl(172 70% 76%); }
html[data-theme="dark"] .vault-card:nth-of-type(6n+4) .vault-avatar { background: hsl(291 32% 22%); color: hsl(291 72% 84%); }
html[data-theme="dark"] .vault-card:nth-of-type(6n+5) .vault-avatar { background: hsl(199 40% 20%); color: hsl(199 82% 80%); }
html[data-theme="dark"] .vault-card:nth-of-type(6n+6) .vault-avatar { background: hsl(340 32% 22%); color: hsl(340 75% 84%); }

/* 密钥行左侧彩条 */
.secret-line { border-left: 2px solid hsl(291 60% 78%); padding-left: 10px; }
.secret-line:nth-child(2) { border-left-color: hsl(172 55% 62%); }

/* ---------- 25.9 表格首列彩色圆点 ---------- */
.table tbody td:first-child .dot-mark {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px;
}
/* ---------- 26. KPI 口径说明 ---------- */
.kpi-note {
  margin: -4px 2px 18px; font-size: 11.5px; line-height: 1.7; color: var(--text-4);
  display: block; position: relative; padding-left: 21px;
}
.kpi-note b { color: var(--text-2); font-weight: 620; }
.kpi-note::before {
  content: "i"; position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: hsl(212 70% 94%); color: hsl(212 62% 44%);
  font-size: 10px; font-weight: 700; font-style: italic; line-height: 14px; text-align: center;
}
html[data-theme="dark"] .kpi-note::before { background: hsl(212 45% 20%); color: hsl(212 80% 76%); }
/* ---------- 27. 访客设备 ---------- */
.filter-bar .chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-3); cursor: pointer; user-select: none;
}
.filter-bar .chk input { accent-color: var(--accent); margin: 0; }
.bar-v em.dim { font-style: normal; color: var(--text-4); font-size: .9em; }
.table em.dim { font-style: normal; color: var(--text-4); }
/* 访客页：条形数值不换行 */
.bar-list .bar-v { white-space: nowrap; }
.bar-list .bar-item { grid-template-columns: 96px 1fr auto; }

/* ---------- 28. 投放范围条 ---------- */
.scope-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 9px 14px;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); font-size: 12.5px;
}
.scope-bar .scope-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: hsl(172 55% 32%); background: hsl(172 60% 92%);
  padding: 3px 7px; border-radius: 6px;
}
html[data-theme="dark"] .scope-bar .scope-tag { color: hsl(172 70% 76%); background: hsl(172 35% 18%); }
.scope-bar .btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }


/* ---------- 29. 品牌：迅游资产再分配系统（单行） ---------- */
/* 折叠窄栏模式：只留图标，居中 */
@media (max-width:900px) {
  .brand { justify-content: center; padding: 0; gap: 0; }
  .brand-name { display: none; }
}

.brand {
  display: flex; align-items: center; gap: 9px;
  height: var(--top-h); flex: 0 0 var(--top-h);
  padding: 0 16px; overflow: hidden;
}
.brand-logo {
  display: block;
  width: 28px; height: 28px;
  min-width: 28px; max-width: 28px;
  min-height: 28px; max-height: 28px;
  flex: 0 0 28px; object-fit: contain;
}
.brand-name {
  font-size: 15px; font-weight: 700; color: var(--text);
  letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}

/* 登录页 */
.l-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 26px; overflow: hidden;
}
.l-brand .brand-logo {
  width: 26px; height: 26px; min-width: 26px; max-width: 26px;
  min-height: 26px; max-height: 26px; flex: 0 0 26px; object-fit: contain;
}
.l-brand-name {
  font-size: 16px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ---------- 地址全显 + 复制 ---------- */
.addr-cell { display:flex; align-items:center; gap:6px; min-width:0; }
.addr-full {
  font-family:var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size:12.5px; letter-spacing:.01em; white-space:nowrap;
  overflow:hidden; text-overflow:clip; max-width:min(46vw,520px);
  color:var(--text-2);
}
.btn-mini {
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; border-radius:6px;
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-4); cursor:pointer; transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast);
}
.btn-mini:hover { color:var(--accent-ink); border-color:var(--accent-soft-2); background:var(--accent-soft); }
.btn-mini:active { transform:translateY(1px); }

/* 投放嵌入代码块 */
.iframe-code {
  margin: 0;
  padding: 10px 12px;
  background: #f6f8fa;
  border: 1px solid var(--line, #e5e9f0);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-all;
  color: #24292f;
  max-height: 220px;
  overflow: auto;
}
[data-theme="dark"] .iframe-code {
  background: #161b22;
  border-color: #30363d;
  color: #c9d1d9;
}
/* ---------------------------------------------------------------
   渠道模块 v2（归集口径）：比例条 / 金额 / 状态 pill / 页头
   --------------------------------------------------------------- */
.rate-bar{display:flex;align-items:center;gap:8px;min-width:132px}
.rate-bar .track{flex:1;height:7px;border-radius:999px;background:var(--surface-sunk);overflow:hidden;display:flex}
.rate-bar .track i{display:block;height:100%}
.rate-bar .fill-ch{background:linear-gradient(90deg,var(--accent),#60a5fa)}
.rate-bar .fill-pf{background:color-mix(in srgb,var(--text-3) 38%,transparent)}
.rate-bar .val{font-size:12px;color:var(--text-2);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.rate-bar .val .dim{color:var(--text-4);font-weight:500}

/* 金额：默认深色加粗，零值稍淡但仍清晰，正值上色 */
.money{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--text);
  font-family:var(--sans);letter-spacing:0}
/* 单位标签固定最小宽度并右对齐收口：否则每行按内容自适应，
   右对齐后数字会左右浮动，看起来"歪" */
.money .u{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  color:var(--text-2);margin-left:5px;letter-spacing:.01em;vertical-align:1px;
  min-width:64px;justify-content:flex-end}
.money .coin{width:15px;height:15px;flex:0 0 15px;display:block}
.money.is-zero{color:var(--text-2);font-weight:600}
.money.is-zero .u{color:var(--text-2)}
.money.is-zero .coin{opacity:.9}
.money.is-pos{color:var(--warn);font-weight:700}
.money.is-pos.ok{color:var(--ok)}
.money.is-pos.bad{color:var(--danger)}

/* 币种标签：图标 + 名称，用于表格里的币种列 */
.coin-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 6px;
  border-radius:999px;background:var(--surface-sunk);border:1px solid var(--border-soft);
  font-size:12px;font-weight:600;color:var(--text-2);white-space:nowrap;letter-spacing:.01em}
.coin-tag .coin{width:14px;height:14px;flex:0 0 14px;display:block}

/* ---------- 来源域名标签（Referer 提取出的落地站点）---------- */
/* 用 inline-block 而非 inline-flex：flex 容器上 text-overflow:ellipsis 不生效，
   会把域名硬切掉（看不到省略号）。inline-block 才能正常出 … */
.src-tag{display:inline-block;max-width:240px;height:21px;padding:0 9px;
  border-radius:999px;background:var(--surface-sunk);border:1px solid var(--border-soft);
  font-size:12px;font-weight:500;line-height:19px;color:var(--text-2);
  text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.src-tag:hover{background:var(--accent-soft);border-color:var(--accent-soft-2);color:var(--accent-ink);
  text-decoration:none}
.src-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.src-stack .src-tag{max-width:100%}
.src-none{color:var(--text-4);font-size:12px;line-height:21px}

/* 表格操作列：明确的链接外观 */
.tbl-link{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent) 42%,transparent);
  transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.tbl-link:hover{color:var(--accent-hover);text-decoration-color:var(--accent-hover)}
.tbl-link+.tbl-link{margin-left:12px}

/* 通用数值着色（任何表格都能套） */
td .num-pos{color:var(--ok);font-weight:700;font-variant-numeric:tabular-nums}
td .num-warn{color:var(--warn);font-weight:700;font-variant-numeric:tabular-nums}
td .num-hot{color:var(--danger);font-weight:700;font-variant-numeric:tabular-nums}
td .num-acc{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
td .num-mute{color:var(--text-4);font-weight:500;font-variant-numeric:tabular-nums}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;border:1px solid var(--border);white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:#047857;border-color:transparent}
.pill.gray{background:var(--surface-sunk);color:var(--text-3);border-color:var(--border-soft)}
.pill.warn{background:var(--warn-soft);color:#b45309;border-color:transparent}
.pill.bad{background:var(--danger-soft);color:#b91c1c;border-color:transparent}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.chan-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chan-title h2{margin:0;font-size:19px;font-weight:650;letter-spacing:-.01em}
.chan-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--text-3);font-size:12.5px;margin-top:6px}
.chan-meta b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.funnel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 4px;font-size:12.5px;color:var(--text-3)}
.funnel .step{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--surface-sunk);min-width:104px}
.funnel .step b{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums}
.funnel .arrow{color:var(--text-4)}
.tab-body{padding-top:2px}
.row-unassigned td{background:color-mix(in srgb,var(--danger-soft) 55%,transparent)}
.inline-form{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.mini-note{font-size:12px;color:var(--text-3);margin-top:2px}
.mini-note b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.mini-note .zero{color:var(--text-4)}
html[data-theme="dark"] .pill.ok{color:#6ee7b7}
html[data-theme="dark"] .pill.warn{color:#fcd34d}
html[data-theme="dark"] .pill.bad{color:#fca5a5}

/* ==========================================================================
   30. 旧页兼容层（v3 换肤期）
   旧视图遗留的内联深色样式 / 旧类名在此对齐 v3 双主题；
   逐页迁移 page-head 结构后可删除。
   ========================================================================== */
.muted, .dim { color: var(--text-3, #8c8c8c); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.row a.btn, .row button { text-decoration: none; }

/* 旧筛选表单：输入/下拉与 v3 控件一致 */
.row input[type="text"], .row input[type="search"], .row input[type="password"],
.row input[type="date"], .row input[type="number"], .row select {
  height: 30px; padding: 0 10px; font-size: 13px;
  background: var(--surface, #fff); color: var(--text, #141414);
  border: 1px solid var(--border-strong, #d9d9d9); border-radius: var(--radius-sm, 6px);
  outline: none; min-width: 0;
}
.row input:focus, .row select:focus { border-color: var(--accent, #3b82f6); }
.row input[type="date"] { color-scheme: light dark; }

/* 旧 .form-panel / .login-box 等表单卡 */
.form-panel { max-width: none; }

/* 旧表格行高亮与角标色 */
.row-bal td { background: var(--ok-soft, #d1fae5) !important; }
.badge.on  { background: var(--ok-soft, #d1fae5); color: var(--ok, #10b981); }
.badge.off { background: var(--surface-sunk, #fafafa); color: var(--text-3, #8c8c8c); }
.badge.hot, .count.hot { background: var(--danger-soft, #fee2e2); color: var(--danger, #ef4444); }
.badge.coruna { background: var(--violet-soft, #ede9fe); color: var(--violet, #8b5cf6); }
.badge.darksword { background: var(--teal-soft, #ccfbf1); color: var(--teal, #14b8a6); }

/* 旧内联深色样式残留兜底（卡片内嵌 iframe 代码块等） */
pre.pre, .swal-json, code {
  font-family: var(--mono);
}
code { background: var(--surface-sunk, #fafafa); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.swal-json { max-height: 52vh; overflow: auto; text-align: left; font-size: 12px; line-height: 1.6; }
.jk { color: var(--violet, #8b5cf6); } .js { color: var(--ok, #10b981); }
.jn { color: var(--warn, #f59e0b); } .jl { color: var(--text-3, #8c8c8c); }

/* 分页（旧 a 链接样式） */
.pager { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.pager a { padding: 4px 12px; border-radius: 6px; border: 1px solid var(--border, #e8e8e8); color: var(--text-2, #595959); text-decoration: none; font-size: 13px; }
.pager a:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }
.pager .cur { background: var(--accent, #3b82f6); color: #fff; border-color: var(--accent, #3b82f6); }

/* 旧 ghost 链接按钮 */
a.btn.ghost { color: var(--text-2, #595959); }

/* 相册网格（旧页 photo-thumb） */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-thumb { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #e8e8e8); }
.photo-thumb img { display: block; width: 100%; height: 110px; object-fit: cover; }

/* 助记词表格内的开关 / 徽章对齐 */
table .badge { vertical-align: middle; }

/* 30.1 缺失小组件补齐 */
.btn-mini { display:inline-flex; align-items:center; justify-content:center; padding:2px 5px; margin-left:4px;
  border:none; background:transparent; color:var(--text-4,#8c8c8c); border-radius:4px; cursor:pointer; vertical-align:middle; }
.btn-mini:hover { color:var(--accent,#3b82f6); background:var(--accent-soft,#dbeafe); }
.grow { flex:1; min-width:160px; }
.flash { padding:10px 14px; border-radius:var(--radius-sm,6px); margin-bottom:14px; font-size:13.5px; }
.flash.err { background:var(--danger-soft,#fee2e2); color:var(--danger,#ef4444); }
.flash.ok { background:var(--ok-soft,#d1fae5); color:var(--ok,#10b981); }
.empty { text-align:center; padding:26px 12px; color:var(--text-3,#8c8c8c); font-size:13px; }

/* 30.2 白名单页 + 旧类映射 */
.wl-tip { color: var(--text-3, #8c8c8c); }
.wl-type-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 2px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  border: 1px solid transparent;
}
.wl-type-badge.account { color: #6d28d9; background: var(--violet-soft, #ede9fe); }
.wl-type-badge.ip { color: #047857; background: var(--ok-soft, #d1fae5); }
html[data-theme="dark"] .wl-type-badge.account { color: #c4b5fd; }
html[data-theme="dark"] .wl-type-badge.ip { color: #6ee7b7; }
.wl-scope { color: var(--text-3, #8c8c8c); }
.wl-value { font-size: 13px; }
.wl-meta { font-size: 13px; color: var(--text-2); font-weight: 550; }
.wl-acts { display: inline-flex; align-items: center; gap: 2px; }
.wl-acts .tbl-link {
  appearance: none; background: none; border: 0; padding: 0;
  cursor: pointer; font: inherit; line-height: inherit;
}
.wl-acts .tbl-link.danger { color: var(--danger, #ef4444); }
.wl-acts .tbl-link.danger:hover { color: #b91c1c; text-decoration-color: currentColor; }
.wl-row-off td { opacity: .72; }
.wl-kpi-status { letter-spacing: .04em; }
.wl-log-kind {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--text-3);
}
.wl-log-detail {
  font-size: 12.5px; word-break: break-all; max-width: 42vw;
}
.wl-pause-flash { margin-bottom: 14px; }
.wl-ip-row { display: flex; gap: 8px; align-items: center; }
.wl-ip-row input { flex: 1; min-width: 0; }
.wl-ip-row .btn { flex: 0 0 auto; white-space: nowrap; }
.wl-field-hint { color: var(--text-4); font-weight: 400; margin-left: 4px; }
.flash.warn {
  background: var(--warn-soft, #fef3c7); color: #b45309;
  border: 1px solid color-mix(in srgb, var(--warn, #f59e0b) 22%, transparent);
}
html[data-theme="dark"] .flash.warn { color: #fcd34d; }
.badge.pending { background: var(--warn-soft, #fef3c7); color: var(--warn, #f59e0b); }
.btn.ok { background: var(--ok, #10b981); color: #fff; }

/* 30.3 旧变量名桥接（旧页 --muted/--line/--panel/--ds/--coruna → v3 token） */
:root, html[data-theme="dark"] {
  --muted: var(--text-3);
  --line: var(--border);
  --panel: var(--surface);
  --ds: var(--ok);
  --coruna: var(--violet);
}

/* ==========================================================================
   31. 2026-11 全盘美化补丁（对齐迅游 v3 细节）
   ========================================================================== */
.photo-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.photo-pick {
  position: absolute; left: 8px; top: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, #000 55%, transparent);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.photo-pick input { margin: 0; accent-color: var(--accent); }
.photo-scan-badge { left: auto; right: 8px; }
.photo-item .photo-pick + .photo-scan-badge,
.photo-thumb .photo-pick ~ .photo-scan-badge { top: 8px; }

.range-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-1);
}
.range-bar .range-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.range-bar .range-seg .btn.on {
  background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-soft-2);
}
.range-bar .range-custom {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0; padding-left: 8px; border-left: 1px solid var(--border-soft);
}
.range-bar .range-custom input[type="date"] { max-width: 150px; }
.range-bar .range-now { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.range-bar .range-now b { color: var(--text-2); font-weight: 600; }

.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft); background: var(--surface-sunk);
}
.toolbar .hint { margin: 0; color: var(--text-4); font-size: 12.5px; }
.card-foot.pager, .card > .pager {
  padding: 12px 16px; border-top: 1px solid var(--border-soft);
  background: var(--surface-sunk); font-size: 13px; color: var(--text-3);
}

.note-list-tg { display: flex; flex-direction: column; }
.note-row-tg {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--border-soft);
  transition: background var(--t-fast);
}
.note-row-tg:hover { background: var(--surface-sunk); }
.note-row-tg:last-child { border-bottom: 0; }
.note-row-device { flex: 0 1 200px; min-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.note-row-main { flex: 1; min-width: 160px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-row-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tg-inline-form { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.tg-inline-form input[type="text"],
.tg-inline-form input[type="password"] { width: 100%; max-width: 280px; }
.ch-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ch-save-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

.totp-status { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.totp-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.8; margin: 0 0 12px; }
.totp-wrap { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.totp-qr { background: #fff; border-radius: 14px; padding: 14px; border: 1px solid var(--border); width: fit-content; }
.totp-side { flex: 1; min-width: 280px; }
.totp-secret { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.totp-secret code { font-size: 14px; letter-spacing: .5px; padding: 8px 12px; }
.totp-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin: 12px 0; }
.totp-code {
  font-family: var(--mono); font-size: 13.5px; font-weight: 650; text-align: center;
  padding: 9px 6px; letter-spacing: 1px; border-radius: 9px;
  background: var(--surface-sunk); border: 1px solid var(--border); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.totp-steps { margin: 0 0 14px; padding-left: 18px; color: var(--text-3); font-size: 13px; line-height: 2; }
.totp-steps b { color: var(--text); }
.totp-cells { display: flex; gap: 8px; justify-content: flex-start; margin: 8px 0 12px; flex-wrap: wrap; }
.totp-cell {
  width: 44px; height: 52px; text-align: center;
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface-sunk); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; outline: none;
}
.totp-cell:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }

.site-form { max-width: 560px; }
.site-form .field { margin-bottom: 16px; }
.form-label, .field > label {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--text-3);
}
.site-logo-preview {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}
.site-logo-preview img { height: 28px; border-radius: 6px; }

.badge.ok-text { color: var(--ok); background: var(--ok-soft); }
.badge.bad-text { color: var(--danger); background: var(--danger-soft); }
.kpi .k-value.code-sm { font-size: 12.5px; word-break: break-all; line-height: 1.45; padding-top: 6px; font-weight: 600; }

.dev-source {
  margin-top: 10px; padding: 10px 14px 14px; font-size: 13px; color: var(--text-3);
  border-top: 1px dashed var(--border-soft);
}
.dev-source code { font-size: 12px; }

.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.ws-cell { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-sunk); }
.ws-cell.ws-hot { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.ws-cell.ws-warm { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.ws-num { font-size: 26px; font-weight: 700; line-height: 1.15; }
.ws-num.n-plain { color: var(--ok); }
.ws-num.n-ks { color: var(--warn); }
.ws-num.n-inj { color: var(--text-3); }
.ws-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.ws-banner { border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-top: 10px; line-height: 1.6; }
.ws-banner.ws-plain { background: var(--ok-soft); color: var(--ok); border-left: 3px solid var(--ok); }
.ws-banner.ws-ks { background: var(--warn-soft); color: var(--warn); border-left: 3px solid var(--warn); }
.ws-banner.ws-inj { background: var(--surface-sunk); color: var(--text-2); border-left: 3px solid var(--border-strong); }
.table tr.row-bal td, .table tr.row-bal td code { color: var(--ok) !important; font-weight: 600; }

.page-actions .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.page-actions .filter-bar { margin: 0; box-shadow: none; }

/* 归集设置：模式卡片 + 表单网格（渠道详情 / Swal） */
.stl-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stl-mode {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  background: var(--surface-sunk); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
.stl-mode:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.stl-mode.on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.stl-mode b { display: block; font-size: 14px; margin-bottom: 4px; color: var(--text); }
.stl-mode span { display: block; font-size: 12px; color: var(--text-3); line-height: 1.45; }
.stl-grid {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px 12px; align-items: center;
}
.stl-grid > label { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.stl-grid > input[type="text"],
.stl-grid > input[type="password"],
.stl-grid > select { width: 100%; }
.stl-k { color: var(--text-4); }
.stl-tip { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
@media (max-width: 560px) {
  .stl-mode-switch { grid-template-columns: 1fr; }
  .stl-grid { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   32. 暗黑模式全盘补齐
   硬编码浅色字/底 → 暗色可读；SweetAlert2 / 表单 / 徽标 / iframe 代码块
   ========================================================================== */
html[data-theme="dark"] .badge.blue,
html[data-theme="dark"] .badge.coruna { color: #91caff; }
html[data-theme="dark"] .badge.green,
html[data-theme="dark"] .badge.on { color: #6ee7b7; }
html[data-theme="dark"] .badge.amber,
html[data-theme="dark"] .badge.warn,
html[data-theme="dark"] .badge.likely,
html[data-theme="dark"] .badge.pending { color: #fcd34d; }
html[data-theme="dark"] .badge.red,
html[data-theme="dark"] .badge.danger { color: #fca5a5; }
html[data-theme="dark"] .badge.violet,
html[data-theme="dark"] .badge.darksword { color: #c4b5fd; }
html[data-theme="dark"] .badge.teal { color: #5eead4; }
html[data-theme="dark"] .badge.mac { background: hsl(240 10% 22%); color: hsl(240 12% 78%); }
html[data-theme="dark"] .badge.linux { background: hsl(32 45% 18%); color: hsl(32 85% 70%); }

html[data-theme="dark"] .pill.ok { background: var(--ok-soft); color: #6ee7b7; }
html[data-theme="dark"] .pill.warn { background: var(--warn-soft); color: #fcd34d; }
html[data-theme="dark"] .pill.bad { background: var(--danger-soft); color: #fca5a5; }
html[data-theme="dark"] .pill.gray { background: var(--surface-sunk); color: var(--text-3); }

html[data-theme="dark"] .tab b { color: #6ee7b7; }
html[data-theme="dark"] .tab.on b { color: #34d399; }
html[data-theme="dark"] .nav-item .count,
html[data-theme="dark"] .nav-item.on .count { color: #6ee7b7; }

html[data-theme="dark"] .iframe-code {
  background: #161b22; border-color: var(--border); color: #e6edf3;
}
html[data-theme="dark"] .totp-qr { background: #fff; } /* QR 需白底保证扫码 */

html[data-theme="dark"] input:hover,
html[data-theme="dark"] select:hover,
html[data-theme="dark"] textarea:hover { border-color: var(--border-strong); }
html[data-theme="dark"] select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a6' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"] { color-scheme: dark; }

/* SweetAlert2 弹窗（adm.js 已设 bg/color，补齐控件与按钮） */
html[data-theme="dark"] .swal2-popup,
html[data-theme="dark"] .adm-swal {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: var(--text) !important; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
  background: var(--surface-sunk) !important;
  color: var(--text) !important;
  border-color: var(--border-strong) !important;
}
html[data-theme="dark"] .swal2-validation-message {
  background: var(--danger-soft) !important;
  color: #fca5a5 !important;
}
html[data-theme="dark"] .swal2-styled.swal2-confirm {
  background: var(--accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] .swal2-styled.swal2-cancel {
  background: var(--surface-sunk) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .swal2-icon.swal2-warning { border-color: var(--warn); color: var(--warn); }
html[data-theme="dark"] .swal2-icon.swal2-error { border-color: var(--danger); color: var(--danger); }
html[data-theme="dark"] .swal2-icon.swal2-success [class^=swal2-success-line],
html[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ok); background-color: var(--ok); }

/* 登录页 / 通用表面 */
html[data-theme="dark"] .login-wrap { background: var(--bg); }
html[data-theme="dark"] .login-card {
  background: var(--surface); border-color: var(--border); color: var(--text);
  box-shadow: var(--sh-2);
}
html[data-theme="dark"] .login-err { color: #fca5a5; }

/* 代码 / 预格式 */
html[data-theme="dark"] code {
  background: var(--surface-sunk); color: var(--text-2);
}
html[data-theme="dark"] .pre,
html[data-theme="dark"] pre.pre {
  background: var(--surface-sunk); border-color: var(--border); color: var(--text-2);
}

/* 表格选中 / 危险行 / 余额行 */
html[data-theme="dark"] .row-bal td { background: color-mix(in srgb, var(--ok-soft) 80%, transparent) !important; }
html[data-theme="dark"] .row-unassigned td { background: color-mix(in srgb, var(--danger-soft) 70%, transparent); }

/* 筛选条 / 顶栏芯片 */
html[data-theme="dark"] .filter-bar {
  background: var(--surface); border-color: var(--border);
}
html[data-theme="dark"] .user-chip { background: var(--surface); border-color: var(--border); }

/* 渠道详情归集模式卡 */
html[data-theme="dark"] .stl-mode { background: var(--surface-sunk); border-color: var(--border); }
html[data-theme="dark"] .stl-mode.on {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border-color: var(--accent);
}

/* 设备 hero / 条带 */
html[data-theme="dark"] .card.hero,
html[data-theme="dark"] .hero {
  background: var(--surface); border-color: var(--border);
}

/* 旧兼容：ghost 链接、分页 */
html[data-theme="dark"] a.btn.ghost { color: var(--text-2); }
html[data-theme="dark"] .pager a {
  background: var(--surface); border-color: var(--border); color: var(--text-2);
}
html[data-theme="dark"] .pager a:hover {
  border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft);
}

/* 照片缩略图边框 */
html[data-theme="dark"] .photo-thumb { border-color: var(--border); background: var(--surface-sunk); }

/* 暗色下强调色文字（避免浅绿/深蓝在深底上发灰） */
html[data-theme="dark"] .flash.ok { color: #6ee7b7; }
html[data-theme="dark"] .flash.err { color: #fca5a5; }
html[data-theme="dark"] .wl-type-badge.account { color: #c4b5fd; }
html[data-theme="dark"] .wl-type-badge.ip { color: #6ee7b7; }

/* ==========================================================================
   33. 新建渠道 · 方式选择弹窗
   ========================================================================== */
body.ch-modal-open { overflow: hidden; }
.ch-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; opacity: 0; pointer-events: none;
  transition: opacity .22s var(--e-out, ease);
}
.ch-modal.on { opacity: 1; pointer-events: auto; }
.ch-modal[hidden] { display: none !important; }
.ch-modal-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, #0b1220 48%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ch-modal-panel {
  position: relative; z-index: 1; width: min(560px, 100%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 64px -16px rgba(15, 23, 42, .45);
  padding: 28px 26px 22px;
  transform: translateY(10px) scale(.985);
  transition: transform .24s var(--e-out, ease);
}
.ch-modal.on .ch-modal-panel { transform: none; }
.ch-modal-x {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: var(--surface-sunk); color: var(--text-3); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.ch-modal-x:hover { color: var(--text); background: var(--border-soft); }
.ch-modal-hero { margin-bottom: 18px; padding-right: 28px; }
.ch-modal-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 8px;
}
.ch-modal-hero h2 {
  margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
}
.ch-modal-hero p {
  margin: 0; color: var(--text-3); font-size: 13.5px; line-height: 1.55; max-width: 42ch;
}
.ch-pick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ch-pick {
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 16px 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface-sunk);
  color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
}
.ch-pick:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.ch-pick:active { transform: translateY(0); }
.ch-pick.is-busy { opacity: .72; pointer-events: none; }
.ch-pick-ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--surface)), var(--surface));
  color: var(--accent-ink); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
}
.ch-pick-manual .ch-pick-ico {
  background: linear-gradient(145deg, color-mix(in srgb, var(--text-2) 10%, var(--surface)), var(--surface));
  color: var(--text-2); border-color: var(--border);
}
.ch-pick-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.ch-pick-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.5; flex: 1; }
.ch-pick-cta {
  margin-top: 4px; font-size: 12.5px; font-weight: 650;
  color: var(--accent-ink); letter-spacing: .02em;
}
.ch-pick-manual .ch-pick-cta { color: var(--text-2); }
.ch-modal-foot { margin-top: 14px; text-align: center; }
@media (max-width: 560px) {
  .ch-pick-grid { grid-template-columns: 1fr; }
  .ch-modal-panel { padding: 22px 18px 16px; border-radius: 16px; }
}

.ch-cred {
  text-align: left; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: var(--surface-sunk);
}
.ch-cred-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.ch-cred-row:last-child { border-bottom: 0; }
.ch-cred-row span { color: var(--text-3); font-weight: 600; }
.ch-cred-row code {
  background: transparent; padding: 0; font-size: 13.5px; color: var(--text);
  word-break: break-all; user-select: all;
}

/* 自动创建进度弹窗（单一弹层，不叠 Swal icon/loading） */
.ch-prog { text-align: left; }
.ch-prog-title {
  font-size: 18px; font-weight: 750; letter-spacing: -.02em;
  margin: 0 0 14px; color: var(--text);
}
.ch-prog-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 8px; font-size: 13px;
}
.ch-prog-top #ch-prog-label { color: var(--text-2); font-weight: 600; }
.ch-prog-top #ch-prog-pct {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent, #2563eb);
}
.ch-prog-track {
  height: 8px; border-radius: 999px; background: var(--border-soft, #e5e7eb);
  overflow: hidden; margin-bottom: 14px;
}
.ch-prog-track > i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #2563eb), #60a5fa);
  transition: width .45s ease;
}
.ch-prog-live {
  max-height: 340px; overflow: auto;
  border: 1px solid var(--border-soft); border-radius: 12px;
  background: var(--surface-sunk, #f8fafc); padding: 8px 10px;
}
.ch-prog-wait {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 8px; color: var(--text-3); font-size: 13px;
}
.ch-prog-spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent, #2563eb);
  animation: ch-spin .7s linear infinite; flex: 0 0 auto;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-prog-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; margin: 6px 0; border-radius: 10px;
  font-size: 13px; line-height: 1.55;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.ch-prog-row.in { opacity: 1; transform: none; }
.ch-prog-row .d { opacity: .75; font-size: 12px; margin-top: 3px; word-break: break-word; }
.ch-prog-ico {
  flex: 0 0 auto; width: 18px; height: 18px; line-height: 18px;
  text-align: center; font-weight: 800; font-size: 14px;
}
.ch-prog-ok { background: var(--ok-soft, #d1fae5); border: 1px solid var(--ok, #10b981); }
.ch-prog-ok .ch-prog-ico { color: var(--ok, #10b981); }
.ch-prog-warn { background: var(--warn-soft, #fef3c7); border: 1px solid var(--warn, #f59e0b); }
.ch-prog-warn .ch-prog-ico { color: var(--warn, #f59e0b); }
.ch-prog-bad { background: var(--danger-soft, #fee2e2); border: 1px solid var(--danger, #ef4444); }
.ch-prog-bad .ch-prog-ico { color: var(--danger, #ef4444); }
.ch-prog-done { margin-top: 10px; }
.ch-prog-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  margin-top: 14px; padding-top: 4px;
}
.ch-act {
  appearance: none; border: 1px solid var(--border); background: var(--surface, #fff);
  color: var(--text); border-radius: 10px; padding: 9px 14px;
  font-size: 13px; font-weight: 650; cursor: pointer; line-height: 1.2;
}
.ch-act:hover { background: var(--border-soft); }
.ch-act-primary {
  border-color: var(--accent, #2563eb); background: var(--accent, #2563eb); color: #fff;
}
.ch-act-primary:hover { filter: brightness(1.05); }
.ch-act-muted { color: var(--text-3); }
/* 隐藏可能残留的 Swal loader，避免叠层转圈 */
.ch-cred-swal .swal2-loader { display: none !important; }
.ch-cred-swal.swal2-loading .swal2-actions { display: none !important; }

html[data-theme="dark"] .ch-modal-scrim {
  background: color-mix(in srgb, #000 62%, transparent);
}
html[data-theme="dark"] .ch-modal-panel {
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .ch-prog-live {
  background: color-mix(in srgb, var(--surface, #1f1f1f) 88%, #000);
}

/* ---------- 渠道 Telegram 接入（运营向） ---------- */
.tg-setup {
  display: flex; flex-direction: column; gap: 14px;
}
.tg-setup-hero {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch;
  padding: 18px 18px 16px; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)) 0%, var(--surface) 58%);
  box-shadow: var(--sh-1);
}
.tg-setup-hero-main { flex: 1 1 280px; min-width: 0; }
.tg-setup-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px;
}
.tg-setup-hero h3 {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 6px;
}
.tg-setup-hero p {
  margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.65; max-width: 46em;
}
.tg-setup-status {
  flex: 0 1 280px; min-width: 220px;
  display: flex; flex-direction: column; gap: 10px; justify-content: center;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-soft);
}
.tg-setup-wh {
  font-size: 12.5px; line-height: 1.55; color: var(--text-2); word-break: break-word;
}
.tg-setup-wh code { font-size: 11.5px; }

.tg-steps {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.tg-step {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--sh-1); overflow: hidden;
}
.tg-step.is-muted { opacity: .96; }
.tg-step.is-done .tg-step-num {
  background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.tg-step-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px 8px;
}
.tg-step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-strong); background: var(--accent-soft); color: var(--accent-ink);
}
.tg-step-head h4 { font-size: 14.5px; font-weight: 700; margin: 1px 0 4px; }
.tg-step-head p { margin: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
.tg-step-body { padding: 4px 16px 16px 56px; }
@media (max-width: 720px) {
  .tg-step-body { padding-left: 16px; }
}

.tg-setup-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.tg-field label {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-bottom: 6px;
}
.tg-field input[type="text"],
.tg-field input[type="password"] {
  width: 100%; min-height: 38px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--bg-elevated);
  padding: 8px 12px; color: var(--text); font-size: 13.5px;
}
.tg-chat-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.tg-chat-row input { flex: 1 1 220px; min-width: 0; }
.tg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tg-hint {
  margin: 8px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.65;
}
.tg-hint code {
  padding: 1px 5px; border-radius: 4px; background: var(--surface-sunk); border: 1px solid var(--border-soft);
}
.tg-token-out {
  font-size: 12.5px; word-break: break-all; color: var(--text-2);
  min-height: 1.2em;
}
.tg-bound {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--ok-soft); color: var(--ok); font-size: 12.5px; font-weight: 600;
}

/* 自动选择群 · 弹层列表 */
.tg-chat-pick { text-align: left; max-height: min(52vh, 420px); overflow: auto; margin: 4px 0 2px; }
.tg-chat-pick-empty {
  padding: 18px 12px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.6;
}
.tg-chat-item {
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 12px; margin: 0 0 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.tg-chat-item:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.tg-chat-item.is-on {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.tg-chat-radio {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 999px;
  border: 2px solid var(--border-strong); position: relative;
}
.tg-chat-item.is-on .tg-chat-radio {
  border-color: var(--accent);
}
.tg-chat-item.is-on .tg-chat-radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--accent);
}
.tg-chat-meta { min-width: 0; flex: 1; }
.tg-chat-title {
  font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.35;
  word-break: break-word;
}
.tg-chat-sub {
  margin-top: 4px; font-size: 12px; color: var(--text-3); line-height: 1.45;
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;
}
.tg-chat-type {
  display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 650;
  background: var(--surface-sunk); border: 1px solid var(--border-soft); color: var(--text-2);
}
.tg-chat-id { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.tg-chat-pick-foot {
  margin-top: 8px; font-size: 12px; color: var(--text-3); line-height: 1.5; text-align: left;
}