/* ═══════════════════════════════════════════════
   遁一 · 多风格主题
   默认：樱粉甜心（二次元可爱）　可切换 5 套
   ═══════════════════════════════════════════════ */

/* ───────── ① 樱粉甜心 · 二次元可爱（默认） ───────── */
[data-theme="moe"] {
  /* 奶油白极简：米白底 + 白卡片 + 单一蜜桃点缀，治愈系留白 */
  --bg: #fbf6f0;
  --bg-2: #f5ede4;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --line: #f0e5da;
  --line-strong: #f2a795;
  --line-soft: #f0e6db;
  --fg: #4a403a;
  --fg-dim: #a49484;
  --gold: #f79a8c;
  --gold-bright: #fdaa99;
  --gold-hi: #ffeee8;
  --gold-deep: #ee8372;
  --gold-fg: #c9603f;
  --on-gold: #ffffff;
  --cinnabar: #e4695a;
  --cinnabar-deep: #c9503f;
  --cinnabar-fg: #d9604f;
  --violet: #a08ad8;
  --violet-fg: #7f68c2;
  --jade: #6fbf9a;
  --jade-fg: #3f9a72;
  --water: #7fb6e0;
  --fire: #f08a6e;
  --earth: #d9a85c;
  --metal: #a9b0b8;
  --wood: #79c796;
  --sur-1: rgba(120, 95, 75, .05);
  --sur-2: rgba(120, 95, 75, .08);
  --bar-1: rgba(251, 246, 240, .96);
  --bar-2: rgba(251, 246, 240, .84);
  --bar-3: rgba(251, 246, 240, .55);
  --toast-bg: rgba(74, 64, 58, .94);
  --fade: rgba(90, 70, 55, .35);
  --glow-1: rgba(247, 154, 140, .16);
  --glow-2: rgba(247, 196, 140, .14);
  --glow-3: rgba(160, 138, 216, .12);
  --radius: 20px;
  --radius-sm: 14px;
  --card-shadow: 0 2px 12px rgba(150, 120, 100, .08);
  --card-shadow-lg: 0 10px 30px rgba(150, 120, 100, .14);
  --font-ui: "Yuanti SC", "圆体-简", "Hiragino Sans GB", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --star-op: 0;
  --cute: 1;
  --toast-fg: #fff9f5;
  --acc-soft: rgba(247, 154, 140, .13);
  --acc-line: rgba(247, 154, 140, .45);
  --acc-shadow: rgba(247, 154, 140, .28);
  --acc-strong: rgba(247, 154, 140, .95);
}

/* ───────── ② 星夜紫金 · 玄学深夜 ───────── */
[data-theme="starry"] {
  --bg: #080a14;
  --bg-2: #0d1120;
  --panel: rgba(22, 27, 48, .78);
  --panel-solid: #161b30;
  --line: rgba(201, 162, 39, .18);
  --line-strong: rgba(232, 200, 122, .35);
  --line-soft: rgba(255, 255, 255, .07);
  --fg: #ece7da;
  --fg-dim: #9a9384;
  --gold: #c9a227;
  --gold-bright: #e8c84a;
  --gold-hi: #fff6d8;
  --gold-deep: #96771a;
  --gold-fg: #f0dfa8;
  --on-gold: #1a1206;
  --cinnabar: #b33a3a;
  --cinnabar-deep: #7d2626;
  --cinnabar-fg: #f2c0c0;
  --violet: #7c5cff;
  --violet-fg: #cdbfff;
  --jade: #3fae8f;
  --jade-fg: #7fd8bb;
  --water: #4a90d9;
  --fire: #d9534f;
  --earth: #b98b4a;
  --metal: #cfd6dd;
  --wood: #4caf7d;
  --sur-1: rgba(255, 255, 255, .04);
  --sur-2: rgba(255, 255, 255, .06);
  --bar-1: rgba(8, 10, 20, .96);
  --bar-2: rgba(8, 10, 20, .72);
  --bar-3: rgba(8, 10, 20, .6);
  --toast-bg: rgba(22, 27, 48, .97);
  --fade: rgba(11, 14, 26, .55);
  --glow-1: rgba(124, 92, 255, .18);
  --glow-2: rgba(201, 162, 39, .13);
  --glow-3: rgba(179, 58, 58, .12);
  --radius: 16px;
  --radius-sm: 11px;
  --card-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  --card-shadow-lg: 0 12px 34px rgba(0, 0, 0, .45);
  --font-ui: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --star-op: .9;
  --cute: 0;
  --toast-fg: #ece7da;
  --acc-soft: rgba(201, 162, 39, .12);
  --acc-line: rgba(201, 162, 39, .3);
  --acc-shadow: rgba(201, 162, 39, .3);
  --acc-strong: rgba(201, 162, 39, .85);
}

/* ───────── ③ 薄荷苏打 · 清爽元气 ───────── */
[data-theme="mint"] {
  --bg: #eefaf7;
  --bg-2: #e2f6f1;
  --panel: rgba(255, 255, 255, .9);
  --panel-solid: #ffffff;
  --line: rgba(56, 190, 170, .3);
  --line-strong: rgba(56, 190, 170, .55);
  --line-soft: rgba(40, 120, 110, .14);
  --fg: #2f5350;
  --fg-dim: #7fa8a3;
  --gold: #f0a83c;
  --gold-bright: #e8932a;
  --gold-hi: #fff2d8;
  --gold-deep: #c4761a;
  --gold-fg: #9c5f10;
  --on-gold: #3d2606;
  --cinnabar: #ff7b6b;
  --cinnabar-deep: #e04a38;
  --cinnabar-fg: #d1432f;
  --violet: #7a7bff;
  --violet-fg: #4a4bd8;
  --jade: #22b894;
  --jade-fg: #0d8467;
  --water: #3d9ae0;
  --fire: #ff8a5c;
  --earth: #caa055;
  --metal: #8fa3b5;
  --wood: #43bf82;
  --sur-1: rgba(20, 110, 100, .06);
  --sur-2: rgba(20, 110, 100, .09);
  --bar-1: rgba(238, 250, 247, .97);
  --bar-2: rgba(238, 250, 247, .82);
  --bar-3: rgba(238, 250, 247, .5);
  --toast-bg: rgba(30, 70, 66, .94);
  --fade: rgba(190, 240, 232, .5);
  --glow-1: rgba(60, 210, 190, .28);
  --glow-2: rgba(255, 190, 110, .22);
  --glow-3: rgba(120, 140, 255, .18);
  --radius: 18px;
  --radius-sm: 12px;
  --card-shadow: 0 6px 20px rgba(40, 170, 160, .13);
  --card-shadow-lg: 0 10px 30px rgba(40, 170, 160, .2);
  --font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --star-op: 0;
  --cute: 1;
  --toast-fg: #f2fffb;
  --acc-soft: rgba(240, 168, 60, .14);
  --acc-line: rgba(240, 168, 60, .4);
  --acc-shadow: rgba(240, 168, 60, .3);
  --acc-strong: rgba(240, 168, 60, .9);
}

/* ───────── ④ 水墨宣纸 · 古风雅致 ───────── */
[data-theme="ink"] {
  --bg: #f6f1e6;
  --bg-2: #efe7d6;
  --panel: rgba(255, 253, 247, .9);
  --panel-solid: #fffdf7;
  --line: rgba(150, 110, 70, .28);
  --line-strong: rgba(150, 110, 70, .5);
  --line-soft: rgba(120, 95, 65, .14);
  --fg: #3b3229;
  --fg-dim: #8d7f6c;
  --gold: #b0873a;
  --gold-bright: #9c7526;
  --gold-hi: #f6e9c8;
  --gold-deep: #7d5a17;
  --gold-fg: #7d5a17;
  --on-gold: #fdf6e6;
  --cinnabar: #b33a32;
  --cinnabar-deep: #8a241f;
  --cinnabar-fg: #a33027;
  --violet: #6b5a92;
  --violet-fg: #55457c;
  --jade: #4a8a72;
  --jade-fg: #356353;
  --water: #4b7a94;
  --fire: #c1553f;
  --earth: #a8823f;
  --metal: #8c8b84;
  --wood: #558a55;
  --sur-1: rgba(110, 85, 50, .06);
  --sur-2: rgba(110, 85, 50, .09);
  --bar-1: rgba(246, 241, 230, .97);
  --bar-2: rgba(246, 241, 230, .82);
  --bar-3: rgba(246, 241, 230, .5);
  --toast-bg: rgba(59, 50, 41, .94);
  --fade: rgba(214, 198, 168, .55);
  --glow-1: rgba(150, 110, 70, .14);
  --glow-2: rgba(176, 135, 58, .12);
  --glow-3: rgba(179, 58, 50, .08);
  --radius: 10px;
  --radius-sm: 8px;
  --card-shadow: 0 4px 14px rgba(120, 95, 60, .12);
  --card-shadow-lg: 0 8px 24px rgba(120, 95, 60, .18);
  --font-ui: "KaiTi", "STKaiti", "Kaiti SC", "Songti SC", "SimSun", serif;
  --star-op: 0;
  --cute: 0;
  --toast-fg: #fdf6e6;
  --acc-soft: rgba(176, 135, 58, .12);
  --acc-line: rgba(176, 135, 58, .32);
  --acc-shadow: rgba(176, 135, 58, .25);
  --acc-strong: rgba(176, 135, 58, .85);
}

/* ───────── ⑤ 赛博霓虹 · 未来感 ───────── */
[data-theme="cyber"] {
  --bg: #0a0618;
  --bg-2: #120a26;
  --panel: rgba(24, 14, 48, .8);
  --panel-solid: #1a0f34;
  --line: rgba(0, 240, 255, .22);
  --line-strong: rgba(0, 240, 255, .5);
  --line-soft: rgba(255, 255, 255, .08);
  --fg: #e8e6ff;
  --fg-dim: #9b93c4;
  --gold: #ffd23f;
  --gold-bright: #ffe066;
  --gold-hi: #fff8d0;
  --gold-deep: #c99a10;
  --gold-fg: #ffe98f;
  --on-gold: #2a1a00;
  --cinnabar: #ff3d81;
  --cinnabar-deep: #c21a55;
  --cinnabar-fg: #ff9ec0;
  --violet: #a24bff;
  --violet-fg: #d3a8ff;
  --jade: #00e5b0;
  --jade-fg: #7cffe0;
  --water: #00d4ff;
  --fire: #ff5c5c;
  --earth: #d9a441;
  --metal: #c8d2e8;
  --wood: #4ce6a0;
  --sur-1: rgba(255, 255, 255, .05);
  --sur-2: rgba(255, 255, 255, .075);
  --bar-1: rgba(10, 6, 24, .96);
  --bar-2: rgba(10, 6, 24, .74);
  --bar-3: rgba(10, 6, 24, .6);
  --toast-bg: rgba(24, 14, 48, .97);
  --fade: rgba(12, 6, 30, .6);
  --glow-1: rgba(162, 75, 255, .26);
  --glow-2: rgba(0, 212, 255, .18);
  --glow-3: rgba(255, 61, 129, .16);
  --radius: 14px;
  --radius-sm: 10px;
  --card-shadow: 0 6px 20px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 240, 255, .1);
  --card-shadow-lg: 0 12px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(162, 75, 255, .22);
  --font-ui: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --star-op: .8;
  --cute: 0;
  --toast-fg: #e8e6ff;
  --acc-soft: rgba(255, 210, 63, .12);
  --acc-line: rgba(255, 210, 63, .35);
  --acc-shadow: rgba(255, 210, 63, .25);
  --acc-strong: rgba(255, 210, 63, .85);
}

/* ═══════════ 主题驱动的视觉调整 ═══════════ */
html, body { font-family: var(--font-ui); }
.starfield { opacity: var(--star-op) !important; }

.panel, .pcard, .tile, .gua-box, .coin-area, .dy-item, .lesson-item, .glossary .g {
  box-shadow: var(--card-shadow);
}
.topbar, .tabbar { -webkit-backdrop-filter: blur(10px); }

/* 可爱主题：圆角更软、标题带描边、卡片带糖果高光 */
[data-cute="1"] .screen-title,
[data-cute="1"] .hero h1 {
  -webkit-text-stroke: 0;
}
[data-cute="1"] .panel {
  border-radius: var(--radius);
}
[data-cute="1"] .btn {
  border-radius: 999px;
  font-weight: 700;
}
[data-cute="1"] .btn.primary {
  box-shadow: 0 4px 12px var(--acc-shadow), inset 0 1.5px 0 rgba(255, 255, 255, .45) !important;
}
[data-cute="1"] .tile {
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
[data-cute="1"] .tile-icon { font-size: 26px; }
[data-cute="1"] .logo {
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--acc-shadow);
}
[data-cute="1"] .tabbar {
  border-radius: 20px 20px 0 0;
}
[data-cute="1"] .hero-art::after {
  box-shadow: inset 0 0 0 2px var(--line-soft);
}
[data-cute="1"] .empty-icon { font-size: 46px; }

/* 水墨主题：去掉卡通描边感，加宣纸纹理与印章感 */
[data-theme="ink"] .panel,
[data-theme="ink"] .tile,
[data-theme="ink"] .pcard { box-shadow: none; border-color: var(--line);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }
[data-theme="ink"] .hero h1,
[data-theme="ink"] .screen-title { font-family: "KaiTi", "STKaiti", serif; }

/* 赛博主题：霓虹描边 */
[data-theme="cyber"] .panel-title,
[data-theme="cyber"] .screen-title {
  text-shadow: 0 0 12px rgba(0, 240, 255, .55);
}
[data-theme="cyber"] .tab.is-on span { filter: drop-shadow(0 0 8px var(--water)); }

/* ═══════════ 主题切换面板 ═══════════ */
.theme-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 12, 24, .45);
  backdrop-filter: blur(3px);
  display: none;
}
.theme-mask.is-open { display: block; animation: fade .2s ease; }
.theme-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  background: var(--panel-solid);
  border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(20px + var(--safe-bottom));
  box-shadow: var(--card-shadow-lg);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  max-height: 82vh; overflow-y: auto;
}
.theme-sheet.is-open { transform: translateY(0); }
.theme-sheet .sh-handle {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--line-strong); margin: 6px auto 14px; opacity: .5;
}
.theme-sheet h3 {
  font-size: 17px; margin-bottom: 4px; color: var(--fg);
  display: flex; align-items: center; gap: 6px;
}
.theme-sheet .sh-sub { font-size: 12px; color: var(--fg-dim); margin-bottom: 14px; }
.theme-list { display: grid; gap: 10px; }
.theme-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 2px solid var(--line-soft);
  background: var(--sur-1); cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.theme-card:active { transform: scale(.98); }
.theme-card.is-on { border-color: var(--gold); background: var(--sur-2); }
.theme-swatch { display: flex; gap: 4px; flex: none; }
.theme-swatch i {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
}
.theme-card .tt { flex: 1; min-width: 0; }
.theme-card .tt b { display: block; font-size: 15px; color: var(--fg); }
.theme-card .tt i { display: block; font-style: normal; font-size: 11.5px; color: var(--fg-dim); margin-top: 2px; }
.theme-card .tk { flex: none; font-size: 17px; color: var(--gold); opacity: 0; }
.theme-card.is-on .tk { opacity: 1; }
.theme-emoji { font-size: 20px; flex: none; }

/* ═══════════ 术语释义弹层 ═══════════ */
.gloss-mask {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(20, 12, 24, .45); display: none;
}
.gloss-mask.is-open { display: block; animation: fade .2s ease; }
.gloss-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: var(--panel-solid);
  border-radius: 22px 22px 0 0;
  padding: 8px 18px calc(24px + var(--safe-bottom));
  box-shadow: var(--card-shadow-lg);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  max-height: 76vh; overflow-y: auto;
}
.gloss-sheet.is-open { transform: translateY(0); }
.gloss-sheet .sh-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--line-strong); margin: 6px auto 14px; opacity: .5; }
.gloss-sheet h3 { font-size: 19px; color: var(--gold-bright); margin-bottom: 2px; font-family: "KaiTi", "STKaiti", serif; }
.gloss-sheet .gsub { font-size: 12px; color: var(--fg-dim); margin-bottom: 12px; }
.gloss-sheet p { font-size: 14px; line-height: 1.85; color: var(--fg); }
.gloss-sheet .gclose { margin-top: 16px; }
/* 问真式分节详解 */
.gloss-sheet .g-sec { margin-top: 13px; }
.gloss-sheet .g-sec-t {
  font-size: 12px; letter-spacing: 3px; color: var(--gold-bright);
  font-family: "KaiTi", "STKaiti", serif; font-weight: bold;
  margin-bottom: 5px; padding-left: 7px; border-left: 3px solid var(--gold);
  line-height: 1.4;
}
.gloss-sheet .g-sec p { margin: 0; font-size: 14px; }
.gloss-sheet .g-sec .gv {
  font-size: 13.5px; color: var(--fg-soft, var(--fg)); line-height: 1.9;
  font-family: "KaiTi", "STKaiti", serif; display: block; white-space: pre-line;
}

/* ═══════════ 盘面三视图（问真式） ═══════════ */
.view-tabs {
  display: flex; gap: 5px; padding: 4px; margin: 2px 0 12px;
  background: var(--sur-1); border-radius: 14px;
  border: 1px solid var(--line-soft);
}
.view-tabs button {
  flex: 1; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; padding: 8px 4px;
  border-radius: 11px; color: var(--fg-dim); font-weight: 600;
}
.view-tabs button.is-on {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--on-gold);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

/* 基本信息网格 */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.info-cell {
  padding: 9px 8px; border-radius: var(--radius-sm);
  background: var(--sur-1); border: 1px solid var(--line-soft);
  text-align: center;
}
.info-cell .ik { font-size: 10.5px; color: var(--fg-dim); display: block; }
.info-cell .iv { font-size: 14px; color: var(--fg); font-weight: 600; display: block; margin-top: 2px; font-family: "KaiTi", "STKaiti", serif; }
.info-cell.hl .iv { color: var(--gold-bright); }

/* 四柱大表（问真式） */
.pillar-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pillar-table th, .pillar-table td {
  border: 1px solid var(--line-soft); padding: 5px 2px; text-align: center;
}
.pillar-table th {
  background: var(--sur-2); color: var(--gold-bright);
  font-weight: 600; font-size: 11px; font-family: "KaiTi", "STKaiti", serif;
}
.pillar-table td.lbl {
  background: var(--sur-1); color: var(--fg-dim); font-size: 11px; white-space: nowrap; width: 52px;
}
.pillar-table td.gz-cell { font-family: "KaiTi", "STKaiti", serif; font-size: 17px; line-height: 1.35; }
.pillar-table td .cg { display: block; font-size: 11px; color: var(--fg-dim); }
.pillar-table .tap { cursor: pointer; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; }
.pillar-table .tap-term span { cursor: pointer; }
.pillar-table .tap-term span:active { opacity: .6; }

/* 五行双栏 */
.wx-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.wx-dual .lbl2 { grid-column: 1 / -1; font-size: 11px; color: var(--fg-dim); margin-top: 4px; }
.pct-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }

/* 称骨 */
.cg-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sur-2), var(--sur-1));
  border: 1px solid var(--line);
}
.cg-card .cg-num { font-family: "KaiTi", "STKaiti", serif; font-size: 30px; color: var(--gold-bright); flex: none; }
.cg-card .cg-txt { font-size: 12.5px; color: var(--fg); line-height: 1.7; }

/* 大运 / 流年表 */
.dy-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dy-table th, .dy-table td { border: 1px solid var(--line-soft); padding: 6px 3px; text-align: center; }
.dy-table th { background: var(--sur-2); color: var(--fg-dim); font-weight: 600; font-size: 10.5px; }
.dy-table tr.now td { background: var(--sur-2); color: var(--gold-bright); font-weight: 700; }
.dy-table td.dy-gz { font-family: "KaiTi", "STKaiti", serif; font-size: 14px; }


/* ═══════════ 主题化标题渐变 ═══════════ */
[data-theme="moe"] .hero h1 {
  background: linear-gradient(180deg, #f79a8c, #ee8372);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="mint"] .hero h1 {
  background: linear-gradient(180deg, #7fe3d0, #1fa88c 48%, #0d6e5c);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .8));
}
[data-theme="ink"] .hero h1 {
  background: linear-gradient(180deg, #6b5a44, #3b3229 50%, #1f1a14);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="cyber"] .hero h1 {
  background: linear-gradient(180deg, #fff, #00d4ff 45%, #a24bff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(0, 212, 255, .6));
}
/* 浅色主题下 hero 副标题与 logo 微调 */
[data-theme="moe"] .hero-sub, [data-theme="mint"] .hero-sub { color: var(--fg-dim); }
[data-theme="moe"] .logo, [data-theme="mint"] .logo { border-radius: 12px; }