/* ═══════════════════════════════════════════════════════════════
   遁一 · 二次元主题层（可切换）
   ───────────────────────────────────────────────────────────────
   · 不修改 style.css 的任何布局，只在其后追加"主题层"，零回归风险
   · 三套主题 = 三组设计令牌 + 一段共享的「二次元基底」规则
   · 切换方式：<html data-style="cel|sakura|neon">，设置页一键换 + 本机记忆
   · 只用 var() 与半透明叠加，不用 color-mix()（老 WebView 也稳）
   · 所有新令牌在三套主题里都有定义，tests/theme.test.js 会强制校验

     cel    赛璐璐动画：平涂 + 墨线粗描边 + 无模糊硬阴影 + 网点（默认）
     sakura 樱花萌系　：奶油白 + 樱粉 + 大圆角贴纸感 + 花瓣
     neon   霓虹和风　：深夜底 + 霓虹发光 + 网格线稿
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── 令牌兜底：万一 data-style 缺失也不会出现空白色 ─────────── */
:root {
  --surface-2: rgba(255, 255, 255, .06);
  --surface-3: rgba(255, 255, 255, .07);
  --ink-on-accent: #1a1206;
  --bd-w: 1px;
  --bd-color: rgba(255, 255, 255, .14);
  --bd-color-soft: rgba(255, 255, 255, .08);
  --hard-shadow: none;
  --soft-shadow: none;
  --focus-ring: rgba(201, 162, 39, .55);
  --focus-ring-soft: rgba(201, 162, 39, .22);
  --tint-gold: rgba(201, 162, 39, .16);
  --tint-violet: rgba(124, 92, 255, .16);
  --tint-jade: rgba(63, 174, 143, .16);
  --tint-cinnabar: rgba(179, 58, 58, .16);
  --topbar-bg: rgba(8, 10, 20, .96);
  --topbar-bg-fade: rgba(8, 10, 20, .7);
  --tabbar-bg: rgba(8, 10, 20, .99);
  --tabbar-bg-2: rgba(8, 10, 20, .6);
  --hero-1: #fff6d8;
  --hero-2: #96771a;
  --hero-shadow: rgba(201, 162, 39, .25);
  --glow-filter: none;
  --font-display: "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* ═══════════════ 主题 A · 赛璐璐动画（cel）═══════════════ */
html[data-style="cel"] {
  --bg: #e8f7ff;
  --bg-2: #d7efff;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --line: rgba(35, 42, 77, .85);
  --line-soft: rgba(35, 42, 77, .45);
  --fg: #232a4d;
  --fg-dim: #5f6ea8;
  --gold: #37b6ff;
  --gold-bright: #14679f;
  --cinnabar: #e8425f;
  --violet: #6a4bff;
  --jade: #159f6f;
  --surface-2: #f2f9ff;
  --surface-3: #dcf0ff;
  /* 亮底主色上不要用白字（实测对比只有 2.26，看不清）→ 用深墨字 */
  --ink-on-accent: #0b2540;
  --bd-w: 3px;
  --bd-color: #232a4d;
  --bd-color-soft: rgba(35, 42, 77, .32);
  --hard-shadow: 5px 5px 0 #232a4d;
  --soft-shadow: 4px 4px 0 rgba(35, 42, 77, .85);
  --focus-ring: #37b6ff;
  --focus-ring-soft: rgba(55, 182, 255, .28);
  --tint-gold: rgba(55, 182, 255, .16);
  --tint-violet: rgba(106, 75, 255, .13);
  --tint-jade: rgba(21, 159, 111, .14);
  --tint-cinnabar: rgba(232, 66, 95, .13);
  --topbar-bg: rgba(232, 247, 255, .97);
  --topbar-bg-fade: rgba(232, 247, 255, .62);
  --tabbar-bg: rgba(255, 255, 255, .99);
  --tabbar-bg-2: rgba(215, 239, 255, .8);
  --hero-1: #ffffff;
  --hero-2: #14679f;
  --hero-shadow: rgba(35, 42, 77, .28);
  --glow-filter: drop-shadow(0 3px 0 rgba(35, 42, 77, .9));
  --radius: 16px;
  /* 五行色：浅底必须用深色，否则"金 #cfd6dd"这类会白到看不见 */
  --wood: #2e8b5f;
  --fire: #d1453d;
  --earth: #9a6b2f;
  --metal: #5a6b7c;
  --water: #1f6fbf;
  --wx-fade: rgba(255, 255, 255, .55);
  color-scheme: light;
}
html[data-style="cel"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(35, 42, 77, .13) 1px, transparent 1.5px);
  background-size: 12px 12px;
}
html[data-style="cel"] .starfield { display: none; }
html[data-style="cel"] .glow {
  background:
    radial-gradient(60% 40% at 88% 0%, rgba(55, 182, 255, .35), transparent 70%),
    radial-gradient(55% 38% at 4% 102%, rgba(255, 207, 77, .4), transparent 70%);
}

/* ═══════════════ 主题 B · 樱花萌系（sakura）═══════════════ */
html[data-style="sakura"] {
  --bg: #fff5fa;
  --bg-2: #ffeef6;
  --panel: #fffdfe;
  --panel-solid: #ffffff;
  --line: rgba(255, 143, 177, .55);
  --line-soft: rgba(255, 143, 177, .32);
  --fg: #5b3a52;
  --fg-dim: #a8788f;
  --gold: #ff8fb1;
  --gold-bright: #cf3a72;
  --cinnabar: #ff5d84;
  --violet: #9f6ff0;
  --jade: #1fa883;
  --surface-2: #fff6fa;
  --surface-3: #ffe8f1;
  /* 樱粉是亮色，白字看不清（对比 2.14）→ 用深梅子色 */
  --ink-on-accent: #4a1030;
  --bd-w: 3px;
  --bd-color: #ffd0e2;
  --bd-color-soft: rgba(255, 143, 177, .38);
  --hard-shadow: 0 6px 0 #ffd0e2;
  --soft-shadow: 0 8px 0 rgba(255, 208, 226, .9);
  --focus-ring: #ff8fb1;
  --focus-ring-soft: rgba(255, 143, 177, .28);
  --tint-gold: rgba(255, 143, 177, .18);
  --tint-violet: rgba(159, 111, 240, .14);
  --tint-jade: rgba(31, 168, 131, .14);
  --tint-cinnabar: rgba(255, 93, 132, .14);
  --topbar-bg: rgba(255, 245, 250, .97);
  --topbar-bg-fade: rgba(255, 245, 250, .6);
  --tabbar-bg: rgba(255, 255, 255, .99);
  --tabbar-bg-2: rgba(255, 238, 246, .85);
  --hero-1: #ffffff;
  --hero-2: #cf3a72;
  --hero-shadow: rgba(255, 143, 177, .4);
  --glow-filter: drop-shadow(0 0 8px rgba(255, 143, 177, .85));
  --radius: 22px;
  /* 五行色：樱粉底上用偏甜的中等饱和，保证可读又不刺眼 */
  --wood: #23a06b;
  --fire: #e04a5a;
  --earth: #a9702c;
  --metal: #6b7a8c;
  --water: #2a7bc4;
  --wx-fade: rgba(255, 255, 255, .6);
  color-scheme: light;
}
html[data-style="sakura"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .8;
  background-image:
    radial-gradient(closest-side, rgba(255, 179, 205, .3), transparent) 0 0/86px 86px,
    radial-gradient(closest-side, rgba(159, 111, 240, .16), transparent) 44px 62px/122px 122px,
    radial-gradient(closest-side, rgba(255, 224, 102, .2), transparent) 92px 22px/152px 152px;
}
html[data-style="sakura"] .starfield { opacity: .3; }
html[data-style="sakura"] .glow {
  background:
    radial-gradient(60% 40% at 86% 0%, rgba(255, 143, 177, .4), transparent 70%),
    radial-gradient(50% 35% at 6% 100%, rgba(124, 199, 255, .35), transparent 70%);
}

/* ═══════════════ 主题 C · 霓虹和风（neon）═══════════════ */
html[data-style="neon"] {
  --bg: #0c0a1c;
  --bg-2: #141031;
  --panel: rgba(28, 22, 58, .92);
  --panel-solid: #1a1440;
  --line: rgba(61, 245, 255, .45);
  --line-soft: rgba(61, 245, 255, .22);
  --fg: #f2ecff;
  --fg-dim: #9187cc;
  --gold: #3df5ff;
  --gold-bright: #8dfaff;
  --cinnabar: #ff3d7f;
  --violet: #c77dff;
  --jade: #3df5b0;
  --surface-2: rgba(61, 245, 255, .08);
  --surface-3: rgba(255, 255, 255, .08);
  --ink-on-accent: #08111c;
  --bd-w: 1.5px;
  --bd-color: rgba(61, 245, 255, .5);
  --bd-color-soft: rgba(61, 245, 255, .24);
  --hard-shadow: 0 0 0 1px rgba(255, 61, 127, .16), 0 0 22px rgba(61, 245, 255, .18);
  --soft-shadow: 0 0 18px rgba(199, 125, 255, .28);
  --focus-ring: #3df5ff;
  --focus-ring-soft: rgba(61, 245, 255, .25);
  --tint-gold: rgba(61, 245, 255, .14);
  --tint-violet: rgba(199, 125, 255, .16);
  --tint-jade: rgba(61, 245, 176, .14);
  --tint-cinnabar: rgba(255, 61, 127, .16);
  --topbar-bg: rgba(12, 10, 28, .96);
  --topbar-bg-fade: rgba(12, 10, 28, .66);
  --tabbar-bg: rgba(12, 10, 28, .99);
  --tabbar-bg-2: rgba(12, 10, 28, .7);
  --hero-1: #ffffff;
  --hero-2: #c77dff;
  --hero-shadow: rgba(199, 125, 255, .4);
  --glow-filter: drop-shadow(0 0 9px rgba(61, 245, 255, .85));
  --radius: 18px;
  /* 五行色：深底用霓虹亮色 */
  --wood: #4caf7d;
  --fire: #ff6b7a;
  --earth: #d9a86a;
  --metal: #dfe6ee;
  --water: #4a90d9;
  --wx-fade: rgba(255, 255, 255, .35);
  color-scheme: dark;
}
html[data-style="neon"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(61, 245, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 61, 127, .06) 1px, transparent 1px);
  background-size: 100% 26px, 26px 100%;
}
html[data-style="neon"] .glow {
  background:
    radial-gradient(60% 42% at 84% 2%, rgba(199, 125, 255, .38), transparent 70%),
    radial-gradient(55% 38% at 8% 96%, rgba(61, 245, 255, .22), transparent 70%);
}

/* ═══════════════════════════════════════════════════════════
   共享「二次元基底」规则：三种主题共用，全部走令牌
   （html[data-style] 前缀的优先级高于 style.css 里的原始规则）
   ═══════════════════════════════════════════════════════════ */

/* ── 字体：把古风楷体换成圆体/黑体，这是"去古风"最关键的一刀 ── */
html[data-style] body,
html[data-style] input,
html[data-style] textarea,
html[data-style] select,
html[data-style] button { font-family: var(--font-body); }
html[data-style] .brand-text b,
html[data-style] .screen-title,
html[data-style] .hero h1,
html[data-style] .panel-title,
html[data-style] .chart-head .cname,
html[data-style] .daymaster b,
html[data-style] .pillars .pc.gz,
html[data-style] .dy-item .gz,
html[data-style] .ai-head b,
html[data-style] .ai-result h3,
html[data-style] .auth-hero h2,
html[data-style] .level-head b,
html[data-style] .daily-head .dh-date,
html[data-style] .lesson-item .idx,
html[data-style] .pcard .avatar,
html[data-style] .wx-row .name,
html[data-style] .section-title h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 1px;
}

/* ── 卡片 / 面板：描边 + 硬阴影 + 大圆角 ── */
html[data-style] .panel,
html[data-style] .pcard,
html[data-style] .tile,
html[data-style] .lesson-item,
html[data-style] .ai-head,
html[data-style] .ai-result .ai-card,
html[data-style] .daily-head {
  background: var(--panel);
  border: var(--bd-w) solid var(--bd-color);
  border-radius: var(--radius);
  box-shadow: var(--hard-shadow);
  backdrop-filter: none;
  color: var(--fg);
}
html[data-style] .pcard::before { display: none; }
html[data-style] .pcard:active,
html[data-style] .tile:active,
html[data-style] .lesson-item:active { transform: translate(3px, 3px); box-shadow: none; }

html[data-style] .panel-title,
html[data-style] .section-title h2 { color: var(--gold-bright); }
html[data-style] .panel-title::before,
html[data-style] .section-title::before {
  width: 5px; height: 15px; border-radius: 3px;
  background: var(--gold); border: 2px solid var(--bd-color); box-shadow: 2px 2px 0 var(--bd-color);
}

/* ── 按钮：平涂 + 描边 + 位移硬阴影，按下真的"陷下去" ── */
html[data-style] .btn { border-radius: calc(var(--radius) - 4px); font-weight: 800; letter-spacing: .5px; }
html[data-style] .btn.primary {
  color: var(--ink-on-accent); background: var(--gold);
  border: var(--bd-w) solid var(--bd-color); box-shadow: var(--soft-shadow); text-shadow: none;
}
html[data-style] .btn.ghost {
  background: var(--surface-2); color: var(--fg);
  border: var(--bd-w) solid var(--bd-color-soft); box-shadow: var(--soft-shadow);
}
html[data-style] .btn.danger {
  background: var(--tint-cinnabar); color: var(--cinnabar);
  border: var(--bd-w) solid var(--cinnabar); box-shadow: var(--soft-shadow);
}
html[data-style] .btn:active { transform: translate(3px, 3px); box-shadow: none; }
html[data-style] .icon-btn {
  background: var(--surface-2); border: var(--bd-w) solid var(--bd-color-soft);
  border-radius: 12px; box-shadow: var(--soft-shadow); color: var(--fg);
}
html[data-style] .icon-btn:active { transform: translate(2px, 2px); box-shadow: none; }

/* ── 输入 / 选择 ── */
html[data-style] input[type=text],
html[data-style] input[type=number],
html[data-style] input[type=password],
html[data-style] input[type=date],
html[data-style] select,
html[data-style] textarea {
  background: var(--panel-solid); border: var(--bd-w) solid var(--bd-color-soft);
  color: var(--fg); border-radius: calc(var(--radius) - 5px); font-weight: 600;
}
html[data-style] input:focus,
html[data-style] select:focus,
html[data-style] textarea:focus {
  border-color: var(--focus-ring); background: var(--panel-solid);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}
html[data-style] option { background: var(--panel-solid); color: var(--fg); }
html[data-style] ::placeholder { color: var(--fg-dim); opacity: .85; }

/* ── 四柱 / 五行 / 大运 / 选项格子 ── */
html[data-style] .pillars .pc,
html[data-style] .dy-item,
html[data-style] .shichen-grid button,
html[data-style] .chips button,
html[data-style] .quiz-opt,
html[data-style] .glossary .g {
  background: var(--surface-2); border: 2px solid var(--bd-color-soft);
  border-radius: calc(var(--radius) - 6px); color: var(--fg);
}
html[data-style] .pillars .pc.gz { font-size: 26px; font-weight: 900; }
html[data-style] .pillars .pc .ss { color: var(--gold-bright); font-weight: 700; }
html[data-style] .pillars .pc .sub,
html[data-style] .dy-item .age,
html[data-style] .dy-item .yr,
html[data-style] .glossary .g span,
html[data-style] .lesson-item .t span,
html[data-style] .pcard .info span,
html[data-style] .hero-sub,
html[data-style] .field > label,
html[data-style] .chart-head .cmeta,
html[data-style] .step-item,
html[data-style] .quiz-explain,
html[data-style] .tip,
html[data-style] .ai-head .pz,
html[data-style] .daily-head .dh-lunar,
html[data-style] .level-head .ldesc,
html[data-style] .ver { color: var(--fg-dim); }
html[data-style] .dy-item .gz,
html[data-style] .pillars .pc { color: var(--fg); }
html[data-style] .dy-item.now,
html[data-style] .shichen-grid button.is-on {
  background: var(--tint-gold); border-color: var(--gold); color: var(--gold-bright); font-weight: 800;
}
html[data-style] .chips button.is-on,
html[data-style] .seg-item.is-on {
  background: var(--gold); color: var(--ink-on-accent);
  border: 2px solid var(--bd-color); font-weight: 800; box-shadow: 2px 2px 0 var(--bd-color);
}
html[data-style] .seg { background: var(--surface-2); border: 2px solid var(--bd-color-soft); border-radius: calc(var(--radius) - 4px); }
html[data-style] .seg-item { border-radius: calc(var(--radius) - 8px); font-weight: 700; color: var(--fg-dim); }
html[data-style] .wx-row .bar,
html[data-style] .school-prog .sp-bar {
  background: var(--surface-3); border: 2px solid var(--bd-color-soft); border-radius: 999px; height: 12px;
}
html[data-style] .wx-row .bar i,
html[data-style] .school-prog .sp-bar i { border-radius: 999px; }
html[data-style] .school-prog .sp-bar i { background: linear-gradient(90deg, var(--gold), var(--violet)); }
html[data-style] .wx-row .val { color: var(--fg-dim); }
/* 注意：不要在这里给 .wx-row .name 上色，否则会把 .wx-木/火/土/金/水 的五行色压掉 */

/* ── 标签 / 神煞 / 徽章 / 头像 ── */
html[data-style] .tag,
html[data-style] .ss-item,
html[data-style] .count,
html[data-style] .level-head .lnum,
html[data-style] .lesson-item .idx {
  background: var(--surface-2); color: var(--gold-bright);
  border: 2px solid var(--bd-color-soft); border-radius: 999px; font-weight: 700;
}
html[data-style] .tag.violet { color: var(--violet); border-color: var(--violet); }
html[data-style] .tag.jade { color: var(--jade); border-color: var(--jade); }
html[data-style] .tag.red { color: var(--cinnabar); border-color: var(--cinnabar); }
html[data-style] .tag.dim { color: var(--fg-dim); border-color: var(--bd-color-soft); }
html[data-style] .ss-item.bad { color: var(--cinnabar); border-color: var(--cinnabar); background: var(--tint-cinnabar); }
html[data-style] .lesson-item.done .idx { background: var(--tint-jade); color: var(--jade); border-color: var(--jade); }
html[data-style] .pcard .avatar {
  background: var(--tint-gold); border: 2px solid var(--bd-color-soft);
  color: var(--gold-bright); border-radius: calc(var(--radius) - 8px);
}
html[data-style] .pcard .del {
  background: var(--tint-cinnabar); border: 2px solid var(--cinnabar); color: var(--cinnabar);
}
html[data-style] .empty {
  border: var(--bd-w) dashed var(--bd-color-soft); border-radius: var(--radius);
  background: var(--surface-2); color: var(--fg-dim);
}
html[data-style] .empty p { color: var(--fg); }
html[data-style] .daymaster { background: var(--tint-gold); border: 2px solid var(--bd-color-soft); }
html[data-style] .daymaster b { color: var(--gold-bright); }

/* ── 顶栏 / 底栏 / Toast ── */
html[data-style] .topbar {
  background: linear-gradient(180deg, var(--topbar-bg), var(--topbar-bg-fade) 70%, transparent);
  border-bottom: 1px solid var(--bd-color-soft);
}
html[data-style] .brand-text b { color: var(--gold-bright); letter-spacing: 2px; }
html[data-style] .brand-text i { color: var(--fg-dim); }
html[data-style] .logo {
  background: var(--gold); color: var(--ink-on-accent);
  border: var(--bd-w) solid var(--bd-color); box-shadow: var(--soft-shadow);
  font-family: var(--font-display);
}
html[data-style] .tabbar {
  background: linear-gradient(0deg, var(--tabbar-bg), var(--tabbar-bg) 60%, var(--tabbar-bg-2));
  border-top: var(--bd-w) solid var(--bd-color-soft);
}
html[data-style] .tab { font-weight: 700; color: var(--fg-dim); }
html[data-style] .tab.is-on { color: var(--gold-bright); }
html[data-style] .tab.is-on span { filter: var(--glow-filter); }
html[data-style] .toast {
  background: var(--panel-solid); border: var(--bd-w) solid var(--bd-color); color: var(--fg);
  box-shadow: var(--hard-shadow); border-radius: calc(var(--radius) - 4px); font-weight: 700;
}

/* ── AI 解读区 ── */
html[data-style] .ai-result p,
html[data-style] .ai-result li,
html[data-style] .lesson-body-text p,
html[data-style] .lesson-points .pt { color: var(--fg); }
html[data-style] .ai-result strong,
html[data-style] .ai-result h3,
html[data-style] .lesson-body-text p b,
html[data-style] .glossary .g b,
html[data-style] .ai-head b,
html[data-style] .auth-hero h2,
html[data-style] .chart-head .cname,
html[data-style] .level-head b,
html[data-style] .daily-head .dh-date { color: var(--gold-bright); }
html[data-style] .ai-result .meta { border-top: 2px dashed var(--bd-color-soft); color: var(--fg-dim); }
html[data-style] .ai-loading .dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
html[data-style] .ai-err,
html[data-style] .warn.high {
  background: var(--tint-cinnabar); border: var(--bd-w) solid var(--cinnabar);
  color: var(--cinnabar); border-radius: calc(var(--radius) - 4px); font-weight: 600;
}
html[data-style] .warn.mid {
  background: var(--tint-gold); border: var(--bd-w) solid var(--gold); color: var(--gold-bright);
}
html[data-style] .warn.low {
  background: var(--tint-violet); border: var(--bd-w) solid var(--violet); color: var(--violet);
}
html[data-style] details summary { color: var(--gold-bright); font-weight: 700; }
html[data-style] .step-item b { color: var(--fg); }

/* ── 学堂 / 答题 ── */
html[data-style] .quiz-opt.right {
  background: var(--tint-jade); border-color: var(--jade); color: var(--jade); font-weight: 700;
}
html[data-style] .quiz-opt.wrong {
  background: var(--tint-cinnabar); border-color: var(--cinnabar); color: var(--cinnabar); font-weight: 700;
}
html[data-style] .quiz-q .qt,
html[data-style] .quiz-opt { color: var(--fg); }
html[data-style] .quiz-q .qn { color: var(--gold-bright); }
html[data-style] .quiz-explain { border-left: 3px solid var(--bd-color-soft); }
html[data-style] .lesson-points .pt::before { color: var(--gold); }

/* ── 每日运势语义色 ── */
html[data-style] .panel.tone-大吉,
html[data-style] .panel.tone-偏吉 { border-color: var(--jade); }
html[data-style] .panel.tone-偏逆 { border-color: var(--gold); }
html[data-style] .panel.tone-宜守 { border-color: var(--cinnabar); }
html[data-style] .panel.tone-大吉 .panel-title,
html[data-style] .panel.tone-偏吉 .panel-title { color: var(--jade); }
html[data-style] .panel.tone-宜守 .panel-title { color: var(--cinnabar); }

/* ── 首页 Hero ── */
html[data-style] .hero h1 {
  background: linear-gradient(180deg, var(--hero-1), var(--hero-2) 55%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 var(--hero-shadow));
}
html[data-style] .hero-sub span { color: var(--gold); opacity: 1; }
html[data-style] .hero-fox { filter: drop-shadow(0 4px 10px var(--hero-shadow)); }

/* ── 卦页（梅花/六爻）在主题下的统一处理：让 gua.css 的深色卡跟着令牌走 ── */
html[data-style] #screen-gua .panel,
html[data-style] #screen-gua .tile { background: var(--panel); border-color: var(--bd-color); color: var(--fg); }

/* ── 无障碍：尊重系统的"减少动态效果" ── */
@media (prefers-reduced-motion: reduce) {
  html[data-style] *,
  html[data-style] *::before,
  html[data-style] *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
}

/* ── 风格选择器（设置页） ── */
.style-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.style-picker button {
  position: relative; padding: 10px 6px 11px; cursor: pointer; font-family: inherit; font-size: 12px;
  font-weight: 800; color: var(--fg); background: var(--surface-2);
  border: 2px solid var(--bd-color-soft); border-radius: calc(var(--radius) - 5px); text-align: center;
}
.style-picker button .sw {
  display: block; height: 34px; border-radius: 9px; margin-bottom: 7px; border: 2px solid var(--bd-color);
}
.style-picker button .sw.cel-sw {
  background-image: radial-gradient(circle at 1px 1px, rgba(35, 42, 77, .2) 1px, transparent 1.4px), linear-gradient(180deg, #eaf7ff, #cfe9ff);
  background-size: 8px 8px, 100% 100%;
}
.style-picker button .sw.sakura-sw { background: linear-gradient(160deg, #fff5fa 0%, #ffd6e6 60%, #ffb3cd 100%); }
.style-picker button .sw.neon-sw { background: linear-gradient(160deg, #0c0a1c 0%, #2a1b52 55%, #ff3d7f 150%); border-color: rgba(61, 245, 255, .6); }
.style-picker button.is-on {
  border-color: var(--gold); box-shadow: var(--soft-shadow); background: var(--tint-gold); color: var(--gold-bright);
}
.style-picker button.is-on::after {
  content: "✓"; position: absolute; top: 5px; right: 7px; font-size: 10px; font-weight: 900;
  color: var(--ink-on-accent); background: var(--gold); border: 2px solid var(--bd-color);
  width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; line-height: 1;
}
.style-picker button:active { transform: translate(2px, 2px); }
.style-note { font-size: 11.5px; color: var(--fg-dim); margin-top: 8px; line-height: 1.6; }