*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Segoe UI,Roboto,Arial,sans-serif;
 color:#fff;
 min-height:100vh;
 padding-bottom:36px;
 background:
  radial-gradient(circle at 18% 0%,rgba(145,65,255,.24),transparent 32%),
  radial-gradient(circle at 82% 8%,rgba(0,220,255,.18),transparent 30%),
  radial-gradient(circle at 50% 55%,rgba(255,170,0,.08),transparent 38%),
  linear-gradient(180deg,#000000 0%,#05020d 48%,#090016 100%);
}
body:before{
 content:"";
 position:fixed;
 inset:0;
 pointer-events:none;
 opacity:.22;
 background-image:
  radial-gradient(circle,rgba(255,255,255,.75) 1px,transparent 1.5px),
  radial-gradient(circle,rgba(0,255,213,.6) 1px,transparent 1.5px);
 background-size:46px 46px,82px 82px;
 background-position:0 0,18px 22px;
}
a{color:inherit;text-decoration:none}
.topbar{
 position:sticky;
 top:0;
 z-index:10;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:12px 14px;
 background:rgba(0,0,0,.88);
 backdrop-filter:blur(14px);
 border-bottom:1px solid rgba(0,210,255,.22);
 box-shadow:0 0 22px rgba(98,0,255,.18);
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:46px;height:46px;border-radius:14px;box-shadow:0 0 18px rgba(0,255,213,.22)}
.topbar b{font-size:20px;letter-spacing:.5px}
.topbar span{color:#00eaff}
.topbar small{display:block;color:#b4b4c4;font-size:12px;margin-top:2px}
main{width:min(760px,calc(100% - 22px));margin:14px auto}
.card{
 position:relative;
 background:rgba(5,5,13,.92);
 border:1px solid rgba(0,210,255,.16);
 border-radius:24px;
 padding:18px;
 margin:14px 0;
 box-shadow:0 16px 34px rgba(0,0,0,.62),0 0 22px rgba(0,210,255,.06);
 overflow:hidden;
}
.card:after{
 content:"";
 position:absolute;
 inset:-1px;
 pointer-events:none;
 border-radius:24px;
 background:linear-gradient(135deg,rgba(0,234,255,.16),transparent 34%,rgba(255,170,0,.10));
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 padding:1px;
 -webkit-mask-composite:xor;
 mask-composite:exclude;
}
.hero{text-align:center}
.hero h1{
 margin:10px 0;
 font-size:clamp(34px,10vw,62px);
 line-height:.98;
 color:#fff;
 text-shadow:0 0 22px rgba(0,234,255,.25);
}
.hero p,.muted{color:#d4d4df;line-height:1.55}
.stars{font-size:26px;color:#ffd66b;letter-spacing:10px;text-shadow:0 0 18px rgba(255,214,107,.45)}
.quickgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tabs{
 position:sticky;
 top:72px;
 z-index:9;
 display:flex;
 gap:10px;
 padding:10px 0;
 overflow:auto;
 background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(5,2,13,.72));
 backdrop-filter:blur(10px);
}
button,.pill{
 border:1px solid rgba(0,210,255,.28);
 border-radius:18px;
 background:rgba(12,12,20,.96);
 color:#fff;
 padding:13px 15px;
 font-weight:900;
 cursor:pointer;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 min-height:48px;
}
button:active{transform:scale(.98)}
.tabs button{white-space:nowrap;flex:1}
.tabs button.active{
 background:linear-gradient(135deg,#1b1b2f,#2b155f);
 border-color:rgba(0,210,255,.60);
 box-shadow:0 0 18px rgba(0,210,255,.16);
}
.page{display:none}
.page.active{display:block}
.input,select{
 width:100%;
 border-radius:18px;
 border:1px solid rgba(0,210,255,.22);
 background:rgba(0,0,0,.42);
 color:#fff;
 padding:15px;
 font-size:16px;
 outline:none;
}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.row>*{flex:1 1 180px}
.voiceGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:10px 0}
.tinyBtn{
 min-height:42px;
 padding:8px 12px;
 border-radius:12px;
 background:#07131c;
 border-color:#00eaff;
 color:#dffaff;
 font-size:12px;
}
.tinyBtn.yellow{
 border-color:#ffaa00;
 color:#ffd889;
 background:#211600;
}
.result{
 white-space:pre-wrap;
 background:rgba(0,0,0,.32);
 border:1px solid rgba(0,210,255,.16);
 border-radius:22px;
 padding:16px;
 margin-top:12px;
 color:#f1f1f5;
 line-height:1.66;
}
.bigResult{font-size:17px}
.zodiacTitle{
 font-size:26px;
 font-weight:900;
 color:#00eaff;
 margin-bottom:8px;
 text-shadow:0 0 18px rgba(0,234,255,.28);
}
.zodiacWheel{
 margin:8px 0 14px;
 padding:12px;
 text-align:center;
 border-radius:18px;
 color:#ffd66b;
 letter-spacing:7px;
 line-height:1.8;
 font-size:22px;
 background:rgba(255,170,0,.06);
 border:1px solid rgba(255,170,0,.18);
}
.horoTextOnly{margin-top:18px}
.horoRefreshBtn{
 width:100%;
 margin-top:16px;
 border-radius:14px!important;
 background:linear-gradient(135deg,rgba(0,210,255,.18),rgba(128,0,255,.18))!important;
 border:1px solid rgba(0,210,255,.45)!important;
 color:#fff!important;
 box-shadow:0 0 18px rgba(0,210,255,.10);
}
.hidden{display:none!important}
footer{text-align:center;color:#9090a8;padding:22px}
#toast{
 position:fixed;
 left:50%;
 bottom:22px;
 transform:translateX(-50%) translateY(20px);
 opacity:0;
 background:#00ffd5;
 color:#03120f;
 padding:12px 16px;
 border-radius:999px;
 font-weight:900;
 z-index:99;
 transition:.2s;
 box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:520px){
 main{width:min(100% - 16px,760px)}
 .card{padding:15px;border-radius:20px}
 .voiceGrid{grid-template-columns:1fr}
 .hero h1{font-size:40px}
 .zodiacWheel{font-size:19px;letter-spacing:5px}
}