/* astro-style.css
   星盘测试专属样式。这个测试是站内第一个跟"纸墨印章"主题做视觉区分的
   测试——项目所有者明确要求"最大程度还原"提供的参考HTML，所以这里
   直接照搬了参考文件的深色星夜配色（--sky/--card/--gold），不复用
   shared/style.css 的 --paper/--ink/--seal 那一套变量。这是一次刻意的
   主题分叉，不是疏忽，请不要"顺手"把这个文件的变量名改回全局主题。
   index.html 里也没有引用 shared/style.css，原因相同。
*/

:root{
  --sky:#0E1220; --card:#131729; --line:rgba(232,227,245,0.12);
  --ink:#E8E3F5; --ink-soft:#A9A3C4; --ink-faint:#706B8C;
  --gold:#C9A24B; --gold-soft:rgba(201,162,75,0.10);
  --easy:#5B8A72; --hard:#B4544A;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -8%, rgba(201,162,75,0.09), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(76,106,147,0.13), transparent 55%),
    var(--sky);
  color:var(--ink); font-family:'EB Garamond', serif; line-height:1.7;
  padding:40px 16px 60px;
}
.wrap{max-width:560px;margin:0 auto;}
h1,h2,h3{font-family:'Cinzel',serif;font-weight:600;letter-spacing:0.02em;}
.hidden{display:none !important;}

.header{text-align:center;margin-bottom:6px;}
.header .glyph{font-size:22px;color:var(--gold);margin-bottom:10px;}
.header h1{font-size:21px;margin:0 0 8px;}
.header .sub{font-family:'Inter',sans-serif;font-size:11px;color:var(--ink-faint);}
.lede{font-size:14.5px;color:var(--ink-soft);text-align:center;margin:14px auto 0;}

/* ---------- 访问码 / 出生信息 表单屏（参考HTML没有这两屏，按同一套配色新增） ---------- */
.gate-screen, .form-screen{
  max-width:420px;margin:70px auto;text-align:center;
}
.gate-screen h1, .form-screen h2{font-size:20px;margin:0 0 8px;}
.gate-screen p, .form-screen > p{color:var(--ink-faint);font-family:'Inter',sans-serif;font-size:12.5px;margin-bottom:22px;}
.gate-screen input, .form-screen input, .form-screen select{
  width:100%;box-sizing:border-box;padding:12px 14px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font-family:'Inter',sans-serif;font-size:15px;margin-bottom:10px;
}
.gate-screen input::placeholder, .form-screen input::placeholder{color:var(--ink-faint);}
.gate-screen button, .form-screen button{
  width:100%;padding:13px;background:var(--gold);color:var(--sky);border:none;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;cursor:pointer;
  letter-spacing:0.03em;margin-top:4px;
}
.gate-screen button:hover, .form-screen button:hover{opacity:0.9;}
.gate-error{color:var(--hard);font-family:'Inter',sans-serif;font-size:12.5px;margin-top:8px;min-height:1em;}
.form-field{text-align:left;margin-bottom:14px;}
.form-field label{display:block;font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-soft);margin-bottom:5px;}
.form-field .hint-text{font-family:'Inter',sans-serif;font-size:11px;color:var(--ink-faint);margin-top:4px;}
.form-row{display:flex;gap:10px;}
.form-row .form-field{flex:1;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-size:12.5px;color:var(--ink-faint);margin:8px 0 16px;text-align:left;flex-wrap:nowrap;}
.checkbox-row label{white-space:nowrap;}
.field-label-row{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:5px;flex-wrap:wrap;}
.field-label-row label{font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-soft);}
.inline-check{display:flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-faint);cursor:pointer;white-space:nowrap;flex-shrink:0;}
.inline-check input{margin:0;}
input[type="checkbox"]{
  width:15px;height:15px;flex-shrink:0;margin:0;accent-color:var(--gold);
  vertical-align:middle;
}
.form-field input:disabled{
  background:rgba(0,0,0,0.32);color:var(--ink-faint);
  border-color:rgba(232,227,245,0.06);cursor:not-allowed;opacity:0.55;
}
.advanced-toggle{
  font-family:'Inter',sans-serif;font-size:11.5px;color:var(--ink-faint);
  text-align:right;cursor:pointer;margin:-4px 0 12px;text-decoration:underline;
  text-underline-offset:2px;
}
.form-status{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:10px;min-height:1.4em;}

/* ---------- 星盘常驻区 ---------- */
.wheel-pin{margin-top:20px;}
.wheel-box{max-width:420px;margin:0 auto;position:relative;}
#natalWheel{width:100%;height:auto;display:block;}
.planet-node{cursor:pointer;}
.planet-glow{opacity:0;transition:opacity .4s ease;}
.planet-node.active .planet-glow{opacity:1;animation:pulseGlow 1.8s ease-in-out infinite;}
.planet-halo{transition:all .3s ease;}
.planet-node.active .planet-halo{stroke-width:1.8;fill:#1b2140;}
.planet-node.active .planet-glyph{fill:#1A1408;font-weight:700;}
@keyframes pulseGlow{
  0%,100%{opacity:0.75;transform:scale(1);}
  50%{opacity:1;transform:scale(1.12);}
}
.has-selection .bg-ring{opacity:0.32;transition:opacity .4s ease;}
.has-selection .planet-node:not(.active) .planet-halo{opacity:0.28;}
.has-selection .planet-node:not(.active) .planet-glyph{opacity:0.28;}
.has-selection .lead-line{opacity:0.3;}
.bg-ring{transition:opacity .4s ease;}
.aspect-line{transition:opacity .25s ease, stroke-width .25s ease;}
.aspect-line.dim{opacity:0.05 !important;}
.aspect-line.lit{opacity:0.95 !important;stroke-width:2.1px;}
.angle-line.dim{opacity:0.12 !important;}
.angle-line.lit{opacity:1 !important;stroke-width:2.6px;filter:drop-shadow(0 0 5px rgba(201,162,75,0.8));}
.axis-label{transition:opacity .3s ease;}
.has-selection .axis-label:not(.lit-label){opacity:0.35;}
.house-wedge{cursor:pointer;transition:fill .3s ease;}
.house-wedge:hover{fill:rgba(201,162,75,0.06) !important;}
.house-wedge.active{fill:rgba(201,162,75,0.14) !important;}
.house-num{cursor:pointer;transition:fill .3s ease, opacity .3s ease;}
.has-selection .house-num{opacity:0.3;}
.house-num.active{fill:var(--gold) !important;opacity:1 !important;font-weight:700;}
.zodiac-glyph{font-family:'Inter',sans-serif;}

.info-panel{
  max-width:420px;margin:14px auto 0;background:var(--card);border:1px solid var(--gold);
  padding:14px 16px;opacity:0;max-height:0;overflow:hidden;transition:all .3s ease;
}
.info-panel.show{opacity:1;max-height:420px;}
.ip-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.ip-glyph{font-size:22px;color:var(--gold);}
.ip-name{font-size:16px;color:var(--ink);}
.ip-sub{font-family:'Inter',sans-serif;font-size:11px;color:var(--ink-faint);margin-top:2px;}
.ip-meaning{font-size:13.5px;color:var(--ink-soft);margin-bottom:8px;}
.ip-aspects{border-top:1px dashed var(--line);padding-top:8px;}
.ip-asp-row{display:flex;justify-content:space-between;gap:10px;font-family:'Inter',sans-serif;font-size:11px;padding:3px 0;color:var(--ink-soft);}
.ip-asp-desc{color:var(--ink-faint);flex-shrink:0;}
.hint{text-align:center;font-family:'Inter',sans-serif;font-size:10.5px;color:var(--ink-faint);margin-top:10px;}
.no-time-note{
  font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-faint);text-align:center;
  margin:16px auto;padding:12px;border:1px dashed var(--line);max-width:420px;
}

/* ---------- 翻页卡组 ---------- */
.deck{margin-top:30px;}
.deck-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.deck-arrow{
  font-family:'Inter',sans-serif;background:none;border:1px solid var(--line);color:var(--ink-soft);
  width:34px;height:34px;cursor:pointer;font-size:16px;transition:all .2s ease;
}
.deck-arrow:hover{border-color:var(--gold);color:var(--gold);}
.deck-arrow:disabled{opacity:0.25;cursor:default;}
.deck-dots{display:flex;gap:8px;}
.deck-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:all .2s ease;}
.deck-dot.on{background:var(--gold);width:20px;border-radius:4px;}
.deck-title{font-family:'Cinzel',serif;font-size:12px;color:var(--gold);letter-spacing:0.14em;text-align:center;}

.deck-viewport{position:relative;overflow:hidden;}
.deck-track{display:flex;transition:transform .45s cubic-bezier(.65,0,.35,1);}
.deck-page{flex:0 0 100%;max-width:100%;padding:2px;min-height:60px;}

.big3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px;}
.b3-card{background:var(--card);border:1px solid var(--line);padding:14px 8px;text-align:center;cursor:pointer;transition:border-color .2s ease;}
.b3-card:hover{border-color:var(--gold);}
.b3-card .g{font-size:20px;color:var(--gold);margin-bottom:6px;}
.b3-card .role{font-family:'Inter',sans-serif;font-size:9.5px;color:var(--ink-faint);margin-bottom:3px;}
.b3-card .sign{font-size:14.5px;}

.sec-label{font-family:'Inter',sans-serif;font-size:10.5px;color:var(--ink-faint);letter-spacing:0.1em;margin:20px 0 8px;}
.balance-row{display:grid;grid-template-columns:50px 1fr 26px;align-items:center;gap:8px;margin-bottom:7px;cursor:pointer;padding:3px 0;}
.balance-row:hover .balance-fill{filter:brightness(1.25);}
.balance-track{height:8px;background:rgba(232,227,245,0.08);}
.balance-fill{height:100%;transition:filter .2s ease;}
.balance-row .n{font-family:'Inter',sans-serif;font-size:10.5px;color:var(--ink-faint);text-align:right;}
.callout{background:var(--gold-soft);border-left:2px solid var(--gold);padding:10px 14px;margin-top:12px;font-size:13.5px;color:var(--ink-soft);}
.callout b{color:var(--ink);}

.theme-card{background:var(--card);border:1px solid var(--line);padding:15px 16px;margin-top:10px;cursor:pointer;transition:border-color .2s ease;}
.theme-card:hover{border-color:var(--gold);}
.theme-card .th{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:10px;}
.theme-card .th-title{font-size:15px;color:var(--ink);}
.theme-card .th-cta{font-family:'Inter',sans-serif;font-size:10px;color:var(--gold);white-space:nowrap;}
.theme-card p{margin:0;font-size:13.5px;color:var(--ink-soft);}
.empty-note{font-family:'Inter',sans-serif;font-size:12px;color:var(--ink-faint);text-align:center;padding:20px 0;}

.qitem{border-bottom:1px solid var(--line);}
.qhead{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;cursor:pointer;}
.qhead .qtitle{font-size:15.5px;color:var(--ink);font-family:'Cinzel',serif;}
.qhead .qnum{font-family:'Inter',sans-serif;font-size:10px;color:var(--gold);margin-right:10px;}
.qhead .qarrow{font-family:'Inter',sans-serif;color:var(--ink-faint);transition:transform .25s ease;}
.qitem.open .qarrow{transform:rotate(180deg);}
.qbody{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.qitem.open .qbody{max-height:600px;}
.qbody-inner{padding:0 2px 18px;}
.answer{font-size:14.5px;color:var(--ink-soft);}
.answer b{color:var(--ink);font-weight:600;font-style:italic;}
.basis{margin-top:12px;background:var(--card);border:1px solid var(--line);padding:12px 14px;}
.basis .tag{font-family:'Inter',sans-serif;font-size:9.5px;color:var(--gold);letter-spacing:0.1em;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;}
.see-chart-btn{font-family:'Inter',sans-serif;font-size:10px;color:var(--sky);background:var(--gold);border:none;padding:4px 9px;cursor:pointer;}
.see-chart-btn:hover{opacity:0.85;}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px;}
.chip{font-family:'Inter',sans-serif;font-size:10.5px;color:var(--ink-soft);border:1px solid var(--line);padding:3px 8px;}
.basis p{margin:0;font-size:13px;color:var(--ink-faint);line-height:1.65;}

.closing{margin-top:40px;padding:20px 0 20px 18px;border-left:2px solid var(--gold);}
.closing p{margin:0;font-size:16px;line-height:1.85;color:var(--ink);font-style:italic;}
.footnote{font-family:'Inter',sans-serif;font-size:10.5px;color:var(--ink-faint);margin-top:34px;text-align:center;}