@keyframes twinkle{0%,to{opacity:.3}50%{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.heroAstro{color:#fff;text-align:center;background:#2e0249 radial-gradient(circle at 50% -20%,#581c87,#2e0249);border-bottom:3px solid #a855f7;border-radius:0 0 30px 30px;padding:40px 20px 60px;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000004d}.heroAstro:before{content:"✨";font-size:20px;animation:3s infinite twinkle;position:absolute;top:20px;left:10%}.heroAstro:after{content:"🔮";opacity:.2;font-size:40px;position:absolute;bottom:20px;right:10%}.heroBadge{color:#d8b4fe;letter-spacing:1px;background:#ffffff1a;border:1px solid #fff3;border-radius:50px;padding:5px 12px;font-size:10px;font-weight:700}.heroTitle{background:linear-gradient(90deg,#fff,#e9d5ff);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:10px 0 5px;font-size:24px;font-weight:900}.heroDate{color:#a855f7;background:#0000004d;border-radius:4px;margin-top:5px;padding:4px 10px;font-size:12px;font-weight:700;display:inline-block}.zodiacContainer{z-index:10;margin-top:-30px;padding:0 15px;position:relative}.zodiacGrid{grid-template-columns:repeat(2,1fr);align-items:flex-start;gap:12px;margin-bottom:30px;display:grid}@media (width>=768px){.zodiacGrid{grid-template-columns:repeat(4,1fr)}}.zodiacCard{text-align:center;cursor:pointer;background:#fff;border:1px solid #f3e8ff;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;min-height:140px;padding:15px;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px -10px #00000026}.zodiacCard:hover{border-color:#a855f7;transform:translateY(-5px);box-shadow:0 10px 25px #a855f733}.zIcon{filter:drop-shadow(0 2px 4px #0000001a);margin-bottom:5px;font-size:30px;display:block}.zName{color:#2e0249;text-transform:uppercase;font-size:14px;font-weight:800;display:block}.zDate{color:#64748b;margin-bottom:10px;font-size:10px;display:block}.zLucky{background:#faf5ff;border:1px dashed #d8b4fe;border-radius:8px;width:100%;margin-top:8px;padding:8px;animation:.3s fadeIn;display:none}.zLucky span{color:#6b21a8;font-size:10px;font-weight:700;display:block}.zLucky b{color:#a855f7;font-size:16px}.calcBox{text-align:center;background:#fff;border-top:5px solid #0046ad;border-radius:20px;margin:20px 15px;padding:25px;box-shadow:0 10px 30px -10px #00000026}.calcTitle{color:#0046ad;text-transform:uppercase;margin-bottom:15px;font-size:18px;font-weight:900}.calcIntro{color:#64748b;margin-bottom:15px;font-size:13px}.nameInput{text-align:center;background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;outline:none;width:100%;margin-bottom:15px;padding:15px;font-size:16px}.nameInput:focus{background:#fff;border-color:#0046ad;box-shadow:0 0 0 3px #0046ad1a}.calcBtn{color:#fff;cursor:pointer;text-transform:uppercase;background:#0046ad;border:none;border-radius:50px;width:100%;padding:12px 30px;font-size:13px;font-weight:800;box-shadow:0 5px 15px #0046ad4d}.calcBtn:hover{background:#003685}.nameResult{margin-top:20px;animation:.4s popIn}.luckyCircle{color:#fff;text-shadow:0 2px 2px #0000001a;background:linear-gradient(135deg,#fbbf24 0%,#d97706 100%);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:10px auto;font-size:28px;font-weight:900;display:flex;box-shadow:0 5px 15px #fbbf2466}.contentBox{background:#fff;border-left:4px solid #e63946;border-radius:16px;margin:30px 15px;padding:20px;box-shadow:0 10px 30px -10px #00000026}.contentH2{color:#0f172a;margin-bottom:10px;font-size:18px;font-weight:900}.contentP{color:#475569;text-align:justify;font-size:13px;line-height:1.7}.contentP p{margin-bottom:15px}.playFixedBtn{color:#000;z-index:2000;background:linear-gradient(135deg,gold,#fa0);border:2px solid #fff3;border-radius:50px;padding:8px 20px;font-size:12px;font-weight:900;text-decoration:none;animation:2s infinite pulseGold;position:fixed;bottom:20px;left:15px;box-shadow:0 8px 20px #fa06}.refreshBtn{color:#fff;z-index:2000;background:linear-gradient(135deg,#0046ad,#006aff);border:2px solid #fff3;border-radius:50px;padding:8px 20px;font-size:12px;font-weight:900;text-decoration:none;animation:2s infinite pulseBlue;position:fixed;bottom:20px;right:15px;box-shadow:0 8px 20px #0046ad66}@keyframes pulseGold{0%{box-shadow:0 0 #b8860b66}70%{box-shadow:0 0 0 8px #b8860b00}to{box-shadow:0 0 #b8860b00}}@keyframes pulseBlue{0%{box-shadow:0 0 #0046adb3}70%{box-shadow:0 0 0 15px #0046ad00}to{box-shadow:0 0 #0046ad00}}@media (width<=768px){.heroAstro{padding:30px 15px 50px}.heroTitle{font-size:20px}.zodiacGrid{grid-template-columns:repeat(2,1fr);gap:10px}}html[data-theme=dark] .zodiacCard{box-shadow:none;background:#44403b;border-color:#ffffff1f}html[data-theme=dark] .zodiacCard:hover{border-color:#ffffff40;box-shadow:0 10px 25px #0006}html[data-theme=dark] .zName{color:#fef3c7}html[data-theme=dark] .zDate{color:#d6d3d1}html[data-theme=dark] .zLucky{background:#00000040;border-color:#fff3}html[data-theme=dark] .zLucky span{color:#fcd34d}html[data-theme=dark] .zLucky b{color:#fef08a}html[data-theme=dark] .calcBox{box-shadow:none;background:#44403b;border-top-color:#f59e0b}html[data-theme=dark] .calcTitle{color:#fef3c7}html[data-theme=dark] .calcIntro{color:#e5e5e5}html[data-theme=dark] .nameInput{color:#f1f5f9;background:#0000004d;border-color:#fff3}html[data-theme=dark] .nameInput:focus{background:#0006;border-color:#f59e0b}html[data-theme=dark] .nameInput::placeholder{color:#94a3b8}html[data-theme=dark] .luckyCircle{box-shadow:0 5px 15px #0006}html[data-theme=dark] .contentBox{box-shadow:none;background:#0a0a0a;border:1px solid #262626;border-left:4px solid #404040}html[data-theme=dark] .contentH2{color:#fafafa}html[data-theme=dark] .contentP,html[data-theme=dark] .contentP p{color:#a3a3a3}html[data-theme=dark] .contentP strong{color:#e5e5e5}