/* ══════════════════════════════════════════════════════════════════════════
   Bilibili SC Monitor — Themes v4
   ──────────────────────────────────────────────────────────────────────────
   4 套主题，以 html[data-theme="<id>"] 作用域书写。
   切换主题 = 改变 <html> 的一个属性，瞬时生效、无闪烁、可被浏览器缓存。

     极光玻璃  aurora    暗 · 默认   呼吸与漂浮
     终端矩阵  terminal  暗          电传打字
     新粗野    brutal    亮          硬碰硬
     禅意留白  zen       亮          静水流深

   每套主题覆盖：令牌层 → 头部/工具栏/侧栏面板/卡片(含 5 档)/按钮/输入框/
   空状态/BV 高亮与按钮/悬浮预览/滚动条/提示条/选中态/状态点/加载态，
   并定义各自的入场与选中动画（由 app-core 挂载 .is-entering / .selected 类触发）。
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   ① 极光玻璃 · AURORA — 极深蓝黑 + 青蓝/品红极光，玻璃拟态
   动效语言：呼吸与漂浮（光晕正弦呼吸、极光缓慢漂移、卡片自下淡入）
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="aurora"] {
  color-scheme: dark;

  --bg: #070a12;
  --bg-deep: #04060c;
  --surface: #0d121d;
  --surface2: #141b29;
  --surface3: #1c2537;

  --border: rgba(255, 255, 255, .07);
  --border-strong: rgba(255, 255, 255, .13);
  --border-hover: rgba(77, 166, 255, .38);

  --text: #edf0f5;
  --text2: #8b94a5;
  --text3: #4f586b;

  --accent: #4da6ff;
  --accent-2: #7c5cff;
  --accent-dim: rgba(77, 166, 255, .12);
  --accent-mid: rgba(77, 166, 255, .22);
  --accent-glow: rgba(77, 166, 255, .35);
  --accent-15: rgba(77, 166, 255, .15);
  --accent-contrast: #06101d;

  --pink: #fb7299;
  --pink-dim: rgba(251, 114, 153, .12);

  --green: #2ea043;
  --green-40: rgba(46, 160, 67, .4);
  --green-glow: rgba(46, 160, 67, .35);
  --red: #d8453e;
  --red-glow: rgba(216, 69, 62, .35);
  --orange: #e0a020;
  --yellow: #d29922;
  --yellow-40: rgba(210, 153, 34, .4);

  --glass: rgba(13, 18, 29, .72);
  --glass-border: rgba(255, 255, 255, .07);
  --glass-blur: 16px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow: 0 2px 12px rgba(0, 0, 0, .42);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, .58);
  --glow: 0 0 20px var(--accent-glow);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  --card-border-style: solid;
  --card-border-width: 1px;

  --font: 'Inter var-local', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: var(--font);
  --mono: 'JB Mono local', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  --tier-teal: #86e2d5;
  --tier-blue: #55a8fd;
  --tier-pink: #fb7299;
  --tier-orange: #f5a623;
  --tier-red: #ff3366;

  --body-aurora:
    radial-gradient(ellipse 78% 52% at 50% -16%, rgba(77, 166, 255, .11) 0%, transparent 64%),
    radial-gradient(ellipse 52% 44% at 88% 88%, rgba(124, 92, 255, .10) 0%, transparent 62%),
    radial-gradient(ellipse 40% 34% at 8% 62%, rgba(0, 224, 255, .05) 0%, transparent 66%);
  --body-texture: radial-gradient(circle, rgba(255, 255, 255, .022) 1px, transparent 1px);
  --body-texture-size: 26px 26px;

  --header-bg: linear-gradient(180deg, rgba(77, 166, 255, .05), transparent);
  --header-border-image: linear-gradient(90deg, transparent, var(--accent-mid), var(--pink-dim), transparent) 1;
}

/* 极光漂移：用 transform 而非 background-position，走合成层不触发重绘 */
html[data-theme="aurora"] body::before {
  animation: auroraDrift 60s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  transform-origin: 50% 30%;
  will-change: transform;
}
@keyframes auroraDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.8%, -1.4%, 0); }
}

/* 卡片：玻璃层 + 顶部高光线 + 内发光 */
html[data-theme="aurora"] .sc-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 42%),
    var(--glass);
  box-shadow: inset 0 0 40px -18px rgba(77, 166, 255, .5), var(--shadow-sm);
}
html[data-theme="aurora"] .sc-card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18) 22%, rgba(255, 255, 255, .06) 70%, transparent);
  pointer-events: none;
}
html[data-theme="aurora"] .sc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(77, 166, 255, .34);
  box-shadow: inset 0 0 50px -16px rgba(77, 166, 255, .65),
              0 14px 34px -12px rgba(0, 0, 0, .6),
              0 0 26px -6px var(--accent-glow);
}

/* 档位：越高档内发光越强 + 色条越宽 */
html[data-theme="aurora"] .sc-card[data-price-tier="teal"]   { --tier-glow: rgba(134, 226, 213, .05); }
html[data-theme="aurora"] .sc-card[data-price-tier="blue"]   { --tier-glow: rgba(85, 168, 253, .07); }
html[data-theme="aurora"] .sc-card[data-price-tier="pink"]   { --tier-glow: rgba(251, 114, 153, .09); }
html[data-theme="aurora"] .sc-card[data-price-tier="orange"] { --tier-glow: rgba(245, 166, 35, .10); }
html[data-theme="aurora"] .sc-card[data-price-tier="red"]    { --tier-glow: rgba(255, 51, 102, .12); }
html[data-theme="aurora"] .sc-card[data-price-tier] {
  box-shadow: inset 0 0 60px -26px var(--tier-glow), inset 0 0 40px -18px rgba(77, 166, 255, .3), var(--shadow-sm);
}
html[data-theme="aurora"] .sc-card[data-price-tier="pink"] .sc-card-bar   { width: 5px; }
html[data-theme="aurora"] .sc-card[data-price-tier="orange"] .sc-card-bar { width: 6px; }
html[data-theme="aurora"] .sc-card[data-price-tier="red"] .sc-card-bar    { width: 7px; }
html[data-theme="aurora"] .sc-card[data-price-tier="red"] .sc-price {
  border-color: rgba(255, 51, 102, .4);
  box-shadow: 0 0 18px -4px rgba(255, 51, 102, .5);
}
html[data-theme="aurora"] .sc-card[data-price-tier="orange"] .sc-price,
html[data-theme="aurora"] .sc-card[data-price-tier="red"] .sc-price { font-weight: 700; }

/* 入场：自下淡入 + 轻微放大 + 错峰 */
html[data-theme="aurora"] .sc-card.is-entering {
  animation: auroraCardIn 460ms cubic-bezier(.16, 1, .3, 1) var(--enter-delay, 0ms) both;
}
@keyframes auroraCardIn {
  from { opacity: 0; transform: translateY(-16px) scale(.975); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* 选中：环形光晕正弦呼吸 */
html[data-theme="aurora"] .sc-card.selected {
  border-color: var(--accent);
  border-width: 1px;
  background:
    linear-gradient(180deg, rgba(77, 166, 255, .07), transparent 46%),
    var(--glass);
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px -4px var(--accent-glow), var(--shadow);
  animation: auroraBreath 2.4s ease-in-out infinite;
}
@keyframes auroraBreath {
  0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 24px -6px var(--accent-glow), var(--shadow); }
  50%      { box-shadow: 0 0 0 2px var(--accent), 0 0 44px -2px var(--accent-glow),
                         0 0 80px -18px var(--accent-2), var(--shadow); }
}

html[data-theme="aurora"] .panel { box-shadow: var(--shadow-sm); }
html[data-theme="aurora"] .panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}

html[data-theme="aurora"] .seg { box-shadow: inset 0 0 20px -12px var(--accent); }
html[data-theme="aurora"] .seg-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
html[data-theme="aurora"] .theme-bar { box-shadow: inset 0 0 24px -14px var(--accent); }
html[data-theme="aurora"] .theme-btn.active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
html[data-theme="aurora"] #scroll-btn,
html[data-theme="aurora"] .brand-mark { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
html[data-theme="aurora"] #bv-tooltip { border-color: rgba(77, 166, 255, .2); }
html[data-theme="aurora"] .empty-state .icon {
  background: radial-gradient(circle at 50% 30%, rgba(77, 166, 255, .12), var(--surface2));
  border-color: rgba(77, 166, 255, .18);
}
html[data-theme="aurora"] .legend-swatch { box-shadow: 0 0 10px -2px var(--tier), inset 0 0 4px rgba(0, 0, 0, .4); }

/* 直播间信息条：玻璃层 + 顶部一线极光 + 头像辉光，与卡片质感同源 */
html[data-theme="aurora"] .room-banner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 48%),
    var(--surface2);
  border-color: rgba(77, 166, 255, .22);
  box-shadow: inset 0 0 44px -24px var(--accent), var(--shadow-sm);
}
html[data-theme="aurora"] .room-banner::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .6;
  pointer-events: none;
}
html[data-theme="aurora"] .room-avatar {
  box-shadow: 0 0 0 1px rgba(77, 166, 255, .3), 0 0 20px -6px var(--accent-glow), var(--shadow-sm);
}
html[data-theme="aurora"] .room-uid { border-color: rgba(77, 166, 255, .22); color: var(--text2); }
html[data-theme="aurora"] .room-enter {
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}
html[data-theme="aurora"] .room-enter:hover {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 22px -8px var(--accent-glow), 0 0 0 3px var(--accent-dim);
}

/* 滚动条：青蓝→紫的极光渐变 + 全圆角，与玻璃质感统一 */
html[data-theme="aurora"] .scroll-container::-webkit-scrollbar-thumb,
html[data-theme="aurora"] .sidebar::-webkit-scrollbar-thumb,
html[data-theme="aurora"] .page-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
html[data-theme="aurora"] .scroll-container::-webkit-scrollbar-thumb:hover,
html[data-theme="aurora"] .sidebar::-webkit-scrollbar-thumb:hover,
html[data-theme="aurora"] .page-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px -2px var(--accent-glow);
}

/* ══════════════════════════════════════════════════════════════════════════
   ② 终端矩阵 · TERMINAL — 近黑墨绿 + CRT 荧光绿，全局等宽 + 扫描线
   动效语言：电传打字（扫描线扫过、方块光标闪烁、自左擦入）
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="terminal"] {
  color-scheme: dark;

  --bg: #050b07;
  --bg-deep: #020503;
  --surface: #08120b;
  --surface2: #0d1b12;
  --surface3: #12251a;

  --border: rgba(43, 255, 136, .16);
  --border-strong: rgba(43, 255, 136, .3);
  --border-hover: rgba(43, 255, 136, .55);

  --text: #2bff88;
  --text2: #1ba85c;
  --text3: #0e6b3a;

  --accent: #2bff88;
  --accent-2: #00d4ff;
  --accent-dim: rgba(43, 255, 136, .09);
  --accent-mid: rgba(43, 255, 136, .22);
  --accent-glow: rgba(43, 255, 136, .35);
  --accent-15: rgba(43, 255, 136, .15);
  --accent-contrast: #02120a;

  --pink: #00d4ff;
  --pink-dim: rgba(0, 212, 255, .1);

  --green: #2bff88;
  --green-40: rgba(43, 255, 136, .4);
  --green-glow: rgba(43, 255, 136, .4);
  --red: #ff3b3b;
  --red-glow: rgba(255, 59, 59, .35);
  --orange: #ffb000;
  --yellow: #e8ff3a;
  --yellow-40: rgba(232, 255, 58, .4);

  --glass: rgba(8, 18, 11, .92);
  --glass-border: rgba(43, 255, 136, .14);
  --glass-blur: 0px;

  --shadow-sm: 0 0 8px rgba(43, 255, 136, .07);
  --shadow: 0 0 14px rgba(43, 255, 136, .1);
  --shadow-lg: 0 0 34px rgba(43, 255, 136, .16);
  --glow: 0 0 16px var(--accent-glow);

  --radius-sm: 1px;
  --radius: 2px;
  --radius-lg: 2px;
  --radius-full: 2px;

  --card-border-style: dashed;
  --card-border-width: 1px;

  --font: 'JB Mono local', 'JetBrains Mono', 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
  --font-display: var(--font);
  --mono: 'JB Mono local', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* 档位：同色系亮度/强度递增，靠色条宽度与荧光强度区分 */
  --tier-teal: #147a44;
  --tier-blue: #18a35a;
  --tier-pink: #21cc70;
  --tier-orange: #2bff88;
  --tier-red: #8dffc2;

  --body-aurora:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(43, 255, 136, .07) 0%, transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(43, 255, 136, .022) 2px 4px);
  --body-texture: radial-gradient(circle, rgba(43, 255, 136, .05) 1px, transparent 1px);
  --body-texture-size: 32px 32px;

  --header-bg: #08120b;
  --header-border-image: none;
}

html[data-theme="terminal"] body {
  text-shadow: 0 0 2px rgba(43, 255, 136, .28);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
/* CRT 暗角：压在内容之下（#app 为 z-index:1），只压暗背景边缘，不影响正文与预览可读性 */
html[data-theme="terminal"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 88% at 50% 50%, transparent 50%, rgba(0, 0, 0, .55) 100%);
}
html[data-theme="terminal"] body::before {
  animation: termFlicker 5.5s steps(2, end) infinite;
  will-change: opacity;
}
@keyframes termFlicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .93; } 98.5% { opacity: .97; } }

html[data-theme="terminal"] .app-header {
  border-bottom: 1px dashed var(--border-strong);
  border-image: none;
}
html[data-theme="terminal"] .app-header h1::after {
  content: '_';
  color: var(--accent);
  animation: termCaret 1.05s steps(1, end) infinite;
  margin-left: 1px;
}
@keyframes termCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

html[data-theme="terminal"] .brand-mark {
  background: none;
  border: 1px dashed var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px -4px var(--accent-glow);
  font-weight: 700;
}

/* 卡片：内扫描线纹理（底色保持 --glass 不透明，保证正文对比度） */
html[data-theme="terminal"] .sc-card {
  background-color: var(--glass);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(43, 255, 136, .022) 3px 4px);
  box-shadow: inset 0 0 26px -14px rgba(43, 255, 136, .5), var(--shadow-sm);
}
html[data-theme="terminal"] .sc-card-bar::after { display: none; }
html[data-theme="terminal"] .sc-card-bar { box-shadow: 0 0 8px -1px var(--tier-color); }
html[data-theme="terminal"] .sc-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
  box-shadow: inset 0 0 30px -12px rgba(43, 255, 136, .7), 0 0 16px -4px var(--accent-glow);
}
html[data-theme="terminal"] .sc-price {
  border-style: dashed;
  border-radius: 1px;
  background: rgba(43, 255, 136, .07);
}
html[data-theme="terminal"] .sc-avatar { border-radius: 2px; box-shadow: none; border: 1px dashed var(--border-strong); }
html[data-theme="terminal"] a.sc-avatar-link:hover { transform: none; filter: brightness(1.35); }
html[data-theme="terminal"] .sc-card-bv-btn { border-radius: 1px; }
html[data-theme="terminal"] .sc-card-bv-btn:hover { transform: translateY(-2px); }

/* 档位：色条宽度递增 + 荧光强度递增 */
html[data-theme="terminal"] .sc-card[data-price-tier="teal"]   { --bar-w: 2px; --tier-bg: rgba(43, 255, 136, .012); }
html[data-theme="terminal"] .sc-card[data-price-tier="blue"]   { --bar-w: 3px; --tier-bg: rgba(43, 255, 136, .03); }
html[data-theme="terminal"] .sc-card[data-price-tier="pink"]   { --bar-w: 4px; --tier-bg: rgba(43, 255, 136, .05); }
html[data-theme="terminal"] .sc-card[data-price-tier="orange"] { --bar-w: 5px; --tier-bg: rgba(43, 255, 136, .075); }
html[data-theme="terminal"] .sc-card[data-price-tier="red"]    { --bar-w: 7px; --tier-bg: rgba(43, 255, 136, .11); }
/* 用叠层的方式加染色，而不是直接改 background-color —— 否则会顶掉 --glass 的不透明底 */
html[data-theme="terminal"] .sc-card[data-price-tier] {
  background-image:
    linear-gradient(var(--tier-bg), var(--tier-bg)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(43, 255, 136, .022) 3px 4px);
}
html[data-theme="terminal"] .sc-card[data-price-tier] .sc-card-bar { width: var(--bar-w); }
html[data-theme="terminal"] .sc-card[data-price-tier="teal"] .sc-price { opacity: .72; }
html[data-theme="terminal"] .sc-card[data-price-tier="blue"] .sc-price { opacity: .85; }
html[data-theme="terminal"] .sc-card[data-price-tier="orange"] .sc-price { text-shadow: 0 0 8px rgba(43, 255, 136, .55); }
html[data-theme="terminal"] .sc-card[data-price-tier="red"] .sc-price {
  text-shadow: 0 0 14px rgba(43, 255, 136, .8);
  box-shadow: 0 0 14px -4px rgba(43, 255, 136, .7);
}
html[data-theme="terminal"] .sc-card[data-price-tier="orange"] .sc-card-bar,
html[data-theme="terminal"] .sc-card[data-price-tier="red"] .sc-card-bar {
  box-shadow: 0 0 14px 0 var(--tier-color);
  animation: termBarPulse 2.2s ease-in-out infinite;
}
@keyframes termBarPulse {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

/* 入场：自左擦入 + 扫描感 */
html[data-theme="terminal"] .sc-card.is-entering {
  animation: termCardIn 340ms steps(8, end) var(--enter-delay, 0ms) both;
}
@keyframes termCardIn {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 选中：加粗实描边 + 横向扫描线循环 */
html[data-theme="terminal"] .sc-card.selected {
  border: 2px solid var(--accent);
  border-style: solid;
  background-color: rgba(43, 255, 136, .05);
  box-shadow: inset 0 0 30px -12px rgba(43, 255, 136, .6);
  overflow: hidden;
}
html[data-theme="terminal"] .sc-card.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(43, 255, 136, .16) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: termSweep 2.1s linear infinite;
}
@keyframes termSweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

html[data-theme="terminal"] .panel { box-shadow: none; }
html[data-theme="terminal"] .panel-title::after { background: repeating-linear-gradient(90deg, var(--border) 0 4px, transparent 4px 8px); }
html[data-theme="terminal"] .stat { border-style: dashed; border-radius: 1px; }
html[data-theme="terminal"] .stat-value { text-shadow: 0 0 10px rgba(43, 255, 136, .4); }
html[data-theme="terminal"] .seg,
html[data-theme="terminal"] .theme-bar { border-radius: 1px; border-style: dashed; }
html[data-theme="terminal"] .seg-btn,
html[data-theme="terminal"] .theme-btn { border-radius: 1px; }
html[data-theme="terminal"] .seg-btn.active { box-shadow: 0 0 12px -2px var(--accent-glow); }
html[data-theme="terminal"] .theme-btn.active { box-shadow: 0 0 12px -2px var(--accent-glow); }
html[data-theme="terminal"] .btn { border-radius: 1px; border-style: dashed; }
html[data-theme="terminal"] .field { border-radius: 1px; border-style: dashed; }
html[data-theme="terminal"] .switch-track,
html[data-theme="terminal"] .switch-knob { border-radius: 1px; }
html[data-theme="terminal"] .badge { border-radius: 1px; border-style: dashed; }
html[data-theme="terminal"] #scroll-btn {
  border-radius: 1px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
}
html[data-theme="terminal"] #bv-tooltip { border-radius: 1px; border-color: var(--border-strong); }
html[data-theme="terminal"] .legend-swatch { border-radius: 0; }
html[data-theme="terminal"] .legend-bar { border-radius: 0; }
html[data-theme="terminal"] .tips li::before { border-radius: 0; }
html[data-theme="terminal"] .tips kbd { border-radius: 1px; }
html[data-theme="terminal"] .bv-highlight { border-radius: 1px; background: rgba(43, 255, 136, .1); }
html[data-theme="terminal"] .bv-visited {
  opacity: .6;
  filter: none;
  text-decoration: line-through;
  text-decoration-color: var(--text3);
}
html[data-theme="terminal"] .empty-state .icon { border-radius: 1px; border-style: dashed; }
html[data-theme="terminal"] .app-footer { border-top-style: dashed; }

/* 滚动条：方块、零圆角、荧光绿，悬停点亮（与 CRT 硬朗语言一致） */
html[data-theme="terminal"] .scroll-container::-webkit-scrollbar-thumb,
html[data-theme="terminal"] .sidebar::-webkit-scrollbar-thumb,
html[data-theme="terminal"] .page-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 0;
}
html[data-theme="terminal"] .scroll-container::-webkit-scrollbar-thumb:hover,
html[data-theme="terminal"] .sidebar::-webkit-scrollbar-thumb:hover,
html[data-theme="terminal"] .page-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent);
  box-shadow: 0 0 10px -2px var(--accent-glow);
}

/* 直播间信息条：虚框 + 扫描线底纹 + 终端提示符，等宽字体贯穿 */
html[data-theme="terminal"] .room-banner {
  border-style: dashed;
  border-color: var(--accent);
  border-radius: 0;
  background-image: repeating-linear-gradient(180deg, rgba(43, 255, 136, .055) 0 1px, transparent 1px 4px);
  font-family: var(--mono);
}
html[data-theme="terminal"] .room-banner::before {
  content: '>';
  flex-shrink: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
}
html[data-theme="terminal"] .room-title { font-family: var(--mono); }
html[data-theme="terminal"] .room-uid {
  border-style: dashed;
  border-color: var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
}
html[data-theme="terminal"] .room-enter {
  border-color: var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: var(--mono);
}
html[data-theme="terminal"] .room-enter:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(43, 255, 136, .12);
  box-shadow: 0 0 12px -2px var(--accent-glow), 0 0 0 3px var(--accent-dim);
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ③ 新粗野 · BRUTAL — 米黄纸底 + 芥末黄/品红，粗黑描边 + 无模糊硬阴影
   动效语言：硬碰硬（硬位移、steps 瞬间弹入、按压下沉，绝无渐变光晕）
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="brutal"] {
  color-scheme: light;

  /* 纸底整体压暗一档：去掉近纯白与高亮米黄，长时间阅读不再刺眼 */
  --bg: #e7e2d3;
  --bg-deep: #dbd5c3;
  --surface: #f5f2e7;
  --surface2: #eae5d6;
  --surface3: #ded8c6;

  --border: #14140f;
  --border-strong: #000000;
  --border-hover: #14140f;

  --text: #12120d;
  --text2: #494536;
  --text3: #7e7866;

  --accent: #ff3d81;
  --accent-2: #ffd400;
  --accent-dim: rgba(255, 61, 129, .14);
  --accent-mid: rgba(255, 61, 129, .3);
  --accent-glow: transparent;
  --accent-15: rgba(255, 61, 129, .16);
  --accent-contrast: #ffffff;

  --pink: #ff3d81;
  --pink-dim: rgba(255, 61, 129, .14);

  --green: #1f9d4f;
  --green-40: rgba(31, 157, 79, .4);
  --green-glow: transparent;
  --red: #e5252a;
  --red-glow: transparent;
  --orange: #ff8a00;
  --yellow: #ffd400;
  --yellow-40: rgba(255, 212, 0, .5);

  --glass: #f5f2e7;
  --glass-border: #14140f;
  --glass-blur: 0px;

  --shadow-sm: 3px 3px 0 #14140f;
  --shadow: 5px 5px 0 #14140f;
  --shadow-lg: 9px 9px 0 #14140f;
  --glow: none;

  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;

  --card-border-style: solid;
  --card-border-width: 3px;

  --font: 'Inter var-local', 'Inter', 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: 'Inter var-local', 'Inter', 'Helvetica Neue', 'PingFang SC', sans-serif;
  --mono: 'JB Mono local', 'JetBrains Mono', Consolas, monospace;

  /* 档位主色：在压暗后的纸底上小幅加深，保证色条与价格胶囊仍然醒目可读 */
  --tier-teal: #0f8c81;
  --tier-blue: #2b5fd0;
  --tier-pink: #d92f6c;
  --tier-orange: #cf6f04;
  --tier-red: #c31f26;

  --body-aurora: none;
  --body-texture: repeating-linear-gradient(45deg, rgba(20, 20, 15, .022) 0 1px, transparent 1px 9px);
  --body-texture-size: auto;

  /* 头部改为墨黑底，芥末黄降级为头部下方的一条点缀线 */
  --header-bg: #14140f;
  --header-border-image: none;
}

html[data-theme="brutal"] body { font-weight: 500; }

/* 头部：墨黑底 + 米白字，芥末黄只保留为下方一条点缀线
   （background-color 显式声明：--header-bg 是颜色而非 <image>，
     `background-image: <color>` 在计算值阶段可能被判无效，双保险确保头部一定是墨黑） */
html[data-theme="brutal"] .app-header {
  background-color: #14140f;
  border-bottom: 3px solid #ffd400;
  border-image: none;
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
}
html[data-theme="brutal"] .app-header h1 {
  color: #f4f1e6;
  font-weight: 800;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
html[data-theme="brutal"] .brand-sub { color: #b9b3a1; font-weight: 600; }
html[data-theme="brutal"] .brand-mark {
  background: #ffd400;
  color: #12120d;
  border-radius: 0;
  box-shadow: none;
  font-weight: 800;
}
/* 导航：透明底 + 米白描边，hover 反转为黄底墨黑字 */
html[data-theme="brutal"] .nav-link {
  background: transparent;
  color: #f4f1e6;
  border: 2px solid #f4f1e6;
  border-radius: 0;
}
html[data-theme="brutal"] .nav-link:hover {
  background: #ffd400;
  border-color: #ffd400;
  color: #12120d;
}

/* 卡片：硬边 + 硬阴影，无模糊 */
html[data-theme="brutal"] .sc-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  background: var(--surface);
}
html[data-theme="brutal"] .sc-card-bar::after { display: none; }
html[data-theme="brutal"] .sc-card-bar { border-right: 3px solid #14140f; }
html[data-theme="brutal"] .sc-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 #14140f;
  border-color: #14140f;
}
html[data-theme="brutal"] .sc-card:active { transform: translate(0, 0); box-shadow: 2px 2px 0 #14140f; }
html[data-theme="brutal"] .sc-avatar {
  border-radius: 0;
  border: 3px solid #14140f;
  box-shadow: none;
}
html[data-theme="brutal"] a.sc-avatar-link:hover { transform: translate(-2px, -2px); filter: none; }
html[data-theme="brutal"] .sc-uname { font-weight: 800; letter-spacing: -.02em; }
html[data-theme="brutal"] .sc-price {
  border: 3px solid #14140f;
  border-radius: 0;
  background: var(--tier-color);
  color: var(--tier-ink, #12120d) !important;
  font-weight: 800;
  box-shadow: none;
}
/* 深色档位改用白字，保证对比度 */
html[data-theme="brutal"] .sc-card[data-price-tier="blue"]   { --tier-ink: #ffffff; }
html[data-theme="brutal"] .sc-card[data-price-tier="pink"]   { --tier-ink: #ffffff; }
html[data-theme="brutal"] .sc-card[data-price-tier="red"]    { --tier-ink: #ffffff; }
html[data-theme="brutal"] .sc-price:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 #14140f; }
html[data-theme="brutal"] .sc-time { font-weight: 600; color: var(--text2); }
html[data-theme="brutal"] .sc-msg { font-weight: 500; }
html[data-theme="brutal"] .sc-card-bv-btn {
  border-radius: 0;
  border: 2px solid #14140f;
  background: var(--accent-2);
  color: #12120d;
  font-weight: 700;
  box-shadow: 2px 2px 0 #14140f;
}
html[data-theme="brutal"] .sc-card-bv-btn::before { border-left-color: #12120d; }
html[data-theme="brutal"] .sc-card-bv-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #14140f;
  background: var(--accent-2);
  border-color: #14140f;
}
html[data-theme="brutal"] .bv-highlight {
  border: 2px solid #14140f;
  border-radius: 0;
  background: var(--accent-2);
  color: #12120d;
  font-weight: 700;
  padding: 0 4px;
}
html[data-theme="brutal"] .bv-highlight:hover,
html[data-theme="brutal"] .bv-highlight.active { box-shadow: 2px 2px 0 #14140f; background: #ffd400; }
html[data-theme="brutal"] .bv-visited { opacity: .58; filter: grayscale(1); }

/* 档位：整卡底色用低饱和平涂（比改版前更沉稳，档位辨识交给左侧色条与价格胶囊） */
html[data-theme="brutal"] .sc-card[data-price-tier="teal"]   { background: #e3eee9; }
html[data-theme="brutal"] .sc-card[data-price-tier="blue"]   { background: #e2e8f4; }
html[data-theme="brutal"] .sc-card[data-price-tier="pink"]   { background: #f0e0e5; }
html[data-theme="brutal"] .sc-card[data-price-tier="orange"] { background: #f0e5d3; }
html[data-theme="brutal"] .sc-card[data-price-tier="red"]    { background: #f0dbd7; }
html[data-theme="brutal"] .sc-card[data-price-tier="orange"],
html[data-theme="brutal"] .sc-card[data-price-tier="red"] { box-shadow: 6px 6px 0 #14140f; }
html[data-theme="brutal"] .sc-card[data-price-tier="red"] .sc-price { background: var(--tier-red); color: #fff !important; }

/* 入场：无缓动瞬间弹入 */
html[data-theme="brutal"] .sc-card.is-entering {
  animation: brutalPop 220ms steps(3, end) var(--enter-delay, 0ms) both;
}
@keyframes brutalPop {
  from { opacity: 0; transform: translateY(-14px) scale(1.04); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 选中：整卡反色翻转（墨黑底 + 米白字 + 黄色外环）
   —— 与 hover（浅底 + 黑色位移阴影）形成一眼可辨的区分，而不是只差一圈描边 */
html[data-theme="brutal"] .sc-card.selected {
  border-color: #14140f;
  border-width: 3px;
  background: #14140f;
  color: #f4f1e6;
  box-shadow: 0 0 0 3px #ffd400, 8px 8px 0 rgba(20, 20, 15, .3);
  transform: translate(-3px, -3px);
  animation: none;
}
html[data-theme="brutal"] .sc-card.selected[data-price-tier] { background: #14140f; }
html[data-theme="brutal"] .sc-card.selected:hover { box-shadow: 0 0 0 3px #ffd400, 12px 12px 0 rgba(20, 20, 15, .3); }
/* 反色后内部元素重新配色，保证墨黑底上依然清晰 */
html[data-theme="brutal"] .sc-card.selected .sc-card-bar { width: 10px; border-right: 3px solid #ffd400; }
html[data-theme="brutal"] .sc-card.selected .sc-uname { color: #ffffff; }
html[data-theme="brutal"] .sc-card.selected .sc-time  { color: #a8a294; }
html[data-theme="brutal"] .sc-card.selected .sc-msg   { color: #ece7d9; }
html[data-theme="brutal"] .sc-card.selected .sc-price { border-color: #f4f1e6; }
html[data-theme="brutal"] .sc-card.selected .sc-avatar { border-color: #f4f1e6; }
html[data-theme="brutal"] .sc-card.selected .bv-highlight {
  background: #ffd400;
  border-color: #ffd400;
  color: #12120d;
}
html[data-theme="brutal"] .sc-card.selected .sc-card-bv-btn {
  background: #ffd400;
  border-color: #ffd400;
  color: #12120d;
  box-shadow: none;
}
html[data-theme="brutal"] .sc-card.selected .sc-card-bv-btn::before { border-left-color: #12120d; }
html[data-theme="brutal"] .sc-card.selected .sc-card-bv-btn:hover {
  box-shadow: 3px 3px 0 rgba(244, 241, 230, .55);
  border-color: #ffd400;
}

html[data-theme="brutal"] .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  background: var(--surface);
}
html[data-theme="brutal"] .panel-title { color: #12120d; font-weight: 800; }
html[data-theme="brutal"] .panel-title::after { background: repeating-linear-gradient(90deg, #14140f 0 6px, transparent 6px 10px); }
html[data-theme="brutal"] .stat { border: 2px solid #14140f; border-radius: 0; background: var(--surface); }
html[data-theme="brutal"] .stat:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 #14140f; border-color: #14140f; }
html[data-theme="brutal"] .stat-value { font-weight: 800; }
html[data-theme="brutal"] .seg { border: 3px solid #14140f; border-radius: 0; background: var(--surface); padding: 2px; }
html[data-theme="brutal"] .seg-btn { border-radius: 0; font-weight: 700; }
html[data-theme="brutal"] .seg-btn.active {
  background: #14140f;
  color: #ffd400;
  transform: none;
  box-shadow: none;
}

/* 主题选择器不在纸底上，而是嵌在墨黑头部里：默认的米白 --surface 底会在黑条上
   糊成一块突兀亮斑。改为「透明底 + 米白描边」，与同行的 .nav-link 归为一族语言。 */
html[data-theme="brutal"] .theme-bar {
  background: transparent;
  border: 2px solid #f4f1e6;
  border-radius: 0;
  padding: 2px;
}
html[data-theme="brutal"] .theme-bar .theme-label { color: #b9b3a1; }
html[data-theme="brutal"] .theme-btn { color: #f4f1e6; border-radius: 0; font-weight: 700; }
html[data-theme="brutal"] .theme-btn::before { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
html[data-theme="brutal"] .theme-btn:hover { background: transparent; color: #ffd400; }
html[data-theme="brutal"] .theme-btn.active { background: #ffd400; color: #12120d; }
html[data-theme="brutal"] .btn {
  border: 3px solid #14140f;
  border-radius: 0;
  background: var(--surface);
  font-weight: 700;
  box-shadow: 3px 3px 0 #14140f;
}
html[data-theme="brutal"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #14140f; background: var(--surface); border-color: #14140f; }
html[data-theme="brutal"] .btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #14140f; }
html[data-theme="brutal"] .btn-primary { background: var(--green); color: #fff; }
html[data-theme="brutal"] .btn-danger { background: var(--red); color: #fff; }
html[data-theme="brutal"] .btn-accent { background: var(--accent); color: #fff; }
html[data-theme="brutal"] .field { border: 3px solid #14140f; border-radius: 0; background: var(--surface); font-weight: 600; }
html[data-theme="brutal"] .field:focus { box-shadow: 3px 3px 0 #14140f; }
html[data-theme="brutal"] .switch-track { border: 2px solid #14140f; border-radius: 0; background: var(--surface); height: 22px; width: 40px; }
html[data-theme="brutal"] .switch-track.on { background: var(--green); }
html[data-theme="brutal"] .switch-knob { border-radius: 0; width: 14px; height: 14px; background: #14140f; box-shadow: none; }
html[data-theme="brutal"] .switch-track.on .switch-knob { transform: translateX(18px); background: #fff; }
html[data-theme="brutal"] .badge { border: 2px solid #14140f; border-radius: 0; background: var(--surface); color: #12120d; font-weight: 700; }
html[data-theme="brutal"] .badge.live { background: var(--green); color: #fff; border-color: #14140f; }
html[data-theme="brutal"] .badge.connecting { background: var(--yellow); color: #12120d; border-color: #14140f; }
html[data-theme="brutal"] .badge::before { background: currentColor; }
html[data-theme="brutal"] #scroll-btn {
  border-radius: 0;
  border: 3px solid #14140f;
  background: #14140f;
  color: #ffd400;
  box-shadow: 3px 3px 0 rgba(20, 20, 15, .25);
  font-weight: 800;
}
html[data-theme="brutal"] #scroll-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(20, 20, 15, .25); }
html[data-theme="brutal"] #bv-tooltip {
  border: 3px solid #14140f;
  border-radius: 0;
  background: var(--surface);
  box-shadow: 6px 6px 0 #14140f;
}
html[data-theme="brutal"] .empty-state .icon { border: 3px solid #14140f; border-radius: 0; background: #ffd400; }
html[data-theme="brutal"] .legend-swatch { border-radius: 0; border: 1px solid #14140f; width: 6px; }
html[data-theme="brutal"] .legend-bar { border-radius: 0; border: 1px solid #14140f; background: var(--surface); height: 8px; }
html[data-theme="brutal"] .tips li::before { border-radius: 0; background: #14140f; opacity: 1; width: 5px; height: 5px; }
html[data-theme="brutal"] .tips { color: var(--text2); }
html[data-theme="brutal"] .tips li { color: var(--text2); font-weight: 500; }
html[data-theme="brutal"] .tips kbd { border: 2px solid #14140f; border-radius: 0; background: #ffd400; color: #12120d; font-weight: 700; }
html[data-theme="brutal"] .app-footer { border-top: 3px solid #14140f; font-weight: 600; color: var(--text2); }
html[data-theme="brutal"] .app-footer a { color: #12120d; text-decoration: underline; text-decoration-thickness: 2px; }
html[data-theme="brutal"] .toast { border: 3px solid #14140f; border-radius: 0; box-shadow: 5px 5px 0 #14140f; font-weight: 700; }
/* 滚动条：纯黑硬条、零圆角，与粗黑描边一致 */
html[data-theme="brutal"] .scroll-container::-webkit-scrollbar-thumb,
html[data-theme="brutal"] .sidebar::-webkit-scrollbar-thumb,
html[data-theme="brutal"] .page-scroll::-webkit-scrollbar-thumb { background: #14140f; border-radius: 0; }
html[data-theme="brutal"] .scroll-container::-webkit-scrollbar-thumb:hover,
html[data-theme="brutal"] .sidebar::-webkit-scrollbar-thumb:hover,
html[data-theme="brutal"] .page-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--accent); }
html[data-theme="brutal"] .room-avatar { border-radius: 0; border: 3px solid #14140f; }
/* 直播间信息条：硬描边 + 偏移实心影 + 按下位移，沿用粗野派的实体手感 */
html[data-theme="brutal"] .room-banner {
  border: 3px solid #14140f;
  border-radius: 0;
  box-shadow: 5px 5px 0 #14140f;
  font-weight: 600;
}
html[data-theme="brutal"] .room-uid {
  border: 2px solid #14140f;
  border-radius: 0;
  background: var(--surface2);
  color: var(--text);
  font-weight: 700;
}
html[data-theme="brutal"] .room-enter {
  border: 3px solid #14140f;
  border-radius: 0;
  background: var(--accent);
  color: #14140f;
  font-weight: 800;
  box-shadow: 3px 3px 0 #14140f;
}
html[data-theme="brutal"] .room-enter:hover {
  color: #14140f;
  border-color: #14140f;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #14140f, 0 0 0 3px var(--accent-dim);
}
html[data-theme="brutal"] .room-enter:active { transform: translate(3px, 3px); box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════════════
   ④ 禅意留白 · ZEN — 纸白 + 墨黑 + 唯一朱红强调色，衬线标题
   动效语言：静水流深（极慢缓出、下划线延展、零常驻动画）
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="zen"] {
  color-scheme: light;

  --bg: #faf8f4;
  --bg-deep: #f3f0e9;
  --surface: #ffffff;
  --surface2: #f7f5ef;
  --surface3: #efece4;

  --border: rgba(28, 26, 23, .1);
  --border-strong: rgba(28, 26, 23, .2);
  --border-hover: rgba(192, 57, 43, .4);

  --text: #1c1a17;
  --text2: #5c574e;
  --text3: #9d9689;

  --accent: #c0392b;
  --accent-2: #c0392b;
  --accent-dim: rgba(192, 57, 43, .07);
  --accent-mid: rgba(192, 57, 43, .18);
  --accent-glow: rgba(192, 57, 43, .18);
  --accent-15: rgba(192, 57, 43, .12);
  --accent-contrast: #ffffff;

  --pink: #c0392b;
  --pink-dim: rgba(192, 57, 43, .07);

  --green: #4a7c59;
  --green-40: rgba(74, 124, 89, .35);
  --green-glow: rgba(74, 124, 89, .2);
  --red: #c0392b;
  --red-glow: rgba(192, 57, 43, .2);
  --orange: #b07a3c;
  --yellow: #a8863c;
  --yellow-40: rgba(168, 134, 60, .35);

  --glass: rgba(255, 255, 255, .8);
  --glass-border: rgba(28, 26, 23, .08);
  --glass-blur: 8px;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 18px 44px -22px rgba(28, 26, 23, .28);
  --glow: none;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-full: 9999px;

  --card-border-style: solid;
  --card-border-width: 0px;

  --font: 'Inter var-local', 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-display: Georgia, 'Songti SC', 'Source Han Serif SC', 'Noto Serif SC', 'SimSun', serif;
  --mono: 'JB Mono local', 'JetBrains Mono', Consolas, monospace;

  --tier-teal: #7a9a94;
  --tier-blue: #6b86a8;
  --tier-pink: #b5726f;
  --tier-orange: #c08a4a;
  --tier-red: #c0392b;

  --body-aurora: none;
  --body-texture: none;
  --body-texture-size: auto;

  --header-bg: rgba(250, 248, 244, .92);
  --header-border-image: none;
  --dur-fast: 200ms;
  --dur: 340ms;
  --dur-slow: 560ms;
}

html[data-theme="zen"] .app-header {
  border-bottom: 1px solid var(--border);
  border-image: none;
  position: sticky;
  top: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-theme="zen"] .app-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .01em;
  font-size: 20px;
}
html[data-theme="zen"] .brand-sub { font-family: var(--font-display); letter-spacing: .06em; }
html[data-theme="zen"] .brand-mark {
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: none;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 2px;
}

/* 卡片：去边框去阴影，改用发丝分隔线 + 大留白 */
html[data-theme="zen"] .sc-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 0;
  position: relative;
}
html[data-theme="zen"] .sc-card::before {
  /* 悬停/选中时由左延展的朱红细线 */
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
html[data-theme="zen"] .sc-card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(28, 26, 23, .015);
}
html[data-theme="zen"] .sc-card:hover::before { width: 100%; }
html[data-theme="zen"] .sc-card-body { padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); }
html[data-theme="zen"] .sc-card-bar { width: 2px; background: var(--tier-color); opacity: .5; }
html[data-theme="zen"] .sc-card-bar::after { display: none; }
html[data-theme="zen"] .sc-avatar { box-shadow: none; border-radius: 2px; font-family: var(--font-display); }
html[data-theme="zen"] a.sc-avatar-link:hover { transform: none; filter: brightness(.92); }
html[data-theme="zen"] .sc-uname { font-weight: 600; letter-spacing: .01em; }
html[data-theme="zen"] .sc-price {
  border: none;
  background: none;
  padding: 4px 0;
  font-family: var(--font-display);
  letter-spacing: .02em;
}
html[data-theme="zen"] .sc-price:hover { transform: none; }
html[data-theme="zen"] .sc-time { letter-spacing: .1em; color: var(--text3); }
html[data-theme="zen"] .sc-msg { line-height: 1.9; font-size: var(--fs-md); }
html[data-theme="zen"] .bv-highlight {
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent-mid);
  border-radius: 0;
  color: var(--accent);
  padding: 0 2px;
}
html[data-theme="zen"] .bv-highlight:hover,
html[data-theme="zen"] .bv-highlight.active {
  background: var(--accent-dim);
  box-shadow: none;
  border-bottom-color: var(--accent);
}
html[data-theme="zen"] .sc-card-bv-btn {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  color: var(--text2);
  padding: 3px 10px;
}
html[data-theme="zen"] .sc-card-bv-btn::before { display: none; }
html[data-theme="zen"] .sc-card-bv-btn:hover {
  transform: none;
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: none;
}
html[data-theme="zen"] .bv-visited { opacity: .45; filter: grayscale(.7); }

/* 档位：仅以左侧朱红细线长度与价格字色深浅区分，零星装饰 */
html[data-theme="zen"] .sc-card[data-price-tier="teal"]   { --bar-h: 22%; }
html[data-theme="zen"] .sc-card[data-price-tier="blue"]   { --bar-h: 38%; }
html[data-theme="zen"] .sc-card[data-price-tier="pink"]   { --bar-h: 56%; }
html[data-theme="zen"] .sc-card[data-price-tier="orange"] { --bar-h: 76%; }
html[data-theme="zen"] .sc-card[data-price-tier="red"]    { --bar-h: 100%; }
html[data-theme="zen"] .sc-card-bar {
  align-self: center;
  width: 3px;
  height: var(--bar-h, 40%);
  border-radius: 2px;
  background: var(--tier-color);
  opacity: 1;
}
html[data-theme="zen"] .sc-card[data-price-tier="orange"] .sc-price,
html[data-theme="zen"] .sc-card[data-price-tier="red"] .sc-price { font-weight: 700; }

/* 入场：极慢淡入 */
html[data-theme="zen"] .sc-card.is-entering {
  animation: zenCardIn 620ms cubic-bezier(.22, .61, .36, 1) var(--enter-delay, 0ms) both;
}
@keyframes zenCardIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 选中：朱红发丝线 + 极淡底色，零常驻动画 */
html[data-theme="zen"] .sc-card.selected {
  border-color: var(--border);
  background: rgba(192, 57, 43, .035);
  box-shadow: none;
  animation: none;
}
html[data-theme="zen"] .sc-card.selected::before { width: 100%; height: 2px; }

html[data-theme="zen"] .panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: none;
  background: transparent;
}
html[data-theme="zen"] .panel-title {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: .08em;
  font-size: var(--fs-base);
  color: var(--text);
  font-weight: 600;
}
html[data-theme="zen"] .panel-title::after { background: none; }
html[data-theme="zen"] .stat { border: none; border-top: 1px solid var(--border); border-radius: 0; background: transparent; padding: var(--sp-2) 0; }
html[data-theme="zen"] .stat:hover { transform: none; border-color: var(--border); }
html[data-theme="zen"] .stat-value { font-family: var(--font-display); font-weight: 600; }
html[data-theme="zen"] .seg { border: 1px solid var(--border); border-radius: 2px; background: transparent; }
html[data-theme="zen"] .seg-btn { border-radius: 2px; }
html[data-theme="zen"] .seg-btn:hover { background: transparent; color: var(--accent); }
html[data-theme="zen"] .seg-btn.active {
  background: none;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  transform: none;
  font-weight: 600;
}
html[data-theme="zen"] .theme-bar { border: none; background: transparent; gap: var(--sp-2); padding: 0; }
html[data-theme="zen"] .theme-btn { border-radius: 2px; padding: 3px 2px; }
html[data-theme="zen"] .theme-btn::before { width: 6px; height: 6px; }
html[data-theme="zen"] .theme-btn.active {
  background: none;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
  font-weight: 600;
}
html[data-theme="zen"] .btn {
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  background: transparent;
  font-weight: 500;
}
html[data-theme="zen"] .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); box-shadow: none; }
html[data-theme="zen"] .btn-primary { background: transparent; border-color: var(--green); color: var(--green); }
html[data-theme="zen"] .btn-primary:hover { background: rgba(74, 124, 89, .08); border-color: var(--green); color: var(--green); }
html[data-theme="zen"] .btn-danger { background: transparent; border-color: var(--red); color: var(--red); }
html[data-theme="zen"] .btn-danger:hover { background: var(--accent-dim); border-color: var(--red); color: var(--red); }
html[data-theme="zen"] .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="zen"] .btn-accent:hover { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; }
html[data-theme="zen"] .field { border: 1px solid var(--border-strong); border-radius: 2px; background: transparent; }
html[data-theme="zen"] .field:focus { box-shadow: none; border-color: var(--accent); }
html[data-theme="zen"] .switch-track { border-radius: var(--radius-full); background: var(--surface3); }
html[data-theme="zen"] .switch-track.on { background: var(--accent); }
html[data-theme="zen"] .badge { border: 1px solid var(--border); background: transparent; border-radius: 2px; }
html[data-theme="zen"] .badge.live { color: var(--green); border-color: var(--green-40); }
html[data-theme="zen"] .badge::before { animation: none; }
html[data-theme="zen"] .badge.live::before { animation: none; }
html[data-theme="zen"] #scroll-btn {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text2);
  border-radius: 2px;
  box-shadow: none;
}
html[data-theme="zen"] #scroll-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; transform: none; }
html[data-theme="zen"] #bv-tooltip {
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 18px 44px -22px rgba(28, 26, 23, .35);
}
html[data-theme="zen"] .empty-state .icon {
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
}
html[data-theme="zen"] .empty-state strong { font-family: var(--font-display); color: var(--text); }
html[data-theme="zen"] .legend-swatch { width: 2px; border-radius: 0; }
html[data-theme="zen"] .legend-bar { display: none; }
html[data-theme="zen"] .legend-count { font-family: var(--font-display); }
html[data-theme="zen"] .tips li::before { background: var(--text3); border-radius: 0; width: 3px; height: 3px; }
html[data-theme="zen"] .tips kbd { border-radius: 2px; background: transparent; }
html[data-theme="zen"] .app-footer { border-top: 1px solid var(--border); }
html[data-theme="zen"] .app-footer a { color: var(--text2); text-decoration: underline; text-underline-offset: 3px; }
html[data-theme="zen"] .app-footer a:hover { color: var(--accent); text-decoration: none; }
html[data-theme="zen"] .toast { border-radius: 3px; box-shadow: 0 18px 40px -20px rgba(28, 26, 23, .5); }
html[data-theme="zen"] .toast.success { background: var(--green); }
/* 滚动条：发丝灰直条、零圆角，克制不抢戏 */
html[data-theme="zen"] .scroll-container::-webkit-scrollbar-thumb,
html[data-theme="zen"] .sidebar::-webkit-scrollbar-thumb,
html[data-theme="zen"] .page-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0; }
html[data-theme="zen"] .scroll-container::-webkit-scrollbar-thumb:hover,
html[data-theme="zen"] .sidebar::-webkit-scrollbar-thumb:hover,
html[data-theme="zen"] .page-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--text2); }
html[data-theme="zen"] .room-avatar { border-radius: 2px; box-shadow: none; border: 1px solid var(--border); }
/* 直播间信息条：去掉卡片感，只留一条发丝线与大量留白，朱红仅用于 hover */
html[data-theme="zen"] .room-banner {
  padding: var(--sp-3) 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-theme="zen"] .room-uid {
  padding: 0;
  border: none;
  background: none;
  color: var(--text3);
}
html[data-theme="zen"] .room-enter {
  border-color: var(--border);
  border-radius: 2px;
  background: transparent;
  color: var(--text2);
  font-weight: 500;
}
html[data-theme="zen"] .room-enter:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
  transform: none;
}

/* ── 侧栏面板错峰入场（四主题共享结构，幅度随主题缓动变化） ── */
.panel.is-entering {
  animation: panelIn var(--dur-slow) var(--ease-out) var(--enter-delay, 0ms) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="brutal"] .panel.is-entering {
  animation: brutalPanelIn 220ms steps(3, end) var(--enter-delay, 0ms) both;
}
@keyframes brutalPanelIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}