/* Inter — bundled lokal, tidak perlu koneksi internet */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/inter-latin-400-normal.woff2') format('woff2'),
        url('fonts/inter-latin-400-normal.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/inter-latin-700-normal.woff2') format('woff2'),
        url('fonts/inter-latin-700-normal.woff') format('woff');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/inter-latin-800-normal.woff2') format('woff2'),
        url('fonts/inter-latin-800-normal.woff') format('woff');
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    overflow-x: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s, color 0.3s;
    line-height: 1.55;
    letter-spacing: -0.015em;
    scroll-behavior: smooth;
}

@supports (height: 100dvh) {

    html,
    body,
    #app {
        min-height: 100dvh;
    }
}

/* ===== THEME VARS & GOLDEN RATIO (Φ) ===== */
:root {
    --safe-top: 0px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Golden Ratio Constants */
    --phi: 1.618;
    --psi: 0.618;

    /* Spacing & Layout Scale (Modular Φ) */
    --gr-1: 0.31rem;
    /* 5px */
    --gr-2: 0.5rem;
    /* 8px */
    --gr-3: 0.81rem;
    /* 13px */
    --gr-4: 1.15rem;
    /* 18.4px - Reduced slightly */
    --gr-5: 1.85rem;
    /* 29.6px - Reduced slightly */
    --gr-6: 3rem;
    /* 48px - Reduced slightly */
    --gr-7: 4.85rem;
    /* 77.6px - Reduced slightly */

    /* Fluid Spacing - refined to be less aggressive */
    --gr-unit: 0.7vh;
    --gr-xs: clamp(var(--gr-1), 0.7vh, var(--gr-2));
    --gr-sm: clamp(var(--gr-2), 1.1vh, var(--gr-3));
    --gr-md: clamp(var(--gr-3), 1.8vh, var(--gr-4));
    --gr-lg: clamp(var(--gr-4), 2.8vh, var(--gr-5));
    --gr-xl: clamp(var(--gr-5), 4.5vh, var(--gr-6));
    --gr-xxl: clamp(var(--gr-6), 7vh, var(--gr-7));

    /* Typography Scale - even more conservative vh values */
    --gr-text-xs: clamp(0.65rem, 1vh, 0.75rem);
    --gr-text-sm: clamp(0.75rem, 1.3vh, 0.875rem);
    --gr-text-base: clamp(0.9rem, 1.6vh, 1rem);
    --gr-text-lg: clamp(1.1rem, 2vh, 1.25rem);
    --gr-text-xl: clamp(1.3rem, 2.5vh, 1.55rem);
    --gr-text-2xl: clamp(1.6rem, 3vh, 2rem);
    --gr-text-3xl: clamp(2rem, 4vh, 2.5rem);
    --gr-text-4xl: clamp(2.5rem, 5vh, 3.2rem);
    --gr-text-5xl: clamp(3rem, 6vh, 4rem);

    /* Default Dark Theme Colors */

    --bg: #09090b;
    --app-bg: #09090b;
    --app-bg-rgb: 9, 9, 11;
    --card-bg: rgba(24, 24, 27, 0.6);
    --card-bg-rgb: 24, 24, 27;
    --card-bg-solid: #18181b;
    --card-border: #27272a;
    --border-dim: #18181b;
    --text: #f4f4f5;
    --text-muted: #a1a1aa;
    --text-dim: #71717a;
    --text-zinc6: #52525b;
    --input-bg: rgba(24, 24, 27, 0.5);
    --btn-secondary-bg: #18181b;
    --btn-secondary-text: #d4d4d8;
    --scrollbar-thumb: #27272a;
    --example-bg: #0c0c0e;
    --rank-card-shine: rgba(255, 255, 255, 0.1);
    --toast-bg: #27272a;
    --toast-border: rgba(255, 255, 255, 0.1);
    --toast-spinner-border: rgba(255, 255, 255, 0.18);

    /* Extra surface vars */
    --surface-hover: #3f3f46;
    --surface-deep: #0c0c0e;
    --surface-deeper: #0f0f11;
    --text-on-card: #f4f4f5;
    --text-faint: #3f3f46;
    --text-placeholder: #52525b;
    --border-mid: #3f3f46;
    --border-strong: #52525b;
    --dot-bg: #27272a;
    --dot-active: #a1a1aa;
    --online-green: #10b981;
    --offline-red: #ef4444;
    --checkbox-border: #3f3f46;
    --range-track: #27272a;
    --audio-bg: rgba(24, 24, 27, 0.85);
    --streak-bg: #18181b;
    --streak-border: #27272a;
    --banner-space: 0px;

    /* ===== SEMANTIC COLOR SYSTEM ===== */
    /* Error / Danger */
    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-error-light: #f87171;
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-error-border: rgba(220, 38, 38, 0.4);

    /* Success */
    --color-success: #16a34a;
    --color-success-light: #4ade80;
    --color-success-subtle: #86efac;
    --color-success-bg: rgba(22, 163, 74, 0.15);
    --color-success-border: rgba(22, 163, 74, 0.4);

    /* Warning / Amber */
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-vivid: #facc15;
    --color-warning-bg: rgba(245, 158, 11, 0.15);

    /* Info / Sky */
    --color-info: #38bdf8;
    --color-info-light: #7dd3fc;
    --color-info-bg: rgba(56, 189, 248, 0.12);

    /* Orange / Streak */
    --color-orange: #f97316;
    --color-orange-warm: #fb923c;

    /* Indigo / Sentence quiz */
    --color-indigo: #818cf8;
    --color-indigo-bg: rgba(99, 102, 241, 0.15);

    /* ===== BORDER RADIUS SYSTEM ===== */
    --radius-xs: 4px;
    /* micro — progress bar, dot */
    --radius-sm: 12px;
    /* chip, badge, small button */
    --radius-md: 16px;
    /* button, input, small card */
    --radius-lg: 20px;
    /* card utama */
    --radius-xl: 28px;
    /* hero card, bottom sheet */

    /* Default Accents (Green) */
    --ac: #10b981;
    --acl: #34d399;
    --acd: #064e3b;
    --ac-rgb: 16, 185, 129;
    --acl-rgb: 52, 211, 153;
    --acs-opacity: 0.18;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));

    /* Badge Color RGB values */
    --badge-blue-rgb: 59, 130, 246;
    --badge-yellow-rgb: 234, 179, 8;
    --badge-red-rgb: 239, 68, 68;
}

/* ===== TYPOGRAPHY SYSTEM — 3 weights only ===== */
/* 400: body text, description           */
/* 700: UI label, button, badge, caption */
/* 800: heading, stat number, emphasis   */

body[data-mode="light"] {
    /* Mineral Light palette */
    --bg: #e8e4dc;
    --app-bg: #e8e4dc;
    --app-bg-rgb: 232, 228, 220;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-bg-rgb: 255, 255, 255;
    --card-bg-solid: #ffffff;
    --card-border: rgba(28, 25, 23, 0.18);
    --border-dim: rgba(28, 25, 23, 0.12);
    --text: #1c1917;
    --text-muted: #44403c;
    --text-dim: #78716c;
    --text-zinc6: #a8a29e;
    --input-bg: #ffffff;
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #1c1917;
    --scrollbar-thumb: #d6d3cd;
    --example-bg: #faf7f3;
    --rank-card-shine: rgba(0, 0, 0, 0.08);
    --toast-bg: #ffffff;
    --toast-border: rgba(28, 25, 23, 0.15);
    --toast-spinner-border: rgba(28, 25, 23, 0.1);

    /* Accent tweaks for Light Mode */
    --acs-opacity: 0.12;

    /* Extra surface vars light */
    --surface-hover: #d6d3cd;
    --surface-deep: #e7e5e4;
    --surface-deeper: #f5f5f4;
    --text-on-card: #1c1917;
    --text-faint: #a8a29e;
    --text-placeholder: #a8a29e;
    --border-mid: #d6d3cd;
    --border-strong: #a8a29e;
    --dot-bg: #d6d3cd;
    --dot-active: #57534e;
    --checkbox-border: #a8a29e;
    --range-track: #d6d3cd;
    --audio-bg: rgba(255, 255, 255, 0.95);
    --streak-bg: #ffffff;
    --streak-border: rgba(28, 25, 23, 0.25);
}

/* ============================================================
   10 THEMES FINAL
   ============================================================ */

/* 🌲 FOREST */
body[data-theme="forest"] {
    --ac: #166534;
    --acl: #22c55e;
    --acd: #14532d;
    --ac-rgb: 22, 101, 52;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-forest { background: #166534; }

/* 🔵 BLUE */
body[data-theme="blue"] {
    --ac: #3b82f6;
    --acl: #60a5fa;
    --acd: #1e40af;
    --ac-rgb: 59, 130, 246;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-blue { background: #3b82f6; }

/* 🟢🔵 TEAL */
body[data-theme="teal"] {
    --ac: #0d9488;
    --acl: #14b8a6;
    --acd: #0f766e;
    --ac-rgb: 13, 148, 136;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-teal { background: #0d9488; }

/* 🟤 COFFEE */
body[data-theme="coffee"] {
    --ac: #6F4E37;
    --acl: #8B6858;
    --acd: #4A3226;
    --ac-rgb: 111, 78, 55;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-coffee { background: #6F4E37; }

/* 🩷 ROSE */
body[data-theme="rose"] {
    --ac: #e11d48;
    --acl: #fb7185;
    --acd: #be123c;
    --ac-rgb: 225, 29, 72;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-rose { background: #e11d48; }

/* 🧡 CORAL */
body[data-theme="coral"] {
    --ac: #f97316;
    --acl: #fb923c;
    --acd: #c2410c;
    --ac-rgb: 249, 115, 22;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-coral { background: #f97316; }

/* 🌊 CYAN SOFT */
body[data-theme="cyan"] {
    --ac: #0891b2;
    --acl: #22d3ee;
    --acd: #0e7490;
    --ac-rgb: 8, 145, 178;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-cyan { background: #0891b2; }

/* 🩶 SLATE */
body[data-theme="slate"] {
    --ac: #64748b;
    --acl: #94a3b8;
    --acd: #475569;
    --ac-rgb: 100, 116, 139;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-slate { background: #64748b; }

/* 🟣 MINERAL PURPLE */
body[data-theme="purple"] {
    --ac: #7c3aed;
    --acl: #a78bfa;
    --acd: #5b21b6;
    --ac-rgb: 124, 58, 237;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-purple { background: #7c3aed; }

/* 🌫 STONE */
body[data-theme="stone"] {
    --ac: #78716c;
    --acl: #a8a29e;
    --acd: #57534e;
    --ac-rgb: 120, 113, 108;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}
.t-stone { background: #78716c; }

/* ===== LAYOUT ===== */
#app {
    width: 100%;
    max-width: 540px;
    /* Slightly wider to feel more 'fluid' on tablets */
    height: 100dvh;
    margin: 0 auto;
    background: var(--app-bg);
    border-left: 1px solid var(--border-dim);
    border-right: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
}

#app,
.screen,
.screen-with-back,
.screen-scroll-body,
.glass-header,
.app-header,
.app-logo,
.header-right {
    min-width: 0;
}

/* ===== ULTRA PRO: GLASSMORMISM & ANIMATIONS ===== */
.glass-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--app-bg-rgb, 9, 9, 11), 0.75);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    /* Increased padding for more breathing room */
    padding: calc(var(--gr-3) + var(--safe-top)) var(--gr-4) var(--gr-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateZ(0);
    will-change: transform, backdrop-filter;
}

.anim-fade-down {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.anim-fade-up {
    opacity: 0;
    transform: translateY(15px);
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

.delay-550 {
    animation-delay: 0.55s;
}

.delay-600 {
    animation-delay: 0.6s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body[data-performance="lite"] {
    scroll-behavior: auto;
}


body[data-performance="lite"] .screen.active,
body[data-performance="lite"] .stagger-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body[data-performance="lite"] .screen.active {
    will-change: auto;
}

body[data-performance="lite"] .card-hero-rank,
body[data-performance="lite"] .stat-card,
body[data-performance="lite"] .achievement-card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    /* simple shadow */
}

.screen {
    display: none;
    flex-direction: column;
    height: 100%;
    contain: layout paint;
    overflow-y: auto;
    overflow-x: hidden;
    /* Added top padding for global breathing room and safe areas */
    padding: calc(var(--gr-3) + var(--safe-top)) var(--gr-4) calc(var(--gr-5) + var(--banner-space) + var(--safe-bottom));
    -webkit-overflow-scrolling: touch;
    transition: padding-bottom 0.28s ease;
    box-sizing: border-box;
    position: relative;
}

/* Screen yang tidak boleh scroll luar (scroll dalam) */
.screen-fixed {
    overflow: hidden !important;
}

.screen.active {
    display: flex;
    animation: screenFadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
}

@keyframes screenFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.screen.exit {
    animation: screenFadeOut 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes screenFadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-8px) scale(0.99);
    }
}

/* #stats, #settings, #kamus handled by .screen or .screen-fixed now */
#kamus {
    padding-bottom: 0 !important;
}

#beranda {
    /* Spacious bottom padding as requested, using GR-7 (89px equivalent) */
    padding: 0 var(--gr-4) calc(var(--gr-7) + var(--banner-space) + var(--safe-bottom));
    justify-content: flex-start;
    gap: clamp(6px, 1.2svh, 16px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: padding-bottom 0.28s ease;
    
    /* ✅ Batasi tinggi maksimal di layar besar */
    max-height: 900px;
}

/* ===== SCROLLBAR ===== */
/* Sembunyikan scrollbar global — scroll tetap berfungsi */
* {
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

/* Khusus #ulang (repetisi) — tampilkan scrollbar tipis */
#ulang,
#ulang * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

#ulang::-webkit-scrollbar,
#ulang *::-webkit-scrollbar {
    display: block;
    width: 4px;
}

#ulang::-webkit-scrollbar-track,
#ulang *::-webkit-scrollbar-track {
    background: transparent;
}

#ulang::-webkit-scrollbar-thumb,
#ulang *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ac), var(--acd));
    border-radius: 12px;
}

/* ===== SKELETON LOADING ===== */
.skeleton {
    background: var(--card-bg-solid);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.06) 60%,
            transparent 100%);
    transform: translateX(-100%);
    animation: skeletonShimmer 1.4s ease-in-out infinite;
}

body[data-mode="light"] .skeleton::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 0, 0, 0.04) 40%,
            rgba(0, 0, 0, 0.08) 50%,
            rgba(0, 0, 0, 0.04) 60%,
            transparent 100%);
}

/* ===== MINERAL LIGHT — matikan semua glow & shine ===== */
body[data-mode="light"] .opt-correct {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25) !important;
}

body[data-mode="light"] .opt-wrong {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}

body[data-mode="light"] .card-shine-top,
body[data-mode="light"] .card-shine-green,
body[data-mode="light"] .shine-top-green2,
body[data-mode="light"] .shine-top-minimal {
    display: none !important;
}

body[data-mode="light"] .xp-gain-icon {
    box-shadow: none !important;
}

body[data-mode="light"] .card-hero-rank,
body[data-mode="light"] .card-rank-wrap,
body[data-mode="light"] .card-stats-hero {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

body[data-mode="light"] .spell-answer-row.correct,
body[data-mode="light"] .spell-letter-btn.correct-slot {
    box-shadow: none !important;
}

body[data-mode="light"] .spell-answer-row.wrong,
body[data-mode="light"] .spell-letter-btn.wrong-slot {
    box-shadow: none !important;
}

/* Mineral mode tweaks: Repetisi button white bg but keep border in theme accent */
body[data-mode="light"] .btn-clamp-rel.btn-highlight {
    background: #ffffff !important;
    color: var(--text) !important;
    border: 1px solid var(--ac) !important;
    box-shadow: none !important;
}

body[data-mode="light"] #userMenuBtn {
    border: 3px solid #ffffff !important;
}

/* ===== MINERAL MODE: Remove ALL color glows, keep only grayscale shadows ===== */
body[data-mode="light"] .btn-primary {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

body[data-mode="light"] .btn-primary:active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

body[data-mode="light"] .btn-secondary {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body[data-mode="light"] .btn-secondary:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Progress bar - grayscale shadow only */
body[data-mode="light"] .prog-fill {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.08) !important;
}

/* Badge hovers - grayscale shadows only */
body[data-mode="light"] .b-A1:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

body[data-mode="light"] .b-A2:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

body[data-mode="light"] .b-B1:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

body[data-mode="light"] .b-B2:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Icon hover - remove color drop-shadow */
body[data-mode="light"] .btn-icon:hover svg {
    filter: none !important;
}

/* Cards - keep only subtle grayscale shadow */
body[data-mode="light"] .shadow-premium {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

body[data-mode="light"] .shadow-premium-lg {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Stars - remove all color glows (orange & blue) */
/* ===== NONAKTIFKAN GLOW BINTANG DI MODE MINERAL ===== */
body[data-mode="light"] .star-orange,
body[data-mode="light"] .star-blue,
body[data-mode="light"] [class*="star"] {
    filter: none !important;
    animation: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Juga untuk bintang di review card (koleksi) */
body[data-mode="light"] .review-card svg[fill="#fbbf24"],
body[data-mode="light"] .review-card svg[fill="#f97316"],
body[data-mode="light"] .review-card svg[fill="#38bdf8"] {
    filter: none !important;
    opacity: 0.85;
}

/* Untuk bintang di daftar koleksi (bookmark) */
body[data-mode="light"] .vocab-card svg,
body[data-mode="light"] .ulang-item svg {
    filter: none !important;
    animation: none !important;
}

/* Matikan glow di bintang koleksi spesifik */
body[data-mode="light"] .review-card .star-orange,
body[data-mode="light"] .review-card .star-blue,
body[data-mode="light"] .ulang-item .star-orange,
body[data-mode="light"] .ulang-item .star-blue {
    filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Pastikan warna bintang tetap terlihat tapi tanpa glow */
body[data-mode="light"] .star-orange {
    color: #f97316 !important;
    opacity: 0.9 !important;
}

body[data-mode="light"] .star-blue {
    color: #38bdf8 !important;
    opacity: 0.9 !important;
}

/* Matikan animasi global di mode mineral kecuali yang penting */
body[data-mode="light"] .review-card .star-orange,
body[data-mode="light"] .review-card .star-blue,
body[data-mode="light"] .ulang-item .star-orange,
body[data-mode="light"] .ulang-item .star-blue,
body[data-mode="light"] [class*="star"] {
    animation-play-state: paused !important;
}

@keyframes skeletonShimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Skeleton variants */
.skeleton-text {
    height: 13px;
    border-radius: var(--radius-xs);
    margin-bottom: 8px;
}

.skeleton-text-sm {
    height: 11px;
    border-radius: var(--radius-xs);
    margin-bottom: 6px;
    width: 55%;
}

.skeleton-text-xs {
    height: 9px;
    border-radius: var(--radius-xs);
    width: 35%;
}

.skeleton-card {
    height: 80px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.skeleton-vocab-card {
    height: 48px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}

.skeleton-stat-card {
    height: 72px;
    border-radius: var(--radius-lg);
    flex: 1;
}

.skeleton-hero {
    height: 80px;
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}

.skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* ===== TYPOGRAPHY SYSTEM (Modular Φ Scale) ===== */
.text-xs {
    font-size: var(--gr-text-xs);
}

.text-sm {
    font-size: var(--gr-text-sm);
}

.text-base {
    font-size: var(--gr-text-base);
}

.text-lg {
    font-size: var(--gr-text-lg);
}

.text-xl {
    font-size: var(--gr-text-xl);
}

.text-2xl {
    font-size: var(--gr-text-2xl);
}

.text-3xl {
    font-size: var(--gr-text-3xl);
}

.text-4xl {
    font-size: var(--gr-text-4xl);
}

.text-5xl {
    font-size: var(--gr-text-5xl);
}

.fw-bold {
    font-weight: 700;
}

/* primary UI weight */
.fw-black {
    font-weight: 800;
}

/* heading/emphasis weight */
.fw-semi {
    font-weight: 700;
}

/* same as fw-bold — kept for compat */

/* ===== COLORS ===== */
.c-accent {
    color: var(--ac);
}

.c-light {
    color: var(--acl);
}

.c-zinc4 {
    color: var(--text-muted);
}

.c-zinc5 {
    color: var(--text-dim);
}

.c-zinc6 {
    color: var(--text-zinc6);
}

.c-green {
    color: var(--color-success-light);
}

.c-red {
    color: var(--color-error-light);
}

.c-amber {
    color: var(--color-warning-light);
}

/* ===== BUTTONS ===== */
button {
    border: none;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.15s, box-shadow 0.15s;
}

button:active {
    transform: scale(0.95);
    filter: brightness(0.97);
}

.btn-primary {
    will-change: transform;
    background: linear-gradient(135deg, var(--ac), var(--acd));
    color: #fff;
    width: 100%;
    padding: var(--gr-4);
    border-radius: var(--radius-md);
    font-size: var(--gr-text-base);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gr-2);
    box-shadow: 0 8px 20px -4px var(--acs);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s, box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}



.btn-success {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #fff !important;
}

.btn-primary:active {
    transform: scale(0.97);
    filter: brightness(0.97);
    box-shadow: 0 4px 12px -4px var(--acs);
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: 1px solid var(--card-border);
    flex: 1;
    padding: var(--gr-4);
    border-radius: var(--radius-md);
    font-size: var(--gr-text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gr-2);
    box-shadow: 0 0 0 1px var(--acs);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-highlight {
    border-color: var(--ac) !important;
    background: rgba(var(--ac-rgb), 0.08) !important;
    box-shadow: 0 0 12px -4px var(--acs) !important;
}



.btn-ghost {
    background: transparent;
    color: var(--text-zinc6);
    font-size: 12px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-ghost:hover {
    color: var(--color-error);
}

.btn-back {
    background: transparent;
    color: var(--ac);
    font-size: var(--gr-text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 0 12px 0;
    flex-shrink: 0;
}

/* Wrapper untuk screen yang punya tombol kembali + konten scroll */
.screen-with-back {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.screen-with-back .screen-scroll-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--gr-1);
    /* Small extra top gap */
    padding-bottom: calc(var(--gr-6) + var(--banner-space) + var(--safe-bottom));
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--btn-secondary-bg);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
    overflow: hidden;
    flex-shrink: 0;
}

#userMenuBtn {
    border: 3px solid var(--card-border);
    transition: border-color s;
}

#userMenuBtn:hover {
    border-color: var(--ac);
}

.btn-icon:hover {
    color: var(--text);
}

/* ===== CARDS ===== */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--gr-4);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}



.card-lg {
    border-radius: var(--radius-xl);
    padding: var(--gr-4);
}

/* Premium shadow utilities */
.shadow-premium {
    box-shadow: 0 8px 24px -4px var(--acs), 0 0 20px -6px rgba(255, 255, 255, 0.05);
}

.shadow-premium-lg {
    box-shadow: 0 12px 32px -4px var(--acs), 0 0 30px -8px rgba(255, 255, 255, 0.08);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gr-3);
    margin-bottom: var(--gr-4);
}

.stat-grid.grid-4col {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gr-2);
}

.stat-card {
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--gr-3) var(--gr-sm);
    /* Slightly more vertical padding */
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70px;
}



.stat-num {
    font-size: var(--gr-text-lg);
    font-weight: 800;
    color: var(--acl);
    display: block;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.stat-lbl {
    font-size: var(--gr-text-xs);
    color: var(--text-zinc6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--gr-1);
    display: block;
}

.stat-ring {
    opacity: 0.25;
    color: var(--ac);
}

/* ===== PROGRESS BAR ===== */
.prog-wrap {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
}

.prog-fill {
    background: linear-gradient(90deg, var(--ac), var(--acl));
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px -2px var(--acs);
}

/* ===== LEVEL BADGES ===== */
.badge {
    font-size: var(--gr-text-xs);
    font-weight: 700;
    padding: var(--gr-1) var(--gr-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.badge:hover {
    transform: translateY(-1px) scale(1.05);
}

.b-A1 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.2);
    color: var(--acl);
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.4);
}

.b-A1:hover {
    box-shadow: 0 2px 8px -2px rgba(var(--ac-rgb, 16, 185, 129), 0.4);
}

.b-A2 {
    background: rgba(var(--badge-blue-rgb, 59, 130, 246), 0.2);
    color: #60a5fa;
    border: 1px solid rgba(var(--badge-blue-rgb, 59, 130, 246), 0.4);
}

.b-A2:hover {
    box-shadow: 0 2px 8px -2px rgba(var(--badge-blue-rgb, 59, 130, 246), 0.4);
}

.b-B1 {
    background: rgba(var(--badge-yellow-rgb, 234, 179, 8), 0.2);
    color: var(--color-warning-vivid);
    border: 1px solid rgba(var(--badge-yellow-rgb, 234, 179, 8), 0.4);
}

.b-B1:hover {
    box-shadow: 0 2px 8px -2px rgba(var(--badge-yellow-rgb, 234, 179, 8), 0.4);
}

.b-B2 {
    background: rgba(var(--badge-red-rgb, 239, 68, 68), 0.2);
    color: var(--color-error-light);
    border: 1px solid rgba(var(--badge-red-rgb, 239, 68, 68), 0.4);
}

.b-B2:hover {
    box-shadow: 0 2px 8px -2px rgba(var(--badge-red-rgb, 239, 68, 68), 0.4);
}

/* ===== ICON ANIMATIONS ===== */
.icon-pulse {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.icon-bounce {
    animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.btn-icon svg {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
}

.btn-icon:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px var(--acs));
}

.btn-icon:active svg {
    transform: scale(0.95);
}

/* ===== STAGGERED CONTENT ANIMATION ===== */
.stagger-in {
    opacity: 0;
    animation: staggerIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.stagger-in-delay-1 {
    animation-delay: 0.05s;
}

.stagger-in-delay-2 {
    animation-delay: 0.1s;
}

.stagger-in-delay-3 {
    animation-delay: 0.15s;
}

.stagger-in-delay-4 {
    animation-delay: 0.2s;
}

.stagger-in-delay-5 {
    animation-delay: 0.25s;
}

@keyframes staggerIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== VOCAB CARD ===== */
.vocab-card {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    /* Exact height as requested */
    padding: 0 var(--gr-3);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 0;
    gap: var(--gr-2);
}



.vocab-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    /* Reduced gap for compact height */
    flex: 1;
    min-width: 0;
}

.vocab-word {
    font-weight: 700;
    font-size: 13px;
    color: var(--acl);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vocab-mean {
    font-size: 11px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.vs-num {
    font-size: 10px;
    color: var(--text-placeholder);
    min-width: 20px;
    text-align: right;
    flex-shrink: 0;
    font-weight: 700;
}

.vocab-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.btn-star {
    background: transparent;
    font-size: 15px;
    padding: 4px 6px;
    transition: transform 0.2s;
}

.btn-star:active {
    transform: scale(1.4);
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
}

.star-on {
    color: var(--color-warning-light);
}

.star-off {
    color: var(--card-border);
}

.star-off:hover {
    color: var(--text-dim);
}

/* Bintang review state */
.star-orange {
    color: var(--color-orange);
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.7));
    animation: shimmer-orange 2s ease-in-out infinite;
}

.star-blue {
    color: var(--color-info);
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.8));
    animation: pulse-blue 2s ease-in-out infinite;
}

@keyframes shimmer-orange {

    0%,
    100% {
        filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.9));
    }
}

@keyframes pulse-blue {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(56, 189, 248, 1));
    }
}

/* ===== SEARCH ===== */
.search-wrap {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 42px;
}

.search-box {
    flex: 1;
    width: 100%;
    height: 42px;
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 0 12px 0 36px;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s;
    position: relative;
}

.search-box:focus {
    border-color: var(--ac);
    background: var(--card-bg-solid);
    box-shadow: 0 0 0 2px var(--acs);
}

.search-box::placeholder {
    color: var(--text-placeholder);
    opacity: 0.8;
}

.search-wrap-inner {
    position: relative;
    flex: 1;
    min-width: 0;
}

.search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

select.filter-sel {
    flex: 0 0 76px;
    height: 42px;
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-radius: var(--radius-md);
    padding: 0 10px;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s;
}

select.filter-sel:focus {
    border-color: var(--ac);
    background: var(--card-bg-solid);
    box-shadow: 0 0 0 2px var(--acs);
}

@media (max-width: 360px) {
    .search-wrap {
        gap: 6px;
    }

    select.filter-sel {
        flex-basis: 66px;
        padding: 0 7px;
    }
}

/* ===== SUSUN HURUF (SPELLING QUIZ) ===== */
.spell-meaning {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin-bottom: 6px;
    line-height: 1.4;
}

.spell-hint {
    font-size: 11px;
    color: var(--text-zinc6);
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.spell-answer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 16px;
    padding: 8px;
    border-radius: var(--radius-sm);
    background: var(--example-bg);
    border: 1.5px dashed var(--card-border);
}

.spell-answer-row.correct {
    border-color: var(--color-success);
    background: rgba(22, 163, 74, 0.08);
}

.spell-answer-row.wrong {
    border-color: var(--color-error-dark);
    background: rgba(220, 38, 38, 0.08);
}

.spell-letter-btn {
    width: 36px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    border: 1.5px solid var(--card-border);
    background: var(--input-bg);
    color: var(--acl);
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}

.spell-letter-btn:active {
    transform: scale(0.88);
}

.spell-letter-btn.used {
    background: var(--bg);
    color: var(--card-border);
    border-color: var(--border-dim);
    cursor: default;
}

.spell-letter-btn.answer-slot {
    background: var(--acs);
    border-color: var(--ac);
    color: var(--acl);
    cursor: pointer;
}

.spell-letter-btn.answer-slot:active {
    transform: scale(0.88);
}

.spell-letter-btn.correct-slot {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success-light);
}

.spell-letter-btn.wrong-slot {
    background: var(--color-error-bg);
    border-color: var(--color-error-dark);
    color: var(--color-error-light);
}

.spell-bank-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}

.spell-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.spell-clear-btn {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--card-border);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}

.spell-clear-btn:hover {
    border-color: var(--border-strong);
    color: var(--text-muted);
}

.spell-check-btn {
    background: var(--ac);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}

.spell-check-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.spell-mode-label {
    display: inline-block;
    font-size: 10px;
    background: var(--color-warning-bg);
    color: var(--color-warning-vivid);
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

/* ===== BOOKMARK SORT BUTTONS ===== */
.bm-header-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.bm-sort-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* ← Ubah dari flex-end ke flex-start */
    gap: 6px;
    width: auto;  /* ← Ubah dari 100% ke auto */
    background: transparent;
}

.bm-sort-label {
    flex: 0 0 auto;  /* ← Jangan melar */
    padding: 0;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 1;
    white-space: nowrap;
    pointer-events: none;
}

.bm-sort-btn {
    width: auto;  /* ← Ubah dari 20% ke auto */
    min-width: 52px;  /* ← Ukuran minimal yang lebih kecil */
    flex-shrink: 0;
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.7);
    border: 1px solid var(--card-border);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    padding: 6px 12px;  /* ← Kurangi padding */
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
}

.bm-sort-btn:hover {
    color: var(--text-muted);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -2px var(--acs);
}

.bm-sort-active {
    background: var(--acs);
    border-color: var(--ac);
    color: var(--acl) !important;
    box-shadow: 0 0 0 1px var(--acs);
}

/* Responsif untuk layar kecil - tetap rapi */
@media (max-width: 360px) {
    .bm-sort-panel {
        gap: 4px;
    }
    
    .bm-sort-btn {
        min-width: 44px;
        padding: 5px 8px;
        font-size: 9px;
    }
}

/* ===== SCREEN ULANG ===== */
.ulang-filter-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}

.ulang-tab {
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.85);
    border: 1px solid var(--card-border);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.ulang-tab:hover {
    border-color: var(--ac);
    color: var(--text-muted);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -2px var(--acs);
}

.ulang-tab.active {
    background: var(--acs);
    border-color: var(--ac);
    color: var(--acl);
    box-shadow: 0 0 0 1px var(--acs);
}

.ulang-sort-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -4px 0 12px;
}

.ulang-sort-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.6);
}

.ulang-sort-btn {
    min-width: 68px;
    border: 0;
    border-radius: calc(var(--radius-sm) - 3px);
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 9px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}

.ulang-sort-btn.active {
    background: var(--acs);
    color: var(--acl);
}

.ulang-sort-btn:active {
    transform: scale(0.96);
}

.ulang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    /* Fixed height as requested */
    padding: 0 var(--gr-5);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.85);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--gr-2);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.ulang-item.selected {
    border-color: var(--ac);
    background: var(--acs);
    box-shadow: 0 0 0 2px var(--acs), 0 4px 12px -2px var(--acs);
}

.ulang-item.frozen {
    cursor: default;
    background: linear-gradient(135deg,
            rgba(147, 197, 253, 0.06) 0%,
            var(--card-bg) 40%,
            rgba(186, 230, 253, 0.04) 100%);
    border-color: rgba(147, 197, 253, 0.2);
    position: relative;
    overflow: hidden;
}

.ulang-item.frozen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(186, 230, 253, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(147, 197, 253, 0.05) 0%, transparent 45%);
    pointer-events: none;
    border-radius: var(--radius-md);
}

.ulang-item.frozen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(186, 230, 253, 0.25), transparent);
    pointer-events: none;
}

.ulang-item.frozen .ulang-word {
    color: #a1b8cc;
}

.ulang-item.frozen .ulang-mean {
    color: #4a6070;
}

.ulang-check {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 2px solid var(--checkbox-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.ulang-item.selected .ulang-check {
    background: var(--ac);
    border-color: var(--ac);
    box-shadow: 0 0 0 2px var(--acs), 0 4px 12px -2px var(--acs);
}

.ulang-item.frozen .ulang-check {
    border-color: rgba(147, 197, 253, 0.2);
    background: rgba(147, 197, 253, 0.04);
}

.ulang-word {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.ulang-mean {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.ulang-status-ready {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-success-light);
    white-space: nowrap;
}

.ulang-status-frozen {
    font-size: 10px;
    font-weight: 700;
    color: #5b8ba8;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ulang-bottom-bar {
    position: sticky;
    bottom: var(--banner-space);
    background: var(--bg);
    padding: 12px 0 4px;
    border-top: 1px solid var(--border-dim);
    margin-top: 6px;
    transition: bottom 0.28s ease;
}

/* ===== USER NAME INPUT ===== */
.user-name-input-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.name-input {
    flex: 1;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    color: var(--text);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.name-input:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--acs), 0 0 12px -4px var(--ac);
}

.name-input::placeholder {
    color: var(--text-placeholder);
    opacity: 0.8;
}

.btn-save-name {
    background: var(--ac);
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-save-name:active {
    opacity: 0.8;
}

/* ===== QUIZ ===== */
.quiz-option {
    will-change: transform;
    width: 100%;
    text-align: left;
    padding: var(--gr-4) var(--gr-5);
    border-radius: var(--radius-md);
    font-size: var(--gr-text-sm);
    font-weight: 700;
    border: 1.5px solid transparent;
    margin-bottom: var(--gr-3);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.9);
    color: var(--btn-secondary-text);
    border-color: var(--card-border);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: block;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
}



.quiz-option:not(:disabled):active {
    transform: translateY(0) scale(0.98);
}

.opt-correct {
    background: var(--color-success-bg) !important;
    border-color: var(--color-success) !important;
    color: var(--color-success-subtle) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 4px 16px -4px rgba(34, 197, 94, 0.3) !important;
}

.opt-wrong {
    background: var(--color-error-bg) !important;
    border-color: var(--color-error-dark) !important;
    color: var(--color-error-subtle, #fca5a5) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), 0 4px 16px -4px rgba(239, 68, 68, 0.3) !important;
}

.opt-faded {
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.3) !important;
    border-color: var(--border-dim) !important;
    color: var(--text-faint) !important;
    opacity: 0.6;
}

.quiz-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    row-gap: 5px;
    align-items: center;
    justify-content: center;
    max-width: 240px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

/* Dot mengecil otomatis bila banyak soal */
.quiz-dots.dots-sm .dot {
    width: 6px;
    height: 6px;
}

.quiz-dots.dots-sm {
    gap: 4px;
    row-gap: 4px;
}

.dot-active {
    background: var(--ac);
    border-color: var(--acl);
    transform: scale(1.4);
    box-shadow: 0 0 8px -2px var(--acs);
}

.dot-correct {
    background: var(--color-success);
    border-color: var(--color-success-light);
    box-shadow: 0 0 6px -1px rgba(34, 197, 94, 0.5);
}

.dot-wrong {
    background: var(--color-error-dark);
    border-color: var(--color-error-light);
    box-shadow: 0 0 6px -1px rgba(239, 68, 68, 0.5);
}

/* Separator antar fase */
.dot-sep {
    width: 1.5px;
    height: 10px;
    background: var(--card-border);
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0.6;
    margin: 0 1px;
}

.quiz-dots.dots-sm .dot-sep {
    height: 7px;
    margin: 0;
}

/* ===== EXAMPLE BOX ===== */
.example-box {
    background: var(--example-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--gr-3) var(--gr-4);
    margin-bottom: var(--gr-4);
}

.example-lbl {
    font-size: 9px;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ===== RESULTS SCREEN ===== */
#quizResults {
    padding-top: 0;
    background: var(--app-bg);
}

.result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--gr-3) var(--gr-4);
    /* Reverted to compact padding as requested */
    background: linear-gradient(180deg, rgba(var(--ac-rgb), 0.12) 0%, transparent 100%);
    border-radius: var(--radius-lg);
    margin: 0 0 var(--gr-3);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--ac-rgb), 0.1);
}

.result-header::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--acs) 0%, transparent 70%);
    transform: translateX(-50%);
    opacity: 0.6;
    pointer-events: none;
}

#resEmoji {
    font-size: 34px;
    /* Reduced emoji size */
    margin-bottom: var(--gr-1);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
}

#resPct {
    font-size: var(--gr-text-4xl);
    font-weight: 900;
    background: linear-gradient(135deg, var(--text), var(--ac));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin: var(--gr-1) 0;
    filter: drop-shadow(0 4px 12px var(--acs));
    letter-spacing: -1px;
}

.review-card {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--gr-3);
    margin-bottom: var(--gr-2);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
    animation: reviewSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes reviewSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger delays (up to 10 items) */
.stagger-item:nth-child(1) {
    animation-delay: 0.1s;
}

.stagger-item:nth-child(2) {
    animation-delay: 0.15s;
}

.stagger-item:nth-child(3) {
    animation-delay: 0.2s;
}

.stagger-item:nth-child(4) {
    animation-delay: 0.25s;
}

.stagger-item:nth-child(5) {
    animation-delay: 0.3s;
}

.stagger-item:nth-child(6) {
    animation-delay: 0.35s;
}

.stagger-item:nth-child(7) {
    animation-delay: 0.4s;
}

.stagger-item:nth-child(8) {
    animation-delay: 0.45s;
}

.stagger-item:nth-child(9) {
    animation-delay: 0.5s;
}

.stagger-item:nth-child(10) {
    animation-delay: 0.55s;
}

.review-card:active {
    transform: scale(0.98);
    background: var(--surface-hover);
}

.review-correct {
    border-left: 4px solid var(--color-success);
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), transparent);
    box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.1);
}

.review-wrong {
    border-left: 4px solid var(--color-error-dark);
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent);
    box-shadow: 0 4px 12px -4px rgba(239, 68, 68, 0.1);
}

.review-card-word {
    font-size: var(--gr-text-base);
    font-weight: 800;
    color: var(--text);
}

.review-card-mean {
    font-size: var(--gr-text-xs);
    color: var(--text-muted);
}

.review-card-user {
    font-size: var(--gr-text-sm);
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== STATS GRID ===== */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gr-md);
    margin-bottom: var(--gr-lg);
}

.stats-card {
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.9);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--gr-md);
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}



.stats-num {
    font-size: var(--gr-text-xl);
    font-weight: 800;
    color: var(--acl);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.stats-lbl {
    font-size: var(--gr-text-xs);
    color: var(--text-placeholder);
    margin-top: var(--gr-1);
}

/* ===== THEME BUTTONS ===== */
.theme-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.theme-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.theme-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
}

.theme-btn.active {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.3), 0 0 12px -2px rgba(0, 0, 0, 0.2);
}

.t-green {
    background: var(--color-success);
}

.t-blue {
    background: #2563eb;
}

.t-teal {
    background: #0d9488;
}

.t-coffee {
    background: #6F4E37;
}

.t-rose {
    background: #e11d48;
}

.t-purple {
    background: #8b5cf6;
}

.t-red {
    background: var(--color-error-dark);
}

/* ===== RANGE SLIDER ===== */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 99px;
    outline: none;
    transition: background 0.2s, border-color 0.2s;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ac), var(--acl));
    cursor: pointer;
    box-shadow: 0 2px 8px -2px var(--acs);
    transition: transform 0.2s, box-shadow 0.2s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px -2px var(--acs);
}

/* ===== AUDIO WAVE ===== */
#audioIndicator {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 20;
    background: var(--audio-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 5px 9px;
    display: none;
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}

.wave-bar {
    width: 3px;
    background: var(--ac);
    border-radius: 4px;
    animation: wv 1s ease-in-out infinite;
}

.wave-bar:nth-child(1) {
    height: 10px;
}

.wave-bar:nth-child(2) {
    height: 16px;
    animation-delay: 0.2s;
}

.wave-bar:nth-child(3) {
    height: 8px;
    animation-delay: 0.4s;
}

.wave-bar:nth-child(4) {
    height: 14px;
    animation-delay: 0.3s;
}

.wave-bar:nth-child(5) {
    height: 10px;
    animation-delay: 0.1s;
}

@keyframes wv {

    0%,
    100% {
        transform: scaleY(0.4);
    }

    50% {
        transform: scaleY(1);
    }
}

/* ===== TOAST ===== */
#toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 9999;
    will-change: transform, opacity;
    padding: var(--gr-2) var(--gr-3);
    border-radius: var(--radius-md);
    font-size: var(--gr-text-sm);
    font-weight: 700;
    color: var(--text);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.92);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--toast-border, rgba(255, 255, 255, 0.1));
    display: none;
    white-space: normal;
    min-width: 168px;
    max-width: min(86vw, 360px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3), 0 0 16px -4px rgba(255, 255, 255, 0.05);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

#toast,
#achieveToast,
.user-menu-dropdown,
.modal-confirm-box {
    max-width: calc(100vw - 24px);
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#toast.toast-success {
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.08);
}

#toast.toast-error {
    border-color: rgba(239, 68, 68, 0.26);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(239, 68, 68, 0.08);
}

#toast.toast-loading,
#toast.toast-info {
    border-color: var(--toast-border);
}

.toast-inner {
    display: flex;
    align-items: center;
    gap: 9px;
    line-height: 1.45;
}

.toast-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.toast-success .toast-icon {
    color: var(--acl);
}

.toast-error .toast-icon {
    color: var(--color-error-light);
}

.toast-loading .toast-icon {
    color: var(--text-muted);
}

.toast-msg {
    display: block;
    min-width: 0;
}

.toast-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.8px solid var(--toast-spinner-border, rgba(255, 255, 255, 0.18));
    border-top-color: currentColor;
    animation: spin 0.85s linear infinite;
}

#achieveToast {
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    will-change: top, opacity;
    min-width: 240px;
    max-width: 300px;
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.85);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.3);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    box-shadow: 0 12px 40px -4px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--ac-rgb, 16, 185, 129), 0.12), 0 0 24px -6px rgba(var(--ac-rgb, 16, 185, 129), 0.2);
    transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

#achieveToast.show {
    top: 16px;
    opacity: 1;
}

#achieveToast.hide {
    top: -120px;
    opacity: 0;
    transition: top 0.4s ease-in, opacity 0.3s ease-in;
}

.achieve-toast-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.achieve-toast-icon {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--ac), var(--acd));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px -2px var(--acs);
}

.achieve-toast-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--acl);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.achieve-toast-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}

.achieve-toast-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

@keyframes achieveShine {
    0% {
        left: -60%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

.achieve-toast-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(90deg, transparent, rgba(var(--acl-rgb, 52, 211, 153), 0.15), transparent);
    animation: achieveShine 2.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: var(--radius-lg);
}

/* ===== ACHIEVEMENT ===== */
.achieve-cat-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.achieve-cat-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--card-border);
}

.achieve-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}

.achieve-item {
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.85);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.achieve-item.unlocked {
    background: linear-gradient(135deg, rgba(var(--ac-rgb, 16, 185, 129), 0.12), rgba(var(--card-bg-rgb, 24, 24, 27), 0.6));
    border-color: rgba(var(--ac-rgb, 16, 185, 129), 0.4);
}

.achieve-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.achieve-item.locked .achieve-icon-wrap {
    background: var(--surface-hover);
}

.achieve-item-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.achieve-item.locked .achieve-item-name {
    color: var(--text-placeholder);
}

.achieve-item-desc {
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.4;
}

.achieve-item.locked .achieve-item-desc {
    color: var(--text-faint);
}

@keyframes achievePop {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    70% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.achieve-item.unlocked {
    animation: achievePop 0.35s ease both;
}

/* ===== ANIMATIONS ===== */
@keyframes popIn {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    70% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes fire {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes trophyGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.95));
        transform: scale(1.07);
    }
}

@keyframes greenGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(74, 222, 128, 0.6));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.95));
        transform: scale(1.07);
    }
}

@keyframes purpleGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(167, 139, 250, 0.95));
        transform: scale(1.07);
    }
}

@keyframes redGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.6));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 18px rgba(248, 113, 113, 0.95));
        transform: scale(1.07);
    }
}

.trophy-anim {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, trophyGlow 2.2s ease-in-out 0.6s infinite;
}

.green-glow {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, greenGlow 2.2s ease-in-out 0.6s infinite;
}

.purple-glow {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, purpleGlow 2.2s ease-in-out 0.6s infinite;
}

.red-glow {
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both, redGlow 2.2s ease-in-out 0.6s infinite;
}

.anim-fadeup {
    animation: fadeUp 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.anim-popin {
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.anim-shake {
    animation: shake 0.4s ease-in-out;
}

.anim-pulse {
    animation: pulse 0.5s ease-in-out;
}

.fire-anim {
    display: inline-block;
    animation: fire 1.2s ease-in-out infinite;
}

/* ===== HEADER ===== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.app-logo>div {
    min-width: 0;
}

.logo-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--ac) 0%, var(--acd) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 6px 20px var(--acs),
        0 2px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.logo-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 55%);
    border-radius: inherit;
}

.logo-icon svg {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

.logo-title {
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
}

.logo-title span {
    color: var(--acl);
}

.logo-sub {
    font-size: 9px;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-top: 4px;
    font-weight: 700;
    white-space: nowrap;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Header expanded buttons — tersembunyi secara default */
.header-expanded-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    z-index: 9999;
    position: relative;
    pointer-events: auto;
    transition: max-width 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease;
}

.header-expanded-btns.open {
    max-width: 220px;
    opacity: 1;
    display: flex !important;
    /* Ensure it's flex when open */
}

/* Sembunyikan hamburger saat menu terbuka (opsional, sesuai request 'seperti semula') */
.btn-hamburger.is-open {
    display: none !important;
}

/* Mode permanent — selalu tampil tanpa hamburger, tidak ada animasi expand */
.header-expanded-btns.header-btns-permanent {
    max-width: none;
    opacity: 1;
    overflow: visible;
    transition: none;
}

/* Kecilkan tombol di header-right agar 4 tombol + streak muat rapi */
.header-right .header-btns-permanent .btn-icon {
    width: 34px;
    height: 34px;
}

.header-right .header-btns-permanent .btn-icon svg {
    width: 15px;
    height: 15px;
}

.streak-badge {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--streak-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--streak-border);
    border-radius: 99px;
    padding: 4px 10px;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    max-width: 120px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.streak-badge.show {
    display: flex;
}

.streak-badge.premium-active {
    border-color: #38bdf8 !important;
    background: var(--streak-bg) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.streak-badge.premium-active svg {
    filter: none !important;
}

.streak-badge.premium-active svg path {
    fill: #38bdf8 !important;
}

.streak-badge.premium-active .streak-num {
    color: #38bdf8 !important;
}

.streak-num {
    font-size: clamp(14px, 3.2vw, 17px);
    font-weight: 800;
    color: var(--color-orange-warm);
}

/* ── User menu premium badge ── */
.user-menu-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}

.user-menu-premium-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 99px;
    padding: 2px 7px;
    white-space: nowrap;
}

.user-menu-premium-time {
    font-size: 10px;
    color: #38bdf8;
    font-weight: 600;
    margin-bottom: 4px;
    opacity: 0.85;
}

/* ===== HERO ===== */
.hero {
    text-align: center;
    padding: 20px 8px 24px;
}

.hero h2 {
    font-size: var(--gr-text-2xl);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--gr-3);
}

.hero p {
    font-size: 14px;
    color: var(--text-dim);
}

/* ===== ACTION BUTTONS ===== */
.btn-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

/* ===== NAV QUIZ ===== */
.quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.btn-nav-back {
    background: transparent;
    color: var(--ac);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
}

.quiz-btn-row {
    display: flex;
    gap: var(--gr-3);
    margin-top: var(--gr-4);
}

.btn-prev {
    background: var(--card-bg-solid);
    color: var(--text-muted);
    border: 1px solid var(--card-border);
    padding: var(--gr-3) var(--gr-4);
    border-radius: var(--radius-md);
    font-size: var(--gr-text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--gr-2);
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}

.btn-prev:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-next-q {
    flex: 1;
    background: var(--ac);
    color: #fff;
    padding: 13px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

/* ── Hint button ── */
.btn-hint {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.1);
    color: var(--ac);
    border: 1.5px solid rgba(var(--ac-rgb, 16, 185, 129), 0.3);
    padding: 11px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

.btn-hint:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.btn-hint.hint-used {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.05);
    opacity: 0.4;
}

/* ── Hint sheet (bottom overlay) ── */
.hint-overlay {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease both;
}

.hint-sheet {
    background: var(--card-bg-solid);
    border-radius: 20px 20px 0 0;
    padding: 20px 20px calc(20px + var(--safe-bottom));
    width: 100%;
    max-width: 480px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.3);
    animation: stk-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hint-sheet-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hint-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-dim);
}

.hint-row:last-child {
    border-bottom: none;
}

.hint-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.12);
    color: var(--ac);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hint-word {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.hint-mean {
    font-size: 12px;
    color: var(--text-muted);
}

.hint-close-btn {
    width: 100%;
    margin-top: 16px;
    padding: 13px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--card-border);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* ===== HIGHLIGHT ===== */
mark.hl {
    background: var(--acs);
    color: var(--acl);
    border-radius: 4px;
}

/* ===== WRONG BAR ===== */
.wrong-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wrong-bar-bg {
    flex: 1;
    background: var(--card-border);
    border-radius: 99px;
    height: 6px;
    overflow: hidden;
}

.wrong-bar-fill {
    background: rgba(239, 68, 68, 0.6);
    height: 100%;
    border-radius: 99px;
}

/* ===== DIVIDER ===== */
.divider {
    border: none;
    border-top: 1px solid var(--border-dim);
    margin: 16px 0;
}

/* ===== PUISI SCREEN ===== */
/* Jangan set display di #puisi — biarkan .screen/.active mengontrol agar Puisi ikut disembunyikan saat pindah halaman */
#puisi {
    overflow: hidden;
    padding-top: 0;
    /* Header handles padding */
}

#puisi.active {
    display: flex;
    flex-direction: column;
}

.puisi-top {
    padding: calc(var(--gr-3) + var(--safe-top)) var(--gr-4) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Level tabs — geser ke samping */
.puisi-tabs {
    display: flex;
    gap: var(--gr-2);
    padding: var(--gr-3) var(--gr-4) var(--gr-2);
    flex-shrink: 0;
    overflow-x: hidden;
}

.puisi-tab {
    flex: 1;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 800;
    border: 1.5px solid var(--card-border);
    background: var(--card-bg-solid);
    color: var(--text-zinc6);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    letter-spacing: 0.04em;
}

.puisi-tab:not(.locked):hover {
    transform: translateY(-2px);
    border-color: var(--ac);
    box-shadow: 0 4px 12px -2px var(--acs);
}

.puisi-tab.active {
    background: var(--ac);
    color: #fff;
    border-color: var(--acl);
    box-shadow: 0 0 0 2px var(--acs), 0 4px 12px -2px var(--acs);
}

.puisi-tab.locked {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Wrapper slide level — overflow hidden, hanya render aktif */
.puisi-levels-wrap {
    flex: 1;
    overflow: hidden;
    overflow-x: hidden;
    position: relative;
}

.puisi-level-panel {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: var(--gr-2) var(--gr-4) calc(var(--gr-7) + var(--safe-bottom));
    display: none;
}

.puisi-level-panel.active {
    display: block;
}

/* Kartu puisi — scroll ke bawah */
.puisi-poem-card {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
}

.puisi-poem-card:not(.locked-card):hover {
    transform: translateY(-2px);
    border-color: var(--ac);
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
}

.puisi-poem-card.locked-card {
    opacity: 0.45;
}

.puisi-poem-card.has-bookmark {
    border-color: var(--color-warning-light);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
}

.puisi-progress-bar {
    height: 4px;
    background: var(--card-border);
    border-radius: 4px;
}

.puisi-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ac), var(--acl));
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 8px -2px var(--acs);
}

.puisi-poem-header {
    display: flex;
    align-items: center;
    gap: var(--gr-2);
    padding: var(--gr-3) var(--gr-4);
    cursor: pointer;
}

.puisi-poem-header:active {
    background: var(--acs);
}

.puisi-poem-num {
    font-size: 10px;
    color: var(--text-zinc6);
    font-weight: 700;
    flex-shrink: 0;
}

.bantuan-section {
    background: var(--card-bg-solid);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--card-border);
}

.bantuan-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--acl);
    border-bottom: 1px solid var(--card-border);
}

.bantuan-section-body {
    padding: var(--gr-3) var(--gr-4);
    font-size: var(--gr-text-sm);
    color: var(--text-muted);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    gap: var(--gr-2);
}

.bantuan-section-body p {
    margin: 0;
}

.bantuan-level-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
}

.bantuan-level-row span:last-child {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    padding-top: 1px;
}

.bantuan-tips .bantuan-section-header {
    color: var(--color-warning-light);
}

.bantuan-tip-card {
    background: var(--surface-deeper);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}

.bantuan-tip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
}

.bantuan-tip-card p {
    margin: 0;
    font-size: 12px;
}

.puisi-poem-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--acl);
    line-height: 1.3;
}

.puisi-poem-title-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.puisi-poem-title-id {
    font-size: 10px;
    font-weight: 400;
    color: var(--zinc5);
    line-height: 1.2;
    font-style: italic;
}

.puisi-level-header {
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--border-dim);
    margin-bottom: 4px;
}

.puisi-level-collection-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--acl);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.puisi-level-collection-id {
    font-size: 11px;
    font-weight: 400;
    color: var(--zinc5);
    font-style: italic;
    margin-top: 1px;
}

.puisi-level-prolog {
    font-size: 10.5px;
    color: var(--zinc6);
    line-height: 1.55;
    margin-top: 6px;
    font-style: italic;
}

.puisi-poem-prolog {
    font-size: 11px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.6;
    padding: 10px 14px 6px;
    border-bottom: 1px solid var(--border-dim);
}

.puisi-poem-meta {
    font-size: 10px;
    color: var(--text-placeholder);
    flex-shrink: 0;
    text-align: right;
}

.puisi-lock-icon {
    font-size: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.puisi-sub-locked .lock-icon {
    display: flex;
    align-items: center;
}

.puisi-sub-wrap {
    border-top: 1px solid var(--border-dim);
}

.puisi-sub-track {
    display: block;
}

.puisi-sub-panel {
    padding: 14px 14px 10px;
    box-sizing: border-box;
}

.puisi-sub-panel+.puisi-sub-panel {
    border-top: 1px solid var(--border-dim);
}

.puisi-sub-title {
    font-size: 10px;
    font-weight: 800;
    color: var(--ac);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.puisi-line {
    font-size: 13px;
    line-height: 1.95;
    color: var(--text-muted);
    font-family: 'Georgia', serif;
}

.vocab-hit {
    font-weight: 800;
    color: var(--text-dim);
}

.vocab-hit.bookmarked {
    color: var(--acl);
}

.vocab-hit.bm-a1 {
    color: #2ecc71;
}

.vocab-hit.bm-a2 {
    color: #3498db;
}

.vocab-hit.bm-b1 {
    color: #f1c40f;
}

.vocab-hit.bm-b2 {
    color: #e74c3c;
}

/* Sub locked */
.puisi-sub-locked {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-zinc6);
    font-size: 11px;
    font-weight: 700;
    border-top: 1px solid var(--border-dim);
}

/* Sub yang bisa di-claim user */
.puisi-sub-claimable {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(135deg, rgba(var(--ac-rgb, 16, 185, 129), 0.06), transparent);
    border-top: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.25);
    padding: 14px;
}

.puisi-unlock-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.puisi-unlock-title {
    flex: 1;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

.puisi-unlock-new-badge {
    font-size: 9px;
    font-weight: 900;
    color: var(--ac);
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.15);
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.3);
    border-radius: 99px;
    padding: 2px 7px;
    letter-spacing: 0.05em;
    animation: pulse 1.5s ease infinite;
}

.puisi-unlock-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ac);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border: none;
    border-radius: 99px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.puisi-unlock-btn:active {
    transform: scale(0.96);
}

/* ===== ALPHA BAR ===== */
.alpha-btn {
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: var(--card-bg-solid);
    border: 1px solid transparent;
    color: var(--text-zinc6);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.alpha-btn:hover {
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.6);
    border-color: var(--card-border);
    color: var(--acl);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px -2px var(--acs);
}

.alpha-btn.active {
    background: var(--ac);
    border-color: var(--acl);
    color: #fff;
    box-shadow: 0 0 0 2px var(--acs), 0 4px 12px -2px var(--acs);
    transform: scale(1.1);
}

.alpha-btn.disabled {
    color: var(--dot-bg);
    cursor: default;
    pointer-events: none;
    opacity: 0.4;
}

.letter-header {
    font-size: 11px;
    font-weight: 800;
    color: var(--acl);
    padding: 8px 2px 4px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 4px;
}

/* ===== FLEX UTILS ===== */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 4px;
}

.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 12px;
}

.mb-1 {
    margin-bottom: 4px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-5 {
    margin-bottom: 20px;
}

.mt-1 {
    margin-top: 4px;
}

.mt-2 {
    margin-top: 8px;
}

.flex-1 {
    flex: 1;
}

.min-w-0 {
    min-width: 0;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-center {
    text-align: center;
}

.w-full {
    width: 100%;
}

.italic {
    font-style: italic;
}

.lh-relaxed {
    line-height: 1.6;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-wide {
    letter-spacing: 0.08em;
}

/* ============================================================
           INLINE STYLE MIGRATION — converted from inline style= attrs
           ============================================================ */

/* --- Layout Flex Helpers --- */
.flex-row {
    display: flex;
    align-items: center;
}

.flex-row-sb {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-row-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-col-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flex-1 {
    flex: 1;
}

.flex-1-minw0 {
    flex: 1;
    min-width: 0;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.gap-4 {
    gap: var(--gr-1);
}

.gap-6 {
    gap: var(--gr-2);
}

.gap-7 {
    gap: var(--gr-2);
}

.gap-8 {
    gap: var(--gr-2);
}

.gap-10 {
    gap: var(--gr-3);
}

.gap-12 {
    gap: var(--gr-3);
}

.gap-14 {
    gap: var(--gr-4);
}

/* --- Grid --- */
.grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gr-2);
}

.grid-3col-mb12 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gr-2);
    margin-bottom: var(--gr-3);
}

/* --- Margin / Padding helpers --- */
.mb-0 {
    margin-bottom: 0;
}

.mb-3 {
    margin-bottom: var(--gr-1);
}

.mb-4 {
    margin-bottom: var(--gr-1);
}

.mb-5 {
    margin-bottom: var(--gr-2);
}

.mb-6 {
    margin-bottom: var(--gr-2);
}

.mb-8 {
    margin-bottom: var(--gr-2);
}

.mb-10 {
    margin-bottom: var(--gr-3);
}

.mb-12 {
    margin-bottom: var(--gr-3);
}

.mb-14 {
    margin-bottom: var(--gr-3);
}

.mb-16 {
    margin-bottom: var(--gr-4);
}

.mb-20 {
    margin-bottom: var(--gr-4);
}

.mb-24 {
    margin-bottom: var(--gr-4);
}

.mb-clamp-sm {
    margin-bottom: var(--gr-md);
}

.mb-clamp-md {
    margin-bottom: var(--gr-lg);
}

.mt-2 {
    margin-top: var(--gr-1);
}

.mt-4 {
    margin-top: var(--gr-2);
}

.mt-8 {
    margin-top: var(--gr-3);
}

.mt-10 {
    margin-top: var(--gr-3);
}

.ml-4 {
    margin-left: var(--gr-1);
}

.ml-8 {
    margin-left: var(--gr-2);
}

.p-0 {
    padding: 0;
}

.p-16-18 {
    padding: var(--gr-4) var(--gr-5);
}

.p-14-16 {
    padding: var(--gr-3) var(--gr-4);
}

.p-14 {
    padding: var(--gr-4);
}

.p-16-0 {
    padding: var(--gr-4) 0;
}

.p-40-0 {
    padding: var(--gr-6) 0;
}

.pb-0 {
    padding-bottom: 0;
}

.pb-16 {
    padding-bottom: var(--gr-4);
}

.pb-90 {
    padding-bottom: calc(var(--gr-7) + var(--banner-space));
}

.pt-10-bt {
    padding-top: var(--gr-3);
    border-top: 1px solid var(--card-border);
}

/* --- Typography --- */
.text-10 {
    font-size: var(--gr-text-xs);
}

.text-11 {
    font-size: var(--gr-text-xs);
}

.text-12 {
    font-size: var(--gr-text-sm);
}

.text-13 {
    font-size: var(--gr-text-sm);
}

.text-14 {
    font-size: var(--gr-text-base);
}

.text-15 {
    font-size: var(--gr-text-base);
}

.text-17 {
    font-size: var(--gr-text-lg);
}

.text-20 {
    font-size: var(--gr-text-lg);
}

.text-22 {
    font-size: var(--gr-text-xl);
}

.text-24 {
    font-size: var(--gr-text-xl);
}

.text-26 {
    font-size: var(--gr-text-xl);
}

.text-46 {
    font-size: var(--gr-text-4xl);
    letter-spacing: -1px;
}

.text-52 {
    font-size: var(--gr-text-4xl);
}

.text-clamp-h1 {
    font-size: var(--gr-text-2xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
}

.text-clamp-body {
    font-size: var(--gr-text-base);
}

.text-clamp-sm {
    font-size: var(--gr-text-sm);
}

.text-clamp-xs {
    font-size: var(--gr-text-xs);
}

.text-clamp-btn {
    font-size: var(--gr-text-sm);
    font-weight: 700;
}

.text-clamp-20 {
    font-size: var(--gr-text-lg);
}

.fw-600 {
    font-weight: 700;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 800;
}

/* remapped to 800 */
.lh-1 {
    line-height: 1;
}

.lh-13 {
    line-height: 1.3;
}

.lh-15 {
    line-height: 1.5;
}

.lh-16 {
    line-height: 1.6;
}

.lh-18 {
    line-height: 1.8;
}

.lh-19 {
    line-height: 1.9;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-upper {
    text-transform: uppercase;
}

.tracking-6 {
    letter-spacing: 0.06em;
}

.tracking-7 {
    letter-spacing: 0.07em;
}

.tracking-5 {
    letter-spacing: 0.05em;
}

/* --- Colors --- */
.c-text {
    color: var(--text);
}

.c-muted {
    color: var(--text-muted);
}

.c-dim {
    color: var(--text-dim);
}

.c-zinc6 {
    color: var(--text-zinc6);
}

.c-placeholder {
    color: var(--text-placeholder);
}

.c-faint {
    color: var(--text-faint);
}

.c-ac {
    color: var(--ac);
}

.c-acl {
    color: var(--acl);
}

.c-red {
    color: var(--color-error-light);
}

.c-red-dark {
    color: var(--color-error-dark);
}

.c-green {
    color: var(--color-success-light);
}

.c-orange {
    color: var(--color-orange);
}

.c-amber {
    color: var(--color-warning-light);
}

.c-sky {
    color: var(--color-info);
}

.c-indigo {
    color: var(--color-indigo);
}

.c-amber-dark {
    color: #ca8a04;
}

.c-orange-stat {
    color: var(--color-orange-warm);
}

.c-white {
    color: #fff;
}

/* --- Background --- */
.bg-card {
    background: var(--card-bg);
}

.bg-card-solid {
    background: var(--card-bg-solid);
}

.bg-none {
    background: none;
}

.bg-indigo-soft {
    background: rgba(99, 102, 241, 0.12);
}

.bg-green-soft {
    background: rgba(34, 197, 94, 0.12);
}

.bg-orange-soft {
    background: rgba(251, 146, 60, 0.15);
}

.bg-red-soft {
    background: rgba(239, 68, 68, 0.1);
}

.bg-acs {
    background: var(--acs);
}

/* --- Icon Box (28px) --- */
.icon-box-28 {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-32 {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-44 {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box-48 {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box-inner-28 {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-onboard {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--acs);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Card sections --- */
.card-section {
    padding: var(--gr-4) var(--gr-5);
}

.card-section-sm {
    padding: var(--gr-3) var(--gr-4);
}

.card-hero {
    margin-bottom: var(--gr-md);
    border-radius: var(--radius-lg);
    padding: var(--gr-md) var(--gr-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.card-shine-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rank-card-shine), transparent);
}

.card-shine-green {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb, 16, 185, 129), 0.4), transparent);
}

/* --- Progress bars --- */
.prog-bar-h8 {
    height: 8px;
    margin-bottom: 5px;
}

.prog-bar-h6 {
    height: 6px;
    margin-bottom: 12px;
}

.prog-bar-h6-mb8 {
    height: 6px;
    background: var(--card-border);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}

.prog-fill-ac {
    height: 100%;
    background: var(--ac);
    border-radius: 99px;
    width: 0%;
    transition: width 0.6s ease;
}

.prog-fill-green {
    width: 0%;
    background: var(--color-success);
}

.prog-fill-blue {
    width: 0%;
    background: #2563eb;
}

.prog-fill-purple {
    width: 0%;
    background: #9333ea;
}

.prog-fill-red {
    width: 0%;
    background: var(--color-error-dark);
}

.prog-label-row {
    display: flex;
    justify-content: space-between;
}

.prog-label-row-mb {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.prog-label-row-mb6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* --- Divider --- */
.divider {
    height: 1px;
    background: var(--card-border);
    margin-bottom: 14px;
}

/* --- Label uppercase small --- */
.label-upper {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.label-upper-sm {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Stat mini item --- */
.stat-mini {
    font-size: 10px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 3px;
}

.stat-mini-val {
    color: var(--text-muted);
    font-weight: 700;
}

/* --- Badge pill --- */
.badge-indigo {
    font-size: 10px;
    background: var(--color-indigo-bg);
    color: var(--color-indigo);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* --- Buttons --- */
.btn-ghost-acl {
    background: none;
    border: none;
    color: var(--acl);
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.btn-icon-hidden {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    color: #fff;
    transition: opacity 0.2s;
}

.btn-tab-seg {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1.5px solid var(--card-border);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.5);
    color: var(--text-muted);
}

.btn-tab-seg:hover {
    border-color: var(--ac);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -2px var(--acs);
}

.btn-tab-seg.active {
    background: var(--ac);
    color: #fff;
    border-color: var(--acl);
    box-shadow: 0 0 0 2px var(--acs), 0 4px 12px -2px var(--acs);
}

.btn-result-primary {
    padding: var(--gr-3);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gr-2);
}

.btn-result-sec {
    padding: var(--gr-3);
    border-radius: var(--radius-lg);
}

/* --- Onboarding modal --- */
.onboard-modal {
    background: var(--card-bg-solid);
    border-radius: 28px 28px 0 0;
    padding: 32px 24px 28px;
}

.onboard-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}

.onboard-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.onboard-text {
    text-align: center;
    margin-bottom: 24px;
}

.onboard-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.onboard-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
}

.onboard-input-wrap {
    margin-bottom: 20px;
}

.onboard-input {
    width: 100%;
    background: var(--card-bg-solid);
    border: 1.5px solid var(--card-border);
    color: var(--text);
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.onboard-input:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--acs), 0 0 12px -4px var(--ac);
}

.onboard-input::placeholder {
    color: var(--text-placeholder);
    opacity: 0.8;
}

.onboard-btn-main {
    width: 100%;
    background: var(--ac);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 10px;
}

.onboard-btn-skip {
    display: block;
    width: 100%;
    margin-top: 10px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
}

/* --- Error splash --- */
.error-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: 32px;
    text-align: center;
    font-family: sans-serif;
    background: #f0ebe4;
    color: #1c1917;
}

.error-splash-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.error-splash-title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}

.error-splash-desc {
    font-size: 14px;
    color: #57534e;
    line-height: 1.6;
}

/* --- Kamus / Vocab list helpers --- */
.vocab-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 0;
}

/* ===== EMPTY STATE SYSTEM ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 0;
}

.empty-state-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.6);
    border: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.empty-state-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}

.empty-state-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 240px;
}

.empty-state-hint {
    margin-top: 16px;
    font-size: 11px;
    color: var(--text-zinc6);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.5);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 6px 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Warna icon per konteks */
.empty-icon-default {
    color: var(--text-zinc6);
}

.empty-icon-success {
    color: var(--color-success-light);
}

.empty-icon-info {
    color: var(--acl);
}

.vocab-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

.vocab-level-a1 {
    color: var(--text-placeholder);
}

/* --- Misc --- */
.rotate-svg-90 {
    transform: rotate(-90deg);
    transform-origin: 26px 26px;
    transition: stroke-dashoffset 0.8s ease;
}

.overflow-y-auto {
    overflow-y: auto;
    min-height: 0;
}

.display-none {
    display: none;
}

.opacity-04 {
    opacity: 0.4;
}

.w-80 {
    width: 80px;
    flex-shrink: 0;
}

.w-24-tr {
    width: 24px;
    text-align: right;
}

.border-none {
    border: none;
}

/* --- Additional component classes --- */
.mb-clamp-md-center {
    margin-bottom: var(--gr-md);
    text-align: center;
    padding: 0;
}

.btn-nav-flex {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
}

.btn-nav-center {
    padding: 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.btn-bgm-hidden {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    color: #fff;
    transition: opacity 0.2s;
}

.seg-tab-wrap {
    background: var(--card-bg-solid);
    border-radius: 12px;
    padding: 4px;
    overflow-x: hidden;
}

.card-stats-hero {
    margin-bottom: 14px;
    border-radius: 20px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(var(--ac-rgb, 16, 185, 129), 0.1), var(--card-bg));
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.2);
    position: relative;
    overflow: hidden;
}

.card-rank-wrap {
    margin-bottom: 14px;
    border-radius: 20px;
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
}

.card-padding-sm {
    padding: 14px 16px;
}

.prog-bar-h6-nobm {
    height: 6px;
    background: var(--card-border);
    border-radius: 99px;
    overflow: hidden;
}

.prog-fill-base {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    transition: width 0.6s ease;
}

.icon-absolute-dot {
    position: absolute;
    width: 0;
    height: 0;
}

.icon-box-28-acs {
    width: 28px;
    height: 28px;
    background: var(--acs);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-right-shrink0 {
    text-align: right;
    flex-shrink: 0;
}

.flex-center-just {
    justify-content: center;
}

.p-10-8 {
    padding: 10px 8px;
}

.p-16-0-20 {
    padding: 16px 0 20px;
}

.text-11-fw700-dim {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 3px;
}

.overflow-hidden {
    overflow: hidden;
}

.vocab-empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-clamp {
    padding: var(--gr-sm) var(--gr-md);
    border-radius: var(--radius-md);
}

.btn-clamp-rel {
    padding: var(--gr-sm) var(--gr-md);
    border-radius: var(--radius-md);
    position: relative;
}

.btn-main-clamp {
    padding: var(--gr-md) var(--gr-lg);
    font-size: clamp(14px, 1.8vh, 16px);
    border-radius: var(--radius-lg);
}

.gap-clamp {
    gap: var(--gr-sm);
}

.mb-row-gap-clamp {
    margin-bottom: var(--gr-sm);
    gap: var(--gr-sm);
}

.h-clamp-nav {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.badge-indigo-show {
    font-size: 10px;
    background: var(--color-indigo-bg);
    color: var(--color-indigo);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.c-red-btn {
    justify-content: center;
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--color-error-light);
}

.text-11-fw600-dim {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
}

.anim-delay-01 {
    animation-delay: 0.1s;
}

.card-hero-rank {
    margin-bottom: var(--gr-md);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--card-bg-solid), rgba(var(--ac-rgb, 12, 12, 14), 0.3));
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--gr-4) var(--gr-4);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4), 0 0 15px -3px var(--acs);
    position: relative;
    overflow: hidden;
}

.hero-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-level-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--ac);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.hero-xp-bar-wrap {
    flex: 1;
    height: 4px;
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.15);
    border-radius: 99px;
    overflow: hidden;
}

.hero-xp-bar-fill {
    height: 100%;
    background: var(--ac);
    border-radius: 99px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-xp-text {
    display: none;
}

.text-clamp-body.fw-800 {
    font-size: 19px;
    letter-spacing: -0.02em;
}

.icon-box-44-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.badge-count-red {
    display: none;
    position: absolute;
    top: 5px;
    right: 8px;
    background: var(--color-error);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 8px;
}

.shine-top-green2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--ac-rgb, 16, 185, 129), 0.3), transparent);
}

.shine-top-minimal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
}

.icon-box-28-acs-mr {
    width: 28px;
    height: 28px;
    background: var(--acs);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.orange-stat-box {
    background: rgba(251, 146, 60, 0.08);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(251, 146, 60, 0.15);
}

.vocab-empty-gap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 40px 0;
}

.fs-32 {
    font-size: 32px;
}

.icon-box-44-input {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
}

.badge-count-pill {
    display: none;
    position: absolute;
    top: 5px;
    right: 8px;
    background: var(--color-error);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
}

.btn-seg-active {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 13px;
    font-weight: 800;
    background: var(--card-bg-solid);
    color: var(--ac);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: 0.2s;
}

.btn-seg-inactive {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 13px;
    font-weight: 700;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: 0.2s;
}

.icon-box-32-shrink {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(251, 146, 60, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-box-28-center {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.icon-box-28-indigo-auto {
    background: rgba(129, 140, 248, 0.12);
}

.icon-box-28-green-auto {
    background: rgba(74, 222, 128, 0.12);
}

.icon-box-28-acs-auto {
    background: var(--acs);
}

.card-stats-hero {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--gr-lg);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--gr-md);
}

.shine-top-green2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 222, 128, 0.4), transparent);
}

.hm-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: var(--gr-md);
}

.hm-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.hm-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hm-stat {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
}

.hm-grid {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}

.hm-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.hm-cell {
    width: 11px;
    height: 11px;
    border-radius: 4px;
    background: var(--surface-hover);
    position: relative;
}

.hm-cell.hm-l1 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.25);
}

.hm-cell.hm-l2 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.5);
}

.hm-cell.hm-l3 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.75);
}

.hm-cell.hm-l4 {
    background: var(--ac);
}

.hm-tick {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #334155;
    color: #fff;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    z-index: 10;
    font-weight: 700;
}


.card-rank-wrap {
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: var(--gr-md);
    position: relative;
    overflow: hidden;
}

.icon-absolute-dot {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.shine-top-minimal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
}

.btn-save-name {
    background: var(--ac);
    color: #fff;
    border: none;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 13px;
}

.name-input {
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    color: var(--text);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.name-input:focus {
    border-color: var(--ac);
    box-shadow: 0 0 0 3px var(--acs), 0 0 12px -4px var(--ac);
}

.vocab-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 4px 0;
    flex-shrink: 0;
}

/* ===== UTILITY CLASSES ===== */
.overflow-y-auto {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pb-16 {
    padding-bottom: 16px;
}

.pb-90 {
    padding-bottom: 90px;
}

.p-0 {
    padding: 0;
}

/* ===== BANTUAN SCREEN ===== */
.bantuan-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
}

.bantuan-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    background: transparent;
    border-bottom: 1px solid var(--card-border);
}

.bantuan-section-header svg {
    color: var(--acl);
    stroke: var(--acl);
    flex-shrink: 0;
}

.bantuan-section-body {
    padding: 14px 16px;
}

.bantuan-section-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-bottom: 10px;
}

.bantuan-section-body p:last-child {
    margin-bottom: 0;
}

.bantuan-section-body strong {
    color: var(--text);
    font-weight: 700;
}

.bantuan-section-body em {
    color: var(--acl);
    font-style: italic;
}

.bantuan-level-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
}

.bantuan-level-row .badge {
    margin-top: 2px;
    flex-shrink: 0;
}

.bantuan-level-row:last-of-type {
    margin-bottom: 0;
}

/* Tips section */
.bantuan-tips {
    border-color: var(--acs);
}

.bantuan-tip-card {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
}

.bantuan-tip-card:last-child {
    margin-bottom: 0;
}

.bantuan-tip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.bantuan-tip-card p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Bantuan color helpers */
.c-orange {
    color: var(--color-orange);
}

/* Virtual scrolling untuk repetisi */
.ulang-item {
    content-visibility: auto;
    contain-intrinsic-size: 50px;
}

.c-sky {
    color: var(--color-info);
}

.mt-8 {
    margin-top: 8px;
}

/* ===== DATE SEPARATOR (Koleksi & Repetisi) ===== */
.date-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 8px;
    flex-shrink: 0;
}

.date-sep.date-sep-first {
    margin-top: 4px;
}

.date-sep-line {
    flex: 1;
    height: 1px;
    background: var(--card-border);
}

.date-sep-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-zinc6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== ACTIVITY HEATMAP ===== */
.hm-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--card-border);
    padding: 18px;
    margin-bottom: 20px;
    position: relative;
}

.hm-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.hm-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.hm-stat {
    font-size: 12px;
    color: var(--text-dim);
}

.hm-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
    gap: 4px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hm-grid::-webkit-scrollbar {
    display: none;
}

.hm-col {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 4px;
    position: relative;
}

.hm-cell {
    width: 14px;
    height: 14px;
    background: var(--btn-secondary-bg);
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    position: relative;
}


/* Intensity Colors (Dynamic based on theme) */
.hm-l1 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.25);
}

.hm-l2 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.5);
}

.hm-l3 {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.8);
    box-shadow: 0 0 6px var(--acs);
}

.hm-l4 {
    background: var(--ac);
    box-shadow: 0 0 8px var(--acs);
}

/* Tooltip */
.hm-cell .hm-tick {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e20;
    color: #fff;
    text-align: center;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 1px solid #3f3f46;
}

.hm-cell:hover .hm-tick {
    display: block;
    animation: fadeUpTick 0.15s forwards;
}

.hm-cell .hm-tick::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: #3f3f46 transparent transparent transparent;
}

@keyframes fadeUpTick {
    from {
        opacity: 0;
        transform: translate(-50%, 4px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ===== IOS SWITCH ===== */
.ios-switch-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.ios-switch {
    position: relative;
    width: 44px;
    height: 26px;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background: var(--card-border);
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
    border: none;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}

.ios-switch:checked {
    background: var(--ac);
}

.ios-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.ios-switch:checked::after {
    transform: translateX(18px);
}

/* ===== CUSTOM SLIDER ===== */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    outline: none;
    margin: 12px 0;
    transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--ac), var(--acd));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--card-bg);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}

.custom-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px var(--card-bg), 0 0 8px -2px var(--ac);
}

.custom-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--card-bg);
}

.custom-slider:focus {
    box-shadow: 0 0 0 3px var(--acs);
}

/* ===== WOD CARD (Kata Hari Ini) - Golden Ratio Scaling ===== */
.wod-card {
    position: relative;
    padding: clamp(10px, 1.618vh, 16px);
    border-radius: clamp(12px, 2.618vh, 20px);
    background: var(--card-bg-solid);
    border: 1px solid var(--card-border);
    overflow: hidden;
    margin-bottom: clamp(9px, 1.618vh, 14px);
}

.wod-bg-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: clamp(70px, 16.18vh, 150px);
    height: clamp(70px, 16.18vh, 150px);
    background: radial-gradient(circle, var(--ac) 0%, transparent 70%);
    opacity: 0.15;
    filter: blur(30px);
    pointer-events: none;
}

.wod-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(6px, 1vh, 10px);
}

.wod-title {
    font-size: clamp(9px, 1.618vh, 11px);
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.wod-word {
    font-size: clamp(20px, 3.236vh, 26px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: clamp(2px, 0.618vh, 6px);
    color: var(--text);
}

.wod-meaning {
    font-size: clamp(12px, 1.618vh, 14px);
    color: var(--ac);
    font-weight: 700;
    margin-bottom: clamp(6px, 1vh, 10px);
}

.wod-example {
    font-size: clamp(11px, 1.618vh, 13px);
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.4;
    padding-left: clamp(6px, 1vh, 10px);
    border-left: 2px solid var(--card-border);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ===== BERANDA: RESPONSIVE HEIGHT — tidak perlu scroll, semua muat ===== */

/* Layar sedang (667px–750px tinggi — iPhone SE 3rd gen, dll) */
@media (max-height: 750px) {
    .mb-clamp-md-center {
        margin-bottom: clamp(4px, 1vh, 10px);
    }

    .mb-clamp-sm {
        margin-bottom: clamp(4px, 1vh, 10px);
    }

    .mb-clamp-md {
        margin-bottom: clamp(6px, 1.2vh, 14px);
    }

    .card-hero-rank {
        padding: 12px 18px;
        margin-bottom: clamp(4px, 1vh, 10px);
    }

    .btn-main-clamp {
        padding: clamp(10px, 1.3vh, 13px) var(--gr-lg);
    }

    .btn-clamp {
        padding: clamp(9px, 1.2vh, 12px) var(--gr-md);
    }

    .btn-clamp-rel {
        padding: clamp(9px, 1.2vh, 12px) var(--gr-md);
    }

    .stat-card {
        padding: clamp(6px, 0.9vh, 10px) var(--gr-xs);
    }

    .stat-num {
        font-size: clamp(16px, 2.8vh, 22px);
    }

    #beranda {
        padding-bottom: clamp(8px, 1.5vh, 20px);
    }
}

/* Layar pendek (< 667px tinggi — iPhone SE 1st/2nd gen, dll) */
@media (max-height: 667px) {
    .mb-clamp-md-center {
        margin-bottom: clamp(2px, 0.6vh, 6px);
    }

    .mb-clamp-sm {
        margin-bottom: clamp(2px, 0.6vh, 6px);
    }

    .mb-clamp-md {
        margin-bottom: clamp(4px, 0.8vh, 8px);
    }

    .card-hero-rank {
        padding: 10px 16px;
        margin-bottom: clamp(2px, 0.6vh, 6px);
    }

    .btn-main-clamp {
        padding: clamp(8px, 1.1vh, 11px) var(--gr-md);
    }

    .btn-clamp {
        padding: clamp(8px, 1vh, 10px) var(--gr-md);
    }

    .btn-clamp-rel {
        padding: clamp(8px, 1vh, 10px) var(--gr-md);
    }

    .stat-card {
        padding: clamp(5px, 0.7vh, 8px) var(--gr-xs);
    }

    .stat-num {
        font-size: clamp(14px, 2.4vh, 20px);
    }

    .text-clamp-h1 {
        font-size: clamp(16px, 3vh, 22px);
    }

    .glass-header {
        padding: calc(6px + var(--safe-top)) 18px 6px;
    }

    #beranda {
        padding-bottom: clamp(4px, 1vh, 12px);
    }
}


/* ===== PERFORMANCE: REDUCED MOTION untuk HP low-end ===== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Pause infinite animations saat screen tidak aktif */
.screen:not(.active) .star-orange,
.screen:not(.active) .star-blue,
.screen:not(.active) .fire-anim,
.screen:not(.active) .icon-pulse,
.screen:not(.active) .achieve-toast-shine {
    animation-play-state: paused;
}

/* ===== HOVER HANYA DI PERANGKAT YANG SUPPORT HOVER (bukan touchscreen) ===== */
@media (hover: hover) and (pointer: fine) {
    .btn-primary:hover {
        box-shadow: 0 12px 32px -4px var(--acs), 0 0 20px -6px var(--ac);
        filter: brightness(1.05);
    }

    .btn-secondary:hover {
        border-color: var(--acl);
        box-shadow: 0 0 0 2px var(--acs), 0 4px 12px -2px var(--acs);
        transform: translateY(-2px);
    }

    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px -4px var(--acs);
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px -4px var(--acs);
    }

    .vocab-card:hover {
        border-color: var(--ac);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
    }

    .quiz-option:not(:disabled):hover {
        transform: translateY(-2px) translateX(2px);
        border-color: var(--ac);
        box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
    }

    .ulang-item:hover {
        border-color: var(--ac);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
    }

    .stats-card:hover {
        transform: translateY(-2px);
        border-color: var(--ac);
        box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
    }

    .achieve-item:not(.locked):hover {
        transform: translateY(-2px);
        border-color: var(--ac);
        box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
    }

    .puisi-tab:not(.locked):hover {
        transform: translateY(-2px);
        border-color: var(--ac);
        box-shadow: 0 4px 12px -2px var(--acs);
    }

    .puisi-poem-card:not(.locked-card):hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--acs);
    }

    .bm-sort-btn:hover {
        border-color: var(--ac);
        color: var(--text-muted);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px -2px var(--acs);
    }

    .ulang-tab:hover {
        border-color: var(--ac);
        color: var(--text-muted);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px -2px var(--acs);
    }

    .theme-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.2);
    }

    .badge:hover {
        transform: translateY(-1px) scale(1.05);
    }

    .btn-icon:hover svg {
        transform: scale(1.1);
        filter: drop-shadow(0 0 4px var(--acs));
    }

    .hm-cell:hover {
        transform: scale(1.15);
        z-index: 2;
        opacity: 1 !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .hm-cell:hover .hm-tick {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(-2px);
    }
}

/* ===== LEADERBOARD & USER MENU (XP System) ===== */
/* DIPINDAHKAN KELUAR DARI MEDIA QUERY HOVER */
.leaderboard-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;  /* ← Tambah padding bottom */
}

.leaderboard-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 50px 70px;
    /* ↑ kolom: rank, nama, level, XP */
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--card-border);
    gap: 8px;
    background: transparent;
}

.leaderboard-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 50px 70px;
    padding: 10px 12px;
    align-items: center;
    background: var(--card-bg);
    border-radius: 12px;
    font-size: 13px;
    gap: 8px;
    transition: all 0.2s ease;
    border: 1px solid var(--card-border);  /* ← Tambah border biar tidak ketutupan */
    margin-bottom: 0;  /* ← Pastikan tidak ada margin negatif */
}

.leaderboard-item.current-user {
    background: var(--acs);
    border: 1px solid var(--ac);
}

.leaderboard-item .rank {
    font-weight: 800;
    color: var(--ac);
    text-align: center;
    font-size: 14px;
}

.leaderboard-item .user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

.leaderboard-item .user img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--card-bg-solid);
}

.leaderboard-item .user-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-weight: 600;
    color: var(--text);
}

.leaderboard-item .level {
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    color: var(--ac);
    background: var(--acs);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    display: inline-block;
    width: fit-content;
    justify-self: center;
}

.leaderboard-item .xp {
    text-align: right;
    white-space: nowrap;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fbbf24;
}

/* Mode Mineral: XP pakai warna hitam/gelap */
body[data-mode="light"] .leaderboard-item .xp {
    color: #1c1917;  /* warna text utama di mode mineral */
}

/* Semua ikon di leaderboard ikuti warna teks di mode mineral */
body[data-mode="light"] .leaderboard-header svg,
body[data-mode="light"] .leaderboard-my-xp svg,
body[data-mode="light"] .lb-my-xp-item svg {
    color: var(--text-muted) !important;
    stroke: var(--text-muted) !important;
    fill: none !important;
}

/* My XP Card */
.leaderboard-my-xp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--acs), transparent);
    border-radius: 16px;
    margin-bottom: 16px;
    gap: 12px;
    flex-wrap: wrap;
}

.lb-my-xp-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.lb-my-xp-item svg {
    flex-shrink: 0;
}

/* User rank outside top 50 */
.leaderboard-user-rank {
    padding: 12px 16px;
    background: var(--card-bg-solid);
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Responsive untuk layar kecil */
@media (max-width: 380px) {
    .leaderboard-header {
        grid-template-columns: 32px minmax(0, 1fr) 44px 60px;
        gap: 6px;
        padding: 6px 10px;
        font-size: 10px;
    }
    
    .leaderboard-item {
        grid-template-columns: 32px minmax(0, 1fr) 44px 60px;
        padding: 8px 10px;
        gap: 6px;
    }
    
    .leaderboard-item .user img {
        width: 24px;
        height: 24px;
    }
    
    .leaderboard-item .level {
        padding: 2px 6px;
        font-size: 10px;
    }
    
    .leaderboard-item .xp {
        font-size: 12px;
    }
    
    .leaderboard-my-xp {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .lb-my-xp-item {
        font-size: 11px;
        gap: 5px;
    }
}

/* Tablet / layar sedang */
@media (min-width: 480px) and (max-width: 768px) {
    .leaderboard-header {
        grid-template-columns: 45px minmax(0, 1fr) 55px 80px;
    }
    
    .leaderboard-item {
        grid-template-columns: 45px minmax(0, 1fr) 55px 80px;
        padding: 12px 16px;
    }
    
    .leaderboard-item .user img {
        width: 32px;
        height: 32px;
    }
}

/* Loading state */
.leaderboard-container .spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--card-border);
    border-top-color: var(--ac);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* Empty state */
.leaderboard-container .empty-state {
    text-align: center;
    padding: 48px 24px;
}

/* Hover effect untuk item */
@media (hover: hover) and (pointer: fine) {
    .leaderboard-item:hover {
        transform: translateY(-1px);
        border-color: var(--ac);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* ===== MODAL KONFIRMASI CUSTOM ===== */
.modal-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.2s ease;
}

.modal-confirm {
    background: var(--card-bg-solid);
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.3);
    border-radius: 28px;
    padding: 28px 24px;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--ac-rgb, 16, 185, 129), 0.1);
    animation: slideUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-align: center;
}

.modal-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--acs), rgba(var(--ac-rgb, 16, 185, 129), 0.25));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.4);
}

.modal-confirm-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.modal-confirm-message {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.modal-confirm-actions {
    display: flex;
    gap: 10px;
}

.modal-confirm-btn {
    flex: 1;
    padding: 14px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    border: none;
}

.modal-confirm-btn-primary {
    background: linear-gradient(135deg, var(--ac), var(--acd));
    color: #fff;
    box-shadow: 0 6px 20px -4px var(--acs);
}

.modal-confirm-btn-primary:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

.modal-confirm-btn-secondary {
    background: transparent;
    border: 1.5px solid var(--card-border) !important;
    color: var(--text-muted);
}

.modal-confirm-btn-secondary:active {
    background: var(--surface-hover);
    transform: scale(0.96);
}

/* ===== USER MENU DROPDOWN (Enhanced) ===== */
.user-menu-dropdown {
    position: fixed;
    top: 70px;
    right: 16px;
    background: var(--card-bg-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.25);
    border-radius: 20px;
    padding: 8px;
    min-width: 220px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--ac-rgb, 16, 185, 129), 0.1);
    z-index: 10000;
    animation: slideDown 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--card-border);
    margin-bottom: 6px;
    background: linear-gradient(135deg, rgba(var(--ac-rgb, 16, 185, 129), 0.08), transparent);
    border-radius: 14px 14px 0 0;
}

.user-menu-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--ac);
    box-shadow: 0 4px 12px -2px var(--acs);
}

.user-menu-avatar-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ac), var(--acd));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    border: 2px solid var(--acl);
}

.user-menu-info {
    flex: 1;
    min-width: 0;
}

.user-menu-name {
    font-weight: 800;
    color: var(--text);
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-menu-xp {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.user-menu-xp-value {
    font-size: var(--gr-text-sm);
    font-weight: 700;
    color: var(--ac);
}

.user-menu-level {
    font-size: var(--gr-text-xs);
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-hover);
    padding: var(--gr-1) var(--gr-2);
    border-radius: 20px;
}

.user-menu-divider {
    height: 1px;
    background: var(--card-border);
    margin: var(--gr-2);
}

.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--gr-3);
    width: 100%;
    text-align: left;
    padding: var(--gr-3) var(--gr-4);
    background: transparent;
    border: none;
    color: var(--text);
    font-size: var(--gr-text-base);
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.user-menu-item:hover {
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.12);
}

.user-menu-item:active {
    transform: scale(0.97);
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.2);
}

.user-menu-item svg {
    width: 20px;
    height: 20px;
    stroke: var(--ac);
    stroke-width: 2;
    flex-shrink: 0;
}

.user-menu-item.logout {
    color: var(--color-error-light);
}

.user-menu-item.logout svg {
    stroke: var(--color-error-light);
}

/* ===== SPINNER (dipakai di leaderboard loading) ===== */
.spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--card-border);
    border-top-color: var(--ac);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-bottom: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== ANIMASI XP GAIN (Muncul di Beranda) ===== */
.xp-gain-notification {
    position: fixed;
    bottom: calc(72px + var(--banner-space, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--card-bg-solid);
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.3);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: xpSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), xpFadeOut 0.35s ease 4s forwards;
    pointer-events: none;
}

.xp-gain-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Ikon biru saat premium */
.xp-gain-notification.xp-premium .xp-gain-icon {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.xp-gain-notification.xp-premium .xp-gain-value span {
    color: #38bdf8;
}

.xp-gain-notification.xp-premium .xp-gain-bar-fill {
    background: #38bdf8;
}

.xp-gain-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.xp-gain-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.xp-gain-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.xp-gain-value {
    font-size: 18px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 6px;
}

.xp-gain-value span {
    color: #fbbf24;
}

.xp-gain-level {
    font-size: 11px;
    font-weight: 700;
    color: var(--ac);
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.12);
    padding: 2px 7px;
    border-radius: 99px;
}

.xp-gain-levelup {
    font-size: 11px;
    font-weight: 800;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    padding: 2px 7px;
    border-radius: 99px;
}

.xp-gain-bar-wrap {
    width: 100%;
    height: 3px;
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.12);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 3px;
}

.xp-gain-bar-fill {
    height: 100%;
    background: var(--ac);
    border-radius: 99px;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.xp-gain-bar-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

@keyframes xpSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes xpFadeOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
}

/* ===== BADGE LEVEL & XP DI BERANDA (heroLvlBadge / heroXpBadge) ===== */
#heroLvlBadge {
    font-size: var(--gr-text-sm);
    font-weight: 800;
    color: var(--ac);
    letter-spacing: -0.01em;
}

#heroXpBadge {
    font-size: var(--gr-text-sm);
    font-weight: 600;
    color: var(--text-muted);
    opacity: 0.85;
    margin-left: var(--gr-1);
}

/* ===== XP DISPLAY DI HEADER (Opsional) ===== */
.user-xp-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), transparent);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 40px;
    padding: 6px 12px;
    margin-right: 8px;
}

.user-xp-badge svg {
    width: 16px;
    height: 16px;
    fill: #fbbf24;
}

.user-xp-badge span {
    font-size: 13px;
    font-weight: 800;
    color: #fbbf24;
}

/* ===== PROGRESS LEVEL DI MENU USER ===== */
.user-menu-level-progress {
    margin-top: 6px;
    height: 4px;
    background: var(--card-border);
    border-radius: 4px;
    overflow: hidden;
}

.user-menu-level-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--ac), #fbbf24);
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 4px;
}

.user-menu-xp-fraction {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 3px;
    text-align: right;
}

/* ===== RESPONSIVE COMPRESSION UNTUK LAYAR KECIL ===== */
/* Menjamin tombol Pengaturan tidak terdorong keluar layar di HP sempit */
@media screen and (max-width: 395px) {
    .header-right.gap-8 {
        gap: 4px !important;
    }

    .btn-icon {
        width: 34px !important;
        height: 34px !important;
    }

    .logo-title {
        font-size: 15px !important;
    }

    .logo-sub {
        display: block !important;
        font-size: 8px !important;
        letter-spacing: 0.08em !important;
        margin-top: 2px !important;
    }

    .streak-badge {
        padding: 4px 6px !important;
    }

    #streakNum {
        font-size: 12px !important;
    }

    .icon-box-inner-28 {
        transform: scale(0.85);
    }

    /* Pastikan header punya margin-kiri lebih ketat jika perlu */
    .glass-header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media screen and (max-width: 340px) {
    .logo-title {
        display: block !important;
        font-size: 13px !important;
    }

    .logo-sub {
        display: block !important;
        font-size: 7px !important;
        letter-spacing: 0.06em !important;
    }

    .btn-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .header-right.gap-8 {
        gap: 2px !important;
    }

    .app-logo {
        gap: 8px !important;
    }
}

/* ===== RESPONSIVE: LAYAR LEBAR (tablet, HP besar ≥ 480px) ===== */
@media screen and (min-width: 480px) {
    body {
        background: var(--surface-deep);
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
    }

    #app {
        background: var(--app-bg);
        margin: 0;
        width: 100%;
        max-width: 520px;
        /* Φ-based width for large phones */
        height: 100vh;
        height: 100dvh;
        box-shadow: 0 0 var(--gr-6) rgba(0, 0, 0, 0.5);
        border: none;
    }

    .screen {
        padding-left: var(--gr-5);
        padding-right: var(--gr-5);
    }

    .glass-header {
        padding-left: var(--gr-5);
        padding-right: var(--gr-5);
    }

    #beranda {
        padding-left: var(--gr-5);
        padding-right: var(--gr-5);
    }
}

@media screen and (min-width: 768px) {

    html,
    body {
        height: 100%;
        background: var(--surface-deep);
    }

    #app {
        width: 100%;
        max-width: 100%;
        /* Filling the iPad width but using controlled padding inside */
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        box-shadow: none;
    }

    /* iPad widths vary a lot, so use viewport-based padding instead of a fixed shell. */
    .screen {
        padding-left: clamp(24px, 5vw, 56px);
        padding-right: clamp(24px, 5vw, 56px);
    }

    .glass-header {
        padding-left: clamp(24px, 5vw, 56px);
        padding-right: clamp(24px, 5vw, 56px);
    }

    #beranda {
        padding-left: clamp(24px, 5vw, 56px);
        padding-right: clamp(24px, 5vw, 56px);
    }
}

@media screen and (min-width: 1025px) {
    #app {
        max-width: 764px;
        /* Φ proportional width for desktop (approx 1240 / 1.618) */
        margin: 0 auto;
        box-shadow: 0 0 var(--gr-7) rgba(0, 0, 0, 0.6);
        border-left: 1px solid var(--border-dim);
        border-right: 1px solid var(--border-dim);
    }
}

/* ===== RESPONSIVE: LANDSCAPE MODE ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .glass-header {
        padding-top: calc(4px + var(--safe-top));
        padding-bottom: 4px;
    }

    .screen {
        padding-top: calc(6px + var(--safe-top));
    }

    .mb-clamp-md-center {
        margin-bottom: 4px;
    }

    .mb-clamp-sm {
        margin-bottom: 4px;
    }

    .mb-clamp-md {
        margin-bottom: 6px;
    }

    .card-hero-rank {
        padding: 8px 14px;
        margin-bottom: 4px;
    }

    .stat-grid {
        gap: 4px;
        margin-bottom: 6px;
    }

    .text-clamp-h1 {
        font-size: clamp(14px, 3vh, 18px);
    }

    .btn-main-clamp {
        padding: 8px 16px;
    }

    .btn-clamp,
    .btn-clamp-rel {
        padding: 7px 12px;
    }
}

/* iPad / tablet sentuh: dukung iPad mini, Air, Pro, portrait/landscape, termasuk Split View. */
@media screen and (min-width: 600px) and (max-width: 1366px) and (pointer: coarse) {

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #app {
        width: 100%;
        max-width: none;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        border: none;
        box-shadow: none;
    }

    .screen,
    #beranda {
        padding-left: clamp(20px, 4.2vw, 52px);
        padding-right: clamp(20px, 4.2vw, 52px);
    }

    .glass-header {
        padding-left: clamp(20px, 4.2vw, 52px);
        padding-right: clamp(20px, 4.2vw, 52px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) and (orientation: landscape) {

    .screen,
    #beranda {
        padding-left: clamp(28px, 5vw, 72px);
        padding-right: clamp(28px, 5vw, 72px);
    }

    .glass-header {
        padding-left: clamp(28px, 5vw, 72px);
        padding-right: clamp(28px, 5vw, 72px);
    }
}

/* ===== ONLINE/OFFLINE INDICATOR ===== */

/* ===== SYNC STATUS CARD ===== */
.sync-status-card {
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.sync-status-card[data-state="syncing"] {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(var(--card-bg-rgb, 24, 24, 27), 0.72);
}

.sync-status-card[data-state="ok"] {
    border-color: rgba(16, 185, 129, 0.22);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.05);
}

.sync-status-card[data-state="error"] {
    border-color: rgba(239, 68, 68, 0.22);
}

/* ===== HAMBURGER HEADER MENU ===== */

/* Expanded buttons — hidden initially (truly gone from layout), slide in when .menu-open */
.header-expanded-btns {
    display: none;
    /* truly removes from layout — no flex-gap residue */
    align-items: center;
    gap: 6px;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: max-width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
}

.header-expanded-btns.open,
.header-expanded-btns.menu-open {
    max-width: 220px;
    opacity: 1;
    pointer-events: auto;
}

/* Streak badge — hides when menu opens */
#streakBadge {
    transition: opacity 0.22s ease,
        transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

#streakBadge.streak-hidden {
    opacity: 0;
    transform: scale(0.75);
    pointer-events: none;
}

/* Hamburger button */
.btn-hamburger {
    flex-shrink: 0;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 4.5px;
    width: 17px;
    pointer-events: none;
}

.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
}

/* ===== GPU ACCELERATION & CONTENT VISIBILITY ===== */
.vocab-card {
    content-visibility: auto;
    contain-intrinsic-size: 48px;
}


/* ============================================================
   BERANDA UI PATCH — 5 Perbaikan Visual
   ============================================================ */

/* ── 1. HEADLINE: Kurangi ukuran, hemat ruang layar ────────
   text-clamp-h1 dipakai pada judul beranda "Kuasai 3000+"
   Dari gr-text-2xl → lebih compact via clamp             */
.mb-clamp-md-center .text-clamp-h1,
#beranda .text-clamp-h1 {
    font-size: clamp(20px, 4.5vw, 26px) !important;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Baris span accent di headline (angka "3000+") */
#beranda .text-clamp-h1 .c-accent,
#beranda .text-clamp-h1 .c-acl {
    display: inline;
}

/* Kurangi margin bawah headline block */
.mb-clamp-md-center {
    margin-bottom: var(--gr-sm) !important;
}

/* ── 2. STAT CARDS: framing lebih hangat ──────────────────
   Tambah subtle accent border atas pada card yang relevan  */
.stat-grid .stat-card {
    border-top: 2px solid transparent;
    transition: border-color 0.3s, transform 0.2s, box-shadow 0.2s;
    position: relative;
}

/* Card pertama (Total) — accent redup */
.stat-grid .stat-card:nth-child(1) {
    border-top-color: rgba(var(--ac-rgb, 16, 185, 129), 0.25);
}

/* Card kedua (Dikuasai) — accent lebih jelas, beri vibe "pencapaian" */
.stat-grid .stat-card:nth-child(2) {
    border-top-color: rgba(var(--ac-rgb, 16, 185, 129), 0.6);
}

/* Card ketiga (Progres) — accent tipis */
.stat-grid .stat-card:nth-child(3) {
    border-top-color: rgba(var(--ac-rgb, 16, 185, 129), 0.3);
    overflow: hidden;
    /* fix clipping */
}

/* Pastikan stat-ring tidak overflow card ketiga */
.stat-ring {
    opacity: 0.18;
    position: absolute;
    right: -8px;
    bottom: -8px;
}

/* ── 3. TARGET HARIAN: progress bar lebih tebal & terlihat ─ */
.prog-wrap {
    height: 10px !important;
    /* naik dari 8px */
    border-radius: 99px;
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.08) !important;
    border: 1px solid rgba(var(--ac-rgb, 16, 185, 129), 0.15) !important;
}

.prog-fill {
    box-shadow: 0 0 10px -2px var(--acs), 0 0 4px -1px var(--ac) !important;
}

/* ── 4. TOMBOL SECONDARY: Repetisi lebih menonjol ──────────
   Gunakan class btn-highlight sebagai override khusus Repetisi
   (pastikan di HTML: tombol Repetisi punya class btn-highlight) */
.btn-clamp-rel.btn-highlight {
    border-color: var(--ac) !important;
    background: rgba(var(--ac-rgb, 16, 185, 129), 0.1) !important;
    box-shadow: 0 0 14px -4px var(--acs), 0 0 0 1px rgba(var(--ac-rgb, 16, 185, 129), 0.2) !important;
    color: var(--acl) !important;
}

/* Semua btn secondary di beranda — tambah gap lebih lega */
.mb-row-gap-clamp {
    margin-bottom: var(--gr-md) !important;
    gap: var(--gr-sm) !important;
}

/* ── 5. SPACING: gap antara Mulai Quiz dan tombol secondary ─ */
.btn-main-clamp {
    margin-bottom: var(--gr-md);
}

/* Tambah sedikit jarak atas untuk area tombol-tombol secondary */
#beranda .mb-row-gap-clamp:first-of-type {
    margin-top: var(--gr-1);
}

/* ── BONUS: stat-num pada card "Dikuasai" — warna lebih ceria */
.stat-grid .stat-card:nth-child(2) .stat-num {
    color: var(--ac) !important;
    text-shadow: 0 0 16px rgba(var(--ac-rgb, 16, 185, 129), 0.4);
}

/* Responsive: jaga tetap proporsional di layar pendek */
@media (max-height: 750px) {
    #beranda .text-clamp-h1 {
        font-size: clamp(17px, 3.8vw, 22px) !important;
    }

    .prog-wrap {
        height: 8px !important;
    }
}

@media (max-height: 667px) {
    #beranda .text-clamp-h1 {
        font-size: clamp(15px, 3.2vw, 18px) !important;
    }
}

/* ============================================================
   PREMIUM EXPERIENCE (is-premium)
   ============================================================ */

body.is-premium {
    /* Premium Accent Color (Diamond / Sky Blue) */
    --ac: #0ea5e9;
    --acl: #7dd3fc;
    --acd: #0369a1;
    --ac-rgb: 14, 165, 233;
    --acs-opacity: 0.22;
    --acs: rgba(var(--ac-rgb), var(--acs-opacity));
}

/* Premium Card: Subtle Animated Shine */
body.is-premium .card, 
body.is-premium .card-hero-rank,
body.is-premium .stat-card {
    position: relative;
    overflow: hidden;
}

body.is-premium .card::after,
body.is-premium .card-hero-rank::after,
body.is-premium .stat-card::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        rgba(255, 255, 255, 0.02) 47%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 53%,
        transparent 55%
    );
    transform: rotate(25deg);
    pointer-events: none;
    animation: premiumCardShine 8s infinite ease-in-out;
}

@keyframes premiumCardShine {
    0% { transform: translate(-15%, -15%) rotate(25deg); }
    50% { transform: translate(5%, 5%) rotate(25deg); }
    100% { transform: translate(-15%, -15%) rotate(25deg); }
}

/* Premium Primary Button: Glow */
body.is-premium .btn-primary {
    box-shadow: 0 8px 25px -4px rgba(14, 165, 233, 0.4);
}

/* Premium Toast: Blue Theme */
body.is-premium #toast.toast-success {
    background: #0369a1 !important;
    border: 1px solid rgba(125, 211, 252, 0.3);
}

/* ============================================================
   PREMIUM SHORTCUT SCREEN
   ============================================================ */

/* Status Card */
.card-premium-status {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--gr-4) var(--gr-5);
    display: flex;
    align-items: center;
    gap: var(--gr-4);
    transition: all 0.3s ease;
}

.premium-status-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.premium-status-info {
    flex: 1;
    min-width: 0;
}

.premium-status-title {
    font-size: var(--gr-text-base);
    font-weight: 800;
    color: var(--text);
    margin-bottom: var(--gr-1);
    letter-spacing: -0.3px;
}

.premium-status-time {
    font-size: var(--gr-text-sm);
    color: #38bdf8;
    font-weight: 700;
}

.premium-status-desc {
    font-size: var(--gr-text-xs);
    color: var(--text-muted);
    margin-top: var(--gr-1);
    line-height: 1.5;
}

/* Track Card */
.card-premium-track {
    position: relative;
    padding: var(--gr-5);
    overflow: hidden;
}

.card-premium-ads {
    border-color: rgba(56, 189, 248, 0.2);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.04), var(--card-bg));
}

.premium-track-icon {
    font-size: 32px;
    margin-bottom: var(--gr-2);
}

.premium-track-title {
    font-size: var(--gr-text-base);
    font-weight: 800;
    color: var(--text);
    margin-bottom: var(--gr-1);
    letter-spacing: -0.3px;
}

.premium-track-desc {
    font-size: var(--gr-text-xs);
    color: var(--text-muted);
    margin-bottom: var(--gr-4);
    line-height: 1.6;
}

.premium-track-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--gr-3);
}

.premium-track-count {
    font-size: var(--gr-text-sm);
    font-weight: 800;
    color: var(--text);
}

.premium-track-eta {
    font-size: var(--gr-text-xs);
    font-weight: 600;
    color: var(--text-dim);
}

/* Streak Dots */
.premium-streak-dots {
    display: flex;
    gap: var(--gr-2);
    margin-bottom: var(--gr-3);
    justify-content: center;
}

.premium-streak-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg-solid);
    border: 1.5px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-dim);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-streak-dot.done {
    background: #f97316;
    border-color: #fb923c;
    color: #fff;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
}

.premium-streak-dot.active {
    background: #fbbf24;
    border-color: #fde68a;
    color: #1c1c1e;
    transform: scale(1.2);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.5);
}

/* Ad Progress Dots */
.premium-ad-progress {
    display: flex;
    gap: var(--gr-1);
    margin-bottom: var(--gr-3);
    justify-content: center;
    flex-wrap: wrap;
}

.premium-ad-dot {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--card-bg-solid);
    border: 1.5px solid var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.premium-ad-dot.done {
    background: #38bdf8;
    border-color: #7dd3fc;
    color: #fff;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}

.premium-ad-dot.current {
    background: #7dd3fc;
    border-color: #bae6fd;
    color: #0c4a6e;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Tombol Klaim */
.btn-premium-claim {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #1c1c1e;
    border: none;
    padding: var(--gr-3) var(--gr-4);
    border-radius: var(--radius-md);
    font-size: var(--gr-text-sm);
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -0.2px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 6px 20px -4px rgba(251, 191, 36, 0.3);
    animation: premiumClaimPulse 2s ease-in-out infinite;
}

@keyframes premiumClaimPulse {
    0%, 100% { box-shadow: 0 6px 20px -4px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 8px 28px -2px rgba(251, 191, 36, 0.6); }
}

.btn-premium-claim:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

/* Badge Aktif */
.premium-active-badge {
    margin-top: var(--gr-3);
    padding: var(--gr-2) var(--gr-3);
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: var(--radius-sm);
    font-size: var(--gr-text-xs);
    font-weight: 700;
    color: #38bdf8;
    text-align: center;
}

/* Benefit Card */
.card-premium-benefit {
    border-color: rgba(56, 189, 248, 0.15);
}

.premium-benefit-list {
    display: flex;
    flex-direction: column;
    gap: var(--gr-2);
}

.premium-benefit-row {
    display: flex;
    align-items: center;
    gap: var(--gr-3);
    padding: var(--gr-2) 0;
    font-size: var(--gr-text-sm);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-dim);
}

.premium-benefit-row span:first-child {
    width: 24px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.premium-benefit-row svg {
    opacity: 0.9;
}

.premium-benefit-row:last-child {
    border-bottom: none;
}

/* User Menu Badge */
.user-menu-premium-badge {
    font-size: 10px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 99px;
    padding: 2px 7px;
    white-space: nowrap;
    letter-spacing: 0.04em;
}

/* Badge Premium di samping Target Harian */
.badge-premium-inline {
    font-size: 9px;
    font-weight: 800;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 99px;
    padding: 2px 7px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

/* ============================================================
   BERANDA SPACING NORMALIZATION
   Keep home gaps stable between browser preview and Android WebView.
   ============================================================ */
#beranda {
    --home-gap-xs: clamp(5px, 0.7svh, 8px);
    --home-gap-sm: clamp(8px, 1.1svh, 14px);
    --home-gap-md: clamp(10px, 1.6svh, 20px);
    --home-gap-lg: clamp(12px, 2svh, 24px);
}

#beranda .glass-header {
    margin-bottom: var(--home-gap-md);
}

#beranda .mb-clamp-md-center {
    margin-bottom: var(--home-gap-sm) !important;
}

#beranda .card-hero-rank {
    margin-bottom: var(--home-gap-md) !important;
}

#beranda .stat-grid {
    gap: var(--home-gap-sm);
    margin-bottom: var(--home-gap-md) !important;
}

#beranda #dailyGoalCard {
    margin-bottom: var(--home-gap-lg) !important;
}

#beranda .home-main-action {
    margin-bottom: var(--home-gap-sm) !important;
}

#beranda .btn-main-clamp {
    margin-bottom: 0 !important;
}

#beranda .home-action-row {
    gap: var(--home-gap-sm);
    margin-top: 0 !important;
    margin-bottom: var(--home-gap-sm) !important;
}

#beranda .home-action-row + .home-action-row {
    margin-top: 0 !important;
}

@media (max-height: 667px) {
    #beranda {
        --home-gap-sm: clamp(5px, 0.9svh, 8px);
        --home-gap-md: clamp(7px, 1.2svh, 10px);
        --home-gap-lg: clamp(9px, 1.5svh, 12px);
    }
}

/* Global scroll padding fix for specific screens */
#leaderboard .screen-scroll-body {
    padding-bottom: calc(var(--gr-6) + var(--safe-bottom) + 20px) !important;
}

#bookmark .overflow-y-auto {
    padding-bottom: calc(var(--gr-6) + var(--safe-bottom) + 20px) !important;
}