/* ══════════════════════════════════════════════════════════
   奇门遁甲 · 道藏主题 CSS 设计系统
   全部 CSS-only，零新依赖
   ══════════════════════════════════════════════════════════ */

/* ═══ 全局字体（行书/草书风格，所有主题共用） ═══ */
:root{
  --qm-font:'Noto Serif SC','STXingkai','KaiTi','STKaiti','SimSun',serif;
  --qm-font-title:'Ma Shan Zheng','STXingkai','FZShuTi','STKaiti','KaiTi',cursive;
  --qm-font-big:'Ma Shan Zheng','ZCOOL KuaiLe','STXingkai','FZShuTi','STKaiti',cursive;
}

/* ═══ 主题：太玄墨（默认） ═══ */
:root, [data-theme="taixuan"] {
  --qm-bg:linear-gradient(150deg,#0a0806 0%,#120e0a 15%,#1a1410 30%,#241e18 50%,#342c20 70%,#4a3e28 88%,#5e4e30 100%);
  --qm-card:linear-gradient(-45deg,rgba(17,13,9,.9),rgba(20,16,12,.88)); --qm-alt:rgba(24,20,16,.75);
  --qm-border:#3d2e1a; --qm-border-acc:#8b6914;
  --qm-text:#d4c5a0; --qm-text-sec:#a89878; --qm-muted:#6b5e4a;
  --qm-gold:#c9a84c; --qm-gold-light:#e8d48b; --qm-gold-dark:#8b6914;
  --qm-red:#c23b22; --qm-red-dark:#8b2020; --qm-green:#2d8c6c;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(139,105,20,.15);
  --taiji-black:#1a1a2e; --taiji-white:#f0e6d3;
  --big-char-rgb:201,168,76;
  --rain-rgb:[[180,165,130],[200,185,150],[160,145,110],[185,170,140]];
}

/* ═══ 主题：灵宝朱砂 ═══ */
[data-theme="lingbao"] {
  --qm-bg:linear-gradient(150deg,#0f0608 0%,#160c10 15%,#1e1018 30%,#2a1824 50%,#3a2032 70%,#4e2a42 88%,#5e3050 100%);
  --qm-card:linear-gradient(-45deg,rgba(26,12,14,.9),rgba(34,16,20,.88)); --qm-alt:rgba(36,16,20,.75);
  --qm-border:#4a1a1a; --qm-border-acc:#8b2020;
  --qm-text:#e0d0c5; --qm-text-sec:#b89888; --qm-muted:#7a5050;
  --qm-gold:#e0b040; --qm-gold-light:#f5d878; --qm-gold-dark:#a07020;
  --qm-red:#d42a2a; --qm-red-dark:#8b1020; --qm-green:#2d7c60;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(139,32,32,.15);
  --taiji-black:#1a0a0e; --taiji-white:#f8e8e0;
  --big-char-rgb:212,42,42;
  --rain-rgb:[[220,120,100],[240,150,120],[195,90,70],[210,140,110]];
}

/* ═══ 主题：太虚星辉 ═══ */
[data-theme="taixu"] {
  --qm-bg:linear-gradient(150deg,#060a14 0%,#0c1220 15%,#141c30 30%,#202840 50%,#2e3858 70%,#404a68 88%,#505878 100%);
  --qm-card:linear-gradient(-45deg,rgba(12,16,30,.9),rgba(18,22,38,.88)); --qm-alt:rgba(20,24,40,.75);
  --qm-border:#1a2a4a; --qm-border-acc:#3a5a8a;
  --qm-text:#c0d0e8; --qm-text-sec:#8898b8; --qm-muted:#4a5a78;
  --qm-gold:#a0b8d8; --qm-gold-light:#c8daf0; --qm-gold-dark:#6880a8;
  --qm-red:#d07080; --qm-red-dark:#803050; --qm-green:#3a8a78;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(58,90,138,.15);
  --taiji-black:#0a0e1a; --taiji-white:#e0e8f8;
  --big-char-rgb:160,184,216;
  --rain-rgb:[[160,180,210],[185,200,225],[140,160,195],[170,190,220]];
}

/* ═══ 主题：云霞紫气 ═══ */
[data-theme="yunxia"] {
  --qm-bg:linear-gradient(160deg,#1a0a28 0%,#201038 20%,#2a1850 40%,#382860 60%,#453870 80%,#5a4890 95%,#6858a0 100%);
  --qm-card:linear-gradient(-45deg,rgba(40,20,70,.88),rgba(50,30,80,.85));
  --qm-alt:rgba(35,18,60,.7); --qm-border:rgba(120,90,180,.15);
  --qm-border-acc:rgba(140,110,200,.3); --qm-text:#d8c8f0;
  --qm-text-sec:#b0a0d0; --qm-muted:#7868a8;
  --qm-gold:#d0b8f0; --qm-gold-light:#e8d8f8; --qm-gold-dark:#9070c0;
  --qm-red:#e898b8; --qm-red-dark:#904068; --qm-green:#68b898;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(120,90,180,.15);
  --taiji-black:#1a0a28; --taiji-white:#f0e0f8;
  --big-char-rgb:208,184,240;
  --rain-rgb:[[200,170,230],[210,190,240],[180,150,210],[195,175,225]];
}

/* ═══ 主题：月华如水 ═══ */
[data-theme="yuehua"] {
  --qm-bg:linear-gradient(145deg,#1a2840 0%,#1e3048 20%,#263a58 40%,#305070 60%,#3a6080 80%,#4a7088 92%,#5a8098 100%);
  --qm-card:linear-gradient(-45deg,rgba(30,45,70,.88),rgba(40,55,85,.85));
  --qm-alt:rgba(35,50,75,.7); --qm-border:rgba(100,140,180,.15);
  --qm-border-acc:rgba(130,180,220,.3); --qm-text:#c8d8f0;
  --qm-text-sec:#98b0d0; --qm-muted:#6880a8;
  --qm-gold:#e0d8c0; --qm-gold-light:#f0ecd8; --qm-gold-dark:#a09870;
  --qm-red:#e0a0b0; --qm-red-dark:#885868; --qm-green:#78b8a8;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(100,140,180,.15);
  --taiji-black:#1a2838; --taiji-white:#f0f5fa;
  --big-char-rgb:200,216,240;
  --rain-rgb:[[180,200,225],[200,215,235],[160,185,210],[190,208,228]];
}

/* ═══ 主题：翠山如黛 ═══ */
[data-theme="cuishan"] {
  --qm-bg:linear-gradient(150deg,#0a1810 0%,#0e1e14 20%,#142a1c 40%,#1a3826 60%,#224430 80%,#2a5038 92%,#305c40 100%);
  --qm-card:linear-gradient(-45deg,rgba(20,38,26,.9),rgba(26,46,34,.88));
  --qm-alt:rgba(18,34,22,.75); --qm-border:rgba(60,130,90,.15);
  --qm-border-acc:rgba(80,160,110,.3); --qm-text:#c8e0d0;
  --qm-text-sec:#90baa0; --qm-muted:#588868;
  --qm-gold:#d8c898; --qm-gold-light:#e8dca8; --qm-gold-dark:#988860;
  --qm-red:#e0a898; --qm-red-dark:#886058; --qm-green:#68c890;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(60,130,90,.15);
  --taiji-black:#0a180e; --taiji-white:#f0faf0;
  --big-char-rgb:200,224,208;
  --rain-rgb:[[170,210,180],[190,225,200],[150,195,165],[180,218,190]];
}

/* ═══ 主题：流金岁月 ═══ */
[data-theme="liujin"] {
  --qm-bg:linear-gradient(145deg,#1a1008 0%,#241808 20%,#322010 40%,#403018 60%,#504020 80%,#605028 92%,#706030 100%);
  --qm-card:linear-gradient(-45deg,rgba(50,30,16,.9),rgba(60,38,20,.88));
  --qm-alt:rgba(40,24,12,.75); --qm-border:rgba(180,140,80,.15);
  --qm-border-acc:rgba(200,160,100,.3); --qm-text:#e8d8c0;
  --qm-text-sec:#c0a878; --qm-muted:#887048;
  --qm-gold:#f0d080; --qm-gold-light:#f8e8b0; --qm-gold-dark:#b89840;
  --qm-red:#e0a868; --qm-red-dark:#886840; --qm-green:#90b868;
  --qm-radius:12px;
  --qm-shadow:0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(180,140,80,.15);
  --taiji-black:#1a0e04; --taiji-white:#faf0e0;
  --big-char-rgb:232,216,192;
  --rain-rgb:[[210,180,140],[225,200,160],[195,165,125],[218,188,148]];
}

/* ═══ 关键帧 ═══ */
@keyframes qm-fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes qm-fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes qm-pulseGold{0%,100%{box-shadow:0 0 6px rgba(201,168,76,.3),0 0 20px rgba(201,168,76,.1)}50%{box-shadow:0 0 14px rgba(201,168,76,.6),0 0 36px rgba(201,168,76,.25)}}
@keyframes qm-pulseRed{0%,100%{box-shadow:0 0 4px rgba(194,59,34,.3),0 0 12px rgba(194,59,34,.1)}50%{box-shadow:0 0 10px rgba(194,59,34,.55),0 0 24px rgba(194,59,34,.2)}}
@keyframes qm-taijiSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes qm-incenseWiggle{0%,100%{margin-left:0}25%{margin-left:8px}75%{margin-left:-6px}}
@keyframes qm-sealAppear{0%{opacity:0;transform:scale(3) rotate(-15deg)}60%{opacity:1;transform:scale(.95) rotate(2deg)}80%{transform:scale(1.05) rotate(-1deg)}100%{transform:scale(1) rotate(0deg)}}
@keyframes qm-talismanDescend{0%{opacity:0;transform:translateY(-120px) scale(.3)}50%{opacity:.9;transform:translateY(10px) scale(1.05)}70%{transform:translateY(-5px) scale(.98)}100%{opacity:.85;transform:translateY(0) scale(1)}}
@keyframes qm-palaceFlyIn{from{opacity:0;transform:translateX(var(--fx,0)) translateY(var(--fy,0)) scale(.3) rotate(var(--fr,0deg))}to{opacity:1;transform:translateX(0) translateY(0) scale(1) rotate(0deg)}}
@keyframes qm-shakeKong{0%,100%{transform:translateX(0)}10%{transform:translateX(-2px)}30%{transform:translateX(2px)}50%{transform:translateX(-1px)}70%{transform:translateX(1px)}}
@keyframes qm-beaconGold{0%,100%{box-shadow:0 0 15px rgba(201,168,76,.15);border-color:var(--qm-border-acc)}50%{box-shadow:0 0 30px rgba(201,168,76,.4),0 0 60px rgba(201,168,76,.1);border-color:var(--qm-gold-light)}}

/* ═══ BODY ═══ */
body.qimen-page{
  background:var(--qm-bg); color:var(--qm-text);
  font-family:var(--qm-font); min-height:100vh; overflow-x:hidden;
  background-attachment:fixed;
  display:flex; flex-direction:column;
}
body.qimen-page::before{
  content:'道可道非常道名可名非常名无名天地之始有名万物之母故常无欲以观其妙常有欲以观其徼此两者同出而异名同谓之玄玄之又玄众妙之门';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  font-size:18px;color:rgba(var(--big-char-rgb,201,168,76),.022);
  line-height:3.2;letter-spacing:4px;text-align:justify;
  padding:4% 8%;font-family:var(--qm-font-title);
}
.qm-wrap{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:20px 24px 80px}

/* ═══ 中央大字"奇" ═══ */
.qm-big-char{
  position:fixed;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:.18;
}
.qm-big-char span{
  font-family:var(--qm-font-big);
  font-size:clamp(14rem,32vw,26rem);
  color:rgb(var(--big-char-rgb,201,168,76));
  text-shadow:0 0 50px rgb(var(--big-char-rgb,201,168,76));
  animation:qm-bigChar 8s ease-in-out infinite;
  user-select:none;
}
@keyframes qm-bigChar{0%,100%{opacity:.45}50%{opacity:.75}}

/* ═══ 斜视太极八卦 - 右下角椭圆旋转 ═══ */
.qm-bagua-oval{
  position:fixed;top:50%;left:50%;margin-left:-840px;margin-top:-840px;z-index:4;
  pointer-events:none;opacity:.3;
}
/* 柔和光晕：让黑白太极在暗色背景上都可见 */
.qm-bagua-oval::before{
  content:'';position:absolute;top:50%;left:50%;
  width:720px;height:720px;transform:translate(-50%,-50%) scaleX(.45);
  border-radius:50%;
  background:radial-gradient(circle,rgba(200,180,140,.25) 0%,transparent 70%);
  z-index:-1;
}
.qm-bagua-oval img{
  display:block;width:1680px;height:1680px;
  position:relative;
  transform:rotate(45deg) scaleX(.45) rotate(-45deg);
  transform-origin:center center;
  filter:drop-shadow(0 0 10px rgba(200,180,140,.2));
  animation:qm-baguaSpin 15s linear infinite;
}
@keyframes qm-baguaSpin{
  from{transform:rotate(45deg) scaleX(.45) rotate(-45deg)}
  to{transform:rotate(45deg) scaleX(.45) rotate(315deg)}
}
/* 移动端：太极图缩小 */
@media(max-width:768px){
  .qm-bagua-oval{
    margin-left:-280px;margin-top:-280px;
  }
  .qm-bagua-oval::before{
    width:240px;height:240px;
  }
  .qm-bagua-oval img{
    width:560px;height:560px;
  }
}

/* ═══ 道藏文字雨 ═══ */
.qm-rain-container{
  position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;
}
.qm-verse-col{
  position:absolute;
  font-family:'Ma Shan Zheng','ZCOOL KuaiLe','KaiTi',cursive;
  pointer-events:none;
  writing-mode:vertical-rl;text-orientation:upright;
  line-height:1.6;white-space:nowrap;letter-spacing:6px;
  will-change:transform,opacity;
  text-shadow:0 0 10px rgba(var(--big-char-rgb,201,168,76),.15);
}

/* ═══ 主题切换按钮 — 固定在右上角 ═══ */
.qm-theme-bar{
  position:fixed;top:16px;right:16px;z-index:100;
  display:flex;align-items:center;gap:8px;
  background:var(--qm-card);padding:6px 14px;
  border-radius:24px;border:1px solid var(--qm-border);
  backdrop-filter:blur(10px);
  transition:all .3s;
}
.qm-theme-bar:hover{border-color:var(--qm-gold);box-shadow:0 0 12px rgba(var(--big-char-rgb,201,168,76),.15)}
.qm-theme-icon{
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--qm-gold-light),var(--qm-gold-dark));
  box-shadow:0 0 6px var(--qm-gold-dark);
  transition:all .4s;flex-shrink:0;
}
.qm-theme-label{
  font-family:var(--qm-font);font-size:12px;
  color:var(--qm-text-sec);letter-spacing:2px;
  transition:color .3s;white-space:nowrap;
}
.qm-theme-bar:hover .qm-theme-label{color:var(--qm-gold-light)}

/* ═══ 标题 · 符箓笔触 ═══ */
.qm-title{text-align:center;padding:36px 0 8px}
.qm-title .qm-line{
  width:220px;height:3px;margin:0 auto 16px;
  background:linear-gradient(90deg,transparent,var(--qm-gold),var(--qm-gold-light),var(--qm-gold),transparent);
}
.qm-title h1{
  font-family:var(--qm-font-title);font-size:52px;
  background:linear-gradient(180deg,#e8d48b 0%,#c9a84c 40%,#8b6914 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  letter-spacing:8px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));animation:qm-fadeIn .8s ease-out;
}
.qm-sub{font-size:14px;color:var(--qm-muted);letter-spacing:6px;margin-top:6px;animation:qm-fadeIn 1s ease-out}

/* ═══ 太极八卦图 ═══ */
.qm-incense{text-align:center;padding:20px 0 30px;position:relative;height:260px}

.qm-taiji-wrap{
  display:inline-block;position:relative;
  width:200px;height:200px;
  margin-top:10px;
}

/* 外圈金环 */
.qm-taiji-outer-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:2px solid rgba(201,168,76,.35);
  box-shadow:0 0 30px rgba(201,168,76,.15),0 0 60px rgba(139,105,20,.08);
  animation:qm-pulseGold 4s ease-in-out infinite;
}

/* 太极阴阳鱼 */
.qm-taiji{
  position:absolute;inset:4px;border-radius:50%;
  background:conic-gradient(
    from 90deg,
    var(--taiji-black,#1a1a2e) 0deg 180deg,
    var(--taiji-white,#f0e6d3) 180deg 360deg
  );
  overflow:hidden;
}

/* 鱼眼 — 上方（黑色半区中的白底黑眼） */
.qm-taiji-eye{
  position:absolute;
  width:50%;height:50%;
  border-radius:50%;
  left:50%;transform:translateX(-50%);
}
.qm-taiji-eye.top{
  top:0;
  background:radial-gradient(circle at center,
    var(--taiji-black,#1a1a2e) 14%,
    var(--taiji-white,#f0e6d3) 14%
  );
}
.qm-taiji-eye.bottom{
  bottom:0;
  background:radial-gradient(circle at center,
    var(--taiji-white,#f0e6d3) 14%,
    var(--taiji-black,#1a1a2e) 14%
  );
}

/* ═══ 八卦环绕 ═══ */
.qm-bagua-ring{
  position:absolute;inset:-18px;
}
.qm-gua{
  position:absolute;
  width:32px;height:32px;
  left:50%;top:50%;
  margin:-16px 0 0 -16px;
  display:flex;align-items:center;justify-content:center;
}
.qm-gua-name{
  font-family:var(--qm-font-title);
  font-size:14px;font-weight:700;
  color:var(--qm-gold,#c9a84c);
  text-shadow:0 0 6px rgba(201,168,76,.4);
  transition:all .3s;
}
.qm-gua:hover .qm-gua-name{
  color:#e8d48b;
  text-shadow:0 0 12px rgba(232,212,139,.7);
  transform:scale(1.2);
}

/* 八卦方位（先天八卦：上乾下坤） */
/* R=92px，从12点方向顺时针 */
.qm-gua.q0{transform:translateY(-92px)}            /* 乾 — 正上 */
.qm-gua.q1{transform:translate(65px,-65px)}        /* 兑 — 右上 */
.qm-gua.q2{transform:translate(92px,0)}            /* 离 — 正右 */
.qm-gua.q3{transform:translate(65px,65px)}         /* 震 — 右下 */
.qm-gua.q4{transform:translateY(92px)}             /* 坤 — 正下 */
.qm-gua.q5{transform:translate(-65px,65px)}        /* 艮 — 左下 */
.qm-gua.q6{transform:translate(-92px,0)}           /* 坎 — 正左 */
.qm-gua.q7{transform:translate(-65px,-65px)}       /* 巽 — 左上 */

/* ═══ 三步仪式按钮 ═══ */
.qm-steps{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.qm-stepbtn{
  padding:14px 28px;background:var(--qm-card);border:1px solid var(--qm-border);
  color:var(--qm-text-sec);font-family:var(--qm-font-title);font-size:18px;
  letter-spacing:3px;cursor:pointer;border-radius:var(--qm-radius);
  transition:all .4s ease;
}
.qm-stepbtn:hover{border-color:var(--qm-gold);color:var(--qm-gold);box-shadow:0 0 20px rgba(201,168,76,.15)}
.qm-stepbtn.active{
  border-color:var(--qm-gold-light);color:var(--qm-gold-light);
  background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.02));
  box-shadow:0 0 24px rgba(201,168,76,.2);
}
.qm-stepbtn .sn{display:block;font-size:11px;color:var(--qm-gold-dark);letter-spacing:2px;margin-bottom:2px}

/* ═══ 面板 ═══ */
.qm-panel{display:none;animation:qm-fadeIn .6s ease-out}
.qm-panel.show{display:block}
.qm-card{
  background:var(--qm-card);border:1px solid var(--qm-border);
  border-radius:var(--qm-radius);padding:32px 28px;box-shadow:var(--qm-shadow);
}
.qm-card h3{font-family:var(--qm-font-title);font-size:24px;color:var(--qm-gold);letter-spacing:4px;text-align:center;margin-bottom:24px}

/* 时间选择器 */
.qm-time-selects{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.qm-time-selects select{
  padding:10px 32px 10px 12px;background:var(--qm-bg);border:1px solid var(--qm-border);
  color:var(--qm-text);font-family:var(--qm-font);font-size:15px;
  border-radius:8px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b6914' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.qm-time-selects select:focus{outline:none;border-color:var(--qm-gold);box-shadow:0 0 10px rgba(201,168,76,.15)}

.qm-methods{display:flex;gap:8px;justify-content:center;margin-bottom:24px}
.qm-mbtn{
  padding:8px 20px;background:transparent;border:1px solid var(--qm-border);
  color:var(--qm-text-sec);font-family:var(--qm-font);border-radius:20px;cursor:pointer;transition:all .3s;
}
.qm-mbtn:hover{border-color:var(--qm-gold);color:var(--qm-gold)}
.qm-mbtn.sel{background:rgba(201,168,76,.12);border-color:var(--qm-gold);color:var(--qm-gold-light)}

.qm-submit{
  display:block;margin:0 auto;padding:14px 48px;
  background:linear-gradient(135deg,#2d1f0a,#3d2e1a);
  border:2px solid var(--qm-gold-dark);color:var(--qm-gold-light);
  font-family:var(--qm-font-title);font-size:20px;letter-spacing:6px;
  cursor:pointer;border-radius:30px;transition:all .5s;
}
.qm-submit:hover{
  background:linear-gradient(135deg,#3d2e1a,#5a3e1b);
  border-color:var(--qm-gold-light);box-shadow:0 0 30px rgba(201,168,76,.25);transform:translateY(-2px);
}

/* ═══ 断事 ═══ */
.qm-ask{text-align:center;color:var(--qm-muted);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.qm-card textarea{
  width:100%;min-height:80px;background:var(--qm-bg);border:1px solid var(--qm-border);
  color:var(--qm-text);font-family:var(--qm-font);font-size:15px;
  padding:12px 16px;border-radius:8px;resize:vertical;line-height:1.7;letter-spacing:1px;
}
.qm-card textarea:focus{outline:none;border-color:var(--qm-gold);box-shadow:0 0 12px rgba(201,168,76,.1)}
.qm-card textarea::placeholder{color:var(--qm-muted)}
.qm-output{
  margin-top:20px;display:none;background:var(--qm-bg);border:1px solid var(--qm-border);
  border-radius:8px;padding:20px 24px;min-height:120px;
  font-size:14px;line-height:2;color:var(--qm-text-sec);letter-spacing:1px;
}
.qm-output.show{display:block;animation:qm-fadeIn .5s ease-out}
.qm-cursor{display:inline-block;width:2px;height:16px;background:var(--qm-gold);animation:qm-pulseGold 1s ease-in-out infinite;margin-left:2px;vertical-align:text-bottom}

/* ═══ 罗盘九宫格 ═══ */
.qm-compass{margin-top:36px}
.qm-info{text-align:center;margin-bottom:20px;font-size:15px;letter-spacing:2px}
.qm-info .qi{display:inline-block;margin:0 16px;color:var(--qm-muted)}
.qm-info .qi strong{color:var(--qm-gold-light)}
.qm-info .qi span{color:var(--qm-text)}
.qm-compass-wrap{position:relative;width:100%;max-width:520px;margin:0 auto}
.qm-compass-wrap::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100px;height:100px;z-index:0;border-radius:50%;
  background:conic-gradient(var(--qm-bg) 0% 30%,#1a1410 30% 50%,var(--qm-bg) 50% 80%,#1a1410 80% 100%);
  opacity:.12;animation:qm-taijiSpin 20s linear infinite;
}

.qm-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;position:relative;z-index:1}
/* 洛书排列：4 9 2 / 3 5 7 / 8 1 6 */
.qm-cell[data-pos="4"]{grid-row:1;grid-column:1}
.qm-cell[data-pos="9"]{grid-row:1;grid-column:2}
.qm-cell[data-pos="2"]{grid-row:1;grid-column:3}
.qm-cell[data-pos="3"]{grid-row:2;grid-column:1}
.qm-cell[data-pos="5"]{grid-row:2;grid-column:2}
.qm-cell[data-pos="7"]{grid-row:2;grid-column:3}
.qm-cell[data-pos="8"]{grid-row:3;grid-column:1}
.qm-cell[data-pos="1"]{grid-row:3;grid-column:2}
.qm-cell[data-pos="6"]{grid-row:3;grid-column:3}

.qm-cell{
  background:var(--qm-card);border:1px solid var(--qm-border);
  border-radius:10px;padding:10px 8px;min-height:90px;
  text-align:center;transition:all .4s ease;cursor:pointer;position:relative;
  opacity:0;
}
.qm-cell.visible{animation:qm-palaceFlyIn .7s cubic-bezier(.34,1.56,.64,1) forwards}
.qm-cell:hover{border-color:var(--qm-gold);background:var(--qm-alt);box-shadow:0 0 20px rgba(201,168,76,.15);transform:translateY(-3px);z-index:2}
.qm-cell.ji{border-color:rgba(45,140,108,.4);box-shadow:0 0 10px rgba(45,140,108,.1)}
.qm-cell.xiong{border-color:rgba(194,59,34,.35);box-shadow:0 0 8px rgba(194,59,34,.08)}
.qm-cell.kongwang{animation:qm-palaceFlyIn .7s cubic-bezier(.34,1.56,.64,1) forwards, qm-shakeKong 3s ease-in-out infinite 1.5s}
.qm-cell .bagua{font-size:18px;line-height:1;display:block;margin-bottom:2px}
.qm-cell .name{font-family:var(--qm-font-title);font-size:15px;color:var(--qm-gold);letter-spacing:2px;margin-bottom:4px}
.qm-cell .row{font-size:11px;color:var(--qm-muted);line-height:1.5;letter-spacing:1px}
.qm-cell .row .lbl{color:var(--qm-text-sec)}
.qm-cell .row .ji{color:var(--qm-green)}.qm-cell .row .xiong{color:var(--qm-red)}
.qm-cell .tags{margin-top:3px;font-size:10px}
.qm-cell .tags .tk{display:inline-block;background:rgba(194,59,34,.15);color:var(--qm-red);padding:1px 6px;border-radius:4px;letter-spacing:1px;animation:qm-pulseRed 2s ease-in-out infinite}
.qm-cell .tags .tm{display:inline-block;background:rgba(201,168,76,.1);color:var(--qm-gold);padding:1px 6px;border-radius:4px;letter-spacing:1px;animation:qm-pulseGold 2.5s ease-in-out infinite}
.qm-cell .tags .tz{display:inline-block;background:rgba(201,168,76,.15);color:var(--qm-gold-light);padding:1px 6px;border-radius:4px;letter-spacing:1px;border:1px solid rgba(201,168,76,.3)}

/* 中五宫 */
.qm-cell[data-pos="5"]{
  background:radial-gradient(ellipse at center,rgba(201,168,76,.06) 0%,var(--qm-card) 70%);
  border-color:var(--qm-border-acc);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
.qm-cell[data-pos="5"] .taiji{
  width:40px;height:40px;border-radius:50%;
  background:conic-gradient(#1a1410 0% 30%,rgba(201,168,76,.15) 30% 50%,#1a1410 50% 80%,rgba(201,168,76,.15) 80% 100%);
  animation:qm-taijiSpin 8s linear infinite;margin-bottom:6px;
}
.qm-cell[data-pos="5"] .name{font-size:13px}

/* 值符高亮 */
.qm-cell.zhifu{
  border-color:var(--qm-gold-light)!important;box-shadow:0 0 15px rgba(201,168,76,.12);
  animation:qm-palaceFlyIn .7s cubic-bezier(.34,1.56,.64,1) forwards, qm-beaconGold 3s ease-in-out infinite 1s!important;
}

/* ═══ 符箓印章 ═══ */
.qm-seal{text-align:center;margin:10px 0 20px;display:none}
.qm-seal.show{display:block;animation:qm-fadeUp .8s ease-out}
.qm-seal-stamp{
  display:inline-block;position:relative;width:64px;height:64px;
  border:3px solid var(--qm-red);border-radius:8px;
  transform:rotate(3deg);animation:qm-sealAppear .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
.qm-seal-stamp .sc{
  position:absolute;inset:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:28px;line-height:1.1;color:var(--qm-red);font-family:var(--qm-font-title);letter-spacing:0;
}
.qm-seal-stamp .sd{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--qm-red)}
.qm-seal-stamp .sd:nth-child(2){top:4px;left:4px}
.qm-seal-stamp .sd:nth-child(3){top:4px;right:4px}
.qm-seal-stamp .sd:nth-child(4){bottom:4px;left:4px}
.qm-seal-stamp .sd:nth-child(5){bottom:4px;right:4px}
/* 敕印悬浮互动 */
.qm-seal-stamp:hover{transform:rotate(0deg) scale(1.12);border-color:var(--qm-gold);box-shadow:0 0 20px rgba(201,168,76,.35);transition:transform .25s,border-color .25s,box-shadow .25s}
/* 起局用户提示按钮 */
.qm-hint-btn{font-family:"SimSun","宋体",serif;font-size:.65rem;color:var(--qm-gold);background:transparent;border:1px solid var(--qm-gold);border-radius:3px;padding:2px 8px;cursor:pointer;margin-left:8px;vertical-align:middle;transition:background .25s,color .25s;letter-spacing:1px}
.qm-hint-btn:hover{background:var(--qm-gold);color:#1a1a1a}
/* 提示弹窗遮罩 */
.qm-hint-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9999;justify-content:center;align-items:center}
.qm-hint-overlay.show{display:flex;animation:qm-fadeIn .25s ease-out}
/* 提示弹窗卡片 */
.qm-hint-dialog{position:relative;background:var(--qm-bg);border:1px solid var(--qm-gold);border-radius:8px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto;padding:28px 24px 24px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.qm-hint-close{position:absolute;top:8px;right:14px;font-size:1.2rem;color:var(--qm-muted);cursor:pointer;transition:color .2s}
.qm-hint-close:hover{color:var(--qm-gold)}
.qm-hint-dialog h3{font-family:"SimSun","宋体",serif;text-align:center;color:var(--qm-gold);font-size:1.1rem;margin:0 0 16px;letter-spacing:4px}
.qm-hint-dialog h4{font-family:"SimSun","宋体",serif;color:var(--qm-gold);font-size:.85rem;margin:16px 0 8px}
.qm-hint-body{font-family:"SimSun","宋体",serif;font-size:.75rem;line-height:2;color:var(--qm-muted)}
.qm-hint-body p{margin:0 0 8px}
.qm-hint-body ul{margin:0;padding-left:18px}
.qm-hint-body li{margin-bottom:6px}
.qm-hint-em{color:var(--qm-gold);font-weight:700}

/* ═══ 符箓降临光效 ═══ */
.qm-talisman-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:10;
  display:none;align-items:flex-start;justify-content:center;padding-top:10%;
}
.qm-talisman-overlay.show{display:flex;animation:qm-fadeIn .3s ease-out}
.qm-talisman-glow{
  width:260px;height:80px;
  background:linear-gradient(180deg,rgba(201,168,76,.25) 0%,rgba(201,168,76,.08) 40%,transparent 100%);
  border-radius:40% 40% 0 0;filter:blur(20px);
  animation:qm-talismanDescend 2s ease-out forwards;
}

.qm-auto-demo{text-align:center;margin:12px 0}
.qm-auto-demo button{
  padding:6px 16px;font-size:11px;background:transparent;
  border:1px dashed var(--qm-border);color:var(--qm-muted);
  border-radius:12px;cursor:pointer;letter-spacing:1px;font-family:var(--qm-font);
}
.qm-auto-demo button:hover{border-color:var(--qm-gold);color:var(--qm-text-sec)}

/* 响应式 */
@media(max-width:600px){
  .qm-cell{min-height:72px;padding:8px 4px}
  .qm-cell .name{font-size:12px}
  .qm-cell .row{font-size:10px}
  .qm-grid{gap:4px}
  .qm-stepbtn{padding:10px 16px;font-size:15px}
  .qm-steps{gap:8px}
  .qm-time-selects select{padding:8px 24px 8px 8px;font-size:13px}
  .qm-title h1{font-size:36px}
}