:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #181825;
    --bg-card-hover: #1e1e2e;
    --bg-elevated: #222233;
    --border: #2a2a3d;
    --border-light: #333350;
    --text-primary: #e8e8f0;
    --text-secondary: #9090a8;
    --text-muted: #606078;
    --accent: #6c5ce7;
    --accent-glow: rgba(108,92,231,0.3);
    --accent-light: #8b7cf7;
    --green: #00d68f;
    --green-glow: rgba(0,214,143,0.25);
    --red: #ff4757;
    --red-glow: rgba(255,71,87,0.25);
    --orange: #ffa502;
    --orange-glow: rgba(255,165,2,0.25);
    --blue: #0984e3;
    --yellow: #f9ca24;
    --nav-height: 70px;
    --header-height: 56px;
    --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;font-family:'Manrope',-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{display:none}*{scrollbar-width:none}

.app{max-width:480px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;background:var(--bg-primary);overflow:hidden}

/* Header */
.app-header{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:rgba(10,10,15,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;flex-shrink:0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-0.5px}
.logo i{color:var(--accent);font-size:18px;background:var(--accent-glow);padding:6px;border-radius:8px}
.header-right{display:flex;align-items:center;gap:10px}
.header-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .2s}
.header-btn:active{transform:scale(.92)}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px}
.notif-badge:empty,.notif-badge[data-count="0"]{display:none}
.support-chip{display:flex;align-items:center;gap:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:6px 14px;font-size:12px;font-weight:600;color:var(--text-primary);text-decoration:none;transition:all .2s;cursor:pointer}
.support-chip i{color:var(--accent);font-size:14px}
.support-chip:active{transform:scale(.95);background:var(--accent);color:#fff}
.support-chip:active i{color:#fff}

/* Content */
.app-content{flex:1;position:relative;overflow:hidden}
.screen{position:absolute;inset:0;display:none;opacity:0;transition:opacity .25s ease}
.screen.active{display:block;opacity:1}
.screen-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:16px;-webkit-overflow-scrolling:touch}
.bottom-spacer{height:20px}

/* Bottom Nav */
.bottom-nav{height:var(--nav-height);display:flex;align-items:center;justify-content:space-around;background:rgba(12,12,18,0.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom,0);flex-shrink:0;z-index:100}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;color:var(--text-muted);font-size:10px;font-weight:600;cursor:pointer;padding:8px 12px;border-radius:12px;transition:all .2s;font-family:inherit;position:relative}
.nav-item i{font-size:20px;transition:all .2s}
.nav-item.active{color:var(--accent)}
.nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--accent);border-radius:0 0 3px 3px}
.nav-item:active{transform:scale(.9)}
.admin-nav.active{color:var(--orange)}
.admin-nav.active::before{background:var(--orange)}

/* Gradients */
.gradient-1{background:linear-gradient(135deg,#6c5ce7,#a855f7,#6366f1)}
.gradient-2{background:linear-gradient(135deg,#0984e3,#00b4d8,#06d6a0)}
.gradient-3{background:linear-gradient(135deg,#ff6b6b,#ffa502,#f9ca24)}
.gradient-card-1{background:linear-gradient(135deg,#6c5ce7,#a855f7)}
.gradient-card-2{background:linear-gradient(135deg,#0984e3,#0abde3)}
.gradient-card-3{background:linear-gradient(135deg,#00d68f,#0984e3)}
.gradient-card-4{background:linear-gradient(135deg,#e17055,#fdcb6e)}
.gradient-card-5{background:linear-gradient(135deg,#00b894,#55efc4)}
.gradient-card-6{background:linear-gradient(135deg,#6c5ce7,#fd79a8)}
.gradient-svc-1{background:linear-gradient(135deg,#fd79a8,#e84393)}
.gradient-svc-2{background:linear-gradient(135deg,#0984e3,#6c5ce7)}
.gradient-svc-3{background:linear-gradient(135deg,#ffa502,#e17055)}
.gradient-svc-4{background:linear-gradient(135deg,#00d68f,#0984e3)}

/* Toast */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);padding:12px 24px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;transition:all .3s;z-index:2000;pointer-events:none;max-width:90%;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Animations */
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
.screen.active .home-section{animation:fadeIn .4s ease forwards}
.screen.active .home-section:nth-child(2){animation-delay:.1s}
.screen.active .home-section:nth-child(3){animation-delay:.2s}

/* ===== BANNED SCREEN ===== */
.banned-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 56px);padding:40px 30px;text-align:center}
.banned-sticker{width:160px;height:160px;margin-bottom:24px;display:flex;align-items:center;justify-content:center}
.banned-sticker img{width:140px;height:140px;object-fit:contain}
.banned-duck-fallback{width:120px;height:120px;border-radius:50%;background:var(--red-glow);display:flex;align-items:center;justify-content:center}
.banned-title{font-size:24px;font-weight:800;color:var(--red);margin-bottom:12px}
.banned-text{font-size:14px;color:var(--text-secondary);line-height:1.7;max-width:320px;margin-bottom:20px}
.banned-id{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;background:var(--bg-card);padding:6px 16px;border-radius:8px;border:1px solid var(--border)}

/* ===== LIVE UPDATE ANIMATIONS ===== */

/* Live toast — slides from top */
.live-toast{position:fixed;top:0;left:50%;transform:translateX(-50%) translateY(-100%);z-index:99999;background:var(--bg-card);border:1px solid var(--accent);border-radius:0 0 16px 16px;padding:12px 18px;display:flex;align-items:center;gap:10px;max-width:92%;min-width:260px;box-shadow:0 8px 32px rgba(108,92,231,.3);cursor:pointer;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.live-toast.show{transform:translateX(-50%) translateY(0)}
.live-toast-icon{width:32px;height:32px;border-radius:8px;background:rgba(108,92,231,.15);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;font-size:14px}
.live-toast-text{font-size:13px;line-height:1.4;color:var(--text-primary);flex:1}

/* Badge pulse */
.notif-badge.pulse{animation:badgePulse .6s ease}
@keyframes badgePulse{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}

/* Bell shake */
.header-btn.shake{animation:bellShake .6s ease}
@keyframes bellShake{0%{transform:rotate(0)}15%{transform:rotate(14deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}100%{transform:rotate(0)}}

/* Balance flash green/red */
.flash-up{animation:flashGreen 1s ease}
.flash-down{animation:flashRed 1s ease}
@keyframes flashGreen{0%{color:var(--text-primary)}20%{color:var(--green);text-shadow:0 0 12px rgba(0,200,83,.4)}100%{color:var(--text-primary);text-shadow:none}}
@keyframes flashRed{0%{color:var(--text-primary)}20%{color:var(--red);text-shadow:0 0 12px rgba(255,56,56,.4)}100%{color:var(--text-primary);text-shadow:none}}

/* Counter pop */
.pop{animation:counterPop .4s ease}
@keyframes counterPop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Smooth live connection indicator */
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-right:4px;animation:livePulse 2s infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,200,83,.5)}50%{opacity:.7;box-shadow:0 0 0 4px rgba(0,200,83,0)}}