:root{
  --bg:#0f0c18;
  --bg2:#171226;
  --card:#1e1730;
  --card2:#251d3a;
  --ink:#eae4d5;
  --muted:#a194b8;
  --gold:#d4af37;
  --gold2:#c9a227;
  --gold-soft:rgba(212,175,55,.14);
  --line:#382c58;
  --red:#c0392b;
  --green:#27ae60;
  --blue:#5b8dd9;
  --radius:14px;
  --shadow:0 10px 34px rgba(0,0,0,.4);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;scroll-behavior:smooth}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 40% at 15% -5%, rgba(212,175,55,.10), transparent),
    radial-gradient(ellipse 50% 35% at 90% 0%, rgba(120,80,200,.10), transparent),
    radial-gradient(ellipse 55% 40% at 50% 110%, rgba(91,141,217,.08), transparent);
  background-attachment:fixed;
  color:var(--ink);
  font-family:"Songti SC","Noto Serif SC","STSong","SimSun",serif;
  min-height:100vh;
  line-height:1.75;
}

/* ============ 顶部导航 ============ */
.topnav{
  position:sticky;top:0;z-index:50;
  background:rgba(15,12,24,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  max-width:1080px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;gap:14px;height:52px;
}
.logo{font-size:18px;color:var(--gold);text-decoration:none;letter-spacing:2px;font-weight:700;white-space:nowrap}
.topnav-links{display:flex;gap:2px;flex:1;justify-content:flex-end;overflow-x:auto;scrollbar-width:none}
.topnav-links::-webkit-scrollbar{display:none}
.topnav-links a{
  color:var(--muted);text-decoration:none;font-size:13px;padding:6px 9px;border-radius:8px;
  white-space:nowrap;transition:all .2s;
}
.topnav-links a:hover{color:var(--gold);background:var(--gold-soft)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);font-size:18px;border-radius:8px;padding:4px 10px;cursor:pointer}
.lang-btn{
  background:var(--gold-soft);border:1px solid var(--gold);color:var(--gold);
  font-size:12px;font-weight:700;border-radius:8px;padding:5px 10px;cursor:pointer;
  font-family:inherit;white-space:nowrap;letter-spacing:1px;transition:all .2s;
}
.lang-btn:hover{background:var(--gold);color:#1a1206}
@media (max-width:860px){
  .topnav-links{display:none;position:absolute;top:52px;left:0;right:0;flex-direction:column;
    background:rgba(15,12,24,.97);border-bottom:1px solid var(--line);padding:8px 16px}
  .topnav-links.open{display:flex}
  .nav-toggle{display:block;margin-left:auto}
}

/* ============ 页面容器 ============ */
.page{display:none;max-width:1080px;margin:0 auto;padding:0 16px 56px;min-height:100vh}
.page.active{display:block}

/* ============ 首页 Hero ============ */
.hero{position:relative;padding:72px 0 56px;text-align:center;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 55%, rgba(212,175,55,.12), transparent 42%),
    repeating-linear-gradient(45deg, transparent 0 28px, rgba(212,175,55,.025) 28px 29px);
  mask-image:radial-gradient(circle at 50% 50%, black, transparent 72%);
}
.hero-inner{position:relative}
.hero-symbol{
  font-size:76px;line-height:1;
  animation:spin 28s linear infinite;
  display:inline-block;margin-bottom:10px;
  color:var(--gold);text-shadow:0 0 46px rgba(212,175,55,.5);
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.hero h1{font-size:46px;letter-spacing:16px;margin-left:16px;color:var(--gold);font-weight:700;text-shadow:0 0 30px rgba(212,175,55,.4)}
.hero-sub{color:var(--ink);letter-spacing:8px;margin-top:10px;font-size:15px}
.hero-desc{color:var(--muted);font-size:14px;margin-top:16px;line-height:2}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:26px}
.btn-gold{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#1a1206;border:none;border-radius:24px;padding:12px 30px;font-size:16px;
  font-weight:700;letter-spacing:2px;cursor:pointer;font-family:inherit;
  box-shadow:0 6px 22px rgba(212,175,55,.35);transition:transform .2s;
}
.btn-gold:hover{transform:translateY(-2px)}
.btn-outline{
  background:transparent;color:var(--gold);border:1px solid var(--gold);
  border-radius:24px;padding:12px 30px;font-size:16px;cursor:pointer;font-family:inherit;
  letter-spacing:2px;transition:all .2s;
}
.btn-outline:hover{background:var(--gold-soft)}

/* ============ 首页区块 ============ */
.features,.highlights,.steps,.history-sec,.disclaimer-home{max-width:760px;margin:0 auto;padding:34px 0}
.section-title{
  text-align:center;font-size:24px;letter-spacing:3px;color:var(--ink);margin-bottom:6px;
}
.section-title span{color:var(--gold)}
.section-sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:24px}

.grid-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:680px){.grid-nav{grid-template-columns:repeat(2,1fr)}}
.nav-item{
  background:linear-gradient(160deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 12px 18px;text-align:center;cursor:pointer;position:relative;overflow:hidden;
  transition:all .28s;
}
.nav-item::after{
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(212,175,55,.14),transparent 60%);
  opacity:0;transition:opacity .28s;
}
.nav-item:hover,.nav-item:active{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.nav-item:hover::after{opacity:1}
.nav-item .ico{font-size:38px;display:block;margin-bottom:8px}
.nav-item .name{font-size:16px;color:var(--ink);letter-spacing:2px;font-weight:600}
.nav-item .desc{font-size:11px;color:var(--muted);margin-top:4px}
.nav-item .enter{font-size:11px;color:var(--gold);margin-top:10px;opacity:0;transform:translateY(4px);transition:all .28s}
.nav-item:hover .enter{opacity:1;transform:none}

.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:680px){.hl-grid{grid-template-columns:1fr}}
.hl-item{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 18px;text-align:center;
}
.hl-ico{font-size:30px;color:var(--gold);margin-bottom:8px}
.hl-item h3{font-size:16px;letter-spacing:2px;color:var(--ink);margin-bottom:8px}
.hl-item p{font-size:13px;color:var(--muted);line-height:1.8}

.step-row{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 22px;text-align:center;min-width:140px;
}
.step-num{color:var(--gold);font-size:13px;letter-spacing:2px}
.step p{font-size:13px;color:var(--ink);margin-top:4px}
.step-arrow{color:var(--muted);font-size:18px}

.disclaimer-home{
  text-align:center;color:var(--muted);font-size:12px;
  border-top:1px solid var(--line);margin-top:20px;padding-top:28px;
}

/* 历史记录 */
.hist-list{display:flex;flex-direction:column;gap:8px}
.hist-item{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .2s;
}
.hist-item:hover{border-color:var(--gold)}
.hist-kind{
  color:var(--gold);font-size:12px;border:1px solid var(--gold);border-radius:6px;
  padding:2px 8px;white-space:nowrap;
}
.hist-summary{flex:1;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-time{font-size:11px;color:var(--muted);white-space:nowrap}

/* ============ 页头 ============ */
.page-head{
  display:flex;align-items:center;gap:10px;
  padding:22px 0 14px;position:sticky;top:52px;z-index:10;
  background:linear-gradient(var(--bg) 82%,transparent);
}
.back-btn{
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer;font-family:inherit;
  transition:border-color .2s;
}
.back-btn:hover{border-color:var(--gold);color:var(--gold)}
.page-head h2{font-size:22px;color:var(--gold);letter-spacing:4px;flex:1;text-align:center;margin-right:52px}
.head-icon{font-size:24px}

/* ============ 表单 ============ */
.form-body{padding:8px 0 20px;max-width:560px;margin:0 auto}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;letter-spacing:1px}
.field input,.field select{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;
  color:var(--ink);padding:12px 14px;font-size:16px;font-family:inherit;outline:none;
  transition:border-color .2s;
}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.field-row{display:flex;gap:10px}
.field-row .field{flex:1}
.btn-primary{
  width:100%;background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#1a1206;border:none;border-radius:12px;padding:14px;font-size:17px;
  font-weight:700;letter-spacing:6px;cursor:pointer;font-family:inherit;margin-top:6px;
  transition:all .2s;
}
.btn-primary:hover{box-shadow:0 8px 26px rgba(212,175,55,.4);transform:translateY(-1px)}
.btn-primary:active{opacity:.85}
.btn-primary:disabled{opacity:.5;transform:none}
.btn-ghost{
  background:var(--card);color:var(--gold);border:1px solid var(--line);
  border-radius:12px;padding:12px;font-size:14px;cursor:pointer;font-family:inherit;
  width:100%;margin-top:10px;transition:border-color .2s;
}
.btn-ghost:hover{border-color:var(--gold)}

/* ============ 结果 ============ */
.result-body{padding:10px 0;max-width:760px;margin:0 auto}
.divine-body{max-width:760px;margin:0 auto;padding:8px 0 20px}
.card{
  background:linear-gradient(160deg,var(--card),var(--bg2));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.card h3{color:var(--gold);font-size:16px;letter-spacing:2px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3::before{content:"";width:4px;height:16px;background:var(--gold);border-radius:2px;flex-shrink:0}
.card p{font-size:14px;line-height:1.9}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center}
.big-num{font-size:34px;color:var(--gold);font-weight:700}
.tag{
  display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;
  border:1px solid var(--line);margin:2px 4px 2px 0;color:var(--ink);
}
.tag.gold{color:var(--gold);border-color:var(--gold)}
.tag.red{color:#e57373;border-color:#e57373}
.tag.green{color:#7cc992;border-color:#7cc992}
.tag.blue{color:#8ab4f8;border-color:#8ab4f8}
.wx{font-weight:700;padding:0 3px}
.wx-木{color:#7cc992}.wx-火{color:#e57373}.wx-土{color:#d4a06a}.wx-金{color:#e8c96a}.wx-水{color:#8ab4f8}

/* 四柱 */
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pillar{
  background:var(--card2);border:1px solid var(--line);border-radius:12px;
  padding:14px 6px;text-align:center;
}
.pillar .pname{font-size:12px;color:var(--muted)}
.pillar .gz{font-size:27px;font-weight:700;letter-spacing:2px;margin:5px 0}
.pillar .ss{font-size:12px;color:var(--gold)}
.pillar .nayin{font-size:11px;color:var(--muted)}
.pillar .hide{font-size:11px;color:var(--muted);margin-top:2px}

/* 五行条 */
.wx-bars{margin-top:12px}
.wx-bar{display:flex;align-items:center;gap:8px;margin:7px 0}
.wx-bar .label{width:18px;font-size:14px}
.wx-bar .track{flex:1;background:var(--bg2);height:11px;border-radius:6px;overflow:hidden}
.wx-bar .fill{height:100%;border-radius:6px;transition:width .8s cubic-bezier(.22,1,.36,1)}
.wx-bar .val{width:26px;font-size:12px;color:var(--muted);text-align:right}

/* 大运 */
.dayun-list{display:flex;flex-wrap:wrap;gap:8px}
.dayun-item{
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;font-size:12px;text-align:center;min-width:66px;
}
.dayun-item .gz{font-size:16px;font-weight:700;color:var(--gold)}
.dayun-item .age{color:var(--muted)}

/* 解读 */
.interpret{border-color:rgba(212,175,55,.4)}
.interp-item{padding:10px 0;border-bottom:1px dashed var(--line)}
.interp-item:last-child{border-bottom:none}
.interp-title{color:var(--gold);font-size:14px;letter-spacing:1px;margin-bottom:4px}
.interp-text{font-size:14px;color:var(--ink)}

/* 星盘表 */
.astro-table{width:100%;border-collapse:collapse;font-size:13px}
.astro-table th,.astro-table td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
.astro-table th{color:var(--muted);font-weight:400;font-size:12px}
.aspect-item{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.aspect-item:last-child{border-bottom:none}
.aspect-item .harm{color:#7cc992}
.aspect-item .chall{color:#e57373}

/* 紫微 */
.ziwei-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ziwei-palace{
  background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:9px 4px;text-align:center;font-size:12px;min-height:78px;position:relative;
}
.ziwei-palace.original{border-color:var(--gold)}
.ziwei-palace.body::after{content:"身";position:absolute;top:2px;right:4px;color:var(--gold);font-size:10px}
.ziwei-palace .pn{color:var(--muted);font-size:11px}
.ziwei-palace .gz{font-size:14px;font-weight:700;color:var(--gold);letter-spacing:1px}
.ziwei-palace .stars{font-size:11px;color:var(--ink);margin-top:2px}
.ziwei-palace .stars .mutagen{color:var(--red)}
.ziwei-palace .dashi{font-size:11px;color:var(--blue);margin-top:1px}

/* 塔罗 */
.tarot-area{perspective:1000px}
.tarot-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:22px 0}
.tarot-slot{width:120px;text-align:center}
.tarot-card{
  width:120px;height:200px;border-radius:12px;position:relative;cursor:pointer;
  transform-style:preserve-3d;transition:transform .7s;
  box-shadow:0 6px 22px rgba(0,0,0,.55);
}
.tarot-card:hover{box-shadow:0 8px 30px rgba(212,175,55,.3)}
.tarot-card.flipped{transform:rotateY(180deg)}
.tarot-card .face{
  position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
}
.tarot-card .back{
  background:
    radial-gradient(circle at 50% 50%, rgba(212,175,55,.16), transparent 62%),
    linear-gradient(135deg,#3b2f6e,#241a45);
  border:2px solid var(--gold);flex-direction:column;gap:6px;
}
.tarot-card .back .star{font-size:30px;color:var(--gold)}
.tarot-card .back .pat{font-size:10px;color:var(--muted);letter-spacing:2px}
.tarot-card .front{
  background:linear-gradient(160deg,#2a2240,#171226);border:2px solid var(--gold);
  transform:rotateY(180deg);flex-direction:column;padding:8px;text-align:center;
}
.tarot-card .front .tnum{font-size:13px;color:var(--gold)}
.tarot-card .front .tname{font-size:17px;color:var(--ink);font-weight:700;margin-top:4px;letter-spacing:1px}
.tarot-card .front .ttype{font-size:11px;color:var(--muted);margin-top:2px}
.tarot-card.reversed .front{transform:rotateY(180deg) rotate(180deg)}
.tarot-pos{font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:1px}

/* 签文 */
.lot-poem{
  background:var(--card2);border:1px dashed var(--gold);border-radius:12px;
  padding:22px 14px;text-align:center;margin:14px 0;
}
.lot-poem .line{font-size:17px;letter-spacing:2px;margin:9px 0;color:var(--ink)}
.lot-level{font-size:15px;color:var(--gold);letter-spacing:3px;text-align:center}
.lot-num{font-size:12px;color:var(--muted);text-align:center;margin-top:2px}
.lot-shake{font-size:58px;display:inline-block;animation:shake 1.2s ease-in-out infinite}
@keyframes shake{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-14deg)}
  40%{transform:rotate(11deg)}
  60%{transform:rotate(-8deg)}
  80%{transform:rotate(5deg)}
}

/* 金钱卦 */
.yao-list{margin:16px 0}
.yao-row{
  display:flex;align-items:center;gap:12px;margin:8px 0;padding:10px 14px;
  background:var(--card2);border-radius:10px;border:1px solid var(--line);
  animation:slideUp .4s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.yao-row .name{font-size:14px;width:34px}
.yao-line{flex:1;height:8px;border-radius:4px;background:var(--muted)}
.yao-line.yang{background:linear-gradient(90deg,var(--gold),var(--gold2));height:9px}
.yao-line.yin{background:transparent;height:14px;position:relative;display:flex;gap:8px}
.yao-line.yin::before,.yao-line.yin::after{content:"";flex:1;background:var(--muted);height:9px;border-radius:4px}
.yao-row .label{font-size:12px;color:var(--gold);width:44px}
.yao-row.moving{border-color:var(--gold);background:rgba(212,175,55,.06)}
.coin-flip{font-size:40px;display:inline-block;animation:coinFlip .9s ease-in-out infinite}
@keyframes coinFlip{0%{transform:rotateY(0)}50%{transform:rotateY(720deg)}100%{transform:rotateY(0)}}
.hex-symbol{font-size:56px;text-align:center;color:var(--gold);line-height:1.2}
.hex-name{text-align:center;font-size:18px;letter-spacing:4px;margin-bottom:4px}
.hex-guaci{font-size:14px;color:var(--ink);text-align:center;margin-bottom:10px}
.hex-xiang{font-size:13px;color:var(--muted);text-align:center;margin-bottom:14px}
.yao-text{font-size:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.yao-text:last-child{border-bottom:none}
.yao-text .yn{color:var(--gold);margin-right:8px}
.yao-text.moving .yn{color:var(--red)}

/* 八宅 */
.bazhai-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bazhai-cell{border:1px solid var(--line);border-radius:10px;padding:12px 10px;text-align:center;background:var(--card2)}
.bazhai-cell .dir{font-size:13px;color:var(--muted)}
.bazhai-cell .gua{font-size:22px}
.bazhai-cell .star{font-size:14px;font-weight:700;margin-top:2px}
.bazhai-cell.good{border-color:rgba(126,201,146,.5)}
.bazhai-cell.bad{border-color:rgba(229,115,115,.5)}
.bazhai-cell .lvl{font-size:11px;margin-top:2px}

/* 合婚 */
.score-ring{
  width:126px;height:126px;border-radius:50%;margin:0 auto;display:flex;
  align-items:center;justify-content:center;flex-direction:column;
  border:4px solid var(--gold);box-shadow:0 0 34px rgba(212,175,55,.35);
  background:radial-gradient(circle,var(--gold-soft),transparent 70%);
}
.score-ring .s{font-size:38px;font-weight:700;color:var(--gold)}
.score-ring .l{font-size:11px;color:var(--muted)}
.rel-item{padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.rel-item:last-child{border-bottom:none}
.rel-item .t{color:var(--gold);margin-right:8px}

/* 名字 */
.name-card{display:flex;align-items:center;gap:12px;padding:16px !important}
.name-card .nm{font-size:25px;font-weight:700;letter-spacing:6px;color:var(--gold);width:92px;flex-shrink:0}
.name-card .info{flex:1;font-size:12px;color:var(--muted)}
.name-card .wuge-mini{font-size:11px}
.name-card .score{
  font-size:13px;color:var(--gold);flex-shrink:0;
  background:var(--gold-soft);border:1px solid var(--line);border-radius:20px;padding:4px 12px;
}
.name-detail{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:10px 16px;margin:-6px 0 10px;font-size:13px;
}
.name-detail.hidden{display:none}

/* 关于页 */
.about-body{max-width:640px;margin:0 auto;padding:8px 0}
.about-body .card p{margin-bottom:10px}
.about-body .card p:last-child{margin-bottom:0}

/* loading */
.loading-mask{
  position:fixed;inset:0;background:rgba(8,6,14,.88);z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
}
.loading-mask.hidden{display:none}
.loading-spin{font-size:48px;color:var(--gold);animation:spin 2.2s linear infinite}
.loading-mask p{color:var(--muted);letter-spacing:4px;font-size:14px}

/* ============ 页脚 ============ */
.site-footer{
  border-top:1px solid var(--line);background:var(--bg2);
  padding:28px 16px 34px;margin-top:20px;
}
.footer-inner{max-width:1080px;margin:0 auto;text-align:center}
.footer-links{display:flex;gap:22px;justify-content:center;margin-bottom:12px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:13px;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
.site-footer p{color:var(--muted);font-size:12px}

@media (min-width:680px){
  .tarot-slot{width:140px}
  .tarot-card{width:140px;height:230px}
}