@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=DM+Mono:wght@300;400&display=swap');

:root {
  --bg:      #12101a;
  --bg2:     #1a1726;
  --surf:    #1e1b2e;
  --surf2:   #252238;
  --bdr:     #2e2a42;
  --bdr2:    #3a3555;
  --lav:     #a897c8;
  --lavd:    #7a6d9a;
  --rose:    #c49aac;
  --ivory:   #e8e0d5;
  --ivoryd:  #b0a898;
  --gold:    #c9a96e;
  --text:    #ddd5e8;
  --texts:   #9d94b4;
  --textd:   #6b6384;
  --r:       14px;
  --rl:      22px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Lora',serif;min-height:100vh;overflow-x:hidden;line-height:1.7}
body::before{content:'';position:fixed;inset:0;z-index:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;opacity:.5}
.orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.orb1{width:500px;height:500px;background:#7b5ea7;opacity:.14;top:-150px;left:-100px;animation:fl1 20s ease-in-out infinite}
.orb2{width:400px;height:400px;background:#a07080;opacity:.14;bottom:-100px;right:-100px;animation:fl2 25s ease-in-out infinite}
@keyframes fl1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,40px)}}
@keyframes fl2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-35px)}}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;border-radius:50%;background:radial-gradient(circle,#e8e0d5,#a897c8);animation:twinkle var(--d,4s) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.06}50%{opacity:.45}}
#app{position:relative;z-index:1}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}

/* NAV */
nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:#12101aee;backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr)}
.logo{font-family:'Playfair Display',serif;font-size:.95rem;font-weight:600;color:var(--ivory);text-decoration:none;display:flex;align-items:center;gap:7px}
.logo-g{color:var(--lav);font-size:1.15rem;filter:drop-shadow(0 0 8px #a897c840)}
.nav-links{display:flex;gap:2px}
.nav-link{font-family:'DM Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:var(--textd);text-decoration:none;padding:5px 10px;border-radius:7px;transition:all .2s}
.nav-link:hover,.nav-link.active{color:var(--lav);background:var(--surf)}
.nav-right{display:flex;gap:7px;align-items:center}

/* BUTTONS */
.btn{font-family:'DM Mono',monospace;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;border:none;border-radius:40px;padding:7px 16px;transition:all .2s;text-decoration:none;display:inline-block}
.btn-o{background:transparent;border:1px solid var(--bdr2);color:var(--texts)}
.btn-o:hover{border-color:var(--lav);color:var(--lav)}
.btn-f{background:linear-gradient(135deg,#5c4a82,#7d5c70);color:var(--ivory)}
.btn-f:hover{opacity:.85;transform:translateY(-1px)}
.btn-block{width:100%;padding:11px;font-size:.7rem;margin-top:5px;text-align:center}

/* PROFILE DROPDOWN */
.pdw{position:relative}
.pdp{display:flex;align-items:center;gap:7px;background:var(--surf);border:1px solid var(--bdr);border-radius:40px;padding:3px 12px 3px 4px;cursor:pointer;font-family:inherit;transition:border-color .2s}
.pdp:hover{border-color:var(--bdr2)}
.pda{width:25px;height:25px;border-radius:50%;background:linear-gradient(135deg,#5c4a82,#7d5c70);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--ivory)}
.pdn{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--texts)}
.pdc{font-size:.5rem;color:var(--textd);transition:transform .2s;margin-left:1px}
.pdc.open{transform:rotate(180deg)}
.pdm{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--rl);padding:6px;z-index:200;box-shadow:0 8px 40px #00000055;animation:pop .18s ease}
.pdm.open{display:block}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.pdh{padding:9px 10px 12px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--bdr);margin-bottom:4px}
.pdha{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#5c4a82,#7d5c70);display:flex;align-items:center;justify-content:center;color:var(--ivory);flex-shrink:0}
.pdhn{font-family:'Playfair Display',serif;font-size:.85rem;color:var(--ivory)}
.pdhe{font-family:'DM Mono',monospace;font-size:.55rem;color:var(--textd)}
.pdi{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:7px;font-family:'DM Mono',monospace;font-size:.6rem;color:var(--texts);background:none;border:none;cursor:pointer;text-align:left;text-decoration:none;transition:all .15s}
.pdi:hover{background:var(--surf2);color:var(--text)}
.pdi.red{color:#e08090}
.pdi.red:hover{background:#2a1520}
.pdd{height:1px;background:var(--bdr);margin:3px 0}

/* HERO */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 20px 40px}
.hg{font-size:2.8rem;color:var(--lav);filter:drop-shadow(0 2px 14px #a897c840);margin-bottom:16px;animation:gp 4s ease-in-out infinite}
@keyframes gp{0%,100%{filter:drop-shadow(0 2px 14px #a897c840)}50%{filter:drop-shadow(0 2px 28px #a897c870)}}
.hdate{font-family:'DM Mono',monospace;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,5vw,3rem);font-weight:600;color:var(--ivory);line-height:1.2;margin-bottom:10px}
.hero h1 em{color:var(--lav);font-style:italic}
.hsub{color:var(--texts);font-style:italic;max-width:400px;line-height:1.75;font-size:.95rem}

/* cosmic weather */
.cw{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0 6px}
.cw-i{font-family:'DM Mono',monospace;font-size:.6rem;color:var(--textd)}
.cw-d{color:var(--bdr)}

/* energy rings */
.rings{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;margin:20px 0 0;padding:16px 24px;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl)}
.ri{display:flex;flex-direction:column;align-items:center;gap:5px}
.rl-{font-family:'DM Mono',monospace;font-size:.52rem;text-transform:uppercase;letter-spacing:.1em;color:var(--textd)}
.rw{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.rw svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rn{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--texts);position:relative;z-index:1}
.rp{font-family:'DM Mono',monospace;font-size:.52rem;color:var(--textd)}

/* SECTION */
.section{padding:0 0 44px}
.sl{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sl::before,.sl::after{content:'';flex:1;height:1px;background:var(--bdr)}
.sl span{font-family:'DM Mono',monospace;font-size:.58rem;text-transform:uppercase;letter-spacing:.14em;color:var(--textd);white-space:nowrap}

/* CARD */
.card{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:24px;position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#a897c828,transparent)}

/* TABS */
.tabs{display:none;gap:2px;background:var(--bg2);border-radius:9px;padding:3px;margin-bottom:18px;width:fit-content}
.tabs.show{display:flex}
.tab{padding:5px 14px;border-radius:7px;cursor:pointer;font-family:'DM Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--textd);border:none;background:transparent;transition:all .2s}
.tab.active{background:var(--surf2);color:var(--lav)}
.tp{display:none}
.tp.active{display:block}

/* READING */
.ch{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.ci{font-size:.9rem;opacity:.8}
.ct{font-family:'Playfair Display',serif;font-size:.9rem;color:var(--ivory)}
.pill{margin-left:auto;padding:2px 9px;border-radius:20px;font-family:'DM Mono',monospace;font-size:.52rem;background:var(--bg2);border:1px solid var(--bdr);color:var(--textd);text-transform:uppercase}
.pill.m{background:linear-gradient(135deg,#3d3055,#4a3048);border-color:#6b5580;color:var(--lav)}
.reading{font-size:.97rem;line-height:1.85;color:var(--texts)}
.reading strong{color:var(--ivory);font-weight:500}
.mt{margin-top:12px}
.div{height:1px;margin:18px 0;background:linear-gradient(90deg,transparent,var(--bdr2),transparent)}

/* reading sections */
.rs-h{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.rs-ic{font-size:.75rem;color:var(--lavd);opacity:.8}
.rs-t{font-family:'Playfair Display',serif;font-size:.9rem;color:var(--lav)}

/* lucky row */
.lucky{display:flex;gap:8px;flex-wrap:wrap;padding:14px;background:var(--bg2);border-radius:var(--r);border:1px solid var(--bdr)}
.li{display:flex;flex-direction:column;gap:3px;flex:1;min-width:65px}
.ll{font-family:'DM Mono',monospace;font-size:.5rem;text-transform:uppercase;letter-spacing:.1em;color:var(--textd)}
.lv{font-family:'Playfair Display',serif;font-size:.85rem;color:var(--ivoryd)}

/* affirmation */
.aff{padding:14px 18px;border-radius:var(--r);background:linear-gradient(135deg,#1e1a30,#1a1528);border:1px solid #3a3258;border-left:3px solid var(--lavd)}
.al{font-family:'DM Mono',monospace;font-size:.52rem;text-transform:uppercase;letter-spacing:.1em;color:var(--lavd);margin-bottom:6px}
.at{font-family:'Playfair Display',serif;font-size:.95rem;font-style:italic;color:var(--ivory);line-height:1.6}
.ref{margin-top:10px;padding:12px 16px;background:var(--bg2);border-radius:var(--r);border-left:3px solid var(--gold)}
.rl2{font-family:'DM Mono',monospace;font-size:.52rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:5px}
.rt{font-size:.9rem;color:var(--texts);font-style:italic;line-height:1.65}

/* blur gate */
.bg-{position:relative;margin-top:14px}
.bt{font-size:.97rem;line-height:1.85;color:var(--texts);filter:blur(5px);user-select:none;pointer-events:none}
.bv{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--surf) 42%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;gap:9px}
.bm{font-family:'Playfair Display',serif;font-size:.88rem;color:var(--ivoryd);font-style:italic;text-align:center}
.bm em{color:var(--lav);font-style:normal}

/* COMPAT */
.ci2{font-size:.85rem;color:var(--textd);font-style:italic;text-align:center;margin-bottom:16px}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:16px}
.sb{background:var(--bg2);border:1px solid var(--bdr);border-radius:11px;padding:9px 3px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .2s;font-family:inherit}
.sb:hover{border-color:var(--bdr2);background:var(--surf2);transform:translateY(-1px)}
.sb.active{border-color:var(--lavd);background:linear-gradient(135deg,#2d2742,#2a2035)}
.sg-{font-size:1.25rem}
.sn{font-family:'DM Mono',monospace;font-size:.55rem;color:var(--textd)}
.cr{display:none;animation:fu .3s ease}
.cr.show{display:block}
@keyframes fu{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.cr-h{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.cr-ring{width:72px;height:72px;position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.cr-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cr-p{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--gold);position:relative;z-index:1}
.cr-t{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--ivory);margin-bottom:2px}
.cr-s{font-size:.85rem;color:var(--texts);font-style:italic}
.ms{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.mr{display:flex;align-items:center;gap:9px}
.mlb{font-family:'DM Mono',monospace;font-size:.55rem;color:var(--textd);width:50px;text-transform:uppercase}
.mt2{flex:1;height:4px;background:var(--bg2);border-radius:10px;overflow:hidden}
.mf{height:100%;border-radius:10px;transition:width .9s ease;width:0}
.m1{background:linear-gradient(90deg,#9b7090,#c49aac)}
.m2{background:linear-gradient(90deg,#6a7ea8,#a8b8d4)}
.m3{background:linear-gradient(90deg,#7a8a6a,#a8b89a)}
.m4{background:linear-gradient(90deg,#8a7040,#c9a96e)}

/* SHARE CARD */
#shareCanvas{display:block;max-width:100%;border-radius:var(--rl);border:1px solid var(--bdr);margin:0 auto 14px}
.sr{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

/* BLOG */
.bg2-{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.bc{display:block;text-decoration:none;background:var(--surf);border:1px solid var(--bdr);border-radius:var(--rl);padding:20px;transition:all .2s;position:relative;overflow:hidden}
.bc::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#a897c820,transparent)}
.bc:hover{border-color:var(--bdr2);transform:translateY(-2px)}
.bc-tag{display:inline-block;font-family:'DM Mono',monospace;font-size:.52rem;text-transform:uppercase;letter-spacing:.1em;padding:2px 7px;background:var(--bg2);border:1px solid var(--bdr);border-radius:20px;color:var(--textd);margin-bottom:9px}
.bc-t{font-family:'Playfair Display',serif;font-size:.95rem;color:var(--ivory);line-height:1.3;margin-bottom:7px}
.bc-e{font-size:.85rem;color:var(--texts);line-height:1.6;margin-bottom:12px}
.bc-f{display:flex;justify-content:space-between}
.bc-d{font-family:'DM Mono',monospace;font-size:.55rem;color:var(--textd)}
.bc-r{font-family:'DM Mono',monospace;font-size:.55rem;color:var(--lavd)}

/* MODAL */
.mbg{display:none;position:fixed;inset:0;z-index:200;background:#08070fcc;backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:16px}
.mbg.open{display:flex}
.modal{background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--rl);padding:36px 28px;max-width:360px;width:100%;position:relative;animation:pop .28s ease;max-height:90vh;overflow-y:auto}
.mx{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--textd);font-size:.95rem;cursor:pointer;padding:4px 8px;border-radius:6px}
.mx:hover{color:var(--text)}
.mg{text-align:center;font-size:1.7rem;color:var(--lav);margin-bottom:10px}
.modal h2{font-family:'Playfair Display',serif;font-size:1.2rem;text-align:center;color:var(--ivory);margin-bottom:3px}
.msub{text-align:center;color:var(--textd);font-style:italic;font-size:.85rem;margin-bottom:20px}
.sw{display:flex;background:var(--bg);border-radius:9px;padding:3px;margin-bottom:18px}
.swb{flex:1;padding:7px;text-align:center;cursor:pointer;font-family:'DM Mono',monospace;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--textd);background:transparent;border:none;border-radius:7px;transition:all .2s}
.swb.active{background:var(--surf2);color:var(--lav)}
.fg{margin-bottom:10px}
.fg label{display:block;font-family:'DM Mono',monospace;font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--textd);margin-bottom:3px}
.fg input{width:100%;padding:9px 11px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;color:var(--text);font-family:'Lora',serif;font-size:.92rem;outline:none;transition:border-color .2s}
.fg input:focus{border-color:var(--lavd)}
.fg input::placeholder{color:var(--textd)}
.err{background:#2a1520;border:1px solid #7a3040;border-radius:7px;padding:7px 11px;font-family:'DM Mono',monospace;font-size:.62rem;color:#e08090;margin-bottom:9px}
.okm{background:#1a2a1a;border:1px solid #3a6a3a;border-radius:7px;padding:7px 11px;font-family:'DM Mono',monospace;font-size:.62rem;color:#80c880;margin-bottom:9px}
.lbtn{background:none;border:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:.58rem;color:var(--textd);display:block;width:100%;text-align:center;padding:7px 0;transition:color .2s}
.lbtn:hover{color:var(--lav)}
.bbtn{font-family:'DM Mono',monospace;font-size:.58rem;color:var(--textd);background:none;border:none;cursor:pointer;text-align:left;padding:0 0 10px;transition:color .2s}
.bbtn:hover{color:var(--lav)}

/* TOAST */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:var(--surf2);border:1px solid var(--bdr2);border-radius:40px;padding:8px 20px;font-family:'DM Mono',monospace;font-size:.62rem;color:var(--lav);z-index:500;transition:transform .3s cubic-bezier(.34,1.4,.64,1);pointer-events:none;box-shadow:0 4px 20px #00000040}
.toast.show{transform:translateX(-50%) translateY(0)}

/* FOOTER */
footer{border-top:1px solid var(--bdr);padding:28px 20px;text-align:center;color:var(--textd);font-style:italic;font-size:.82rem}
.fl{font-family:'Playfair Display',serif;color:var(--ivoryd);margin-bottom:7px}
.fn{display:flex;justify-content:center;gap:16px;margin-bottom:8px}
.fn a{font-family:'DM Mono',monospace;font-size:.55rem;text-transform:uppercase;letter-spacing:.1em;color:var(--textd);text-decoration:none}
.fn a:hover{color:var(--texts)}

@media(max-width:560px){
  nav{padding:10px 14px}
  .nav-links{display:none}
  .card{padding:18px 14px}
  .modal{padding:28px 18px}
  .sg{grid-template-columns:repeat(3,1fr)}
  .bg2-{grid-template-columns:1fr}
  .rings{gap:16px;padding:12px 14px}
}

/* ── Google button ─────────────────────────────────────── */
.btn-google {
  width:100%; padding:10px 16px; margin-bottom:4px;
  background:#fff; border:1px solid #dadce0; border-radius:40px;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:.65rem; text-transform:uppercase;
  letter-spacing:.06em; color:#3c4043; cursor:pointer;
  transition:all .2s; box-shadow:0 1px 3px #00000015;
}
.btn-google:hover { box-shadow:0 2px 8px #00000025; border-color:#c0c4cc; }
.or-sep { display:flex; align-items:center; gap:10px; margin:10px 0; }
.or-sep::before,.or-sep::after { content:''; flex:1; height:1px; background:var(--bdr); }
.or-sep span { font-family:'DM Mono',monospace; font-size:.55rem; color:var(--textd); }