* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
body { background: var(--tg-theme-bg-color, #0f1219); font-family: 'Oswald', sans-serif; min-height: 100vh; display: grid; place-items: center; overflow-x: hidden; }
button, input, select, textarea { font-family: 'Oswald', sans-serif; }
.app-container { width: 100%; padding: 20px 16px 100px 16px; margin: 0 auto; }
#walletPage, #tasksPage, #referPage, #spinPage { width: 100%; margin: 0; padding: 0; overflow-y: auto; max-height: calc(100vh - 80px); }
.wallet-card { background: var(--tg-theme-secondary-bg-color, rgba(255,255,255,0.06)); backdrop-filter: blur(16px); border-radius: 60px; padding: 20px; width: calc(100% - 2rem); margin: 1rem auto; text-align: center; border: 1px solid var(--tg-theme-hint-color, rgba(255,255,255,0.12)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.profile-section { text-align: center; margin: 0.5rem auto 1rem auto; width: 100%; }
.profile-pic { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #FFD966; margin-bottom: 8px; }
.profile-name { font-size: 1.8rem; font-weight: 600; color: #FFD966; }
.exchange-rate { font-size: 0.9rem; color: #aaa; margin: 8px 0 0; }
.card { background: var(--tg-theme-secondary-bg-color, rgba(255,255,255,0.06)); backdrop-filter: blur(16px); border-radius: 60px; padding: 24px 20px; width: 100%; max-width: 480px; margin: 0 auto; text-align: center; border: 1px solid var(--tg-theme-hint-color, rgba(255,255,255,0.12)); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.page { display: none; width: 100%; }
.page.active { display: block; }
h1 { font-size: 2.4rem; font-weight: 700; background: linear-gradient(135deg, #FFD966, #FF9F4A); -webkit-background-clip: text; background-clip: text; color: transparent !important; letter-spacing: -0.5px; }
.sub { background: linear-gradient(135deg, #FFD966, #FF9F4A); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 500; margin-bottom: 15px; }
.placeholder-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; color: var(--tg-theme-hint-color, #aaa); }
.placeholder-icon { font-size: 64px; margin-bottom: 20px; }
.placeholder-title { font-size: 1.8rem; font-weight: 600; color: #FFD966; margin-bottom: 12px; }
.placeholder-text { font-size: 1.2rem; background: rgba(255,255,255,0.1); padding: 12px 24px; border-radius: 60px; display: inline-block; }
.join-splash { text-align: center; padding: 40px 20px; }
.splash-icon { font-size: 80px; margin-bottom: 24px; }
.splash-title { font-size: 2rem; font-weight: 600; color: #FFD966; margin-bottom: 16px; }
.splash-description { color: var(--tg-theme-hint-color, #aaa); margin-bottom: 32px; font-size: 1rem; line-height: 1.4; }
.join-channel-btn { background: #FFD966; color: #1e1e2a; padding: 14px 24px; border-radius: 60px; font-weight: 600; display: inline-block; margin-bottom: 16px; font-family: 'Oswald', sans-serif; font-size: 1rem; border: none; cursor: pointer; width: 80%; }
.check-again-btn { background: transparent; border: 1px solid var(--tg-theme-hint-color, #888); color: var(--tg-theme-text-color, #fff); padding: 12px 20px; border-radius: 60px; font-weight: 400; cursor: pointer; width: 60%; }
.tab-bar { position: fixed; bottom: 40px; left: 20px; right: 20px; background: var(--tg-theme-secondary-bg-color, rgba(20,24,40,0.98)); backdrop-filter: blur(20px); display: flex; justify-content: space-around; align-items: center; padding: 8px 12px; border-radius: 60px; border: 1px solid var(--tg-theme-hint-color, rgba(255,255,255,0.12)); z-index: 100; }
.tab-item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: transparent; border: none; cursor: pointer; font-family: 'Oswald', sans-serif; font-size: 0.7rem; color: var(--tg-theme-hint-color, #888); transition: color 0.2s; padding: 6px 12px; border-radius: 40px; }
.tab-item.active { color: #FFD966; }
.tab-item.active .tab-icon svg { fill: #FFD966; stroke: #FFD966; }
.tab-icon { width: 24px; height: 24px; display: block; }
.tab-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; }
.balance-card { background: var(--tg-theme-bg-color, rgba(0,0,0,0.4)); border-radius: 60px; padding: 16px 20px; margin: 12px 0 20px; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.balance-label { font-size: 1rem; color: var(--tg-theme-hint-color, #ccc); font-weight: 400; }
.balance-value { font-size: 3rem; font-weight: 700; color: #FFD966; line-height: 1; }
.balance-unit { font-size: 1rem; color: #FF9F4A; font-weight: 500; }
.usd-value { font-size: 1.2rem; color: #888; font-weight: 500; }
.ad-btn { border: none; padding: 14px 16px; font-size: 1.1rem; font-weight: 600; font-family: 'Oswald', sans-serif; border-radius: 60px; width: 100%; cursor: pointer; margin: 10px 0; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.2s; }
.ad-btn:active { transform: scale(0.97); filter: brightness(0.92); }
.ad-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-adsgram { background: #4caf50; color: white; }
.btn-richads { background: #2196f3; color: white; }
.btn-taddy { background: #9c27b0; color: white; }
.status { background: rgba(0,0,0,0.5); border-radius: 40px; padding: 10px 16px; margin: 16px 0 8px; font-size: 0.85rem; color: #eee; display: none; }
.daily-limit-display { text-align: center; font-size: 0.9rem; color: #aaa; margin-top: 20px; }
.daily-limit-display span { color: #FFD966; font-weight: bold; margin-left: 10px; font-size: 1.1rem;}
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: white; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.withdraw-form { margin-top: 20px; text-align: left; }
.input-group { margin-bottom: 14px; }
.input-group input, .input-group select { width: 100%; padding: 12px; border-radius: 60px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.4); color: #FFD966; font-family: 'Oswald', sans-serif; font-size: 1rem; }
.input-group input::placeholder { color: #aaa; }
.input-group select option { background-color: #1e1e2a; color: #FFD966; padding: 10px; }
.withdraw-btn { background: #FFD966; color: #1e1e2a; border: none; padding: 14px; border-radius: 60px; font-weight: 700; width: 100%; margin-top: 8px; cursor: pointer; font-family: 'Oswald', sans-serif; font-size: 1.1rem; letter-spacing: 0.5px; }
.history-section { margin-top: 30px; padding: 0 1rem; }
.history-title { text-align: center; font-size: 1.5rem; font-weight: 600; color: #FFD966; margin-bottom: 16px; }
.task-item { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 16px; margin-bottom: 16px; }
.task-title { font-size: 1.2rem; font-weight: 600; color: #FFD966; margin-bottom: 8px; }
.task-url { font-size: 0.8rem; color: #aaa; word-break: break-all; margin-bottom: 12px; }
.claim-task-btn { background: #4caf50; color: white; border: none; padding: 10px 16px; border-radius: 40px; font-family: 'Oswald', sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; transition: background 0.3s; }
.claim-task-btn:disabled { background: #555; cursor: not-allowed; }
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--tg-theme-bg-color, #0f1219); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; }
.lightning-container { text-align: center; margin-bottom: 40px; }
.lightning-svg { width: 100px; height: 100px; display: block; margin: 0 auto; opacity: 0; animation: lightningStrike 2s ease-out forwards; }
@keyframes lightningStrike { 0% { opacity: 0; transform: scale(0.8); filter: drop-shadow(0 0 0px #FFD966); } 5% { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 25px #FFD966) drop-shadow(0 0 50px #FF9F4A); } 15% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 20px #FFD966) drop-shadow(0 0 40px #FF9F4A); } 100% { opacity: 0; transform: scale(0.9); filter: drop-shadow(0 0 0px #FFD966); } }
.progress-bar-container { width: 200px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; margin-top: 20px; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #FFD966, #FF9F4A); animation: fillProgress 2s linear forwards; }
@keyframes fillProgress { from { width: 0%; } to { width: 100%; } }
.loading-text { margin-top: 16px; font-family: 'Oswald', sans-serif; font-size: 0.9rem; color: #aaa; letter-spacing: 1px; }
.history-list { min-height: 150px; transition: opacity 0.3s ease; background: var(--tg-theme-secondary-bg-color, rgba(255,255,255,0.06)); backdrop-filter: blur(16px); border-radius: 40px; padding: 16px; border: 1px solid var(--tg-theme-hint-color, rgba(255,255,255,0.12)); overflow-x: auto; }
.history-item { background: rgba(255,255,255,0.05); border-radius: 20px; padding: 14px 18px; margin-bottom: 12px; cursor: pointer; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.4s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.history-item.expanded { background: rgba(255,217,102,0.15); }
.history-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.history-type { font-weight: 600; color: #FFD966; font-size: 1rem; word-break: break-word; flex: 1; min-width: 0; }
.history-amount { font-weight: 600; color: #4caf50; font-size: 1rem; white-space: nowrap; text-align: right; }
/* Hide timestamp in history logs */
.history-time { display: none !important; }
@media (max-width: 380px) { .history-amount { white-space: normal; text-align: left; } .history-row { flex-direction: column; align-items: flex-start; gap: 6px; } }
.load-more { background: transparent; border: 1px solid #FFD966; color: #FFD966; padding: 10px; border-radius: 60px; width: 100%; margin-top: 16px; cursor: pointer; }
#referralsContainer { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
.wheel-spinning { filter: blur(1.5px) brightness(1.1); }
.pointer-glow { filter: drop-shadow(0 0 25px #FFF) drop-shadow(0 0 35px var(--volt-yellow)); }
.spark { position: absolute; width: 6px; height: 6px; background: #FFF; border-radius: 50%; filter: blur(1px); box-shadow: 0 0 10px #FFD966; pointer-events: none; z-index: 20; opacity: 0; }
.result-overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.95); padding: 40px; border-radius: 30px; border: 2px solid #FFD966; z-index: 200; text-align: center; font-family: 'Oswald', sans-serif; animation: winPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes winPop { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 70% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
/* Collect button styling */
#spinCollectBtn {
    background: linear-gradient(135deg, #FFD966 0%, #FF9F4A 100%);
    color: #1e1e2a;
    border: none;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
}
/* Win amount text in popup */
#spinWinAmount {
    color: #FFD966;
    text-shadow: 0 0 10px rgba(255, 217, 102, 0.5);
}