/* ================================================================
   五套中国风主题 · CSS变量系统
   配色来源: zhongguose.com / 故宫色 / 敦煌色 / 青花色 / 宋韵
   ================================================================ */

/* ── 0. 水墨丹青 INK ── 黑金撞色，墨韵磅礴 ── */
[data-theme="ink"] {
  --bg: #0d0d14; --bg-card: linear-gradient(135deg,#1a1a28,#14141f);
  --bg-alt: #1e1e30; --border: rgba(180,150,80,.2);
  --border-acc: rgba(180,150,80,.5); --text: #e8dcc8;
  --text-sec: #9a8c74; --text-muted: #6b5d4f;
  --gold: #c9a84c; --gold-light: #e8d080; --gold-dark: #8a6c20;
  --red: #c23b22; --accent: #c9a84c; --accent-rgb: 201,168,76;
  --card-accent: linear-gradient(180deg,#c9a84c,#c23b22,#c9a84c);
  --th-bg: linear-gradient(180deg,#2c2416,#3d3226); --th-text: #e8d080;
  --td-bg: rgba(26,26,40,.6); --dayun-curr: #1a1a28;
}

/* ── 1. 故宫朱砂 PALACE ── 红墙金瓦，皇家气象 ── */
[data-theme="palace"] {
  --bg: #fdf8f0; --bg-card: linear-gradient(135deg,#fffdf5,#fef7ec);
  --bg-alt: #fffef8; --border: rgba(180,40,30,.12);
  --border-acc: rgba(180,40,30,.35); --text: #3d1f10;
  --text-sec: #8b5e3c; --text-muted: #a08060;
  --gold: #c49530; --gold-light: #e8c860; --gold-dark: #8b5a15;
  --red: #b9251b; --accent: #b9251b; --accent-rgb: 185,37,27;
  --card-accent: linear-gradient(180deg,#b9251b,#c49530,#b9251b);
  --th-bg: linear-gradient(180deg,#8b1a12,#b9251b); --th-text: #fdedc0;
  --td-bg: rgba(255,253,240,.8); --dayun-curr: #fdf2e0;
}

/* ── 2. 青花瓷韵 PORCELAIN ── 素胚天青，江南烟雨 ── */
[data-theme="porcelain"] {
  --bg: #f2f6f9; --bg-card: linear-gradient(135deg,#fefeff,#f4f8fb);
  --bg-alt: #f8fbfd; --border: rgba(45,100,140,.12);
  --border-acc: rgba(45,100,140,.35); --text: #1a2a3a;
  --text-sec: #506880; --text-muted: #7890a8;
  --gold: #8a9ab0; --gold-light: #b0c0d4; --gold-dark: #5a6a80;
  --red: #1e5a8a; --accent: #1e5a8a; --accent-rgb: 30,90,138;
  --card-accent: linear-gradient(180deg,#1e5a8a,#60a0c8,#1e5a8a);
  --th-bg: linear-gradient(180deg,#1a4060,#1e5a8a); --th-text: #e8f0f8;
  --td-bg: rgba(255,255,255,.7); --dayun-curr: #eaf2f8;
}

/* ── 3. 宋韵极简 SONG ── 瘦金风骨，大留白禅意 ── */
[data-theme="song"] {
  --bg: #fafaf6; --bg-card: #ffffff;
  --bg-alt: #f8f8f4; --border: rgba(0,0,0,.06);
  --border-acc: rgba(0,0,0,.15); --text: #1a1a1a;
  --text-sec: #5a5a5a; --text-muted: #9a9a9a;
  --gold: #4a4a4a; --gold-light: #7a7a7a; --gold-dark: #2a2a2a;
  --red: #6a6a6a; --accent: #1a1a1a; --accent-rgb: 26,26,26;
  --card-accent: linear-gradient(180deg,transparent,#1a1a1a 50%,transparent);
  --th-bg: #1a1a1a; --th-text: #fafaf6;
  --td-bg: rgba(255,255,255,.9); --dayun-curr: #f0f0ea;
}

/* ── 4. 琉璃暗金 GLAZE ── 敦煌秘境，暗夜鎏金 ── */
[data-theme="glaze"] {
  --bg: #0a0812; --bg-card: linear-gradient(135deg,#120e1c,#0d0a16);
  --bg-alt: #161028; --border: rgba(140,100,200,.15);
  --border-acc: rgba(180,140,220,.4); --text: #d5c8e8;
  --text-sec: #9a88b8; --text-muted: #6a5888;
  --gold: #d4a040; --gold-light: #f0c860; --gold-dark: #907020;
  --red: #c04860; --accent: #a070d0; --accent-rgb: 160,112,208;
  --card-accent: linear-gradient(180deg,#a070d0,#d4a040,#a070d0);
  --th-bg: linear-gradient(180deg,#2a1848,#3a2860); --th-text: #e8d0ff;
  --td-bg: rgba(20,14,30,.7); --dayun-curr: #1a1030;
}

/* ── 5. 竹林清风 BAMBOO ── 竹青嫩绿，清雅文人 ── */
[data-theme="bamboo"] {
  --bg: #121a10; --bg-card: linear-gradient(135deg,#1a2418,#182218);
  --bg-alt: #203020; --border: rgba(120,160,80,.15);
  --border-acc: rgba(120,160,80,.4); --text: #e0ecd0;
  --text-sec: #90a880; --text-muted: #688060;
  --gold: #a0c060; --gold-light: #c8e090; --gold-dark: #688030;
  --red: #c06040; --accent: #7aaf60; --accent-rgb: 122,175,96;
  --card-accent: linear-gradient(180deg,#7aaf60,#a0d080,#7aaf60);
  --th-bg: linear-gradient(180deg,#1a3018,#2a4028); --th-text: #c8e8b0;
  --td-bg: rgba(20,28,18,.65); --dayun-curr: #182018;
}
/* ── 6. 烟雨江南 MISTY ── 灰青淡蓝，朦胧水墨 ── */
[data-theme="misty"] {
  --bg: #101820; --bg-card: linear-gradient(135deg,#1a2430,#141e28);
  --bg-alt: #1e2838; --border: rgba(100,140,170,.15);
  --border-acc: rgba(120,160,190,.4); --text: #d0dce8;
  --text-sec: #8098b0; --text-muted: #607888;
  --gold: #80a8c0; --gold-light: #a0c8e0; --gold-dark: #507090;
  --red: #c06870; --accent: #5a80a0; --accent-rgb: 90,128,160;
  --card-accent: linear-gradient(180deg,#5a80a0,#8ab0c0,#5a80a0);
  --th-bg: linear-gradient(180deg,#1a3040,#2a4058); --th-text: #b0d0e8;
  --td-bg: rgba(20,28,38,.65); --dayun-curr: #182028;
}
/* ── 7. 敦煌壁画 DUNHUANG ── 赭石暖橙，西域浓艳 ── */
[data-theme="dunhuang"] {
  --bg: #180e08; --bg-card: linear-gradient(135deg,#241810,#1c100a);
  --bg-alt: #281810; --border: rgba(200,130,60,.15);
  --border-acc: rgba(210,140,80,.4); --text: #e8d8c8;
  --text-sec: #a08870; --text-muted: #806850;
  --gold: #d4a050; --gold-light: #e8c880; --gold-dark: #907030;
  --red: #c04020; --accent: #c07030; --accent-rgb: 192,112,48;
  --card-accent: linear-gradient(180deg,#c07030,#d4a050,#c07030);
  --th-bg: linear-gradient(180deg,#302010,#402818); --th-text: #f0d8b0;
  --td-bg: rgba(24,16,8,.65); --dayun-curr: #201008;
}
/* ── 8. 汉白玉润 JADE ── 暖白浅金，温润素雅 ── */
[data-theme="jade"] {
  --bg: #f6f4ee; --bg-card: linear-gradient(135deg,#fefcf8,#f8f4ec);
  --bg-alt: #faf8f0; --border: rgba(180,160,120,.12);
  --border-acc: rgba(180,160,120,.35); --text: #2a2418;
  --text-sec: #6a6050; --text-muted: #a09880;
  --gold: #b8a868; --gold-light: #d4c898; --gold-dark: #887030;
  --red: #c04828; --accent: #b8a870; --accent-rgb: 184,168,112;
  --card-accent: linear-gradient(180deg,#b8a870,#d4c898,#b8a870);
  --th-bg: linear-gradient(180deg,#2a2418,#3a3428); --th-text: #f0e8d0;
  --td-bg: rgba(255,255,255,.7); --dayun-curr: #f4f0e4;
}
/* ── 9. 凤冠霞帔 PHOENIX-CROWN ── 暗绛红·亮赤金，婚堂正礼 ── */
[data-theme="phoenix-crown"] {
  --bg: #1c0a0d; --bg-card: linear-gradient(135deg,#2a1418,#1e0c10);
  --bg-alt: #301820; --border: rgba(200,50,40,.15);
  --border-acc: rgba(210,80,50,.45); --text: #f0e0d0;
  --text-sec: #c0a098; --text-muted: #8a6060;
  --gold: #e0b040; --gold-light: #f5d878; --gold-dark: #a07020;
  --red: #d42a2a; --accent: #e8c050; --accent-rgb: 232,192,80;
  --card-accent: linear-gradient(180deg,#e8c050,#d42a2a,#e8c050);
  --th-bg: linear-gradient(180deg,#3a1818,#4a2020); --th-text: #f5d878;
  --td-bg: rgba(30,12,16,.7); --dayun-curr: #201014;
}
/* ── 10. 胭脂醉 ROUGE ── 暖粉·嫣红金，温柔缱绻 ── */
[data-theme="rouge"] {
  --bg: #fef7f3; --bg-card: linear-gradient(135deg,#fffcf8,#fef4ed);
  --bg-alt: #fef9f5; --border: rgba(200,120,130,.12);
  --border-acc: rgba(200,120,130,.35); --text: #3d1a18;
  --text-sec: #8b5a58; --text-muted: #b0908a;
  --gold: #c09068; --gold-light: #e0b898; --gold-dark: #907050;
  --red: #d4767a; --accent: #c88078; --accent-rgb: 200,128,120;
  --card-accent: linear-gradient(180deg,#c88078,#d4767a,#c88078);
  --th-bg: linear-gradient(180deg,#5a3038,#6a4048); --th-text: #fce8e8;
  --td-bg: rgba(255,255,255,.7); --dayun-curr: #fef0ea;
}
/* ── 11. 锦书 BROCADE-LETTER ── 信笺黄·朱批红，鱼雁传书 ── */
[data-theme="brocade-letter"] {
  --bg: #faf3e4; --bg-card: linear-gradient(135deg,#fefcf4,#f8f0e0);
  --bg-alt: #fcf8ec; --border: rgba(160,130,80,.12);
  --border-acc: rgba(160,130,80,.35); --text: #2a1a10;
  --text-sec: #6a5040; --text-muted: #a09080;
  --gold: #a08050; --gold-light: #c8b080; --gold-dark: #705030;
  --red: #b03838; --accent: #b04040; --accent-rgb: 176,64,64;
  --card-accent: linear-gradient(180deg,#b04040,#a08050,#b04040);
  --th-bg: linear-gradient(180deg,#4a2828,#5a3838); --th-text: #f0d8c0;
  --td-bg: rgba(255,255,255,.7); --dayun-curr: #f8efe0;
}
/* ── 12. 花好月圆 MOONLIT-BLOSSOM ── 云开照月明，清辉洒人间 ── */
[data-theme="moonlit-blossom"] {
  --bg: linear-gradient(-35deg,#1a2840 0%,#1e3048 25%,#263a58 50%,#3a5070 70%,#4a6080 82%,#6a7ea0 92%,#7a8ea8 97%,#8a9cb4 100%);
  --bg-card: linear-gradient(-45deg,rgba(30,45,70,.88),rgba(40,55,85,.85));
  --bg-alt: rgba(35,50,75,.7); --border: rgba(140,170,210,.12);
  --border-acc: rgba(160,200,235,.3); --text: #c8d4e8;
  --text-sec: #9aacc8; --text-muted: #6a7ea0;
  --gold: #e0d080; --gold-light: #f0e8b0; --gold-dark: #b0a050;
  --red: #e898a8; --accent: #8898c8; --accent-rgb: 136,152,200;
  --card-accent: linear-gradient(180deg,#f0e8b0,#e0d080,#f0e8b0);
  --th-bg: linear-gradient(180deg,#1a3050,#2a4870); --th-text: #f0e8c8;
  --td-bg: rgba(30,45,75,.6); --dayun-curr: rgba(25,40,65,.85);
}
/* ═══════════════════════════════════════════════════════
   基础系统
   ═══════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Noto Serif SC','SimSun',serif;
  background:var(--bg);color:var(--text);
  line-height:1.75;transition:background .5s,color .5s;min-height:100vh;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;
  background-image:radial-gradient(circle at 20% 30%,rgba(var(--accent-rgb),.5) 0,transparent 50%),
                   radial-gradient(circle at 80% 70%,rgba(var(--accent-rgb),.3) 0,transparent 50%);
}
.container{max-width:1050px;margin:0 auto;padding:20px;position:relative;z-index:1;}

/* ═══ 主题选择器 ═══ */
.theme-picker{
  position:fixed;top:12px;right:12px;z-index:100;display:flex;gap:6px;
  background:var(--bg-card);padding:5px 6px;border-radius:40px;
  border:1px solid var(--border);box-shadow:0 2px 16px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);transition:all .4s;
}
.theme-btn{
  width:30px;height:30px;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:all .3s;font-size:0;
}
.theme-btn:hover{transform:scale(1.15);}
.theme-btn.active{border-color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.3);}
.theme-btn[data-t="ink"]{background:linear-gradient(135deg,#1a1a28,#0d0d14);}
.theme-btn[data-t="palace"]{background:linear-gradient(135deg,#b9251b,#fdf8f0);}
.theme-btn[data-t="porcelain"]{background:linear-gradient(135deg,#1e5a8a,#f2f6f9);}
.theme-btn[data-t="song"]{background:linear-gradient(135deg,#1a1a1a,#fafaf6);}
.theme-btn[data-t="glaze"]{background:linear-gradient(135deg,#c080e0,#4a2080);}
.theme-btn[data-t="bamboo"]{background:linear-gradient(135deg,#7aaf60,#1a2418);}
.theme-btn[data-t="misty"]{background:linear-gradient(135deg,#5a80a0,#1a2430);}
.theme-btn[data-t="dunhuang"]{background:linear-gradient(135deg,#d4a050,#1c100a);}
.theme-btn[data-t="jade"]{background:linear-gradient(135deg,#d4c898,#f8f4ec);}
.theme-label{
  position:fixed;top:52px;right:12px;z-index:100;font-size:.65rem;
  background:var(--bg-card);color:var(--text-sec);padding:3px 10px;
  border-radius:20px;border:1px solid var(--border);transition:all .4s;
}

/* ═══ Hero ═══ */
.hero{text-align:center;padding:36px 16px 24px;}
.hero .seal{font-size:2.2rem;color:var(--accent);opacity:.8;letter-spacing:6px;}
.hero h1{
  font-size:2.1rem;font-weight:900;letter-spacing:6px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold),var(--gold-dark));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero .sub{color:var(--text-sec);font-size:.8rem;margin-top:4px;letter-spacing:2px;}
.hero .divider{width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:14px auto;}

/* ═══ 卡片 ═══ */
.card{
  background:var(--bg-card);border-radius:8px;padding:28px 30px;margin-bottom:18px;
  box-shadow:0 2px 20px rgba(0,0,0,.08);border:1px solid var(--border);
  position:relative;overflow:hidden;transition:all .4s;
}
.card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--card-accent);}
.card h2{font-size:1.15rem;margin-bottom:14px;padding-bottom:8px;border-bottom:1px dotted var(--border);letter-spacing:2px;}
.card h3{font-size:.95rem;margin:14px 0 6px;}

/* ═══ 表格 ═══ */
.tbl-wrap{overflow-x:auto;margin:6px 0;}
.tbl{width:100%;border-collapse:separate;border-spacing:0;border-radius:6px;overflow:hidden;font-size:.82rem;}
.tbl th{background:var(--th-bg);color:var(--th-text);padding:10px 6px;font-size:.75rem;letter-spacing:2px;text-align:center;}
.tbl td{padding:8px 6px;text-align:center;border-bottom:1px solid var(--border);background:var(--td-bg);transition:background .4s;}
.tbl tr:last-child td{border-bottom:none;}
.tbl .pz{font-size:1.5rem;font-weight:900;padding:14px 6px;letter-spacing:3px;}
.tbl .gan{color:var(--red);}.tbl .zhi{color:var(--text);}

/* ═══ 标签 ═══ */
.tag{display:inline-block;padding:1px 9px;border-radius:16px;font-size:.68rem;font-weight:600;letter-spacing:1px;}
.tag-wood{background:rgba(90,143,60,.15);color:#5a8f3c;}
.tag-fire{background:rgba(212,118,60,.15);color:#d4763c;}
.tag-earth{background:rgba(139,115,85,.15);color:#8b7355;}
.tag-metal{background:rgba(184,164,78,.15);color:#b8a44e;}
.tag-water{background:rgba(58,107,140,.15);color:#3a6b8c;}

/* ═══ 五行力量条 ═══ */
.bars{display:flex;flex-direction:column;gap:7px;margin:10px 0;}
.bar-r{display:flex;align-items:center;gap:8px;}
.bar-r .lb{width:24px;font-weight:700;font-size:.75rem;text-align:center;flex-shrink:0;}
.bar-r .trk{flex:1;height:18px;background:var(--bg-alt);border-radius:9px;overflow:hidden;}
.bar-r .fl{height:100%;border-radius:9px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:.6rem;color:#fff;font-weight:600;transition:width 1s ease;}
.bar-r .st{font-size:.7rem;color:var(--gold);width:60px;}
.fl-metal{background:linear-gradient(90deg,#b8a44e,#d4a745);}
.fl-earth{background:linear-gradient(90deg,#a08868,#8b7355);}
.fl-water{background:linear-gradient(90deg,#5a9abf,#3a6b8c);}
.fl-wood{background:linear-gradient(90deg,#7ab648,#5a8f3c);}
.fl-fire{background:linear-gradient(90deg,#e8955a,#d4763c);}

/* ═══ 大运 ═══ */
.dy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin:10px 0;}
.dy-card{background:var(--bg-alt);border-radius:6px;padding:12px 8px;text-align:center;border:1px solid var(--border);transition:all .3s;position:relative;}
.dy-card.cur{border:2px solid var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12);background:var(--dayun-curr);}
.dy-card .age{font-size:.65rem;color:var(--text-muted);}
.dy-card .dz{font-size:1.3rem;font-weight:900;margin:3px 0;letter-spacing:2px;}
.dy-card .lb{font-size:.6rem;color:var(--text-muted);}
.dy-card .badge{position:absolute;top:4px;right:4px;background:var(--accent);color:var(--bg);font-size:.5rem;padding:1px 5px;border-radius:8px;}

/* ═══ 喜用神网格 ═══ */
.xj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:10px 0;}
.xj-item{background:var(--bg-alt);border-radius:6px;padding:12px 8px;text-align:center;border:1px solid var(--border);transition:all .3s;}
.xj-item.xi{border-color:rgba(45,120,98,.3);}.xj-item.ji{border-color:rgba(194,59,34,.2);}
.xj-item .hd{font-size:.65rem;color:var(--text-muted);}
.xj-item .vl{font-size:1.1rem;font-weight:700;letter-spacing:2px;margin:2px 0;}
.xi .vl{color:#2d7862;}.ji .vl{color:#c23b22;}

/* ═══ 分析块 ═══ */
.hl{background:linear-gradient(90deg,rgba(var(--accent-rgb),.1),transparent);padding:5px 10px;border-left:3px solid var(--accent);margin:5px 0;border-radius:0 6px 6px 0;font-size:.82rem;transition:background .4s;}
.q{background:var(--bg-alt);border-radius:6px;padding:10px 14px;margin:8px 0;font-style:italic;color:var(--text-sec);border:1px dashed var(--border);font-size:.8rem;transition:all .4s;}
.info-row{display:flex;flex-wrap:wrap;gap:6px 20px;margin:8px 0;font-size:.8rem;}
.info-row span{color:var(--text-sec);}
.info-row b{color:var(--accent);}

/* ═══ 页脚 ═══ */
.ft{text-align:center;padding:24px 16px;color:var(--text-muted);font-size:.75rem;}
.ft .disc{background:rgba(var(--accent-rgb),.05);border-radius:6px;padding:12px 16px;margin-top:12px;border:1px solid var(--border);font-size:.7rem;line-height:1.6;transition:all .4s;}

/* ═══ 响应式 ═══ */
@media(max-width:768px){
  .container{padding:8px;}.card{padding:18px 12px;}
  .hero h1{font-size:1.5rem;}.tbl .pz{font-size:1.1rem;}
  .dy-grid{grid-template-columns:repeat(3,1fr);}
  .xj-grid{grid-template-columns:repeat(2,1fr);}
}

/* ═══ 动画 ═══ */
.fade{animation:fu .5s ease forwards;opacity:0;}
@keyframes fu{to{opacity:1;transform:translateY(0);}from{opacity:0;transform:translateY(10px);}}
.d1{animation-delay:.05s;}.d2{animation-delay:.1s;}.d3{animation-delay:.15s;}
.d4{animation-delay:.2s;}.d5{animation-delay:.25s;}.d6{animation-delay:.3s;}