/* ===== RESET & VARIABEL ===== */
    * { margin:0; padding:0; box-sizing:border-box; }
    html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
    :root {
      --bg-body:#F0F4FA;
      --bg-card:#FFFFFF;
      --bg-card-alt:#F5F8FC;
      --bg-card-hover:#EBF0F6;
      --text-primary:#1A2634;
      --text-secondary:#4A5A6E;
      --border-subtle:rgba(43,127,255,0.12);
      --blue-primary:#2B7FFF;
      --blue-bright:#4A90E2;
      --blue-glow:rgba(43,127,255,0.18);
      --radius:20px;
      --radius-sm:12px;
      --radius-full:9999px;
      --header-height:60px;
      --nav-height:60px;
      --safe-bottom:env(safe-area-inset-bottom,0px);
      --max-width:1100px;
      --shadow-card:0 8px 30px rgba(26,38,52,0.08),0 2px 8px rgba(26,38,52,0.04);
      --shadow-card-hover:0 12px 40px rgba(26,38,52,0.12),0 4px 12px rgba(26,38,52,0.06);
      --shadow-card-lg:0 20px 60px rgba(26,38,52,0.10),0 8px 24px rgba(26,38,52,0.06);
      --transition:0.3s cubic-bezier(0.22,1,0.36,1);
    }
    body.light {
      --bg-body:#F5F8FF;
      --bg-card:#FFFFFF;
      --bg-card-alt:#F0F4FA;
      --bg-card-hover:#E8EEF8;
      --text-primary:#0F1A2E;
      --text-secondary:#3B4E66;
      --border-subtle:rgba(43,127,255,0.10);
      --shadow-card:0 4px 20px rgba(26,38,52,0.06),0 1px 4px rgba(26,38,52,0.03);
      --shadow-card-hover:0 8px 30px rgba(26,38,52,0.10),0 2px 8px rgba(26,38,52,0.05);
      --shadow-card-lg:0 16px 48px rgba(26,38,52,0.08),0 4px 16px rgba(26,38,52,0.04);
    }
    /* Tema Malam — dipicu tombol bulan/matahari di header Chat Public.
       DIBATASI cuma di dalam #chatPublicOverlay saja (bukan body), jadi
       Beranda/menu lain TIDAK ikut berubah warna pas tema ini dipakai. */
    #chatPublicOverlay.dark {
      --bg-body:#0B1220;
      --bg-card:#141B2A;
      --bg-card-alt:#1B2436;
      --bg-card-hover:#232D42;
      --text-primary:#EAF0FA;
      --text-secondary:#93A3BC;
      --border-subtle:rgba(255,255,255,0.09);
      --blue-glow:rgba(43,127,255,0.30);
      --shadow-card:0 8px 30px rgba(0,0,0,0.35),0 2px 8px rgba(0,0,0,0.25);
      --shadow-card-hover:0 12px 40px rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.28);
      --shadow-card-lg:0 20px 60px rgba(0,0,0,0.45),0 8px 24px rgba(0,0,0,0.3);
    }
    body { font-family:'Inter',sans-serif; background:var(--bg-body); color:var(--text-primary); transition:background var(--transition),color var(--transition); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; margin:0; }
    a,button { font-family:inherit; color:inherit; text-decoration:none; cursor:pointer; border:none; background:none; outline:none; }
    .hidden { display:none !important; }
    body.locked { overflow:hidden; height:100%; overscroll-behavior:none; }
    html { scroll-behavior:smooth; }
    html.locked { overflow:hidden; height:100%; overscroll-behavior:none; }
    .text-secondary { color:var(--text-secondary); }
    .text-center { text-align:center; }

    /* ===== HILANGKAN EFEK BIRU KOTAK SAAT DITEKAN/FOKUS ===== */
    *:focus, *:active, *:focus-visible {
      outline: none !important;
      box-shadow: none !important;
    }
    button:focus, button:active,
    input:focus, input:active,
    select:focus, select:active,
    textarea:focus, textarea:active,
    a:focus, a:active,
    [tabindex]:focus, [tabindex]:active {
      outline: none !important;
      box-shadow: none !important;
    }
    input:focus, textarea:focus, select:focus {
      border-color: var(--border-subtle) !important;
    }
    * {
      -webkit-tap-highlight-color: transparent;
    }

    /* ===== PERBAIKAN NAVIGASI AGAR TIDAK GOYANG ===== */
    .header, .bottom-nav {
      backface-visibility: hidden;
      transform: translateZ(0);
      will-change: transform;
      margin:0;
    }

    /* ===== LOADING ===== */
    #loadingOverlay { position:fixed; inset:0; z-index:99999; background:rgba(240,244,250,0.85); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding-top:24px; }
    #loadingOverlay.show { display:flex; }
    #loadingOverlay .loading-logo { font-size:64px; background:linear-gradient(145deg,#2B7FFF,#4A90E2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:floatLogo 1.8s ease-in-out infinite; filter:drop-shadow(0 0 30px rgba(43,127,255,0.30)); }
    #loadingOverlay .loading-logo .gmail-envelope { position:relative; display:inline-block; }
    #loadingOverlay .loading-logo .gmail-envelope i { font-size:64px; -webkit-text-fill-color:initial; color:#fff; background:linear-gradient(145deg,#2B7FFF,#4A90E2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    #loadingOverlay .loading-logo .gmail-envelope .envelope-dot { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; color:#ffffff; font-weight:900; -webkit-text-fill-color:#ffffff; }
    #loadingOverlay .loading-text { color:var(--text-primary); font-size:16px; font-weight:600; letter-spacing:0.5px; opacity:0.8; }
    @keyframes floatLogo { 0%{transform:translateY(0px) scale(1);} 50%{transform:translateY(-12px) scale(1.04);} 100%{transform:translateY(0px) scale(1);} }

    /* ===== MUSIK ===== */
    #musicToggle { position:fixed; bottom:100px; right:20px; z-index:999; width:48px; height:48px; border-radius:50%; background:var(--blue-primary); color:#fff; font-size:20px; box-shadow:0 4px 20px var(--blue-glow); display:none; align-items:center; justify-content:center; transition:box-shadow var(--transition), transform 0.15s; cursor:grab; border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(4px); touch-action:none; user-select:none; overflow:visible; }
    #musicToggle:active { cursor:grabbing; }
    #musicToggle:hover { box-shadow:0 6px 30px var(--blue-glow); }
    #musicToggle .note-fx { position:absolute; top:-2px; left:50%; font-size:12px; color:#fff; opacity:0; pointer-events:none; }
    #musicToggle.playing .note-fx { animation:noteFloat 2.4s ease-in infinite; }
    #musicToggle.playing .note-fx.n2 { animation-delay:1.2s; left:60%; font-size:10px; }
    @keyframes noteFloat {
      0% { opacity:0; transform:translate(-50%,0) scale(0.8); }
      15% { opacity:0.9; }
      100% { opacity:0; transform:translate(-50%,-34px) scale(1.05); }
    }

    /* ===== AUTH ===== */
    #authPage { min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; background:var(--bg-body); position:relative; overflow:hidden; }
    #authPage::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 25%, rgba(43,127,255,0.12), transparent 55%), radial-gradient(circle at 85% 70%, rgba(74,144,226,0.10), transparent 50%), radial-gradient(circle at 45% 85%, rgba(43,127,255,0.08), transparent 40%), radial-gradient(circle at 70% 15%, rgba(74,144,226,0.08), transparent 35%), radial-gradient(circle at 10% 80%, rgba(43,127,255,0.06), transparent 30%); background-size:250% 250%; animation:authBgAnim 18s ease-in-out infinite alternate; pointer-events:none; z-index:0; }
    @keyframes authBgAnim { 0%{background-position:0% 0%; transform:scale(1) rotate(0deg);} 33%{background-position:60% 40%; transform:scale(1.04) rotate(1.5deg);} 66%{background-position:20% 80%; transform:scale(0.98) rotate(-1deg);} 100%{background-position:80% 20%; transform:scale(1.02) rotate(0.5deg);} }
    .auth-particle { position:absolute; border-radius:50%; pointer-events:none; z-index:0; opacity:0.30; background:radial-gradient(circle at 30% 30%, rgba(43,127,255,0.20), transparent 70%); filter:blur(2px); animation:floatParticle linear infinite alternate; }
    .auth-particle:nth-child(1){width:200px;height:200px;top:5%;left:-5%;animation-duration:14s;}
    .auth-particle:nth-child(2){width:280px;height:280px;bottom:0;right:-8%;animation-duration:18s;animation-delay:2s;}
    .auth-particle:nth-child(3){width:160px;height:160px;top:40%;left:60%;animation-duration:12s;animation-delay:4s;}
    .auth-particle:nth-child(4){width:120px;height:120px;top:10%;right:15%;animation-duration:16s;animation-delay:1s;}
    .auth-particle:nth-child(5){width:220px;height:220px;bottom:20%;left:10%;animation-duration:20s;animation-delay:3s;}
    .auth-particle:nth-child(6){width:100px;height:100px;top:60%;right:5%;animation-duration:13s;animation-delay:5s;}
    @keyframes floatParticle { 0%{transform:translate(0,0) scale(1); opacity:0.15;} 33%{transform:translate(30px,-40px) scale(1.15); opacity:0.30;} 66%{transform:translate(-20px,30px) scale(0.9); opacity:0.20;} 100%{transform:translate(15px,-15px) scale(1.05); opacity:0.25;} }
    .auth-stars { position:absolute; inset:0; z-index:0; pointer-events:none; }
    .auth-stars::before { content:''; position:absolute; inset:0; background-image:radial-gradient(2px 2px at 10% 20%, rgba(43,127,255,0.25), transparent), radial-gradient(2px 2px at 30% 65%, rgba(43,127,255,0.20), transparent), radial-gradient(1px 1px at 50% 10%, rgba(43,127,255,0.30), transparent), radial-gradient(2px 2px at 70% 80%, rgba(43,127,255,0.20), transparent), radial-gradient(1px 1px at 90% 40%, rgba(43,127,255,0.25), transparent), radial-gradient(2px 2px at 15% 90%, rgba(43,127,255,0.15), transparent), radial-gradient(1px 1px at 60% 45%, rgba(43,127,255,0.20), transparent), radial-gradient(1px 1px at 85% 10%, rgba(43,127,255,0.18), transparent), radial-gradient(2px 2px at 5% 55%, rgba(43,127,255,0.15), transparent), radial-gradient(1px 1px at 45% 75%, rgba(43,127,255,0.20), transparent), radial-gradient(2px 2px at 75% 55%, rgba(43,127,255,0.15), transparent), radial-gradient(1px 1px at 25% 30%, rgba(43,127,255,0.18), transparent), radial-gradient(1px 1px at 95% 70%, rgba(43,127,255,0.15), transparent), radial-gradient(2px 2px at 40% 5%, rgba(43,127,255,0.20), transparent); background-size:200px 200px; animation:twinkle 6s ease-in-out infinite alternate; }
    @keyframes twinkle { 0%{opacity:0.4;} 100%{opacity:1;} }
    .auth-box { background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:var(--radius); padding:32px 24px; max-width:400px; width:100%; border:1px solid rgba(43,127,255,0.15); box-shadow:0 20px 60px rgba(26,38,52,0.10),0 8px 24px rgba(26,38,52,0.06),0 0 60px rgba(43,127,255,0.06); position:relative; z-index:1; }
    body.light .auth-box { background:rgba(255,255,255,0.88); backdrop-filter:blur(16px); }
    .auth-logo { position:relative; z-index:1; margin-bottom:20px; text-align:center; display:flex; flex-direction:column; align-items:center; }
    .auth-logo .store-icon { font-size:72px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 30px var(--blue-glow)); line-height:1; }
    .auth-logo .store-text { font-size:28px; font-weight:900; letter-spacing:-0.5px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-top:-8px; text-shadow:0 0 40px var(--blue-glow); }
    .auth-box .auth-title { text-align:center; font-size:24px; font-weight:800; letter-spacing:-0.5px; margin-bottom:4px; color:var(--text-primary); }
    .auth-box .auth-title .highlight { background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .auth-box .auth-sub { text-align:center; color:var(--text-secondary); font-size:14px; margin-bottom:20px; }
    .auth-box .auth-tabs { display:flex; gap:0; margin-bottom:20px; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border-subtle); }
    .auth-box .auth-tabs button { flex:1; padding:10px; font-weight:700; font-size:14px; background:var(--bg-card-alt); color:var(--text-secondary); transition:all var(--transition); border:none; cursor:pointer; }
    .auth-box .auth-tabs button.active { background:var(--blue-primary); color:#fff; box-shadow:inset 0 0 20px rgba(43,127,255,0.30); }
    .auth-box .auth-tabs button:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
    .auth-box .auth-tabs button:last-child { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
    .auth-box .form-group { margin-bottom:14px; }
    .auth-box .form-group label { display:block; font-weight:600; font-size:13px; color:var(--text-secondary); margin-bottom:4px; }
    .auth-box .form-group input { width:100%; padding:12px 16px; background:var(--bg-card-alt); border:1.5px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-primary); font-size:15px; transition:border var(--transition), box-shadow var(--transition); }
    .auth-box .form-group input:focus { border-color:var(--blue-primary); box-shadow:0 0 0 3px var(--blue-glow); outline:none; }
    .auth-box .btn-auth { width:100%; padding:14px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); border:none; border-radius:var(--radius-sm); font-weight:700; font-size:16px; color:#fff; box-shadow:0 4px 30px var(--blue-glow); transition:all var(--transition); margin-top:4px; position:relative; }
    .auth-box .btn-auth:disabled { opacity:0.7; cursor:not-allowed; }
    .auth-box .btn-auth .spinner { display:none; width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top:2px solid #fff; border-radius:50%; animation:spin 0.8s linear infinite; margin-right:8px; }
    .auth-box .btn-auth.loading .spinner { display:inline-block; }
    .auth-box .btn-auth.loading .btn-text { display:none; }
    .auth-box .btn-auth:hover { transform:scale(1.02); }
    .auth-box .toggle-link { text-align:center; margin-top:14px; font-size:14px; color:var(--text-secondary); cursor:pointer; }
    .auth-box .toggle-link span { color:var(--blue-primary); font-weight:600; }
    .auth-box .auth-error { background:rgba(239,68,68,0.12); color:#EF4444; padding:10px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:12px; display:none; }
    .auth-box .auth-error.show { display:block; }

    /* ===== HEADER ===== */
    .header { position:relative; flex:0 0 auto; z-index:100; background:rgba(255,255,255,0.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border-subtle); height:var(--header-height); display:flex; align-items:center; padding:0 16px; transition:background var(--transition); box-shadow:0 2px 20px rgba(26,38,52,0.04); margin:0; }
    body.light .header { background:rgba(245,248,255,0.90); }
    .header-inner { max-width:var(--max-width); width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
    .logo { display:flex; align-items:center; gap:5px; font-weight:800; font-size:20px; letter-spacing:-0.5px; user-select:none; cursor:pointer; color:var(--text-primary); }
    .logo .gmail-mini { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; background:linear-gradient(145deg,#2B7FFF,#4A90E2); color:#fff; border-radius:4px; font-size:12px; box-shadow:0 2px 6px rgba(43,127,255,0.30); flex-shrink:0; }
    .logo .gmail-mini i { font-size:11px; color:#fff; }
    .logo .brand-text-sel { color:#000; font-weight:800; }
    .logo .brand-text-gmail { background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 0 30px var(--blue-glow); }
    .header-actions { display:flex; align-items:center; gap:8px; }
    .user-badge { display:flex; align-items:center; gap:9px; padding:5px 14px; border-radius:var(--radius-full); background:rgba(43,127,255,0.05); border:1px solid rgba(43,127,255,0.08); cursor:pointer; transition:all var(--transition); }
    .user-badge:hover { background:rgba(43,127,255,0.08); border-color:rgba(43,127,255,0.15); }
    .user-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; box-shadow:0 3px 10px rgba(26,38,52,0.18), 0 0 12px var(--blue-glow); overflow:hidden; flex-shrink:0; }
    .user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    /* Lapisan pembungkus konten avatar (emoji/foto) yang SELALU dipotong bulat sendiri,
       supaya tidak kena efek overflow:visible dari bingkai (.av-frame) di parent-nya.
       Ini juga mengatasi emoji yang dirender kegedean oleh Android/Chrome (font-boosting). */
    .avatar-fill { display:flex; align-items:center; justify-content:center; width:100%; height:100%; overflow:hidden; border-radius:50%; box-shadow:0 1px 5px rgba(26,38,52,0.30); }
    .avatar-fill img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
    /* Nama + centang verifikasi digabung dalam satu baris flex supaya
       posisinya rapi & seimbang, bukan cuma teks mentah + ikon yang "ditempel"
       manual (sebelumnya bikin nama kelihatan kegeser ke kiri dari centangnya). */
    .user-name { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--text-primary); max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .btn-inbox { font-size:20px; color:var(--text-secondary); padding:4px 8px; transition:color var(--transition); cursor:pointer; background:none; border:none; display:flex; align-items:center; justify-content:center; position:relative; }
    .btn-inbox:hover { color:var(--blue-bright); }
    .inbox-dot { position:absolute; top:0px; right:4px; width:10px; height:10px; background:#EF4444; border-radius:50%; border:2px solid var(--bg-body); display:none; z-index:5; }
    .inbox-dot.show { display:block; }

    /* ===== APP ===== */
    #appPage { display:none; height:100vh; height:100dvh; background:var(--bg-body); margin:0; flex-direction:column; overflow:hidden; }
    #appPage.show { display:flex; }
    #appScrollArea { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
    #authPage.hide { display:none; }

    /* ===== PAGES ===== */
    .page { display:none; animation:fadeUp 0.4s ease both; max-width:var(--max-width); margin:0 auto; padding:0 16px 16px; }
    .page.active { display:block; }
    @keyframes fadeUp { 0%{opacity:0; transform:translateY(16px);} 100%{opacity:1; transform:translateY(0);} }
    .page-title { font-size:22px; font-weight:800; letter-spacing:-0.5px; margin-bottom:4px; display:flex; align-items:center; gap:10px; color:var(--text-primary); }
    .page-title i { color:var(--blue-bright); }
    .page-sub { color:var(--text-secondary); font-size:14px; margin-bottom:16px; }

    /* ===== CARDS ===== */
    .card { background:var(--bg-card); border-radius:var(--radius); padding:18px 20px; border:1px solid var(--border-subtle); margin-bottom:16px; box-shadow:var(--shadow-card); transition:background var(--transition), border var(--transition), box-shadow var(--transition); }
    .card:hover { box-shadow:var(--shadow-card-hover); border-color:rgba(43,127,255,0.18); }
    .card-alt { background:var(--bg-card-alt); }
    .card-title { font-weight:700; font-size:16px; margin-bottom:8px; display:flex; align-items:center; gap:8px; color:var(--text-primary); }
    .card-title i { color:var(--blue-bright); }

    /* ===== SALDO CARD (BANNER) ===== */
    .saldo-card { background:linear-gradient(135deg,#1A4A7A,#2B7FFF); border-radius:var(--radius); padding:28px 24px 24px; margin-bottom:16px; box-shadow:0 8px 30px rgba(43,127,255,0.25),0 4px 16px rgba(43,127,255,0.10); position:relative; overflow:hidden; }
    .saldo-card::before { content:''; position:absolute; top:-50%; right:-20%; width:200px; height:200px; background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%); border-radius:50%; pointer-events:none; }
    .saldo-card .saldo-header { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
    .saldo-card .saldo-header .saldo-icon { font-size:28px; color:rgba(255,255,255,0.85); }
    .saldo-card .saldo-header .saldo-label { font-weight:700; font-size:18px; color:rgba(255,255,255,0.95); letter-spacing:0.3px; }
    .saldo-card .saldo-nominal { font-size:44px; font-weight:900; letter-spacing:-1px; color:#FFFFFF; margin:4px 0 16px; text-shadow:0 2px 20px rgba(0,0,0,0.10); display:flex; align-items:baseline; }
    .saldo-card .saldo-nominal .currency { font-size:32px; font-weight:800; color:rgba(255,255,255,0.85); margin-right:3px; }
    .saldo-card .saldo-actions { display:flex; gap:10px; flex-wrap:wrap; }
    .saldo-card .saldo-actions .btn { padding:10px 24px; border-radius:var(--radius-full); font-weight:700; font-size:14px; transition:all var(--transition); display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; background:rgba(255,255,255,0.20); color:#fff; backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,0.10); }
    .saldo-card .saldo-actions .btn:hover { background:rgba(255,255,255,0.35); transform:scale(1.03); }
    .saldo-card .saldo-actions .btn i { color:rgba(255,255,255,0.90); }

    /* ===== MENU GRID (8 menu bulat) ===== */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px 10px;
      margin: 18px 0 20px;
    }
    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.2s;
      background: none;
      border: none;
      padding: 0;
      font-family: inherit;
    }
    .menu-item:hover { transform:translateY(-3px); }
    .menu-item:active { transform:scale(0.94); }
    .menu-icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue-primary), var(--blue-bright));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #fff;
      box-shadow: 0 4px 16px var(--blue-glow);
      transition: box-shadow 0.3s, transform 0.2s;
      flex-shrink: 0;
    }
    .menu-item:hover .menu-icon { box-shadow:0 6px 24px var(--blue-glow); }
    .menu-label {
      margin-top: 6px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
      letter-spacing: 0.2px;
      line-height: 1.2;
    }
    @media(max-width:480px){
      .menu-grid { gap:10px 6px; }
      .menu-icon { width:50px; height:50px; font-size:20px; }
      .menu-label { font-size:10px; }
    }
    @media(max-width:380px){
      .menu-icon { width:44px; height:44px; font-size:18px; }
      .menu-label { font-size:9px; }
    }

    /* ===== STATUS CARD (grid 2x2, gaya kotak info seperti referensi) ===== */
    .status-card {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }
    .status-row {
      background: var(--bg-card);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-card);
      padding: 13px 14px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      min-height: 82px;
      justify-content: center;
      transition: box-shadow var(--transition), border var(--transition);
    }
    .status-row:hover { box-shadow:var(--shadow-card-hover); border-color:rgba(43,127,255,0.15); }
    .status-row .status-row-top { display:flex; align-items:center; gap:8px; }
    .status-row .status-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #fff;
      flex-shrink: 0;
    }
    .status-row .status-icon.ic-blue { background:linear-gradient(135deg,#2B7FFF,#4A90E2); box-shadow:0 3px 10px rgba(43,127,255,0.30); }
    .status-row .status-icon.ic-purple { background:linear-gradient(135deg,#8B5CF6,#A78BFA); box-shadow:0 3px 10px rgba(139,92,246,0.30); }
    .status-row .status-icon.ic-amber { background:linear-gradient(135deg,#F59E0B,#FBBF24); box-shadow:0 3px 10px rgba(245,158,11,0.30); }
    .status-row .status-icon.ic-green { background:linear-gradient(135deg,#22C55E,#4ADE80); box-shadow:0 3px 10px rgba(34,197,94,0.30); }
    .status-row .label { font-weight:700; font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .status-row .value { font-weight:800; color:var(--text-primary); font-size:14px; line-height:1.3; word-break:break-word; }
    .badge-status { font-size:11px; font-weight:700; padding:3px 12px; border-radius:var(--radius-full); text-transform:uppercase; letter-spacing:0.3px; flex-shrink:0; display:inline-block; }
    .badge-status.open { background:rgba(34,197,94,0.12); color:#22C55E; animation: statusGlowGreen 1.8s ease-in-out infinite; }
    .badge-status.close { background:rgba(239,68,68,0.12); color:#EF4444; animation: statusGlowRed 1.8s ease-in-out infinite; }
    .badge-status.diterima { background:rgba(34,197,94,0.12); color:#22C55E; }
    .badge-status.pending { background:rgba(245,158,11,0.12); color:#F59E0B; }
    .badge-status.ditolak { background:rgba(239,68,68,0.12); color:#EF4444; }
    /* Efek "cahaya kedip-kedip" cuma dipakai di badge OPEN/CLOSE (status
       penarikan & status storan) -- badge diterima/pending/ditolak di
       riwayat TIDAK ikut kedip, sengaja dipisah animasinya sendiri-sendiri. */
    @keyframes statusGlowGreen {
      0%, 100% { box-shadow:0 0 0 0 rgba(34,197,94,0.45); opacity:1; }
      50% { box-shadow:0 0 9px 2px rgba(34,197,94,0.55); opacity:0.72; }
    }
    @keyframes statusGlowRed {
      0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,0.45); opacity:1; }
      50% { box-shadow:0 0 9px 2px rgba(239,68,68,0.55); opacity:0.72; }
    }
    @media (prefers-reduced-motion: reduce) {
      .badge-status.open, .badge-status.close { animation:none; }
    }

    /* ===== STATS GRID ===== */
    .stats-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:12px 0 16px; }
    .stats-grid-3 .stat-item { background:var(--bg-card); border-radius:var(--radius-sm); padding:14px 8px; text-align:center; border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); transition:box-shadow var(--transition), border var(--transition); }
    .stats-grid-3 .stat-item:hover { box-shadow:var(--shadow-card-hover); border-color:rgba(43,127,255,0.15); }
    .stats-grid-3 .stat-item .num { font-size:24px; font-weight:800; color:var(--blue-bright); }
    .stats-grid-3 .stat-item .lbl { font-size:11px; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; margin-top:2px; }
    .stats-grid-3 .stat-item.pending .num { color:#F59E0B; }
    .stats-grid-3 .stat-item.diterima .num { color:#22C55E; }
    .stats-grid-3 .stat-item.total .num { color:var(--blue-bright); }

    /* ===== FORM ===== */
    .form-group { margin-bottom:14px; }
    .form-group label { display:block; font-weight:600; font-size:13px; color:var(--text-secondary); margin-bottom:4px; }
    .form-group input,.form-group textarea,.form-group select { width:100%; padding:12px 16px; background:var(--bg-card-alt); border:1.5px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-primary); font-size:15px; transition:border var(--transition), box-shadow var(--transition); font-family:'Inter',sans-serif; appearance:auto; }
    .form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--blue-primary); box-shadow:0 0 0 3px var(--blue-glow); outline:none; }
    .form-group textarea { min-height:120px; resize:vertical; }
    .form-group .helper { font-size:12px; color:var(--text-secondary); margin-top:4px; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    @media(max-width:480px){ .form-row{grid-template-columns:1fr;} }
    .btn-submit { width:100%; padding:14px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); border:none; border-radius:var(--radius-sm); font-weight:700; font-size:16px; color:#fff; box-shadow:0 4px 30px var(--blue-glow); transition:all var(--transition); display:flex; align-items:center; justify-content:center; gap:10px; margin-top:4px; position:relative; }
    .btn-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
    .btn-submit .spinner { display:none; width:20px; height:20px; border:2px solid rgba(255,255,255,0.3); border-top:2px solid #fff; border-radius:50%; animation:spin 0.8s linear infinite; margin-right:8px; }
    .btn-submit.loading .spinner { display:inline-block; }
    .btn-submit.loading .btn-text { display:none; }
    .btn-submit:hover:not(:disabled) { transform:scale(1.02); box-shadow:0 6px 40px var(--blue-glow); }
    .btn-submit:active:not(:disabled) { transform:scale(0.96); }

    /* ===== PRICE CARD ===== */
    .price-card { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; background:var(--bg-card); border-radius:var(--radius); padding:14px 20px; border:1px solid var(--border-subtle); margin-bottom:16px; box-shadow:var(--shadow-card); }
    .price-card .label { font-weight:600; font-size:15px; color:var(--text-secondary); }
    .price-card .value { font-weight:800; font-size:26px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .price-card .sub { font-size:12px; color:var(--text-secondary); width:100%; }

    /* ===== RIWAYAT TABS ===== */
    .riwayat-tabs { display:flex; gap:6px; margin-bottom:16px; background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:4px; border:1px solid var(--border-subtle); flex-wrap:wrap; }
    .riwayat-tabs .riwayat-tab { flex:1; padding:10px 12px; border-radius:var(--radius-sm); font-weight:700; font-size:13px; color:var(--text-secondary); background:transparent; border:1px solid transparent; cursor:pointer; transition:background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition); text-align:center; min-width:60px; }
    .riwayat-tabs .riwayat-tab.active { background:var(--bg-card); color:var(--text-primary); box-shadow:var(--shadow-card); border-color:var(--border-subtle); }
    .riwayat-tabs .riwayat-tab:hover { color:var(--text-primary); }
    .riwayat-tabs .riwayat-tab:active { opacity:0.7; }
    .riwayat-content { display:none; }
    .riwayat-content.active { display:block; }

    /* ===== PERBAIKAN LEADERBOARD TOMBOL ===== */
    #leaderboardTabs .riwayat-tab {
      pointer-events: auto !important;
      cursor: pointer !important;
      touch-action: manipulation !important;
      user-select: none;
      position: relative;
      z-index: 10;
    }
    #leaderboardTabs .riwayat-tab:active {
      opacity: 0.6;
    }
    #leaderboardTabs .riwayat-tab.active {
      background: var(--bg-card);
      color: var(--text-primary);
      box-shadow: var(--shadow-card);
      border-color: var(--border-subtle);
    }

    #page-rules.page { padding-top:14px; }
    #page-profil.page { padding-top:16px; padding-bottom:28px; }
    #page-beranda.page { padding-top:14px; }
    #page-riwayat.page { padding-top:14px; }
    #page-leaderboard.page { padding-top:14px; }
    .history-actions { display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
    .btn-danger { background:rgba(239,68,68,0.10); color:#EF4444; border:1px solid rgba(239,68,68,0.20); padding:8px 18px; border-radius:var(--radius-full); font-weight:700; font-size:13px; transition:all var(--transition); cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .btn-danger:hover { background:rgba(239,68,68,0.18); transform:scale(1.02); }
    .search-input { width:100%; padding:10px 16px; background:var(--bg-card-alt); border:1.5px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-primary); font-size:14px; transition:border var(--transition); margin-bottom:12px; }
    .search-input:focus { border-color:var(--blue-primary); box-shadow:0 0 0 3px var(--blue-glow); outline:none; }
    .history-item { background:var(--bg-card); border-radius:var(--radius-sm); padding:14px 16px; border:1px solid var(--border-subtle); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; box-shadow:var(--shadow-card); transition:box-shadow var(--transition), border var(--transition); }

    /* ===== KARTU STRUK PENARIKAN GLOBAL (tab Riwayat > Global) ===== */
    .receipt-card { background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border-subtle); margin-bottom:12px; box-shadow:var(--shadow-card); overflow:hidden; }
    .receipt-card .receipt-header { background:linear-gradient(135deg,#22C55E,#16A34A); padding:12px 16px; text-align:center; font-weight:800; font-size:15px; color:#fff; letter-spacing:0.2px; }
    .receipt-card .receipt-body { padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
    .receipt-card .receipt-row { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; }
    .receipt-card .receipt-row .r-icon { flex-shrink:0; width:20px; text-align:center; }
    .receipt-card .receipt-row .r-label { flex-shrink:0; width:104px; color:var(--text-secondary); font-weight:600; }
    .receipt-card .receipt-row .r-sep { flex-shrink:0; color:var(--text-secondary); }
    .receipt-card .receipt-row .r-value { color:var(--text-primary); font-weight:700; word-break:break-word; }
    .receipt-card .receipt-row .r-value.r-nominal { color:#22C55E; }
    .receipt-card .receipt-row .r-value.r-status { color:#22C55E; }
    .history-item:hover { box-shadow:var(--shadow-card-hover); border-color:rgba(43,127,255,0.12); }
    .history-item .hi-left { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
    .history-item .hi-id { font-weight:600; font-size:14px; word-break:break-all; color:var(--blue-bright); }
    .history-item .hi-date { font-size:12px; color:var(--text-secondary); }
    .history-item .hi-email { font-size:12px; color:var(--text-secondary); font-style:italic; }
    .history-item .hi-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .empty-state { text-align:center; padding:40px 16px; color:var(--text-secondary); }
    .empty-state .empty-icon { font-size:48px; opacity:0.30; margin-bottom:12px; color:var(--text-secondary); }
    .load-more-btn { display:block; width:100%; padding:12px; background:var(--bg-card-alt); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-secondary); font-weight:700; font-size:14px; cursor:pointer; transition:all var(--transition); margin-top:8px; text-align:center; }
    .load-more-btn:hover { border-color:var(--blue-primary); color:var(--text-primary); background:var(--bg-card); }

    /* ===== RULES ===== */
    .rules-content { font-size:14px; line-height:1.7; color:var(--text-primary); }
    .rules-content .section-title { font-weight:800; font-size:18px; margin:16px 0 8px; color:var(--blue-bright); display:block; }
    .rules-content .rule-box { background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:12px 16px; margin:8px 0; border-left:3px solid var(--blue-primary); }
    .rules-content .danger { color:#EF4444; }
    .rules-content .success { color:#22C55E; }
    .rules-content ul,.rules-content ol { padding-left:20px; margin:6px 0; }
    .rules-content li { margin-bottom:4px; }
    .btn-wa-channel { display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:12px 24px; border-radius:var(--radius-full); font-weight:700; font-size:15px; transition:all var(--transition); margin-top:12px; border:none; cursor:pointer; }
    .btn-wa-channel:hover { transform:scale(1.03); box-shadow:0 4px 20px rgba(37,211,102,0.30); }
    .btn-wa-masing { display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:10px 20px; border-radius:var(--radius-full); font-weight:700; font-size:14px; transition:all var(--transition); border:none; cursor:pointer; width:100%; justify-content:center; margin-bottom:12px; text-decoration:none; }
    .btn-wa-masing:hover { transform:scale(1.02); box-shadow:0 4px 20px rgba(37,211,102,0.30); }
    .card-cs { cursor:pointer; transition:all var(--transition); }
    .card-cs:hover { border-color:var(--blue-primary); background:var(--bg-card-alt); }

    /* ===== LEADERBOARD (PODIUM + DAFTAR) - FIX SOLID & GELAP ===== */
    .lb-container {
      background: var(--bg-card);
      border-radius: var(--radius);
      padding: 16px 0;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-card);
      min-height: 200px;
      transition: none;
    }

    /* Podium */
    .podium-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 12px;
      padding: 14px 12px 12px;
      flex-wrap: wrap;
    }
    .podium-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 110px;
      max-width: 130px;
    }
    .podium-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 4px;
      width: 100%;
    }
    .podium-content .podium-rank {
      font-size: 26px;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 2px;
      text-shadow: 0 0 20px currentColor;
    }
    .podium-content .podium-avatar {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue-primary), var(--blue-bright));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 26px;
      color: #fff;
      overflow: hidden;
      box-shadow: 0 4px 16px var(--blue-glow);
      margin-bottom: 6px;
      border: 3px solid rgba(255,255,255,0.6);
    }
    .podium-content .podium-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
    .podium-content .podium-name {
      position: relative;
      font-weight: 700;
      font-size: 15px;
      text-align: center;
      line-height: 1.2;
      max-width: 100%;
      overflow: visible;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-primary);
    }
    /* Sama seperti perbaikan di kartu Profil: centang biru ditempel di kanan
       nama lewat posisi absolut (tidak ikut dihitung ke lebar kotak nama),
       jadi nama-nya sendiri yang selalu pas center, bukan "nama+centang"
       yang di-tengah-kan bareng (itu penyebab nama kelihatan kegeser kiri
       sebelumnya). */
    .podium-content .podium-name .verified-badge { position:absolute; left:100%; top:50%; margin-left:6px; transform:translateY(-50%); }
    .podium-content .podium-email {
      font-size: 12px;
      color: var(--text-secondary);
      margin-top: 1px;
    }
    .podium-content .podium-amount {
      font-weight: 800;
      font-size: 16px;
      margin-top: 2px;
    }

    /* ===== KOTAK PODIUM - SOLID & ANGKA DI TENGAH ===== */
    .podium-box {
      width: 100%;
      border-radius: 10px 10px 0 0;
      min-height: 30px;
      transition: all 0.3s;
      border: 1px solid var(--border-subtle);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 8px 6px;
    }

    /* Angka di dalam kotak */
    .podium-number {
      font-size: 40px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 2px 8px rgba(0,0,0,0.3);
      line-height: 1;
      margin: 0;
    }

    /* JUARA 1 – KUNING SOLID (lebih gelap sedikit) */
    .podium-box.podium-1 {
      height: 200px;
      background: #E6B800;
      border-color: #CCA000;
      box-shadow: 0 0 30px rgba(230,184,0,0.4);
    }
    .podium-1 .podium-rank { color: #B8960F; }
    .podium-1 .podium-amount { color: #B8960F; }
    .podium-1 .podium-name { color: #8A6D00; }
    .podium-1 .podium-number { color: #fff; }

    /* JUARA 2 – OREN SOLID (lebih gelap sedikit) */
    .podium-box.podium-2 {
      height: 170px;
      background: #E07A00;
      border-color: #C66A00;
      box-shadow: 0 0 20px rgba(224,122,0,0.4);
    }
    .podium-2 .podium-rank { color: #CC7000; }
    .podium-2 .podium-amount { color: #CC7000; }
    .podium-2 .podium-name { color: #A85A00; }
    .podium-2 .podium-number { color: #fff; }

    /* JUARA 3 – ABU-ABU SOLID (lebih gelap sedikit) */
    .podium-box.podium-3 {
      height: 145px;
      background: #8C8C8C;
      border-color: #777;
      box-shadow: 0 0 16px rgba(140,140,140,0.3);
    }
    .podium-3 .podium-rank { color: #6E6E6E; }
    .podium-3 .podium-amount { color: #6E6E6E; }
    .podium-3 .podium-name { color: #555; }
    .podium-3 .podium-number { color: #fff; }

    /* Daftar biasa untuk peringkat 4+ */
    .leaderboard-list {
      padding: 0 12px;
    }
    .leaderboard-item {
      display: flex;
      align-items: center;
      background: var(--bg-card);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      margin-bottom: 6px;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-card);
      transition: all var(--transition);
    }
    .leaderboard-item:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-card-hover);
      border-color: var(--blue-primary);
    }
    .leaderboard-item .rank {
      width: 34px;
      text-align: center;
      font-weight: 700;
      font-size: 14px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    .leaderboard-item .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--blue-primary), var(--blue-bright));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 13px;
      color: #fff;
      flex-shrink: 0;
      margin-right: 12px;
      overflow: hidden;
    }
    .leaderboard-item .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }
    .leaderboard-item .info {
      flex: 1;
      min-width: 0;
    }
    .leaderboard-item .info .name {
      font-weight: 700;
      font-size: 13px;
      color: var(--text-primary);
    }
    .leaderboard-item .info .emails {
      font-size: 10px;
      color: var(--text-secondary);
    }
    .leaderboard-item .amount {
      font-weight: 800;
      font-size: 14px;
      color: var(--blue-bright);
      flex-shrink: 0;
    }

    /* ===== MODALS ===== */
    .modal-overlay { position:fixed; inset:0; z-index:999; background:rgba(26,38,52,0.50); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; transition:opacity 0.25s ease; }
    .modal-overlay.open { display:flex; opacity:1; }
    .modal { background:var(--bg-card); border-radius:28px; padding:28px 24px 24px; max-width:420px; width:100%; border:1px solid var(--border-subtle); box-shadow:var(--shadow-card-lg); max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:scale(0.96); opacity:0; transition:transform 0.25s ease, opacity 0.25s ease; }
    .modal-overlay.open .modal { transform:scale(1); opacity:1; }
    .modal .modal-close { float:right; font-size:22px; color:var(--text-secondary); cursor:pointer; transition:all var(--transition); background:none; border:none; padding:4px; }
    .modal .modal-close:hover { color:var(--text-primary); transform:rotate(90deg); }
    .modal .modal-title { font-size:22px; font-weight:800; margin-bottom:4px; color:var(--text-primary); }
    .modal .modal-sub { color:var(--text-secondary); font-size:14px; margin-bottom:18px; }
    .modal label { font-weight:600; font-size:13px; color:var(--text-secondary); display:block; margin-bottom:4px; }
    .modal input,.modal select { width:100%; padding:12px 16px; background:var(--bg-card-alt); border:1.5px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--text-primary); font-size:15px; transition:border var(--transition), box-shadow var(--transition); margin-bottom:14px; font-family:'Inter',sans-serif; appearance:auto; }
    .modal input:focus,.modal select:focus { border-color:var(--blue-primary); box-shadow:0 0 0 3px var(--blue-glow); outline:none; }
    .modal .btn-modal { width:100%; padding:14px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); border:none; border-radius:var(--radius-sm); font-weight:700; font-size:16px; color:#fff; box-shadow:0 4px 30px var(--blue-glow); transition:all var(--transition); }
    .modal .btn-modal:hover { transform:scale(1.02); }
    .modal .toggle-link { display:block; text-align:center; margin-top:14px; font-size:14px; color:var(--text-secondary); cursor:pointer; }
    .modal .toggle-link:hover { color:var(--blue-bright); }
    .modal .toggle-link span { color:var(--blue-primary); font-weight:600; }
    .modal .btn-danger-inbox { display:block; width:100%; padding:12px; margin-top:12px; background:rgba(239,68,68,0.10); color:#EF4444; border:1px solid rgba(239,68,68,0.20); border-radius:var(--radius-sm); font-weight:700; transition:all var(--transition); cursor:pointer; }
    .modal .btn-danger-inbox:hover { background:rgba(239,68,68,0.18); }
    .inbox-msg { cursor:pointer; transition:background 0.2s; }
    .inbox-msg:hover { background:var(--bg-card-hover) !important; border-color:var(--blue-primary) !important; }

    /* ===== MODAL TARIK SALDO ===== */
    #modalTarikSaldo .modal .saldo-info { background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border-subtle); }
    #modalTarikSaldo .modal .saldo-info .label { font-weight:600; color:var(--text-secondary); font-size:14px; }
    #modalTarikSaldo .modal .saldo-info .nominal { font-weight:800; font-size:22px; color:var(--blue-bright); }
    #modalTarikSaldo .modal .fee-info { background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:12px 16px; margin:12px 0 16px; border:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:6px; }
    #modalTarikSaldo .modal .fee-info .fee-row { display:flex; justify-content:space-between; font-size:14px; color:var(--text-secondary); padding:2px 0; }
    #modalTarikSaldo .modal .fee-info .fee-row .value { font-weight:700; color:var(--text-primary); }
    #modalTarikSaldo .modal .fee-info .fee-row .value.highlight { color:#22C55E; font-size:18px; }
    #modalTarikSaldo .modal .btn-tarik { width:100%; padding:16px; background:linear-gradient(135deg,#22C55E,#16A34A); border:none; border-radius:var(--radius-sm); font-weight:800; font-size:18px; color:#fff; box-shadow:0 4px 30px rgba(34,197,94,0.25); transition:all var(--transition); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:8px; }
    #modalTarikSaldo .modal .btn-tarik:hover:not(:disabled) { transform:scale(1.02); box-shadow:0 6px 40px rgba(34,197,94,0.30); }
    #modalTarikSaldo .modal .btn-tarik:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
    .save-ewallet-row { display:flex; align-items:center; gap:10px; margin-top:4px; margin-bottom:12px; }
    .save-ewallet-row input[type="checkbox"] { width:18px; height:18px; accent-color:var(--blue-primary); cursor:pointer; margin:0; }
    .save-ewallet-row label { font-size:13px; color:var(--text-secondary); cursor:pointer; font-weight:500; margin:0; }

    /* ===== MODAL STOR SUCCESS ===== */
    #modalStorSuccess .modal { max-width:420px; text-align:center; }
    #modalStorSuccess .modal .success-icon { font-size:48px; color:#22C55E; margin-bottom:12px; display:flex; justify-content:center; width:100%; }
    #modalStorSuccess .modal .success-title { font-size:18px; font-weight:700; margin-bottom:8px; color:var(--text-primary); }
    #modalStorSuccess .modal .success-desc { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:16px; }
    #modalStorSuccess .modal .success-desc strong { color:var(--text-primary); }
    #modalStorSuccess .modal .success-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
    #modalStorSuccess .modal .success-actions a,#modalStorSuccess .modal .success-actions button { flex:1; min-width:80px; padding:10px 12px; border-radius:var(--radius-full); font-weight:700; font-size:13px; transition:all var(--transition); border:none; cursor:pointer; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
    #modalStorSuccess .modal .success-actions .btn-wa { background:#25D366; color:#fff; box-shadow:0 4px 20px rgba(37,211,102,0.25); }
    #modalStorSuccess .modal .success-actions .btn-wa:hover { transform:scale(1.03); }
    #modalStorSuccess .modal .success-actions .btn-telegram { background:#0088cc; color:#fff; box-shadow:0 4px 20px rgba(0,136,204,0.25); }
    #modalStorSuccess .modal .success-actions .btn-telegram:hover { transform:scale(1.03); }
    #modalStorSuccess .modal .success-actions .btn-ok { background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); color:#fff; box-shadow:0 4px 20px var(--blue-glow); }
    #modalStorSuccess .modal .success-actions .btn-ok:hover { transform:scale(1.03); }

    /* ===== MODAL ERROR ===== */
    #modalError .modal { max-width:380px; text-align:center; }
    #modalError .modal .error-icon { font-size:48px; color:#EF4444; margin-bottom:12px; display:flex; justify-content:center; width:100%; }
    #modalError .modal .error-title { font-size:18px; font-weight:700; margin-bottom:6px; color:var(--text-primary); }
    #modalError .modal .error-desc { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:18px; }
    #modalError .modal .btn-error-close { padding:10px 30px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); border:none; border-radius:var(--radius-full); font-weight:700; font-size:14px; color:#fff; box-shadow:0 4px 20px var(--blue-glow); transition:all var(--transition); cursor:pointer; }
    #modalError .modal .btn-error-close:hover { transform:scale(1.03); }

    /* ===== MODAL LOGOUT ===== */
    #modalLogout .modal { max-width:340px; text-align:center; }
    #modalLogout .modal .logout-icon { font-size:48px; color:#EF4444; margin-bottom:12px; display:flex; justify-content:center; width:100%; }
    #modalLogout .modal .logout-title { font-size:20px; font-weight:800; margin-bottom:6px; color:var(--text-primary); }
    #modalLogout .modal .logout-desc { font-size:14px; color:var(--text-secondary); margin-bottom:20px; }
    #modalLogout .modal .logout-actions { display:flex; gap:12px; }
    #modalLogout .modal .logout-actions button { flex:1; padding:12px; border-radius:var(--radius-sm); font-weight:700; font-size:15px; transition:all var(--transition); border:none; cursor:pointer; }
    #modalLogout .modal .logout-actions .btn-batal { background:var(--bg-card-alt); color:var(--text-secondary); border:1px solid var(--border-subtle); }
    #modalLogout .modal .logout-actions .btn-batal:hover { background:var(--bg-card); }
    #modalLogout .modal .logout-actions .btn-oke { background:#EF4444; color:#fff; box-shadow:0 4px 20px rgba(239,68,68,0.25); }
    #modalLogout .modal .logout-actions .btn-oke:hover { transform:scale(1.03); }

    /* ===== MODAL MESSAGE NOTIF ===== */
    #modalMessageNotif .modal { max-width:400px; text-align:left; }
    #modalMessageNotif .modal .notif-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
    #modalMessageNotif .modal .notif-header .envelope-icon { font-size:32px; color:var(--blue-bright); }
    #modalMessageNotif .modal .notif-header .notif-title { font-size:18px; font-weight:700; color:var(--text-primary); }
    #modalMessageNotif .modal .notif-body { background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:16px; margin:8px 0 16px; border-left:3px solid var(--blue-primary); font-size:15px; line-height:1.6; color:var(--text-primary); white-space:pre-wrap; word-break:break-word; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; }
    #modalMessageNotif .modal .notif-footer { font-size:12px; color:var(--text-secondary); text-align:right; }

    /* ===== MODAL RESET PASSWORD ===== */
    .modal .reset-user-info { display:flex; align-items:center; gap:14px; background:var(--bg-card-alt); border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:18px; border:1px solid var(--border-subtle); }
    .modal .reset-user-info .rui-avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:#fff; flex-shrink:0; box-shadow:0 0 20px var(--blue-glow); }
    .modal .reset-user-info .rui-name { font-weight:700; font-size:16px; color:var(--text-primary); }
    .modal .reset-user-info .rui-email { font-size:13px; color:var(--text-secondary); }
    .modal .reset-step { display:block; }
    .modal .reset-step.hidden-step { display:none; }

    /* ===== MODAL KONFIRMASI HAPUS ===== */
    #modalConfirmDelete .modal { max-width:380px; text-align:center; }
    #modalConfirmDelete .modal .confirm-icon { font-size:48px; color:#EF4444; margin-bottom:12px; display:flex; justify-content:center; width:100%; }
    #modalConfirmDelete .modal .confirm-title { font-size:20px; font-weight:800; margin-bottom:6px; color:var(--text-primary); }
    #modalConfirmDelete .modal .confirm-desc { font-size:14px; color:var(--text-secondary); line-height:1.6; margin-bottom:20px; }
    #modalConfirmDelete .modal .confirm-actions { display:flex; gap:12px; justify-content:center; }
    #modalConfirmDelete .modal .confirm-actions button { flex:1; padding:12px; border-radius:var(--radius-sm); font-weight:700; font-size:15px; transition:all var(--transition); border:none; cursor:pointer; min-width:80px; }
    #modalConfirmDelete .modal .confirm-actions .btn-batal { background:var(--bg-card-alt); color:var(--text-secondary); border:1px solid var(--border-subtle); }
    #modalConfirmDelete .modal .confirm-actions .btn-batal:hover { background:var(--bg-card); }
    #modalConfirmDelete .modal .confirm-actions .btn-hapus { background:#EF4444; color:#fff; box-shadow:0 4px 20px rgba(239,68,68,0.25); }
    #modalConfirmDelete .modal .confirm-actions .btn-hapus:hover { transform:scale(1.03); }

    /* ===== BOTTOM NAV ===== */
    .bottom-nav { position:relative; flex:0 0 auto; z-index:200; background:rgba(255,255,255,0.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--border-subtle); border-radius:28px 28px 0 0; padding:6px 4px calc(6px + var(--safe-bottom)); display:flex; align-items:center; justify-content:space-around; box-shadow:0 -8px 40px rgba(26,38,52,0.06); height:calc(var(--nav-height) + var(--safe-bottom)); transition:background var(--transition); margin:0; width:100%; }
    body.keyboard-open .bottom-nav { display:none; }
    body.light .bottom-nav { background:rgba(245,248,255,0.94); }
    .nav-item { display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 2px; border-radius:var(--radius-sm); transition:all var(--transition); cursor:pointer; flex:1; max-width:56px; background:none; border:none; color:var(--text-secondary); font-size:8px; font-weight:600; }
    .nav-item .ni-icon { font-size:18px; transition:all var(--transition); }
    .nav-item .ni-label { font-size:8px; margin-top:1px; }
    .nav-item.active { color:var(--blue-bright); }
    .nav-item.active .ni-icon { filter:drop-shadow(0 0 12px var(--blue-glow)); }
    .nav-item:active { opacity:0.55; }
    /* ===== TOMBOL STOR DIPERBESAR (DARI 58px MENJADI 64px) ===== */
    .nav-item.stor-btn {
      background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright));
      color:#fff;
      border-radius:50%;
      width:64px;
      height:64px;
      max-width:64px;
      padding:0;
      justify-content:center;
      margin-top:-24px;
      box-shadow:0 4px 30px var(--blue-glow);
      border:2px solid rgba(255,255,255,0.20);
    }
    .nav-item.stor-btn .ni-icon {
      font-size:26px;
      color:#fff;
      filter:none;
    }
    .nav-item.stor-btn .ni-label {
      display:block;
      font-size:8px;
      color:#fff;
      margin-top:1px;
    }
    @media(max-width:420px){
      .nav-item .ni-icon{font-size:16px;}
      .nav-item.stor-btn{width:56px;height:56px;max-width:56px;margin-top:-20px;}
      .nav-item.stor-btn .ni-icon{font-size:22px;}
      .nav-item .ni-label{font-size:7px;}
    }

    /* ===== TOAST ===== */
    .toast-container { position:fixed; bottom:calc(var(--nav-height) + var(--safe-bottom) + 20px); left:16px; right:16px; z-index:9999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:400px; margin:0 auto; }
    .toast { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-card-lg); pointer-events:auto; animation:toastIn 0.4s cubic-bezier(0.22,1,0.36,1); }
    .toast.removing { animation:toastOut 0.3s ease forwards; }
    @keyframes toastIn { 0%{opacity:0; transform:translateY(30px) scale(0.94);} 100%{opacity:1; transform:translateY(0) scale(1);} }
    @keyframes toastOut { 0%{opacity:1; transform:scale(1);} 100%{opacity:0; transform:scale(0.92) translateY(20px);} }
    .toast .toast-icon { font-size:20px; flex-shrink:0; }
    .toast .toast-icon.success { color:#22C55E; }
    .toast .toast-icon.error { color:#EF4444; }
    .toast .toast-icon.info { color:var(--blue-bright); }
    .toast .toast-body { flex:1; }
    .toast .toast-title { font-weight:700; font-size:14px; color:var(--text-primary); }
    .toast .toast-desc { font-size:13px; color:var(--text-secondary); }

    /* ===== TOAST BESAR ===== */
    .toast-big { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.9); background:var(--bg-card); border:2px solid var(--blue-primary); border-radius:var(--radius); padding:32px 28px; max-width:420px; width:90%; box-shadow:var(--shadow-card-lg); z-index:10000; text-align:center; opacity:0; pointer-events:none; transition:all 0.5s cubic-bezier(0.22,1,0.36,1); backdrop-filter:blur(8px); }
    .toast-big.show { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
    .toast-big .big-icon { font-size:48px; color:var(--blue-bright); margin-bottom:12px; }
    .toast-big .big-title { font-size:22px; font-weight:800; margin-bottom:8px; color:var(--text-primary); }
    .toast-big .big-desc { font-size:15px; color:var(--text-secondary); line-height:1.6; margin-bottom:20px; }
    .toast-big .btn-close-big { padding:10px 32px; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); border:none; border-radius:var(--radius-full); font-weight:700; font-size:15px; color:#fff; box-shadow:0 4px 20px var(--blue-glow); transition:all var(--transition); cursor:pointer; }
    .toast-big .btn-close-big:hover { transform:scale(1.04); }

    /* ===== PROFIL ===== */
    .profile-header { text-align:center; padding:24px 16px 20px; background:var(--bg-card); border-radius:var(--radius); border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); margin-bottom:16px; }
    .profile-avatar-wrapper { position:relative; display:inline-block; margin-bottom:12px; }
    .profile-avatar-wrapper .avatar-placeholder { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:800; color:#fff; box-shadow:0 6px 18px rgba(26,38,52,0.20), 0 0 24px var(--blue-glow); margin:0 auto; border:2px solid var(--blue-primary); }
    .profile-avatar-wrapper img { width:80px; height:80px; border-radius:50%; object-fit:cover; border:2px solid var(--blue-primary); box-shadow:0 6px 18px rgba(26,38,52,0.20), 0 0 24px var(--blue-glow); display:block; margin:0 auto; }
    /* PERBAIKAN LEBIH TEPAT: sebelumnya nama+centang di-tengah-kan sebagai
       SATU KELOMPOK (pakai flex+gap) -- itu bikin tulisan "ADMIN"-nya sendiri
       tetap kegeser ke kiri dari titik tengah kartu (karena lebar centangnya
       ikut dihitung, jadi "pusat kelompok" beda dengan "pusat teks nama").
       Sekarang caranya diubah: NAMA-nya sendiri yang selalu presisi di
       tengah kartu (lewat text-align:center bawaan .profile-header di atas),
       dan centangnya ditempel di sebelah kanan teks pakai posisi absolut
       (tidak ikut dihitung lebarnya) -- jadi kapan pun, pakai centang atau
       tidak, tulisan namanya SELALU pas di tengah, centangnya tinggal
       nempel mengikuti di kanannya. */
    /* PERBAIKAN (kejadian sebelumnya): karena avatar-nya "display:inline-block",
       waktu nama juga dibikin "inline-block" dia malah ikut nempel SEJAJAR di
       samping foto (bukan pindah baris di bawahnya) -- itu penyebab hasilnya
       jadi berantakan kayak di foto. Sekarang dipakai "display:table" -- ini
       tetap elemen BLOK (otomatis pindah baris sendiri di bawah avatar, sama
       kayak semula) TAPI lebarnya tetap menyesuaikan panjang tulisan nama
       (bukan selebar penuh kartu), jadi "margin:0 auto" bisa nge-center pas
       di tengah kartu berdasarkan lebar NAMA-nya sendiri -- centangnya nempel
       di kanan nama lewat posisi absolut, tidak ikut dihitung ke perhitungan
       tengahnya. Ini pola yang sama dipakai akun bercentang biru di sosmed:
       nama yang di-center, centang cuma nempel ngikut di sampingnya. */
    .profile-name { display:table; margin:0 auto; position:relative; font-size:22px; font-weight:800; letter-spacing:-0.3px; color:var(--text-primary); }
    .profile-name .verified-badge { position:absolute; left:100%; top:50%; margin-left:6px; transform:translateY(-50%); }
    .profile-role { font-size:14px; color:var(--text-secondary); margin-top:2px; font-weight:600; }
    .profile-menu { display:flex; flex-direction:column; gap:6px; }
    .profile-menu .pm-item { display:flex; align-items:center; padding:14px 18px; background:var(--bg-card); border-radius:var(--radius-sm); border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); cursor:pointer; transition:all var(--transition); gap:14px; }
    .profile-menu .pm-item:hover { border-color:var(--blue-primary); background:var(--bg-card-alt); box-shadow:var(--shadow-card-hover); }
    .profile-menu .pm-item .pm-icon { font-size:18px; color:var(--blue-bright); width:28px; text-align:center; }
    .profile-menu .pm-item .pm-label { flex:1; font-weight:600; font-size:14px; color:var(--text-primary); }
    .profile-menu .pm-item .pm-arrow { color:var(--text-secondary); font-size:14px; }
    .profile-menu .pm-item.danger .pm-label { color:#EF4444; }
    .profile-menu .pm-item.danger .pm-icon { color:#EF4444; }

    /* ===== VERIFIED BADGE (SVG lencana bergerigi, gaya premium) ===== */
    .verified-badge { display:inline-block; width:15px; height:15px; margin-left:4px; vertical-align:middle; flex-shrink:0; filter:drop-shadow(0 0 3px rgba(29,155,240,.8)); position:relative; top:-2px; }
    .verified-badge svg { display:block; width:100%; height:100%; }
    /* Di header, nama+centang sekarang disejajarkan lewat flexbox (lihat
       .user-name), jadi offset manual "top:-2px" di atas tidak diperlukan lagi
       di sini -- kalau tetap dipakai malah bikin centangnya naik sendiri dan
       terlihat tidak sejajar dengan tulisan nama. */
    .user-name .verified-badge { top:0; margin-left:0; }

    /* ===== BINGKAI / FRAME AVATAR ===== */
    /* z-index:0 WAJIB ada di sini: tanpa ini, cincin bingkai (z-index:-1 di bawah)
       akan "tembus" ke belakang background card/putih di sekitarnya dan jadi tidak
       kelihatan sama sekali (bukan soal warna/animasi, tapi soal urutan lapisan CSS). */
    .av-frame { position:relative; border-radius:50%; z-index:0; overflow:visible !important; }
    /* Kalau bingkai aktif, matikan border/glow biru bawaan supaya warna bingkai kelihatan jelas */
    #profileAvatarDisplay.av-frame img,
    #profileAvatarDisplay.av-frame .avatar-placeholder { border:none !important; box-shadow:none !important; }
    .user-avatar.av-frame,
    .leaderboard-item .avatar.av-frame,
    .podium-content .podium-avatar.av-frame,
    .chat-message .avatar.av-frame { box-shadow:none !important; overflow:visible !important; }
    .av-frame::before { content:''; position:absolute; inset:-4px; border-radius:50%; z-index:-1; }
    .av-frame.frame-sm::before { inset:-2.5px; }
    .av-frame.frame-spin::before { animation:frameSpin 4.5s linear infinite; }
    @keyframes frameSpin { to { transform:rotate(360deg); } }
    .av-frame.frame-gold::before { background:linear-gradient(135deg,#FFD700,#FFA500,#FFD700); box-shadow:0 0 12px rgba(255,215,0,.65); }
    .av-frame.frame-silver::before { background:linear-gradient(135deg,#F1F5F9,#94A3B8,#F1F5F9); box-shadow:0 0 10px rgba(148,163,184,.55); }
    .av-frame.frame-neon::before { background:#00D4FF; animation:frameNeonPulse 1.6s ease-in-out infinite; }
    @keyframes frameNeonPulse { 0%,100%{box-shadow:0 0 6px 2px rgba(0,212,255,.9);} 50%{box-shadow:0 0 16px 6px rgba(0,212,255,.45);} }
    .av-frame.frame-fire::before { background:conic-gradient(from 0deg,#FF512F,#F09819,#FFD200,#FF512F); box-shadow:0 0 14px rgba(255,81,47,.6); }
    .av-frame.frame-rainbow::before { background:conic-gradient(from 0deg,red,orange,yellow,green,blue,indigo,violet,red); box-shadow:0 0 14px rgba(124,58,237,.5); }
    .av-frame.frame-diamond::before { background:linear-gradient(135deg,#E0F7FA,#80DEEA,#E0F7FA); box-shadow:0 0 12px rgba(128,222,234,.7); }
    .av-frame.frame-royal::before { background:linear-gradient(135deg,#7C3AED,#FFD700); box-shadow:0 0 12px rgba(124,58,237,.6); }
    .av-frame.frame-emerald::before { background:linear-gradient(135deg,#10B981,#065F46); box-shadow:0 0 12px rgba(16,185,129,.6); }
    .av-frame.frame-galaxy::before { background:conic-gradient(from 0deg,#4C1D95,#1E3A8A,#831843,#4C1D95); box-shadow:0 0 14px rgba(76,29,149,.6); }
    .av-frame.frame-rosegold::before { background:linear-gradient(135deg,#F7CAC9,#E0BFB8,#F7CAC9); box-shadow:0 0 12px rgba(247,202,201,.6); }

    /* ===== PICKER: AVATAR & BINGKAI (EDIT PROFIL) ===== */
    .section-divider-label { font-size:12px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 8px; }
    .avatar-picker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:4px; }
    .avatar-picker-item { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; }
    .avatar-picker-item .api-circle { position:relative; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; border:2px solid transparent; transition:all var(--transition); }
    .avatar-picker-item.active .api-circle { border-color:var(--blue-primary); box-shadow:0 0 0 3px var(--blue-glow); }
    .avatar-picker-item .api-selected-badge { display:none; position:absolute; top:-3px; right:-3px; width:16px; height:16px; border-radius:50%; background:var(--blue-primary); color:#fff; font-size:9px; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg-card); }
    .avatar-picker-item.active .api-selected-badge { display:flex; }
    .avatar-picker-item .api-label { font-size:9.5px; color:var(--text-secondary); text-align:center; line-height:1.2; }
    .frame-picker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:4px; }
    .frame-picker-item { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; }
    .frame-picker-item .fpi-circle { width:38px; height:38px; border-radius:50%; background:var(--bg-card-alt); border:1px solid var(--border-subtle); }
    .frame-picker-item .fpi-wrap { position:relative; }
    .frame-picker-item .fpi-selected-badge { display:none; position:absolute; top:-5px; right:-6px; width:16px; height:16px; border-radius:50%; background:var(--blue-primary); color:#fff; font-size:9px; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--bg-card); z-index:2; }
    .frame-picker-item.active .fpi-selected-badge { display:flex; }
    .frame-picker-item .fpi-label { font-size:9px; color:var(--text-secondary); text-align:center; line-height:1.2; }
    .frame-picker-item.none .fpi-circle { display:flex; align-items:center; justify-content:center; color:var(--text-secondary); font-size:14px; }

    /* ===== INFO MODAL ===== */
    .info-card { display:flex; align-items:center; gap:14px; padding:12px 16px; background:var(--bg-card-alt); border-radius:var(--radius-sm); margin-bottom:10px; border:1px solid var(--border-subtle); }
    .info-card .ic-icon { font-size:24px; color:var(--blue-bright); width:36px; text-align:center; }
    .info-card .ic-body { flex:1; }
    .info-card .ic-title { font-weight:700; font-size:14px; color:var(--text-primary); }
    .info-card .ic-desc { font-size:13px; color:var(--text-secondary); }
    .status-online { display:inline-flex; align-items:center; gap:6px; color:#22C55E; font-weight:600; }
    .status-online .dot { width:8px; height:8px; border-radius:50%; background:#22C55E; animation:pulse-dot 1.5s ease-in-out infinite; }
    @keyframes pulse-dot { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(0.7);} }

    /* ===== INBOX ===== */
    .inbox-list { max-height:340px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
    .inbox-list .inbox-empty { text-align:center; padding:30px 0; color:var(--text-secondary); }
    .inbox-list .inbox-empty i { font-size:40px; opacity:0.30; display:block; margin-bottom:10px; }

    /* ===== CHAT PUBLIC - PERBAIKAN ===== */
    #chatPublicOverlay {
      display:none;
      position:fixed;
      inset:0;
      z-index:300;
      background:var(--bg-body);
      flex-direction:column;
      /* CATATAN: sempat dicoba pakai transisi CSS di sini biar "halus", tapi
         itu malah bikin navigasinya kelihatan lag/molor ngikutin keyboard
         (efek "jeli/lentur") karena tinggi targetnya berubah terus tiap
         frame selagi keyboard animasi, dan transisinya kejar-kejaran sama
         nilai yang terus bergerak. 100dvh polos di sini justru PALING pas:
         browser gerakinnya sendiri 1:1 pas sama animasi keyboard, tidak ada
         jeda/susulan sama sekali. Sumber goyang sebelumnya sudah dibenahi
         lewat penyatuan timer scroll & fokus input (lihat fungsi
         stickChatToBottom & sendChatMessage). */
      height:100dvh;
      width:100dvw;
      overflow:hidden;
    }
    #chatPublicOverlay.show { display:flex; }

    /* Header chat - sticky agar tetap terlihat saat keyboard muncul */
    .chat-header {
      display:flex;
      align-items:center;
      padding:12px 16px;
      background:var(--bg-card);
      border-bottom:1px solid var(--border-subtle);
      flex-shrink:0;
      position:sticky;
      top:0;
      z-index:10;
      min-height:60px;
    }
    .chat-header .back-btn {
      background:none;
      border:none;
      color:var(--text-primary);
      font-size:24px;
      padding:4px 12px 4px 0;
      cursor:pointer;
    }
    .chat-header .title-area {
      flex:1;
      display:flex;
      align-items:center;
      gap:10px;
    }
    .chat-header .title-area .main-title {
      font-weight:800;
      font-size:18px;
      color:var(--text-primary);
    }
    .chat-header .title-area .online-status {
      display:inline-flex;
      align-items:center;
      gap:4px;
      color:#22C55E;
      font-weight:600;
      font-size:12px;
    }
    .chat-header .title-area .online-status .dot {
      width:8px;
      height:8px;
      border-radius:50%;
      background:#22C55E;
      display:inline-block;
      animation:pulse-dot 1.5s ease-in-out infinite;
    }
    .chat-header .clear-btn,
    .chat-header .theme-btn {
      background:none;
      border:none;
      color:var(--text-secondary);
      font-size:18px;
      padding:4px 6px;
      cursor:pointer;
    }
    .chat-header .theme-btn { margin-right:10px; }
    .chat-header .theme-btn:active,
    .chat-header .clear-btn:active { opacity:0.6; transform:scale(0.92); }

    /* Container chat — dioptimalkan biar scroll mulus & ringan */
    #chatMessagesContainer {
      flex:1;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      /* PERBAIKAN (29 Agu 2026): scroll-behavior:smooth ditambahkan supaya
         lompatan scroll terprogram (scrollTo/scrollIntoView -- dipakai pas
         tap kutipan balasan, tap bar "Pesan Disematkan", dll) jadi mulus,
         bukan meloncat instan. CATATAN: ini TIDAK mempengaruhi baris kode
         yang sengaja set container.scrollTop = ... langsung (dipakai pas
         nempel ke bawah otomatis waktu pesan baru masuk) -- assignment
         scrollTop langsung selalu instan di semua browser, cuma dipengaruhi
         scroll-behavior kalau lewat scrollTo()/scrollIntoView(). Jadi
         perilaku auto-scroll-ke-bawah yang sudah ada tetap sama persis.
         Swipe/geser jari pengguna sendiri juga tidak terganggu, tetap native
         seperti biasa. */
      scroll-behavior:smooth;
      padding:12px 16px;
      display:flex;
      flex-direction:column;
      gap:8px;
      background:var(--bg-body);
      min-height:0;
    }

    /* Tombol melayang "ke pesan terbaru" — cuma muncul kalau user scroll ke atas */
    #chatScrollBottomBtn {
      position:absolute;
      right:16px;
      bottom:88px;
      width:38px;
      height:38px;
      border-radius:50%;
      background:rgba(43,127,255,0.55);
      color:#fff;
      font-size:15px;
      display:none;
      align-items:center;
      justify-content:center;
      box-shadow:0 4px 16px rgba(26,38,52,0.18);
      backdrop-filter:blur(4px);
      -webkit-backdrop-filter:blur(4px);
      opacity:0.88;
      z-index:120;
      transition:opacity 0.2s, transform 0.15s;
      cursor:pointer;
    }
    #chatScrollBottomBtn.show { display:flex; }
    #chatScrollBottomBtn:active { transform:scale(0.90); opacity:1; }

    /* Input wrapper */
    .chat-input-wrapper {
      display:flex;
      align-items:center;
      padding:8px 12px;
      background:var(--bg-card);
      border-top:1px solid var(--border-subtle);
      flex-shrink:0;
      gap:8px;
      padding-bottom:calc(8px + var(--safe-bottom, 0px));
    }

    .chat-message { display:flex; gap:10px; align-items:flex-start; position:relative; contain:layout style; }
    /* Pesan milik sendiri didorong ke kanan (avatar & bubble dibalik urutannya)
       persis seperti chat WhatsApp: pesan kita = kanan, pesan orang lain = kiri. */
    .chat-message.self { flex-direction:row-reverse; }
    .chat-message .avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--blue-primary),var(--blue-bright)); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; overflow:hidden; }
    .chat-message .avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
    .chat-message .bubble { position:relative; background:var(--bg-card); border-radius:12px 12px 12px 4px; padding:8px 30px 8px 14px; max-width:80%; border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); touch-action:pan-y; transition:transform 0.18s ease; will-change:transform; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; }
    .chat-message.bubble-drag .bubble { transition:none; }
    .chat-message .bubble .sender { font-weight:700; font-size:13px; color:var(--blue-bright); }
    .chat-message .bubble .time { font-size:10px; color:var(--text-secondary); margin-left:8px; }
    .chat-message .bubble .text { font-size:14px; word-break:break-word; color:var(--text-primary); user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-touch-callout:none; }
    .chat-message.self .bubble { border-radius:12px 12px 4px 12px; background:var(--blue-primary); color:#fff; border-color:var(--blue-primary); }
    .chat-message.self .bubble .sender { color:rgba(255,255,255,0.80); }
    .chat-message.self .bubble .time { color:rgba(255,255,255,0.60); }
    .chat-message.self .bubble .text { color:#fff; }

    /* Ikon "balas" yang muncul pas bubble digeser ke kiri (swipe-to-reply ala WA) */
    .swipe-reply-ico { position:absolute; top:50%; right:-28px; transform:translateY(-50%); opacity:0; pointer-events:none; color:var(--blue-primary); font-size:15px; z-index:1; }

    /* ===== MENU KONTEKS PESAN (tekan lama / long-press) — ala foto referensi ===== */
    .chat-ctx-overlay {
      display:flex; position:fixed; inset:0; z-index:520;
      background:rgba(8,12,20,0.45);
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
      flex-direction:column;
      align-items:center; justify-content:center;
      gap:10px;
      padding:0 0 var(--safe-bottom,0px);
      /* Cegah HP nganggep isi menu ini teks yang bisa "diseleksi" (yang bikin
         munculin bubble "Salin | Bagikan | Semua | Penelusuran web" bawaan
         Chrome nimpa menu kita sendiri pas tekan lama). */
      user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;
      -webkit-touch-callout:none;
      /* PERBAIKAN (29 Agu 2026): dulu overlay ini nongol/hilang instan lewat
         display:none<->flex, jadi backdrop-nya "kedip" tiba-tiba pas dibuka
         dan hilang tanpa transisi sama sekali pas ditutup (cuma kartu di
         dalamnya yang animasi, latar gelapnya tidak). Sekarang overlay selalu
         display:flex, ditampilkan/disembunyikan lewat opacity+visibility yang
         di-transisi, jadi buka & tutup sama-sama mulus. Fungsionalitas tidak
         berubah: saat tersembunyi tetap tidak kelihatan & tidak bisa
         diklik/disentuh (visibility:hidden + pointer-events:none), sama
         seperti display:none sebelumnya. */
      opacity:0; visibility:hidden; pointer-events:none;
      transition:opacity 0.18s ease, visibility 0s linear 0.18s;
    }
    .chat-ctx-overlay.show {
      opacity:1; visibility:visible; pointer-events:auto;
      transition:opacity 0.18s ease, visibility 0s linear 0s;
    }
    /* Grup mengambang (emoji reaksi + cuplikan pesan) — TERPISAH dari kartu
       menu Membalas/Salin/Hapus di bawahnya, bukan disatukan jadi satu kotak
       (ala referensi: emoji & teks pesan melayang sendiri di atas kartu menu).
       Lebarnya dipas-in (bukan selebar layar) biar sama proporsinya kayak
       referensi, tidak "kepanjangan" ke samping. */
    .chat-ctx-group {
      width:100%; max-width:300px; margin:0 14px;
      display:flex; flex-direction:column; gap:10px;
    }
    .chat-ctx-sheet {
      width:100%; max-width:300px; margin:0 14px;
      background:var(--bg-card); border-radius:18px; padding:12px;
      box-shadow:var(--shadow-card-lg);
    }
    /* PERBAIKAN (29 Agu 2026): animasi masuk kartu ini sekarang dipasang di
       sini (baru berlaku saat overlay induknya dapat class .show), bukan di
       .chat-ctx-group/.chat-ctx-sheet langsung -- soalnya overlay induk tidak
       lagi pakai display:none/flex (lihat .chat-ctx-overlay di atas), jadi
       kalau animasinya nempel permanen di kartunya dia cuma akan main SEKALI
       waktu halaman pertama dimuat dan tidak akan main ulang tiap menu
       dibuka. Dengan diikat ke ".show", animasinya otomatis "restart" setiap
       kali class .show baru ditambahkan (persis behavior lama). */
    .chat-ctx-overlay.show .chat-ctx-group,
    .chat-ctx-overlay.show .chat-ctx-sheet {
      animation:ctxSheetIn 0.16s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes ctxSheetIn { 0%{ transform:translateY(16px) scale(0.97); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
    .chat-ctx-title { font-weight:700; font-size:14px; color:var(--text-secondary); padding:6px 10px 10px; text-align:center; }
    /* Baris emoji reaksi — "pill" mengambang sendiri dengan alasnya sendiri.
       overflow:hidden dipasang sebagai jaring pengaman supaya emoji TIDAK
       PERNAH bisa nongol keluar bentuk pil-nya lagi (sebelumnya 7 ikon
       kepepet di ruang yang kesempitan sampai salah satu "meleot" keluar
       dari alasnya — sekarang ukurannya dipas-in biar muat semua rapi). */
    .chat-ctx-reactions {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:5px;
      background:var(--bg-card-alt);
      border-radius:9999px;
      padding:6px 8px;
      box-shadow:var(--shadow-card-lg);
      overflow:hidden;
    }
    /* Cuplikan teks pesan yang lagi ditahan — punya alas/kotak sendiri juga
       (jangan kosong/melayang tanpa latar), TAPI alasnya terpisah dari alas
       emoji di atas dan dari kartu menu Membalas/Salin/Hapus di bawah — jadi
       3 blok yang jelas terpisah satu sama lain, bukan menyatu. */
    .chat-ctx-msg-preview {
      display:none;
      font-size:14px;
      line-height:1.4;
      color:var(--text-primary);
      text-align:center;
      background:var(--bg-card-alt);
      border-radius:14px;
      padding:10px 14px;
      box-shadow:var(--shadow-card-lg);
      word-break:break-word;
      overflow:hidden;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
    }
    .chat-ctx-msg-preview.show { display:-webkit-box; }
    .ctx-react-btn { background:none; border:none; font-size:19px; line-height:1; padding:4px; border-radius:50%; cursor:pointer; transition:background 0.15s, transform 0.15s; flex:0 0 auto; text-align:center; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
    .ctx-react-btn:active { background:var(--bg-card-hover); transform:scale(1.15); }
    .ctx-react-more { color:var(--text-secondary); font-size:16px; }
    .chat-ctx-item {
      display:flex; align-items:center; gap:12px; width:100%;
      padding:13px 12px; font-size:15px; font-weight:600; color:var(--text-primary);
      background:none; border:none; text-align:left; cursor:pointer; border-radius:10px;
      /* touch-action:manipulation -- hilangkan delay ~300ms bawaan browser
         sebelum tap dianggap "bukan double-tap-zoom", biar tombol menu
         terasa merespon lebih cepat/mulus saat ditekan di HP. */
      touch-action:manipulation;
      transition:background 0.12s ease;
    }
    .chat-ctx-item i { width:20px; text-align:center; color:var(--text-secondary); }
    .chat-ctx-item:active { background:var(--bg-card-hover); }
    .chat-ctx-item.danger { color:#EF4444; }
    .chat-ctx-item.danger i { color:#EF4444; }
    .chat-ctx-item.cancel { color:var(--text-secondary); justify-content:center; margin-top:4px; border-top:1px solid var(--border-subtle); border-radius:0; padding-top:14px; }

    /* ===== Bar reaksi emoji di bawah bubble ===== */
    .chat-reactions-bar { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
    .chat-reaction-pill {
      display:inline-flex; align-items:center; gap:4px; font-size:12px;
      background:var(--bg-card-alt); border:1px solid var(--border-subtle); color:var(--text-primary);
      border-radius:999px; padding:2px 8px; cursor:pointer; line-height:1.6;
    }
    .chat-message.self .chat-reaction-pill { background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.25); color:#fff; }
    .chat-reaction-pill.mine { border-color:var(--blue-primary); background:var(--blue-glow); }
    .chat-reaction-pill span { font-weight:700; font-size:11px; }

    /* Balas pesan (reply) */
    .chat-message .bubble .reply-btn { position:absolute; top:4px; right:4px; background:none; border:none; font-size:11px; color:var(--text-secondary); opacity:0.55; cursor:pointer; padding:4px 5px; line-height:1; }
    .chat-message .bubble .reply-btn:active { opacity:1; }
    .chat-message.self .bubble .reply-btn { color:rgba(255,255,255,0.75); }
    .chat-message .bubble .reply-quote { border-left:3px solid var(--blue-primary); background:rgba(0,0,0,0.06); padding:4px 8px; border-radius:6px; margin:2px 0 6px; max-width:100%; overflow:hidden; cursor:pointer; }
    .chat-message .bubble .reply-quote:active { opacity:0.7; }
    .chat-message .bubble .reply-quote .rq-name { display:block; font-weight:700; font-size:11.5px; color:var(--blue-bright); }
    .chat-message .bubble .reply-quote .rq-text { display:block; font-size:11.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .chat-message.self .bubble .reply-quote { background:rgba(255,255,255,0.16); border-left-color:#fff; }
    .chat-message.self .bubble .reply-quote .rq-name { color:#fff; }
    .chat-message.self .bubble .reply-quote .rq-text { color:rgba(255,255,255,0.85); }
    /* Animasi "mengembang" ala WhatsApp saat pesan baru saja terkirim */
    @keyframes bubblePopIn {
      0%   { transform:scale(0.4); opacity:0; }
      100% { transform:scale(1); opacity:1; }
    }
    .chat-message.pop-in.self { transform-origin:bottom right; }
    .chat-message.pop-in:not(.self) { transform-origin:bottom left; }
    .chat-message.pop-in .bubble { animation:bubblePopIn 0.18s ease-out both; transform-origin:inherit; }

    /* Highlight sesaat saat lompat ke pesan asli lewat tap kutipan balasan (ala WA/Telegram) */
    @keyframes chatJumpFlash {
      0%   { background:var(--blue-glow); }
      100% { background:transparent; }
    }
    .chat-message.jump-flash .bubble { animation:chatJumpFlash 0.9s ease-out; border-radius:12px; }

    #chatReplyBar { display:none; align-items:center; gap:10px; padding:8px 16px; background:var(--bg-card-alt); border-top:1px solid var(--border-subtle); flex-shrink:0; }
    #chatReplyBar.show { display:flex; }
    #chatReplyBar .reply-info { flex:1; min-width:0; border-left:3px solid var(--blue-primary); padding-left:10px; cursor:pointer; }
    #chatReplyBar .reply-info .rb-title { font-size:12px; font-weight:700; color:var(--blue-bright); display:flex; align-items:center; gap:6px; }
    #chatReplyBar .reply-info .rb-snippet { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #chatReplyBar .reply-cancel-btn { background:none; border:none; color:var(--text-secondary); font-size:18px; cursor:pointer; padding:4px; flex-shrink:0; }

    /* ===== Bar "Pesan Disematkan" ala WA/Telegram — cuma admin centang biru
       yang boleh menyematkan/melepas (lihat ctxPin() & isVerifiedUser()). ===== */
    #chatPinnedBar { display:none; align-items:center; gap:10px; padding:8px 16px; background:var(--bg-card-alt); border-bottom:1px solid var(--border-subtle); flex-shrink:0; cursor:pointer; }
    #chatPinnedBar.show { display:flex; }
    #chatPinnedBar .pin-ico { color:var(--blue-primary); font-size:14px; flex-shrink:0; }
    #chatPinnedBar .pinned-info { flex:1; min-width:0; }
    #chatPinnedBar .pb-title { font-size:12px; font-weight:700; color:var(--blue-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #chatPinnedBar .pb-snippet { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    #chatUnpinBtn { background:none; border:none; color:var(--text-secondary); font-size:16px; cursor:pointer; padding:4px; flex-shrink:0; }


    #emojiPicker { display:none; flex-direction:column; background:var(--bg-card); border-top:1px solid var(--border-subtle); flex-shrink:0; }
    #emojiPicker.show { display:flex; }
    /* Mode reaksi (dibuka lewat tekan-lama pesan -> "emoji lainnya"): panel
       kecil & melayang di TENGAH layar, senada posisi menu tekan-lama
       (.chat-ctx-overlay) yang barusan ditutup buat munculin panel ini —
       BUKAN panel lebar nempel di bawah kayak mode ngetik biasa. */
    #emojiPicker.floating {
      position:fixed;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:min(320px,88vw);
      border:1px solid var(--border-subtle);
      border-radius:20px;
      box-shadow:0 12px 36px rgba(8,12,20,0.32);
      z-index:530;
      max-height:min(360px,62vh);
    }
    #emojiPicker.floating #emojiGrid { max-height:220px; }
    #emojiSearchWrap { display:flex; align-items:center; gap:8px; margin:8px 10px 4px; padding:8px 12px; background:var(--bg-card-alt); border-radius:12px; flex-shrink:0; }
    #emojiSearchWrap i.fa-magnifying-glass { color:var(--text-secondary); font-size:14px; }
    #emojiSearchWrap input { flex:1; border:none; background:none; outline:none; color:var(--text-primary); font-size:14px; min-width:0; }
    #emojiSearchWrap input::placeholder { color:var(--text-secondary); }
    #emojiSearchClear { display:none; background:none; border:none; color:var(--text-secondary); font-size:15px; padding:2px; cursor:pointer; flex-shrink:0; }
    #emojiSearchWrap.has-text #emojiSearchClear { display:block; }
    #emojiTabs { display:flex; gap:2px; padding:6px 8px; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--border-subtle); flex-shrink:0; scrollbar-width:none; }
    #emojiTabs::-webkit-scrollbar { display:none; }
    #emojiTabs .emoji-tab-btn { background:none; border:none; font-size:19px; padding:5px 8px; cursor:pointer; border-radius:8px; opacity:0.5; flex-shrink:0; transition:background 0.2s, opacity 0.2s; position:relative; }
    #emojiTabs .emoji-tab-btn.active { opacity:1; background:var(--bg-card-hover); }
    #emojiTabs .emoji-tab-btn.active::after { content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:16px; height:3px; border-radius:3px; background:var(--blue-primary); }
    /* Grid emoji: dikasih perspective biar transform 3D per-tombol pas
       scroll (efek "melengkung dikit" ala Telegram) kelihatan bener, bukan
       gepeng datar. */
    #emojiGrid { display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px; padding:8px 10px; max-height:230px; overflow-y:auto; -webkit-overflow-scrolling:touch; perspective:600px; }
    #emojiGrid .emoji-btn { background:none; border:none; font-size:23px; line-height:1; padding:5px; cursor:pointer; border-radius:6px; transition:background 0.2s; will-change:transform; }
    #emojiGrid .emoji-btn:hover { background:var(--bg-card-hover); }
    #emojiGrid .emoji-empty { width:100%; text-align:center; color:var(--text-secondary); font-size:13px; padding:24px 10px; }

    .chat-send-btn { background:var(--blue-primary); border:none; border-radius:50%; width:44px; height:44px; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; flex-shrink:0; box-shadow:0 2px 12px var(--blue-glow); border:1px solid rgba(255,255,255,0.10); }
    .chat-send-btn:hover { transform:scale(1.05); box-shadow:0 4px 20px var(--blue-glow); background:var(--blue-bright); }
    .chat-send-btn:active { transform:scale(0.92); }
    .chat-send-btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
    .chat-send-btn .fa-spinner { animation:spin 0.8s linear infinite; }
    @keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }

    /* ===== RESPONSIVE ===== */
    @media(max-width:480px){
      .form-row{grid-template-columns:1fr;}
      .stats-grid-3{gap:6px;}
      .stats-grid-3 .stat-item .num{font-size:20px;}
      .stats-grid-3 .stat-item .lbl{font-size:10px;}
      #modalStorSuccess .modal .success-actions{flex-direction:column;}
      #modalStorSuccess .modal .success-actions a,#modalStorSuccess .modal .success-actions button{flex:none;width:100%;}
      .status-row{font-size:12px;flex-wrap:wrap;gap:4px;}
      .saldo-card .saldo-nominal{font-size:32px;}
      .saldo-card .saldo-actions .btn{font-size:12px;padding:8px 16px;}
      .riwayat-tabs .riwayat-tab{font-size:11px;padding:8px 6px;}
      .toast-big{padding:24px 20px;}
      .toast-big .big-title{font-size:18px;}
      #musicToggle{width:40px;height:40px;font-size:16px;bottom:90px;right:12px;}
      .profile-name{font-size:18px;}
      .profile-avatar-wrapper .avatar-placeholder{width:64px;height:64px;font-size:28px;}
      .profile-avatar-wrapper img{width:64px;height:64px;}
      .chat-send-btn{width:40px;height:40px;font-size:18px;}
      .podium-container{gap:10px;padding:10px 6px 8px;}
      .podium-item{width:92px;max-width:104px;}
      .podium-content .podium-avatar{width:56px;height:56px;font-size:22px;}
      .podium-content .podium-rank{font-size:22px;}
      .podium-content .podium-name{font-size:13px;}
      .podium-content .podium-amount{font-size:14px;}
      .podium-content .podium-email{font-size:11px;}
      .podium-box.podium-1{height:170px;}
      .podium-box.podium-2{height:145px;}
      .podium-box.podium-3{height:120px;}
      .podium-number{font-size:34px !important;}
      .leaderboard-item{padding:8px 10px;}
      .leaderboard-item .rank{font-size:11px;width:26px;}
      .leaderboard-item .avatar{width:26px;height:26px;font-size:10px;margin-right:8px;}
      .leaderboard-item .info .name{font-size:11px;}
      .leaderboard-item .info .emails{font-size:9px;}
      .leaderboard-item .amount{font-size:11px;}
      .menu-grid { gap:10px 6px; }
      .menu-icon { width:50px; height:50px; font-size:20px; }
      .menu-label { font-size:10px; }
    }
    @media(max-width:380px){ .logo{font-size:18px;} .saldo-card .saldo-nominal{font-size:28px;} .saldo-card .saldo-actions .btn{font-size:11px;padding:6px 12px;} .menu-icon { width:44px; height:44px; font-size:18px; } .menu-label { font-size:9px; } }
    @media(min-width:768px){ .bottom-nav{max-width:480px;align-self:center;border-radius:28px 28px 0 0;} .toast-container{max-width:420px;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-height) + var(--safe-bottom) + 24px);} }