body { transition: background 0.8s ease; overflow-x: hidden; width: 100vw; min-height: 100vh; }
        
body.dark-mode { background: radial-gradient(circle at 60% 50%, #0c0d12 0%, #000000 100%); color: #E2E8F0; }
.night-blob-1 { position: fixed; top: -15%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(100, 50, 240, 0.4) 0%, rgba(76, 29, 149, 0.1) 60%, transparent 70%); filter: blur(90px); z-index: 0; pointer-events: none; opacity: 1; transition: opacity 1s ease; }
.night-blob-2 { position: fixed; top: 20%; left: 30%; width: 50vw; height: 50vw; background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 60%, transparent 70%); filter: blur(80px); z-index: 0; pointer-events: none; opacity: 1; transition: opacity 1s ease; }
.stars-dense { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 1; transition: opacity 1s ease; background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.5), rgba(0,0,0,0)), radial-gradient(1px 1px at 100px 70px, rgba(255,255,255,0.4), rgba(0,0,0,0)), radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.4), rgba(0,0,0,0)); background-size: 200px 200px; }
.stars-dense::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(1.5px 1.5px at 100px 50px, #fff, rgba(0,0,0,0)), radial-gradient(2px 2px at 200px 250px, #fff, rgba(0,0,0,0)); background-size: 350px 350px; animation: twinkle 4s infinite alternate; }
body.dark-mode .glass-panel { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4); backdrop-filter: blur(20px); transition: all 0.3s ease; }
body.dark-mode .glass-panel:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 15px 40px rgba(6, 182, 212, 0.15) !important; }
body.dark-mode .cyber-grid { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); }

body.light-mode { background: linear-gradient(135deg, #e6f0fa 0%, #f0f8ff 100%); color: #1e293b; }
.day-blob-1 { position: fixed; top: -15%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(251, 191, 36, 0.4) 0%, transparent 60%); filter: blur(80px); z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.day-blob-2 { position: fixed; top: -5%; right: -15%; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(56, 189, 248, 0.3) 0%, transparent 60%); filter: blur(80px); z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.day-blob-3 { position: fixed; bottom: -15%; left: 10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(244, 114, 182, 0.2) 0%, transparent 60%); filter: blur(80px); z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
body.light-mode .night-blob-1, body.light-mode .night-blob-2, body.light-mode .stars-dense { opacity: 0; }
body.light-mode .day-blob-1, body.light-mode .day-blob-2, body.light-mode .day-blob-3 { opacity: 1; }
body.light-mode .glass-panel { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: 0 10px 30px -5px rgba(14, 165, 233, 0.1); backdrop-filter: blur(20px); transition: all 0.3s ease; }
body.light-mode .glass-panel:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.7); box-shadow: 0 20px 40px -5px rgba(14, 165, 233, 0.2); }
body.light-mode .cyber-grid { background-image: linear-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 165, 233, 0.1) 1px, transparent 1px); }

.cyber-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-size: 50px 50px; z-index: 1; pointer-events: none; transition: background-image 0.5s; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); z-index: 100; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease-out; }
.modal-content { width: 800px; height: 500px; display: flex; border-radius: 20px; overflow: hidden; animation: popIn 0.3s ease-out; }
body.dark-mode .modal-content { background: rgba(19, 19, 31, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); color: white; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
body.light-mode .modal-content { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(255, 255, 255, 0.6); color: #334155; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1); }

.modal-sidebar { width: 200px; padding: 20px; display: flex; flex-direction: column; gap: 5px; }
body.dark-mode .modal-sidebar { background: rgba(0,0,0,0.2); border-right: 1px solid rgba(255,255,255,0.05); }
body.light-mode .modal-sidebar { background: rgba(241, 245, 249, 0.5); border-right: 1px solid rgba(0,0,0,0.05); }
.sidebar-item { padding: 10px 15px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: all 0.2s; }
body.dark-mode .sidebar-item.active { background: rgba(255,255,255,0.1); color: #22d3ee; }
body.dark-mode .sidebar-item:hover:not(.active) { background: rgba(255,255,255,0.05); }
body.light-mode .sidebar-item.active { background: white; color: #0ea5e9; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
body.light-mode .sidebar-item:hover:not(.active) { background: rgba(0,0,0,0.03); }

.modal-body { flex: 1; padding: 30px; overflow-y: auto; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.settings-popover { position: absolute; top: 60px; right: 0; width: 200px; z-index: 100; border-radius: 16px; animation: pop-in 0.2s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; }
body.dark-mode .settings-popover { background: rgba(19, 19, 31, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); }
body.light-mode .settings-popover { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.setting-item { padding: 12px 16px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: background 0.2s; font-size: 14px; }
body.dark-mode .setting-item:hover { background: rgba(255,255,255,0.1); }
body.light-mode .setting-item:hover { background: rgba(0,0,0,0.05); }

.neon-line { height: 2px; width: 100%; margin-top: auto; opacity: 0.7; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.8), rgba(6, 182, 212, 0.8), transparent); }
.gold-glow-card { border: 1px solid #F59E0B !important; }
body.dark-mode .gold-glow-card { box-shadow: 0 0 30px rgba(245, 158, 11, 0.15) !important; background: rgba(245, 158, 11, 0.03) !important; }
body.light-mode .gold-glow-card { box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2) !important; background: linear-gradient(135deg, #fffbeb, #fff) !important; border-color: #fcd34d !important; }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important; -webkit-text-fill-color: white !important; transition: background-color 5000s ease-in-out 0s; }
body.light-mode input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; -webkit-text-fill-color: #333 !important; }

/* Wheel Specific Styles */
.wheel-shake { animation: shake 0.8s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(4px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-8px, 0, 0); } 40%, 60% { transform: translate3d(8px, 0, 0); } }
.grand-win-badge { background: linear-gradient(135deg, #FFD700, #FDB931, #FFD700) !important; color: #8B0000 !important; border: 4px solid #FFF !important; box-shadow: 0 0 50px rgba(255, 215, 0, 1), inset 0 0 20px rgba(255, 255, 255, 0.8) !important; transform: scale(1.5) !important; animation: bounce 1s infinite, shine 2s infinite linear, pulse-gold 1s infinite !important; z-index: 100; }
@keyframes shine { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulse-gold { 0% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); } 50% { box-shadow: 0 0 60px rgba(255, 215, 0, 1); } 100% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.6); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }