:root{
  /* ===== 设计令牌（CONTRACT-themes.md §0；缺省 = tarot 星夜空想，即 hub 与站点 identity） ===== */
  --bg:#07070c; --glow-a:#1a1c2e; --glow-b:rgba(207,169,79,.07);
  --dust:.5; --pfx:1;
  --panel:#12131f; --panel-2:#181a28; --line:#262a3d;
  --ink:#ece8e0; --ink-2:#a8a49b; --ink-3:#6f6d67;
  --accent:#cfa94f; --accent-2:#8d6f26; --accent-3:#f0dca6; --accent-soft:rgba(207,169,79,.12);
  --aux:var(--accent); --aux-soft:var(--accent-soft);
  --bad:#c9604f; --ok:#6f9e6a;
  --serif:"Iowan Old Style",Georgia,"Times New Roman","Songti SC",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --r:14px; --r-sm:9px; --ease:cubic-bezier(.22,.61,.36,1);
  --tex:none; --tex-op:0;
  /* 间距/字号阶梯（全站统一，不再出现一次性魔法值） */
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:30px; --sp-6:40px;
}
/* 需要按主题解析的缺省令牌 + 旧令牌别名（过渡期兼容 methods.css）：
   在 body 上求值才能跟随主题（自定义属性在声明处就被替换，写在 :root 会固化成塔罗金）。shell 自身一律用新令牌。 */
body{
  --aux:var(--accent); --aux-soft:var(--accent-soft);
  --gold:var(--accent); --gold-2:var(--accent-2); --gold-3:var(--accent-3); --gold-soft:var(--accent-soft);
  --night:var(--bg); --night-2:var(--panel);
}

/* ===== 七主题（只覆盖令牌值） ===== */
/* 塔罗 · 星夜空想（站点 identity，值即 :root 缺省） */
body[data-m="tarot"]{
  --bg:#07070c; --glow-a:#1a1c2e; --glow-b:rgba(207,169,79,.07); --dust:.5; --pfx:1;
  --panel:#12131f; --panel-2:#181a28; --line:#262a3d;
  --ink:#ece8e0; --ink-2:#a8a49b; --ink-3:#6f6d67;
  --accent:#cfa94f; --accent-2:#8d6f26; --accent-3:#f0dca6; --accent-soft:rgba(207,169,79,.12);
  --bad:#c9604f; --ok:#6f9e6a;
  --serif:"Iowan Old Style",Georgia,"Times New Roman","Songti SC",serif;
  --tex:none; --tex-op:0;
}
/* 六爻 · 宣纸墨韵 */
body[data-m="liuyao"]{
  --bg:#ece1c8; --glow-a:#f6efdd; --glow-b:rgba(166,58,43,.06); --dust:0; --pfx:.12;
  --panel:#f7f0dd; --panel-2:#fbf6e8; --line:#d5c49c;
  --ink:#2e2820; --ink-2:#6f6252; --ink-3:#8b7b63;
  --accent:#a63a2b; --accent-2:#7c2a1d; --accent-3:#c8705a; --accent-soft:rgba(166,58,43,.12);
  --bad:#a8442f; --ok:#4f7a52;
  --serif:"Kaiti SC","KaiTi","STKaiti","楷体",Georgia,"Songti SC",serif;
  --tex:repeating-linear-gradient(88deg, rgba(124,106,70,.05) 0 2px, transparent 2px 6px),
        repeating-linear-gradient(4deg, rgba(124,106,70,.035) 0 3px, transparent 3px 11px);
  --tex-op:.55;
}
/* 梅花易数 · 青花梅花 */
body[data-m="meihua"]{
  --bg:#e9eff2; --glow-a:#ffffff; --glow-b:rgba(46,90,168,.08); --dust:0; --pfx:.12;
  --panel:#ffffff; --panel-2:#f3f7fb; --line:#c0cfdd;
  --ink:#1e3a5c; --ink-2:#5d7590; --ink-3:#6b8299;
  --accent:#2e5aa8; --accent-2:#1d3d73; --accent-3:#7191cc; --accent-soft:rgba(46,90,168,.12);
  --aux:#c65b7c; --aux-soft:rgba(198,91,126,.12);
  --bad:#b0442f; --ok:#3f7a5a;
  --serif:"Songti SC","SimSun","宋体","Noto Serif CJK SC",Georgia,serif;
  --tex:repeating-linear-gradient(45deg, rgba(46,90,168,.045) 0 3px, transparent 3px 13px);
  --tex-op:.5;
}
/* 周易 · 龟甲蓍草 */
body[data-m="zhouyi"]{
  --bg:#e6dabb; --glow-a:#f3ecd6; --glow-b:rgba(122,106,58,.08); --dust:0; --pfx:.12;
  --panel:#f3ecd6; --panel-2:#f9f3e3; --line:#c6b689;
  --ink:#38301d; --ink-2:#75694e; --ink-3:#8a7a52;
  --accent:#7a6a3a; --accent-2:#594c28; --accent-3:#a89560; --accent-soft:rgba(122,106,58,.12);
  --bad:#a8442f; --ok:#4f7a52;
  --serif:"Songti SC","SimSun","宋体","Noto Serif CJK SC",Georgia,serif;
  --tex:repeating-linear-gradient(180deg, transparent 0 26px, rgba(122,106,58,.06) 26px 29px, transparent 29px 34px, rgba(122,106,58,.06) 34px 37px, transparent 37px 60px);
  --tex-op:.5;
}
/* 占星骰子 · 星海蓝夜 */
body[data-m="astrodice"]{
  --bg:#090e22; --glow-a:#161d3d; --glow-b:rgba(154,140,216,.10); --dust:.5; --pfx:1;
  --panel:#141a36; --panel-2:#1b2244; --line:#2b3560;
  --ink:#e2e8f8; --ink-2:#98a4c6; --ink-3:#6f7ba3;
  --accent:#9a8cd8; --accent-2:#6d5cb6; --accent-3:#c9bff0; --accent-soft:rgba(154,140,216,.12);
  --bad:#d9776a; --ok:#6f9e6a;
  --tex:none; --tex-op:0;
}
/* 卢恩符文 · 北境霜石 */
body[data-m="runes"]{
  --bg:#dbe1e8; --glow-a:#eef3f7; --glow-b:rgba(79,109,140,.08); --dust:0; --pfx:.12;
  --panel:#eef3f7; --panel-2:#f6fafc; --line:#b6c2cd;
  --ink:#222a32; --ink-2:#5b656f; --ink-3:#75808a;
  --accent:#4f6d8c; --accent-2:#375370; --accent-3:#7e9dbf; --accent-soft:rgba(79,109,140,.12);
  --bad:#a8442f; --ok:#3f7a5a;
  --serif:Georgia,"Times New Roman","Songti SC",serif;
  --tex:repeating-linear-gradient(135deg, rgba(79,109,140,.05) 0 2px, transparent 2px 11px);
  --tex-op:.5;
}
/* 生命灵数 · 秘境紫金 */
body[data-m="numerology"]{
  --bg:#140d29; --glow-a:#211650; --glow-b:rgba(201,168,106,.08); --dust:.5; --pfx:1;
  --panel:#1f1548; --panel-2:#291d5c; --line:#372a63;
  --ink:#e9e3f8; --ink-2:#a79cc8; --ink-3:#7d6fa8;
  --accent:#c9a86a; --accent-2:#a8853f; --accent-3:#e3ca9a; --accent-soft:rgba(201,168,106,.12);
  --bad:#d9776a; --ok:#6f9e6a;
  --tex:none; --tex-op:0;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:
    radial-gradient(1200px 700px at 50% -8%, var(--glow-a) 0, transparent 62%),
    radial-gradient(900px 500px at 85% 100%, var(--glow-b) 0, transparent 60%),
    var(--bg);
  color:var(--ink); font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}
/* 星尘层（深浅主题显现，浅色主题 --dust:0 隐去） */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:var(--dust);
  background-image:radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.24) 0, transparent 60%),
                   radial-gradient(1px 1px at 70% 12%, rgba(255,255,255,.24) 0, transparent 60%),
                   radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,.24) 0, transparent 60%),
                   radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.24) 0, transparent 60%);
  background-image:radial-gradient(1px 1px at 20% 30%, color-mix(in srgb, var(--ink) 28%, transparent) 0, transparent 60%),
                   radial-gradient(1px 1px at 70% 12%, color-mix(in srgb, var(--ink) 22%, transparent) 0, transparent 60%),
                   radial-gradient(1px 1px at 42% 78%, color-mix(in srgb, var(--ink) 18%, transparent) 0, transparent 60%),
                   radial-gradient(1px 1px at 88% 62%, color-mix(in srgb, var(--ink) 16%, transparent) 0, transparent 60%);
  background-size:520px 520px,420px 420px,620px 620px,380px 380px;
  transition:opacity .5s var(--ease);
}
/* 浅色主题文化底纹（--tex/--tex-op；深色主题为 none/0） */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:var(--tex-op);background:var(--tex);
  transition:opacity .5s var(--ease);
}
/* 粒子画布随主题降级 */
body>canvas{opacity:var(--pfx);transition:opacity .5s var(--ease)}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 16px;transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
button:hover{border-color:var(--accent-2);color:var(--accent-3)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button[disabled]{opacity:.4;cursor:not-allowed}
.btn-primary{
  border:1px solid var(--accent-2);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  color:var(--accent); letter-spacing:.08em; font-weight:600;
}
.btn-primary:hover{border-color:var(--accent);color:var(--accent-3);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent),0 8px 30px -12px color-mix(in srgb, var(--accent) 50%, transparent)}
.btn-xl{font-size:17px;padding:15px 42px;border-radius:999px}
.ghost{border-color:transparent;color:var(--ink-2);padding:6px 10px}
.ghost:hover{color:var(--accent)}
.link{border:0;padding:0 2px;color:var(--ink-2);border-bottom:1px solid transparent}
.link:hover{color:var(--accent);border-bottom-color:var(--accent-2)}

/* ---------- 顶栏 ---------- */
header.top{position:sticky;top:0;z-index:30;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background:var(--bg); background:color-mix(in srgb, var(--bg) 72%, transparent);backdrop-filter:blur(10px)}
header.top .bar{max-width:1120px;margin:0 auto;padding:0 22px;height:60px;display:flex;align-items:center;justify-content:space-between}
.brand{font:600 19px/1 var(--serif);letter-spacing:.22em;color:var(--ink)}
.brand:hover{color:var(--accent-3);text-decoration:none}
.tools{display:flex;align-items:center;gap:4px}
.who{color:var(--ink-3);font-size:13px;margin:0 8px}

/* ---------- 方法上下文条 ---------- */
.methodbar{position:sticky;top:61px;z-index:25;display:flex;align-items:center;gap:10px;
  max-width:1120px;margin:0 auto;padding:7px 22px;border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background:var(--bg); background:color-mix(in srgb, var(--bg) 82%, transparent);backdrop-filter:blur(10px)}
.mb-icon{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center}
.mb-icon svg{width:20px;height:20px;display:block}
.mb-name{font:600 15px/1 var(--serif);letter-spacing:.1em;color:var(--accent);white-space:nowrap}
.mb-group{color:var(--ink-3);font-size:12.5px;letter-spacing:.08em;white-space:nowrap}
.mb-group::before{content:"·";margin-right:8px}
#mbBack{margin-left:auto;flex:none}

/* ---------- 舞台与渐隐渐显 ---------- */
main{max-width:1120px;margin:0 auto;padding:0 22px 80px;position:relative;z-index:1}
.stage{display:none;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.stage.active{display:block;opacity:1;transform:none}
.stage.fading{opacity:0;transform:translateY(-6px)}
.stage.center{text-align:center}

/* ---------- 第一页：hub 七法 ---------- */
.hero{padding:22px 0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2vh,20px)}
.hero-pick{color:var(--ink-3);font-size:14px;letter-spacing:.16em;margin:0}
.deckhero{position:relative;height:clamp(84px,15vh,148px);aspect-ratio:5/8.4;width:auto;perspective:1200px}
.deckhero .cs{position:absolute;inset:0;border-radius:12px;border:1px solid var(--line)}
.deckhero .c1{transform:translate(-16px,10px) rotate(-7deg);background:var(--panel-2);opacity:.55}
.deckhero .c2{transform:translate(14px,6px) rotate(6deg);background:var(--panel-2);opacity:.7}
.deckhero .c3{background:repeating-linear-gradient(45deg,var(--panel-2) 0 7px,var(--panel) 7px 14px);
  display:flex;align-items:center;justify-content:center;color:var(--accent-2);font:600 34px/1 var(--serif);
  box-shadow:0 30px 60px -30px color-mix(in srgb, var(--ink) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
  animation:breathe 4.5s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.display{font:600 clamp(26px,5.4vh,44px)/1.1 var(--serif);letter-spacing:.28em;margin:0;
  background:linear-gradient(180deg,var(--accent-3),var(--accent) 60%,var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hint{color:var(--ink-3);font-size:14px;margin:0}
.hero-links{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:14px}

/* ---------- hub：三组方法网格 ---------- */
.method-groups{display:flex;flex-direction:column;gap:var(--sp-3);width:100%;max-width:880px;margin:4px auto 0}
.mgroup{width:100%}
.mgroup-t{font:600 12px/1 var(--serif);letter-spacing:.22em;color:var(--ink-3);margin:0 0 10px;padding-left:2px}
.method-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(224px,100%),1fr))}
.mgroup.solo .method-grid{grid-template-columns:minmax(0,1fr);max-width:340px}
.mcard{position:relative;text-align:left;padding:16px 16px 14px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb, var(--ink) 2%, transparent),transparent);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.mcard::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,var(--ac,transparent),transparent);opacity:.6}
.mcard:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 14px 34px -22px color-mix(in srgb, var(--ink) 14%, transparent)}
.mcard .mi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.mcard .mi svg{width:24px;height:24px;display:block}
.mcard .mn{font:600 17px/1.3 var(--serif);letter-spacing:.06em;color:var(--accent-3)}
.mcard .md{color:var(--ink-3);font-size:13px;line-height:1.5}
.stage-note{color:var(--ink-3);font-size:14px;text-align:center;border:1px dashed var(--line);
  border-radius:var(--r);padding:26px 18px;max-width:520px;margin:26px auto 0}

/* ---------- 牌阵选择 ---------- */
.step-title{font:600 clamp(22px,4vw,30px)/1.3 var(--serif);letter-spacing:.12em;margin:40px 0 var(--sp-1)}
.step-sub{color:var(--ink-3);font-size:14px;margin:0 0 var(--sp-4)}
.spread-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.spread-card{text-align:left;padding:18px 20px;border-radius:var(--r);background:linear-gradient(180deg,color-mix(in srgb, var(--ink) 2%, transparent),transparent);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.spread-card:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.spread-card .sn{font:600 18px/1.3 var(--serif);letter-spacing:.06em;color:var(--accent-3)}
.spread-card .sc{color:var(--ink-3);font-size:13px}
.spread-card .sx{color:var(--ink-3);font-size:12px;letter-spacing:.08em}

/* ---------- 静心 / 即将开始 ---------- */
.ritual{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.ritual .big{font:600 clamp(20px,3.4vw,28px)/1.6 var(--serif);letter-spacing:.14em;max-width:26ch}
.ritual .small{color:var(--ink-3);font-size:14px}
#breatheGo{margin-top:6px}
.ritual .glow{width:58px;height:58px;border-radius:50%;border:1px solid var(--accent-2);position:relative}
.ritual .glow::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--accent);
  animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.fadeword{animation:wordIn .6s var(--ease)}
@keyframes wordIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 牌桌 ---------- */
.table{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr));justify-items:center;align-items:start;margin:34px 0 10px}
.table.celt{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.table.celt{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.table.celt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slot{width:100%;max-width:182px;text-align:center}
.slot .pos{font-size:12px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:var(--sp-1);min-height:18px}
.cardwrap{position:relative;width:100%;aspect-ratio:5/8.5;perspective:1100px;cursor:default}
.cardwrap.flippable{cursor:pointer}
.cardwrap .side{position:absolute;inset:0;border-radius:10px;border:1px solid var(--line);
  backface-visibility:hidden;overflow:hidden;transition:transform .62s var(--ease),box-shadow .4s var(--ease)}
.cardwrap .back{background:repeating-linear-gradient(45deg,var(--panel-2) 0 7px,var(--panel) 7px 14px);
  display:flex;align-items:center;justify-content:center;color:var(--accent-2);font:600 24px/1 var(--serif);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent) inset}
.cardwrap .face{transform:rotateY(180deg);background:var(--panel-2)}
.cardwrap.rev .face{transform:rotateY(180deg) rotate(180deg)}
.cardwrap.down .back{transform:rotateY(-180deg)}
.cardwrap.down .face{transform:rotateY(0deg)}
.cardwrap.rev.down .face{transform:rotateY(0deg) rotate(180deg)}
.cardwrap img{width:100%;height:100%;object-fit:cover;display:block}
.cardwrap.flippable:not(.down):hover .back{border-color:var(--accent-2);box-shadow:0 0 26px -6px color-mix(in srgb, var(--accent) 50%, transparent)}
.cardwrap.down{animation:land .5s var(--ease)}
@keyframes land{0%{transform:translateY(-6px) scale(1.02)}100%{transform:none}}
.cardname{margin-top:9px;font-size:13px;color:var(--accent-3);letter-spacing:.06em;opacity:0;transform:translateY(4px);
  transition:opacity .5s .25s var(--ease),transform .5s .25s var(--ease)}
.cardname.show{opacity:1;transform:none}
.cardname .r{color:var(--ink-3);margin-left:6px}

/* ---------- 提问 & 解读 ---------- */
.askbox{max-width:640px;margin:var(--sp-4) auto 0}
.askbox label{display:block;font-size:13px;color:var(--ink-2);margin:0 0 var(--sp-1);letter-spacing:.06em}
textarea,input,select{width:100%;font:inherit;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px}
textarea{min-height:76px;resize:vertical}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:var(--sp-2)}
.count{color:var(--ink-3);font-size:13px}
.reading{max-width:70ch;margin:26px auto 0;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,color-mix(in srgb, var(--ink) 2.2%, transparent),color-mix(in srgb, var(--ink) .8%, transparent));padding:var(--sp-4) 26px}
.reading h3{font:600 16px/1.5 var(--serif);letter-spacing:.08em;color:var(--accent);margin:20px 0 var(--sp-1)}
.reading h3:first-child{margin-top:0}
.reading p{margin:0 0 var(--sp-2);color:var(--ink)}
.thinking{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:34px 0}
.readbar{display:flex;align-items:center;gap:var(--sp-2);max-width:70ch;margin:var(--sp-4) auto 0}
.readbar .rail{flex:1;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.readbar .fill{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:width .45s var(--ease)}
.readbar span{color:var(--ink-3);font-size:12px;letter-spacing:.08em;white-space:nowrap}
.reading.streaming p:last-child::after{content:"▍";color:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#readerr{text-align:center}
.think-word{font:500 clamp(16px,2.6vw,20px)/1.7 var(--serif);letter-spacing:.1em;color:var(--accent);min-height:3.4em;max-width:34ch;text-align:center}
.think-bar{width:180px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:180px 2px;animation:slide 1.6s linear infinite}
@keyframes slide{from{background-position:-180px 0}to{background-position:180px 0}}
.err{color:var(--bad);font-size:14px;margin-top:var(--sp-2);text-align:center}

/* ---------- 起卦 / 卦象（塔罗以外六法的通用舞台，内部 UI 由 methods.css 提供） ---------- */
#st-cast .castbox{max-width:760px;margin:var(--sp-4) auto 0;min-height:42vh}
#st-result .resultbox{max-width:760px;margin:var(--sp-4) auto 0;min-height:30vh}
#st-result .cont-row{margin-top:28px}

/* ---------- 面板（图鉴/记录） ---------- */
.panel{display:none}
.panel.open{display:block;animation:wordIn .4s var(--ease)}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin:var(--sp-5) 0 var(--sp-3)}
.panel-head h2{font:600 20px/1.3 var(--serif);letter-spacing:.1em;margin:0}
.gallery-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:0 0 18px}
.gtab{border-radius:999px;padding:6px 15px;font-size:13px;color:var(--ink-2);border-color:var(--line);letter-spacing:.04em}
.gtab:hover{color:var(--accent-3);border-color:var(--accent-2)}
.gtab.on{color:var(--accent);border-color:var(--accent-2);background:var(--accent-soft)}
.gallery-body{display:flex;flex-direction:column;gap:var(--sp-4)}
.gsec-t{font:600 13px/1.3 var(--serif);letter-spacing:.18em;color:var(--ink-2);margin:0 0 10px}
.gallery-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.gallery-grid button{padding:0;border-radius:8px;overflow:hidden;border-color:var(--line);background:var(--panel-2)}
.gallery-grid img{width:100%;display:block}
.gallery-grid button:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.gallery-grid.txt{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.gcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:11px 13px;text-align:left;
  border-radius:var(--r-sm);width:100%;border-color:var(--line);background:linear-gradient(180deg,color-mix(in srgb, var(--ink) 2%, transparent),transparent)}
.gcard:hover{border-color:var(--accent-2);transform:translateY(-2px)}
.gcard .gn{font:600 15px/1.35 var(--serif);color:var(--accent);letter-spacing:.04em}
.gcard .ge{color:var(--ink-3);font-size:12px}
.gcard.rune{align-items:center;text-align:center}
.gcard .gs{font:600 24px/1 var(--serif);color:var(--accent)}
.hist ul{list-style:none;margin:0;padding:0}
.hist li{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;background:var(--panel)}
.hist .meta{display:flex;justify-content:space-between;gap:10px;color:var(--ink-3);font-size:13px;align-items:baseline}
.hist .q{color:var(--ink);margin-top:6px}
.hist .body{color:var(--ink-2);font-size:14px;white-space:pre-wrap;max-height:8.5em;overflow:hidden;margin-top:var(--sp-1);cursor:pointer}
.hist .body.open{max-height:none}

/* ---------- 弹窗 ---------- */
dialog{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel),var(--bg));
  color:var(--ink);max-width:min(600px,94vw);padding:0}
dialog::backdrop{background:var(--bg); background:color-mix(in srgb, var(--bg) 78%, transparent);backdrop-filter:blur(3px)}
.dlg-grid{display:grid;grid-template-columns:158px 1fr;gap:20px;padding:22px}
.dlg-grid img{width:100%;border-radius:10px;border:1px solid var(--line)}
.dlg-col{display:flex;flex-direction:column;min-width:0}
.dlg-art{width:100%;color:var(--accent)}
.dlg-art svg{width:100%;height:auto;display:block}
.dlg-glyph{font:600 62px/1.1 var(--serif);color:var(--accent);text-align:center;padding:16px 0;
  border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}
.dlg-lead{color:var(--accent);font-weight:600;margin-bottom:6px}
.dlg-grid h3{margin:0 0 2px;font:600 21px/1.3 var(--serif);color:var(--accent-3);letter-spacing:.06em}
.dlg-grid .en{color:var(--ink-3);font-size:13px;margin-bottom:10px}
.kw{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 var(--sp-2)}
.kw span{border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:13px;color:var(--ink-2)}
.close{position:absolute;top:8px;right:10px}

/* ---------- 登录页 ---------- */
.login{max-width:372px;margin:12vh auto;padding:30px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),var(--bg));text-align:center}
.login h1{font:600 26px/1.2 var(--serif);letter-spacing:.26em;margin:0 0 6px;
  background:linear-gradient(180deg,var(--accent-3),var(--accent) 60%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.login .sub{color:var(--ink-3);font-size:13px;margin:0 0 20px}
.login label{display:block;text-align:left;font-size:13px;color:var(--ink-2);margin:var(--sp-2) 0 6px}
.login button{width:100%;margin-top:20px}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--accent-soft);border-top-color:var(--accent);
  margin:18px auto 0;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:700px){
  main{padding:0 14px 60px}
  header.top .bar{padding:0 14px}
  .methodbar{padding:6px 14px;gap:var(--sp-1)}
  .mb-group{display:none}
  .table{gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(104px,100%),1fr))}
  .slot{max-width:150px}
  .reading{padding:18px 16px}
  .dlg-grid{grid-template-columns:1fr}
  .hero{padding:34px 0 12px}
  .method-grid{grid-template-columns:1fr}
  .mgroup.solo .method-grid{max-width:none}
  .gallery-tabs{gap:6px}
  .gtab{padding:5px 12px;font-size:12px}
  .dlg-glyph{font-size:48px}
}

/* ---------- 分步流程补充 ---------- */
.center{text-align:center}
.cont-row{display:flex;justify-content:center;gap:14px;margin-top:var(--sp-4)}
.switch{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--ink-2);font-size:14px;margin-top:22px;cursor:pointer}
.switch input{width:auto;accent-color:var(--accent)}
.cardwrap{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cardwrap.pre{opacity:0;transform:translateY(-16px) scale(.94)}
.cardwrap.pop .face{box-shadow:0 0 0 1px var(--accent),0 0 36px -4px color-mix(in srgb, var(--accent) 55%, transparent)}
.spread-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero-links span{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:opacity .2s linear!important}}