/* ═══════════════════════════════════════════════════════════════
   style.css — PointPlay Platform · Ultra-Modern Dark UI v2.0
   ═══════════════════════════════════════════════════════════════ */

   @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800;900&display=swap');

   /* ─── Variables ─────────────────────────────────────────────── */
   :root {
     /* Backgrounds — richer depth hierarchy */
     --bg-base:      #080c10;
     --bg-surface:   #0e1419;
     --bg-card:      #141c23;
     --bg-elevated:  #1a2530;
     --bg-input:     #1a2530;
     --bg-glass:     rgba(20,28,35,.72);
   
     /* Borders */
     --border:        rgba(255,255,255,.06);
     --border-light:  rgba(255,255,255,.12);
     --border-accent: rgba(0,229,168,.22);
   
     /* Accent palette */
     --accent:        #00e5a8;
     --accent-soft:   #00c990;
     --accent-dim:    rgba(0,229,168,.10);
     --accent-glow:   rgba(0,229,168,.28);
   
     --blue:          #4d9eff;
     --blue-dim:      rgba(77,158,255,.10);
     --blue-glow:     rgba(77,158,255,.22);
   
     --purple:        #a78bfa;
     --purple-dim:    rgba(167,139,250,.10);
   
     --orange:        #ff8c42;
     --orange-dim:    rgba(255,140,66,.10);
   
     --gold:          #f5c842;
     --gold-dim:      rgba(245,200,66,.10);
     --gold-glow:     rgba(245,200,66,.20);
   
     --danger:        #ff4d6a;
     --danger-dim:    rgba(255,77,106,.10);
   
     --warning:       #ffb347;
     --warning-dim:   rgba(255,179,71,.10);
   
     /* Text */
     --text-primary:   #eef2f6;
     --text-secondary: #7d95a8;
     --text-muted:     #405060;
   
     /* Fonts */
     --font-main:    'Urbanist', sans-serif;
     --font-display: 'Urbanist', sans-serif;
     --font-mono:    'DM Mono', monospace;  /* bunu değiştirmene gerek yok */
   
     /* Radii */
     --radius-xs:  4px;
     --radius-sm:  8px;
     --radius-md:  14px;
     --radius-lg:  20px;
     --radius-xl:  28px;
     --radius-2xl: 36px;
   
     /* Shadows */
     --shadow-sm:  0 1px 4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03);
     --shadow-md:  0 4px 20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
     --shadow-lg:  0 12px 48px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.05);
     --shadow-xl:  0 24px 80px rgba(0,0,0,.85);
   
     /* Glow effects */
     --glow-accent: 0 0 28px rgba(0,229,168,.20), 0 0 60px rgba(0,229,168,.08);
     --glow-blue:   0 0 28px rgba(77,158,255,.20), 0 0 60px rgba(77,158,255,.08);
     --glow-gold:   0 0 28px rgba(245,200,66,.20), 0 0 60px rgba(245,200,66,.08);
   
     /* Layout */
     --sidebar-w:      240px;
     --sidebar-w-mini: 64px;
     --header-h:       62px;
     --nav-h:          68px;
   
     /* Motion */
     --ease:         cubic-bezier(.22,.68,0,1.2);
     --ease-out:     cubic-bezier(.16,1,.3,1);
     --ease-smooth:  cubic-bezier(.4,0,.2,1);
     --t-fast:   150ms var(--ease-smooth);
     --t-base:   220ms var(--ease-smooth);
     --t-slow:   380ms var(--ease-out);
   }
   
   /* ═══════════════════════════════════════════════════════════════
      LIGHT THEME v3 — PointPlay Mint/Teal dominant
      Her yüzey kendi rengini taşıyor, yeşil-mint ana karakter.
      ═══════════════════════════════════════════════════════════════ */
   body.theme-light {
     --bg-base:      #e6f7f1;
     --bg-surface:   #d4f0e6;
     --bg-card:      #eefaf5;
     --bg-elevated:  #ddf3eb;
     --bg-input:     #f4fbf8;
     --bg-glass:     rgba(230,247,241,.90);

     --border:        rgba(0,150,108,.20);
     --border-light:  rgba(0,150,108,.35);
     --border-accent: rgba(0,196,154,.42);

     --accent:        #00c49a;
     --accent-soft:   #00a880;
     --accent-dim:    rgba(0,196,154,.20);
     --accent-glow:   rgba(0,196,154,.38);

     --blue:          #3b82f6;
     --blue-dim:      rgba(59,130,246,.16);
     --blue-glow:     rgba(59,130,246,.26);

     --purple:        #7c3aed;
     --purple-dim:    rgba(124,58,237,.14);

     --orange:        #f97316;
     --orange-dim:    rgba(249,115,22,.15);

     --gold:          #d97706;
     --gold-dim:      rgba(217,119,6,.16);
     --gold-glow:     rgba(217,119,6,.26);

     --danger:        #ef4444;
     --danger-dim:    rgba(239,68,68,.14);

     --warning:       #f59e0b;
     --warning-dim:   rgba(245,158,11,.15);

     --text-primary:   #0a3828;
     --text-secondary: #1e6648;
     --text-muted:     #5aac88;

     --shadow-sm:  0 1px 4px rgba(0,110,78,.13),  0 0 0 1px rgba(0,150,108,.07);
     --shadow-md:  0 4px 20px rgba(0,110,78,.15),  0 0 0 1px rgba(0,150,108,.08);
     --shadow-lg:  0 12px 40px rgba(0,110,78,.18),  0 0 0 1px rgba(0,150,108,.09);
     --shadow-xl:  0 24px 60px rgba(0,90,60,.22);

     --glow-accent: 0 0 24px rgba(0,196,154,.30), 0 0 50px rgba(0,196,154,.12);
     --glow-blue:   0 0 24px rgba(59,130,246,.24), 0 0 50px rgba(59,130,246,.08);
     --glow-gold:   0 0 24px rgba(217,119,6,.24),  0 0 50px rgba(217,119,6,.08);
   }

   body.theme-light {
     background: var(--bg-base);
     color: var(--text-primary);
   }

   /* Ambient — güçlü mint+sarı+mavi halkalar */
   body.theme-light::before {
     background:
       radial-gradient(ellipse 80vw 65vh at 0%   0%,  rgba(0,229,168,.22)  0%, transparent 60%),
       radial-gradient(ellipse 65vw 55vh at 100% 10%,  rgba(59,130,246,.14) 0%, transparent 58%),
       radial-gradient(ellipse 55vw 50vh at 55%  108%, rgba(245,200,66,.13) 0%, transparent 55%),
       radial-gradient(ellipse 50vw 45vh at 100% 88%,  rgba(249,115,22,.11) 0%, transparent 55%),
       radial-gradient(ellipse 40vw 38vh at 18%  72%,  rgba(124,58,237,.09) 0%, transparent 50%);
     pointer-events: none;
   }

   body.theme-light #loading-screen { background: var(--bg-base); }

   /* Auth */
   body.theme-light .auth-bg {
     background: linear-gradient(145deg, #9fecd4 0%, #8fd8f0 32%, #b8d0ff 62%, #c8f2e0 100%);
   }
   body.theme-light .auth-orb-1 { background: radial-gradient(circle, rgba(0,229,168,.40) 0%, transparent 70%); }
   body.theme-light .auth-orb-2 { background: radial-gradient(circle, rgba(59,130,246,.32) 0%, transparent 70%); }
   body.theme-light .auth-box {
     background: rgba(238,250,244,.90);
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);
     border: 1.5px solid rgba(0,196,154,.35);
     box-shadow: 0 24px 64px rgba(0,110,78,.20), 0 0 0 1px rgba(255,255,255,.55) inset, 0 1px 0 rgba(0,229,168,.28) inset;
   }

   /* Header */
   body.theme-light #header {
     background: linear-gradient(90deg, rgba(0,196,154,.16) 0%, rgba(230,247,241,.96) 45%);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     border-bottom: 1.5px solid rgba(0,150,108,.22);
     box-shadow: 0 2px 14px rgba(0,110,78,.10), 0 1px 0 rgba(255,255,255,.55) inset;
   }

   /* Sidebar */
   body.theme-light #sidebar {
     background: linear-gradient(180deg, #cceedd 0%, #bfe8d4 55%, #b5e2cc 100%);
     border-right: 1.5px solid rgba(0,150,108,.25);
     box-shadow: 2px 0 18px rgba(0,110,78,.12);
   }
   body.theme-light #sidebar .nav-item { color: #0a3828; }
   body.theme-light #sidebar .nav-item:hover { background: rgba(0,196,154,.22); color: #00472e; }
   body.theme-light #sidebar .nav-item.active {
     background: linear-gradient(90deg, rgba(0,196,154,.40), rgba(0,196,154,.14));
     color: #006040;
     border-right: 3px solid #00c49a;
     font-weight: 700;
   }
   body.theme-light #sidebar .sidebar-toggle-btn { background: rgba(0,196,154,.22); border: 1px solid rgba(0,196,154,.35); color: #00472e; }
   body.theme-light #sidebar .sidebar-toggle-btn:hover { background: rgba(0,196,154,.35); }
   body.theme-light #sidebar-overlay { background: rgba(4,35,22,.42); }

   body.theme-light.sidebar-collapsed #sidebar .nav-item:hover::after {
     background: #eefaf5; border: 1px solid rgba(0,150,108,.28);
     color: #0a3828; box-shadow: 0 4px 16px rgba(0,110,78,.18);
   }

   /* Cards */
   body.theme-light .card {
     background: rgba(238,250,244,.84);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1.5px solid rgba(0,150,108,.20);
     box-shadow: 0 2px 14px rgba(0,110,78,.11), 0 0 0 1px rgba(255,255,255,.48) inset;
   }
   body.theme-light .card:hover {
     border-color: rgba(0,196,154,.42);
     box-shadow: 0 6px 26px rgba(0,110,78,.16), 0 0 0 1px rgba(255,255,255,.48) inset;
     transform: translateY(-1px);
   }
   body.theme-light .card-title { color: #00502e; }

   /* Modal */
   body.theme-light .modal-overlay {
     background: rgba(4,35,22,.58);
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
   }
   body.theme-light .modal {
     background: linear-gradient(160deg, #edfaf4 0%, #e6f7ef 40%, #eaf3ff 100%);
     border: 1.5px solid rgba(0,150,108,.28);
     box-shadow: 0 28px 70px rgba(0,90,60,.24), 0 0 0 1px rgba(255,255,255,.52) inset;
   }
   body.theme-light .modal-title { color: #00502e; }
   body.theme-light .modal-handle { background: rgba(0,150,108,.35); }

   /* Inputs */
   body.theme-light .form-input {
     background: rgba(230,247,241,.88);
     border: 1.5px solid rgba(0,150,108,.25);
     color: #0a3828;
   }
   body.theme-light .form-input:focus {
     border-color: #00c49a;
     background: rgba(255,255,255,.96);
     box-shadow: 0 0 0 3px rgba(0,196,154,.20);
     outline: none;
   }
   body.theme-light .form-input::placeholder { color: #5aac88; }
   body.theme-light select.form-input option { background: #e6f7f1; color: #0a3828; }
   body.theme-light .form-label { color: #1e6648; font-weight: 600; }

   /* Buttons */
   body.theme-light .btn-outline { border: 1.5px solid rgba(0,150,108,.38); color: #006040; background: rgba(0,196,154,.10); }
   body.theme-light .btn-outline:hover { background: rgba(0,196,154,.22); border-color: rgba(0,196,154,.58); }
   body.theme-light .btn-google { background: rgba(255,255,255,.88); border: 1.5px solid rgba(0,150,108,.28); color: #0a3828; box-shadow: 0 1px 6px rgba(0,110,78,.10); }
   body.theme-light .btn-google:hover { background: #fff; box-shadow: 0 3px 14px rgba(0,110,78,.16); }

   /* Bottom nav */
   body.theme-light #bottom-nav {
     background: linear-gradient(0deg, rgba(190,232,215,.98) 0%, rgba(212,240,230,.96) 100%);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     border-top: 1.5px solid rgba(0,150,108,.24);
     box-shadow: 0 -2px 16px rgba(0,110,78,.12);
   }
   body.theme-light .bnav-item { color: #5aac88; }
   body.theme-light .bnav-item.active { color: #009870; }

   /* Settings */
   body.theme-light .settings-section-title { color: #006040; font-weight: 700; }
   body.theme-light .settings-item { border-bottom: 1px solid rgba(0,150,108,.12); }
   body.theme-light .settings-item-title { color: #0a3828; }
   body.theme-light .settings-item-desc { color: #5aac88; }
   body.theme-light .settings-item:hover { background: rgba(0,196,154,.08); border-radius: var(--radius-sm); }

   /* Stat pills */
   body.theme-light .stat-pill { background: rgba(230,247,241,.92); border: 1.5px solid rgba(0,150,108,.22); box-shadow: 0 2px 8px rgba(0,110,78,.10); }

   /* Hero */
   body.theme-light .hero-cta {
     background: linear-gradient(135deg, rgba(0,229,168,.26) 0%, rgba(59,130,246,.16) 50%, rgba(245,200,66,.14) 100%);
     border: 1.5px solid rgba(0,196,154,.32);
     box-shadow: 0 4px 22px rgba(0,110,78,.14);
   }
   body.theme-light .hero-badge { background: linear-gradient(90deg, rgba(245,200,66,.34), rgba(249,115,22,.26)); color: #7a3d00; border: 1px solid rgba(217,119,6,.38); }
   body.theme-light .hero-title { color: #0a3828; }
   body.theme-light .hero-accent { color: #009870; }

   /* Leaderboard */
   body.theme-light .lb-tab { background: rgba(230,247,241,.82); color: #1e6648; border: 1.5px solid rgba(0,150,108,.18); }
   body.theme-light .lb-tab.active { background: linear-gradient(90deg, rgba(0,196,154,.30), rgba(59,130,246,.18)); color: #006040; border-color: rgba(0,196,154,.44); font-weight: 700; }
   body.theme-light .lb-row { border-bottom: 1px solid rgba(0,150,108,.09); }
   body.theme-light .lb-row:hover { background: rgba(0,196,154,.09); }

   /* Scrollbar */
   body.theme-light ::-webkit-scrollbar-thumb { background: rgba(0,150,108,.32); border-radius: 99px; }
   body.theme-light ::-webkit-scrollbar-thumb:hover { background: rgba(0,196,154,.58); }

   /* Avatar dropdown */
   body.theme-light .avatar-dropdown { background: linear-gradient(160deg, #edfaf4, #eaf3ff); border: 1.5px solid rgba(0,150,108,.25); box-shadow: 0 10px 34px rgba(0,100,68,.20); }
   body.theme-light .dropdown-item { color: #0a3828; }
   body.theme-light .dropdown-item:hover { background: rgba(0,196,154,.16); color: #00472e; }
   body.theme-light .dropdown-divider { border-top: 1px solid rgba(0,150,108,.16); }

   /* Toast */
   body.theme-light .toast { background: linear-gradient(120deg, #edfaf4, #eaf3ff); border: 1.5px solid rgba(0,150,108,.28); color: #0a3828; box-shadow: 0 8px 28px rgba(0,100,68,.18); }

   /* Task cards */
   body.theme-light .task-card { background: rgba(230,247,241,.90); border: 1.5px solid rgba(0,150,108,.20); }
   body.theme-light .task-card:hover { border-color: rgba(0,196,154,.44); box-shadow: 0 4px 20px rgba(0,110,78,.15); }
   body.theme-light .task-progress-track { background: rgba(0,150,108,.16); }
   body.theme-light .task-title { color: #0a3828; }
   body.theme-light .task-desc { color: #5aac88; }

   /* Game cards */
   body.theme-light .game-card { background: rgba(238,250,244,.86); border: 1.5px solid rgba(0,150,108,.18); }
   body.theme-light .game-card:hover { border-color: rgba(0,196,154,.40); box-shadow: 0 6px 24px rgba(0,110,78,.16); }

   /* Badges */
   body.theme-light .badge-pending  { background: rgba(245,158,11,.22); color: #7a3800; border: 1px solid rgba(245,158,11,.40); }
   body.theme-light .badge-approved { background: rgba(0,196,154,.22);  color: #00502e; border: 1px solid rgba(0,196,154,.42); }
   body.theme-light .badge-rejected { background: rgba(239,68,68,.16);  color: #8a1010; border: 1px solid rgba(239,68,68,.34); }

   /* Skeleton */
   body.theme-light .skeleton-card {
     background: linear-gradient(90deg, rgba(170,225,205,.55) 25%, rgba(205,240,225,.72) 50%, rgba(170,225,205,.55) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s ease-in-out infinite;
   }

   /* Referral */
   body.theme-light .ref-stat { background: rgba(230,247,241,.90); border: 1.5px solid rgba(0,150,108,.20); }
   body.theme-light .ref-stat.green { background: rgba(0,196,154,.20); }
   body.theme-light .tier-item { background: linear-gradient(90deg, rgba(230,247,241,.92), rgba(234,243,255,.82)); border: 1px solid rgba(0,150,108,.20); }
   body.theme-light .referral-link-box { background: rgba(0,196,154,.12); border: 1.5px dashed rgba(0,150,108,.38); }

   /* Announcement */
   body.theme-light .announcement { background: linear-gradient(90deg, rgba(0,196,154,.18), rgba(59,130,246,.12)); border: 1px solid rgba(0,196,154,.30); color: #0a3828; }

   /* FAQ */
   body.theme-light .faq-item { border-bottom: 1px solid rgba(0,150,108,.11); }
   body.theme-light .faq-question { color: #0a3828; font-weight: 600; }
   body.theme-light .faq-answer.open { background: rgba(0,196,154,.09); border-radius: 0 0 var(--radius-sm) var(--radius-sm); color: #1e6648; }

   /* Saved PM */
   body.theme-light .saved-pm-item { background: rgba(230,247,241,.82); border: 1px solid rgba(0,150,108,.20); }
   body.theme-light .saved-pm-item:hover { border-color: rgba(0,196,154,.40); }

   /* Payment tabs */
   body.theme-light .pay-tab { background: rgba(230,247,241,.82); color: #1e6648; border: 1px solid rgba(0,150,108,.20); }
   body.theme-light .pay-tab.active { background: rgba(0,196,154,.24); color: #005030; border-color: rgba(0,196,154,.44); font-weight: 700; }

   /* Auth tabs */
   body.theme-light .auth-tab { color: #5aac88; }
   body.theme-light .auth-tab.active { color: #005030; border-bottom: 2px solid #00c49a; }

   /* Toggle */
   body.theme-light .toggle { background: rgba(0,150,108,.22); }
   body.theme-light .toggle.on { background: linear-gradient(90deg, #00c49a, #00ddb0); box-shadow: 0 0 10px rgba(0,196,154,.38); }

   /* Nav badge */
   body.theme-light .nav-badge { background: var(--orange); }

   /* Page titles */
   body.theme-light .page-title { color: #0a3828; }
   body.theme-light .page-subtitle { color: #5aac88; }

      /* ─── Theme Toggle Button ────────────────────────────────────── */
   .theme-toggle-btn {
     display: flex; align-items: center; gap: 8px;
     background: var(--bg-elevated); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 10px 14px;
     cursor: pointer; color: var(--text-primary);
     font-size: .88rem; font-family: var(--font-main);
     font-weight: 500; transition: var(--t-base);
     width: 100%;
   }
   .theme-toggle-btn:hover { border-color: var(--border-light); background: var(--bg-card); }
   .theme-toggle-btn .theme-toggle-icon { font-size: 1.1rem; line-height: 1; }
   .theme-toggle-btn .theme-toggle-label { flex: 1; text-align: left; }
   .theme-toggle-pill {
     width: 40px; height: 22px; background: var(--bg-elevated);
     border: 1.5px solid var(--border-light); border-radius: 99px;
     position: relative; transition: var(--t-base); flex-shrink: 0;
   }
   .theme-toggle-pill::after {
     content: ''; position: absolute; top: 2px; left: 2px;
     width: 14px; height: 14px; border-radius: 50%;
     background: var(--text-muted); transition: var(--t-base);
   }
   body.theme-light .theme-toggle-pill {
     background: var(--accent-dim); border-color: var(--accent);
   }
   body.theme-light .theme-toggle-pill::after {
     transform: translateX(18px); background: var(--accent);
   }
   
   /* Auth ekranındaki tema butonu */
   .auth-theme-btn {
     display: flex; align-items: center; justify-content: center;
     width: 36px; height: 36px; border-radius: 50%;
     background: var(--bg-elevated); border: 1px solid var(--border);
     cursor: pointer; color: var(--text-secondary);
     transition: var(--t-base); flex-shrink: 0;
   }
   .auth-theme-btn:hover { background: var(--bg-card); border-color: var(--border-light); color: var(--accent); }
   
   /* ─── Reduce motion for accessibility ───────────────────────── */
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: .01ms !important;
       animation-iteration-count: 1 !important;
       transition-duration: .01ms !important;
     }
   }
   
   /* ─── Reset ──────────────────────────────────────────────────── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html {
     font-size: 16px;
     scroll-behavior: smooth;
     -webkit-tap-highlight-color: transparent;
     text-size-adjust: 100%;
   }
   body {
     font-family: var(--font-main);
     background: var(--bg-base);
     color: var(--text-primary);
     min-height: 100dvh;
     overflow-x: hidden;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   a { color: inherit; text-decoration: none; }
   button { font-family: inherit; cursor: pointer; border: none; background: none; }
   input, textarea, select { font-family: inherit; }
   img { max-width: 100%; display: block; }
   ul { list-style: none; }
   
   /* ─── Scrollbar ──────────────────────────────────────────────── */
   ::-webkit-scrollbar { width: 3px; height: 3px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); border-radius: 99px; }
   ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }
   
   /* ─── Typography ─────────────────────────────────────────────── */
   h1,h2,h3,h4,h5 {
     font-family: var(--font-display);
     font-weight: 700;
     line-height: 1.15;
     letter-spacing: -.02em;
   }
   
   /* ─── Ambient background texture ────────────────────────────── */
   body::before {
     content: '';
     position: fixed;
     inset: 0;
     z-index: -1;
     background:
       radial-gradient(ellipse 80vw 60vh at 50% -10%, rgba(0,229,168,.04) 0%, transparent 70%),
       radial-gradient(ellipse 50vw 50vh at 100% 100%, rgba(77,158,255,.03) 0%, transparent 60%),
       radial-gradient(ellipse 60vw 40vh at -10% 60%, rgba(167,139,250,.02) 0%, transparent 60%);
     pointer-events: none;
   }
   
   /* ═══════════════════════════════════════════════════════════════
      LOADING SCREEN
      ═══════════════════════════════════════════════════════════════ */
   #loading-screen {
     position: fixed; inset: 0; z-index: 9999;
     background: var(--bg-base);
     display: flex; align-items: center; justify-content: center; flex-direction: column;
     gap: 28px;
   }
   #loading-screen.hidden { display: none; }
   
   .loading-logo {
     display: flex; align-items: center; gap: 12px;
     font-family: var(--font-display);
     font-size: 1.75rem; font-weight: 800;
     color: var(--accent);
     letter-spacing: -.03em;
     animation: loadPulse 2s ease infinite;
   }
   .loading-logo svg {
     filter: drop-shadow(0 0 12px var(--accent-glow));
     animation: loadSpin 3s linear infinite;
   }
   @keyframes loadSpin { to { transform: rotate(360deg); } }
   @keyframes loadPulse {
     0%, 100% { opacity: .8; }
     50% { opacity: 1; filter: drop-shadow(0 0 20px var(--accent-glow)); }
   }
   
   .loading-bar {
     width: 180px; height: 2px;
     background: rgba(255,255,255,.05);
     border-radius: 99px; overflow: hidden;
     position: relative;
   }
   .loading-bar::after {
     content: '';
     position: absolute; inset: 0;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
     transform: translateX(-100%);
     animation: shimmer 1.5s ease-in-out infinite;
   }
   .loading-bar-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--accent-soft), var(--accent));
     border-radius: 99px;
     width: 0%;
     transition: width 1.2s var(--ease-out);
     box-shadow: 0 0 10px var(--accent-glow);
   }
   @keyframes shimmer {
     to { transform: translateX(200%); }
   }
   
   /* ═══════════════════════════════════════════════════════════════
      AUTH GATE
      ═══════════════════════════════════════════════════════════════ */
   #auth-gate {
     position: fixed; inset: 0; z-index: 1000;
     background: var(--bg-base);
     display: flex; align-items: center; justify-content: center;
     padding: 20px;
     overflow: hidden;
   }
   #auth-gate.hidden { display: none; }
   
   /* Background effects */
   .auth-bg {
     position: absolute; inset: 0;
     overflow: hidden; pointer-events: none;
   }
   .auth-orb {
     position: absolute; border-radius: 50%;
     animation: orbFloat 8s ease-in-out infinite alternate;
   }
   .auth-orb-1 {
     width: 500px; height: 500px;
     top: -180px; left: -150px;
     background: radial-gradient(circle, rgba(0,229,168,.07) 0%, transparent 65%);
     animation-delay: 0s;
   }
   .auth-orb-2 {
     width: 400px; height: 400px;
     bottom: -120px; right: -100px;
     background: radial-gradient(circle, rgba(77,158,255,.06) 0%, transparent 65%);
     animation-delay: -4s;
   }
   @keyframes orbFloat {
     from { transform: translate(0,0) scale(1); }
     to   { transform: translate(20px, 15px) scale(1.06); }
   }
   
   /* Grid overlay */
   .auth-bg::after {
     content: '';
     position: absolute; inset: 0;
     background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
     background-size: 60px 60px;
     mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
   }
   
   .auth-box {
     width: 100%; max-width: 420px; position: relative;
     background: linear-gradient(160deg, rgba(20,28,35,.95) 0%, rgba(14,20,25,.98) 100%);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-xl);
     padding: 38px 34px 34px;
     box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);
     animation: authReveal .5s var(--ease-out) both;
     backdrop-filter: blur(20px);
   }
   /* Accent top border line */
   .auth-box::before {
     content: '';
     position: absolute; top: 0; left: 20%; right: 20%; height: 1px;
     background: linear-gradient(90deg, transparent, var(--accent), transparent);
     border-radius: 99px;
   }
   @keyframes authReveal {
     from { opacity: 0; transform: translateY(24px) scale(.97); }
     to   { opacity: 1; transform: none; }
   }
   
   .auth-logo {
     display: flex; align-items: center; gap: 10px;
     font-family: var(--font-display);
     font-size: 1.6rem; font-weight: 800;
     color: var(--accent);
     letter-spacing: -.04em;
     margin-bottom: 5px;
   }
   .auth-logo svg { filter: drop-shadow(0 0 8px var(--accent-glow)); }
   .auth-tagline {
     color: var(--text-secondary);
     font-size: .85rem;
     margin-bottom: 30px;
     font-weight: 400;
   }
   
   .auth-tabs {
     display: flex; gap: 3px;
     background: rgba(255,255,255,.04);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm); padding: 4px;
     margin-bottom: 26px;
   }
   .auth-tab {
     flex: 1; padding: 9px 12px; border-radius: 6px;
     font-family: var(--font-display); font-weight: 600; font-size: .86rem;
     color: var(--text-muted); transition: var(--t-base); cursor: pointer;
     letter-spacing: -.01em;
   }
   .auth-tab.active {
     background: linear-gradient(135deg, rgba(0,229,168,.12), rgba(0,229,168,.06));
     color: var(--accent);
     box-shadow: 0 0 0 1px var(--border-accent);
   }
   .auth-tab:hover:not(.active) { color: var(--text-secondary); }
   
   .auth-form { display: flex; flex-direction: column; gap: 13px; }
   .auth-form.hidden { display: none; }
   
   /* ═══════════════════════════════════════════════════════════════
      FORM CONTROLS
      ═══════════════════════════════════════════════════════════════ */
   .form-group { display: flex; flex-direction: column; gap: 6px; }
   .form-label {
     font-size: .75rem; font-weight: 600;
     color: var(--text-secondary);
     letter-spacing: .04em; text-transform: uppercase;
   }
   .form-input {
     background: rgba(255,255,255,.04);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-sm);
     padding: 12px 14px;
     color: var(--text-primary);
     font-size: .93rem;
     outline: none;
     transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
     width: 100%;
     margin-bottom: 15px;
   }
   .form-input::placeholder { color: var(--text-muted); }
   .form-input:hover { border-color: rgba(255,255,255,.15); }
   .form-input:focus {
     border-color: var(--accent);
     background: rgba(0,229,168,.04);
     box-shadow: 0 0 0 3px rgba(0,229,168,.08);
   }
   .form-input:disabled { opacity: .4; cursor: not-allowed; }
   .form-hint { font-size: .76rem; color: var(--text-muted); margin-top: 6px; margin-bottom: 15px; }
   .form-section-label {
     font-size: .72rem; font-weight: 700; color: var(--text-muted);
     text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 8px;
   }
   
   /* ═══════════════════════════════════════════════════════════════
      BUTTONS
      ═══════════════════════════════════════════════════════════════ */
   .btn {
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
     padding: 12px 22px; border-radius: var(--radius-sm);
     font-family: var(--font-display); font-weight: 600; font-size: .9rem;
     transition: var(--t-base); user-select: none; cursor: pointer;
     position: relative; overflow: hidden; letter-spacing: -.01em;
   }
   /* Ripple effect for all buttons */
   .btn::after {
     content: '';
     position: absolute; inset: 0; border-radius: inherit;
     background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 100%);
     opacity: 0; transition: opacity var(--t-fast);
   }
   .btn:hover::after { opacity: 1; }
   .btn:disabled { opacity: .38; pointer-events: none; }
   .btn:active { transform: scale(.97); }
   
   .btn-primary {
     background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
     color: #000; font-weight: 700;
     box-shadow: 0 4px 14px rgba(0,229,168,.25);
   }
   .btn-primary:hover {
     box-shadow: 0 6px 24px rgba(0,229,168,.40), 0 0 0 1px rgba(0,229,168,.4);
     transform: translateY(-1px);
   }
   
   .btn-outline {
     background: rgba(255,255,255,.04);
     color: var(--text-primary);
     border: 1px solid var(--border-light);
   }
   .btn-outline:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-dim);
   }
   
   .btn-google {
     background: rgba(255,255,255,.05);
     color: var(--text-primary);
     border: 1px solid var(--border-light);
   }
   .btn-google:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
   
   .btn-danger {
     background: linear-gradient(135deg, var(--danger), #e0364f);
     color: #fff;
     box-shadow: 0 4px 14px rgba(255,77,106,.2);
   }
   .btn-danger:hover { box-shadow: 0 6px 24px rgba(255,77,106,.35); transform: translateY(-1px); }
   
   .btn-full { width: 100%; }
   .btn-sm { padding: 8px 15px; font-size: .82rem; }
   .btn-xs { padding: 6px 12px; font-size: .78rem; }
   .btn-link {
     background: none; color: var(--accent);
     font-size: .85rem; font-weight: 600; padding: 0;
   }
   .btn-link:hover { opacity: .75; }
   .btn-link::after { display: none; }
   
   .divider {
     display: flex; align-items: center; gap: 12px;
     color: var(--text-muted); font-size: .75rem; margin: 2px 0;
   }
   .divider::before, .divider::after {
     content: ''; flex: 1; height: 1px;
     background: linear-gradient(90deg, transparent, var(--border), transparent);
   }
   
   /* ═══════════════════════════════════════════════════════════════
      HEADER
      ═══════════════════════════════════════════════════════════════ */
   #header {
     position: fixed; top: 0; left: 0; right: 0; z-index: 200;
     height: var(--header-h);
     background: rgba(8,12,16,.88);
     backdrop-filter: blur(24px) saturate(1.4);
     -webkit-backdrop-filter: blur(24px) saturate(1.4);
     border-bottom: 1px solid var(--border);
     display: flex; align-items: center;
     padding: 0 14px 0 18px; gap: 10px;
   }
   /* Subtle top gradient line */
   #header::before {
     content: '';
     position: absolute; top: 0; left: 0; right: 0; height: 1px;
     background: linear-gradient(90deg, transparent 0%, rgba(0,229,168,.3) 30%, rgba(77,158,255,.2) 70%, transparent 100%);
   }
   
   .header-logo {
     display: flex; align-items: center; gap: 8px;
     font-family: var(--font-display);
     font-weight: 800; font-size: 1.15rem;
     color: var(--accent);
     letter-spacing: -.04em; flex-shrink: 0;
   }
   .header-logo svg { filter: drop-shadow(0 0 6px var(--accent-glow)); }
   .header-spacer { flex: 1; }
   
   .header-point-value {
     display: flex; align-items: center; gap: 4px;
     font-size: .66rem; color: var(--text-muted);
     background: rgba(255,255,255,.04);
     border: 1px solid var(--border);
     border-radius: 99px; padding: 3px 8px;
     transition: var(--t-base); white-space: nowrap; max-width: 100px; overflow: hidden;
   }
   .header-point-value:hover { border-color: rgba(255,255,255,.12); }
   .header-point-amount {
     color: var(--accent); font-weight: 700;
     font-family: var(--font-mono); font-size: .68rem;
   }
   
   
   
   .header-balance {
     display: flex; align-items: center; gap: 6px;
     background: rgba(255,255,255,.04);
     border: 1px solid rgba(245,200,66,.20);
     border-radius: 99px; padding: 6px 14px;
     font-family: var(--font-mono); font-weight: 700; font-size: .88rem;
     color: var(--gold); flex-shrink: 0;
     transition: var(--t-base);
   }
   .header-balance:hover { box-shadow: var(--glow-gold); border-color: rgba(245,200,66,.35); }
   
   .header-avatar {
     width: 36px; height: 36px; border-radius: 50%;
     background: var(--accent-dim);
     border: 2px solid rgba(0,229,168,.25);
     display: flex; align-items: center; justify-content: center;
     font-family: var(--font-display); font-weight: 700; font-size: .85rem;
     color: var(--accent); cursor: pointer; flex-shrink: 0; overflow: hidden;
     transition: var(--t-base); position: relative;
   }
   .header-avatar:hover {
     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(0,229,168,.12);
   }
   .header-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
   
   .avatar-dropdown {
     position: absolute; top: calc(100% + 12px); right: 0;
     background: linear-gradient(160deg, var(--bg-elevated), var(--bg-card));
     border: 1px solid var(--border-light);
     border-radius: var(--radius-md); padding: 6px;
     min-width: 185px; box-shadow: var(--shadow-lg);
     z-index: 300;
     opacity: 0; transform: translateY(-8px) scale(.96);
     pointer-events: none; transition: var(--t-slow);
     transform-origin: top right;
   }
   .avatar-dropdown.open {
     opacity: 1; transform: none; pointer-events: all;
   }
   .dropdown-item {
     display: flex; align-items: center; gap: 9px;
     padding: 10px 12px; border-radius: var(--radius-xs);
     font-size: .86rem; font-weight: 500;
     color: var(--text-secondary); cursor: pointer;
     transition: var(--t-fast);
   }
   .dropdown-item:hover { background: rgba(255,255,255,.05); color: var(--text-primary); }
   .dropdown-item.danger { color: var(--danger); }
   .dropdown-item.danger:hover { background: var(--danger-dim); }
   .dropdown-divider { height: 1px; background: var(--border); margin: 5px 0; }
   
   /* ─── Menu Button ────────────────────────────────────────────── */
   #menu-btn {
     width: 36px; height: 36px; border-radius: var(--radius-sm);
     background: rgba(255,255,255,.04);
     border: 1px solid var(--border);
     display: flex; align-items: center; justify-content: center;
     color: var(--text-secondary); flex-shrink: 0; transition: var(--t-base);
   }
   #menu-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
   
   /* ═══════════════════════════════════════════════════════════════
      SIDEBAR
      ═══════════════════════════════════════════════════════════════ */
   #sidebar {
     position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 150;
     width: var(--sidebar-w);
     background: linear-gradient(180deg, rgba(14,20,25,.98) 0%, rgba(8,12,16,.99) 100%);
     border-right: 1px solid var(--border);
     display: flex; flex-direction: column;
     overflow-y: auto; overflow-x: hidden;
     transform: translateX(-100%);
     transition: transform var(--t-slow), width var(--t-slow);
     padding: 14px 10px 28px;
   }
   #sidebar.open { transform: none; }
   
   /* Desktop collapsible sidebar state */
   #sidebar.collapsed {
     width: var(--sidebar-w-mini);
     transform: none;
   }
   #sidebar.collapsed .nav-label,
   #sidebar.collapsed .nav-item span,
   #sidebar.collapsed .sidebar-header-text,
   #sidebar.collapsed .nav-divider-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
   
   #sidebar.collapsed .nav-item {
     justify-content: center;
     padding: 11px;
   }
   
   .sidebar-header {
     display: flex; align-items: center; gap: 9px;
     font-family: var(--font-display); font-weight: 800; font-size: .95rem;
     color: var(--accent); padding: 6px 6px 20px;
     letter-spacing: -.03em;
   }
   .sidebar-header-text { transition: opacity var(--t-base), width var(--t-slow); }
   
   .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
   
   .nav-item {
     display: flex; align-items: center; gap: 10px;
     padding: 10px 13px; border-radius: var(--radius-sm);
     font-size: .88rem; font-weight: 500;
     color: var(--text-secondary); cursor: pointer;
     transition: var(--t-base);
     border: 1px solid transparent; position: relative;
     white-space: nowrap;
   }
   .nav-item:hover {
     background: rgba(255,255,255,.05);
     color: var(--text-primary);
   }
   .nav-item.active {
     background: linear-gradient(135deg, rgba(0,229,168,.10), rgba(0,229,168,.06));
     color: var(--accent);
     border-color: var(--border-accent);
   }
   /* Active left bar */
   .nav-item.active::before {
     content: '';
     position: absolute; left: -1px; top: 20%; bottom: 20%;
     width: 2px;
     background: linear-gradient(180deg, transparent, var(--accent), transparent);
     border-radius: 99px;
   }
   .nav-item svg { flex-shrink: 0; }
   .nav-item .nav-label { transition: opacity var(--t-base); }
   
   .nav-item.danger { color: var(--danger) !important; min-height: 44px; flex-shrink: 0; }
   .nav-item.danger:hover { background: var(--danger-dim); }
   
   .nav-divider {
     height: 1px;
     background: var(--border);
     margin: 6px 2px;
   }
   
   /* Sidebar Overlay */
   #sidebar-overlay {
     position: fixed; inset: 0; z-index: 140;
     background: rgba(0,0,0,.65);
     backdrop-filter: blur(4px);
     opacity: 0; pointer-events: none;
     transition: opacity var(--t-base);
   }
   #sidebar-overlay.visible { opacity: 1; pointer-events: all; }
   
   /* Sidebar toggle button (desktop only) */
   .sidebar-toggle-btn {
     display: none;
     align-items: center; justify-content: center;
     width: 28px; height: 28px; border-radius: 50%;
     background: rgba(255,255,255,.06);
     border: 1px solid var(--border);
     color: var(--text-secondary);
     cursor: pointer; flex-shrink: 0;
     transition: var(--t-base); margin-left: auto;
   }
   .sidebar-toggle-btn:hover { color: var(--accent); border-color: var(--accent); }
   
   /* ─── Bottom Nav (mobile only — DO NOT change structure) ─────── */
   #bottom-nav {
     position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
     height: var(--nav-h);
     background: rgba(8,12,16,.96);
     backdrop-filter: blur(24px) saturate(1.4);
     -webkit-backdrop-filter: blur(24px) saturate(1.4);
     border-top: 1px solid var(--border);
     display: flex; align-items: center; justify-content: space-around;
     padding: 0 4px env(safe-area-inset-bottom, 0);
   }
   .bnav-item {
     flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
     gap: 3px; padding: 6px 4px; cursor: pointer;
     color: var(--text-muted);
     transition: color var(--t-base);
     font-size: .6rem; font-weight: 600;
     font-family: var(--font-display);
     letter-spacing: .02em;
   }
   .bnav-item:hover { color: var(--text-secondary); }
   .bnav-item.active { color: var(--accent); }
   .bnav-item.active svg { transform: translateY(-1px); filter: drop-shadow(0 0 5px var(--accent-glow)); }
   .bnav-item svg { transition: transform var(--t-base), filter var(--t-base); }
   
   /* ═══════════════════════════════════════════════════════════════
      MAIN CONTENT
      ═══════════════════════════════════════════════════════════════ */
   #main {
     flex: 1;
     padding-top: var(--header-h);
     padding-bottom: calc(var(--nav-h) + 16px);
     transition: padding-left var(--t-slow);
   }
   .page { display: none; padding: 18px 16px; animation: pageIn .3s var(--ease-out) both; }
   .page.active { display: block; }
   @keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
   
   /* ─── Page Header ─────────────────────────────────────────────── */
   .page-header { margin-bottom: 22px; padding-top: 0; }

   .page-title {
     font-family: var(--font-display);
     font-size: 1.65rem; font-weight: 800;
     margin-bottom: 4px; letter-spacing: -.04em;
     background: linear-gradient(135deg, var(--text-primary) 0%, rgba(238,242,246,.6) 100%);
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
   }
   .page-subtitle { font-size: .83rem; color: var(--text-secondary); }
   
   
   /* ═══════════════════════════════════════════════════════════════
      CARDS
      ═══════════════════════════════════════════════════════════════ */
   .card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 20px;
     margin-bottom: 14px;
     transition: border-color var(--t-base);
   }
   .card:hover { border-color: var(--border-light); }
   .card-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
   
   /* ═══════════════════════════════════════════════════════════════
      HERO CTA
      ═══════════════════════════════════════════════════════════════ */
   .hero-cta {
     background: linear-gradient(145deg, var(--bg-card) 0%, rgba(8,18,28,1) 100%);
     border: 1px solid var(--border);
     border-radius: var(--radius-xl);
     padding: 30px 22px 26px;
     margin-bottom: 14px;
     position: relative; overflow: hidden;
   }
   /* Animated glow blob */
   .hero-cta::before {
     content: '';
     position: absolute; top: -80px; right: -80px;
     width: 250px; height: 250px;
     background: radial-gradient(circle, rgba(0,229,168,.13) 0%, transparent 65%);
     border-radius: 50%;
     animation: heroBlobMove 6s ease-in-out infinite alternate;
     pointer-events: none;
   }
   .hero-cta::after {
     content: '';
     position: absolute; bottom: -40px; left: -40px;
     width: 180px; height: 180px;
     background: radial-gradient(circle, rgba(77,158,255,.08) 0%, transparent 65%);
     border-radius: 50%;
     animation: heroBlobMove 8s ease-in-out infinite alternate-reverse;
     pointer-events: none;
   }
   @keyframes heroBlobMove {
     from { transform: translate(0,0) scale(1); }
     to   { transform: translate(15px,-10px) scale(1.1); }
   }
   
   .hero-badge {
     display: inline-flex; align-items: center; gap: 6px;
     background: var(--accent-dim);
     color: var(--accent);
     border: 1px solid rgba(0,229,168,.25);
     border-radius: 99px; padding: 4px 13px;
     font-size: .7rem; font-weight: 700; letter-spacing: .1em;
     text-transform: uppercase; margin-bottom: 14px;
   }
   .hero-badge::before {
     content: '';
     width: 5px; height: 5px; border-radius: 50%;
     background: var(--accent);
     box-shadow: 0 0 8px var(--accent);
     animation: blink 2s ease-in-out infinite;
   }
   @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
   
   .hero-title {
     font-family: var(--font-display);
     font-size: clamp(1.8rem, 6vw, 2.5rem);
     font-weight: 900; line-height: 1.05;
     letter-spacing: -.05em;
     margin-bottom: 10px;
   }
   .hero-accent {
     background: linear-gradient(135deg, var(--accent), var(--blue));
     -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
   }
   .hero-sub { font-size: .88rem; color: var(--text-secondary); margin-bottom: 22px; }
   .hero-btn { padding: 14px 26px; font-size: .95rem; }
   
   /* ═══════════════════════════════════════════════════════════════
      STATS ROW
      ═══════════════════════════════════════════════════════════════ */
   .stats-row {
     display: grid; grid-template-columns: repeat(3, 1fr);
     gap: 8px; margin-bottom: 14px;
   }
   .stat-pill {
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 14px 12px;
     display: flex; align-items: center; gap: 10px;
     transition: var(--t-base);
   }
   .stat-pill:hover { border-color: var(--border-light); transform: translateY(-1px); }
   .stat-pill-icon {
     width: 36px; height: 36px; border-radius: var(--radius-sm);
     display: flex; align-items: center; justify-content: center; flex-shrink: 0;
   }
   .stat-pill-icon.green { background: var(--accent-dim); color: var(--accent); }
   .stat-pill-icon.blue  { background: var(--blue-dim); color: var(--blue); }
   .stat-pill-icon.orange { background: var(--orange-dim); color: var(--orange); }
   .stat-pill-value {
     font-family: var(--font-mono); font-size: .95rem;
     font-weight: 600; line-height: 1.2;
   }
   .stat-pill-label { font-size: .62rem; color: var(--text-muted); line-height: 1; margin-top: 1px; }
   
   /* ═══════════════════════════════════════════════════════════════
      POINT VALUE CARD
      ═══════════════════════════════════════════════════════════════ */
   .point-value-card {
     background: linear-gradient(135deg, rgba(0,229,168,.06) 0%, rgba(77,158,255,.04) 100%);
     border: 1px solid rgba(0,229,168,.18);
     border-radius: var(--radius-lg); padding: 18px;
     display: flex; align-items: center; gap: 14px;
     margin-bottom: 22px;
     position: relative; overflow: hidden;
   }
   .point-value-card::before {
     content: ''; position: absolute; top: 0; right: 0;
     width: 120px; height: 120px;
     background: radial-gradient(circle, rgba(0,229,168,.08), transparent 70%);
     pointer-events: none;
   }
   .pv-left, .pv-right { flex: 1; }
   .pv-label { font-size: .7rem; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .06em; }
   .pv-value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; color: var(--accent); }
   .pv-profit { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; color: var(--text-primary); }
   
   /* ═══════════════════════════════════════════════════════════════
      SECTION HEADER
      ═══════════════════════════════════════════════════════════════ */
   .section-header {
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: 12px;
   }
   .section-title {
     font-family: var(--font-display);
     font-size: .95rem; font-weight: 700;
     letter-spacing: -.02em;
   }
   
   /* ═══════════════════════════════════════════════════════════════
      QUICK GAMES
      ═══════════════════════════════════════════════════════════════ */
   .quick-games {
     display: grid; grid-template-columns: repeat(3, 1fr);
     gap: 8px; margin-bottom: 8px;
   }
   .quick-game-card {
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 16px 10px;
     text-align: center; cursor: pointer;
     transition: var(--t-base); position: relative; overflow: hidden;
   }
   .quick-game-card::before {
     content: ''; position: absolute; inset: 0;
     background: linear-gradient(180deg, rgba(0,229,168,.05), transparent);
     opacity: 0; transition: opacity var(--t-base);
   }
   .quick-game-card:hover {
     border-color: var(--accent);
     transform: translateY(-2px);
     box-shadow: 0 4px 20px rgba(0,229,168,.10);
   }
   .quick-game-card:hover::before { opacity: 1; }
   .qg-icon {
     width: 46px; height: 46px; border-radius: var(--radius-sm);
     background: var(--bg-elevated); margin: 0 auto 10px;
     display: flex; align-items: center; justify-content: center;
     transition: var(--t-base);
   }
   .quick-game-card:hover .qg-icon { background: var(--accent-dim); }
   .qg-icon img { width: 28px; height: 28px; object-fit: contain; }
   .qg-icon svg { color: var(--accent); }
   .qg-name { font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .qg-pts { font-size: .64rem; color: var(--accent); margin-top: 3px; font-family: var(--font-mono); }
   
   /* ═══════════════════════════════════════════════════════════════
      GAMES GRID
      ═══════════════════════════════════════════════════════════════ */
   .games-grid { display: grid; gap: 12px; }
   .game-card {
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-lg); overflow: hidden;
     transition: var(--t-base); cursor: pointer;
   }
   .game-card:hover {
     border-color: var(--border-light);
     transform: translateY(-3px);
     box-shadow: 0 8px 30px rgba(0,0,0,.5);
   }
   .game-cover {
     height: 130px; background: var(--bg-elevated);
     display: flex; align-items: center; justify-content: center;
     position: relative; overflow: hidden;
   }
   .game-cover-img {
     width: 100%; height: 100%; object-fit: cover;
     transition: transform .5s var(--ease-out);
   }
   .game-card:hover .game-cover-img { transform: scale(1.05); }
   .game-cover-icon { font-size: 3rem; }
   .game-cover-overlay {
     position: absolute; inset: 0;
     background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.75));
   }
   .game-body { padding: 15px; }
   .game-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -.02em; }
   .game-desc { font-size: .8rem; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.4; }
   .game-meta { display: flex; align-items: center; justify-content: space-between; }
   .game-task { font-size: .74rem; color: var(--text-muted); }
   .game-reward {
     display: flex; align-items: center; gap: 5px;
     background: var(--gold-dim); border: 1px solid rgba(245,200,66,.2);
     border-radius: 99px; padding: 4px 11px;
     font-size: .78rem; font-weight: 700; color: var(--gold);
     font-family: var(--font-mono);
   }
   .game-actions { display: flex; gap: 8px; padding: 0 15px 15px; }
   
   /* ═══════════════════════════════════════════════════════════════
      GAME MODAL
      ═══════════════════════════════════════════════════════════════ */
   .modal-overlay {
     position: fixed; inset: 0; z-index: 800;
     background: rgba(0,0,0,.75);
     backdrop-filter: blur(8px);
     display: flex; align-items: flex-end; justify-content: center;
     opacity: 0; pointer-events: none; transition: opacity var(--t-base);
   }
   .modal-overlay.open { opacity: 1; pointer-events: all; }
   .modal {
     background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-xl) var(--radius-xl) 0 0;
     padding: 0 22px 34px; width: 100%; max-width: 560px;
     transform: translateY(100%); transition: transform .4s var(--ease-out);
     max-height: 92dvh; overflow-y: auto;
     box-shadow: 0 -12px 60px rgba(0,0,0,.7);
   }
   .modal-overlay.open .modal { transform: none; }
   .modal-handle {
     width: 38px; height: 4px;
     background: rgba(255,255,255,.15); border-radius: 99px;
     margin: 14px auto 22px; cursor: pointer;
   }
   .modal-title {
     font-family: var(--font-display);
     font-size: 1.25rem; font-weight: 800;
     margin-bottom: 18px; letter-spacing: -.04em;
   }
   .modal-footer { display: flex; gap: 8px; margin-top: 22px; }
   
   .gm-cover {
     margin: 0 -22px; height: 170px; background: var(--bg-elevated);
     display: flex; align-items: center; justify-content: center;
     margin-bottom: 22px; overflow: hidden;
   }
   .gm-cover img { width: 100%; height: 100%; object-fit: cover; }
   .gm-task-card {
     background: rgba(255,255,255,.04); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 15px; margin-bottom: 16px;
   }
   .gm-task-label { font-size: .7rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; }
   .gm-task-value { font-size: .95rem; font-weight: 600; }
   .gm-ad-req {
     display: flex; align-items: center; gap: 9px;
     background: var(--orange-dim); border: 1px solid rgba(255,140,66,.2);
     border-radius: var(--radius-sm); padding: 11px 13px;
     font-size: .82rem; margin-bottom: 16px; color: var(--orange);
   }
   .gm-reward {
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: 16px;
   }
   .gm-reward-label { font-size: .82rem; color: var(--text-secondary); }
   .gm-reward-val {
     font-family: var(--font-mono); font-weight: 700;
     color: var(--gold); font-size: 1.1rem;
     text-shadow: 0 0 20px rgba(245,200,66,.3);
   }
   .gm-progress-wrap { margin-bottom: 16px; }
   .gm-progress-label { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-muted); margin-bottom: 6px; }
   .gm-progress-track { height: 6px; background: rgba(255,255,255,.05); border-radius: 99px; overflow: hidden; }
   .gm-progress-fill {
     height: 100%;
     background: linear-gradient(90deg, var(--accent-soft), var(--accent));
     border-radius: 99px; transition: width .5s var(--ease-out);
     box-shadow: 0 0 8px var(--accent-glow);
   }
   
   /* ═══════════════════════════════════════════════════════════════
      LEADERBOARD
      ═══════════════════════════════════════════════════════════════ */
   .leaderboard-tabs {
     display: flex; gap: 3px;
     background: rgba(255,255,255,.03);
     border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 4px; margin-bottom: 18px;
   }
   .lb-tab {
     flex: 1; padding: 9px; border-radius: var(--radius-xs);
     font-family: var(--font-display); font-weight: 600; font-size: .84rem;
     color: var(--text-muted); transition: var(--t-base); cursor: pointer;
     letter-spacing: -.01em;
   }
   .lb-tab.active { background: var(--accent-dim); color: var(--accent); }
   .lb-tab:hover:not(.active) { color: var(--text-secondary); }
   
   .lb-panel { display: none; }
   .lb-panel.active { display: block; animation: pageIn .3s var(--ease-out); }
   
   .lb-prize-row {
     display: flex; gap: 8px; margin-bottom: 18px; align-items: flex-end;
   }
   .lb-prize {
     flex: 1; background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 13px 8px; text-align: center;
     transition: var(--t-base);
   }
   .lb-prize:nth-child(2) {
     transform: translateY(-10px);
     border-color: rgba(245,200,66,.35);
     background: linear-gradient(160deg, rgba(245,200,66,.07), var(--bg-card) 60%);
     padding: 20px 8px 14px;
     box-shadow: 0 0 30px rgba(245,200,66,.08);
   }
   .lb-prize-rank { font-size: 1.1rem; font-weight: 900; margin-bottom: 4px; font-family: var(--font-display); }
   .lb-prize:nth-child(2) .lb-prize-rank { font-size: 1.6rem; }
   .lb-prize-rank.gold { color: var(--gold); text-shadow: 0 0 16px rgba(245,200,66,.4); }
   .lb-prize-rank.silver { color: #c0c8d0; }
   .lb-prize-rank.bronze { color: #cd7f32; }
   .lb-prize-amount { font-size: .76rem; color: var(--text-secondary); margin-bottom: 2px; }
   .lb-prize-name { font-size: .73rem; font-weight: 700; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .lb-prize-pts { font-size: .67rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 2px; }
   
   .lb-list { display: flex; flex-direction: column; gap: 6px; }
   .lb-item {
     display: flex; align-items: center; gap: 11px;
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 13px 15px;
     transition: var(--t-fast);
   }
   .lb-item:hover { border-color: var(--border-light); }
   .lb-item.me { border-color: var(--border-accent); background: var(--accent-dim); }
   .lb-rank { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--text-muted); width: 24px; flex-shrink: 0; }
   .lb-rank.top-3 { color: var(--gold); }
   .lb-name { flex: 1; font-weight: 600; font-size: .9rem; }
   .lb-pts { font-family: var(--font-mono); font-weight: 700; color: var(--accent); font-size: .9rem; }
   
   /* ═══════════════════════════════════════════════════════════════
      REFERRALS
      ═══════════════════════════════════════════════════════════════ */
   .ref-stats-row {
     display: grid; grid-template-columns: repeat(3, 1fr);
     gap: 8px; margin-bottom: 14px;
   }
   .ref-stat {
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 16px 10px; text-align: center;
     transition: var(--t-base); margin-bottom: 4px;
   }
   .ref-stat:hover { border-color: var(--border-light); }
   .ref-stat.green .ref-stat-value { color: var(--accent); }
   .ref-stat-value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; }
   .ref-stat-label { font-size: .63rem; color: var(--text-muted); margin-top: 3px; letter-spacing: .03em; }
   
   .referral-link-box {
     display: flex; align-items: center; gap: 10px;
     background: rgba(255,255,255,.03); border: 1px solid var(--border-light);
     border-radius: var(--radius-sm); padding: 11px 14px; margin-top: 10px;
     transition: var(--t-base);
   }
   .referral-link-box:hover { border-color: var(--border-accent); }
   .referral-link-text {
     flex: 1; font-size: .77rem; color: var(--text-secondary);
     overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
     font-family: var(--font-mono);
   }
   
   .ref-code-box { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
   .ref-code-label { font-size: .78rem; color: var(--text-muted); }
   .ref-code {
     font-family: var(--font-mono); font-weight: 700;
     color: var(--accent); letter-spacing: .12em; font-size: .95rem;
     text-shadow: 0 0 12px rgba(0,229,168,.3);
   }
   .ref-copy-code-btn { margin-left: auto; }
   
   .tier-list { display: flex; flex-direction: column; gap: 8px; }
   .tier-item {
     display: flex; align-items: center; gap: 13px;
     background: rgba(255,255,255,.025); border-radius: var(--radius-sm); padding: 13px;
     transition: var(--t-fast);
   }
   .tier-item:hover { background: rgba(255,255,255,.04); }
   .tier-badge {
     width: 34px; height: 34px; border-radius: var(--radius-sm);
     display: flex; align-items: center; justify-content: center;
     font-size: .72rem; font-weight: 800; flex-shrink: 0;
   }
   .tier-badge.t1 { background: rgba(0,229,168,.15); color: var(--accent); }
   .tier-badge.t2 { background: var(--blue-dim); color: var(--blue); }
   .tier-badge.t3 { background: var(--orange-dim); color: var(--orange); }
   .tier-badge.t4 { background: rgba(255,77,106,.12); color: var(--danger); }
   .tier-badge.t5 { background: rgba(255,255,255,.05); color: var(--text-muted); }
   .tier-info { flex: 1; }
   .tier-name { font-size: .85rem; font-weight: 600; }
   .tier-cond { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
   .tier-reward { font-family: var(--font-mono); font-size: .84rem; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
   .tier-reward.green { color: var(--accent); }
   
   .info-note {
     background: rgba(255,255,255,.03); border: 1px solid var(--border);
     border-radius: var(--radius-sm); padding: 11px 13px;
     font-size: .78rem; color: var(--text-muted); margin-top: 12px;
   }
   
   /* Enter referral code section */
   .enter-ref-label { font-size: .83rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
   .enter-ref-row { display: flex; gap: 8px; align-items: center; }
   .enter-ref-input { flex: 1; letter-spacing: 2px; font-weight: 600; font-family: var(--font-mono); }
   .ref-already-box {
     display: flex; align-items: center; gap: 7px;
     font-size: .84rem; color: var(--accent);
     background: var(--accent-dim);
     border: 1px solid var(--border-accent);
     border-radius: var(--radius-sm); padding: 9px 13px;
   }
   .ref-already-val { font-weight: 700; font-family: var(--font-mono); letter-spacing: 1px; margin-left: 4px; }
   
   /* ═══════════════════════════════════════════════════════════════
      MARKET
      ═══════════════════════════════════════════════════════════════ */
   .market-highlight-card {
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 20px;
     margin-bottom: 15px;
   }
   .mh-row { display: flex; align-items: stretch; }
   .mh-item { flex: 1; }
   .mh-divider { width: 1px; background: var(--border); margin: 0 18px; }
   .mh-label { font-size: .7rem; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
   .mh-value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; }
   .mh-value.green { color: var(--accent); }
   .mh-value.accent { color: var(--gold); }
   .mh-formula {
     margin-top: 16px; padding: 11px;
     background: rgba(255,255,255,.03);
     border: 1px solid var(--border); border-radius: var(--radius-sm);
     text-align: center;
   }
   .mh-formula code { font-family: var(--font-mono); font-size: .8rem; color: var(--text-secondary); }
   .my-market-row { display: flex; align-items: center; gap: 22px; }
   .my-market-row > div { flex: 1; }
   
   /* ═══════════════════════════════════════════════════════════════
      WITHDRAW
      ═══════════════════════════════════════════════════════════════ */
   .balance-display {
     display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px;
   }
   .bd-label { font-size: .82rem; color: var(--text-secondary); }
   .bd-amount {
     font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
     color: var(--accent); text-shadow: 0 0 20px rgba(0,229,168,.25);
   }
   .bd-pts { font-size: .77rem; color: var(--text-muted); margin-bottom: 4px; }
   
   .saved-payment-box {
     background: rgba(255,255,255,.025); border-radius: var(--radius-md);
     border: 1px solid var(--border); padding: 14px;
     margin-bottom: 15px;
   }
   .sp-empty { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .85rem; }
   .sp-empty svg { flex-shrink: 0; }
   
   .wi-item {
     display: flex; align-items: center; gap: 13px;
     background: rgba(255,255,255,.025); border-radius: var(--radius-md);
     padding: 13px; margin-bottom: 12px; transition: var(--t-fast);
   }
   .wi-item:hover { background: rgba(255,255,255,.04); }
   .wi-icon {
     width: 38px; height: 38px; border-radius: var(--radius-sm);
     background: var(--bg-card); display: flex; align-items: center;
     justify-content: center; flex-shrink: 0;
   }
   .wi-info { flex: 1; }
   .wi-method { font-weight: 600; font-size: .88rem; }
   .wi-date { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
   .wi-amount { font-family: var(--font-mono); font-weight: 700; }
   
   /* ═══════════════════════════════════════════════════════════════
      SETTINGS
      ═══════════════════════════════════════════════════════════════ */
   .settings-section { margin-bottom: 26px; }
   .settings-section-title {
     font-size: .7rem; font-weight: 700; color: var(--text-muted);
     text-transform: uppercase; letter-spacing: .10em;
     margin-bottom: 8px; padding-left: 2px;
   }
   .settings-item {
     display: flex; align-items: center; justify-content: space-between;
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 14px 16px;
     margin-bottom: 6px; cursor: pointer; transition: var(--t-base);
   }
   .settings-item:hover { border-color: var(--border-light); background: var(--bg-elevated); }
   .settings-item-left { display: flex; align-items: center; gap: 12px; color: var(--text-secondary); }
   .settings-item-title { font-weight: 500; font-size: .9rem; color: var(--text-primary); }
   .settings-item-desc { font-size: .74rem; color: var(--text-secondary); margin-top: 1px; }
   
   /* Toggle switch */
   .toggle {
     width: 44px; height: 24px; border-radius: 99px;
     background: rgba(255,255,255,.1); position: relative;
     transition: background var(--t-base); cursor: pointer; flex-shrink: 0;
   }
   .toggle.on { background: var(--accent); box-shadow: 0 0 10px rgba(0,229,168,.3); }
   .toggle::after {
     content: ''; position: absolute; top: 3px; left: 3px;
     width: 18px; height: 18px; border-radius: 50%;
     background: #fff; transition: transform var(--t-base);
     box-shadow: 0 1px 4px rgba(0,0,0,.4);
   }
   .toggle.on::after { transform: translateX(20px); }
   
   .lang-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
   .lang-option {
     display: flex; align-items: center; gap: 9px;
     background: rgba(255,255,255,.03); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 11px 15px;
     cursor: pointer; transition: var(--t-base);
   }
   .lang-option:hover { border-color: var(--border-light); background: rgba(255,255,255,.05); }
   .lang-option.selected {
     border-color: var(--accent); background: var(--accent-dim); color: var(--accent);
   }
   .lang-flag { font-size: 1.3rem; }
   .lang-name { font-size: .88rem; font-weight: 600; }
   
   /* Payment tabs in settings */
   .payment-tabs {
     display: flex; gap: 4px; background: rgba(255,255,255,.03);
     border: 1px solid var(--border); border-radius: var(--radius-sm);
     padding: 4px; margin-bottom: 16px;
   }
   .pay-tab {
     flex: 1; padding: 8px; border-radius: 5px;
     font-size: .84rem; font-weight: 600;
     color: var(--text-muted); transition: var(--t-base); cursor: pointer;
   }
   .pay-tab.active { background: rgba(255,255,255,.06); color: var(--text-primary); }
   .pay-form { display: flex; flex-direction: column; gap: 10px; }
   .pay-form:not(.active) { display: none; }
   
   /* ═══════════════════════════════════════════════════════════════
      SUPPORT / TICKETS
      ═══════════════════════════════════════════════════════════════ */
   .ticket-item {
     background: rgba(255,255,255,.025); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px;
     transition: var(--t-fast);
   }
   .ticket-item:hover { border-color: var(--border-light); }
   .ticket-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
   .ticket-subject { font-weight: 600; font-size: .9rem; }
   .ticket-date { font-size: .72rem; color: var(--text-muted); }
   .ticket-reply {
     margin-top: 10px; padding: 10px 13px;
     background: var(--accent-dim); border-radius: var(--radius-sm);
     border-left: 2px solid var(--accent);
   }
   .ticket-message-preview { font-size: .82rem; color: var(--text-secondary); margin-top: 4px; }
   
   .faq-item { margin-bottom: 6px; }
   .faq-question {
     background: rgba(255,255,255,.03); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 14px 16px;
     cursor: pointer; font-weight: 600; font-size: .88rem;
     display: flex; align-items: center; justify-content: space-between;
     transition: var(--t-base);
   }
   .faq-question:hover { border-color: var(--border-light); background: rgba(255,255,255,.05); }
   .faq-answer {
     background: var(--bg-card); border: 1px solid var(--border); border-top: none;
     border-radius: 0 0 var(--radius-md) var(--radius-md);
     padding: 13px 16px; font-size: .85rem; color: var(--text-secondary);
     display: none; line-height: 1.6;
   }
   .faq-answer.open { display: block; animation: fadeIn .2s ease; }
   
   /* ═══════════════════════════════════════════════════════════════
      ANNOUNCEMENTS
      ═══════════════════════════════════════════════════════════════ */
   .announcement {
     background: linear-gradient(135deg, rgba(77,158,255,.07), rgba(77,158,255,.03));
     border: 1px solid rgba(77,158,255,.25);
     border-radius: var(--radius-md); padding: 14px 16px;
     margin-bottom: 10px; font-size: .86rem;
     display: flex; align-items: flex-start; gap: 11px;
   }
   .announcement svg { flex-shrink: 0; color: var(--blue); margin-top: 1px; }
   
   /* ═══════════════════════════════════════════════════════════════
      BADGE
      ═══════════════════════════════════════════════════════════════ */
   .badge {
     padding: 3px 9px; border-radius: 99px;
     font-size: .67rem; font-weight: 700;
     text-transform: uppercase; letter-spacing: .05em;
     font-family: var(--font-display);
   }
   .badge-pending  { background: var(--warning-dim); color: var(--warning); border: 1px solid rgba(255,179,71,.2); }
   .badge-approved { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border-accent); }
   .badge-rejected { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(255,77,106,.2); }
   .badge-open     { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(77,158,255,.2); }
   .badge-closed   { background: rgba(255,255,255,.04); color: var(--text-muted); border: 1px solid var(--border); }
   
   /* ═══════════════════════════════════════════════════════════════
      SKELETON
      ═══════════════════════════════════════════════════════════════ */
   .skeleton-card {
     background: linear-gradient(90deg, var(--bg-elevated) 25%, rgba(255,255,255,.04) 50%, var(--bg-elevated) 75%);
     background-size: 200% 100%;
     animation: skeletonShimmer 1.6s ease infinite;
     border-radius: var(--radius-lg); height: 80px; margin-bottom: 10px;
   }
   @keyframes skeletonShimmer {
     0%   { background-position: 200% 0; }
     100% { background-position: -200% 0; }
   }
   
   /* ═══════════════════════════════════════════════════════════════
      TOAST
      ═══════════════════════════════════════════════════════════════ */
   #toast-container {
     position: fixed; top: 74px; right: 14px; z-index: 9999;
     display: flex; flex-direction: column; gap: 7px; pointer-events: none;
   }
   .toast {
     display: flex; align-items: center; gap: 10px;
     background: var(--bg-elevated);
     border: 1px solid var(--border-light);
     border-radius: var(--radius-md); padding: 12px 16px;
     box-shadow: var(--shadow-lg); pointer-events: all;
     font-size: .85rem; max-width: 310px;
     animation: toastIn .3s var(--ease-out) both;
     backdrop-filter: blur(12px);
   }
   .toast.removing { animation: toastOut .25s var(--ease-smooth) forwards; }
   .toast.success { border-color: rgba(0,229,168,.3); }
   .toast.success .t-icon { color: var(--accent); }
   .toast.error   { border-color: rgba(255,77,106,.3); }
   .toast.error .t-icon { color: var(--danger); }
   .toast.warning { border-color: rgba(255,179,71,.3); }
   .toast.warning .t-icon { color: var(--warning); }
   .toast.info    { border-color: rgba(77,158,255,.3); }
   .toast.info .t-icon { color: var(--blue); }
   .t-icon { font-size: .9rem; flex-shrink: 0; }
   
   /* ═══════════════════════════════════════════════════════════════
      EMPTY STATE
      ═══════════════════════════════════════════════════════════════ */
   .empty-state {
     text-align: center; padding: 40px 20px;
     display: flex; flex-direction: column; align-items: center; gap: 12px;
   }
   .empty-state svg { color: var(--text-muted); opacity: .5; }
   .empty-title { font-size: .9rem; font-weight: 600; color: var(--text-muted); }
   
   /* ═══════════════════════════════════════════════════════════════
      SPINNER
      ═══════════════════════════════════════════════════════════════ */
   .spinner {
     width: 18px; height: 18px;
     border: 2px solid rgba(255,255,255,.12);
     border-top-color: currentColor;
     border-radius: 50%; animation: spin .5s linear infinite; display: inline-block;
   }
   
   /* ═══════════════════════════════════════════════════════════════
      TASKS
      ═══════════════════════════════════════════════════════════════ */
   .task-card {
     display: flex; align-items: center; gap: 14px;
     background: var(--bg-card); border: 1px solid var(--border);
     border-radius: var(--radius-lg); padding: 16px;
     margin-bottom: 10px; transition: var(--t-base);
     cursor: pointer;
   }
   .task-card:hover { border-color: var(--border-light); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,.4); }
   .task-card.task-done { opacity: .55; }
   .task-icon-wrap {
     width: 52px; height: 52px; border-radius: var(--radius-md);
     display: flex; align-items: center; justify-content: center; flex-shrink: 0;
   }
   .task-body { flex: 1; min-width: 0; }
   .task-title { font-weight: 700; font-size: .92rem; margin-bottom: 2px; font-family: var(--font-display); letter-spacing: -.02em; }
   .task-desc { font-size: .79rem; color: var(--text-secondary); }
   .task-progress-wrap { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
   .task-progress-track { flex: 1; height: 4px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
   .task-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-soft), var(--accent)); border-radius: 99px; transition: width .5s var(--ease-out); }
   .task-progress-text { font-size: .7rem; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; }
   .task-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
   .task-reward { font-family: var(--font-mono); font-weight: 700; font-size: .9rem; color: var(--accent); }
   .task-status-label { font-size: .73rem; color: var(--text-muted); margin-top: 5px; }
   
   /* ═══════════════════════════════════════════════════════════════
      SAVED PAYMENT
      ═══════════════════════════════════════════════════════════════ */
   .saved-pm-item {
     display: flex; align-items: center; gap: 11px;
     background: rgba(255,255,255,.025); border: 1px solid var(--border);
     border-radius: var(--radius-md); padding: 13px; margin-bottom: 8px;
     transition: var(--t-fast);
   }
   .saved-pm-item:hover { border-color: var(--border-light); }
   
   /* ═══════════════════════════════════════════════════════════════
      UTILITY
      ═══════════════════════════════════════════════════════════════ */
   .hidden { display: none !important; }
   .text-success, .green { color: var(--accent); }
   .text-warning { color: var(--warning); }
   .text-danger { color: var(--danger); }
   .text-blue { color: var(--blue); }
   .text-muted { color: var(--text-muted); }
   .text-gold { color: var(--gold); }
   
   /* ═══════════════════════════════════════════════════════════════
      NOTIFICATION PERMISSION BANNER
      ═══════════════════════════════════════════════════════════════ */
   #notif-permission-banner {
     position: fixed; bottom: 80px; left: 50%;
     transform: translateX(-50%);
     width: calc(100% - 32px); max-width: 480px; z-index: 9999;
     animation: slideUpBanner .35s var(--ease-out);
   }
   .notif-banner {
     background: var(--bg-card); border: 1px solid var(--border-accent);
     border-radius: var(--radius-md); padding: 15px 18px;
     display: flex; flex-direction: column; gap: 12px;
     box-shadow: var(--shadow-lg);
   }
   .notif-banner-text {
     display: flex; align-items: center; gap: 10px;
     font-size: .9rem; color: var(--text-primary); line-height: 1.4;
   }
   .notif-banner-text svg { flex-shrink: 0; color: var(--accent); }
   .notif-banner-btns { display: flex; gap: 8px; justify-content: flex-end; }
   
   /* ═══════════════════════════════════════════════════════════════
      ANIMATIONS
      ═══════════════════════════════════════════════════════════════ */
   @keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
   @keyframes fadeUp    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
   @keyframes toastIn   { from { opacity: 0; transform: translateX(110%) scale(.9); } to { opacity: 1; transform: none; } }
   @keyframes toastOut  { to { opacity: 0; transform: translateX(110%); max-height: 0; margin: 0; padding: 0; } }
   @keyframes spin      { to { transform: rotate(360deg); } }
   @keyframes pulse     { 0%,100% { opacity: .35; } 50% { opacity: .65; } }
   @keyframes slideUpBanner {
     from { opacity: 0; transform: translateX(-50%) translateY(20px); }
     to   { opacity: 1; transform: translateX(-50%) translateY(0); }
   }
   
   /* ═══════════════════════════════════════════════════════════════
      DESKTOP — COLLAPSIBLE SIDEBAR
      ═══════════════════════════════════════════════════════════════ */
   @media (min-width: 768px) {
   
     #bottom-nav { display: none; }
     #menu-btn { display: none; }
     #sidebar-overlay { display: none; }
   
     /* Sidebar her zaman görünür, transform iptal */
     #sidebar {
       transform: none !important;
       transition: width var(--t-slow);
     }
   
     /* Toggle butonu görünür */
     .sidebar-toggle-btn { display: flex; }
   
     /* Main: sidebar genişliği kadar sol padding */
     #main {
       padding-bottom: 0;
       padding-left: var(--sidebar-w);
       transition: padding-left var(--t-slow);
     }
   
     /* ─── Collapsed state ─── */
     body.sidebar-collapsed #sidebar { width: var(--sidebar-w-mini); }
     body.sidebar-collapsed #main    { padding-left: var(--sidebar-w-mini); }
   
     /* Metin etiketleri gizlenir */
     body.sidebar-collapsed #sidebar .nav-item span,
     body.sidebar-collapsed #sidebar .sidebar-header-text {
       opacity: 0; max-width: 0; overflow: hidden; pointer-events: none;
     }
   
     /* İkonlar tam merkeze — simetrik padding */
     body.sidebar-collapsed #sidebar .nav-item {
       justify-content: center;
       padding: 11px 0;
       gap: 0;
     }
   
     /* Header da ortaya */
     body.sidebar-collapsed #sidebar .sidebar-header {
       justify-content: center;
       padding-left: 0; padding-right: 0; gap: 0;
     }
   
     /* Toggle butonu ortala */
     body.sidebar-collapsed #sidebar .sidebar-toggle-btn {
       margin-left: 0;
     }
   
     /* Hover tooltip — ikonun sağında isim */
     body.sidebar-collapsed #sidebar .nav-item { position: relative; }
     body.sidebar-collapsed #sidebar .nav-item:hover::after {
       content: attr(data-label);
       position: absolute; left: calc(100% + 10px); top: 50%;
       transform: translateY(-50%);
       background: var(--bg-elevated); border: 1px solid var(--border-light);
       color: var(--text-primary); padding: 6px 12px;
       border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500;
       white-space: nowrap; pointer-events: none;
       box-shadow: var(--shadow-md); z-index: 999;
       font-family: var(--font-main);
     }
   
     .page {
       padding: 30px 36px;
       max-width: 880px;
       margin: 0 auto;
     }
     .hero-title { font-size: 2.7rem; }
     .games-grid { grid-template-columns: repeat(2, 1fr); }
     .stats-row { gap: 12px; }
   }
   
   @media (min-width: 1200px) {
     .page { max-width: 1060px; }
     .games-grid { grid-template-columns: repeat(3, 1fr); }
   }
   
   @media (min-width: 1440px) {
     .page { max-width: 1220px; }
     .games-grid { grid-template-columns: repeat(4, 1fr); }
   }
   
   /* ═══════════════════════════════════════════════════════════════
      MOBILE FINE-TUNING
      ═══════════════════════════════════════════════════════════════ */
   @media (max-width: 380px) {
     .auth-box { padding: 28px 20px 24px; }
     .stats-row { gap: 6px; }
     .stat-pill-value { font-size: .85rem; }
     .quick-games { gap: 6px; }
   }
   
   /* Safe area support for notched devices */
   @supports (padding: max(0px)) {
     #bottom-nav {
       padding-bottom: max(env(safe-area-inset-bottom), 6px);
       height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
     }
     #main { padding-bottom: calc(var(--nav-h) + px + env(safe-area-inset-bottom, 0px)); }
   }