/* ============================================================
   base.css — CSS Variables, Reset, Layout, Stars, Themes
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

/* ---- DARK THEME (default) ---- */
:root{
  --bg1:#070714;--bg2:#0d0d28;--bg3:#140822;
  --purple:#9b59b6;--pl:#c39bd3;--gold:#f0c040;--gl:#f5d97a;
  --text:#e8e8ff;--dim:#9090bb;--cb:rgba(155,89,182,.3);
  --card-bg:rgba(255,255,255,.04);--card-border:rgba(155,89,182,.3);
  --input-bg:rgba(255,255,255,.06);
  --modal-bg:#0d0d28;
  --theme-icon:'🌙';
}

/* ---- LIGHT THEME ---- */
body.light{
  --bg1:#f0eeff;--bg2:#e8e4fa;--bg3:#ede8ff;
  --purple:#7b3fa6;--pl:#6c3483;--gold:#b8860b;--gl:#9a6d00;
  --text:#1a1035;--dim:#5a4080;--cb:rgba(108,52,131,.25);
  --card-bg:rgba(255,255,255,.75);--card-border:rgba(108,52,131,.25);
  --input-bg:rgba(255,255,255,.9);
  --modal-bg:#f5f0ff;
}
body.light{background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 45%,var(--bg3) 100%)}
body.light .star{background:var(--purple);opacity:0.18!important}

body{
  min-height:100vh;
  background:linear-gradient(135deg,#070714 0%,#0d0d28 45%,#140822 100%);
  color:var(--text);font-family:Georgia,'Times New Roman',serif;overflow-x:hidden;
  transition:background .4s,color .4s;
}
.hidden{display:none!important}
.ctr{max-width:900px;margin:0 auto;padding:20px;position:relative;z-index:2}

/* ---- STARS ---- */
#stars{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;background:#fff;border-radius:50%;opacity:0;animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s)}

/* ---- KEYFRAMES ---- */
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:var(--o,.8);transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes slideIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ---- HERO / INPUT ---- */
.hero{text-align:center;padding:56px 20px 36px}
.logo{font-size:70px;display:block;animation:float 3.2s ease-in-out infinite;filter:drop-shadow(0 0 28px rgba(155,89,182,.85))}
h1.title{
  font-size:2.55em;letter-spacing:.22em;margin:14px 0 8px;
  background:linear-gradient(135deg,var(--pl) 0%,var(--gold) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sub{color:var(--dim);font-size:.88em;letter-spacing:.14em}
.hero-note{text-align:center;color:var(--dim);font-size:.75em;margin-top:22px;opacity:.55}

/* ---- INPUT FORM ---- */
.fcard{
  max-width:480px;margin:0 auto;
  background:var(--card-bg);border:1px solid var(--cb);
  border-radius:20px;padding:36px;backdrop-filter:blur(14px);
  box-shadow:0 0 50px rgba(155,89,182,.18);
}
.fg{margin-bottom:20px}
.fg label{display:block;color:var(--pl);font-size:.78em;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}
.fg input,.fg select{
  width:100%;background:var(--input-bg);border:1px solid rgba(155,89,182,.38);
  border-radius:11px;padding:13px 17px;color:var(--text);font-size:1em;
  font-family:Georgia,serif;outline:none;transition:all .3s;
}
.fg input:focus,.fg select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(155,89,182,.18)}
.fg input::placeholder{color:var(--dim)}
.fg input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.65) brightness(.85)}
.btn-go{
  width:100%;background:linear-gradient(135deg,var(--purple) 0%,#6c3483 100%);
  border:none;border-radius:12px;padding:15px;color:#fff;font-size:1.05em;
  font-family:Georgia,serif;cursor:pointer;letter-spacing:.05em;
  transition:all .3s;box-shadow:0 4px 22px rgba(155,89,182,.42);
}
.btn-go:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(155,89,182,.62)}

/* ---- READING HEADER ---- */
.rhead{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid rgba(155,89,182,.18);margin-bottom:18px;
}
.bbk{
  background:transparent;border:1px solid rgba(155,89,182,.38);border-radius:8px;
  padding:7px 13px;color:var(--dim);cursor:pointer;font-family:Georgia,serif;font-size:.83em;transition:all .2s;
}
.bbk:hover{border-color:var(--purple);color:var(--text)}
.uname{font-size:1.22em;color:var(--gold);text-align:center}
.udate{color:var(--dim);font-size:.8em;text-align:center;margin-top:2px}

/* ---- THEME & MUSIC BUTTONS ---- */
#theme-btn{
  position:fixed;top:14px;right:14px;z-index:1000;
  background:rgba(155,89,182,.18);border:1px solid rgba(155,89,182,.35);
  border-radius:50%;width:40px;height:40px;font-size:1.1em;cursor:pointer;
  transition:all .3s;backdrop-filter:blur(8px);
}
#theme-btn:hover{background:rgba(155,89,182,.35);transform:scale(1.1)}

#music-player{
  position:fixed;bottom:16px;right:16px;z-index:1000;
  display:flex;align-items:center;gap:8px;
  background:rgba(10,8,30,.75);border:1px solid rgba(155,89,182,.28);
  border-radius:30px;padding:7px 14px;backdrop-filter:blur(12px);
}
body.light #music-player{background:rgba(230,220,255,.85)}
#music-btn{background:transparent;border:none;color:var(--text);cursor:pointer;font-size:.88em;display:flex;align-items:center;gap:5px;font-family:Georgia,serif}
#music-btn:hover{color:var(--pl)}
#vol-slider{width:70px;accent-color:var(--purple);cursor:pointer}

/* ---- COMMON UTILS ---- */
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(155,89,182,.3),transparent);margin:18px 0}
.sec-title{font-size:1.02em;color:var(--pl);letter-spacing:.05em;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.tags{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.tag{background:rgba(155,89,182,.13);border:1px solid rgba(155,89,182,.32);border-radius:20px;padding:3px 13px;font-size:.76em;color:var(--pl)}
.tag.g{background:rgba(240,192,64,.09);border-color:rgba(240,192,64,.28);color:var(--gl)}
.zb{display:inline-flex;align-items:center;gap:6px;background:rgba(240,192,64,.1);border:1px solid rgba(240,192,64,.26);border-radius:20px;padding:3px 13px;font-size:.8em;color:var(--gl);margin-top:8px}
.formula{display:inline-block;background:rgba(255,255,255,.05);border:1px solid rgba(155,89,182,.28);border-radius:8px;padding:5px 13px;font-size:.76em;color:var(--dim);font-family:monospace;word-break:break-all;margin-bottom:12px}
.fm-sm{display:block;background:rgba(255,255,255,.03);border:1px solid rgba(155,89,182,.18);border-radius:5px;padding:4px 9px;font-size:.69em;color:var(--dim);font-family:monospace;margin-top:7px;word-break:break-all}
.advice{background:linear-gradient(135deg,rgba(240,192,64,.07),rgba(155,89,182,.07));border:1px solid rgba(240,192,64,.2);border-radius:12px;padding:16px;line-height:1.88;color:var(--text);font-size:.87em;margin-top:13px}
.advice-t{color:var(--gold);font-size:.76em;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px}
.btn-sm{background:transparent;border:1px solid rgba(155,89,182,.36);border-radius:9px;padding:8px 20px;color:var(--dim);cursor:pointer;font-family:Georgia,serif;font-size:.86em;transition:all .2s;display:block;margin:14px auto 0}
.btn-sm:hover{border-color:var(--purple);color:var(--text)}
.btn-gen{
  display:block;margin:0 auto 22px;
  background:linear-gradient(135deg,#6c3483 0%,var(--purple) 50%,var(--gold) 100%);
  border:none;border-radius:13px;padding:15px 38px;color:#fff;font-size:1.04em;
  font-family:Georgia,serif;cursor:pointer;transition:all .3s;
  box-shadow:0 4px 20px rgba(155,89,182,.48);letter-spacing:.04em;
}
.btn-gen:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(155,89,182,.68)}
.btn-gen:disabled{opacity:.5;cursor:not-allowed;transform:none}
.loading{text-align:center;padding:55px}
.lorb{width:80px;height:80px;border-radius:50%;background:conic-gradient(var(--purple),var(--gold),var(--purple));margin:0 auto 18px;animation:spin 2s linear infinite;box-shadow:0 0 36px rgba(155,89,182,.65)}
.lorb-inner{width:100%;height:100%;border-radius:50%;background:var(--bg2);transform:scale(.7)}
.load-txt{color:var(--dim);font-size:.87em}

/* ---- RESPONSIVE ---- */
@media(max-width:600px){
  h1.title{font-size:1.9em;letter-spacing:.14em}
  .g2,.sc-grid,.mpos,.spread{grid-template-columns:1fr}
  .ai-sum{grid-template-columns:1fr 1fr}
  .fcard{padding:24px 14px}
  #theme-btn{top:8px;right:8px}
  #music-player{bottom:8px;right:8px;padding:5px 10px}
  #vol-slider{width:50px}
}