/* ===========================================================
   玄机阁 · 神秘塔罗风主题
   深色星空 / 紫金霓虹 / 卷轴质感
   =========================================================== */

:root {
  --bg: #0a0814;
  --bg-2: #120e24;
  --panel: rgba(28, 22, 56, 0.72);
  --panel-solid: #1a1438;
  --panel-border: rgba(178, 132, 255, 0.28);
  --gold: #e9c46a;
  --gold-bright: #ffd97a;
  --purple: #b284ff;
  --purple-deep: #7c3aed;
  --cyan: #6ad9ff;
  --rose: #ff7eb6;
  --ink: #ece6ff;
  --ink-dim: #b9b0d8;
  --ink-faint: #7e75a3;
  --danger: #ff6b8a;
  --shadow: 0 18px 50px rgba(10, 6, 30, 0.6);
  --glow: 0 0 24px rgba(178, 132, 255, 0.45);
  --radius: 18px;
  --serif: "Noto Serif SC", "Ma Shan Zheng", serif;
  --sans: "Noto Sans SC", system-ui, sans-serif;
  --brush: "Ma Shan Zheng", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  line-height: 1.65;
}

/* ---------- 星空与星云背景 ---------- */
.star-canvas {
  position: fixed; inset: 0; z-index: -4; pointer-events: none;
}
.starfield {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(124, 58, 237, 0.18), transparent 55%),
    radial-gradient(ellipse at 85% 25%, rgba(106, 217, 255, 0.10), transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(233, 196, 106, 0.10), transparent 55%),
    linear-gradient(180deg, #0a0814 0%, #0d0a1c 60%, #0a0814 100%);
}
.starfield::before, .starfield::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 40px 70px, #fff, transparent),
    radial-gradient(1px 1px at 90px 40px, #c9b3ff, transparent),
    radial-gradient(1px 1px at 130px 80px, #fff, transparent),
    radial-gradient(2px 2px at 160px 120px, #ffd97a, transparent),
    radial-gradient(1px 1px at 200px 50px, #fff, transparent),
    radial-gradient(1px 1px at 240px 100px, #6ad9ff, transparent),
    radial-gradient(1px 1px at 280px 30px, #fff, transparent),
    radial-gradient(2px 2px at 320px 150px, #fff, transparent),
    radial-gradient(1px 1px at 360px 60px, #b284ff, transparent);
  background-repeat: repeat;
  background-size: 400px 200px;
  opacity: 0.25;
  animation: twinkle 6s ease-in-out infinite alternate;
}
.starfield::after { background-size: 350px 220px; animation-duration: 9s; opacity: 0.15; }
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.7; } }

.nebula {
  position: fixed; border-radius: 50%; filter: blur(70px); z-index: -2;
  opacity: 0.5; pointer-events: none;
}
.nebula-1 { width: 520px; height: 520px; top: -120px; left: -80px; background: radial-gradient(circle, rgba(124,58,237,.5), transparent 65%); }
.nebula-2 { width: 480px; height: 480px; bottom: -140px; right: -90px; background: radial-gradient(circle, rgba(106,217,255,.35), transparent 65%); }
.nebula-3 { width: 380px; height: 380px; top: 40%; left: 55%; background: radial-gradient(circle, rgba(255,126,182,.28), transparent 65%); }

/* ---------- 顶部导航 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 28px;
  background: linear-gradient(180deg, rgba(10,8,20,.92), rgba(10,8,20,.55));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--panel-border);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  font-family: var(--brush); font-size: 26px; color: #0a0814;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 10px; box-shadow: var(--glow), inset 0 1px 2px rgba(255,255,255,.3);
  transition: box-shadow .3s;
}
.brand:hover .brand-mark { box-shadow: 0 0 32px rgba(233,196,106,.6), inset 0 1px 2px rgba(255,255,255,.3); }
.brand-name { font-family: var(--serif); font-weight: 900; font-size: 20px; letter-spacing: 2px;
  background: linear-gradient(135deg, #ffd97a, #e9c46a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.nav { display: flex; gap: 4px; margin-left: 8px; flex-wrap: wrap; }
.nav-link {
  position: relative; cursor: pointer; padding: 8px 14px; border-radius: 10px;
  color: var(--ink-dim); font-size: 14.5px; font-weight: 500; text-decoration: none;
  transition: color .25s, background .25s, text-shadow .25s;
}
.nav-link:hover { color: var(--ink); background: rgba(178,132,255,.12); text-shadow: 0 0 10px rgba(178,132,255,.3); }
.nav-link.active { color: var(--gold-bright); background: rgba(233,196,106,.12); text-shadow: 0 0 12px rgba(233,196,106,.4); }
.nav-link.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 8px rgba(233,196,106,.5);
}

.user-chip {
  margin-left: auto; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(178,132,255,.12); border: 1px solid var(--panel-border);
  transition: background .25s;
}
.user-chip:hover { background: rgba(178,132,255,.22); }
.user-avatar {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--brush); font-size: 18px; color: #0a0814;
  background: linear-gradient(135deg, var(--purple), var(--rose)); border-radius: 50%;
}
.user-name { font-size: 13.5px; color: var(--ink); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 主舞台 ---------- */
.stage {
  max-width: 1080px; margin: 0 auto; padding: 36px 24px 80px;
  position: relative; z-index: 1;
}
/* view 进场动画见文件末尾 viewReveal */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- 通用组件 ---------- */
.section-title {
  font-family: var(--serif); font-weight: 900; font-size: 30px; letter-spacing: 3px;
  background: linear-gradient(135deg, #ffd97a 0%, #e9c46a 40%, #b8860b 70%, #ffd97a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(233,196,106,.35));
}
.section-sub { color: var(--ink-dim); font-size: 14.5px; margin-top: 6px; }
.divider {
  display: flex; align-items: center; gap: 14px; margin: 18px 0 26px; color: var(--purple);
}
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(178,132,255,.5), transparent); }
.divider .glyph { font-family: var(--brush); font-size: 22px; color: var(--gold-bright); filter: drop-shadow(0 0 8px rgba(233,196,106,.4)); }

.panel {
  position: relative;
  background: linear-gradient(160deg, rgba(28,22,56,.75) 0%, rgba(18,14,36,.7) 100%);
  border: 1px solid transparent;
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
/* 渐变边框（伪元素） */
.panel::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(140deg, rgba(178,132,255,.4) 0%, rgba(233,196,106,.15) 40%, rgba(106,217,255,.2) 70%, rgba(178,132,255,.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; transition: opacity .3s;
}
/* 装饰角线 */
.panel::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px;
  border-top: 1.5px solid rgba(233,196,106,.35); border-right: 1.5px solid rgba(233,196,106,.35);
  border-top-right-radius: 8px; pointer-events: none;
}
.panel + .panel { margin-top: 20px; }

.btn {
  cursor: pointer; border: none; font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 11px 26px; border-radius: 12px; transition: transform .15s, box-shadow .25s, background .25s;
  display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden;
}
.btn-primary { color: #0a0814; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 6px 20px rgba(233,196,106,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(233,196,106,.5); }
/* shine sweep */
.btn::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn:hover::after { left: 130%; }
.btn-ghost { color: var(--ink); background: rgba(178,132,255,.14); border: 1px solid var(--panel-border); }
.btn-ghost:hover { background: rgba(178,132,255,.26); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; color: var(--ink-dim); letter-spacing: 1px; }
.field .hint { font-size: 12px; color: var(--ink-faint); }
input, select {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: rgba(10,8,20,.55); border: 1px solid var(--panel-border);
  border-radius: 10px; padding: 11px 13px; outline: none; transition: border .25s, box-shadow .25s, background .25s;
}
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(178,132,255,.18), 0 0 16px rgba(178,132,255,.12); background: rgba(10,8,20,.7); }
input[type="date"], input[type="time"] { color-scheme: dark; }

.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .topbar { flex-wrap: wrap; } .nav { order: 3; width: 100%; justify-content: center; margin: 6px 0 0; } }

.tag {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(178,132,255,.16); color: var(--purple); border: 1px solid var(--panel-border);
}

/* ---------- 首页 ---------- */
.hero { text-align: center; padding: 50px 10px 30px; }
.hero .seal {
  width: 92px; height: 92px; margin: 0 auto 22px; display: grid; place-items: center;
  font-family: var(--brush); font-size: 58px; color: #0a0814;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-radius: 22px; box-shadow: 0 0 40px rgba(233,196,106,.5), inset 0 2px 4px rgba(255,255,255,.3); transform: rotate(-3deg);
  animation: sealFloat 4s ease-in-out infinite alternate;
}
@keyframes sealFloat { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(-3deg) translateY(-6px); } }
.hero h1 {
  font-family: var(--serif); font-weight: 900; font-size: clamp(34px, 6vw, 54px); letter-spacing: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #ece6ff 30%, #ffd97a 60%, #e9c46a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 20px rgba(233,196,106,.3));
}
.hero h1 span { 
  background: linear-gradient(135deg, #ffd97a, #e9c46a, #b8860b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p { color: var(--ink-dim); margin-top: 14px; font-size: 16px; max-width: 560px; margin-inline: auto; }
.hero .verse { font-family: var(--brush); color: var(--purple); font-size: 22px; margin-top: 18px; letter-spacing: 4px; filter: drop-shadow(0 0 10px rgba(178,132,255,.4)); }

.module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 720px) { .module-grid { grid-template-columns: 1fr; } }
.module-card {
  position: relative; cursor: pointer; overflow: hidden;
  border-radius: var(--radius); padding: 28px; min-height: 180px;
  border: 1px solid transparent; background: linear-gradient(160deg, rgba(28,22,56,.72), rgba(18,14,36,.65));
  backdrop-filter: blur(12px);
  transition: transform .3s, box-shadow .3s; box-shadow: var(--shadow);
}
/* 渐变边框 */
.module-card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(140deg, rgba(178,132,255,.35), rgba(233,196,106,.12) 50%, rgba(106,217,255,.18));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; transition: background .3s;
}
/* 装饰角 */
.module-card::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px;
  border-top: 1.5px solid rgba(233,196,106,.3); border-right: 1.5px solid rgba(233,196,106,.3);
  border-top-right-radius: 6px; pointer-events: none; transition: border-color .3s;
}
.module-card:hover { transform: translateY(-5px); box-shadow: 0 20px 48px rgba(124,58,237,.35), 0 0 0 1px rgba(178,132,255,.2); }
.module-card:hover::before { background: linear-gradient(140deg, rgba(233,196,106,.5), rgba(178,132,255,.4) 50%, rgba(233,196,106,.3)); }
.module-card:hover::after { border-color: rgba(233,196,106,.6); }
/* 图标发光圆背景 */
.module-card .mc-icon {
  font-family: var(--brush); font-size: 50px; line-height: 1; color: var(--gold-bright);
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
  background: radial-gradient(circle, rgba(233,196,106,.18), rgba(233,196,106,.04));
  filter: drop-shadow(0 0 12px rgba(233,196,106,.3));
}
.module-card .mc-title { font-family: var(--serif); font-weight: 900; font-size: 22px; margin-top: 14px; color: var(--ink); }
.module-card .mc-desc { color: var(--ink-dim); font-size: 14px; margin-top: 6px; }
.module-card .mc-go { position: absolute; right: 22px; bottom: 20px; color: var(--purple); font-size: 14px; transition: transform .3s, color .3s; }
.module-card:hover .mc-go { transform: translateX(4px); color: var(--gold-bright); }

/* ---------- 八字 ---------- */
.bazi-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 8px 0 4px; }
@media (max-width: 560px) { .bazi-pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar {
  text-align: center; padding: 16px 8px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(178,132,255,.14), rgba(10,8,20,.5));
  border: 1px solid var(--panel-border);
}
.pillar .pl-label { font-size: 12px; color: var(--ink-faint); letter-spacing: 2px; }
.pillar .pl-branch { font-family: var(--brush); font-size: 34px; margin: 6px 0 2px; }
.pillar .pl-stem { font-family: var(--brush); font-size: 34px; }
.pillar .pl-element { font-size: 12px; color: var(--gold); margin-top: 4px; }
.wu-hang { margin-top: 14px; }
.wx-bar { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.wx-bar .wx-name { width: 34px; font-family: var(--brush); font-size: 20px; }
.wx-bar .wx-track { flex: 1; height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.wx-bar .wx-fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
.wx-bar .wx-val { width: 36px; text-align: right; font-size: 13px; color: var(--ink-dim); }
.wx-metal { color: #d7c9a3; } .wx-wood { color: #7cd98a; }
.wx-water { color: #6ad9ff; } .wx-fire { color: #ff7e7e; } .wx-earth { color: #e0b870; }
.wx-fill-metal { background: linear-gradient(90deg, #b8a878, #d7c9a3); }
.wx-fill-wood { background: linear-gradient(90deg, #4caf74, #7cd98a); }
.wx-fill-water { background: linear-gradient(90deg, #4a9fd9, #6ad9ff); }
.wx-fill-fire { background: linear-gradient(90deg, #d9504a, #ff7e7e); }
.wx-fill-earth { background: linear-gradient(90deg, #b08840, #e0b870); }

.readout { margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: rgba(10,8,20,.45); border-left: 3px solid var(--gold); }
.readout h4 { font-family: var(--serif); color: var(--gold-bright); margin-bottom: 8px; font-size: 16px; }
.readout p { color: var(--ink-dim); font-size: 14.5px; }

/* ---------- 塔罗 ---------- */
.tarot-stage { text-align: center; }
.deck {
  position: relative; width: 130px; height: 200px; margin: 10px auto 26px; cursor: pointer;
  transition: transform .2s;
}
.deck:hover { transform: translateY(-4px); }
.deck .card-back {
  width: 100%; height: 100%; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, rgba(178,132,255,.5), rgba(20,16,40,.9));
  border: 2px solid var(--gold); display: grid; place-items: center;
  box-shadow: 0 14px 36px rgba(124,58,237,.5), inset 0 0 30px rgba(0,0,0,.5);
}
.deck .card-back .sigil { font-family: var(--brush); font-size: 60px; color: var(--gold-bright); text-shadow: 0 0 18px rgba(233,196,106,.7); }
.deck .hint-text { position: absolute; bottom: -26px; left: 0; right: 0; font-size: 12px; color: var(--ink-faint); }

.spread { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 10px; }
.tarot-slot { width: 130px; text-align: center; }
.tarot-slot .slot-label { font-family: var(--brush); color: var(--purple); font-size: 18px; margin-bottom: 8px; }
.tarot-card {
  width: 130px; height: 200px; margin: 0 auto; position: relative;
  border-radius: 14px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2,.8,.2,1);
  cursor: default;
}
.tarot-card.flipped { transform: rotateY(180deg); }
.tarot-card .face {
  position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden;
  display: grid; place-items: center; padding: 10px; text-align: center;
}
.tarot-card .back {
  background: radial-gradient(circle at 50% 40%, rgba(178,132,255,.5), rgba(20,16,40,.95));
  border: 2px solid var(--gold);
}
.tarot-card .back .sigil { font-family: var(--brush); font-size: 54px; color: var(--gold-bright); }
.tarot-card .front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #1a1438, #0e0a22);
  border: 2px solid var(--purple); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  flex-direction: column; gap: 4px;
}
.tarot-card .front .num { font-size: 12px; color: var(--gold); letter-spacing: 2px; }
.tarot-card .front .nm { font-family: var(--brush); font-size: 26px; color: var(--gold-bright); }
.tarot-card .front .rev-flag { font-size: 11px; color: var(--rose); }
.tarot-card .front .kw { font-size: 12px; color: var(--cyan); margin-top: 4px; padding: 0 4px; }
.tarot-card.reversed .front .nm { transform: rotate(180deg); }
.tarot-card.reversed .front .num,
.tarot-card.reversed .front .kw,
.tarot-card.reversed .front .rev-flag { transform: rotate(180deg); }

.tarot-reading { margin-top: 30px; }
.tarot-reading .row { margin-bottom: 16px; text-align: left; }
.tarot-reading .row .pos { font-family: var(--brush); color: var(--purple); font-size: 18px; }
.tarot-reading .row .cname { color: var(--gold-bright); font-weight: 700; }
.tarot-reading .row .rev { color: var(--rose); font-size: 12px; margin-left: 4px; }
.tarot-reading .row .meaning { color: var(--ink-dim); font-size: 14px; margin-top: 3px; }

/* ---------- 星座 ---------- */
.zodiac-wheel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 10px 0 24px; }
@media (max-width: 600px) { .zodiac-wheel { grid-template-columns: repeat(3, 1fr); } }
.z-sign {
  cursor: pointer; text-align: center; padding: 12px 6px; border-radius: 12px;
  background: rgba(178,132,255,.08); border: 1px solid var(--panel-border); transition: all .2s;
}
.z-sign:hover { background: rgba(178,132,255,.2); border-color: var(--purple); }
.z-sign.active { background: rgba(233,196,106,.16); border-color: var(--gold); }
.z-sign .sym { font-size: 24px; }
.z-sign .nm { font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.z-sign.active .nm { color: var(--gold-bright); }

.zodiac-detail { margin-top: 6px; }
.z-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.z-head .big-sym { font-size: 54px; line-height: 1; }
.z-head h3 { font-family: var(--serif); font-size: 24px; color: var(--gold-bright); }
.z-head .meta { color: var(--ink-dim); font-size: 13px; }
.score-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 16px 0; }
@media (max-width: 600px) { .score-grid { grid-template-columns: repeat(2,1fr); } }
.score-box { text-align: center; padding: 14px 6px; border-radius: 12px; background: rgba(10,8,20,.4); border: 1px solid var(--panel-border); }
.score-box .sb-label { font-size: 12px; color: var(--ink-dim); }
.score-box .sb-stars { color: var(--gold-bright); font-size: 15px; margin: 6px 0 2px; letter-spacing: 1px; }
.score-box .sb-num { font-size: 13px; color: var(--purple); }
.z-verdict { margin-top: 14px; padding: 16px; border-radius: 12px; background: rgba(10,8,20,.45); border-left: 3px solid var(--purple); color: var(--ink-dim); }

/* ---------- 易经 ---------- */
.iching-coins { display: flex; justify-content: center; gap: 18px; margin: 14px 0; }
.coin {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--brush); font-size: 30px; color: #0a0814;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border: 3px solid #b08840; box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transition: transform .3s;
}
.coin.flipping { animation: coinFlip .6s ease; }
@keyframes coinFlip { 0% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(540deg) translateY(-26px); } 100% { transform: rotateY(1080deg) translateY(0); } }
.yao-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.yao-row .yao-pos { width: 26px; font-size: 13px; color: var(--ink-faint); text-align: right; }
.yao-bar { flex: 1; max-width: 240px; display: flex; gap: 6px; }
.yao-bar .seg { height: 16px; border-radius: 4px; flex: 1; }
.yao-bar .yang { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.yao-bar .yin { background: linear-gradient(90deg, var(--purple-deep), var(--purple)); }
.yao-row .yao-tag { font-size: 12px; color: var(--ink-dim); }
.yao-row .yao-changing { color: var(--rose); }
.hexagram-figure {
  display: grid; gap: 5px; padding: 14px; border-radius: 12px; width: 90px; margin: 0 auto;
  background: rgba(10,8,20,.5); border: 1px solid var(--panel-border);
}
.hexagram-figure .ln { height: 12px; border-radius: 3px; }
.hexagram-figure .yang-l { background: var(--gold-bright); }
.hexagram-figure .yin-l { display: flex; gap: 6px; }
.hexagram-figure .yin-l span { flex: 1; height: 12px; border-radius: 3px; background: var(--purple); }
.iching-result { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
@media (max-width: 620px) { .iching-result { grid-template-columns: 1fr; } }
.iching-block { text-align: center; }
.iching-block h4 { font-family: var(--serif); color: var(--gold-bright); font-size: 18px; margin-bottom: 4px; }
.iching-block .gua-name { font-family: var(--brush); font-size: 30px; color: var(--ink); margin: 8px 0; }
.iching-block .gua-judg { color: var(--ink-dim); font-size: 14px; text-align: left; }

/* ---------- 历史 ---------- */
.hist-list { display: flex; flex-direction: column; gap: 12px; }
.hist-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
  background: rgba(10,8,20,.4); border: 1px solid var(--panel-border); cursor: pointer; transition: all .2s;
}
.hist-item:hover { border-color: var(--purple); transform: translateX(4px); }
.hist-item .hi-ico { font-family: var(--brush); font-size: 26px; color: var(--gold-bright); width: 40px; text-align: center; }
.hist-item .hi-body { flex: 1; }
.hist-item .hi-title { font-weight: 600; color: var(--ink); }
.hist-item .hi-summary { font-size: 13px; color: var(--ink-dim); }
.hist-item .hi-date { font-size: 12px; color: var(--ink-faint); }
.hist-empty { text-align: center; color: var(--ink-faint); padding: 50px 10px; }

/* ---------- 用户档案 ---------- */
.profile-form .grid { margin-bottom: 16px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(28,22,56,.95); color: var(--ink); border: 1px solid var(--panel-border);
  padding: 12px 22px; border-radius: 12px; box-shadow: var(--shadow); z-index: 100;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; font-size: 14px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 页脚 ---------- */
.footer { text-align: center; padding: 30px 16px 40px; color: var(--ink-faint); font-size: 13px; border-top: 1px solid var(--panel-border); margin-top: 40px; }
.footer-sub { margin-top: 6px; font-size: 11.5px; }

/* 工具类 */
.muted { color: var(--ink-dim); }
.center { text-align: center; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.row-gap { margin-bottom: 16px; }
.flex { display: flex; } .between { justify-content: space-between; } .center-y { align-items: center; } .wrap { flex-wrap: wrap; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }

/* ---------- 导航滚动（更多项时） ---------- */
.nav { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.nav::-webkit-scrollbar { height: 3px; }
.nav::-webkit-scrollbar-thumb { background: var(--purple-deep); border-radius: 2px; }

/* ---------- Tab 栏 ---------- */
.tab-bar { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 8px 18px; border: 1px solid var(--panel-border); background: transparent; color: var(--ink-dim); border-radius: 10px; cursor: pointer; font-size: 14px; font-family: var(--sans); transition: all .25s; position: relative; overflow: hidden; }
.tab-btn:hover { color: var(--ink); border-color: var(--purple); background: rgba(178,132,255,.08); }
.tab-btn.active { background: linear-gradient(135deg, var(--purple-deep), var(--purple)); color: #fff; border-color: transparent; box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,.15); }

/* ---------- 每日签 ---------- */
.panel-title { font-family: var(--serif); font-size: 17px; letter-spacing: 2px; margin-bottom: 14px;
  background: linear-gradient(135deg, #ffd97a, #e9c46a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stick-area { display: flex; flex-direction: column; align-items: center; min-height: 120px; justify-content: center; }
.stick-holder { position: relative; width: 60px; height: 100px; }
.stick-tube { width: 50px; height: 80px; border: 2px solid var(--gold); border-radius: 8px 8px 4px 4px; position: absolute; bottom: 0; left: 5px; background: linear-gradient(180deg, transparent, rgba(233,196,106,.1)); }
.stick-stick { width: 8px; height: 90px; background: linear-gradient(180deg, var(--gold), #c9a04a); border-radius: 4px 4px 0 0; position: absolute; bottom: 20px; left: 26px; transform-origin: bottom center; }
.stick-stick.shaking { animation: stickShake .12s infinite alternate; }
.stick-stick.drawn { animation: stickDraw .4s ease-out; }
@keyframes stickShake { 0% { transform: rotate(-12deg); } 100% { transform: rotate(12deg); } }
@keyframes stickDraw { 0% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-40px); opacity: .5; } 100% { transform: translateY(0); opacity: 1; } }
.stick-result { margin-top: 16px; width: 100%; }
.stick-card { border: 2px solid var(--purple); border-radius: 14px; padding: 20px; text-align: center; background: rgba(178,132,255,.06); }
.stick-level { font-family: var(--brush); font-size: 28px; letter-spacing: 4px; margin-bottom: 10px; }
.stick-text { font-family: var(--serif); font-size: 16px; line-height: 1.8; color: var(--ink); }

/* ---------- 幸运色/数字 ---------- */
.lucky-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .lucky-grid { grid-template-columns: 1fr; } }
.lucky-card { background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 14px; padding: 16px; text-align: center; }
.lc-label { font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.lc-swatch { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 8px; border: 2px solid rgba(255,255,255,.2); box-shadow: 0 0 16px rgba(255,255,255,.15); }
.lc-value { font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.lc-sub { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }
.lc-num { font-size: 13px; color: var(--gold); }

/* ---------- 黄历宜忌 ---------- */
.almanac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .almanac-row { grid-template-columns: 1fr; } }
.almanac-col { border-radius: 12px; padding: 14px; }
.almanac-yi { background: rgba(76,175,80,.08); border: 1px solid rgba(76,175,80,.25); }
.almanac-ji { background: rgba(255,87,34,.08); border: 1px solid rgba(255,87,34,.25); }
.alm-label { font-family: var(--brush); font-size: 24px; margin-bottom: 8px; }
.almanac-yi .alm-label { color: #4CAF50; }
.almanac-ji .alm-label { color: #ff5722; }
.alm-items { display: flex; flex-wrap: wrap; gap: 6px; }
.alm-tag { padding: 4px 10px; border-radius: 8px; font-size: 13px; }
.yi-tag { background: rgba(76,175,80,.15); color: #66BB6A; }
.ji-tag { background: rgba(255,87,34,.15); color: #ff7043; }

/* ---------- 生肖详解 ---------- */
.animal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
@media (max-width: 600px) { .animal-grid { grid-template-columns: repeat(4, 1fr); } }
.animal-card { background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 6px; text-align: center; cursor: pointer; transition: all .25s; }
.animal-card:hover { border-color: var(--gold); background: rgba(233,196,106,.08); }
.animal-card.active { border-color: var(--gold); background: rgba(233,196,106,.12); box-shadow: 0 0 16px rgba(233,196,106,.2); }
.ac-emoji { font-size: 28px; }
.ac-name { font-size: 13px; color: var(--ink-dim); margin-top: 4px; }
.animal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ah-emoji { font-size: 44px; }
.animal-head h3 { font-family: var(--serif); font-size: 20px; color: var(--gold); }
.animal-trait { font-size: 14px; color: var(--purple); margin-bottom: 8px; font-weight: 500; }
.animal-desc { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
.animal-buddha { margin-top: 14px; padding: 10px 16px; background: rgba(233,196,106,.08); border-radius: 10px; border: 1px solid rgba(233,196,106,.2); display: inline-flex; gap: 10px; align-items: center; }
.buddha-label { font-size: 13px; color: var(--ink-faint); }
.buddha-name { font-family: var(--serif); font-size: 16px; color: var(--gold); }

/* ---------- 配对选择器 ---------- */
.match-selector { display: flex; align-items: center; gap: 16px; justify-content: center; }
.match-col { text-align: center; flex: 1; max-width: 160px; }
.match-col label { font-size: 13px; color: var(--ink-dim); display: block; margin-bottom: 8px; }
.match-emoji { font-size: 40px; margin-bottom: 8px; }
.match-col select { width: 100%; padding: 8px; border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--panel-border); color: var(--ink); font-size: 14px; text-align: center; }
.match-vs { font-family: var(--brush); font-size: 22px; color: var(--rose); padding: 0 4px; }
@media (max-width: 480px) { .match-selector { flex-direction: column; } .match-vs { transform: rotate(90deg); } }

/* ---------- 配对结果 ---------- */
.match-result-head { text-align: center; margin-bottom: 16px; }
.mr-emojis { font-size: 40px; margin-bottom: 6px; }
.mr-heart { color: var(--rose); }
.mr-names { font-family: var(--serif); font-size: 18px; color: var(--ink); }
.score-ring { width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--ring-color, var(--purple)); margin: 0 auto 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.2); }
.score-num { font-size: 32px; font-weight: 700; }
.score-label { font-size: 11px; color: var(--ink-dim); }
.match-level-tag { display: inline-block; padding: 4px 14px; border: 1px solid; border-radius: 20px; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.match-desc { font-size: 14px; line-height: 1.7; color: var(--ink-dim); text-align: justify; }

/* ---------- 姓名五格 ---------- */
.radio-row { display: flex; gap: 16px; }
.radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; color: var(--ink-dim); }
.radio-label input { accent-color: var(--purple); }
.name-result-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.nrh-name { font-family: var(--serif); font-size: 28px; color: var(--gold); letter-spacing: 6px; }
.approx-note { background: rgba(255,152,0,.1); border: 1px solid rgba(255,152,0,.3); color: #FFB74D; padding: 8px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.stroke-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; flex-wrap: wrap; }
.stroke-cell { text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 16px; min-width: 64px; }
.sc-char { font-family: var(--serif); font-size: 24px; color: var(--ink); }
.sc-num { font-size: 16px; color: var(--gold); margin-top: 4px; }
.sc-num .approx { color: #FF9800; font-size: 11px; }
.sc-label { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.wuge-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 600px) { .wuge-row { grid-template-columns: repeat(3, 1fr); } }
.wuge-cell { background: rgba(255,255,255,.04); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 6px; text-align: center; }
.wg-name { font-size: 12px; color: var(--ink-faint); }
.wg-val { font-size: 22px; font-weight: 700; color: var(--ink); margin: 4px 0; }
.wg-el { font-size: 13px; color: var(--cyan); }
.wg-fortune { font-size: 12px; margin-top: 4px; font-weight: 500; }
.wg-desc { font-size: 10px; color: var(--ink-faint); margin-top: 4px; line-height: 1.4; }
.wg-judg { font-size: 10px; color: var(--ink-dim); margin-top: 4px; line-height: 1.4; padding: 0 2px; }
.sancai-box { background: rgba(178,132,255,.06); border: 1px solid rgba(178,132,255,.2); border-radius: 14px; padding: 16px; text-align: center; }
.sancai-title { font-family: var(--serif); font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.sancai-fortune { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.sancai-desc { font-size: 13px; color: var(--ink-dim); line-height: 1.6; }
.sancai-flow { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; }
.sc-flow-el { font-size: 13px; color: var(--cyan); background: rgba(106,217,255,.1); padding: 2px 8px; border-radius: 6px; }
.sc-flow-arrow { color: var(--ink-faint); }

/* ---------- 模块网格（8卡片适配） ---------- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }

/* ---------- 分享按钮 ---------- */
.btn-share {
  display: inline-block; padding: 10px 22px; border-radius: 12px; border: 1px solid var(--cyan, #6ad9ff);
  background: rgba(106,217,255,.1); color: var(--cyan, #6ad9ff); font-size: 14px;
  cursor: pointer; transition: all .25s; font-family: var(--sans); margin-top: 12px;
}
.btn-share:hover { background: rgba(106,217,255,.2); border-color: var(--cyan, #6ad9ff); box-shadow: 0 0 14px rgba(106,217,255,.2); }
.btn-share:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- 流年运势 ---------- */
.flow-year-selector { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.flow-year-sel { padding: 8px 14px; border-radius: 10px; background: var(--panel-solid); border: 1px solid var(--panel-border); color: var(--ink); font-size: 15px; font-family: var(--sans); width: 100%; }
.flow-profile-hint { padding: 8px 14px; background: rgba(233,196,106,.08); border: 1px solid rgba(233,196,106,.2); border-radius: 10px; font-size: 13px; color: var(--gold); }
.flow-placeholder { text-align: center; padding: 60px 20px; }
.glyph-big { font-family: var(--brush); font-size: 72px; color: var(--panel-border); margin-bottom: 12px; }

/* 流年头部 */
.flow-header { margin-bottom: 16px; }
.flow-year-badge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fy-year { font-family: var(--serif); font-size: 40px; font-weight: 900; color: var(--gold); line-height: 1; }
.fy-gz { font-family: var(--brush); font-size: 24px; color: var(--ink); }
.fy-animal { font-size: 14px; color: var(--ink-dim); background: rgba(255,255,255,.06); padding: 4px 12px; border-radius: 8px; }

/* 犯太岁 */
.taisui-box { background: rgba(255,107,107,.06); border: 1px solid rgba(255,107,107,.25); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.taisui-box.taisui-safe { background: rgba(76,175,80,.06); border-color: rgba(76,175,80,.25); }
.taisui-emoji { font-size: 36px; }
.taisui-info { display: flex; flex-direction: column; gap: 2px; }
.taisui-type { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.taisui-level { font-size: 12px; color: var(--ink-faint); }
.taisui-desc { font-size: 14px; line-height: 1.7; color: var(--ink-dim); flex-basis: 100%; }
.taisui-tip { font-size: 12px; color: rgba(255,152,0,.8); flex-basis: 100%; margin-top: 4px; line-height: 1.6; }

/* 日主关系 */
.flow-master-rel { background: rgba(178,132,255,.06); border: 1px solid rgba(178,132,255,.2); border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmr-emoji { font-size: 28px; }
.fmr-tag { font-family: var(--serif); font-size: 18px; color: var(--purple); font-weight: 600; }
.fmr-desc { font-size: 14px; color: var(--ink-dim); flex-basis: 100%; line-height: 1.6; }
.fmr-info { font-size: 12px; color: var(--ink-faint); }

/* 12月标题 */
.flow-months-title { font-family: var(--serif); font-size: 18px; color: var(--gold); letter-spacing: 2px; margin: 20px 0 14px; }

/* 12月网格 */
.flow-months-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 600px) { .flow-months-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .flow-months-grid { grid-template-columns: 1fr; } }
.flow-month-cell { background: rgba(255,255,255,.03); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 10px; text-align: center; }
.flow-month-cell:hover { border-color: var(--score-color, var(--purple)); background: rgba(255,255,255,.06); }
.fm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fm-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.fm-emoji { font-size: 18px; }
.fm-score-bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; margin-bottom: 6px; overflow: hidden; }
.fm-score-fill { height: 100%; border-radius: 3px; transition: width .6s ease; }
.fm-score { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.fm-label { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.fm-desc { font-size: 11px; color: var(--ink-faint); line-height: 1.5; }

/* 年度综述 */
.flow-summary { background: linear-gradient(135deg, rgba(233,196,106,.06), rgba(178,132,255,.06)); border: 1px solid rgba(233,196,106,.2); border-radius: 16px; padding: 20px; margin-top: 18px; text-align: center; }
.fs-title { font-family: var(--serif); font-size: 18px; color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; }
.fs-score { font-size: 32px; font-weight: 900; color: var(--ink); margin-bottom: 8px; }
.fs-level { font-size: 18px; margin-left: 8px; font-weight: 600; }
.fs-line { font-size: 14px; color: var(--ink-dim); margin: 6px 0; line-height: 1.6; }
.fs-advice { margin-top: 12px; font-size: 12px; color: var(--ink-faint); line-height: 1.7; }

/* ---------- 分享预览图 ---------- */
.share-tip { display: inline-block; vertical-align: middle; }
#sharePreview { margin-top: 14px; }

/* ===========================================================
   视觉升级收尾
   =========================================================== */

/* 面板左下角装饰角线 */
.panel .corner-bl {
  position: absolute; bottom: 10px; left: 10px; width: 18px; height: 18px;
  border-bottom: 1.5px solid rgba(233,196,106,.25); border-left: 1.5px solid rgba(233,196,106,.25);
  border-bottom-left-radius: 8px; pointer-events: none;
}

/* 页脚渐变线 + 品牌字 */
.footer { 
  text-align: center; padding: 30px 16px 40px; color: var(--ink-faint); font-size: 13px;
  border-top: 1px solid transparent;
  background: linear-gradient(180deg, transparent, rgba(10,8,20,.5));
  position: relative; margin-top: 40px;
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(178,132,255,.3), rgba(233,196,106,.2), rgba(178,132,255,.3), transparent);
}
.footer p:first-child { font-family: var(--serif); letter-spacing: 3px; color: var(--ink-dim); }

/* 八字柱增强 */
.pillar {
  text-align: center; padding: 16px 8px; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(178,132,255,.16) 0%, rgba(10,8,20,.6) 100%);
  border: 1px solid rgba(178,132,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.pillar::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 2px; background: linear-gradient(90deg, transparent, rgba(233,196,106,.3), transparent);
}

/* readout 左边框发光 */
.readout { 
  margin-top: 18px; padding: 16px 18px; border-radius: 12px; background: rgba(10,8,20,.5);
  border-left: 3px solid var(--gold); box-shadow: inset 0 0 20px rgba(233,196,106,.04);
}
.readout h4 {
  font-family: var(--serif); margin-bottom: 8px; font-size: 16px;
  background: linear-gradient(135deg, #ffd97a, #e9c46a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 历史项增强 */
.hist-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(28,22,56,.5), rgba(18,14,36,.4)); border: 1px solid rgba(178,132,255,.15);
  cursor: pointer; transition: all .25s; position: relative; overflow: hidden;
}
.hist-item:hover { border-color: rgba(178,132,255,.4); transform: translateX(4px); box-shadow: 0 8px 24px rgba(124,58,237,.2); }
.hist-item .hi-ico { font-family: var(--brush); font-size: 26px; color: var(--gold-bright); width: 40px; text-align: center; filter: drop-shadow(0 0 8px rgba(233,196,106,.3)); }

/* user-chip 发光 */
.user-chip {
  margin-left: auto; display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(178,132,255,.12); border: 1px solid var(--panel-border);
  transition: background .25s, box-shadow .25s;
}
.user-chip:hover { background: rgba(178,132,255,.22); box-shadow: 0 0 16px rgba(178,132,255,.2); }

/* 塔罗牌正面增强 */
.tarot-card .front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #1a1438 0%, #0e0a22 60%, #120e24 100%);
  border: 2px solid var(--purple); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 20px rgba(178,132,255,.08);
  flex-direction: column; gap: 4px;
}

/* 星座评分盒增强 */
.score-box { text-align: center; padding: 14px 6px; border-radius: 12px; background: rgba(10,8,20,.4); border: 1px solid var(--panel-border); transition: border .25s, box-shadow .25s; }
.score-box:hover { border-color: rgba(233,196,106,.3); box-shadow: 0 0 14px rgba(233,196,106,.08); }

/* 流年月格增强 */
.flow-month-cell { background: linear-gradient(135deg, rgba(28,22,56,.35), rgba(18,14,36,.3)); border: 1px solid rgba(178,132,255,.12); border-radius: 12px; padding: 12px 10px; text-align: center; transition: all .25s; }
.flow-month-cell:hover { border-color: var(--score-color, rgba(233,196,106,.3)); background: linear-gradient(135deg, rgba(28,22,56,.5), rgba(18,14,36,.45)); box-shadow: 0 4px 16px rgba(0,0,0,.2); }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(10,8,20,.3); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(124,58,237,.4), rgba(178,132,255,.3)); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(124,58,237,.6), rgba(178,132,255,.5)); }

/* 选中文本颜色 */
::selection { background: rgba(233,196,106,.25); color: var(--gold-bright); }

/* ===========================================================
   动效升级 · 5 项高性价比改进
   =========================================================== */

/* ---- 1. 页面切换进阶动画 ---- */
.view {
  animation: viewReveal .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes viewReveal {
  from { opacity: 0; transform: translateY(24px) scale(.98); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ---- 2. 首页模块卡片交错入场 ---- */
.module-card {
  opacity: 0;
  transform: translateY(30px) scale(.92);
  transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.module-card.anim-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- 3. 八字四柱逐柱翻转 ---- */
.pillar {
  opacity: 0;
  transform: rotateY(90deg) translateZ(20px);
  transform-origin: center center;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.pillar.anim-in {
  opacity: 1;
  transform: rotateY(0) translateZ(0);
}
/* 五行条动画 */
.wx-fill { width: 0; transition: width 1s cubic-bezier(.2,.8,.2,1); }

/* ---- 4. 塔罗发牌动画 ---- */
.tarot-slot {
  opacity: 0;
}
.tarot-slot.anim-dealt {
  opacity: 1;
  transition: opacity .3s ease;
}
/* 牌堆发牌时的光效 */
.deck.dealing {
  animation: deckPulse .3s ease;
}
@keyframes deckPulse {
  0% { transform: scale(1); }
  50% { transform: scale(.92) rotate(-2deg); box-shadow: 0 0 40px rgba(233,196,106,.6); }
  100% { transform: scale(1) rotate(0); }
}
/* 翻牌时的发光 */
.tarot-card.flipped .front {
  animation: frontGlow .8s ease .3s both;
}
@keyframes frontGlow {
  0% { box-shadow: 0 0 0 rgba(178,132,255,0); }
  40% { box-shadow: 0 0 30px rgba(178,132,255,.4), 0 10px 30px rgba(0,0,0,.5); }
  100% { box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 0 20px rgba(178,132,255,.08); }
}

/* ---- 5. 星星逐颗点亮 ---- */
.sb-stars .star {
  display: inline-block;
  opacity: .25;
  transform: scale(.6);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.6,.4,1);
}
.sb-stars .star.lit {
  opacity: 1;
  transform: scale(1);
}

/* ---- 通用：面板入场增强 ---- */
.panel.anim-pending { opacity: .4; }
.panel.anim-in {
  animation: panelIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- 流年月格入场 ---- */
.flow-month-cell {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.flow-month-cell.anim-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 星座评分盒入场 ---- */
.score-box {
  opacity: 0;
  transform: scale(.8);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,1.4,.4,1), border .25s, box-shadow .25s;
}
.score-box.anim-in {
  opacity: 1;
  transform: scale(1);
}

/* ---- reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .module-card, .pillar, .tarot-slot, .score-box, .flow-month-cell {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ===========================================================
   转运殿 · 福缘值系统
   =========================================================== */

/* ---- 头部面板 ---- */
.tf-header-panel {
  text-align: center;
  background: linear-gradient(160deg, rgba(124,58,237,.12) 0%, rgba(233,196,106,.06) 100%);
}
.tf-hd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tf-hd-left { display: flex; align-items: center; gap: 14px; }
.tf-level-emoji { font-size: 52px; line-height: 1; filter: drop-shadow(0 0 12px rgba(233,196,106,.3)); }
.tf-level-name {
  font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: 3px;
  filter: drop-shadow(0 0 8px rgba(233,196,106,.2));
}
.tf-level-desc { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.tf-hd-right { text-align: right; }
.tf-fuyuan-num {
  font-family: var(--serif); font-weight: 900; font-size: 42px; line-height: 1;
  background: linear-gradient(135deg, #ffd97a, #e9c46a, #b8860b);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(233,196,106,.3));
}
.tf-fuyuan-label { font-size: 12px; color: var(--ink-faint); letter-spacing: 3px; margin-top: 4px; }

.tf-progress-wrap { margin-top: 18px; }
.tf-progress-bar {
  height: 8px; border-radius: 999px; background: rgba(255,255,255,.06);
  overflow: hidden; border: 1px solid var(--panel-border);
}
.tf-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple), var(--gold));
  transition: width .8s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 10px rgba(178,132,255,.4);
}
.tf-progress-text { font-size: 12px; color: var(--ink-faint); margin-top: 8px; }

.tf-bonus-box {
  margin-top: 16px; padding: 12px 18px; border-radius: 12px;
  background: rgba(233,196,106,.06); border: 1px solid rgba(233,196,106,.15);
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px;
}
.tf-bonus-icon { color: var(--gold-bright); font-size: 16px; }
.tf-bonus-label { color: var(--ink-dim); }
.tf-bonus-value { font-weight: 700; font-family: var(--serif); }
.tf-bonus-stars { color: var(--gold); font-size: 12px; }
.tf-bonus-pct { color: var(--cyan); font-size: 12px; }

/* ---- 活动卡片网格 ---- */
.tf-activities {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px;
}
.tf-card-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .tf-activities { grid-template-columns: 1fr; } }

.tf-card {
  position: relative; border-radius: var(--radius); padding: 22px;
  background: linear-gradient(160deg, rgba(28,22,56,.72), rgba(18,14,36,.65));
  backdrop-filter: blur(12px); border: 1px solid transparent; box-shadow: var(--shadow);
}
.tf-card::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); padding: 1px;
  background: linear-gradient(140deg, rgba(178,132,255,.35), rgba(233,196,106,.12) 50%, rgba(106,217,255,.18));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.tf-card::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px;
  border-top: 1.5px solid rgba(233,196,106,.3); border-right: 1.5px solid rgba(233,196,106,.3);
  border-top-right-radius: 6px; pointer-events: none;
}
.tfc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tfc-icon {
  font-family: var(--brush); font-size: 28px; color: var(--gold-bright); line-height: 1;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px;
  background: radial-gradient(circle, rgba(233,196,106,.18), rgba(233,196,106,.04));
  filter: drop-shadow(0 0 8px rgba(233,196,106,.25));
}
.tfc-title { font-family: var(--serif); font-weight: 900; font-size: 18px; color: var(--ink); letter-spacing: 2px; }
.tfc-desc { font-size: 13px; color: var(--ink-dim); margin-bottom: 16px; }
.tfc-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tf-act-btn { width: 100%; justify-content: center; }

/* ---- 转运轮盘 ---- */
.tf-wheel-wrap {
  position: relative; width: 260px; height: 260px; margin: 0 auto;
}
.tf-wheel {
  width: 260px; height: 260px; max-width: 100%;
  filter: drop-shadow(0 8px 24px rgba(124,58,237,.3));
}
.tf-wheel-pointer {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 18px solid var(--gold-bright);
  filter: drop-shadow(0 2px 6px rgba(233,196,106,.6));
}
.tf-wheel-result { min-height: 36px; display: flex; align-items: center; justify-content: center; }
.tf-win {
  display: flex; align-items: baseline; gap: 8px;
  animation: tfWinPop .5s cubic-bezier(.2,1.6,.4,1) both;
}
.tf-win-val {
  font-family: var(--serif); font-weight: 900; font-size: 32px; line-height: 1;
}
.tf-win-label { font-size: 13px; color: var(--ink-dim); }
@keyframes tfWinPop {
  0% { opacity: 0; transform: scale(.5); }
  60% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- 祈福抽签 ---- */
.tf-draw-area { display: flex; flex-direction: column; align-items: center; min-height: 80px; justify-content: center; }
.tf-draw-stick { position: relative; width: 50px; height: 90px; }
.tf-draw-tube {
  width: 42px; height: 70px; border: 2px solid var(--gold); border-radius: 8px 8px 4px 4px;
  position: absolute; bottom: 0; left: 4px;
  background: linear-gradient(180deg, transparent, rgba(233,196,106,.1));
}
.tf-draw-stick-bar {
  width: 6px; height: 78px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold), #c9a04a);
  position: absolute; bottom: 18px; left: 22px; transform-origin: bottom center;
  box-shadow: 0 0 8px rgba(233,196,106,.3);
}
.tf-draw-shaking .tf-draw-stick-bar { animation: tfStickShake .12s infinite alternate; }
@keyframes tfStickShake { 0% { transform: rotate(-10deg); } 100% { transform: rotate(10deg); } }
.tf-draw-result { margin-top: 14px; width: 100%; }
.tf-draw-card {
  border: 2px solid var(--purple); border-radius: 14px; padding: 16px; text-align: center;
  background: rgba(178,132,255,.06);
  animation: tfCardReveal .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes tfCardReveal {
  from { opacity: 0; transform: translateY(12px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tf-draw-tier { font-family: var(--brush); font-size: 26px; letter-spacing: 4px; margin-bottom: 8px; }
.tf-draw-text { font-family: var(--serif); font-size: 15px; line-height: 1.8; color: var(--ink); }
.tf-draw-reward { font-size: 14px; color: var(--gold); margin-top: 8px; font-weight: 600; }

/* ---- 点长明灯 ---- */
.tf-lantern-area {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 160px; margin: 0 auto; position: relative; min-height: 160px;
}
.tf-lantern-slot {
  width: 40px; height: 40px; border-radius: 50%; margin: 0 auto;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(178,132,255,.15);
  transition: all .3s;
}
.tf-lantern-slot.lit {
  background: radial-gradient(circle, rgba(255,180,80,.6), rgba(255,140,40,.3));
  border-color: rgba(255,180,80,.5);
  box-shadow: 0 0 12px rgba(255,160,60,.4), inset 0 0 8px rgba(255,200,100,.3);
  animation: tfLanternGlow 2s ease-in-out infinite alternate;
}
@keyframes tfLanternGlow {
  from { box-shadow: 0 0 8px rgba(255,160,60,.3), inset 0 0 6px rgba(255,200,100,.2); }
  to { box-shadow: 0 0 16px rgba(255,160,60,.5), inset 0 0 10px rgba(255,200,100,.4); }
}
.tf-lantern-count { font-size: 13px; color: var(--ink-dim); text-align: center; }

/* 浮动灯笼动画 */
.tf-lantern-float {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,100,.8), rgba(255,160,60,.4));
  box-shadow: 0 0 20px rgba(255,180,80,.6);
  pointer-events: none;
  animation: tfFloatUp 2.5s ease-out forwards;
}
@keyframes tfFloatUp {
  0% { bottom: 0; opacity: 1; transform: translateX(-50%) scale(1); }
  100% { bottom: 140px; opacity: 0; transform: translateX(-50%) scale(.4) translateY(-20px); }
}

/* ---- 观福报 ---- */
.tf-ad-info { display: flex; align-items: center; gap: 12px; }
.tf-ad-icon { font-size: 36px; }
.tf-ad-text { font-size: 14px; color: var(--ink); text-align: left; line-height: 1.5; }
.tf-ad-count { font-size: 13px; color: var(--ink-dim); }

/* 观福报弹窗 */
.tf-ad-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  animation: tfFadeIn .3s ease;
}
@keyframes tfFadeIn { from { opacity: 0; } to { opacity: 1; } }
.tf-ad-modal {
  background: linear-gradient(160deg, rgba(28,22,56,.95), rgba(18,14,36,.95));
  border: 1px solid var(--panel-border); border-radius: 20px; padding: 36px 40px;
  text-align: center; max-width: 340px; box-shadow: var(--shadow);
}
.tf-ad-modal-title { font-family: var(--serif); font-size: 20px; color: var(--gold-bright); margin-bottom: 20px; letter-spacing: 2px; }
.tf-ad-progress-wrap { margin-bottom: 16px; }
.tf-ad-progress-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.tf-ad-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--gold));
  transition: width 1s linear;
}
.tf-ad-countdown { font-family: var(--serif); font-size: 28px; color: var(--ink); margin-bottom: 12px; }
.tf-ad-tip { font-size: 13px; color: var(--ink-faint); font-family: var(--brush); letter-spacing: 2px; }

/* ---- 功德随喜 ---- */
.tf-donate-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%;
}
@media (max-width: 480px) { .tf-donate-grid { grid-template-columns: repeat(2, 1fr); } }
.tf-donate-tier {
  cursor: pointer; text-align: center; padding: 14px 8px; border-radius: 12px;
  background: rgba(178,132,255,.08); border: 1px solid var(--panel-border);
  transition: all .25s;
}
.tf-donate-tier:hover {
  border-color: var(--gold); background: rgba(233,196,106,.1);
  transform: translateY(-3px); box-shadow: 0 8px 20px rgba(233,196,106,.15);
}
.tf-dt-label { font-family: var(--serif); font-size: 13px; color: var(--gold); margin-bottom: 6px; }
.tf-dt-amount { font-size: 18px; font-weight: 700; color: var(--ink); }
.tf-dt-fuyuan { font-size: 12px; color: var(--cyan); margin-top: 4px; }
.tf-donate-note { font-size: 12px; text-align: center; margin-top: 12px; line-height: 1.6; }

/* 功德弹窗 */
.tf-donate-modal { display: none; }
.tf-donate-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  animation: tfFadeIn .3s ease;
}
.tf-donate-box {
  background: linear-gradient(160deg, rgba(28,22,56,.95), rgba(18,14,36,.95));
  border: 1px solid var(--panel-border); border-radius: 20px; padding: 40px;
  text-align: center; min-width: 280px; box-shadow: var(--shadow);
}
.tf-donate-processing { padding: 10px 0; }
.tf-donate-spinner {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 16px;
  border: 3px solid rgba(178,132,255,.2); border-top-color: var(--gold-bright);
  animation: tfSpin 1s linear infinite;
}
@keyframes tfSpin { to { transform: rotate(360deg); } }
.tf-donate-text { font-size: 15px; color: var(--ink-dim); }

.tf-donate-success { animation: tfCardReveal .4s ease both; }
.tf-donate-check {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 32px; color: #0a0814;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 0 24px rgba(233,196,106,.4);
}
.tf-donate-title { font-family: var(--serif); font-size: 24px; color: var(--gold-bright); margin-bottom: 8px; letter-spacing: 3px; }
.tf-donate-detail { font-size: 14px; color: var(--ink-dim); margin-bottom: 8px; }
.tf-donate-reward { font-size: 18px; color: var(--gold); font-weight: 700; margin-bottom: 20px; }

/* ---- 福缘记录 ---- */
.tf-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.tf-log-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-radius: 8px; background: rgba(10,8,20,.3);
  border: 1px solid rgba(178,132,255,.08); transition: border .2s;
}
.tf-log-item:hover { border-color: rgba(178,132,255,.2); }
.tf-log-source { font-size: 13px; color: var(--ink-dim); flex: 1; }
.tf-log-amount { font-weight: 700; font-size: 14px; }
.tf-log-time { font-size: 11px; color: var(--ink-faint); }

/* ---- 福缘加成徽章（跨模块通用） ---- */
.fy-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--fy-color, var(--gold));
  background: linear-gradient(135deg, rgba(233,196,106,.10), rgba(178,132,255,.06));
  font-size: 12.5px; margin: 8px 0;
  animation: fyBadgeIn .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fyBadgeIn {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to { opacity: 1; transform: none; }
}
.fy-badge-icon { color: var(--fy-color, var(--gold)); font-size: 14px; }
.fy-badge-label { font-weight: 700; letter-spacing: 1px; }
.fy-badge-stat { color: var(--ink-dim); font-size: 12px; }
.fy-boost-note {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(233,196,106,.12); border: 1px solid rgba(233,196,106,.25);
  font-size: 11.5px; color: var(--gold); margin-left: 8px;
  animation: fyBadgeIn .4s .2s both;
}

/* ========== 功德随喜支付流程 ========== */

/* 支付遮罩 */
.tf-pay-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: tfPayFadeIn .25s ease;
}
@keyframes tfPayFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 底部弹出支付面板 */
.tf-pay-sheet {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #1e1840 0%, #1a1438 100%);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(233,196,106,.2);
  border-bottom: none;
  padding: 20px 24px calc(20px + env(safe-area-inset-bottom));
  animation: tfPaySlideUp .35s cubic-bezier(.2,.8,.2,1);
  max-height: 90vh; overflow-y: auto;
}
@keyframes tfPaySlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 头部 */
.tf-pay-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.tf-pay-title { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: 1px; }
.tf-pay-close, .tf-pay-back {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--ink-dim); cursor: pointer; border-radius: 50%;
  transition: background .2s;
}
.tf-pay-close:hover, .tf-pay-back:hover { background: rgba(255,255,255,.08); }

/* 金额展示 */
.tf-pay-amount-box { text-align: center; margin-bottom: 20px; }
.tf-pay-amount-label { font-size: 13px; color: var(--ink-faint); margin-bottom: 6px; }
.tf-pay-amount { font-size: 38px; font-weight: 700; color: var(--gold-bright); letter-spacing: 1px; }

/* 订单详情 */
.tf-pay-detail { margin-bottom: 16px; }
.tf-pay-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; font-size: 14px; color: var(--ink-dim);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.tf-pay-row span:last-child { color: var(--ink); font-weight: 500; }
.tf-pay-divider { height: 1px; background: rgba(255,255,255,.08); margin: 16px 0; }

/* 支付方式 */
.tf-pay-method-label { font-size: 14px; color: var(--ink-dim); margin-bottom: 10px; }
.tf-pay-methods { display: flex; flex-direction: column; gap: 8px; }
.tf-pay-method {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1.5px solid transparent;
  cursor: pointer; transition: all .2s;
  font-size: 15px; color: var(--ink);
}
.tf-pay-method.selected { border-color: var(--gold); background: rgba(233,196,106,.06); }
.tf-pay-method:hover { background: rgba(255,255,255,.06); }
.tf-pm-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
}
.tf-pm-wechat { background: #07C160; }
.tf-pm-alipay { background: #1677FF; }
.tf-pm-check { margin-left: auto; font-size: 20px; color: var(--gold); }
.tf-pay-method:not(.selected) .tf-pm-check { color: var(--ink-faint); }

/* 模拟提示 */
.tf-pay-tip-simulate {
  margin: 14px 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,152,0,.08); border: 1px solid rgba(255,152,0,.2);
  font-size: 12px; color: #FF9800; text-align: center;
}

/* 确认按钮 */
.tf-pay-confirm-btn {
  width: 100%; margin-top: 8px; padding: 14px;
  font-size: 16px; font-weight: 600;
  background: linear-gradient(135deg, #07C160, #06AD56);
  border: none; color: #fff; border-radius: 12px;
  cursor: pointer; transition: opacity .2s;
}
.tf-pay-confirm-btn:active { opacity: .85; }

/* 密码输入 */
.tf-pay-pwd-amount { text-align: center; font-size: 32px; font-weight: 700; color: var(--gold-bright); margin-top: 10px; }
.tf-pay-pwd-hint { text-align: center; font-size: 13px; color: var(--ink-faint); margin: 8px 0 20px; }
.tf-pay-pwd-dots {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 30px;
}
.tf-pwd-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.2);
  transition: all .2s;
}
.tf-pwd-dot.filled {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(233,196,106,.4);
}

/* 数字键盘 */
.tf-pay-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.06);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 14px;
}
.tf-key {
  height: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 500; color: var(--ink);
  background: rgba(26,20,56,.9);
  cursor: pointer; transition: background .15s;
  user-select: none;
}
.tf-key:hover { background: rgba(255,255,255,.06); }
.tf-key:active { background: rgba(233,196,106,.1); }
.tf-key-empty { background: transparent; cursor: default; }
.tf-key-empty:hover { background: transparent; }
.tf-pay-pwd-forget { text-align: center; font-size: 12px; color: var(--ink-faint); }

/* 处理中 */
.tf-pay-processing-sheet {
  text-align: center; padding: 50px 24px;
}
.tf-pay-spinner-ring {
  width: 56px; height: 56px; margin: 0 auto 20px;
  border: 3px solid rgba(233,196,106,.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: tfPaySpin .8s linear infinite;
}
@keyframes tfPaySpin { to { transform: rotate(360deg); } }
.tf-pay-processing-text { font-size: 18px; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.tf-pay-processing-sub { font-size: 13px; color: var(--ink-faint); }

/* 成功页 */
.tf-pay-success-sheet { text-align: center; }
.tf-pay-success-icon { margin: 10px auto 12px; animation: tfPayCheck .5s .2s both; }
@keyframes tfPayCheck {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.tf-pay-success-title { font-size: 20px; font-weight: 600; color: #4CAF50; margin-bottom: 4px; }
.tf-pay-success-amount { font-size: 30px; font-weight: 700; color: var(--gold-bright); margin-bottom: 20px; }

/* 功德证书 */
.tf-certificate { margin-bottom: 20px; }
.tf-cert-border {
  position: relative;
  border: 2px solid rgba(233,196,106,.35);
  border-radius: 12px;
  padding: 24px 20px;
  background: linear-gradient(135deg, rgba(233,196,106,.04), rgba(178,132,255,.03));
  text-align: center;
}
.tf-cert-border::before, .tf-cert-border::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--gold);
}
.tf-cert-border::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.tf-cert-border::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.tf-cert-title { font-size: 22px; font-weight: 700; color: var(--gold-bright); letter-spacing: 4px; }
.tf-cert-subtitle { font-size: 10px; color: rgba(233,196,106,.4); letter-spacing: 2px; margin-top: 2px; }
.tf-cert-divider {
  width: 60%; margin: 14px auto;
  border-top: 1px solid rgba(233,196,106,.2);
  position: relative; text-align: center;
}
.tf-cert-glyph {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #1e1840; padding: 0 8px;
  color: var(--gold); font-size: 14px;
}
.tf-cert-name { font-size: 18px; font-weight: 600; color: #ffd97a; margin: 10px 0; }
.tf-cert-text {
  font-size: 13px; color: var(--ink-dim); line-height: 2;
  margin-bottom: 14px;
}
.tf-cert-meta {
  display: flex; justify-content: center; gap: 16px;
  font-size: 11px; color: var(--ink-faint);
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06);
}
.tf-cert-seal {
  position: absolute; bottom: 12px; right: 16px;
  font-size: 11px; color: rgba(233,196,106,.3);
  letter-spacing: 1px;
}

/* 成功页按钮 */
.tf-pay-success-actions { display: flex; gap: 10px; }
.tf-pay-success-actions .btn { flex: 1; }

/* 功德记录列表 */
.tf-orders-list { display: flex; flex-direction: column; gap: 8px; }
.tf-order-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.04);
}
.tf-order-left { display: flex; align-items: center; gap: 10px; }
.tf-order-method {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
}
.tf-order-label { font-size: 14px; color: var(--ink); }
.tf-order-time { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.tf-order-right { text-align: right; }
.tf-order-amount { font-size: 15px; font-weight: 600; color: var(--gold-bright); }
.tf-order-fuyuan { font-size: 11px; color: var(--gold); margin-top: 1px; }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .tf-pay-sheet, .tf-pay-overlay, .tf-pay-success-icon, .tf-pay-spinner-ring {
    animation-duration: .01ms !important;
  }
}