:root{
  --void:#150E2B;
  --panel:#211840;
  --panel-raised:#2B2050;
  --gold:#D4A94C;
  --gold-bright:#F0C869;
  --wine:#8A3350;
  --parchment:#F3EAD8;
  --lavender:#A497C9;
  --line: rgba(212,169,76,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(138,51,80,0.35), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(212,169,76,0.10), transparent 55%),
    var(--void);
  color:var(--parchment);
  font-family:'Vazirmatn', sans-serif;
  line-height:1.9;
  min-height:100vh;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;}
.stars span{position:absolute;width:2px;height:2px;background:var(--gold-bright);border-radius:50%;opacity:.5;animation:twinkle 4s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15;}50%{opacity:.9;}}
@media (prefers-reduced-motion: reduce){.stars span{animation:none;} .astrolabe .guide-ring-spin{animation:none !important;} .astrolabe .ring-outer{animation:none !important;} .astrolabe .node-pivot{animation:none !important;}}

h1,h2,h3,.display{font-family:'Lalezar', sans-serif; font-weight:400; letter-spacing:.5px;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,14,43,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:16px;}
.logo{display:flex;align-items:center;gap:10px;font-family:'Lalezar';font-size:22px;color:var(--gold-bright);text-decoration:none;}
.logo svg{width:30px;height:30px;}
nav ul{display:flex;gap:28px;list-style:none;}
nav a{color:var(--parchment);text-decoration:none;font-size:15px;opacity:.85;transition:opacity .2s, color .2s;}
nav a:hover{opacity:1;color:var(--gold-bright);}
.mine-pill{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line);
  padding:8px 16px;border-radius:999px;font-size:14px;color:var(--gold-bright);
  cursor:pointer; white-space:nowrap;
}
.hide-mobile{display:flex;}
@media (max-width:820px){ nav ul{display:none;} }

/* ---------- Hero ---------- */
.hero{max-width:1180px;margin:0 auto;padding:64px 24px 40px;position:relative;z-index:1;text-align:center;}
.eyebrow{color:var(--gold);font-size:14px;letter-spacing:2px;text-transform:uppercase;opacity:.8;}
.hero h1{font-size:clamp(30px,5vw,50px);color:var(--parchment);margin:14px 0 10px;}
.hero h1 em{color:var(--gold-bright);font-style:normal;}
.hero p.sub{color:var(--lavender);max-width:480px;margin:0 auto 42px;font-size:15px;}

/* Astrolabe signature element */
.astrolabe{position:relative;width:min(560px,92vw);aspect-ratio:1/1;margin:0 auto 36px;}
.astrolabe svg{width:100%;height:100%;overflow:visible;}
.ring-outer{transform-origin:250px 250px;animation:spin 140s linear infinite;}
.guide-ring-spin{transform-origin:250px 250px;animation:spin 140s linear infinite;}
.node-pivot{animation:counterSpin 140s linear infinite;}
@keyframes counterSpin{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
@keyframes spin{to{transform:rotate(360deg);}}
.zodiac-btn{cursor:pointer;}
.zodiac-btn ellipse.node{fill:var(--panel-raised);stroke:var(--gold);stroke-width:1.4;transition:fill .25s, stroke .25s, transform .25s;transform-origin:center;transform-box:fill-box;}
.zodiac-btn text{fill:var(--parchment);font-family:'Vazirmatn';pointer-events:none;}
.zodiac-btn text.node-icon{font-size:19px;}
.zodiac-btn text.node-month{font-size:10.5px;font-weight:600;fill:var(--lavender);}
.zodiac-btn:hover ellipse.node,.zodiac-btn.active ellipse.node{fill:var(--wine);stroke:var(--gold-bright);transform:scale(1.1);}
.zodiac-btn:hover text,.zodiac-btn.active text{fill:var(--gold-bright);}
.core-moon{filter:drop-shadow(0 0 22px rgba(240,200,105,0.55));}

.unknown-date{margin-top:6px;}
.unknown-date button{
  background:none;border:none;color:var(--lavender);text-decoration:underline dotted;
  font-family:'Vazirmatn';font-size:14px;cursor:pointer;padding:6px;
}
.unknown-date button:hover{color:var(--gold-bright);}
.date-picker{display:none;margin:16px auto 0;gap:10px;justify-content:center;flex-wrap:wrap;}
.date-picker.open{display:flex;}
.date-picker select,.date-picker input{
  background:var(--panel);border:1px solid var(--line);color:var(--parchment);
  border-radius:10px;padding:10px 14px;font-family:'Vazirmatn';font-size:14px;
}
.date-picker button.go{background:var(--gold);color:var(--void);border:none;border-radius:10px;padding:10px 20px;font-weight:700;cursor:pointer;}

/* ---------- Section shell ---------- */
section{max-width:1180px;margin:0 auto;padding:56px 24px;position:relative;z-index:1;}
.section-head{margin-bottom:28px;}
.section-head .eyebrow{display:block;margin-bottom:6px;}
.section-head h2{font-size:clamp(24px,3vw,32px);color:var(--parchment);}

/* ---------- Profile panel ---------- */
.profile-card{
  background:linear-gradient(165deg, var(--panel-raised), var(--panel));
  border:1px solid var(--line); border-radius:22px; padding:34px; position:relative; overflow:hidden;
}
.profile-card::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 200px at 90% -10%, rgba(212,169,76,0.18), transparent);pointer-events:none;}
.profile-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px;}
.profile-glyph{width:64px;height:64px;border-radius:50%;background:var(--void);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Lalezar';font-size:26px;color:var(--gold-bright);flex:none;}
.profile-title h3{font-size:26px;color:var(--parchment);}
.profile-title .range{color:var(--lavender);font-size:14px;}

.forecast-heading{font-family:'Lalezar';font-weight:400;font-size:22px;color:var(--gold-bright);margin-bottom:18px;}

.tab-panel{display:block;}

.forecast-lead{font-size:15.5px;color:var(--parchment);opacity:.92;margin-bottom:24px;max-width:640px;}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:26px;}
@media (min-width:640px){.stat-grid{grid-template-columns:repeat(4,1fr);}}
.stat-card{background:var(--panel);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px;}
.stat-card .ic{font-size:20px;flex:none;line-height:1;}
.stat-card .meta{flex:1;min-width:0;}
.stat-card .label{font-size:12.5px;color:var(--lavender);margin-bottom:7px;}
.stat-bar-track{background:var(--void);border-radius:999px;height:6px;overflow:hidden;}
.stat-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--wine),var(--gold-bright));}

.forecast-body{color:var(--parchment);opacity:.9;font-size:15px;max-width:680px;margin-bottom:26px;}

.luck-row{display:flex;gap:14px;flex-wrap:wrap;}
.luck-chip{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 18px;font-size:14px;color:var(--gold-bright);display:flex;gap:8px;align-items:center;}
.luck-chip b{color:var(--parchment);font-weight:600;}

/* month timeline */
.timeline{display:flex;justify-content:space-between;margin-bottom:22px;position:relative;}
.timeline::before{content:"";position:absolute;top:9px;right:0;left:0;height:1px;background:var(--line);}
.timeline .pt{position:relative;text-align:center;font-size:12px;color:var(--lavender);flex:1;}
.timeline .pt::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:var(--gold);margin:0 auto 8px;position:relative;z-index:1;}

.key-days{display:flex;flex-direction:column;gap:10px;}
.key-days li{list-style:none;display:flex;gap:12px;align-items:baseline;font-size:14px;}
.key-days .kd-date{color:var(--gold-bright);font-weight:700;flex:none;min-width:78px;}

/* ---------- Year calendar: 12 months, each with its own palette ---------- */
.month-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px;}
@media (max-width:700px){.month-grid{grid-template-columns:repeat(3,1fr);}}
.month-card{
  background:var(--panel);border-radius:14px;padding:14px 6px;text-align:center;cursor:pointer;
  border:1.5px solid transparent;transition:transform .18s, border-color .18s, opacity .18s;
}
.month-card:hover{transform:translateY(-3px);}
.month-card.active{border-color:var(--m-accent, var(--gold));}
.month-card[disabled]{cursor:default;opacity:.5;}
.month-dot{width:13px;height:13px;border-radius:50%;margin:0 auto 8px;background:var(--m-accent, var(--gold));}
.month-card .mname{font-size:13px;font-weight:700;}
.month-card .mseason{font-size:11px;color:var(--lavender);margin-top:3px;}

.month-loading{display:none;align-items:center;gap:12px;padding:20px 4px;color:var(--lavender);font-size:14px;}
.month-loading.show{display:flex;}
.spinner{width:20px;height:20px;border-radius:50%;flex:none;
  border:3px solid var(--line);border-top-color:var(--m-accent-bright, var(--gold-bright));
  animation:spin2 .8s linear infinite;}
@keyframes spin2{to{transform:rotate(360deg);}}

.month-detail{display:none;}
.month-detail.show{display:block;animation:fadeUp .35s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.month-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.month-detail-dot{width:22px;height:22px;border-radius:50%;background:var(--m-accent, var(--gold));flex:none;box-shadow:0 0 16px var(--m-accent, var(--gold));}
.month-detail-head h5{font-family:'Lalezar';font-weight:400;font-size:21px;color:var(--m-accent-bright, var(--gold-bright));}
.month-detail-head .mseason-label{font-size:13px;color:var(--lavender);}
.month-detail .stat-bar-fill{background:linear-gradient(90deg, var(--m-accent, var(--wine)), var(--m-accent-bright, var(--gold-bright)));}
.month-detail .month-luck{background:var(--void);border-radius:12px;padding:10px 18px;font-size:14px;color:var(--m-accent-bright, var(--gold-bright));display:inline-flex;gap:8px;align-items:center;margin-top:6px;}
.month-detail .month-luck b{color:var(--parchment);}

/* ---------- Compatibility ---------- */
.compat-card{background:linear-gradient(165deg, var(--panel-raised), var(--panel));border:1px solid var(--line);border-radius:22px;padding:32px;}
.compat-selects{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;margin-bottom:22px;}
.compat-selects .field{display:flex;flex-direction:column;gap:6px;}
.compat-selects label{font-size:13px;color:var(--lavender);}
.compat-selects select{background:var(--void);border:1px solid var(--line);color:var(--parchment);border-radius:10px;padding:11px 16px;font-family:'Vazirmatn';font-size:14px;min-width:160px;}
.compat-selects button{background:var(--gold);border:none;color:var(--void);font-weight:700;border-radius:10px;padding:11px 24px;cursor:pointer;font-family:'Vazirmatn';}
.compat-result{display:none;}
.compat-result.open{display:block;}
.compat-score{font-family:'Lalezar';font-size:44px;color:var(--gold-bright);text-align:center;margin:10px 0 24px;}
.compat-bars{display:flex;flex-direction:column;gap:14px;}
.compat-bar-row{display:flex;align-items:center;gap:14px;}
.compat-bar-row .lbl{width:110px;font-size:13.5px;color:var(--parchment);flex:none;}
.compat-bar-track{flex:1;background:var(--void);border-radius:999px;height:9px;overflow:hidden;}
.compat-bar-fill{height:100%;background:linear-gradient(90deg,var(--wine),var(--gold-bright));border-radius:999px;}
.compat-bar-row .pct{width:44px;text-align:left;font-size:13px;color:var(--gold);flex:none;}
.compat-note{margin-top:22px;color:var(--parchment);opacity:.85;font-size:14.5px;}

/* ---------- Evergreen teasers ---------- */
.know-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media (max-width:900px){.know-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.know-grid{grid-template-columns:1fr;}}
.know-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;}
.know-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.know-card-glyph{width:38px;height:38px;border-radius:50%;background:var(--void);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Lalezar';font-size:17px;color:var(--gold-bright);flex:none;}
.know-card h4{font-family:'Lalezar';font-size:19px;color:var(--parchment);font-weight:400;}
.know-card .krange{font-size:11.5px;color:var(--lavender);}
.know-card p{font-size:13.5px;color:var(--lavender);margin-bottom:12px;}
.know-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.know-chip{display:inline-block;font-size:11.5px;border-radius:999px;padding:4px 10px;background:var(--void);border:1px solid var(--line);margin:0 4px 6px 0;}
.know-chip.strength{color:var(--gold-bright);}
.know-chip.weakness{color:var(--lavender);}
.know-chip.weakness:first-of-type{margin-inline-start:10px;}
.know-line{font-size:13px;color:var(--parchment);opacity:.9;margin-bottom:6px;}
.know-line b{color:var(--gold-bright);font-weight:600;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:36px 24px;text-align:center;color:var(--lavender);font-size:13px;position:relative;z-index:1;}
footer nav{display:flex;gap:22px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;}
footer a{color:var(--lavender);text-decoration:none;}
footer a:hover{color:var(--gold-bright);}

.divider{height:1px;background:linear-gradient(90deg, transparent, var(--line), transparent);margin:0 auto;max-width:1180px;}

/* ---------- Empty / redirect state ---------- */
.empty-state{max-width:520px;margin:80px auto;text-align:center;padding:0 24px;}
.empty-state p{color:var(--lavender);margin-bottom:20px;}
.empty-state a{display:inline-block;background:var(--gold);color:var(--void);font-weight:700;border-radius:10px;padding:11px 26px;text-decoration:none;}