/* ===== 灵台星占学堂 · 视觉方向：青黛夜空 × 鎏金星象 =====
   世界：中华传统占星学 / 灵台观象之夜
   材质：宣纸、青铜浑仪、鎏金星图、云气纹
   配色：夜空青黛 #0b1326 / 墨蓝 #101d38，鎏金 #c9a15a，纸白 #efe6d0，朱砂点缀 #a8462f
   签名：鎏金细线勾勒星官连线 + 星光粒子背景 */

:root{
  --night-1:#070d1c;
  --night-2:#0b1326;
  --night-3:#101d38;
  --night-4:#16264a;
  --gold:#c9a15a;
  --gold-bright:#e6c88a;
  --gold-dim:#8a6f3f;
  --paper:#efe6d0;
  --paper-dim:#d8cdb2;
  --ink:#2a2438;
  --cinnabar:#a8462f;
  --jade:#5f8f8a;
  --line:#2c3a5c;
  --muted:#9aa7c2;
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:radial-gradient(1200px 800px at 70% -10%,var(--night-3),var(--night-2) 45%,var(--night-1));
  color:var(--paper);
  line-height:1.75;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:var(--night-1)}

/* ---- 星光背景 ---- */
.starbg{position:fixed;inset:0;z-index:0;pointer-events:none}
.starbg .star{position:absolute;border-radius:50%;background:#fff;opacity:.5;animation:twinkle var(--d,4s) ease-in-out infinite}

/* ---- 顶部导航 ---- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:1rem;
  padding:.8rem 2rem;
  background:linear-gradient(180deg,rgba(7,13,28,.92),rgba(7,13,28,.7));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--gold-bright);white-space:nowrap}
.brand .seal{width:2rem;height:2rem;border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:.7rem;border-radius:.3rem;background:rgba(201,161,90,.08)}
.nav{display:flex;gap:.2rem;flex-wrap:wrap;margin-left:auto}
.nav a{
  color:var(--muted);text-decoration:none;padding:.4rem .7rem;font-size:.9rem;
  border-radius:.4rem;transition:.2s;font-family:var(--serif);white-space:nowrap;
}
.nav a:hover{color:var(--gold-bright);background:rgba(201,161,90,.08)}
.nav a.active{color:var(--gold-bright);background:rgba(201,161,90,.14);box-shadow:inset 0 -2px 0 var(--gold)}

/* ---- 主容器 ---- */
.app{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:5.4rem 1.5rem 4rem}

/* ---- 首页 hero ---- */
.hero{position:relative;border-radius:1.2rem;overflow:hidden;margin-bottom:2.6rem;box-shadow:0 20px 60px rgba(0,0,0,.5);border:1px solid var(--line)}
.hero img{width:100%;height:420px;object-fit:cover;display:block}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,28,.25),rgba(7,13,28,.78))}
.hero .htext{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}
.hero .kicker{font-family:var(--serif);color:var(--gold);letter-spacing:.5em;font-size:.85rem;margin-bottom:.6rem}
.hero h1{font-family:var(--serif);font-weight:900;font-size:3rem;color:#fff;letter-spacing:.18em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero .sub{font-family:var(--serif);color:var(--gold-bright);letter-spacing:.35em;font-size:1rem;margin-top:.8rem}

/* ---- 首页功能区 ---- */
.block-title{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--gold-bright);margin:2.4rem 0 1.2rem}
.block-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-dim),transparent)}
.block-title .idx{color:var(--gold);font-size:.85rem;letter-spacing:.1em}
.intro-card{background:linear-gradient(160deg,rgba(22,38,74,.55),rgba(11,19,38,.6));border:1px solid var(--line);border-radius:1rem;padding:1.6rem 1.8rem;margin-bottom:2rem}
.intro-card p{color:var(--paper-dim);font-size:.98rem}

.section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.section-card{
  position:relative;border:1px solid var(--line);border-radius:1rem;overflow:hidden;
  background:linear-gradient(165deg,rgba(22,38,74,.5),rgba(11,19,38,.65));
  text-decoration:none;color:var(--paper);display:block;padding:1.4rem;transition:.25s;
}
.section-card:hover{transform:translateY(-4px);border-color:var(--gold-dim);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.section-card .sc-idx{font-family:var(--serif);color:var(--gold);font-size:.78rem;letter-spacing:.15em}
.section-card h3{font-family:var(--serif);font-size:1.2rem;margin:.5rem 0 .4rem;color:var(--gold-bright)}
.section-card p{font-size:.86rem;color:var(--muted)}
.section-card .go{position:absolute;top:1.2rem;right:1.2rem;color:var(--gold);font-size:1.2rem;opacity:0;transition:.2s}
.section-card:hover .go{opacity:1}

.starfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:2.2rem}
.fact{background:rgba(201,161,90,.06);border:1px solid var(--line);border-radius:.9rem;padding:1.1rem;text-align:center}
.fact .l{font-family:var(--serif);font-size:.78rem;color:var(--gold);letter-spacing:.2em;margin-bottom:.3rem}
.fact .v{font-family:var(--serif);font-size:.95rem;color:var(--paper);font-weight:600}

/* ---- 详情视图 ---- */
.backbtn{display:inline-flex;align-items:center;gap:.4rem;color:var(--gold-bright);text-decoration:none;font-family:var(--serif);margin-bottom:1.2rem;cursor:pointer;border:none;background:none;font-size:.95rem}
.backbtn:hover{color:var(--gold)}
.view-title{font-family:var(--serif);font-weight:900;font-size:1.9rem;color:#fff;margin-bottom:.4rem}
.view-sub{color:var(--muted);font-size:.95rem;margin-bottom:1.6rem}

/* 页头横幅（章节题图） */
.sec-banner{position:relative;border-radius:1rem;overflow:hidden;margin-bottom:1.8rem;border:1px solid var(--line)}
.sec-banner img{width:100%;height:220px;object-fit:cover;display:block}
.sec-banner .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,28,.2),rgba(7,13,28,.8))}
.sec-banner .bt{position:absolute;left:1.6rem;bottom:1.2rem}
.sec-banner .bt h2{font-family:var(--serif);font-weight:900;font-size:1.7rem;color:#fff}
.sec-banner .bt p{color:var(--gold-bright);font-family:var(--serif);font-size:.9rem;letter-spacing:.1em}

/* 卡片列表 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card{border:1px solid var(--line);border-radius:1rem;background:linear-gradient(160deg,rgba(22,38,74,.45),rgba(11,19,38,.6));padding:1.2rem 1.3rem;cursor:pointer;transition:.2s}
.card:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.card h4{font-family:var(--serif);font-size:1.1rem;color:var(--gold-bright);margin-bottom:.3rem}
.card .en{font-size:.75rem;color:var(--gold-dim);letter-spacing:.05em}
.card p{font-size:.84rem;color:var(--muted);margin-top:.5rem}
.card .chip{display:inline-block;font-size:.72rem;color:var(--gold);border:1px solid var(--gold-dim);border-radius:99px;padding:.05rem .6rem;margin-top:.5rem}

/* 术语列表 */
.term-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem}
.term{background:rgba(22,38,74,.4);border:1px solid var(--line);border-radius:.9rem;padding:1rem 1.1rem}
.term .t{font-family:var(--serif);font-weight:700;color:var(--gold-bright);font-size:1.05rem;margin-bottom:.3rem}
.term .m{font-size:.83rem;color:var(--paper-dim)}

/* 条目列表（天占地占、日占月占） */
.entry-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.entry{background:rgba(22,38,74,.4);border:1px solid var(--line);border-radius:1rem;padding:1.1rem 1.2rem}
.entry .s{font-family:var(--serif);font-weight:700;color:var(--gold-bright);margin-bottom:.35rem}
.entry .m{font-size:.87rem;color:var(--paper-dim)}

/* 五行星表 */
.wx-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:1.8rem}
.wx-tile{border:1px solid var(--line);border-radius:1rem;padding:1.3rem;text-align:center;background:linear-gradient(170deg,rgba(22,38,74,.5),rgba(11,19,38,.65));cursor:pointer;transition:.2s}
.wx-tile:hover{border-color:var(--gold-dim);transform:translateY(-3px)}
.wx-tile .dot{width:2.6rem;height:2.6rem;border-radius:50%;margin:0 auto .6rem;box-shadow:0 0 24px currentColor}
.wx-tile h4{font-family:var(--serif);font-size:1.25rem;color:var(--gold-bright)}
.wx-tile .pl{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.wx-detail{background:linear-gradient(160deg,rgba(22,38,74,.5),rgba(11,19,38,.65));border:1px solid var(--gold-dim);border-radius:1rem;padding:1.6rem}
.wx-detail h3{font-family:var(--serif);font-size:1.5rem;color:var(--gold-bright);margin-bottom:1rem}
.wx-detail .meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.wx-detail .meta .m{font-size:.8rem;background:rgba(201,161,90,.1);border:1px solid var(--gold-dim);border-radius:99px;padding:.2rem .8rem;color:var(--gold)}
.wx-detail .desc{color:var(--paper-dim);margin-bottom:1.2rem;font-size:.95rem}
.wx-detail .wcolor{border-top:1px dashed var(--line);padding-top:1rem;font-size:.9rem;color:var(--paper-dim);line-height:2}

/* ---- 3D 星空视图 ---- */
.skywrap{position:relative;height:640px;border-radius:1rem;overflow:hidden;border:1px solid var(--line);background:radial-gradient(900px 500px at 50% 30%,#0a1430,#050913)}
#skyCanvas{width:100%;height:100%;display:block}
.sky-hud{position:absolute;left:1.2rem;bottom:1.2rem;background:rgba(7,13,28,.75);border:1px solid var(--gold-dim);border-radius:.8rem;padding:.7rem 1rem;max-width:280px}
.sky-hud .sh-t{font-family:var(--serif);color:var(--gold-bright);font-size:.95rem;font-weight:700}
.sky-hud .sh-d{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.sky-legend{position:absolute;right:1.2rem;bottom:1.2rem;background:rgba(7,13,28,.7);border:1px solid var(--line);border-radius:.8rem;padding:.6rem .9rem;font-size:.75rem;color:var(--muted);line-height:1.9}
.sky-legend .lg{display:inline-flex;align-items:center;gap:.4rem;margin-right:.8rem}
.sky-legend .pt{width:.55rem;height:.55rem;border-radius:50%}

/* ---- 测验 ---- */
.quiz-wrap{max-width:760px;margin:0 auto}
.qcard{background:linear-gradient(160deg,rgba(22,38,74,.5),rgba(11,19,38,.65));border:1px solid var(--gold-dim);border-radius:1.2rem;padding:2rem}
.qcard .qmeta{display:flex;justify-content:space-between;color:var(--gold);font-family:var(--serif);font-size:.9rem;margin-bottom:1rem}
.qcard h3{font-family:var(--serif);font-size:1.35rem;color:#fff;margin-bottom:1.4rem;line-height:1.6}
.opts{display:grid;gap:.8rem}
.opt{background:rgba(11,19,38,.7);border:1px solid var(--line);border-radius:.8rem;padding:.9rem 1.1rem;cursor:pointer;transition:.2s;color:var(--paper);font-size:.95rem;text-align:left;font-family:var(--sans)}
.opt:hover{border-color:var(--gold)}
.opt.correct{border-color:#5f9f7a;background:rgba(95,159,122,.16);color:#b6e6c8}
.opt.wrong{border-color:var(--cinnabar);background:rgba(168,70,47,.16);color:#f0b6a6}
.opt:disabled{cursor:default;opacity:.85}
.qfoot{display:flex;justify-content:space-between;align-items:center;margin-top:1.4rem}
.qbtn{background:var(--gold);color:var(--night-1);border:none;border-radius:.6rem;padding:.7rem 1.4rem;font-family:var(--serif);font-weight:700;cursor:pointer;transition:.2s;font-size:.95rem}
.qbtn:hover{background:var(--gold-bright)}
.qbtn:disabled{opacity:.4;cursor:not-allowed}
.result-box{text-align:center;padding:2rem}
.result-box .score{font-family:var(--serif);font-weight:900;font-size:2.6rem;color:var(--gold-bright)}
.result-box .sub{color:var(--muted);margin-top:.5rem}
.result-box .verdict{font-family:var(--serif);color:#fff;font-size:1.2rem;margin-top:1rem}

/* ---- 搜索框 ---- */
.searchbar{display:flex;gap:.6rem;margin-bottom:1.4rem}
.searchbar input{flex:1;background:rgba(11,19,38,.7);border:1px solid var(--line);border-radius:.6rem;padding:.7rem 1rem;color:var(--paper);font-family:var(--sans);outline:none}
.searchbar input:focus{border-color:var(--gold)}
.searchbar .qbtn{background:var(--gold);color:var(--night-1);border:none;border-radius:.6rem;padding:.6rem 1.2rem;cursor:pointer;font-family:var(--serif);font-weight:700}

/* ---- 页脚 ---- */
.footer{position:relative;z-index:2;text-align:center;padding:2.5rem 1rem 2rem;color:var(--muted);font-size:.85rem;font-family:var(--serif);border-top:1px solid var(--line)}
.footer .l1{color:var(--gold-dim);margin-bottom:.3rem}

/* ---- 动效 ---- */
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:.9;transform:scale(1.15)}}
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- 响应式 ---- */
@media(max-width:760px){
  .topbar{padding:.6rem .9rem;flex-wrap:wrap}
  .nav{width:100%;order:3;justify-content:flex-start;overflow-x:auto;margin-left:0;padding-top:.3rem}
  .hero img{height:300px}
  .hero h1{font-size:2rem}
  .app{padding:7rem 1rem 3rem}
  .skywrap{height:460px}
}