/* 星语 · 星座运势  —— 共享样式（深夜蓝 + 金色细线，克制的星空主题） */
@font-face{font-family:"AstroSerif";src:url("fonts/NotoSerifSC-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"AstroSans";src:url("fonts/NotoSansSC-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"AstroSans";src:url("fonts/NotoSansSC-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"AstroSym";src:url("fonts/DejaVuSans-Symbols.ttf") format("truetype");font-display:swap}

:root{
  --ink:#0b0e22; --ink2:#12163a;
  --gold:#e8cf9c; --gold-dim:rgba(232,207,156,.55); --hair:rgba(232,207,156,.18);
  --acc:#b9c8f5;
  --txt:#eeeaf8; --soft:#bdb8d6; --dim:#8a86a8;
  --card:rgba(255,255,255,.035); --card2:rgba(255,255,255,.06);
  --serif:"AstroSerif","Noto Serif SC","Songti SC","STSong",serif;
  --sans:"AstroSans","PingFang SC","Microsoft YaHei",sans-serif;
  --sym:"AstroSym","DejaVu Sans","Segoe UI Symbol",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"AstroSans","PingFang SC","Microsoft YaHei",monospace;
}
body[data-el="火象"]{--acc:#f2b98a}
body[data-el="土象"]{--acc:#cfd29a}
body[data-el="风象"]{--acc:#b9c8f5}
body[data-el="水象"]{--acc:#93d9d6}

*{box-sizing:border-box;margin:0;padding:0}
html{background:#0e1230}
body{font-family:var(--sans);color:var(--txt);min-height:100vh;line-height:1.6;
  background:radial-gradient(1000px 600px at 80% -10%,rgba(120,110,200,.16),transparent 65%),
             radial-gradient(800px 500px at 0% 30%,rgba(70,110,190,.10),transparent 65%),
             linear-gradient(180deg,var(--ink),var(--ink2));background-attachment:fixed}
a{color:inherit}
#sky{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* 导航 */
.nav{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:rgba(11,14,34,.72);border-bottom:1px solid var(--hair)}
.nav .in{max-width:1120px;margin:0 auto;padding:0 22px;height:62px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:var(--serif);font-size:20px;color:var(--gold);text-decoration:none;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.logo i{font-style:normal;font-size:14px;opacity:.8}
.nav ul{list-style:none;display:flex;gap:4px}
.nav a.l{display:block;padding:8px 16px;border-radius:999px;text-decoration:none;color:var(--soft);font-size:15px;transition:.2s}
.nav a.l:hover{color:var(--txt);background:var(--card2)}
.nav a.l.on{color:var(--gold);box-shadow:inset 0 0 0 1px var(--hair)}

.wrap{max-width:1120px;margin:0 auto;padding:44px 22px 70px}
.head{text-align:center;margin-bottom:34px}
.head .kicker{font-size:12px;letter-spacing:.5em;color:var(--gold-dim)}
.head h1{font-family:var(--serif);font-size:clamp(32px,4.6vw,46px);color:var(--gold);margin:8px 0 6px;font-weight:700}
.head p{color:var(--dim);font-size:15px}
.orn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold-dim);margin:14px auto 0;font-size:10px}
.orn:before,.orn:after{content:"";width:90px;height:1px;background:linear-gradient(90deg,transparent,var(--hair))}
.orn:after{transform:scaleX(-1)}

.card{background:var(--card);border:1px solid var(--hair);border-radius:20px}
.title{font-family:var(--serif);color:var(--gold);font-size:19px;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.title:before{content:"✦";font-size:12px;color:var(--gold-dim)}

/* 控件 */
.btn{border:1px solid var(--hair);background:transparent;color:var(--soft);padding:8px 16px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;transition:.2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{border-color:var(--gold-dim);color:var(--gold)}
.btn.pri{background:var(--gold);border-color:var(--gold);color:#1a1630;font-weight:500}
.btn.pri:hover{filter:brightness(1.06);color:#1a1630}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--hair);background:rgba(0,0,0,.18)}
.seg button{border:0;background:none;color:var(--dim);padding:7px 15px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;transition:.2s}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--card2);color:var(--gold);box-shadow:inset 0 0 0 1px var(--hair)}
input[type=date],input[type=text],select{background:rgba(0,0,0,.22);border:1px solid var(--hair);color:var(--txt);border-radius:12px;padding:8px 12px;font:inherit;font-size:14px;color-scheme:dark;outline:none}
input:focus,select:focus{border-color:var(--gold-dim)}
label.f{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-size:14px}

/* 星座选择条 */
.picker{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.pick{cursor:pointer;text-align:center;padding:10px 0 8px;border-radius:14px;border:1px solid transparent;transition:.2s;user-select:none}
.pick:hover{background:var(--card2)}
.pick.on{border-color:var(--hair);background:var(--card2)}
.pick .g{font-family:var(--sym);font-size:22px;color:var(--gold-dim);line-height:1.2}
.pick.on .g{color:var(--gold)}
.pick .n{font-size:12px;color:var(--dim);margin-top:2px}
.pick.on .n{color:var(--txt)}

.stars{color:var(--gold);letter-spacing:2px}
.stars .off{color:rgba(255,255,255,.13)}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:rgba(10,10,30,.9);border:1px solid var(--hair);padding:9px 18px;border-radius:999px;display:none;font-size:14px;z-index:20}
.foot{text-align:center;color:var(--dim);font-size:13px;padding:30px 0 40px;border-top:1px solid var(--hair);max-width:1120px;margin:0 auto}
.loading{opacity:.4;transition:opacity .2s}
.const line{stroke:#fff3dc;stroke-opacity:.55}
@keyframes tw{0%,100%{opacity:.55}50%{opacity:1}}
.const .s{animation:tw 4s ease-in-out infinite}

@media(max-width:900px){.picker{grid-template-columns:repeat(6,1fr)}.nav a.l{padding:8px 10px}}
@media(max-width:520px){.logo i{display:none}.nav a.l{font-size:14px;padding:6px 8px}}