/* ================================================================
   CBT TKA SOSIOLOGI — MASTER STYLESHEET
   Struktur:
   1.  Reset Blogger
   2.  Root & Base
   3.  Wrapper Aplikasi
   4.  Footer
   5.  Watermark
   6.  Login View
   7.  Exam View (Header, Soal, Opsi, BS, Matching)
   8.  Result View (Score, Leaderboard, Badges)
   9.  Modals (Umum, Confirm, Toast)
   10. Admin View (Hero, Tabs, Panels)
   11. Admin Components (Form, Editor, Buttons)
   12. Admin Specific (Import, Export, User)
   13. Utility & Loading
   14. Responsive
   ================================================================ */


/* ============================================================
   1. RESET ELEMEN BLOGGER
   ============================================================ */
#header-wrapper, .menu-secondary-container, .marquee-wrapper,
#rsidebar-wrapper, #sidebar-wrapper, .sidebar, #sidebar,
#footer-widgets, #footer, #footer-wrapper, .footer,
#blog-pager, .post-title, .postmeta-primary, .comments-modern,
.post-footer, .feed-links, .comments, #backlinks-container,
#comment-holder, #comment-editor, .comment-form, .iframe-comment-form,
.mobile-link-button, .post-footer-line, .post-feeds, .blog-feeds,
.clear, .clearfix:after, #Attribution1, #ContactForm1,
#navbar, #navbar-iframe, .navbar, #Navbar1, #NavbarIframe, div.clear {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background-color: #f3f4f6 !important;
}

#outer-wrapper, #content-wrapper, #main-wrapper, .main-inner,
.content-inner, .blog-posts, #Blog1, #Blog1 .blog-posts,
.post-outer, .post, .hentry, .post-body, .entry-content {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* ============================================================
   2. ROOT VARIABLES & BASE
   ============================================================ */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #e0e7ff;
    --primary-text: #4338ca;
    --secondary: #f3f4f6;
    --text-dark: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
}

#utbk-cbt-app * {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

.cbt-container {
    max-width: 950px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

#cbt-login-view, #cbt-test-view, #cbt-result-view, #cbt-admin-view {
    flex-shrink: 0;
    width: 100%;
}


/* ============================================================
   3. WRAPPER APLIKASI (Fullscreen)
   ============================================================ */
#utbk-cbt-app {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999999 !important;
    background-color: #f3f4f6;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
    display: flex !important;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    scrollbar-gutter: stable;
}

/* Style scrollbar biar lebarnya tetap & diketahui */
#utbk-cbt-app::-webkit-scrollbar {
    width: 8px;   /* ← fixed width */
}
#utbk-cbt-app::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.4);
    border-radius: 4px;
}
#utbk-cbt-app {
    scrollbar-width: thin;   /* Firefox ~11px */
}

/* ============================================================
   EXAM MODE: sembunyikan footer copyright di SEMUA viewport
   ============================================================ */
#utbk-cbt-app.exam-mode {
    padding-bottom: 20px !important;
    padding-bottom: 40px !important;
}

#utbk-cbt-app.exam-mode #cbt-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}

/* ============================================================
   MAINTENANCE VIEW — Fun & Animated
   ============================================================ */
#cbt-maintenance-view {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: 30px 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}
#cbt-maintenance-view.active { display: flex; }

/* Floating emoji particles */
.mtn-particle {
    position: absolute;
    font-size: 2rem;
    opacity: 0.15;
    pointer-events: none;
    animation: mtnFloat 12s linear infinite;
    user-select: none;
}
@keyframes mtnFloat {
    0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
    10% { opacity: 0.2; }
    90% { opacity: 0.2; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* Card */
.mtn-card {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 24px;
    padding: 44px 36px 36px;
    max-width: 560px;
    width: 100%;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
    animation: mtnCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes mtnCardIn {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Spinning gear */
.mtn-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(99,102,241,0.35), inset 0 2px 0 rgba(255,255,255,0.2);
    position: relative;
}
.mtn-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 32px;
    background: linear-gradient(135deg, #818cf8, #6366f1);
    z-index: -1;
    opacity: 0.4;
    animation: mtnPulse 2s ease-in-out infinite;
}
@keyframes mtnPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.08); opacity: 0.15; }
}
.mtn-icon svg {
    width: 54px; height: 54px;
    animation: mtnSpin 3s linear infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
@keyframes mtnSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Title */
.mtn-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.mtn-subtitle {
    font-size: 0.92rem;
    color: #6b7280;
    margin: 0 0 26px;
    font-weight: 500;
}

/* Jokes box */
.mtn-joke-box {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-left: 4px solid #6366f1;
    border-radius: 14px;
    padding: 20px 24px;
    margin: 0 0 24px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.mtn-joke-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #3730a3;
    font-weight: 600;
    font-style: italic;
    transition: opacity 0.4s ease, transform 0.4s ease;
    text-align: center;
}
.mtn-joke-text.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

/* Progress bar */
.mtn-progress-wrap {
    margin: 0 0 20px;
}
.mtn-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mtn-progress-track {
    height: 12px;
    background: #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}
.mtn-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc);
    background-size: 200% 100%;
    border-radius: 12px;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    animation: mtnShimmer 2s linear infinite;
    position: relative;
}
.mtn-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: mtnSlide 1.5s linear infinite;
}
@keyframes mtnShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes mtnSlide {
    0% { right: 100%; }
    100% { right: -30px; }
}

/* Info */
.mtn-info {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 22px;
}
.mtn-info strong { color: #4338ca; }

/* Auto-refresh indicator */
.mtn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #065f46;
    margin-bottom: 20px;
}
.mtn-refresh-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    animation: mtnLiveDot 1.5s ease-in-out infinite;
}
@keyframes mtnLiveDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Footer */
.mtn-footer {
    font-size: 0.75rem;
    color: #94a3b8;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}
.mtn-footer strong { color: #6366f1; font-weight: 800; }

/* Branding signature */
.mtn-signature {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: #cbd5e1;
    font-weight: 500;
}

/* Mobile */
@media (max-width: 480px) {
    .mtn-card { padding: 32px 22px 26px; border-radius: 20px; }
    .mtn-icon { width: 80px; height: 80px; border-radius: 22px; }
    .mtn-icon svg { width: 42px; height: 42px; }
    .mtn-title { font-size: 1.35rem; }
    .mtn-subtitle { font-size: 0.85rem; }
    .mtn-joke-box { padding: 16px 18px; min-height: 90px; }
    .mtn-joke-text { font-size: 0.9rem; }
    .mtn-refresh { font-size: 0.72rem; padding: 8px 14px; }
} 

/* ============================================================
   4. FOOTER UTAMA (Fixed di Bawah)
   ============================================================ */
#cbt-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 50;
    background: #ffffff !important;
    box-shadow: 0 -3px 12px rgba(15,23,42,0.05);
    margin: 0 !important;
}


/* ============================================================
   5. WATERMARK
   ============================================================ */
.cbt-watermark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0 !important; 
    opacity: 0.05;
    background-repeat: repeat;
    background-size: 400px 160px;
    background-position: 0 0;
    user-select: none;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* ✅ Dark mode: naikkan opacity sedikit + pakai blend mode biar lebih terlihat */
[data-theme="dark"] .cbt-watermark {
    opacity: 0.075;
    mix-blend-mode: screen;
}

/* ✅ Light mode: tetap subtle */
[data-theme="light"] .cbt-watermark {
    opacity: 0.055;
    mix-blend-mode: multiply;
}

/* ============================================================
   6. LOGIN VIEW — FUTURISTIC + THEME SUPPORT
   ============================================================ */

#cbt-login-view {
    position: relative;
    min-height: calc(100vh - 90px);
    background: var(--cbt-bg-app);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(99,102,241,0.18) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(236,72,153,0.14) 0%, transparent 45%);
    overflow: hidden;
    padding-bottom: 30px;
}

/* Aurora blobs */
#cbt-login-view::before,
#cbt-login-view::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
#cbt-login-view::before {
    width: 620px; height: 620px;
    top: -220px; left: -200px;
    background: radial-gradient(circle, rgba(99,102,241,0.55) 0%, rgba(99,102,241,0) 70%);
    filter: blur(90px);
    animation: auroraMove1 22s ease-in-out infinite;
}
#cbt-login-view::after {
    width: 520px; height: 520px;
    bottom: -180px; right: -160px;
    background: radial-gradient(circle, rgba(236,72,153,0.5) 0%, rgba(236,72,153,0) 70%);
    filter: blur(90px);
    animation: auroraMove2 28s ease-in-out infinite;
}
@keyframes auroraMove1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(90px, 70px) scale(1.2); }
}
@keyframes auroraMove2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-80px, -90px) scale(1.15); }
}

/* ===== HERO ===== */
.login-hero {
    position: relative;
    z-index: 1;
    padding: 44px 20px 100px;
    text-align: center;
    background: transparent;
    overflow: hidden;
}

/* Grid pattern */
.login-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(99,102,241,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 90%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, black 20%, transparent 90%);
    pointer-events: none;
}

/* ===== STAR FIELD ===== */
.star-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.star-field::before,
.star-field::after {
    content: '';
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 550px 550px;
}
.star-field::before {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, transparent),
        radial-gradient(1px 1px at 90px 80px, #a5b4fc, transparent),
        radial-gradient(2px 2px at 160px 120px, #f0abfc, transparent),
        radial-gradient(1.2px 1.2px at 240px 40px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 320px 200px, #a5b4fc, transparent),
        radial-gradient(1px 1px at 400px 100px, #ffffff, transparent),
        radial-gradient(2px 2px at 480px 260px, #f0abfc, transparent),
        radial-gradient(1.2px 1.2px at 520px 380px, #a5b4fc, transparent),
        radial-gradient(1.5px 1.5px at 80px 420px, #ffffff, transparent),
        radial-gradient(1px 1px at 300px 480px, #a5b4fc, transparent);
    animation: starTwinkle 4s ease-in-out infinite alternate;
    opacity: 0.7;
}
.star-field::after {
    background-image:
        radial-gradient(1px 1px at 60px 160px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 130px 320px, #c7d2fe, transparent),
        radial-gradient(1px 1px at 220px 240px, #ffffff, transparent),
        radial-gradient(2px 2px at 340px 460px, #f0abfc, transparent),
        radial-gradient(1.2px 1.2px at 440px 60px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 500px 180px, #c7d2fe, transparent),
        radial-gradient(1px 1px at 30px 500px, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 380px 340px, #a5b4fc, transparent);
    animation: starTwinkle 5s ease-in-out infinite alternate-reverse;
    opacity: 0.55;
}
@keyframes starTwinkle {
    0%   { opacity: 0.35; }
    100% { opacity: 0.85; }
}

/* ===== HERO LOGO + ORBIT ===== */
.hero-logo {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.hero-logo-svg {
    width: 52px;
    height: 52px;
    color: #ffffff;
    filter: drop-shadow(0 0 12px rgba(139,92,246,0.9)) drop-shadow(0 0 24px rgba(99,102,241,0.6));
    position: relative;
    z-index: 2;
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

/* Orbit rings */
.orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
    pointer-events: none;
}
.orbit-1 {
    border-top-color: #a855f7;
    border-right-color: rgba(168,85,247,0.3);
    animation: orbitSpin 4s linear infinite;
    box-shadow: 0 0 18px rgba(168,85,247,0.5);
}
.orbit-2 {
    inset: -12px;
    border-bottom-color: #ec4899;
    border-left-color: rgba(236,72,153,0.3);
    animation: orbitSpin 6s linear infinite reverse;
    box-shadow: 0 0 20px rgba(236,72,153,0.4);
}
@keyframes orbitSpin {
    to { transform: rotate(360deg); }
}

/* Logo center glow */
.hero-logo::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.5) 0%, transparent 70%);
    filter: blur(8px);
    z-index: 1;
    animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50%      { transform: scale(1.15); opacity: 0.9; }
}

/* ===== TITLE ===== */
.login-hero h1 {
    margin: 0 0 12px 0;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 45%, #c084fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 24px rgba(99,102,241,0.5));
}

/* Subtitle dengan typewriter */
.login-hero p {
    margin: 0 0 24px 0;
    font-size: clamp(0.88rem, 2vw, 1rem);
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 1;
    min-height: 1.4em;
}
.login-hero p::after {
    content: '\258D';
    color: #a5b4fc;
    margin-left: 2px;
    animation: cursorBlink 1s step-end infinite;
}
.login-hero p.typed::after {
    content: '';
}
@keyframes cursorBlink {
    50% { opacity: 0; }
}

/* ===== BADGES ===== */
.hero-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 9px 22px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e0e7ff;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(139,92,246,0.32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    z-index: 1;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 8px 32px rgba(99,102,241,0.2);
}

/* ===== CARD ===== */
.login-card-container {
    margin-top: -50px;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.login-card {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 40px 36px 34px;
    background: var(--cbt-glass-card);
    border: 1px solid var(--cbt-glass-border);
    border-radius: 24px;
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    box-shadow:
        0 32px 80px rgba(0,0,0,0.5),
        0 0 100px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06);
    color: var(--cbt-text-primary);
    text-align: center;
    overflow: hidden;
}
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00e5ff, #a855f7, transparent);
    opacity: 0.9;
    pointer-events: none;
}
.login-card h2 {
    margin: 0 0 8px;
    color: var(--cbt-text-strong);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative; z-index: 1;
}
.login-card > p {
    color: var(--cbt-text-muted) !important;
    font-size: 0.88rem;
    margin-bottom: 28px !important;
    position: relative; z-index: 1;
}

/* ===== FORM ===== */
.login-card .form-group { position: relative; z-index: 1; }

.login-card .form-group label {
    display: block;
    color: var(--cbt-text-label);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-bottom: 10px;
    text-align: left;
}

.login-card .form-group input,
.login-card #input-paket {
    width: 100%;
    padding: 14px 16px;
    background: var(--cbt-input-bg);
    border: 1.5px solid var(--cbt-input-border);
    border-radius: 12px;
    color: var(--cbt-input-text);
    font-size: 0.96rem;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
}
.login-card .form-group input::placeholder,
.login-card #input-paket::placeholder { color: var(--cbt-input-placeholder); font-weight: 400; }

.login-card .form-group input:focus,
.login-card #input-paket:focus {
    outline: none;
    border-color: #818cf8;
    background: var(--cbt-input-bg-focus);
    box-shadow:
        0 0 0 4px rgba(99,102,241,0.15),
        0 0 32px rgba(99,102,241,0.25),
        inset 0 1px 2px rgba(0,0,0,0.25);
}

.login-card #input-paket {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23a5b4fc' d='M6 8L0 0h12z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
}
.login-card #input-paket option { background: #0f172a; color: #e2e8f0; padding: 8px; }

/* Timer toggle */
.login-card .timer-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 0;
    background: var(--cbt-input-bg);
    border: 1.5px solid var(--cbt-input-border);
    border-radius: 12px;
    color: var(--cbt-text-label);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}
.login-card .timer-toggle-label:hover {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.4);
}
.login-card .timer-toggle-label input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: #6366f1;
    cursor: pointer; margin: 0; flex-shrink: 0;
}

.login-card #paket-info {
    color: var(--cbt-text-muted) !important;
    font-size: 0.78rem;
    line-height: 1.55;
    display: block;
    margin-top: 8px !important;
    text-align: left;
}
.login-card #paket-info b { color: #a5b4fc; font-weight: 700; }

/* ===== NEON BUTTON ===== */
.login-card .btn-start {
    position: relative;
    width: 100%;
    margin-top: 18px;
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 40%, #ec4899 100%);
    background-size: 200% 200%;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: gradientShift 6s ease infinite;
    box-shadow:
        0 10px 40px rgba(139,92,246,0.45),
        0 0 60px rgba(139,92,246,0.25),
        inset 0 1px 0 rgba(255,255,255,0.25);
    z-index: 1;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.login-card .btn-start::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
}
.login-card .btn-start:hover:not(:disabled)::after { left: 100%; }
.login-card .btn-start:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 16px 50px rgba(139,92,246,0.6),
        0 0 90px rgba(139,92,246,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
}
.login-card .btn-start:disabled { opacity: 0.7; cursor: wait; animation: none; }

.login-card #btn-refresh-paket {
    background: transparent; border: none;
    color: #a5b4fc; cursor: pointer;
    font-size: 1rem; padding: 0; line-height: 1;
    transition: transform 0.4s ease, color 0.2s ease;
}
.login-card #btn-refresh-paket:hover { color: #c7d2fe; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
    #cbt-login-view { min-height: auto; }
    .login-hero { padding: 36px 16px 76px; }
    .hero-logo { width: 72px; height: 72px; margin-bottom: 16px; }
    .hero-logo-svg { width: 42px; height: 42px; }
    .login-card-container { margin-top: -40px; padding: 0 14px; }
    .login-card { padding: 32px 22px 26px; border-radius: 20px; }
    .login-card h2 { font-size: 1.28rem; }
    .login-card > p { font-size: 0.82rem; margin-bottom: 22px !important; }
    .hero-badges { font-size: 0.7rem; padding: 8px 16px; gap: 4px; }
    .login-card .btn-start { font-size: 0.92rem; padding: 15px 20px; }
}
@media (max-width: 380px) {
    .login-card { padding: 26px 18px 22px; }
    .login-hero h1 { font-size: 1.6rem; }
}

/* ============================================================
   7. EXAM VIEW
   ============================================================ */

/* Banner ujian */
.exam-banner {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
    color: white;
    padding: 18px 26px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    box-shadow: 0 8px 24px rgba(79,70,229,0.25);
    position: relative;
    overflow: hidden;
}
.exam-banner::before {
    content: ''; position: absolute; top: -60%; right: -5%;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255,255,255,0.08); pointer-events: none;
}
.exam-banner::after {
    content: ''; position: absolute; bottom: -80%; right: 20%;
    width: 160px; height: 160px; border-radius: 50%;
    background: rgba(255,255,255,0.06); pointer-events: none;
}
.exam-banner-icon {
    width: 52px; height: 52px;
    background: rgba(255,255,255,0.18);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(8px);
    z-index: 1;
}
.exam-banner-text { z-index: 1; min-width: 0; flex: 1; }
.exam-banner-text h1 {
    margin: 0 0 5px 0;
    font-size: 1.15rem; font-weight: 700;
    letter-spacing: 0.2px; line-height: 1.25;
}
.exam-banner-text p {
    margin: 0; font-size: 0.82rem; opacity: 0.92;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.exam-banner-text p span { display: inline-flex; align-items: center; gap: 6px; }

/* Header info siswa */
.cbt-header {
    background: #ffffff;
    border: 1px solid var(--border-color);
    padding: 14px 20px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(15,23,42,0.04);
    gap: 14px;
}
.student-info { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.student-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-dark) 0%, #818cf8 100%);
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    letter-spacing: 0.5px;
}
.student-details {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.student-details h2 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.student-details span {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    display: block;
    position: relative;
    padding-left: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}
.student-details span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px #d1fae5;
}

/* Mobile adjustment */
@media (max-width: 480px) {
    .student-details h2 { font-size: 0.88rem; }
    .student-details span { font-size: 0.75rem; }
}
.header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }

.cbt-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.92rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    padding: 8px 15px;
    border-radius: 30px;
    border: 1px solid #fecaca;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.cbt-timer svg { flex-shrink: 0; }

.btn-toggle-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    padding: 8px 15px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    white-space: nowrap;
    font-family: inherit;
}
.btn-toggle-nav:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(99,102,241,0.2);
}

/* Kartu soal */
.cbt-main {
    background: white;
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid var(--border-color);
}
.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}
.question-title-wrap h3 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text-dark); }
.question-type-badge { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; display: block; }
.cognitive-badge {
    background: var(--primary-light);
    color: var(--primary-text);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}
.stimulus-box {
    background-color: #f8fafc;
    border-left: 4px solid var(--primary);
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
}
.indicator-text { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 20px; }
.indicator-text b { color: var(--text-dark); }
.question-text { font-size: 1.1rem; margin-bottom: 25px; color: var(--text-dark); font-weight: 500; }

/* Opsi Pilihan Ganda */
.options-container { display: flex; flex-direction: column; gap: 12px; }
.option-label {
    display: flex;
    align-items: flex-start;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}
.option-label:hover { border-color: var(--primary-light); background: #fbfbfe; }
.option-label.selected { background: var(--primary-light); border-color: var(--primary); }
.option-label.correct-review { background: #d1fae5; border-color: #059669; }
.option-label.wrong-review { background: #fee2e2; border-color: #dc2626; }
.option-letter { font-weight: 700; color: var(--primary-text); margin-right: 12px; font-size: 1.05rem; }
.option-input { display: none; }
.option-text { font-size: 1rem; color: var(--text-dark); line-height: 1.5; flex: 1; }

/* ============ BENAR-SALAH (Card) ============ */
.bs-card-wrap { display: flex; flex-direction: column; gap: 14px; margin-bottom: 12px; }
.bs-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 16px 18px 14px;
    transition: all 0.2s ease;
    position: relative;
}
.bs-card:hover { border-color: var(--primary-light); box-shadow: 0 4px 12px rgba(99,102,241,0.06); }
.bs-card.answered { border-color: #c7d2fe; background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%); }
.bs-card.correct-review { border-color: #6ee7b7; background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%); }
.bs-card.wrong-review { border-color: #fca5a5; background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%); }

.bs-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.bs-card-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-text);
    font-size: 0.78rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.bs-card-text { flex: 1; font-size: 0.95rem; line-height: 1.6; color: var(--text-dark); font-weight: 500; padding-top: 2px; }

.bs-card-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bs-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    position: relative;
}
.bs-opt input { display: none; }
.bs-opt:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15,23,42,0.06); }
.bs-opt-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.2s;
    background: #cbd5e1;
}
.bs-opt-label { font-size: 0.92rem; font-weight: 700; color: var(--text-muted); transition: color 0.2s; }

.bs-opt-benar.selected { border-color: #10b981; background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.bs-opt-benar.selected .bs-opt-icon { background: #10b981; }
.bs-opt-benar.selected .bs-opt-label { color: #065f46; }
.bs-opt-salah.selected { border-color: #ef4444; background: linear-gradient(135deg, #fef2f2, #fee2e2); }
.bs-opt-salah.selected .bs-opt-icon { background: #ef4444; }
.bs-opt-salah.selected .bs-opt-label { color: #991b1b; }

.bs-opt.correct-answer {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.bs-opt.correct-answer .bs-opt-icon { background: #10b981; }
.bs-opt.correct-answer .bs-opt-label { color: #065f46; }
.bs-opt.correct-answer::after {
    content: 'Kunci';
    position: absolute; top: -8px; right: -6px;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 10px;
    background: #10b981;
    color: #fff;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.bs-opt.wrong-answer {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    opacity: 0.85;
}
.bs-opt.wrong-answer .bs-opt-icon { background: #ef4444; }
.bs-opt.wrong-answer .bs-opt-label { color: #991b1b; text-decoration: line-through; }
.bs-opt.disabled { cursor: not-allowed; }
.bs-opt.disabled:hover { transform: none; box-shadow: none; }

.bs-card-review-note {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}
.bs-card-review-note.correct { background: #ecfdf5; color: #065f46; border-left: 3px solid #10b981; }
.bs-card-review-note.wrong   { background: #fef2f2; color: #991b1b; border-left: 3px solid #ef4444; }
.bs-card-review-note.empty   { background: #f1f5f9; color: #475569; border-left: 3px solid #94a3b8; }

/* Info bar BS */
.bs-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 0.85rem;
}
.bs-info-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #475569;
    flex-wrap: wrap;
}
.bs-info-text strong { color: var(--primary-text); font-weight: 800; font-size: 0.95rem; }
.bs-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
}
.bs-info-chip.all-done { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #065f46; animation: chipPop 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.bs-info-chip.partial { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #92400e; }
.bs-info-chip.none { background: #f1f5f9; color: #64748b; }

@keyframes chipPop {
    0% { transform: scale(0.85); }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.bs-info-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 100px;
    max-width: 200px;
}
.bs-info-progress-track {
    flex: 1;
    height: 6px;
    border-radius: 6px;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}
.bs-info-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 0%;
}
.bs-info-progress-fill.complete { background: linear-gradient(90deg, #10b981, #34d399); }
.bs-info-progress-text {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--primary-text);
    min-width: 32px;
    text-align: right;
    letter-spacing: 0.3px;
}

/* Footer tombol soal */
.btn-cbt {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: 0.2s;
    font-family: inherit;
}
.btn-prev { background: white; color: var(--text-dark); border: 1px solid var(--border-color); }
.btn-prev:hover { background: var(--secondary); }
.btn-next { background: var(--primary); color: white; }
.btn-next:hover { background: var(--primary-dark); }
.btn-finish { background: #059669; color: white; display: none; }
.btn-finish:hover { background: #047857; }

.review-panel {
    margin-top: 25px;
    padding: 20px;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 0 8px 8px 0;
    display: none;
}
.review-panel h4 { margin-top: 0; color: #1e3a8a; font-size: 1.1rem; margin-bottom: 10px; }

/* ============ MATCHING (Menjodohkan) ============ */
.match-wrap { display: flex; flex-direction: column; gap: 14px; }
.match-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 0.85rem;
}
.match-info-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #475569;
    flex-wrap: wrap;
}
.match-info-text strong { color: var(--primary-text); font-weight: 800; font-size: 0.95rem; }
.match-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}
.match-info-chip.all-done { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #065f46; }
.match-info-chip.partial { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #92400e; }
.match-info-chip.none { background: #f1f5f9; color: #64748b; }
.match-progress { flex: 1; min-width: 100px; max-width: 200px; display: flex; align-items: center; gap: 10px; }
.match-progress-track { flex: 1; height: 6px; border-radius: 6px; background: #e2e8f0; overflow: hidden; }
.match-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 0%;
}
.match-progress-fill.complete { background: linear-gradient(90deg, #10b981, #34d399); }
.match-progress-text { font-size: 0.72rem; font-weight: 800; color: var(--primary-text); min-width: 32px; text-align: right; }

.match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
.match-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;   /* biar teks panjang tidak dorong kolom melebar */
}
.match-col-head {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    padding: 4px 4px 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.match-item {
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 52px;
}
.match-item:hover:not(.disabled):not(.matched-review) {
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,0.05);
}
.match-item-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-text);
    font-size: 0.78rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.match-item-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-dark);
    font-weight: 500;
    padding-top: 2px;
    word-break: break-word;
}
.match-item.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
    transform: translateY(-1px);
}
.match-item.active .match-item-num { background: var(--primary); color: #fff; }

.match-item.matched[data-color="0"] { --mc: #6366f1; --mc-bg: #eef2ff; --mc-text: #3730a3; }
.match-item.matched[data-color="1"] { --mc: #ec4899; --mc-bg: #fce7f3; --mc-text: #9d174d; }
.match-item.matched[data-color="2"] { --mc: #f59e0b; --mc-bg: #fef3c7; --mc-text: #92400e; }
.match-item.matched[data-color="3"] { --mc: #10b981; --mc-bg: #d1fae5; --mc-text: #065f46; }
.match-item.matched { border-color: var(--mc); background: var(--mc-bg); }
.match-item.matched .match-item-num { background: var(--mc); color: #fff; }
.match-item.disabled { opacity: 0.55; cursor: not-allowed; background: #f8fafc; }

.match-badge {
    position: absolute;
    top: -8px; right: -8px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #fff;
    background: var(--mc, #6366f1);
    letter-spacing: 0.3px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 3px;
}
.match-clear-btn {
    position: static;
    margin-left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    border: none;
    color: var(--mc, #6366f1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    transition: 0.15s;
    padding: 0;
    flex-shrink: 0;
    /* ✅ area klik lebih lega */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.match-clear-btn:hover {
    background: #fff;
    color: #dc2626;
    transform: scale(1.15);
}
.match-clear-btn:active {
    transform: scale(0.9);
}

.match-empty-slot {
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #94a3b8;
    letter-spacing: 0.3px;
    white-space: nowrap;
    border: 1px dashed #cbd5e1;
}
.match-item.correct-review { border-color: #10b981 !important; background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important; }
.match-item.wrong-review   { border-color: #ef4444 !important; background: linear-gradient(135deg, #fef2f2, #fee2e2) !important; }
.match-item.correct-answer {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.match-review-note {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}
.match-review-note.correct { background: linear-gradient(135deg, #ecfdf5, #d1fae5); color: #065f46; border-left: 3px solid #10b981; }
.match-review-note.wrong   { background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #991b1b; border-left: 3px solid #ef4444; }
.match-review-note.empty   { background: #f1f5f9; color: #475569; border-left: 3px solid #94a3b8; }

/* ============ DRAG-DROP PUZZLE — Matching ============ */
.match-item.premise {
    touch-action: pan-y;         /* blok horizontal gesture, izinkan scroll vertikal */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.match-item.premise:not(.matched):not(.disabled):active {
    cursor: grabbing;
}
.match-item.premise.dragging {
    opacity: 0.35;
    cursor: grabbing;
    transition: none;
    transform: none;
}

/* Response yang jadi drop target */
.match-item.response.drop-hover {
    border-color: #6366f1 !important;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2),
                0 6px 20px rgba(99,102,241,0.15);
    transition: all 0.15s ease;
}

/* Ghost element yang mengikuti cursor */
.match-drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 100000000;
    max-width: 260px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(79,70,229,0.5),
                0 4px 12px rgba(15,23,42,0.15);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: rotate(-2deg) scale(1.05);
    will-change: left, top;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}
.match-drag-ghost .ghost-num {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
}

/* Snap animation saat drop sukses */
.match-snap-pulse {
    animation: matchSnapPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes matchSnapPulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(16,185,129,0.28); }
    100% { transform: scale(1); box-shadow: none; }
}

/* Mobile: tuning ghost */
@media (max-width: 480px) {
    .match-drag-ghost {
        max-width: 200px;
        padding: 9px 12px;
        font-size: 0.8rem;
    }
    .match-item.premise.dragging { opacity: 0.25; }
}

/* ============================================================
   8. RESULT VIEW
   ============================================================ */

/* Modal navigasi soal */
.nav-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65); /* Latar gelap transparan */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.nav-modal-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    background: var(--cbt-bg-surface, #ffffff);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
    padding: 24px;
    overflow-y: auto;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.nav-modal-overlay.active .nav-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Dark Mode */
[data-theme="dark"] .nav-modal-content {
    background: #0f172a;
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow: 0 25px 60px rgba(0,0,0,0.7);
}

/* Judul & Garis Pemisah */
.nav-modal-content h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 16px;
    margin-bottom: 16px;
}
[data-theme="dark"] .nav-modal-content h3 {
    color: #f1f5f9;
    border-bottom-color: rgba(99,102,241,0.2);
}

/* Tombol Tutup (dibuat gaya primary) */
.nav-modal-content button[onclick="toggleNavModal()"] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3) !important;
    transition: all 0.2s ease !important;
}
.nav-modal-content button[onclick="toggleNavModal()"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(99,102,241,0.4) !important;
}

/* Grid Kotak Soal */
.nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 24px;
}

/* Mobile */
@media (max-width: 480px) {
    .nav-modal-content { padding: 20px 18px; border-radius: 16px; }
    .nav-grid { gap: 8px; }
    .nav-box { padding: 10px 0; font-size: 0.85rem; }
}

.nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }
.nav-box {
    padding: 12px 0;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background: white;
    color: var(--text-muted);
    transition: 0.2s;
}
.nav-box:hover { border-color: var(--primary); color: var(--primary); }
.nav-box.answered { background: var(--primary-light); color: var(--primary-text); border-color: var(--primary-light); }
.nav-box.active { border: 2px solid var(--primary); box-shadow: 0 0 0 2px var(--primary-light); color: var(--primary); }

/* Score board */
.score-board {
    text-align: center;
    padding: 45px 40px 40px;
    display: none;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin: 40px auto;
    max-width: 600px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}
.score-board::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 6px;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 50%, #a5b4fc 100%);
}
.score-board h2 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.3px; }
.score-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-text);
    margin: 0 0 26px;
    padding: 6px 18px;
    background: var(--primary-light);
    border-radius: 30px;
    display: inline-block;
}
.score-badge {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.score-badge.grade-a { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #065f46; }
.score-badge.grade-b { background: linear-gradient(135deg, #dbeafe, #93c5fd); color: #1e40af; }
.score-badge.grade-c { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #92400e; }
.score-badge.grade-d { background: linear-gradient(135deg, #fee2e2, #fca5a5); color: #991b1b; }

.score-ring-wrap { position: relative; width: 200px; height: 200px; margin: 4px auto 26px; }
.score-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring-bg { fill: none; stroke: #e5e7eb; stroke-width: 14; }
.score-ring-fill {
    fill: none;
    stroke: url(#scoreGradient);
    stroke-width: 14;
    stroke-linecap: round;
    stroke-dasharray: 552.92;
    stroke-dashoffset: 552.92;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.score-ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.score-value { font-size: 3.6rem; font-weight: 800; color: var(--primary); line-height: 1; letter-spacing: -2px; }
.score-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; letter-spacing: 0.5px; }

.score-accuracy-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 12px 24px;
    margin: 0 0 20px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-radius: 14px;
    border: 1px solid var(--border-color);
}
.accuracy-item { text-align: center; }
.accuracy-label {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.accuracy-value { font-size: 1.15rem; font-weight: 800; color: var(--primary-text); line-height: 1; letter-spacing: -0.3px; }
.accuracy-divider { width: 1px; height: 32px; background: linear-gradient(180deg, transparent, #cbd5e1, transparent); }

.score-message {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 28px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    text-align: left;
}

.score-board .btn-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--border-color);
}
.score-board .btn-row .btn-cbt { padding: 13px 28px; font-size: 0.95rem; border-radius: 10px; transition: all 0.25s ease; }
.score-board .btn-row .btn-next { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 6px 16px rgba(99,102,241,0.3); }
.score-board .btn-row .btn-next:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(99,102,241,0.4); }
.score-board .btn-row .btn-prev:hover { transform: translateY(-2px); border-color: var(--primary); color: var(--primary-text); }

/* ============ LEADERBOARD ============ */
.leaderboard-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: left;
}
.leaderboard-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}
.leaderboard-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); }
.leaderboard-paket {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--primary-light);
    color: var(--primary-text);
    font-weight: 700;
    letter-spacing: 0.3px;
}
.leaderboard-loading { text-align: center; padding: 24px; color: #94a3b8; font-size: 0.9rem; }
.leaderboard-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    line-height: 1.6;
}
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15,23,42,0.05);
    table-layout: fixed;
}
.leaderboard-table thead { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }
.leaderboard-table th {
    padding: 10px 8px;
    text-align: left;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.leaderboard-table th:nth-child(1) { text-align: center; width: 44px; }
.leaderboard-table th:nth-child(2) { width: auto; }
.leaderboard-table th:nth-child(3) { width: 60px; text-align: center; }
.leaderboard-table th:nth-child(4) { width: 62px; text-align: center; }
.leaderboard-table th:nth-child(5) { width: 50px; text-align: center; }
.leaderboard-table th:nth-child(6) { width: 62px; text-align: center; }
.leaderboard-table td {
    padding: 11px 8px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-dark);
    vertical-align: middle;
    word-break: break-word;
}
.leaderboard-table td:nth-child(1) { text-align: center; font-size: 1.05rem; }
.leaderboard-table td:nth-child(3),
.leaderboard-table td:nth-child(4),
.leaderboard-table td:nth-child(5),
.leaderboard-table td:nth-child(6) { text-align: center; }
.leaderboard-table tbody tr:hover { background: #f8fafc; }
.leaderboard-table tbody tr:last-child td { border-bottom: none; }

.leaderboard-medal { font-size: 1.3rem; display: inline-block; }
.leaderboard-rank-num {
    display: inline-block;
    width: 26px; height: 26px;
    border-radius: 50%;
    line-height: 26px;
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    background: #f1f5f9;
    color: #64748b;
}
.leaderboard-you-badge {
    display: inline-block;
    font-size: 0.62rem;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-top: 3px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* "Tanpa Timer" — pakai simbol ∞ */
.durasi-none { font-size: 0; }
.durasi-none::before {
    content: '\221E';
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 700;
    color: #94a3b8;
}

/* Cell "Benar" — 24/30 */
.benar-cell { display: inline-flex; align-items: baseline; gap: 1px; font-size: 0.85rem; color: var(--text-dark); }
.benar-cell b { font-size: 0.95rem; font-weight: 800; color: var(--primary-text); }
.benar-cell small { font-size: 0.72rem; color: #94a3b8; font-weight: 600; }

.cheat-clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}
.cheat-clickable:hover {
    background: linear-gradient(90deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.05) 100%) !important;
}
.cheat-clickable:hover td {
    color: var(--primary-text);
}
  
.leaderboard-sort-note {
    margin-top: 12px;
    padding: 9px 14px;
    font-size: 0.78rem;
    color: #475569;
    background: #f1f5f9;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    border-left: 3px solid var(--primary);
}
.leaderboard-sort-note b { color: var(--primary-text); }

.leaderboard-table tr.rank-1 { background: linear-gradient(90deg, #fef9c3 0%, #fef3c7 30%, transparent 100%); }
.leaderboard-table tr.rank-2 { background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 30%, transparent 100%); }
.leaderboard-table tr.rank-3 { background: linear-gradient(90deg, #fef3c7 0%, #fed7aa 30%, transparent 100%); }
.leaderboard-table tr.is-me {
    background: linear-gradient(90deg, #dbeafe 0%, #e0e7ff 40%, transparent 100%) !important;
    border-left: 3px solid var(--primary);
    box-shadow: inset 0 0 0 1px rgba(99,102,241,0.15);
}
.leaderboard-table tr.is-me td { font-weight: 700; }

/* ============ DARK MODE — Ranking Rows ============ */
[data-theme="dark"] .leaderboard-table tr.rank-1 {
    background: linear-gradient(90deg, rgba(254,249,195,0.16) 0%, rgba(254,243,199,0.06) 30%, transparent 100%) !important;
}
[data-theme="dark"] .leaderboard-table tr.rank-2 {
    background: linear-gradient(90deg, rgba(203,213,225,0.14) 0%, rgba(226,232,240,0.05) 30%, transparent 100%) !important;
}
[data-theme="dark"] .leaderboard-table tr.rank-3 {
    background: linear-gradient(90deg, rgba(254,215,170,0.16) 0%, rgba(251,146,60,0.06) 30%, transparent 100%) !important;
}

/* ✅ FIX UTAMA: is-me di dark mode — background GELAP transparan, teks TERANG */
[data-theme="dark"] .leaderboard-table tr.is-me {
    background: linear-gradient(90deg, rgba(99,102,241,0.35) 0%, rgba(139,92,246,0.22) 45%, rgba(99,102,241,0.06) 100%) !important;
    border-left: 3px solid #a5b4fc;
    box-shadow: inset 0 0 0 1px rgba(165,180,252,0.25);
}
[data-theme="dark"] .leaderboard-table tr.is-me td {
    color: #f1f5f9 !important;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
[data-theme="dark"] .leaderboard-table tr.is-me .leaderboard-you-badge {
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    color: #0f172a;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
  
.leaderboard-extra {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--primary-text);
    font-weight: 600;
    text-align: center;
}
.leaderboard-extra .rank-number { font-size: 1.15rem; font-weight: 800; color: var(--primary); margin: 0 4px; }
.leaderboard-total-info { text-align: center; margin-top: 12px; font-size: 0.78rem; color: #94a3b8; font-weight: 500; }

/* ============ BADGES ============ */
.badges-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: left;
}
.badges-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}
.badges-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); }
.badges-count {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    text-align: center;
    border-radius: 14px;
    transition: all 0.25s ease;
    background: #f8fafc;
    border: 1.5px solid var(--border-color);
    cursor: help;
    min-height: 110px;
    justify-content: flex-start;
}
.badge-item.unlocked {
    background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
    border-color: #fcd34d;
    box-shadow: 0 4px 12px rgba(251,191,36,0.15);
}
.badge-item.unlocked:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(251,191,36,0.25); }
.badge-item.locked { opacity: 0.6; background: #f1f5f9; }
.badge-item.locked .badge-icon { filter: grayscale(1); opacity: 0.6; }
.badge-icon { font-size: 1.9rem; margin-bottom: 8px; line-height: 1; flex-shrink: 0; }
.badge-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.25;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.badge-item.unlocked .badge-label { color: #78350f; }
.badge-item.locked .badge-label { color: #64748b; }
.badge-desc { font-size: 0.68rem; color: var(--text-muted); line-height: 1.35; margin: 0; }

/* Dark mode override untuk badges */
[data-theme="dark"] .badge-item {
    background: rgba(15,23,42,0.6);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .badge-item.unlocked {
    background: linear-gradient(135deg, rgba(254,243,199,0.18) 0%, rgba(253,230,138,0.12) 100%);
    border-color: rgba(252,211,77,0.5);
    box-shadow: 0 4px 12px rgba(251,191,36,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="dark"] .badge-item.unlocked .badge-label { color: #fde68a; }
[data-theme="dark"] .badge-item.locked .badge-label { color: #64748b; }
[data-theme="dark"] .badge-desc { color: #94a3b8; }
  
.menu-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ============ LIVE TOGGLE ============ */
.live-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: #fff;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.live-toggle:hover { border-color: var(--primary); color: var(--primary-text); }
.live-toggle.active {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #6ee7b7;
    color: #065f46;
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; transition: 0.2s; }
.live-toggle.active .live-dot {
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    animation: livePulse 1.5s infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ============================================================
   9. MODAL UMUM & TOAST
   ============================================================ */
.cbt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.cbt-modal-overlay.active { opacity: 1; visibility: visible; }
.cbt-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 420px;
    padding: 28px 26px 22px;
    box-shadow: 0 25px 60px rgba(15,23,42,0.25);
    transform: scale(0.9) translateY(10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    text-align: center;
}
.cbt-modal-overlay.active .cbt-modal { transform: scale(1) translateY(0); opacity: 1; }
.cbt-modal-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
}
.cbt-modal.warning .cbt-modal-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; }
.cbt-modal.danger  .cbt-modal-icon { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }
.cbt-modal.info    .cbt-modal-icon { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #4f46e5; }
.cbt-modal.success .cbt-modal-icon { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #059669; }
.cbt-modal-icon svg { width: 30px; height: 30px; }
.cbt-modal h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; }
.cbt-modal p { margin: 0 0 24px; font-size: 0.94rem; color: var(--text-muted); line-height: 1.55; }
.cbt-modal p b { color: var(--text-dark); font-weight: 700; }
.cbt-modal-actions { display: flex; gap: 10px; }
.cbt-modal-btn {
    flex: 1;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.94rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-family: inherit;
}
.cbt-modal-btn.ghost { background: #fff; color: var(--text-dark); border: 1px solid var(--border-color); }
.cbt-modal-btn.ghost:hover { background: var(--secondary); }
.cbt-modal-btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.cbt-modal-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.45); }
.cbt-modal-btn.primary.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 14px rgba(239,68,68,0.35);
}
.cbt-modal-btn.primary.danger:hover { box-shadow: 0 6px 18px rgba(239,68,68,0.45); }

/* Toast */
.cbt-toast-container {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 100000001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    width: calc(100% - 40px);
    pointer-events: none;
}
.cbt-toast {
    background: #fff;
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 10px 30px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--border-color);
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    animation: toastSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cbt-toast.hiding { animation: toastSlideOut 0.3s cubic-bezier(0.7, 0, 0.84, 0) forwards; }
@keyframes toastSlideIn {
    from { transform: translateX(calc(100% + 40px)); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(calc(100% + 40px)); opacity: 0; }
}
.cbt-toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.cbt-toast.success::before { background: #10b981; }
.cbt-toast.error::before   { background: #ef4444; }
.cbt-toast.warning::before { background: #f59e0b; }
.cbt-toast.info::before    { background: #6366f1; }
.cbt-toast-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cbt-toast.success .cbt-toast-icon { background: #d1fae5; color: #059669; }
.cbt-toast.error   .cbt-toast-icon { background: #fee2e2; color: #dc2626; }
.cbt-toast.warning .cbt-toast-icon { background: #fef3c7; color: #d97706; }
.cbt-toast.info    .cbt-toast-icon { background: #e0e7ff; color: #4f46e5; }
.cbt-toast-content { flex: 1; min-width: 0; }
.cbt-toast-title { font-weight: 700; font-size: 0.92rem; color: var(--text-dark); margin: 0 0 2px; line-height: 1.3; }
.cbt-toast-message { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.45; word-wrap: break-word; }
.cbt-toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}
.cbt-toast-close:hover { background: var(--secondary); color: var(--text-dark); }
.cbt-toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; animation: toastProgress linear forwards; }
.cbt-toast.success .cbt-toast-progress { background: #10b981; }
.cbt-toast.error   .cbt-toast-progress { background: #ef4444; }
.cbt-toast.warning .cbt-toast-progress { background: #f59e0b; }
.cbt-toast.info    .cbt-toast-progress { background: #6366f1; }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }


/* ============================================================
   10. ADMIN VIEW
   ============================================================ */
/* ============================================================
   ADMIN VIEW
   ============================================================ */
#cbt-admin-view {
    background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 30%, #f1f5f9 100%);
    padding-bottom: 20px;
    flex-shrink: 0;
    width: 100%;
}

/* ============================================================
   LOGIN MODE: Center Vertikal + Horizontal
   ============================================================ */
#cbt-admin-view.admin-login-mode {
    flex: 1 1 auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    padding: 20px;
    box-sizing: border-box;
}

#cbt-admin-view.admin-login-mode #admin-login-panel {
    padding: 0 !important;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* Hero admin */
.admin-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #6d28d9 100%);
    border-radius: 24px;
    padding: 24px 28px;
    margin-bottom: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px -10px rgba(67, 56, 202, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Efek glow di pojok */
.admin-hero::before {
    content: ''; position: absolute; top: -50%; right: -10%;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.admin-hero-profile { display: flex; align-items: center; gap: 16px; z-index: 1; min-width: 0; flex: 1; }

.admin-hero-avatar {
    width: 60px; height: 60px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.3rem;
    letter-spacing: 0.5px;
    flex-shrink: 0; color: #fff;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.admin-hero-text h2 {
    margin: 0 0 4px; font-size: 1.2rem; font-weight: 800;
    color: #fff; letter-spacing: -0.3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-hero-text span {
    font-size: 0.8rem; font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 10px; border-radius: 20px;
    display: inline-flex; align-items: center; gap: 6px;
}

/* Penataan Tombol */
.admin-hero-actions {
    display: flex; gap: 10px; z-index: 1;
    flex-shrink: 0; flex-wrap: wrap;
}

.admin-hero-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 18px;
    border-radius: 12px; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; font-family: inherit;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff; backdrop-filter: blur(8px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-hero-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    border-color: rgba(255,255,255,0.4);
}

/* Warna khusus untuk tombol bahaya/logout */
.admin-hero-btn.danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}
.admin-hero-btn.danger:hover {
    background: rgba(239, 68, 68, 0.4);
    color: #fff;
}

/* Admin tabs */
.admin-tabs {
    display: flex;
    gap: 6px;
    padding: 6px;
    margin-bottom: 18px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(15,23,42,0.03);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-tab {
    flex: 1;
    min-width: 100px;
    padding: 11px 18px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.admin-tab:hover { background: #f8fafc; color: var(--text-dark); }
.admin-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 6px 14px rgba(99,102,241,0.3);
}
.admin-tab .tab-icon { font-size: 1.05rem; }
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; animation: tabFadeIn 0.3s ease; }
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel admin */
.admin-panel {
    background: #fff;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(15,23,42,0.05);
    border: 1px solid rgba(226,232,240,0.8);
    position: relative;
    overflow: hidden;
  	z-index: 1; 
}
.admin-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), #818cf8);
    opacity: 0.85;
}
.admin-panel.accent-green::before { background: linear-gradient(90deg, #10b981, #34d399); }
.admin-panel.accent-red::before   { background: linear-gradient(90deg, #ef4444, #f87171); }
.admin-panel.accent-amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }

/* Fallback untuk browser lama */
.admin-panel.has-dropdown {
    overflow: visible !important;
    position: relative !important;
    z-index: 20 !important;
}
/* Fallback: .has-dropdown untuk browser lama */
.admin-panel.has-dropdown { overflow: visible; }
.admin-panel.has-dropdown::before { border-radius: 16px 16px 0 0; }

.admin-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    position: relative;
    z-index: 500;
}
.admin-panel-head h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--text-dark);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.2px;
}
.admin-panel-head h3 .icon-badge {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--primary-light);
    color: var(--primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}
.admin-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }


/* ============================================================
   11. ADMIN COMPONENTS
   ============================================================ */

/* Tombol admin */
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.admin-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}
.admin-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99,102,241,0.35); }
.admin-btn-soft { background: var(--primary-light); color: var(--primary-text); }
.admin-btn-soft:hover { background: #c7d2fe; }
.admin-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16,185,129,0.25);
}
.admin-btn-success:hover { transform: translateY(-1px); }
.admin-btn-danger { background: #fee2e2; color: #dc2626; }
.admin-btn-danger:hover { background: #fecaca; }
.admin-btn-ghost {
    background: #fff;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
}
.admin-btn-ghost:hover { background: var(--secondary); border-color: var(--primary); }
.admin-btn.hidden { display: none !important; }

/* ============================================================
   ADMIN — DROPDOWN AKSI (Fixed, Floating, Dark Mode)
   ============================================================ */

/* Wrapper trigger: relative sebagai anchor (tidak ada z-index agresif) */
.admin-actions-dropdown {
    position: relative;
    display: inline-block;
}

.admin-actions-dropdown > button {
    cursor: pointer;
    pointer-events: auto;
}

/* Menu: SELALU pakai selector body>  karena di-append ke body via JS */
body > .admin-actions-menu {
    position: fixed;
    min-width: 230px;
    max-width: 280px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(15,23,42,0.18),
        0 8px 20px rgba(15,23,42,0.10),
        0 0 0 1px rgba(99,102,241,0.08);
    padding: 6px;
    z-index: 2147483647;      /* max int32 — di atas segalanya */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.18s;
    pointer-events: auto;
    font-family: inherit;
}

body > .admin-actions-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Item menu */
.admin-actions-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, transform 0.15s, color 0.15s;
    white-space: nowrap;
}

.admin-actions-menu button:hover {
    background: linear-gradient(90deg, #eef2ff 0%, #f8fafc 100%);
    transform: translateX(2px);
}

.admin-actions-menu button.danger {
    color: #dc2626;
}

.admin-actions-menu button.danger:hover {
    background: #fef2f2;
}

.admin-actions-menu .menu-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
    margin: 6px 10px;
}

.admin-actions-menu .menu-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.admin-actions-menu .menu-label {
    flex: 1;
}

.admin-actions-menu .menu-section-label {
    padding: 8px 14px 4px;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    user-select: none;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] body > .admin-actions-menu {
    background: #0f172a;
    border-color: rgba(99,102,241,0.3);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.7),
        0 8px 20px rgba(0,0,0,0.4),
        0 0 0 1px rgba(99,102,241,0.15);
}

[data-theme="dark"] .admin-actions-menu button {
    color: #cbd5e1;
}

[data-theme="dark"] .admin-actions-menu button:hover {
    background: linear-gradient(90deg, rgba(99,102,241,0.18), rgba(139,92,246,0.08));
    color: #a5b4fc;
}

[data-theme="dark"] .admin-actions-menu button.danger {
    color: #fca5a5;
}

[data-theme="dark"] .admin-actions-menu button.danger:hover {
    background: rgba(220,38,38,0.15);
    color: #fecaca;
}

[data-theme="dark"] .admin-actions-menu .menu-divider {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(99,102,241,0.25) 20%,
        rgba(99,102,241,0.25) 80%,
        transparent
    );
}

[data-theme="dark"] .admin-actions-menu .menu-section-label {
    color: #64748b;
}

/* Select modern */
.admin-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 11px;
    background: #fff;
    font-family: inherit;
    font-size: 0.94rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236366f1' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    font-weight: 600;
}
.admin-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }

/* Toggle paket aktif */
.paket-control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.paket-control-row .admin-select { flex: 1; min-width: 200px; }

.paket-toggle {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 11px;
    background: #f8fafc;
    border: 1.5px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    transition: all 0.22s ease;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.paket-toggle:hover:not(.disabled) { border-color: var(--primary); background: #fbfbfe; }
.paket-toggle.active {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #6ee7b7;
    color: #065f46;
    box-shadow: 0 4px 12px rgba(16,185,129,0.15);
}
.paket-toggle input { display: none; }
.paket-toggle .toggle-track {
    width: 34px; height: 20px;
    border-radius: 20px;
    background: #cbd5e1;
    position: relative;
    transition: 0.25s;
    flex-shrink: 0;
}
.paket-toggle .toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.paket-toggle input:checked + .toggle-track { background: #10b981; }
.paket-toggle input:checked + .toggle-track::after { transform: translateX(14px); }
.paket-toggle.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ============ RICH TEXT EDITOR ============ */
.cbt-editor {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: 0.2s;
    margin-top: 4px;
}
.cbt-editor:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }

.cbt-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #fafbff 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
}
.cbt-editor-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    transition: 0.15s;
    font-family: inherit;
    line-height: 1;
}
.cbt-editor-btn:hover { background: #e0e7ff; color: var(--primary-text); }
.cbt-editor-btn.active { background: var(--primary-light); color: var(--primary-text); }
.cbt-editor-btn svg { width: 15px; height: 15px; }
.cbt-editor-sep { width: 1px; height: 18px; background: #cbd5e1; margin: 0 4px; }

.cbt-editor-content {
    min-height: 90px;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px 14px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-dark);
    outline: none;
    font-family: inherit;
    word-wrap: break-word;
}
.cbt-editor-body { position: relative; }
.cbt-editor-placeholder {
    position: absolute;
    top: 12px; left: 14px; right: 14px;
    color: #cbd5e1;
    font-weight: 400;
    font-size: 0.92rem;
    line-height: 1.6;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}
.cbt-editor.has-content .cbt-editor-placeholder { display: none; }
.cbt-editor-content p { margin: 0 0 8px; }
.cbt-editor-content p:last-child { margin-bottom: 0; }
.cbt-editor-content h3 { margin: 8px 0 6px; font-size: 1.05rem; color: var(--text-dark); font-weight: 700; }
.cbt-editor-content ul, .cbt-editor-content ol { margin: 6px 0; padding-left: 24px; }
.cbt-editor-content li { margin-bottom: 4px; }
.cbt-editor-content a { color: var(--primary); text-decoration: underline; }
.cbt-editor-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; }
.cbt-editor-content strong, .cbt-editor-content b { font-weight: 800; color: var(--text-dark); }
.cbt-editor-content em, .cbt-editor-content i { font-style: italic; }
.cbt-editor-content blockquote {
    margin: 8px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--primary);
    background: #f8fafc;
    color: #475569;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}
.cbt-editor-content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.88em;
    color: #db2777;
}
.cbt-editor-content .math-tex {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, monospace;
    color: #0369a1;
    font-size: 0.88em;
}

/* Alignment di editor content */
.cbt-editor-content [style*="text-align: center"] { text-align: center; }
.cbt-editor-content [style*="text-align: right"]  { text-align: right; }
.cbt-editor-content [style*="text-align: justify"] { text-align: justify; }

/* Compact editor */
.cbt-editor-compact .cbt-editor-toolbar { padding: 4px 6px; gap: 1px; }
.cbt-editor-compact .cbt-editor-btn { min-width: 26px; height: 26px; padding: 0 6px; font-size: 0.76rem; }
.cbt-editor-compact .cbt-editor-btn svg { width: 12px; height: 12px; }
.cbt-editor-compact .cbt-editor-content { min-height: 44px; max-height: 160px; padding: 9px 12px; font-size: 0.88rem; line-height: 1.5; }
.cbt-editor-compact .cbt-editor-placeholder { top: 9px; left: 12px; font-size: 0.88rem; line-height: 1.5; }
.cbt-editor-compact .cbt-editor-sep { height: 14px; margin: 0 3px; }

.cbt-editor.source-mode .cbt-editor-content { display: none; }
.cbt-editor.source-mode textarea.cbt-editor-source {
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #1e293b;
    background: #f8fafc;
    resize: vertical;
}
.cbt-editor-btn.active-source {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
}

.cbt-editor-btn.active {
    background: var(--primary-light) !important;
    color: var(--primary-text) !important;
}

[data-theme="dark"] .cbt-editor-btn.active {
    background: rgba(99,102,241,0.25) !important;
    color: #a5b4fc !important;
}

/* ============ STATISTIK COMPACT ============ */
.stat-chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.stat-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 12px;
    background: #fff;
    border: 1.5px solid var(--border-color);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.stat-chip::before {
    content: '';
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 3px;
    border-radius: 3px;
}
.stat-chip.peserta::before  { background: linear-gradient(180deg, #6366f1, #4f46e5); }
.stat-chip.attempts::before { background: linear-gradient(180deg, #f59e0b, #d97706); }
.stat-chip.avg::before      { background: linear-gradient(180deg, #06b6d4, #0891b2); }
.stat-chip.max::before      { background: linear-gradient(180deg, #10b981, #059669); }
.stat-chip.min::before      { background: linear-gradient(180deg, #ef4444, #dc2626); }
.stat-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,0.07); border-color: #c7d2fe; }
.stat-chip .chip-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(15,23,42,0.1);
}
.stat-chip.peserta  .chip-icon { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; }
.stat-chip.attempts .chip-icon { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.stat-chip.avg      .chip-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.stat-chip.max      .chip-icon { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.stat-chip.min      .chip-icon { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.stat-chip .chip-body { min-width: 0; flex: 1; }
.stat-chip .chip-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 3px;
    line-height: 1;
}
.stat-chip .chip-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
    letter-spacing: -0.5px;
}

.paket-stat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05);
    background: #fff;
}
.paket-stat-table thead { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }
.paket-stat-table th {
    padding: 9px 10px;
    text-align: left;
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.paket-stat-table th:not(:first-child) { text-align: center; }
.paket-stat-table td {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-dark);
    vertical-align: middle;
}
.paket-stat-row-clickable {
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.paket-stat-row-clickable:hover {
    background: linear-gradient(90deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.05) 100%) !important;
    transform: translateX(2px);
}
.paket-stat-row-clickable:hover .paket-name {
    color: #818cf8 !important;
}
.paket-stat-table td:not(:first-child) { text-align: center; }
.paket-stat-table tbody tr:hover { background: #f8fafc; }
.paket-stat-table tbody tr:last-child td { border-bottom: none; }
.paket-stat-table .paket-name { font-weight: 700; color: var(--primary-text); white-space: nowrap; }
.paket-stat-table .score-high { color: #059669; font-weight: 800; }
.paket-stat-table .score-low  { color: #dc2626; font-weight: 800; }
.paket-stat-table .score-avg  { color: #0891b2; font-weight: 800; }

/* ============ SEARCHABLE SELECT ============ */
.cbt-search-select { position: relative; flex: 1; min-width: 200px; z-index: 300; }
.cbt-search-select .ss-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 11px;
    background: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    transition: 0.2s;
}
.cbt-search-select .ss-trigger:hover { border-color: var(--primary); }
.cbt-search-select.open .ss-trigger { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.cbt-search-select .ss-trigger-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbt-search-select .ss-trigger-label.placeholder { color: #94a3b8; font-weight: 500; }
.cbt-search-select .ss-caret { flex-shrink: 0; color: #94a3b8; transition: 0.2s; font-size: 0.7rem; }
.cbt-search-select.open .ss-caret { transform: rotate(180deg); }
.cbt-search-select .ss-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--border-color);
    border-radius: 11px;
    box-shadow: 0 12px 32px rgba(15,23,42,0.15), 0 4px 10px rgba(15,23,42,0.06);
    max-height: 320px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}
.cbt-search-select.open .ss-dropdown { display: flex; animation: ssDropIn 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes ssDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.cbt-search-select .ss-search-wrap { padding: 8px; border-bottom: 1px solid var(--border-color); position: relative; flex-shrink: 0; }
.cbt-search-select .ss-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.86rem;
    color: var(--text-dark);
    background: #f8fafc;
    outline: none;
    transition: 0.15s;
}
.cbt-search-select .ss-search-input:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}
.cbt-search-select .ss-search-icon {
    position: absolute;
    left: 18px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
}
.cbt-search-select .ss-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px; flex: 1; }
.cbt-search-select .ss-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: 0.12s;
}
.cbt-search-select .ss-option:hover { background: #f8fafc; }
.cbt-search-select .ss-option.active { background: linear-gradient(90deg, #eef2ff, #f8fafc); color: var(--primary-text); font-weight: 700; }
.cbt-search-select .ss-option .ss-opt-count { margin-left: auto; font-size: 0.72rem; color: #94a3b8; font-weight: 600; }
.cbt-search-select .ss-empty { padding: 20px 14px; text-align: center; color: #94a3b8; font-size: 0.82rem; font-style: italic; }
.cbt-search-select .ss-highlight {
    background: linear-gradient(180deg, transparent 60%, #fde68a 60%);
    font-weight: 800;
    color: var(--text-dark);
    padding: 0 1px;
    border-radius: 2px;
}

/* ============ SEARCH BAR ============ */
.cbt-search-bar { position: relative; margin-bottom: 12px; }
.cbt-search-bar input {
    width: 100%;
    padding: 11px 14px 11px 38px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.88rem;
    color: var(--text-dark);
    background: #f8fafc;
    outline: none;
    transition: 0.2s;
}
.cbt-search-bar input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.cbt-search-bar .search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.95rem;
    pointer-events: none;
}
.cbt-search-bar .search-clear {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: #e2e8f0;
    border: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1;
    transition: 0.15s;
}
.cbt-search-bar .search-clear:hover { background: #cbd5e1; color: #1e293b; }
.cbt-search-bar.has-value .search-clear { display: flex; }
.cbt-search-bar .search-count {
    position: absolute;
    right: 40px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 700;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: none;
    display: none;
}
.cbt-search-bar.has-value .search-count { display: inline-block; }
.cbt-search-bar.no-result .search-count { background: #fee2e2; color: #991b1b; }

/* ============ SOAL LIST ============ */
.admin-soal-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 10px;
    border: 1.5px solid #f1f5f9;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}
.admin-soal-item:hover {
    border-color: var(--primary-light);
    background: linear-gradient(90deg, #fafbff 0%, #ffffff 100%);
    transform: translateX(2px);
    box-shadow: 0 6px 18px rgba(99,102,241,0.08);
}
.admin-soal-item.locked {
    background: #fafafa;
    opacity: 0.85;
    cursor: default;
    position: relative;
}
.admin-soal-item.locked:hover { transform: none; box-shadow: none; border-color: #f1f5f9; }
.admin-soal-item.locked::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(148,163,184,0.03) 10px, rgba(148,163,184,0.03) 20px);
}
.admin-soal-item.selected {
    background: linear-gradient(90deg, #eef2ff 0%, #ffffff 100%);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 4px 12px rgba(99,102,241,0.12);
}
.admin-soal-num {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(99,102,241,0.25);
}
.admin-soal-body { flex: 1; min-width: 0; }
.admin-soal-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.admin-soal-badge {
    font-size: 0.68rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-soal-badge.type-matching { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; }
.admin-soal-badge.type-pg  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.admin-soal-badge.type-pgk { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.admin-soal-badge.type-bs  { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.admin-soal-badge.level    { background: #f1f5f9; color: #475569; }
.admin-soal-badge.owner-me    { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; border: 1px solid #93c5fd; }
.admin-soal-badge.owner-other { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; border: 1px solid #fca5a5; }
.admin-soal-badge.owner-none  { background: #f1f5f9; color: #64748b; border: 1px dashed #cbd5e1; font-style: italic; }

.admin-soal-preview {
    font-size: 0.88rem;
    color: var(--text-dark);
    line-height: 1.5;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.admin-soal-actions { display: flex; gap: 6px; flex-shrink: 0; }

.admin-icon-btn {
    width: 34px; height: 34px;
    border-radius: 9px;
    border: 1.5px solid var(--border-color);
    background: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    color: var(--text-muted);
}
.admin-icon-btn:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary-text); }
.admin-icon-btn.danger:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.admin-icon-btn.locked {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #cbd5e1;
    cursor: not-allowed;
}
.admin-icon-btn.locked:hover { background: #f1f5f9; border-color: #e2e8f0; color: #cbd5e1; }

/* Checkbox soal */
.admin-soal-checkbox {
    width: 20px; height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    border-radius: 6px;
}
.admin-soal-checkbox:disabled { opacity: 0.35; cursor: not-allowed; }

.admin-select-all-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-muted);
}
.admin-select-all-bar input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}
.admin-select-all-bar label { cursor: pointer; user-select: none; }

/* Bulk toolbar */
.admin-bulk-toolbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    box-shadow: 0 8px 20px rgba(79,70,229,0.25);
    animation: bulkSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-wrap: wrap;
}
.admin-bulk-toolbar.active { display: flex; }
@keyframes bulkSlideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.bulk-info { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.88rem; z-index: 1; }
.bulk-info .bulk-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    background: rgba(255,255,255,0.25);
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.85rem;
    border: 1px solid rgba(255,255,255,0.3);
}
.bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; }
.bulk-actions .admin-btn {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(6px);
}
.bulk-actions .admin-btn:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.5); transform: translateY(-1px); }
.bulk-actions .admin-btn.danger { background: rgba(254,226,226,0.22); border-color: rgba(254,202,202,0.5); }
.bulk-actions .admin-btn.danger:hover { background: rgba(254,202,202,0.4); }

.admin-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 1px dashed var(--border-color);
    line-height: 1.6;
}
.admin-empty b { color: var(--primary-text); }

/* User table */
.user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(15,23,42,0.04);
    background: #fff;
}
.user-table thead { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; }
.user-table th {
    padding: 11px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.user-table th:first-child { text-align: center; width: 42px; }
.user-table th:last-child { text-align: center; width: 100px; }
.user-table td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-dark);
    vertical-align: middle;
}
.user-table td:first-child { text-align: center; font-weight: 700; color: var(--text-muted); }
.user-table td:last-child { text-align: center; }
.user-table tbody tr:hover { background: #f8fafc; }
.user-table tbody tr:last-child td { border-bottom: none; }
.user-table code {
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
}
.user-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.user-role-badge.super { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.user-role-badge.guru { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.self-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}


/* ============================================================
   12. ADMIN SPECIFIC MODALS
   ============================================================ */

/* Form Modal (Soal) */
#admin-form-modal .cbt-modal {
    max-width: 780px !important;
    padding: 0;
    text-align: left;
    max-height: 92vh;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
#admin-form-modal .admin-form-header {
    flex-shrink: 0;
    background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
    padding: 18px 28px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
    z-index: 10;
}
#admin-form-modal .admin-form-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#admin-form-modal .admin-form-header h3::before {
    content: '\270F\FE0F';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--primary-light);
    font-size: 0.95rem;
}
#admin-form-modal .admin-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px 26px;
    -webkit-overflow-scrolling: touch;
}

#admin-form-modal .form-group { margin-bottom: 16px; }
#admin-form-modal .form-group label {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-dark);
    margin-bottom: 7px;
    letter-spacing: 0.1px;
}
#admin-form-modal .form-group label small { font-weight: 500; color: #94a3b8; font-size: 0.76rem; margin-left: 6px; }

#admin-form-modal input[type="text"],
#admin-form-modal input[type="number"],
#admin-form-modal textarea,
#admin-form-modal select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-dark);
    background: #fff;
    transition: all 0.2s ease;
    line-height: 1.55;
    font-weight: 500;
}
#admin-form-modal textarea {
    resize: vertical;
    min-height: 90px;
    max-height: 320px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-y: auto;
}
#admin-form-stimulus { min-height: 110px; }
#admin-form-pertanyaan { min-height: 90px; }
#admin-form-pembahasan { min-height: 100px; }
#admin-form-statements_1,
#admin-form-statements_2,
#admin-form-statements_3,
#admin-form-statements_4 { min-height: 70px; }

#admin-form-modal input:focus,
#admin-form-modal textarea:focus,
#admin-form-modal select:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-light);
    background: #fbfbff;
}
#admin-form-modal input::placeholder,
#admin-form-modal textarea::placeholder { color: #cbd5e1; font-weight: 400; }

#admin-form-modal select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236366f1' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
    font-weight: 600;
}

#admin-form-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
#admin-form-modal .form-row .form-group { margin-bottom: 0; }

#admin-form-modal .form-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: 18px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
#admin-form-modal .form-section-title::before {
    content: '';
    width: 4px; height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

/* Opsi group A-E */
#admin-form-modal .opsi-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px !important;
}
#admin-form-modal .opsi-label {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 800;
    font-size: 0.92rem;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(99,102,241,0.25);
}
#admin-form-modal .opsi-group:nth-of-type(3) .opsi-label { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
#admin-form-modal .opsi-group:nth-of-type(4) .opsi-label { background: linear-gradient(135deg, #ec4899, #db2777); }
#admin-form-modal .opsi-group:nth-of-type(5) .opsi-label { background: linear-gradient(135deg, #f59e0b, #d97706); }
#admin-form-modal .opsi-group:nth-of-type(6) .opsi-label { background: linear-gradient(135deg, #10b981, #059669); }
#admin-form-modal .opsi-group > .cbt-editor,
#admin-form-modal .opsi-group > textarea { flex: 1; min-width: 0; }

#admin-fields-options .form-group { margin-bottom: 10px; }
#admin-fields-options label { margin-bottom: 12px !important; display: flex; align-items: center; gap: 6px; }

#admin-fields-statements .form-group { margin-bottom: 12px; position: relative; }

#admin-form-modal .admin-form-footer {
    flex-shrink: 0;
    padding: 16px 28px;
    background: linear-gradient(0deg, #fafbff 0%, #ffffff 100%);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 -4px 12px rgba(15,23,42,0.04);
    z-index: 10;
}
#admin-form-modal .admin-form-footer .cbt-modal-btn {
    padding: 13px 24px;
    font-size: 0.94rem;
    border-radius: 10px;
    font-weight: 700;
}

/* Kunci chip */
.kunci-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border: 2px solid var(--border-color);
    border-radius: 11px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.9rem;
    background: #fff;
    transition: 0.2s;
}
.kunci-chip:hover { border-color: var(--primary-light); background: #fbfbfe; }
.kunci-chip input { margin: 0; accent-color: var(--primary); cursor: pointer; }
.kunci-chip:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-text);
    box-shadow: 0 4px 10px rgba(99,102,241,0.15);
}
#admin-form-modal .kunci-chip { padding: 10px 18px; border-radius: 12px; font-size: 0.9rem; font-weight: 800; background: #fff; transition: all 0.18s; }
#admin-form-modal .kunci-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(99,102,241,0.15); }

/* BS kunci rows */
.admin-bs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-dark);
}
.admin-bs-row select {
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 9px;
    background: #fff;
    font-family: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    min-width: 110px;
    font-weight: 700;
    color: var(--text-dark);
}
.admin-bs-row select:focus { outline: none; border-color: var(--primary); }
#admin-form-modal .admin-bs-row { padding: 12px 16px; border: 1px solid #e2e8f0; font-size: 0.86rem; }
#admin-form-modal .admin-bs-row select { min-width: 130px; padding: 8px 30px 8px 12px; border-radius: 8px; font-size: 0.85rem; background-position: right 10px center; }

/* Preview soal modal */
.admin-preview-soal { padding: 4px 0; }
.admin-preview-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.admin-preview-stem {
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-left: 4px solid var(--primary);
    padding: 14px 18px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 14px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #475569;
    font-style: italic;
}
.admin-preview-q { font-size: 1rem; font-weight: 600; line-height: 1.6; color: var(--text-dark); margin-bottom: 18px; }
.admin-preview-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.admin-preview-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid #f1f5f9;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-dark);
    transition: 0.2s;
    min-width: 0;
}
.admin-preview-opt > span:not(.letter):not(.check) { flex: 1; min-width: 0; word-break: break-word; }
.admin-preview-opt.correct {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-color: #6ee7b7;
    box-shadow: 0 2px 8px rgba(16,185,129,0.08);
}
.admin-preview-opt .letter { font-weight: 800; color: var(--primary-text); flex-shrink: 0; min-width: 18px; }
.admin-preview-opt.correct .letter { color: #059669; }
.admin-preview-opt .check {
    margin-left: auto;
    color: #10b981;
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: 10px;
}
.admin-preview-explanation {
    padding: 14px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 4px solid #3b82f6;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #1e3a8a;
}
.admin-preview-explanation h4 {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #1e40af;
}
.admin-preview-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* Code Import Modal */
#admin-code-import-modal .cbt-modal {
    max-width: 720px !important;
    padding: 0;
    text-align: left;
    max-height: 92vh;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
}
#admin-code-import-modal .admin-form-header {
    flex-shrink: 0;
    background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
    padding: 18px 28px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px 20px 0 0;
    z-index: 10;
}
#admin-code-import-modal .admin-form-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
#admin-code-import-modal .admin-form-header h3::before {
    content: '\1F4DD';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    font-size: 0.95rem;
    color: #fff;
}
#admin-code-import-modal .admin-form-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px 26px;
    -webkit-overflow-scrolling: touch;
}
#admin-code-import-modal .admin-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: 11px;
    background: #fff;
    font-family: inherit;
    font-size: 0.94rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%236366f1' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    font-weight: 600;
}
#admin-code-import-modal .admin-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }

#admin-code-import-input {
    width: 100%;
    min-height: 200px;
    max-height: 400px;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Courier New', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-dark);
    background: #f8fafc;
    resize: vertical;
    transition: 0.2s;
    letter-spacing: 0.2px;
}
#admin-code-import-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); background: #fff; }
#admin-code-import-input::placeholder { color: #cbd5e1; font-weight: 400; line-height: 1.7; }

#admin-code-import-info {
    padding: 0;
    margin-top: 14px;
    font-size: 0.85rem;
    line-height: 1.6;
    font-weight: 600;
    transition: 0.2s;
}
#admin-code-import-info:not(:empty) {
    padding: 12px 16px;
    border-radius: 10px;
    background: #f8fafc;
    border-left: 4px solid var(--primary);
}
#admin-code-import-modal .form-group { margin-bottom: 16px; }
#admin-code-import-modal .form-group label {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-dark);
    margin-bottom: 7px;
    letter-spacing: 0.1px;
}
#admin-code-import-modal .admin-form-footer {
    flex-shrink: 0;
    padding: 16px 28px;
    background: linear-gradient(0deg, #fafbff 0%, #ffffff 100%);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 -4px 12px rgba(15,23,42,0.04);
    z-index: 10;
}
#admin-code-import-modal .admin-form-footer .cbt-modal-btn {
    padding: 13px 20px;
    font-size: 0.94rem;
    border-radius: 10px;
    font-weight: 700;
    flex: 1;
}
#admin-code-import-preview .preview-chip { padding: 10px 12px; border-radius: 10px; text-align: center; font-weight: 800; }

/* Leaderboard filter */
.leaderboard-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
}
.leaderboard-filter-bar .admin-select { flex: 1; min-width: 170px; max-width: 260px; }
.filter-chips {
    display: inline-flex;
    gap: 3px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.filter-chip {
    padding: 6px 13px;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.filter-chip:hover { color: var(--text-dark); background: rgba(255,255,255,0.7); }
.filter-chip.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 2px 6px rgba(99,102,241,0.3);
}
#admin-lb-body .cbt-search-bar { margin-bottom: 10px; }


/* ============================================================
   13. UTILITY & LOADING
   ============================================================ */
@keyframes cbtSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.admin-btn.loading,
.cbt-modal-btn.loading,
.btn-start.loading {
    opacity: 0.7 !important;
    cursor: wait !important;
    pointer-events: none !important;
    position: relative;
}
.admin-btn.loading::after,
.cbt-modal-btn.loading::after,
.btn-start.loading::after {
    content: '';
    display: inline-block;
    width: 12px; height: 12px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cbtSpin 0.7s linear infinite;
    vertical-align: middle;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Math modal */
.cbt-math-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100000005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.cbt-math-modal.active { opacity: 1; visibility: visible; }
.cbt-math-box {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    padding: 0;
    box-shadow: 0 25px 60px rgba(15,23,42,0.25);
    transform: scale(0.9) translateY(10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.cbt-math-modal.active .cbt-math-box { transform: scale(1) translateY(0); opacity: 1; }
.cbt-math-header {
    padding: 18px 24px;
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cbt-math-header-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
}
.cbt-math-header-text { flex: 1; min-width: 0; }
.cbt-math-header-text h3 { margin: 0 0 2px; font-size: 1.02rem; font-weight: 700; }
.cbt-math-header-text p { margin: 0; font-size: 0.78rem; opacity: 0.9; }
.cbt-math-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    transition: 0.2s;
    flex-shrink: 0;
}
.cbt-math-close:hover { background: rgba(255,255,255,0.3); }
.cbt-math-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.cbt-math-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; letter-spacing: 0.2px; }
.cbt-math-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.95rem;
    color: var(--text-dark);
    background: #fff;
    transition: 0.2s;
    letter-spacing: 0.3px;
}
.cbt-math-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); background: #fbfbff; }
.cbt-math-preview-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 18px 0 8px;
}
.cbt-math-preview {
    min-height: 70px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border: 1.5px dashed #c7d2fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--text-dark);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.cbt-math-preview .math-empty { color: #94a3b8; font-size: 0.88rem; font-style: italic; font-family: inherit; }
.cbt-math-templates-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 18px 0 10px;
}
.cbt-math-templates { display: flex; gap: 6px; flex-wrap: wrap; }
.cbt-math-chip {
    padding: 7px 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.78rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: 0.15s;
    font-weight: 600;
}
.cbt-math-chip:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary-text); transform: translateY(-1px); }
.cbt-math-footer {
    padding: 16px 24px;
    background: linear-gradient(0deg, #fafbff 0%, #ffffff 100%);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}
.cbt-math-btn {
    flex: 1;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    border: none;
    transition: 0.2s;
    font-family: inherit;
}
.cbt-math-btn.cancel { background: #fff; color: var(--text-dark); border: 1.5px solid var(--border-color); }
.cbt-math-btn.cancel:hover { background: var(--secondary); }
.cbt-math-btn.confirm {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}
.cbt-math-btn.confirm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99,102,241,0.45); }
.cbt-math-btn.confirm:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }


/* ============================================================
   14. RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 768px) {
    .cbt-container { padding: 12px; }
    .cbt-main { padding: 22px 18px; border-radius: 14px; }
    .login-card { padding: 28px 22px; }
    .login-card-container { padding: 0 14px; }
    .login-hero { padding: 40px 16px 90px 16px; }
    .login-hero h1 { font-size: 1.7rem; }
    .login-hero p { font-size: 1rem; }
    .hero-badges { font-size: 0.82rem; padding: 6px 16px; }

    .cbt-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 13px 16px;
        text-align: center;
    }
    .student-info { justify-content: flex-start; }
    .header-actions { justify-content: space-between; width: 100%; }

    .question-header { flex-direction: column; gap: 8px; }
    .question-text { font-size: 1.02rem; }

    .exam-banner { padding: 14px 18px; gap: 12px; }
    .exam-banner-icon { width: 42px; height: 42px; border-radius: 11px; }
    .exam-banner-text h1 { font-size: 1rem; }
    .exam-banner-text p { font-size: 0.75rem; gap: 10px; }

    .admin-tab { padding: 9px 12px; font-size: 0.78rem; min-width: 80px; }
    .admin-panel { padding: 16px 14px; border-radius: 14px; }
    .admin-panel-head h3 { font-size: 0.94rem; }
    .admin-btn { padding: 8px 11px; font-size: 0.74rem; }
    .admin-soal-num { width: 32px; height: 32px; font-size: 0.82rem; border-radius: 9px; }
    .admin-soal-item { padding: 12px 12px; gap: 10px; }
    .admin-icon-btn { width: 30px; height: 30px; }
    .admin-soal-actions { flex-direction: column; }
    .admin-empty { padding: 24px 14px; font-size: 0.85rem; }

    #admin-form-modal .cbt-modal { max-width: 100%; border-radius: 16px; }
    #admin-form-modal .admin-form-header { padding: 14px 18px; border-radius: 16px 16px 0 0; }
    #admin-form-modal .form-row { grid-template-columns: 1fr; }
    #admin-form-modal textarea { min-height: 80px; }
    #admin-form-modal .admin-form-footer { padding: 14px 18px; flex-direction: column-reverse; gap: 8px; }
    #admin-form-modal .admin-form-footer .cbt-modal-btn { width: 100%; }

    #admin-code-import-modal .cbt-modal { max-width: 100%; border-radius: 16px; }
    #admin-code-import-modal .admin-form-header { padding: 14px 18px; border-radius: 16px 16px 0 0; }
    #admin-code-import-modal .admin-form-body { padding: 16px 18px 20px; }
    #admin-code-import-modal .admin-form-footer { padding: 14px 18px; flex-direction: column-reverse; gap: 8px; }
    #admin-code-import-modal .admin-form-footer .cbt-modal-btn { width: 100%; }

    .leaderboard-filter-bar { gap: 8px; }
    .leaderboard-filter-bar .admin-select { min-width: 100%; max-width: 100%; }
    .filter-chips { width: 100%; justify-content: center; }
    .filter-chip { flex: 1; padding: 6px 8px; font-size: 0.72rem; }

    .user-table { font-size: 0.78rem; }
    .user-table th, .user-table td { padding: 9px 6px; }
    .user-table th:last-child { width: 80px; }
    .user-table code { font-size: 0.72rem; padding: 2px 6px; }
    .user-role-badge { font-size: 0.62rem; padding: 3px 8px; }
    .self-badge { font-size: 0.55rem; padding: 1px 6px; }

    .admin-bulk-toolbar { padding: 10px 12px; gap: 8px; flex-direction: column; align-items: stretch; }
    .bulk-info { justify-content: center; }
    .bulk-actions { justify-content: center; }
    .bulk-actions .admin-btn { padding: 8px 11px; font-size: 0.74rem; }

    .badges-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .badge-item { padding: 12px 6px; min-height: 88px; }
    .badge-icon { font-size: 1.5rem; margin-bottom: 6px; }
    .badge-label { font-size: 0.72rem; }
    .badge-desc { display: none; }

    .cbt-editor-toolbar { padding: 5px 6px; gap: 1px; }
    .cbt-editor-btn { min-width: 28px; height: 28px; padding: 0 6px; font-size: 0.78rem; }
    .cbt-editor-content { padding: 10px 12px; font-size: 0.88rem; min-height: 70px; }

    #admin-form-modal .opsi-label { width: 32px; height: 32px; font-size: 0.85rem; }
    #admin-form-modal .opsi-group { gap: 8px; }

    .cbt-search-select .ss-dropdown { max-height: 280px; }
    .cbt-search-select .ss-trigger { padding: 10px 12px; font-size: 0.86rem; }
    .cbt-search-bar input { padding: 10px 12px 10px 34px; font-size: 0.84rem; }
    .cbt-search-bar .search-icon { left: 12px; font-size: 0.88rem; }

    .paket-control-row { gap: 8px; }
    .paket-control-row .admin-select { min-width: 100%; }
    .paket-toggle { padding: 8px 12px; font-size: 0.76rem; }
    .paket-toggle .toggle-track { width: 30px; height: 18px; }
    .paket-toggle .toggle-track::after { width: 14px; height: 14px; }
    .paket-toggle input:checked + .toggle-track::after { transform: translateX(12px); }

    .cbt-math-box { border-radius: 16px; }
    .cbt-math-header { padding: 14px 18px; }
    .cbt-math-body { padding: 16px 18px; }
    .cbt-math-footer { padding: 14px 18px; flex-direction: column-reverse; }
    .cbt-math-footer .cbt-math-btn { width: 100%; }
    .cbt-math-chip { padding: 6px 10px; font-size: 0.72rem; }
}

/* Mobile */
@media (max-width: 480px) {
    .cbt-main { padding: 18px 14px; border-radius: 12px; }
    .login-card { padding: 22px 16px; border-radius: 12px; }
    .login-hero { padding: 32px 14px 80px 14px; }
    .login-hero h1 { font-size: 1.35rem; }
    .login-hero p { font-size: 0.92rem; }
    .hero-badges { font-size: 0.75rem; padding: 6px 12px; line-height: 1.5; }
    .form-row { flex-direction: column; gap: 0; }

    .option-label { padding: 12px 14px; }
    .option-text { font-size: 0.94rem; }

    .nav-modal-content { width: 92%; padding: 22px 18px; }
    .nav-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .nav-box { padding: 10px 0; font-size: 0.85rem; }

    .score-board { padding: 32px 20px 28px; margin: 20px auto; }
    .score-ring-wrap { width: 160px; height: 160px; margin-bottom: 20px; }
    .score-value { font-size: 2.8rem; }
    .score-board .btn-row { flex-direction: column; }
    .score-accuracy-bar { gap: 14px; padding: 10px 14px; }
    .accuracy-value { font-size: 0.95rem; }
    .accuracy-label { font-size: 0.6rem; }
    .accuracy-divider { height: 26px; }

    .question-title-wrap h3 { font-size: 1.1rem; }
    .question-type-badge { font-size: 0.78rem; }
    .cognitive-badge { font-size: 0.75rem; padding: 5px 12px; }
    .cbt-timer { font-size: 0.9rem; padding: 5px 12px; }
    .btn-toggle-nav { padding: 7px 12px; font-size: 0.88rem; }
    .stimulus-box { padding: 12px 14px; font-size: 0.9rem; }
    .indicator-text { font-size: 0.88rem; }
    .review-panel { padding: 15px; }

    .exam-banner { padding: 12px 14px; gap: 10px; }
    .exam-banner-icon { width: 38px; height: 38px; border-radius: 10px; }
    .exam-banner-icon svg { width: 20px; height: 20px; }
    .exam-banner-text h1 { font-size: 0.92rem; }
    .exam-banner-text p { font-size: 0.7rem; gap: 8px; }
    .student-avatar { width: 38px; height: 38px; font-size: 0.9rem; }
    .student-details h2 { font-size: 0.9rem; }
    .cbt-timer, .btn-toggle-nav { font-size: 0.78rem; padding: 7px 12px; gap: 5px; }

    .cbt-toast-container { top: 12px; right: 12px; left: 12px; width: auto; max-width: none; }
    .cbt-modal { padding: 24px 20px 18px; border-radius: 16px; }
    .cbt-modal-actions { flex-direction: column-reverse; }

    /* BS mobile */
    .bs-card { padding: 14px 14px 12px; }
    .bs-card-text { font-size: 0.9rem; }
    .bs-card-options { gap: 8px; }
    .bs-opt { padding: 11px 10px; }
    .bs-opt-label { font-size: 0.85rem; }
    .bs-opt-icon { width: 20px; height: 20px; font-size: 0.78rem; }
    .bs-info-bar { padding: 10px 12px; font-size: 0.78rem; gap: 8px; }
    .bs-info-text { font-size: 0.78rem; gap: 6px; }
    .bs-info-text strong { font-size: 0.88rem; }
    .bs-info-chip { font-size: 0.68rem; padding: 3px 8px; }
    .bs-info-progress { max-width: 130px; }
    .bs-info-progress-text { font-size: 0.68rem; min-width: 28px; }

    /* Matching mobile */
    .match-item { padding: 10px 12px; min-height: 46px; }
    .match-item-text { font-size: 0.84rem; }
    .match-item-num { width: 22px; height: 22px; font-size: 0.72rem; border-radius: 6px; }
    .match-badge { font-size: 0.55rem; padding: 2px 6px; }
    .match-clear-btn { width: 20px; height: 20px; font-size: 0.72rem; }
    .match-grid { gap: 8px; grid-template-columns: 1fr 1fr; }  /* ✅ tetap 2 kolom */
    .match-col { gap: 8px; }

    /* Leaderboard mobile */
    .leaderboard-table { font-size: 0.72rem; }
    .leaderboard-table th { padding: 8px 4px; font-size: 0.62rem; }
    .leaderboard-table td { padding: 9px 4px; }
    .leaderboard-table th:nth-child(1) { width: 34px; }
    .leaderboard-table th:nth-child(3) { width: 44px; }
    .leaderboard-table th:nth-child(4) { width: 48px; }
    .leaderboard-table th:nth-child(5) { width: 40px; }
    .leaderboard-table th:nth-child(6) { width: 48px; }
    .leaderboard-medal { font-size: 1.1rem; }
    .leaderboard-you-badge { padding: 2px 6px; font-size: 0.55rem; margin-left: 4px; }
    .benar-cell b { font-size: 0.82rem; }
    .benar-cell small { font-size: 0.6rem; }
    .durasi-none::before { font-size: 0.9rem; }

    /* Stats mobile */
    .stat-chips { gap: 8px; }
    .stat-chip { padding: 9px 11px; gap: 8px; }
    .stat-chip .chip-icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .stat-chip .chip-value { font-size: 1.05rem; }
    .paket-stat-table { font-size: 0.74rem; }
    .paket-stat-table th { padding: 7px 6px; font-size: 0.6rem; }
    .paket-stat-table td { padding: 8px 6px; }
}
  
/* ============ FOOTER DINAMIS ============ */
/* Default: fixed di bawah */
/* Saat login view → normal flow */
#utbk-cbt-app:has(#cbt-login-view:not([style*="display: none"])) #cbt-footer,
#utbk-cbt-app.login-mode #cbt-footer {
    position: static !important;
    bottom: auto !important;
    margin-top: 40px !important;
    box-shadow: none !important;
    border-top: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
}

#utbk-cbt-app:has(#cbt-login-view:not([style*="display: none"])),
#utbk-cbt-app.login-mode {
    padding-bottom: 0 !important;
}
  
/* ============ HEADER TEST VIEW: KONSISTEN (NON-STICKY) ============ */
/* Pastikan exam-banner & cbt-header tidak sticky */
.exam-banner,
.cbt-header {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}
  
/* ============ REVIEW MODE: Layout khusus ============ */
/* Di review mode, tombol exit + ulangi dibuat lebih compact */
#btn-back-result {
    background: #2563eb;
    color: #ffffff;
    padding: 12px 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
}
#btn-back-result:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37,99,235,0.35);
}
#btn-restart-review {
    background: #ffffff;
    color: var(--text-dark);
    border: 1.5px solid var(--border-color);
    padding: 12px 22px;
    font-weight: 700;
}
#btn-restart-review:hover {
    border-color: var(--primary);
    color: var(--primary-text);
    transform: translateY(-1px);
}

/* Dark mode override */
[data-theme="dark"] #btn-restart-review {
    background: rgba(2,6,23,0.6);
    color: var(--cbt-text-primary);
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] #btn-restart-review:hover {
    background: rgba(99,102,241,0.15);
    border-color: var(--cbt-neon);
    color: #a5b4fc;
}

/* ============================================================
   FIX: Admin login mode — hilangkan padding footer
   ============================================================ */
#utbk-cbt-app:has(#cbt-admin-view.admin-login-mode),
#utbk-cbt-app.admin-login-active {
    padding-bottom: 0 !important;
}

/* ============================================================
   15. EXAM CONFIG — Pengaturan Ujian (Admin + Client)
   ============================================================ */

/* ---------- Admin: Config Section ---------- */
.exam-config-section {
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.exam-config-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #818cf8, #a5b4fc);
    opacity: 0.8;
}

.exam-config-section-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.exam-config-section-title::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

/* Toggle row */
.exam-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    user-select: none;
}

.exam-toggle-row:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 14px rgba(99,102,241,0.08);
    transform: translateY(-1px);
}

.exam-toggle-row.active {
    border-color: #6ee7b7;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    box-shadow: 0 4px 14px rgba(16,185,129,0.08);
}

.exam-toggle-info {
    flex: 1;
    min-width: 0;
}

.exam-toggle-label {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
}

.exam-toggle-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

/* Custom switch */
.exam-switch {
    position: relative;
    width: 52px;
    height: 28px;
    background: #cbd5e1;
    border-radius: 28px;
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.exam-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.1);
    transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.exam-toggle-row.active .exam-switch {
    background: linear-gradient(135deg, #10b981, #059669);
}

.exam-toggle-row.active .exam-switch::after {
    transform: translateX(24px);
}

/* Token input */
.exam-token-input {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: #fff;
    color: var(--text-dark);
    text-align: center;
    transition: 0.2s;
}
  
/* Force override — anti konflik dengan rule admin lain */
#admin-exam-config-body .exam-token-input,
#exam-token-input-wrap .exam-token-input,
.exam-config-section input.exam-token-input {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    height: auto !important;
    max-height: 56px !important;
    min-height: 0 !important;
    padding: 14px 16px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    box-sizing: border-box !important;
}

.exam-token-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
    letter-spacing: 3px;
    background: #fbfbff;
}

.exam-token-input::placeholder {
    color: #cbd5e1;
    font-weight: 500;
    letter-spacing: 1px;
}

/* Jadwal inputs */
.exam-jadwal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.exam-jadwal-item label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exam-jadwal-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    background: #fff;
    color: var(--text-dark);
    transition: 0.2s;
    cursor: pointer;
}

.exam-jadwal-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.exam-jadwal-hint {
    margin-top: 12px;
    padding: 11px 15px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-left: 3px solid #3b82f6;
    border-radius: 10px;
    font-size: 0.8rem;
    color: #1e40af;
    line-height: 1.55;
    font-weight: 500;
}

.exam-jadwal-hint b { color: #1e3a8a; font-weight: 800; }

/* Status preview */
.exam-status-preview {
    margin-top: 18px;
    padding: 18px 22px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    border: 2px solid;
    transition: all 0.3s ease;
}

.exam-status-preview.tidak_terjadwal {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-color: #cbd5e1;
    color: #64748b;
}

.exam-status-preview.belum_mulai {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #f59e0b;
    color: #92400e;
}

.exam-status-preview.berlangsung {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-color: #10b981;
    color: #065f46;
}

.exam-status-preview.selesai {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-color: #ef4444;
    color: #991b1b;
}

.exam-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(255,255,255,0.7);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.exam-status-text { flex: 1; min-width: 0; }

.exam-status-title {
    font-size: 0.98rem;
    margin: 0 0 3px;
    letter-spacing: 0.2px;
    font-weight: 800;
}

.exam-status-sub {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.85;
    margin: 0;
    line-height: 1.5;
}

/* ---------- Client: Jadwal Info Box ---------- */
#jadwal-info-box {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 15px;
    font-size: 0.88rem;
    line-height: 1.6;
    font-weight: 600;
    animation: jadwalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes jadwalFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

#jadwal-info-box.belum_mulai {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-left: 4px solid #f59e0b;
    color: #92400e;
}

#jadwal-info-box.berlangsung {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border-left: 4px solid #10b981;
    color: #065f46;
}

#jadwal-info-box.selesai {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    border-left: 4px solid #ef4444;
    color: #991b1b;
}

.jadwal-countdown {
    display: inline-block;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 1rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.65);
    letter-spacing: 1px;
    margin: 0 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* Mobile */
@media (max-width: 768px) {
    .exam-config-section { padding: 16px 14px; border-radius: 14px; }
    .exam-toggle-row { padding: 13px 14px; gap: 10px; }
    .exam-toggle-label { font-size: 0.86rem; }
    .exam-toggle-desc { font-size: 0.72rem; }
    .exam-switch { width: 46px; height: 26px; }
    .exam-switch::after { width: 20px; height: 20px; top: 3px; left: 3px; }
    .exam-toggle-row.active .exam-switch::after { transform: translateX(20px); }
    .exam-jadwal-grid { grid-template-columns: 1fr; }
    .exam-status-preview { padding: 14px 16px; gap: 12px; }
    .exam-status-icon { width: 40px; height: 40px; font-size: 1.25rem; }
    .exam-status-title { font-size: 0.9rem; }
    .exam-status-sub { font-size: 0.74rem; }
}
  
/* ============================================================
   16. HEADER IDENTITAS UJIAN — RAPI & KOMPAK
   ============================================================ */

/* Tabular numbers — biar digit timer tidak goyang saat countdown */
.cbt-timer, #timer-text {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Desktop: tetap side-by-side, sedikit lebih rapat */
@media (min-width: 769px) {
    .cbt-header {
        padding: 12px 18px;
        gap: 14px;
    }
    .cbt-timer {
        padding: 7px 14px;
        font-size: 0.88rem;
    }
}

/* Tablet & Mobile: susun ulang jadi 2 baris terstruktur */
@media (max-width: 768px) {
    .cbt-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
        text-align: left;
    }

    /* Baris 1: avatar + nama + kelas — semua kiri-aligned */
    .student-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
    }

    .student-avatar {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .student-details {
        text-align: left;
        flex: 1;
        min-width: 0;
        gap: 2px;
    }

    .student-details h2 {
        font-size: 0.94rem;
        text-align: left;
        line-height: 1.3;
    }

    .student-details span {
        font-size: 0.76rem;
        text-align: left;
        line-height: 1.3;
    }

    /* Baris 2: timer (kiri) + tombol Soal (kanan) */
    .header-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .cbt-timer {
        font-size: 0.82rem;
        padding: 6px 13px;
        gap: 6px;
    }

    .btn-toggle-nav {
        padding: 7px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }
}

/* Mobile kecil */
@media (max-width: 400px) {
    .cbt-header { padding: 12px 14px; gap: 10px; }
    .student-avatar { width: 38px; height: 38px; font-size: 0.9rem; }
    .student-details h2 { font-size: 0.88rem; }
    .student-details span { font-size: 0.72rem; }
    .cbt-timer { font-size: 0.78rem; padding: 5px 11px; }
    .cbt-timer svg { width: 13px; height: 13px; }
    .btn-toggle-nav { font-size: 0.76rem; padding: 6px 12px; }
}
  
/* ============================================================
   FLOATING NAV BUTTON — muncul saat scroll turun
   ============================================================ */
.floating-nav-btn {
    position: fixed !important;
    top: 16px;
    right: 28px;   /* ✅ dari 16 → 28 biar lebih masuk & antisipasi scrollbar */
    z-index: 100;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 30px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border: none;
    cursor: pointer;
    box-shadow: 
        0 8px 24px rgba(99, 102, 241, 0.38), 
        0 2px 6px rgba(15, 23, 42, 0.12);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
}

.floating-nav-btn.show {
    display: inline-flex;
    animation: floatSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-nav-btn:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 
        0 12px 30px rgba(99, 102, 241, 0.5), 
        0 3px 8px rgba(15, 23, 42, 0.18);
}

.floating-nav-btn:active {
    transform: translateY(0) scale(0.97);
}

.floating-nav-btn svg {
    flex-shrink: 0;
}

@keyframes floatSlideIn {
    from {
        opacity: 0;
        transform: translateY(-14px) scale(0.85);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============ FLOATING TIMER — di kiri atas ============ */
.floating-timer {
    position: fixed !important;
    top: 16px;
    left: 16px;
    z-index: 100;
    display: none;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 30px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    color: #dc2626;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    box-shadow:
        0 8px 24px rgba(220, 38, 38, 0.3),
        0 2px 6px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    pointer-events: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.floating-timer.show {
    display: inline-flex;
    animation: floatTimerSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes floatTimerSlideIn {
    from { opacity: 0; transform: translateX(-14px) scale(0.85); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.floating-timer svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

/* Timer habis / kritis */
.floating-timer.critical {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-color: #991b1b;
    color: #fff;
    animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(220,38,38,0.4); }
    50%      { transform: scale(1.05); box-shadow: 0 12px 32px rgba(220,38,38,0.6); }
}

/* Tanpa batas (∞) */
.floating-timer.no-limit {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border-color: #c7d2fe;
    color: #4338ca;
}

/* Review mode */
.floating-timer.review-mode {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #6ee7b7;
    color: #059669;
}

.floating-timer:hover {
    transform: translateY(-2px) scale(1.04);
    cursor: pointer;
}
.floating-timer:active {
    transform: translateY(0) scale(0.98);
}
  
/* Dark mode override — lebih solid + blur biar konten di belakang tidak tembus */
[data-theme="dark"] .floating-timer {
    background: linear-gradient(135deg, rgba(60, 10, 10, 0.94), rgba(40, 6, 6, 0.96));
    border-color: rgba(220, 38, 38, 0.65);
    color: #fca5a5;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(220, 38, 38, 0.4),
        0 0 0 1px rgba(220, 38, 38, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .floating-timer.no-limit {
    background: linear-gradient(135deg, rgba(30, 20, 80, 0.94), rgba(20, 12, 55, 0.96));
    border-color: rgba(99, 102, 241, 0.65);
    color: #c7d2fe;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(99, 102, 241, 0.4),
        0 0 0 1px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .floating-timer.review-mode {
    background: linear-gradient(135deg, rgba(6, 50, 35, 0.94), rgba(4, 32, 22, 0.96));
    border-color: rgba(16, 185, 129, 0.65);
    color: #6ee7b7;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(16, 185, 129, 0.4),
        0 0 0 1px rgba(16, 185, 129, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Mobile */
@media (max-width: 768px) {
    .floating-timer {
        top: 12px;
        left: 12px;
        padding: 9px 14px;
        font-size: 0.82rem;
    }
    .floating-timer svg { width: 13px; height: 13px; }
}

@media (max-width: 400px) {
    .floating-timer {
        top: 10px;
        left: 10px;
        padding: 8px 12px;
        font-size: 0.76rem;
        gap: 5px;
    }
    .floating-timer svg { width: 12px; height: 12px; }
}
  
/* ============================================================
   FLOATING: Konsistensi margin kiri-kanan
   ============================================================ */

/* Desktop: timer 16px dari kiri, nav 28px dari kanan
   → margin visual terasa seimbang karena nav lebih lebar + ada scrollbar */

/* Kalau mau BENER-BENER simetris (kurang lazim), bisa pakai ini: */
@media (min-width: 769px) {
    .floating-timer {
        left: max(24px, calc((100vw - 8px - 950px) / 2 + 20px));
    }
    .floating-nav-btn {
        right: max(24px, calc((100vw - 8px - 950px) / 2 + 20px));
    }
}
  
/* Mobile */
@media (max-width: 768px) {
    .floating-nav-btn {
        top: 12px;
        right: 20px;   /* ✅ dari 12 → 20 */
        padding: 9px 15px;
        font-size: 0.8rem;
    }
}

@media (max-width: 400px) {
    .floating-nav-btn {
        top: 10px;
        right: 16px;   /* ✅ dari 10 → 16 */
        padding: 8px 13px;
        font-size: 0.76rem;
        gap: 5px;
    }
    .floating-nav-btn svg {
        width: 14px;
        height: 14px;
    }
}
  
/* ============================================================
   17. CONFIRM VIEW — Konfirmasi Sebelum Ujian
   ============================================================ */

#cbt-confirm-view {
    flex-shrink: 0;
    width: 100%;
}

.confirm-hero {
    text-align: center;
    margin-bottom: 24px;
    animation: confirmHeroIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.confirm-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 14px;
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.35),
                inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.confirm-hero h1 {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.3px;
}

.confirm-hero p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Card */
.confirm-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08),
                0 2px 8px rgba(15, 23, 42, 0.04);
    border: 1px solid var(--border-color);
    overflow: hidden;
    animation: confirmCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes confirmCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section */
.confirm-section {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.confirm-section:last-child {
    border-bottom: none;
}

.confirm-section-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.confirm-section-label .label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 0 0 3px #e0e7ff;
    flex-shrink: 0;
}

/* Identity */
.confirm-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}

.confirm-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 800;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3);
}

.confirm-identity-info {
    flex: 1;
    min-width: 0;
}

.confirm-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
    line-height: 1.3;
    word-break: break-word;
}

.confirm-kelas {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.confirm-kelas::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px #d1fae5;
    flex-shrink: 0;
}

/* Info grid */
.confirm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.confirm-info-item {
    padding: 14px 12px;
    background: linear-gradient(135deg, #fafbff, #f1f5f9);
    border-radius: 12px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: 0.2s;
}

.confirm-info-item:hover {
    border-color: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}

.confirm-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4338ca;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 8px;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.15);
}

.confirm-info-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.confirm-info-value {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1.3;
    word-break: break-word;
}

/* Token section */
.confirm-token-section .exam-token-input {
    margin-top: 4px;
}

.confirm-token-hint {
    margin-top: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    animation: confirmHintIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes confirmHintIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.confirm-token-hint-label {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #92400e;
    margin-bottom: 8px;
}

.confirm-token-hint-value {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #78350f;
    background: rgba(255, 255, 255, 0.7);
    padding: 8px 14px;
    border-radius: 10px;
    text-align: center;
    word-break: break-all;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Actions */
.confirm-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    animation: confirmActionsIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes confirmActionsIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.confirm-actions .btn-cbt {
    flex: 1;
    padding: 15px 22px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    transition: 0.22s;
}

.confirm-actions .btn-prev {
    flex: 0 0 auto;
    min-width: 130px;
    background: #fff;
    border: 1.5px solid var(--border-color);
    color: var(--text-dark);
}

.confirm-actions .btn-prev:hover {
    border-color: var(--primary);
    color: var(--primary-text);
    transform: translateY(-1px);
}

.confirm-actions .btn-next {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
}

.confirm-actions .btn-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(99, 102, 241, 0.45);
}

/* Mobile */
@media (max-width: 480px) {
    .confirm-hero-icon { width: 60px; height: 60px; border-radius: 18px; font-size: 1.7rem; }
    .confirm-hero h1 { font-size: 1.25rem; }
    .confirm-hero p { font-size: 0.82rem; }
    .confirm-section { padding: 16px 18px; }
    .confirm-avatar { width: 48px; height: 48px; font-size: 1.15rem; border-radius: 14px; }
    .confirm-name { font-size: 1rem; }
    .confirm-info-grid { grid-template-columns: 1fr; gap: 8px; }
    .confirm-info-item {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 12px;
        padding: 12px 14px;
    }
    .confirm-info-icon { margin-bottom: 0; flex-shrink: 0; }
    .confirm-info-body { min-width: 0; text-align: left; }
    .confirm-token-hint-value { font-size: 1.15rem; letter-spacing: 3px; padding: 6px 12px; }
    .confirm-actions { flex-direction: column-reverse; }
    .confirm-actions .btn-prev { min-width: 0; }
    .confirm-actions .btn-cbt { padding: 14px 18px; font-size: 0.94rem; }
}
  
/* ============================================================
   18. SPLASH PRE-EXAM
   ============================================================ */
.cbt-splash {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
    z-index: 100000010;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}
.cbt-splash.active { display: flex; }
.cbt-splash-inner {
    text-align: center;
    color: #fff;
    animation: splashIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes splashIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.cbt-splash-label {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.cbt-splash-count {
    font-size: 9rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -6px;
    text-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-bottom: 20px;
}
.cbt-splash-count.pop { animation: splashPop 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes splashPop {
    0%   { transform: scale(0.5); opacity: 0; }
    50%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.cbt-splash-count.final {
    font-size: 4rem;
    letter-spacing: 2px;
    color: #fcd34d;
}
.cbt-splash-tip {
    max-width: 320px;
    margin: 30px auto 0;
    font-size: 0.85rem;
    line-height: 1.6;
    opacity: 0.85;
    font-weight: 500;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 480px) {
    .cbt-splash-count { font-size: 7rem; }
    .cbt-splash-count.final { font-size: 3rem; }
}

/* ============================================================
   19. PROGRESS BAR SOAL
   ============================================================ */
.cbt-progress-wrap {
    margin-bottom: 22px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-radius: 14px;
    border: 1px solid #e5e7eb;
}
.cbt-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
    gap: 12px;
}
.cbt-progress-info b { color: var(--primary-text); font-weight: 800; }
.cbt-progress-pct {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--primary-text);
    letter-spacing: 0.3px;
    transition: background 0.3s, color 0.3s;
}
.cbt-progress-pct.complete {
    background: linear-gradient(135deg, #d1fae5, #6ee7b7);
    color: #065f46;
}
.cbt-progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.cbt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    border-radius: 8px;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.cbt-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: progressShimmer 1.5s linear infinite;
}
.cbt-progress-fill.complete {
    background: linear-gradient(90deg, #10b981, #34d399);
}
@keyframes progressShimmer {
    0% { transform: translateX(-24px); }
    100% { transform: translateX(24px); }
}

/* ============================================================
   20. LIVE LEADERBOARD SIDEBAR (dalam ujian)
   ============================================================ */
.live-lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 100000001;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.live-lb-overlay.active { opacity: 1; visibility: visible; }

.live-lb-sidebar {
    position: fixed;
    top: 0; right: 0;
    width: 340px;
    max-width: 92%;
    height: 100%;
    background: #fff;
    z-index: 100000002;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.2);
    transform: translateX(110%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}
.live-lb-sidebar.active { transform: translateX(0); }

.live-lb-head {
    padding: 20px 22px;
    background: linear-gradient(135deg, #4f46e5, #818cf8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.live-lb-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; }
.live-lb-sub { font-size: 0.78rem; opacity: 0.9; font-weight: 500; }
.live-lb-close {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}
.live-lb-close:hover { background: rgba(255, 255, 255, 0.3); }

.live-lb-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    -webkit-overflow-scrolling: touch;
}
.live-lb-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.live-lb-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    animation: liveLbPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes liveLbPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Row live leaderboard */
.live-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: 0.15s;
}
.live-lb-row.is-me {
    background: linear-gradient(90deg, #eef2ff, #e0e7ff);
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
}
.live-lb-row.rank-1 { background: linear-gradient(90deg, #fef9c3, #fef3c7); border-color: #fcd34d; }
.live-lb-row.rank-2 { background: linear-gradient(90deg, #f1f5f9, #e2e8f0); }
.live-lb-row.rank-3 { background: linear-gradient(90deg, #fef3c7, #fed7aa); }

.live-lb-rank {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #64748b;
    flex-shrink: 0;
}
.live-lb-rank.medal { border: none; background: transparent; font-size: 1.3rem; }
.live-lb-info { flex: 1; min-width: 0; }
.live-lb-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin-bottom: 2px;
}
.live-lb-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
}
.live-lb-score {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-text);
    flex-shrink: 0;
    letter-spacing: -0.3px;
}

/* ============================================================
   21. OFFLINE BADGE
   ============================================================ */
.cbt-offline-badge {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    padding: 11px 20px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(220, 38, 38, 0.35);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100000020;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    max-width: 92%;
}
.cbt-offline-badge.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.offline-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: offlineBlink 1s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes offlineBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@media (max-width: 768px) {
    .cbt-offline-badge { bottom: 24px; font-size: 0.76rem; padding: 9px 16px; }
    .live-lb-sidebar { width: 88%; }
    .cbt-progress-wrap { padding: 12px 14px; margin-bottom: 18px; }
}
  
/* ============================================================
   22. THEME SYSTEM — LIGHT / DARK MODE
   ============================================================ */

/* Default: DARK MODE variables */
:root,
[data-theme="dark"] {
    --cbt-bg-app: #06081a;
    --cbt-bg-surface: #0f172a;
    --cbt-bg-card: rgba(15, 20, 45, 0.75);
    --cbt-glass-card: rgba(15, 20, 45, 0.75);
    --cbt-glass-border: rgba(99, 102, 241, 0.22);
    --cbt-text-primary: #e2e8f0;
    --cbt-text-strong: #ffffff;
    --cbt-text-muted: #94a3b8;
    --cbt-text-label: #cbd5e1;
    --cbt-input-bg: rgba(2, 6, 23, 0.68);
    --cbt-input-bg-focus: rgba(15, 23, 42, 0.92);
    --cbt-input-border: rgba(99, 102, 241, 0.18);
    --cbt-input-text: #f1f5f9;
    --cbt-input-placeholder: #475569;
    --cbt-neon: #818cf8;
    --cbt-neon-2: #ec4899;
}

/* LIGHT MODE overrides */
[data-theme="light"] {
    --cbt-bg-app: #f3f4f6;
    --cbt-bg-surface: #ffffff;
    --cbt-bg-card: #ffffff;
    --cbt-glass-card: #ffffff;
    --cbt-glass-border: #e5e7eb;
    --cbt-text-primary: #1f2937;
    --cbt-text-strong: #0f172a;
    --cbt-text-muted: #6b7280;
    --cbt-text-label: #1f2937;
    --cbt-input-bg: #ffffff;
    --cbt-input-bg-focus: #fbfbff;
    --cbt-input-border: #e5e7eb;
    --cbt-input-text: #1f2937;
    --cbt-input-placeholder: #9ca3af;
    --cbt-neon: #6366f1;
    --cbt-neon-2: #ec4899;
}

/* Light mode: override khusus login */
[data-theme="light"] #cbt-login-view {
    background-image:
        radial-gradient(circle at 15% 10%, rgba(99,102,241,0.08) 0%, transparent 45%),
        radial-gradient(circle at 85% 90%, rgba(236,72,153,0.06) 0%, transparent 45%);
}
[data-theme="light"] #cbt-login-view::before {
    background: radial-gradient(circle, rgba(99,102,241,0.22) 0%, transparent 70%);
}
[data-theme="light"] #cbt-login-view::after {
    background: radial-gradient(circle, rgba(236,72,153,0.18) 0%, transparent 70%);
}
[data-theme="light"] .login-hero h1 {
    background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 45%, #7c3aed 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 20px rgba(99,102,241,0.25));
}
[data-theme="light"] .login-hero p { color: #64748b; }
[data-theme="light"] .hero-badges {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.25);
    color: #4338ca;
}
[data-theme="light"] .hero-logo-svg {
    color: #4f46e5;
    filter: drop-shadow(0 0 12px rgba(99,102,241,0.4));
}
[data-theme="light"] .star-field { opacity: 0.35; }
[data-theme="light"] .star-field::before { opacity: 0.3; }
[data-theme="light"] .star-field::after { opacity: 0.25; }
[data-theme="light"] .star-field::before,
[data-theme="light"] .star-field::after {
    mix-blend-mode: multiply;
}
[data-theme="light"] .login-card {
    box-shadow:
        0 32px 80px rgba(15,23,42,0.12),
        0 0 100px rgba(99,102,241,0.08),
        inset 0 1px 0 rgba(255,255,255,0.5);
    color: var(--cbt-text-primary);
}
[data-theme="light"] .login-card h2 { color: #0f172a; }
[data-theme="light"] .login-card .form-group label { color: #334155; }
[data-theme="light"] .login-card .form-group input,
[data-theme="light"] .login-card #input-paket {
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="light"] .login-card .form-group input:focus,
[data-theme="light"] .login-card #input-paket:focus {
    box-shadow:
        0 0 0 4px rgba(99,102,241,0.12),
        0 0 24px rgba(99,102,241,0.15),
        inset 0 1px 2px rgba(15,23,42,0.04);
}
[data-theme="light"] .login-card #input-paket option { background: #ffffff; color: #1f2937; }

/* ============================================================
   DARK MODE — CONFIRM VIEW
   ============================================================ */
[data-theme="dark"] #cbt-confirm-view {
    background: var(--cbt-bg-app);
}
[data-theme="dark"] .confirm-hero h1 { color: var(--cbt-text-strong); }
[data-theme="dark"] .confirm-hero p { color: var(--cbt-text-muted); }
[data-theme="dark"] .confirm-hero-icon {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    box-shadow: 0 12px 32px rgba(99,102,241,0.5), inset 0 2px 0 rgba(255,255,255,0.2);
}
[data-theme="dark"] .confirm-card {
    background: var(--cbt-bg-card);
    border-color: var(--cbt-glass-border);
    box-shadow:
        0 8px 30px rgba(0,0,0,0.4),
        0 0 60px rgba(99,102,241,0.1);
}
[data-theme="dark"] .confirm-section { border-bottom-color: rgba(99,102,241,0.12); }
[data-theme="dark"] .confirm-section-label { color: #a5b4fc; }
[data-theme="dark"] .confirm-name { color: var(--cbt-text-strong); }
[data-theme="dark"] .confirm-kelas { color: var(--cbt-text-muted); }
[data-theme="dark"] .confirm-info-item {
    background: rgba(2,6,23,0.45);
    border-color: rgba(99,102,241,0.15);
}
[data-theme="dark"] .confirm-info-label { color: #94a3b8; }
[data-theme="dark"] .confirm-info-value { color: var(--cbt-text-strong); }
[data-theme="dark"] .confirm-info-icon {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));
    color: #a5b4fc;
    box-shadow: 0 3px 10px rgba(99,102,241,0.2);
}
[data-theme="dark"] .confirm-token-hint {
    background: linear-gradient(135deg, rgba(217,119,6,0.15), rgba(245,158,11,0.2));
    border-left-color: #f59e0b;
}
[data-theme="dark"] .confirm-token-hint-label { color: #fbbf24; }
[data-theme="dark"] .confirm-token-hint-value {
    background: rgba(0,0,0,0.35);
    color: #fef3c7;
}
[data-theme="dark"] .confirm-actions .btn-prev {
    background: rgba(2,6,23,0.6);
    color: var(--cbt-text-primary);
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .confirm-actions .btn-prev:hover {
    border-color: var(--cbt-neon);
    color: #a5b4fc;
}

/* ============================================================
   DARK MODE — EXAM VIEW (Test)
   ============================================================ */
[data-theme="dark"] #cbt-test-view {
    background: var(--cbt-bg-app);
}
[data-theme="dark"] .exam-banner {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
    box-shadow: 0 8px 32px rgba(99,102,241,0.35);
}
[data-theme="dark"] .cbt-header {
    background: var(--cbt-bg-card);
    border-color: var(--cbt-glass-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .student-details h2 { color: var(--cbt-text-strong); }
[data-theme="dark"] .student-details span { color: var(--cbt-text-muted); }
[data-theme="dark"] .btn-toggle-nav {
    background: rgba(2,6,23,0.6);
    color: var(--cbt-text-primary);
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .btn-toggle-nav:hover {
    background: rgba(99,102,241,0.15);
    border-color: var(--cbt-neon);
    color: #a5b4fc;
}
[data-theme="dark"] .cbt-main {
    background: var(--cbt-bg-card);
    border-color: var(--cbt-glass-border);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="dark"] .question-title-wrap h3 { color: var(--cbt-text-strong); }
[data-theme="dark"] .question-type-badge { color: var(--cbt-text-muted); }
[data-theme="dark"] .cognitive-badge {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .stimulus-box {
    background: rgba(2,6,23,0.5);
    border-left-color: var(--cbt-neon);
    color: #cbd5e1;
}
[data-theme="dark"] .indicator-text { color: var(--cbt-text-muted); }
[data-theme="dark"] .indicator-text b { color: var(--cbt-text-strong); }
[data-theme="dark"] .question-text { color: var(--cbt-text-primary); }

/* Options PG */
[data-theme="dark"] .option-label {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.15);
    color: var(--cbt-text-primary);
}
[data-theme="dark"] .option-label:hover {
    background: rgba(99,102,241,0.1);
    border-color: rgba(99,102,241,0.35);
}
[data-theme="dark"] .option-label.selected {
    background: rgba(99,102,241,0.18);
    border-color: var(--cbt-neon);
}
[data-theme="dark"] .option-letter { color: #a5b4fc; }
[data-theme="dark"] .option-text { color: var(--cbt-text-primary); }
[data-theme="dark"] .option-label.correct-review {
    background: rgba(16,185,129,0.15);
    border-color: #10b981;
}
[data-theme="dark"] .option-label.wrong-review {
    background: rgba(239,68,68,0.15);
    border-color: #ef4444;
}

/* BS Cards */
[data-theme="dark"] .bs-card {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.15);
}
[data-theme="dark"] .bs-card.answered {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.35);
}
[data-theme="dark"] .bs-card-num {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .bs-card-text { color: var(--cbt-text-primary); }
[data-theme="dark"] .bs-opt {
    background: rgba(2,6,23,0.6);
    border-color: rgba(99,102,241,0.18);
}
[data-theme="dark"] .bs-opt-label { color: #94a3b8; }
[data-theme="dark"] .bs-info-bar {
    background: rgba(2,6,23,0.4);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .bs-info-text { color: #cbd5e1; }

/* Matching */
[data-theme="dark"] .match-item {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.18);
}
[data-theme="dark"] .match-item-text { color: var(--cbt-text-primary); }
[data-theme="dark"] .match-item-num {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .match-info-bar {
    background: rgba(2,6,23,0.4);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .match-info-text { color: #cbd5e1; }
[data-theme="dark"] .match-item.disabled {
    background: rgba(15,23,42,0.7);
    opacity: 0.5;
}

/* Progress bar */
[data-theme="dark"] .cbt-progress-wrap {
    background: rgba(2,6,23,0.4);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .cbt-progress-info { color: #cbd5e1; }
[data-theme="dark"] .cbt-progress-track { background: rgba(2,6,23,0.7); }
[data-theme="dark"] .cbt-progress-pct {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .cbt-progress-pct.complete {
    background: rgba(16,185,129,0.2);
    color: #6ee7b7;
}

/* Review panel */
[data-theme="dark"] .review-panel {
    background: rgba(59,130,246,0.1);
    border-left-color: #3b82f6;
}
[data-theme="dark"] .review-panel h4 { color: #93c5fd; }
[data-theme="dark"] #cbt-explanation-text { color: #cbd5e1; }

/* Footer buttons */
[data-theme="dark"] .btn-prev {
    background: rgba(2,6,23,0.6);
    color: var(--cbt-text-primary);
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .btn-prev:hover { background: rgba(99,102,241,0.15); }

/* Nav modal */
[data-theme="dark"] .nav-modal-content {
    background: #0f172a;
}
[data-theme="dark"] .nav-modal-content h3 { color: var(--cbt-text-strong); border-bottom-color: rgba(99,102,241,0.2); }
[data-theme="dark"] .nav-box {
    background: rgba(2,6,23,0.6);
    border-color: rgba(99,102,241,0.2);
    color: #94a3b8;
}
[data-theme="dark"] .nav-box.answered {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
    border-color: rgba(99,102,241,0.35);
}
[data-theme="dark"] .nav-box.active {
    border-color: var(--cbt-neon);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.25);
    color: #a5b4fc;
}

/* ============================================================
   DARK MODE — RESULT VIEW
   ============================================================ */
[data-theme="dark"] #cbt-result-view {
    background: var(--cbt-bg-card);
    border-color: var(--cbt-glass-border);
    color: var(--cbt-text-primary);
}
[data-theme="dark"] .score-board h2 { color: var(--cbt-text-strong); }
[data-theme="dark"] .score-name {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .score-ring-bg { stroke: rgba(99,102,241,0.15); }
[data-theme="dark"] .score-value { color: #a5b4fc; }
[data-theme="dark"] .score-label { color: var(--cbt-text-muted); }
[data-theme="dark"] .score-accuracy-bar {
    background: rgba(2,6,23,0.4);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .accuracy-label { color: var(--cbt-text-muted); }
[data-theme="dark"] .accuracy-value { color: #a5b4fc; }
[data-theme="dark"] .accuracy-divider {
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.3), transparent);
}
  
[data-theme="dark"] .score-message {
    background: rgba(99,102,241,0.15);
    border-left-color: var(--cbt-neon);
    color: #e0e7ff;
    font-weight: 600;
}

/* ✅ Override inline style yang di-set JS saat "Mengirim jawaban..." */
[data-theme="dark"] #score-message {
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.15)) !important;
    border-left-color: #a5b4fc !important;
    color: #e0e7ff !important;
    font-weight: 600 !important;
}

/* ✅ Khusus pesan error (background merah dari JS) */
[data-theme="dark"] #score-message[style*="fee2e2"] {
    background: linear-gradient(135deg, rgba(220,38,38,0.25), rgba(153,27,27,0.2)) !important;
    border-left-color: #f87171 !important;
    color: #fecaca !important;
}
  
[data-theme="dark"] .leaderboard-section,
[data-theme="dark"] .badges-section {
    border-top-color: rgba(99,102,241,0.15);
}
[data-theme="dark"] .leaderboard-head h3,
[data-theme="dark"] .badges-head h3 { color: var(--cbt-text-strong); }
[data-theme="dark"] .leaderboard-table td { color: var(--cbt-text-primary); border-bottom-color: rgba(99,102,241,0.1); }
[data-theme="dark"] .leaderboard-table tbody tr:hover { background: rgba(99,102,241,0.08); }
[data-theme="dark"] .leaderboard-rank-num {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
}
[data-theme="dark"] .badge-item {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.15);
}
[data-theme="dark"] .badge-item.locked { background: rgba(2,6,23,0.3); }
[data-theme="dark"] .badge-label { color: var(--cbt-text-primary); }
[data-theme="dark"] .leaderboard-sort-note {
    background: rgba(2,6,23,0.5);
    color: #cbd5e1;
}
[data-theme="dark"] .leaderboard-empty {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.2);
    color: var(--cbt-text-muted);
}

/* Live Leaderboard Sidebar */
[data-theme="dark"] .live-lb-sidebar { background: #0f172a; }
[data-theme="dark"] .live-lb-body { background: #0f172a; }
[data-theme="dark"] .live-lb-row {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.15);
}
[data-theme="dark"] .live-lb-name { color: var(--cbt-text-primary); }
[data-theme="dark"] .live-lb-foot { border-top-color: rgba(99,102,241,0.15); }

/* ============================================================
   THEME TOGGLE BUTTON
   ============================================================ */
.theme-toggle {
    position: fixed;
    top: 18px;
    left: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 20, 45, 0.85);
    border: 1.5px solid rgba(99,102,241,0.35);
    color: #e0e7ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000030;
    box-shadow:
        0 8px 24px rgba(0,0,0,0.35),
        0 0 24px rgba(99,102,241,0.25),
        inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.theme-toggle:hover {
    transform: scale(1.08) rotate(8deg);
    border-color: rgba(139,92,246,0.7);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.4),
        0 0 40px rgba(139,92,246,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.theme-toggle:active { transform: scale(0.95); }
.theme-icon { position: absolute; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.icon-sun  { opacity: 0; transform: rotate(-180deg) scale(0.5); }

/* Toggle state: light mode */
[data-theme="light"] .theme-toggle {
    background: rgba(255,255,255,0.9);
    border-color: rgba(99,102,241,0.4);
    color: #4338ca;
    box-shadow:
        0 8px 24px rgba(15,23,42,0.12),
        0 0 24px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,1);
}
[data-theme="light"] .icon-moon { opacity: 0; transform: rotate(180deg) scale(0.5); }
[data-theme="light"] .icon-sun  { opacity: 1; transform: rotate(0deg) scale(1); }

/* ============ THEME TOGGLE — IN-BANNER MODE (Exam) ============ */
.theme-toggle.in-banner {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin-left: auto;         /* dorong ke kanan banner */
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #ffffff;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
    z-index: 2;
}
.theme-toggle.in-banner:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.5);
    transform: scale(1.08) rotate(8deg);
    box-shadow:
        0 6px 20px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
.theme-toggle.in-banner:active { transform: scale(0.95); }

[data-theme="light"] .theme-toggle.in-banner {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
}

/* Mobile */
@media (max-width: 640px) {
    .theme-toggle {
        top: 12px; left: 12px;
        width: 40px; height: 40px;
    }
    .theme-toggle.in-banner {
        top: auto !important;
        left: auto !important;
        width: 38px;
        height: 38px;
    }
}

/* ============================================================
   FOOTER — Dark mode override
   ============================================================ */
[data-theme="dark"] #cbt-footer {
    background: #06081a !important;
    border-top-color: rgba(99,102,241,0.15) !important;
    color: #64748b !important;
}
[data-theme="dark"] #cbt-footer #footer-year { color: #94a3b8 !important; }
[data-theme="dark"] #cbt-footer a { color: #a5b4fc !important; }
[data-theme="dark"] #cbt-footer a[href*="youtube"] {
    background: linear-gradient(135deg, #a5b4fc, #c084fc) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
[data-theme="dark"] #cbt-version-label {
    background: rgba(99,102,241,0.15) !important;
    color: #a5b4fc !important;
}
  
/* ============================================================
   FIX — Gap putih di atas footer saat login/confirm mode
   ============================================================ */

/* 1. Wrapper utama: hilangkan background terang di dark mode */
[data-theme="dark"] #utbk-cbt-app {
    background-color: #06081a !important;
}

/* 2. Login/Confirm mode: hilangkan padding-bottom 80px dari wrapper */
#utbk-cbt-app.login-mode,
[data-theme="dark"] #utbk-cbt-app:has(#cbt-login-view:not([style*="display: none"])),
[data-theme="dark"] #utbk-cbt-app:has(#cbt-confirm-view:not([style*="display: none"])) {
    padding-bottom: 0 !important;
}

/* 3. Footer saat login-mode — pastikan tetap mepet & gelap */
[data-theme="dark"] #utbk-cbt-app.login-mode #cbt-footer {
    margin-top: 0 !important;
    background: #06081a !important;
}

/* 4. Login view: kurangi gap ekstra di bawah card */
#cbt-login-view {
    padding-bottom: 0 !important;
}

/* ============ VIOLATION POPUP ============ */
.cbt-violation-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: none; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; transition: opacity 0.25s ease;
}
.cbt-violation-overlay.active { display: flex; opacity: 1; }

.cbt-violation-box {
    background: #fff;
    border-radius: 20px;
    max-width: 460px; width: 100%;
    padding: 28px 24px 22px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.45);
    text-align: center;
    border: 2px solid #fca5a5;
    animation: vShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes vShake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
.cbt-violation-icon {
    font-size: 3rem; line-height: 1; margin-bottom: 8px;
    animation: vPulse 1.2s infinite;
}
@keyframes vPulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.cbt-violation-title {
    font-size: 1.25rem; font-weight: 800; color: #dc2626;
    margin: 0 0 12px;
}
.cbt-violation-msg {
    font-size: 0.95rem; color: #475569;
    line-height: 1.55; margin: 0 0 18px;
}
.cbt-violation-counter {
    background: #fef2f2; border: 1.5px solid #fecaca;
    border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.violation-dots {
    display: flex; justify-content: center; gap: 8px;
    margin-bottom: 10px; flex-wrap: wrap;
}
.violation-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: #f1f5f9; border: 2px solid #cbd5e1;
    transition: all 0.3s;
}
.violation-dot.filled {
    background: #dc2626; border-color: #dc2626;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.55);
}
.violation-text { font-size: 0.9rem; color: #475569; }
.violation-text b { color: #dc2626; font-weight: 800; }

.cbt-violation-warning {
    font-size: 0.82rem; padding: 10px 14px; border-radius: 10px;
    background: #f8fafc; color: #64748b;
    line-height: 1.5; margin-bottom: 18px;
}
.cbt-violation-warning.high {
    background: #fef3c7; color: #92400e;
    border-left: 3px solid #f59e0b;
}
.cbt-violation-warning.critical {
    background: #fee2e2; color: #991b1b;
    border-left: 3px solid #dc2626; font-weight: 700;
    animation: vPulse 1s infinite;
}
.cbt-violation-btn {
    width: 100%; padding: 13px 20px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff; font-weight: 700; font-size: 0.95rem;
    cursor: pointer; font-family: inherit; transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}
.cbt-violation-btn:hover { transform: translateY(-1px); }

/* Dark theme variants */
[data-theme="dark"] .cbt-violation-box { background: #1e293b; border-color: #7f1d1d; }
[data-theme="dark"] .cbt-violation-msg { color: #cbd5e1; }
[data-theme="dark"] .cbt-violation-counter {
    background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35);
}
[data-theme="dark"] .violation-dot { background: #334155; border-color: #475569; }
[data-theme="dark"] .violation-text { color: #cbd5e1; }
[data-theme="dark"] .cbt-violation-warning {
    background: rgba(100, 116, 139, 0.15); color: #94a3b8;
}
[data-theme="dark"] .cbt-violation-warning.high {
    background: rgba(245, 158, 11, 0.15); color: #fbbf24;
}
[data-theme="dark"] .cbt-violation-warning.critical {
    background: rgba(220, 38, 38, 0.22); color: #fca5a5;
}

/* Anti print */
@media print {
    body, #utbk-cbt-app { display: none !important; }
}

/* Anti-select text di area soal */
#cbt-test-view.exam-active,
#cbt-test-view.exam-active .cbt-main {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Tempel di bagian "EXAM VIEW" pada CSS */
#cbt-test-view .stimulus-box [style*="text-align:justify"],
#cbt-test-view .question-text [style*="text-align:justify"],
#cbt-test-view .option-text   [style*="text-align:justify"] {
    text-align: justify;
}

/* ✅ SAFETY: paksa area interaktif tetap bisa diklik */
#cbt-test-view.exam-active .option-label,
#cbt-test-view.exam-active .bs-opt,
#cbt-test-view.exam-active .puzzle-slot,
#cbt-test-view.exam-active .puzzle-response,
#cbt-test-view.exam-active .btn-cbt,
#cbt-test-view.exam-active .btn-nav,
#cbt-test-view.exam-active .nav-btn-group,
#cbt-test-view.exam-active .cbt-footer button {
    pointer-events: auto !important;
}
#cbt-test-view.exam-active img { pointer-events: none; -webkit-user-drag: none; }

/* ============================================================
   MODAL: DETAIL ANTI-CHEAT
   ============================================================ */

.cheat-modal {
    max-width: 560px !important;
    padding: 0 !important;
    text-align: left !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    max-height: 90vh;
}

/* ✅ FIX: Cheat modal harus muncul DI ATAS leaderboard modal */
#admin-cheat-modal {
    z-index: 100000010 !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============ HEADER ============ */
.cheat-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 60%, #ec4899 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cheat-modal-header::before {
    content: '';
    position: absolute;
    top: -60%; right: -10%;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
}
.cheat-modal-header-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    z-index: 1;
}
.cheat-modal-header h3 {
    margin: 0 0 3px;
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    z-index: 1;
}
.cheat-modal-header p {
    margin: 0;
    font-size: 0.78rem;
    opacity: 0.9;
    font-weight: 500;
    z-index: 1;
}
.cheat-modal-close {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 32px; height: 32px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
    margin-left: auto;
    transition: 0.2s;
    flex-shrink: 0;
    z-index: 1;
}
.cheat-modal-close:hover { background: rgba(255,255,255,0.32); }

/* ============ BODY ============ */
.cheat-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px 6px;
    -webkit-overflow-scrolling: touch;
}

/* ============ PROFIL SISWA ============ */
.cheat-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}
.cheat-profile-avatar {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 16px rgba(99,102,241,0.3);
}
.cheat-profile-info { flex: 1; min-width: 0; }
.cheat-profile-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1f2937;
    margin: 0 0 4px;
    line-height: 1.3;
    word-break: break-word;
}
.cheat-profile-meta {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.cheat-profile-meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ============ STATUS BADGE ============ */
.cheat-status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.cheat-status-badge.safe    { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.cheat-status-badge.warning { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.cheat-status-badge.danger  { background: linear-gradient(135deg, #fee2e2, #fca5a5); color: #991b1b; }

/* ============ STAT CARDS ============ */
.cheat-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.cheat-stat-card {
    padding: 14px 10px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    text-align: center;
    transition: 0.2s;
}
.cheat-stat-card:hover {
    border-color: var(--primary-light);
    box-shadow: 0 4px 12px rgba(99,102,241,0.08);
}
.cheat-stat-icon { font-size: 1.35rem; line-height: 1; margin-bottom: 6px; }
.cheat-stat-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.cheat-stat-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1f2937;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cheat-stat-value.danger { color: #dc2626; }

/* ============ SECTION TITLE ============ */
.cheat-section-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    margin: 18px 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cheat-section-title::before {
    content: '';
    width: 4px; height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary), var(--primary-dark));
}

/* ============ AKTIVITAS LIST ============ */
.cheat-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cheat-activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 3px solid #cbd5e1;
    transition: 0.2s;
}
.cheat-activity-item.danger  { background: #fef2f2; border-left-color: #ef4444; }
.cheat-activity-item.warning { background: #fffbeb; border-left-color: #f59e0b; }
.cheat-activity-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}
.cheat-activity-label { flex: 1; font-size: 0.86rem; font-weight: 600; color: #334155; }
.cheat-activity-count {
    font-size: 0.85rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 20px;
    background: #e2e8f0;
    color: #475569;
    font-variant-numeric: tabular-nums;
    min-width: 42px;
    text-align: center;
}
.cheat-activity-item.danger .cheat-activity-count  { background: #fee2e2; color: #991b1b; }
.cheat-activity-item.warning .cheat-activity-count { background: #fef3c7; color: #92400e; }

/* ============ TIMELINE ============ */
.cheat-timeline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
.cheat-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fef2f2, #fff);
    border-radius: 10px;
    border-left: 3px solid #ef4444;
    font-size: 0.82rem;
}
.cheat-timeline-time {
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: #dc2626;
    flex-shrink: 0;
    padding-top: 1px;
    letter-spacing: 0.3px;
}
.cheat-timeline-desc {
    color: #334155;
    font-weight: 600;
    line-height: 1.4;
}

.cheat-empty-note {
    padding: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    background: #f0fdf4;
    border-radius: 10px;
    border: 1px dashed #86efac;
    font-weight: 600;
}

/* ============ FOOTER ============ */
.cheat-modal-footer {
    flex-shrink: 0;
    padding: 14px 24px;
    background: linear-gradient(0deg, #fafbff 0%, #fff 100%);
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 480px) {
    .cheat-modal { max-width: 100% !important; border-radius: 16px; }
    .cheat-modal-header { padding: 16px 18px; border-radius: 16px 16px 0 0; }
    .cheat-modal-header-icon { width: 40px; height: 40px; font-size: 1.15rem; }
    .cheat-modal-body { padding: 16px 18px 4px; }
    .cheat-modal-footer { padding: 12px 18px; }
    .cheat-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .cheat-stat-card { padding: 10px 6px; }
    .cheat-stat-value { font-size: 1rem; }
    .cheat-stat-icon { font-size: 1.1rem; }
    .cheat-profile-avatar { width: 44px; height: 44px; font-size: 1rem; border-radius: 12px; }
    .cheat-profile-name { font-size: 0.95rem; }
    .cheat-status-badge { font-size: 0.62rem; padding: 5px 10px; }
    .cheat-activity-item { padding: 9px 12px; gap: 8px; }
    .cheat-activity-label { font-size: 0.8rem; }
    .cheat-activity-count { font-size: 0.78rem; padding: 3px 10px; min-width: 36px; }
}

/* ============ DARK MODE CHEAT MODAL — lebih solid & jelas ============ */

/* Body modal: tidak transparan, gelap solid */
[data-theme="dark"] .cheat-modal {
    background: #0f172a !important;
    border: 1px solid rgba(99,102,241,0.3) !important;
    box-shadow:
        0 25px 60px rgba(0,0,0,0.7),
        0 0 40px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Profil card */
[data-theme="dark"] .cheat-profile {
    background: linear-gradient(135deg, #1e293b, #1a2332);
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
[data-theme="dark"] .cheat-profile-name {
    color: #f8fafc;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
[data-theme="dark"] .cheat-profile-meta { color: #cbd5e1; }

/* Stat cards: tegas dengan warna khas */
[data-theme="dark"] .cheat-stat-card {
    background: linear-gradient(135deg, #1e293b, #172033);
    border-color: rgba(99,102,241,0.28);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
[data-theme="dark"] .cheat-stat-card:hover {
    border-color: rgba(139,92,246,0.55);
    box-shadow: 0 4px 16px rgba(99,102,241,0.2);
}
[data-theme="dark"] .cheat-stat-label { color: #94a3b8; }
[data-theme="dark"] .cheat-stat-value {
    color: #f1f5f9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .cheat-stat-value.danger { color: #fca5a5; }

/* Section title */
[data-theme="dark"] .cheat-section-title {
    color: #cbd5e1;
    border-bottom-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .cheat-section-title::before {
    background: linear-gradient(180deg, #818cf8, #6366f1);
}

/* Activity items */
[data-theme="dark"] .cheat-activity-item {
    background: linear-gradient(135deg, #1e293b, #172033);
    border-left-color: #475569;
    border-left-width: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
[data-theme="dark"] .cheat-activity-item.danger {
    background: linear-gradient(135deg, rgba(127,29,29,0.35), rgba(69,10,10,0.4));
    border-left-color: #ef4444;
}
[data-theme="dark"] .cheat-activity-item.warning {
    background: linear-gradient(135deg, rgba(120,53,15,0.35), rgba(69,26,3,0.4));
    border-left-color: #f59e0b;
}
[data-theme="dark"] .cheat-activity-label {
    color: #e2e8f0;
    font-weight: 700;
}
[data-theme="dark"] .cheat-activity-count {
    background: #334155;
    color: #cbd5e1;
    border: 1px solid #475569;
}
[data-theme="dark"] .cheat-activity-item.danger .cheat-activity-count {
    background: rgba(220,38,38,0.35);
    color: #fecaca;
    border-color: rgba(239,68,68,0.5);
}
[data-theme="dark"] .cheat-activity-item.warning .cheat-activity-count {
    background: rgba(245,158,11,0.3);
    color: #fde68a;
    border-color: rgba(245,158,11,0.5);
}

/* Timeline */
[data-theme="dark"] .cheat-timeline-item {
    background: linear-gradient(135deg, rgba(127,29,29,0.3), rgba(30,41,59,0.6));
    border-left-color: #ef4444;
    border-left-width: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
[data-theme="dark"] .cheat-timeline-time { color: #fca5a5; }
[data-theme="dark"] .cheat-timeline-desc { color: #f1f5f9; }

/* Empty note */
[data-theme="dark"] .cheat-empty-note {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.1));
    border-color: rgba(16,185,129,0.5);
    color: #6ee7b7;
    font-weight: 700;
}

/* Footer */
[data-theme="dark"] .cheat-modal-footer {
    background: linear-gradient(0deg, #0a1020, #0f172a);
    border-top-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .cheat-modal-footer .cbt-modal-btn.ghost {
    background: rgba(30,41,59,0.8);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .cheat-modal-footer .cbt-modal-btn.ghost:hover {
    background: rgba(51,65,85,0.9);
    border-color: #818cf8;
    color: #a5b4fc;
}
  
/* ============================================================
   DARK MODE — ADMIN PANEL (Full Override)
   ============================================================ */

/* ---------- Wrapper admin ---------- */
[data-theme="dark"] #cbt-admin-view {
    background: linear-gradient(160deg, #0a1020 0%, #06081a 100%);
    color: #e2e8f0;
}

/* ---------- Hero tetap (gradient sudah bagus) ---------- */
[data-theme="dark"] .admin-hero {
    box-shadow: 0 10px 30px rgba(79,70,229,0.4),
                0 0 60px rgba(99,102,241,0.15);
}

/* ---------- Tabs ---------- */
[data-theme="dark"] .admin-tabs {
    background: rgba(15,23,42,0.7);
    border-color: rgba(99,102,241,0.25);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
[data-theme="dark"] .admin-tab {
    color: #94a3b8;
}
[data-theme="dark"] .admin-tab:hover {
    background: rgba(99,102,241,0.15);
    color: #e2e8f0;
}
[data-theme="dark"] .admin-tab.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 6px 14px rgba(99,102,241,0.45);
}

/* ---------- Panels ---------- */
[data-theme="dark"] .admin-panel {
    background: rgba(15,23,42,0.75);
    border-color: rgba(99,102,241,0.2);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.03);
    backdrop-filter: blur(8px);
}
[data-theme="dark"] .admin-panel::before {
    background: linear-gradient(90deg, #818cf8, #a5b4fc);
    opacity: 0.9;
}
[data-theme="dark"] .admin-panel.accent-green::before {
    background: linear-gradient(90deg, #34d399, #6ee7b7);
}
[data-theme="dark"] .admin-panel.accent-red::before {
    background: linear-gradient(90deg, #f87171, #fca5a5);
}
[data-theme="dark"] .admin-panel.accent-amber::before {
    background: linear-gradient(90deg, #fbbf24, #fcd34d);
}
[data-theme="dark"] .admin-panel-head h3 {
    color: #f1f5f9;
}
[data-theme="dark"] .admin-panel-head h3 .icon-badge {
    background: rgba(99,102,241,0.25);
    color: #a5b4fc;
}

/* ---------- Tombol admin ---------- */
[data-theme="dark"] .admin-btn-ghost {
    background: rgba(30,41,59,0.8);
    color: #cbd5e1;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .admin-btn-ghost:hover {
    background: rgba(51,65,85,0.9);
    border-color: #818cf8;
    color: #a5b4fc;
}
[data-theme="dark"] .admin-btn-soft {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .admin-btn-soft:hover {
    background: rgba(99,102,241,0.35);
}

/* ---------- Stat Chips ---------- */
[data-theme="dark"] .stat-chip {
    background: rgba(30,41,59,0.6);
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .stat-chip:hover {
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 6px 16px rgba(99,102,241,0.15);
}
[data-theme="dark"] .stat-chip .chip-label { color: #94a3b8; }
[data-theme="dark"] .stat-chip .chip-value { color: #f1f5f9; }

/* ---------- Paket Stat Table ---------- */
[data-theme="dark"] .paket-stat-table {
    background: rgba(15,23,42,0.8);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
[data-theme="dark"] .paket-stat-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(99,102,241,0.12);
}
[data-theme="dark"] .paket-stat-table tbody tr:hover {
    background: rgba(99,102,241,0.1);
}
[data-theme="dark"] .paket-stat-table .paket-name {
    color: #a5b4fc;
}

/* ---------- Leaderboard Table (admin) ---------- */
[data-theme="dark"] .leaderboard-table {
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
[data-theme="dark"] .leaderboard-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(99,102,241,0.12);
}
[data-theme="dark"] .leaderboard-table tbody tr:hover {
    background: rgba(99,102,241,0.1);
}

/* ---------- User Table ---------- */
[data-theme="dark"] .user-table {
    background: rgba(15,23,42,0.8);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
[data-theme="dark"] .user-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(99,102,241,0.12);
}
[data-theme="dark"] .user-table tbody tr:hover {
    background: rgba(99,102,241,0.1);
}
[data-theme="dark"] .user-table code {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}

/* ---------- Search & Selects ---------- */
[data-theme="dark"] .admin-select,
[data-theme="dark"] .cbt-search-bar input,
[data-theme="dark"] .cbt-search-select .ss-trigger,
[data-theme="dark"] .cbt-search-select .ss-search-input {
    background-color: rgba(15,23,42,0.9);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .admin-select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='%23a5b4fc' d='M6 8L0 0h12z'/%3e%3c/svg%3e");
}
[data-theme="dark"] .cbt-search-bar input::placeholder,
[data-theme="dark"] .cbt-search-select .ss-search-input::placeholder {
    color: #64748b;
}
[data-theme="dark"] .cbt-search-bar input:focus,
[data-theme="dark"] .cbt-search-select .ss-search-input:focus {
    background: rgba(15,23,42,1);
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2);
}
[data-theme="dark"] .cbt-search-bar .search-icon {
    color: #64748b;
}
[data-theme="dark"] .cbt-search-select .ss-trigger-label.placeholder {
    color: #64748b;
}
[data-theme="dark"] .cbt-search-select .ss-caret { color: #64748b; }

/* ---------- Searchable Select Dropdown ---------- */
[data-theme="dark"] .cbt-search-select .ss-dropdown {
    background: #0f172a;
    border-color: rgba(99,102,241,0.35);
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
[data-theme="dark"] .cbt-search-select .ss-option {
    color: #cbd5e1;
}
[data-theme="dark"] .cbt-search-select .ss-option:hover {
    background: rgba(99,102,241,0.15);
}
[data-theme="dark"] .cbt-search-select .ss-option.active {
    background: linear-gradient(90deg, rgba(99,102,241,0.3), rgba(139,92,246,0.15));
    color: #a5b4fc;
}
[data-theme="dark"] .cbt-search-select .ss-option .ss-opt-count { color: #64748b; }
[data-theme="dark"] .cbt-search-select .ss-highlight {
    background: linear-gradient(180deg, transparent 60%, rgba(168,85,247,0.5) 60%);
    color: #f1f5f9;
}

/* ---------- Paket Toggle ---------- */
[data-theme="dark"] .paket-toggle {
    background: rgba(15,23,42,0.7);
    border-color: rgba(99,102,241,0.3);
    color: #94a3b8;
}
[data-theme="dark"] .paket-toggle:hover:not(.disabled) {
    border-color: #818cf8;
    background: rgba(99,102,241,0.15);
}
[data-theme="dark"] .paket-toggle.active {
    background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(5,150,105,0.2));
    border-color: #34d399;
    color: #6ee7b7;
}

/* ---------- Soal List Items ---------- */
[data-theme="dark"] .admin-soal-item {
    background: rgba(15,23,42,0.7);
    border-color: rgba(99,102,241,0.15);
}
[data-theme="dark"] .admin-soal-item:hover {
    background: linear-gradient(90deg, rgba(99,102,241,0.12) 0%, rgba(15,23,42,0.9) 100%);
    border-color: rgba(99,102,241,0.4);
    box-shadow: 0 6px 18px rgba(99,102,241,0.15);
}
[data-theme="dark"] .admin-soal-item.locked {
    background: rgba(15,23,42,0.4);
    opacity: 0.7;
}
[data-theme="dark"] .admin-soal-item.selected {
    background: linear-gradient(90deg, rgba(99,102,241,0.25) 0%, rgba(15,23,42,0.9) 100%);
    border-color: #818cf8;
    box-shadow: 0 0 0 1px #818cf8, 0 4px 12px rgba(99,102,241,0.25);
}
[data-theme="dark"] .admin-soal-preview { color: #cbd5e1; }
[data-theme="dark"] .admin-soal-badge.level {
    background: rgba(71,85,105,0.5);
    color: #cbd5e1;
}
[data-theme="dark"] .admin-soal-badge.owner-none {
    background: rgba(71,85,105,0.3);
    color: #94a3b8;
    border-color: #475569;
}

/* ---------- Icon Buttons ---------- */
[data-theme="dark"] .admin-icon-btn {
    background: rgba(30,41,59,0.8);
    border-color: rgba(99,102,241,0.25);
    color: #94a3b8;
}
[data-theme="dark"] .admin-icon-btn:hover {
    background: rgba(99,102,241,0.2);
    border-color: #818cf8;
    color: #a5b4fc;
}
[data-theme="dark"] .admin-icon-btn.danger:hover {
    background: rgba(220,38,38,0.2);
    border-color: #fca5a5;
    color: #fecaca;
}
[data-theme="dark"] .admin-icon-btn.locked {
    background: rgba(30,41,59,0.4);
    border-color: #334155;
    color: #475569;
}

/* ---------- Empty State ---------- */
[data-theme="dark"] .admin-empty {
    background: linear-gradient(135deg, rgba(15,23,42,0.6), rgba(30,41,59,0.4));
    border-color: rgba(99,102,241,0.25);
    color: #94a3b8;
}
[data-theme="dark"] .admin-empty b { color: #a5b4fc; }

/* ---------- Select-all Bar ---------- */
[data-theme="dark"] .admin-select-all-bar {
    background: rgba(15,23,42,0.5);
    border-color: rgba(99,102,241,0.2);
    color: #94a3b8;
}

/* ---------- Leaderboard filter bar ---------- */
[data-theme="dark"] .leaderboard-filter-bar {
    border-bottom-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .filter-chips {
    background: rgba(15,23,42,0.6);
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .filter-chip {
    color: #94a3b8;
}
[data-theme="dark"] .filter-chip:hover {
    color: #e2e8f0;
    background: rgba(99,102,241,0.15);
}

/* ---------- Leaderboard Section (result view) ---------- */
[data-theme="dark"] .leaderboard-empty {
    background: rgba(15,23,42,0.6);
    border-color: rgba(99,102,241,0.25);
    color: #94a3b8;
}
[data-theme="dark"] .leaderboard-sort-note {
    background: rgba(15,23,42,0.6);
    color: #cbd5e1;
    border-left-color: #818cf8;
}
[data-theme="dark"] .leaderboard-sort-note b { color: #a5b4fc; }
[data-theme="dark"] .leaderboard-total-info { color: #64748b; }
[data-theme="dark"] .leaderboard-extra {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.1));
    border-left-color: #818cf8;
    color: #a5b4fc;
}
[data-theme="dark"] .leaderboard-extra .rank-number { color: #c7d2fe; }

/* ---------- Badges Section ---------- */
[data-theme="dark"] .badges-count {
    background: linear-gradient(135deg, rgba(254,243,199,0.25), rgba(253,230,138,0.2));
    color: #fcd34d;
}

/* ---------- Live Toggle ---------- */
[data-theme="dark"] .live-toggle {
    background: rgba(15,23,42,0.8);
    border-color: rgba(99,102,241,0.3);
    color: #94a3b8;
}
[data-theme="dark"] .live-toggle.active {
    background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(5,150,105,0.2));
    border-color: #34d399;
    color: #6ee7b7;
}

/* ---------- Admin Modals (form soal, import, dll) ---------- */
[data-theme="dark"] #admin-form-modal .cbt-modal,
[data-theme="dark"] #admin-code-import-modal .cbt-modal,
[data-theme="dark"] #admin-import-modal .cbt-modal,
[data-theme="dark"] #admin-paket-modal .cbt-modal,
[data-theme="dark"] #admin-reset-modal .cbt-modal,
[data-theme="dark"] #admin-export-modal .cbt-modal,
[data-theme="dark"] #admin-export-array-modal .cbt-modal,
[data-theme="dark"] #admin-preview-modal .cbt-modal,
[data-theme="dark"] #admin-user-modal .cbt-modal,
[data-theme="dark"] #admin-bulk-edit-modal .cbt-modal,
[data-theme="dark"] #admin-leaderboard-modal .cbt-modal {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow: 0 25px 60px rgba(0,0,0,0.7), 0 0 40px rgba(99,102,241,0.1);
}

/* Modal headers */
[data-theme="dark"] #admin-form-modal .admin-form-header,
[data-theme="dark"] #admin-code-import-modal .admin-form-header {
    background: linear-gradient(135deg, #1e293b, #172033);
    border-bottom-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] #admin-form-modal .admin-form-header h3,
[data-theme="dark"] #admin-code-import-modal .admin-form-header h3 {
    color: #f1f5f9;
}
[data-theme="dark"] #admin-form-modal .admin-form-header h3::before {
    background: rgba(99,102,241,0.3);
}
[data-theme="dark"] #admin-code-import-modal .admin-form-header h3::before {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* Modal footers */
[data-theme="dark"] #admin-form-modal .admin-form-footer,
[data-theme="dark"] #admin-code-import-modal .admin-form-footer {
    background: linear-gradient(0deg, #0a1020, #0f172a);
    border-top-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .cbt-modal-btn.ghost {
    background: rgba(30,41,59,0.8);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .cbt-modal-btn.ghost:hover {
    background: rgba(51,65,85,0.9);
    border-color: #818cf8;
    color: #a5b4fc;
}

/* ============================================================
   DARK MODE — Modal Umum (.cbt-modal)
   Modal tetap GELAP dengan teks TERANG
   ============================================================ */
[data-theme="dark"] .cbt-modal {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.7),
        0 0 40px rgba(99,102,241,0.12),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

[data-theme="dark"] .cbt-modal h3 {
    color: #f1f5f9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

[data-theme="dark"] .cbt-modal p {
    color: #cbd5e1;
}

[data-theme="dark"] .cbt-modal p b {
    color: #ffffff;
    font-weight: 800;
}

/* Tombol ghost (Batal/Periksa Lagi) di dark mode */
[data-theme="dark"] .cbt-modal-btn.ghost {
    background: rgba(30,41,59,0.8);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .cbt-modal-btn.ghost:hover {
    background: rgba(51,65,85,0.9);
    border-color: #818cf8;
    color: #a5b4fc;
}

/* Icon modal (lingkaran warna) tetap menyala terang di dark */
[data-theme="dark"] .cbt-modal.warning .cbt-modal-icon {
    background: linear-gradient(135deg, #78350f, #b45309);
    color: #fcd34d;
    box-shadow: 0 4px 16px rgba(245,158,11,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-theme="dark"] .cbt-modal.danger .cbt-modal-icon {
    background: linear-gradient(135deg, #7f1d1d, #b91c1c);
    color: #fca5a5;
    box-shadow: 0 4px 16px rgba(239,68,68,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-theme="dark"] .cbt-modal.info .cbt-modal-icon {
    background: linear-gradient(135deg, #312e81, #4338ca);
    color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(99,102,241,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
[data-theme="dark"] .cbt-modal.success .cbt-modal-icon {
    background: linear-gradient(135deg, #064e3b, #047857);
    color: #6ee7b7;
    box-shadow: 0 4px 16px rgba(16,185,129,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Form inputs in modals */
[data-theme="dark"] #admin-form-modal input[type="text"],
[data-theme="dark"] #admin-form-modal input[type="number"],
[data-theme="dark"] #admin-form-modal textarea,
[data-theme="dark"] #admin-form-modal select,
[data-theme="dark"] #admin-code-import-modal .admin-select,
[data-theme="dark"] #admin-code-import-input,
[data-theme="dark"] .admin-bs-row select,
[data-theme="dark"] #admin-user-modal input[type="text"],
[data-theme="dark"] #admin-user-modal input[type="password"],
[data-theme="dark"] #admin-user-modal .admin-select {
    background: rgba(15,23,42,0.9);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] #admin-form-modal input::placeholder,
[data-theme="dark"] #admin-form-modal textarea::placeholder,
[data-theme="dark"] #admin-code-import-input::placeholder,
[data-theme="dark"] #admin-user-modal input::placeholder {
    color: #475569;
}
[data-theme="dark"] #admin-form-modal input:focus,
[data-theme="dark"] #admin-form-modal textarea:focus,
[data-theme="dark"] #admin-form-modal select:focus,
[data-theme="dark"] #admin-code-import-input:focus {
    background: rgba(15,23,42,1);
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2);
}

/* Form labels */
[data-theme="dark"] #admin-form-modal .form-group label,
[data-theme="dark"] #admin-code-import-modal .form-group label,
[data-theme="dark"] #admin-user-modal .form-group label,
[data-theme="dark"] #admin-bulk-edit-modal .form-group label {
    color: #cbd5e1;
}
[data-theme="dark"] #admin-form-modal .form-section-title {
    color: #94a3b8;
    border-bottom-color: rgba(99,102,241,0.2);
}

/* Kunci chips */
[data-theme="dark"] .kunci-chip {
    background: rgba(30,41,59,0.6);
    border-color: rgba(99,102,241,0.25);
    color: #cbd5e1;
}
[data-theme="dark"] .kunci-chip:hover {
    background: rgba(99,102,241,0.15);
    border-color: #818cf8;
    color: #a5b4fc;
}
[data-theme="dark"] .kunci-chip:has(input:checked) {
    background: rgba(99,102,241,0.25);
    border-color: #818cf8;
    color: #c7d2fe;
}

/* BS rows */
[data-theme="dark"] .admin-bs-row {
    background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(30,41,59,0.5));
    color: #cbd5e1;
}

/* Preview soal in modal */
[data-theme="dark"] .admin-preview-stem {
    background: linear-gradient(135deg, rgba(15,23,42,0.8), rgba(99,102,241,0.08));
    color: #cbd5e1;
}
[data-theme="dark"] .admin-preview-q { color: #e2e8f0; }
[data-theme="dark"] .admin-preview-opt {
    background: rgba(30,41,59,0.6);
    border-color: rgba(99,102,241,0.15);
    color: #cbd5e1;
}
[data-theme="dark"] .admin-preview-explanation {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(30,64,175,0.1));
    color: #bfdbfe;
}
[data-theme="dark"] .admin-preview-explanation h4 { color: #93c5fd; }
[data-theme="dark"] .admin-preview-section-title { color: #94a3b8; }

/* Preview modal header (sticky) */
[data-theme="dark"] #admin-preview-modal .cbt-modal > div[style*="position:sticky"] {
    background: #0f172a !important;
    border-bottom-color: rgba(99,102,241,0.25) !important;
}
[data-theme="dark"] #admin-preview-modal h3 { color: #f1f5f9; }

/* Export array modal */
[data-theme="dark"] #admin-export-array-textarea {
    background: rgba(2,6,23,0.8) !important;
    color: #c7d2fe !important;
    border-color: rgba(99,102,241,0.3) !important;
}
[data-theme="dark"] #admin-export-array-modal .admin-form-header {
    background: linear-gradient(135deg, #1e293b, #172033);
    border-bottom-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] #admin-export-array-modal .admin-form-footer {
    background: linear-gradient(0deg, #0a1020, #0f172a);
    border-top-color: rgba(99,102,241,0.25);
}

/* Leaderboard modal — search bar */
[data-theme="dark"] #admin-lb-search-wrap input {
    background: rgba(15,23,42,0.9);
    color: #e2e8f0;
}
[data-theme="dark"] #admin-lb-body .cbt-search-bar input::placeholder { color: #475569; }

/* Rich text editor dark */
[data-theme="dark"] .cbt-editor {
    background: rgba(15,23,42,0.9);
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .cbt-editor-toolbar {
    background: linear-gradient(180deg, rgba(30,41,59,0.9), rgba(15,23,42,0.9));
    border-bottom-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .cbt-editor-btn {
    color: #94a3b8;
}
[data-theme="dark"] .cbt-editor-btn:hover {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .cbt-editor-content {
    color: #e2e8f0;
}
[data-theme="dark"] .cbt-editor-placeholder { color: #475569; }
[data-theme="dark"] .cbt-editor-content blockquote {
    background: rgba(30,41,59,0.6);
    color: #94a3b8;
}
[data-theme="dark"] .cbt-editor-content code {
    background: rgba(99,102,241,0.2);
    color: #f0abfc;
}
[data-theme="dark"] .cbt-editor-btn.active-source {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
}
[data-theme="dark"] .cbt-editor-sep { background: #475569; }
  
/* ============================================================
   DARK MODE — HEADER MODAL & EXAM CONFIG (Fix Putih)
   ============================================================ */

/* ---------- Header modal admin (target by ID + first-child) ---------- */

/* Papan Peringkat Modal — header */
[data-theme="dark"] #admin-leaderboard-modal .cbt-modal > div:first-child {
    background: linear-gradient(135deg, #1e293b 0%, #172033 100%) !important;
    border-bottom: 1px solid rgba(99,102,241,0.25) !important;
}
[data-theme="dark"] #admin-leaderboard-modal .cbt-modal > div:first-child h3 {
    color: #f1f5f9 !important;
}

/* Preview Soal Modal — header (pakai sticky) */
[data-theme="dark"] #admin-preview-modal .cbt-modal > div:first-child {
    background: linear-gradient(135deg, #1e293b 0%, #172033 100%) !important;
    border-bottom-color: rgba(99,102,241,0.25) !important;
}
[data-theme="dark"] #admin-preview-modal .cbt-modal > div:first-child h3 {
    color: #f1f5f9 !important;
}

/* Export Array Modal — header */
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:first-child {
    background: linear-gradient(135deg, #1e293b 0%, #172033 100%) !important;
    border-bottom-color: rgba(99,102,241,0.25) !important;
}
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:first-child h3 {
    color: #f1f5f9 !important;
}
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:first-child p {
    color: #94a3b8 !important;
}

/* Tombol close (✕) di header modal — semua modal admin */
[data-theme="dark"] #admin-leaderboard-modal .cbt-modal > div:first-child button,
[data-theme="dark"] #admin-preview-modal .cbt-modal > div:first-child button,
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:first-child button {
    color: #94a3b8 !important;
    transition: 0.2s;
}
[data-theme="dark"] #admin-leaderboard-modal .cbt-modal > div:first-child button:hover,
[data-theme="dark"] #admin-preview-modal .cbt-modal > div:first-child button:hover,
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:first-child button:hover {
    color: #e2e8f0 !important;
    background: rgba(99,102,241,0.15);
    border-radius: 8px;
}

/* ---------- Exam Config Section ---------- */
[data-theme="dark"] .exam-config-section {
    background: linear-gradient(135deg, rgba(30,41,59,0.7), rgba(15,23,42,0.8));
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .exam-config-section::before {
    background: linear-gradient(90deg, #818cf8, #a5b4fc, #c7d2fe);
}
[data-theme="dark"] .exam-config-section-title {
    color: #cbd5e1;
}
[data-theme="dark"] .exam-config-section-title::before {
    background: linear-gradient(180deg, #818cf8, #6366f1);
}

/* ---------- Exam Toggle Rows ---------- */
[data-theme="dark"] .exam-toggle-row {
    background: rgba(15,23,42,0.8);
    border-color: rgba(99,102,241,0.25);
}
[data-theme="dark"] .exam-toggle-row:hover {
    background: rgba(30,41,59,0.9);
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 4px 14px rgba(99,102,241,0.15);
}
[data-theme="dark"] .exam-toggle-row.active {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(5,150,105,0.15));
    border-color: #34d399;
    box-shadow: 0 4px 14px rgba(16,185,129,0.2);
}
[data-theme="dark"] .exam-toggle-label {
    color: #f1f5f9;
}
[data-theme="dark"] .exam-toggle-desc {
    color: #94a3b8;
}

/* Custom Switch — tetap sama tapi sesuaikan warna */
[data-theme="dark"] .exam-switch {
    background: #475569;
}
[data-theme="dark"] .exam-toggle-row.active .exam-switch {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 0 12px rgba(16,185,129,0.5);
}

/* ---------- Token Input ---------- */
[data-theme="dark"] .exam-token-input {
    background: rgba(2,6,23,0.8);
    color: #f1f5f9;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .exam-token-input:focus {
    background: rgba(15,23,42,1);
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2);
    letter-spacing: 3px;
}
[data-theme="dark"] .exam-token-input::placeholder {
    color: #475569;
}

/* ---------- Jadwal Inputs ---------- */
[data-theme="dark"] .exam-jadwal-item label {
    color: #cbd5e1;
}
[data-theme="dark"] .exam-jadwal-input {
    background: rgba(15,23,42,0.9);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.3);
}
[data-theme="dark"] .exam-jadwal-input:focus {
    background: rgba(15,23,42,1);
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2);
}
[data-theme="dark"] .exam-jadwal-hint {
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(29,78,216,0.1));
    border-left-color: #60a5fa;
    color: #93c5fd;
}
[data-theme="dark"] .exam-jadwal-hint b { color: #bfdbfe; }

/* ---------- Status Preview ---------- */
[data-theme="dark"] .exam-status-preview.tidak_terjadwal {
    background: linear-gradient(135deg, rgba(71,85,105,0.3), rgba(51,65,85,0.3));
    border-color: #475569;
    color: #cbd5e1;
}
[data-theme="dark"] .exam-status-preview.belum_mulai {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(217,119,6,0.15));
    border-color: #f59e0b;
    color: #fde68a;
}
[data-theme="dark"] .exam-status-preview.berlangsung {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(5,150,105,0.15));
    border-color: #34d399;
    color: #6ee7b7;
}
[data-theme="dark"] .exam-status-preview.selesai {
    background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(220,38,38,0.15));
    border-color: #f87171;
    color: #fca5a5;
}
[data-theme="dark"] .exam-status-icon {
    background: rgba(15,23,42,0.6);
}

/* ---------- "Mengatur Paket" box (header kecil di config) ---------- */
[data-theme="dark"] #admin-exam-paket-body > div:first-child {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.1)) !important;
    border-color: rgba(99,102,241,0.4) !important;
}
[data-theme="dark"] #admin-exam-paket-body > div:first-child > div > div:last-child > div:first-child {
    color: #a5b4fc !important;
}
[data-theme="dark"] #admin-exam-paket-body > div:first-child > div > div:last-child > div:last-child {
    color: #c7d2fe !important;
}
[data-theme="dark"] #admin-exam-paket-body > div:first-child button {
    background: rgba(15,23,42,0.7) !important;
    border-color: rgba(99,102,241,0.4) !important;
    color: #a5b4fc !important;
}
[data-theme="dark"] #admin-exam-paket-body > div:first-child button:hover {
    background: rgba(99,102,241,0.2) !important;
    border-color: #818cf8 !important;
    color: #c7d2fe !important;
}

/* ---------- Reset Jadwal Button ---------- */
[data-theme="dark"] #admin-exam-paket-body .admin-btn[onclick*="adminResetJadwal"] {
    background: rgba(220,38,38,0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239,68,68,0.4) !important;
}
[data-theme="dark"] #admin-exam-paket-body .admin-btn[onclick*="adminResetJadwal"]:hover {
    background: rgba(220,38,38,0.25) !important;
    border-color: #f87171 !important;
    color: #fecaca !important;
}

/* ---------- Save button (Simpan Pengaturan) ---------- */
[data-theme="dark"] #admin-exam-save-btn {
    box-shadow: 0 4px 12px rgba(99,102,241,0.5);
}

/* ---------- Pilih Paket Select ---------- */
[data-theme="dark"] #admin-exam-config-body .admin-select {
    background-color: rgba(15,23,42,0.9);
    color: #e2e8f0;
    border-color: rgba(99,102,241,0.35);
}
[data-theme="dark"] #admin-exam-config-body p {
    color: #94a3b8 !important;
}
[data-theme="dark"] #admin-exam-config-body p b {
    color: #cbd5e1 !important;
}
  
/* ============================================================
   DARK MODE — Modal Export Soal → Array
   (override inline style dengan !important)
   ============================================================ */

/* Body modal */
[data-theme="dark"] #admin-export-array-modal .cbt-modal {
    background: #0f172a !important;
    border: 1px solid rgba(99,102,241,0.25) !important;
}

/* Header modal (yang gradient putih) */
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:first-child {
    background: linear-gradient(135deg, #1e293b 0%, #172033 100%) !important;
    border-bottom: 1px solid rgba(99,102,241,0.25) !important;
    border-radius: 20px 20px 0 0 !important;
}

[data-theme="dark"] #admin-export-array-modal h3 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] #admin-export-array-modal #admin-export-array-subtitle {
    color: #94a3b8 !important;
}

/* Body modal (area konten) */
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:nth-child(2) {
    background: #0f172a !important;
}

/* Kotak tips hijau (di body) */
[data-theme="dark"] #admin-export-array-modal .cbt-modal div[style*="ecfdf5"],
[data-theme="dark"] #admin-export-array-modal .cbt-modal div[style*="#d1fae5"] {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.1)) !important;
    border-left-color: #34d399 !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] #admin-export-array-modal .cbt-modal div[style*="#065f46"],
[data-theme="dark"] #admin-export-array-modal .cbt-modal div[style*="#10b981"] {
    color: #6ee7b7 !important;
}

/* Textarea kode */
[data-theme="dark"] #admin-export-array-textarea {
    background: #020617 !important;
    color: #c7d2fe !important;
    border-color: rgba(99,102,241,0.35) !important;
}

/* Tombol "Copy" & "Download" */
[data-theme="dark"] #admin-export-array-modal .admin-btn-primary {
    box-shadow: 0 4px 12px rgba(99,102,241,0.4) !important;
}

[data-theme="dark"] #admin-export-array-modal .admin-btn-soft {
    background: rgba(99,102,241,0.2) !important;
    color: #a5b4fc !important;
}

/* Tombol Tutup footer */
[data-theme="dark"] #admin-export-array-modal .cbt-modal > div:last-child {
    background: linear-gradient(0deg, #0a1020, #0f172a) !important;
    border-top-color: rgba(99,102,241,0.25) !important;
}

[data-theme="dark"] #admin-export-array-modal .cbt-modal-btn.ghost {
    background: rgba(30,41,59,0.8) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99,102,241,0.3) !important;
}

/* Stats text "43 soal" */
[data-theme="dark"] #admin-export-array-stats {
    color: #94a3b8 !important;
}

/* ============================================================
   LEADERBOARD COUNT BAR — Info total peserta di atas tabel
   ============================================================ */
.leaderboard-count-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}
.leaderboard-count-bar .lc-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.leaderboard-count-bar .lc-left b {
    color: var(--primary-text);
    font-weight: 800;
    font-size: 0.95rem;
}
.leaderboard-count-bar .lc-right {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}
.leaderboard-count-bar .lc-right b {
    color: #6366f1;
    font-weight: 800;
    font-size: 0.85rem;
}

/* Dark mode override */
[data-theme="dark"] .leaderboard-count-bar {
    background: linear-gradient(135deg, rgba(30,41,59,0.7), rgba(15,23,42,0.8));
    border-color: rgba(99,102,241,0.25);
    color: #cbd5e1;
}
[data-theme="dark"] .leaderboard-count-bar .lc-left b {
    color: #a5b4fc;
}
[data-theme="dark"] .leaderboard-count-bar .lc-right {
    color: #94a3b8;
}
[data-theme="dark"] .leaderboard-count-bar .lc-right b {
    color: #c7d2fe;
}

/* Mobile */
@media (max-width: 480px) {
    .leaderboard-count-bar {
        padding: 8px 12px;
        font-size: 0.76rem;
    }
    .leaderboard-count-bar .lc-left b {
        font-size: 0.88rem;
    }
    .leaderboard-count-bar .lc-right {
        font-size: 0.7rem;
    }
}
  
/* ============================================================
   PAGINATION — Universal
   ============================================================ */
.pagination-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px 6px;
    margin-top: 12px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.pg-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #475569;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.pg-btn:hover:not(:disabled):not(.active) {
    background: #f8fafc;
    border-color: var(--primary);
    color: var(--primary-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.15);
}
.pg-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    cursor: default;
}
.pg-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.pg-nav {
    font-size: 1.15rem;
    font-weight: 900;
    min-width: 38px;
}
.pg-ellipsis {
    padding: 0 4px;
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.9rem;
    align-self: center;
}
.pg-info {
    margin-left: 10px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #f1f5f9;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    align-self: center;
}

/* Dark mode */
[data-theme="dark"] .pagination-bar {
    border-top-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .pg-btn {
    background: rgba(15,23,42,0.8);
    border-color: rgba(99,102,241,0.25);
    color: #cbd5e1;
}
[data-theme="dark"] .pg-btn:hover:not(:disabled):not(.active) {
    background: rgba(30,41,59,0.9);
    border-color: #818cf8;
    color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
[data-theme="dark"] .pg-btn.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-color: #818cf8;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.5);
}
[data-theme="dark"] .pg-ellipsis { color: #475569; }
[data-theme="dark"] .pg-info {
    background: rgba(30,41,59,0.7);
    color: #94a3b8;
    border: 1px solid rgba(99,102,241,0.2);
}

/* Mobile */
@media (max-width: 480px) {
    .pagination-bar { gap: 3px; padding: 10px 4px 4px; }
    .pg-btn { min-width: 30px; height: 30px; font-size: 0.76rem; padding: 0 6px; }
    .pg-nav { min-width: 32px; font-size: 1rem; }
    .pg-info { font-size: 0.66rem; padding: 4px 8px; margin-left: 6px; }
}
  
/* ============================================================
   MATCHING PUZZLE MODE
   ============================================================ */
.match-puzzle-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

/* ---------- Premise rows dengan slot ---------- */
.match-puzzle-premises {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.puzzle-premise {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.puzzle-premise-text {
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--text-dark);
    word-break: break-word;
}

.puzzle-premise-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary-text);
    font-weight: 800;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Slot kosong/terisi ---------- */
.puzzle-slot {
    min-height: 54px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: rgba(248,250,252,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 600;
    font-style: italic;
    text-align: center;
}

.puzzle-slot.empty::before {
    content: '⬇ Taruh di sini';
    pointer-events: none;
}

.puzzle-slot:hover:not(.filled) {
    border-color: var(--primary);
    background: rgba(224,231,255,0.5);
    color: var(--primary-text);
}

.puzzle-slot.filled {
    border-style: solid;
    border-color: var(--primary);
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: var(--text-dark);
    font-style: normal;
    font-weight: 500;
    justify-content: flex-start;
    text-align: left;
    cursor: pointer;
}

.puzzle-slot.drop-hover {
    border-color: #6366f1;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.22);
    transform: scale(1.02);
}

.puzzle-slot.selected-target {
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
    animation: slotPulse 1.2s ease-in-out infinite;
}

@keyframes slotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(99,102,241,0.15); }
    50%      { box-shadow: 0 0 0 8px rgba(99,102,241,0.05); }
}

.puzzle-slot-content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-size: 0.85rem;
    line-height: 1.4;
}

.puzzle-slot-letter {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #6366f1;
    color: #fff;
    font-weight: 800;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.puzzle-slot-text { flex: 1; min-width: 0; word-break: break-word; }

.puzzle-slot-clear {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220,38,38,0.15);
    border: none;
    color: #dc2626;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: 0.15s;
    padding: 0;
    line-height: 1;
}
.puzzle-slot-clear:hover { background: #dc2626; color: #fff; transform: scale(1.1); }

/* ---------- Pool jawaban ---------- */
.match-puzzle-pool {
    padding: 14px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border-radius: 14px;
    border: 1px solid #e2e8f0;
}

.match-puzzle-pool-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.match-puzzle-pool-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.puzzle-response {
    padding: 10px 14px;
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-dark);
    font-weight: 500;
    max-width: 100%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.puzzle-response:hover:not(.used):not(.dragging) {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.15);
}

.puzzle-response.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    box-shadow: 0 0 0 4px rgba(99,102,241,0.18);
    transform: translateY(-1px);
}

.puzzle-response.used {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.5);
}

.puzzle-response.dragging {
    opacity: 0.3;
    cursor: grabbing;
}

.puzzle-response-letter {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #6366f1;
    color: #fff;
    font-weight: 800;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.puzzle-response-text { flex: 1; min-width: 0; word-break: break-word; }

/* ---------- Drag ghost ---------- */
.match-puzzle-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 100000000;
    max-width: 260px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(79,70,229,0.5),
                0 4px 12px rgba(15,23,42,0.15);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    will-change: left, top;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.match-puzzle-ghost .ghost-letter {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.72rem;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
}

/* ---------- Review state di slot ---------- */
.puzzle-slot.correct-review {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.puzzle-slot.correct-review .puzzle-slot-letter { background: #10b981; }

.puzzle-slot.wrong-review {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
.puzzle-slot.wrong-review .puzzle-slot-letter { background: #ef4444; }

.puzzle-slot.correct-answer {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-style: dashed;
}

/* Slot yang sedang di-drag (sumber) */
.puzzle-slot.slot-dragging {
    opacity: 0.35;
    transform: scale(0.97);
    transition: opacity 0.15s, transform 0.15s;
    cursor: grabbing;
}

.puzzle-slot.slot-dragging .puzzle-slot-clear {
    pointer-events: none;
}

/* ---------- Dark mode ---------- */
[data-theme="dark"] .puzzle-premise-text {
    background: rgba(2,6,23,0.5);
    border-color: rgba(99,102,241,0.18);
    color: #e2e8f0;
}
[data-theme="dark"] .puzzle-premise-num {
    background: rgba(99,102,241,0.2);
    color: #a5b4fc;
}
[data-theme="dark"] .puzzle-slot {
    background: rgba(2,6,23,0.3);
    border-color: rgba(99,102,241,0.2);
    color: #64748b;
}
[data-theme="dark"] .puzzle-slot.filled {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    border-color: #818cf8;
    color: #e2e8f0;
}
[data-theme="dark"] .match-puzzle-pool {
    background: linear-gradient(135deg, rgba(2,6,23,0.5), rgba(15,23,42,0.6));
    border-color: rgba(99,102,241,0.2);
}
[data-theme="dark"] .match-puzzle-pool-title { color: #94a3b8; }
[data-theme="dark"] .puzzle-response {
    background: rgba(2,6,23,0.6);
    border-color: rgba(99,102,241,0.18);
    color: #e2e8f0;
}
[data-theme="dark"] .puzzle-response.selected {
    background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.2));
    border-color: #818cf8;
}
[data-theme="dark"] .puzzle-slot.correct-review {
    background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.1));
}
[data-theme="dark"] .puzzle-slot.wrong-review {
    background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.1));
}
  
/* Slot yang menunggu jawaban (saat user pilih response dari pool) */
.puzzle-slot.awaiting {
    border-color: #6366f1;
    border-style: solid;
    animation: slotAwaitPulse 1.2s ease-in-out infinite;
}
@keyframes slotAwaitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.3); }
    50%      { box-shadow: 0 0 0 8px rgba(99,102,241,0.05); }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .puzzle-premise { grid-template-columns: 1.1fr 1fr; gap: 8px; }
    .puzzle-premise-text { font-size: 0.82rem; padding: 10px 12px; }
    .puzzle-premise-num { width: 22px; height: 22px; font-size: 0.7rem; }
    .puzzle-slot { min-height: 48px; font-size: 0.72rem; padding: 6px 8px; }
    .puzzle-slot-content { font-size: 0.78rem; gap: 6px; }
    .puzzle-slot-letter { width: 20px; height: 20px; font-size: 0.68rem; }
    .puzzle-slot-clear { width: 18px; height: 18px; font-size: 0.7rem; }
    .match-puzzle-pool { padding: 10px; }
    .puzzle-response { padding: 8px 12px; font-size: 0.8rem; }
    .puzzle-response-letter { width: 20px; height: 20px; font-size: 0.68rem; }
}
  
/* ============================================================
   MATCHING PREVIEW — di admin form
   ============================================================ */
.matching-preview {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1.5px solid #bae6fd;
    border-radius: 12px;
    animation: previewFadeIn 0.3s ease;
}
@keyframes previewFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.matching-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #7dd3fc;
}
.matching-preview-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0369a1;
}
.matching-preview-count {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    letter-spacing: 0.3px;
}
.matching-preview-count.complete {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border-color: #6ee7b7;
}
.matching-preview-count.warning {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #fcd34d;
}

.matching-preview-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preview-row {
    display: grid;
    grid-template-columns: 26px 1fr 20px 1fr 22px;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.35;
    transition: 0.2s;
}
.preview-row:hover {
    border-color: #7dd3fc;
    background: #f8fafc;
}
.preview-row.valid {
    border-left: 3px solid #10b981;
}
.preview-row.warn {
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
}

.preview-num {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 800;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.preview-row.warn .preview-num {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.preview-left {
    color: #334155;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.preview-arrow {
    color: #94a3b8;
    font-weight: 800;
    font-size: 0.9rem;
    text-align: center;
}
.preview-right {
    color: #475569;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.preview-letter {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 800;
    font-size: 0.68rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bae6fd;
}

.preview-status {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.preview-status.ok {
    background: #d1fae5;
    color: #065f46;
}
.preview-status.warn {
    background: #fef3c7;
    color: #92400e;
}

.preview-empty-text {
    color: #94a3b8;
    font-style: italic;
    font-weight: 500;
}

.matching-preview-hint {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #7dd3fc;
    font-size: 0.72rem;
    line-height: 1.5;
    color: #0369a1;
    font-weight: 500;
}
.matching-preview-hint b {
    color: #075985;
    font-weight: 800;
}

/* ============ Dark mode ============ */
[data-theme="dark"] .matching-preview {
    background: linear-gradient(135deg, rgba(30,58,138,0.2), rgba(12,74,110,0.15));
    border-color: rgba(56,189,248,0.35);
}
[data-theme="dark"] .matching-preview-head {
    border-bottom-color: rgba(56,189,248,0.3);
}
[data-theme="dark"] .matching-preview-title { color: #7dd3fc; }
[data-theme="dark"] .matching-preview-count {
    background: rgba(56,189,248,0.15);
    color: #7dd3fc;
    border-color: rgba(56,189,248,0.35);
}
[data-theme="dark"] .matching-preview-count.complete {
    background: rgba(16,185,129,0.2);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.4);
}
[data-theme="dark"] .matching-preview-count.warning {
    background: rgba(245,158,11,0.2);
    color: #fde68a;
    border-color: rgba(245,158,11,0.4);
}
[data-theme="dark"] .preview-row {
    background: rgba(15,23,42,0.7);
    border-color: rgba(56,189,248,0.2);
}
[data-theme="dark"] .preview-row:hover {
    background: rgba(30,58,138,0.3);
    border-color: rgba(56,189,248,0.4);
}
[data-theme="dark"] .preview-row.valid {
    border-left-color: #34d399;
}
[data-theme="dark"] .preview-row.warn {
    background: rgba(120,53,15,0.25);
    border-left-color: #fbbf24;
}
[data-theme="dark"] .preview-left { color: #cbd5e1; }
[data-theme="dark"] .preview-arrow { color: #64748b; }
[data-theme="dark"] .preview-right { color: #94a3b8; }
[data-theme="dark"] .preview-letter {
    background: rgba(56,189,248,0.2);
    color: #7dd3fc;
    border-color: rgba(56,189,248,0.35);
}
[data-theme="dark"] .preview-status.ok {
    background: rgba(16,185,129,0.25);
    color: #6ee7b7;
}
[data-theme="dark"] .preview-status.warn {
    background: rgba(245,158,11,0.25);
    color: #fde68a;
}
[data-theme="dark"] .preview-empty-text { color: #64748b; }
[data-theme="dark"] .matching-preview-hint {
    color: #7dd3fc;
    border-top-color: rgba(56,189,248,0.3);
}
[data-theme="dark"] .matching-preview-hint b { color: #bae6fd; }

/* ============ Mobile ============ */
@media (max-width: 480px) {
    .matching-preview { padding: 12px; }
    .preview-row {
        grid-template-columns: 22px 1fr 16px 1fr 20px;
        gap: 6px;
        padding: 8px 10px;
        font-size: 0.76rem;
    }
    .preview-num { width: 20px; height: 20px; font-size: 0.66rem; }
    .preview-letter { width: 16px; height: 16px; font-size: 0.62rem; }
    .preview-status { width: 18px; height: 18px; font-size: 0.7rem; }
    .matching-preview-hint { font-size: 0.68rem; }
}

/* ============================================================
   DARK MODE untuk tombol nav
   ============================================================ */
[data-theme="dark"] .btn-nav {
    background: rgba(30, 41, 59, 0.8) !important;
    color: #e2e8f0 !important;
    border: 1.5px solid rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .btn-nav:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.2) !important;
    border-color: #818cf8 !important;
    color: #a5b4fc !important;
}

[data-theme="dark"] .btn-nav:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

[data-theme="dark"] .btn-nav-next {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #fff !important;
    border-color: transparent !important;
}

[data-theme="dark"] .btn-nav-next:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #fff !important;
}

[data-theme="dark"] .btn-restart-review {
    background: rgba(2, 6, 23, 0.6) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
}

/* Light mode: tombol prev default putih */
.btn-nav {
    background: #ffffff;
    color: var(--text-dark);
    border: 1.5px solid var(--border-color);
}

.btn-nav:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary-text);
}

.btn-nav-next {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ============================================================
   FIX: Compact footer copyright
   ============================================================ */
@media (min-width: 769px) {
    #cbt-footer {
        padding: 0.2rem !important;
        font-size: 0.78rem !important;
    }
    #cbt-footer > div:last-child {
        margin-top: 0.3rem !important;
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   FIX: Footer di halaman hasil & login — mode static
   ============================================================ */

/* Ketika di result view, footer jadi static (di bawah konten) */
#utbk-cbt-app:has(#cbt-result-view:not([style*="display: none"])) #cbt-footer {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 40px !important;
    box-shadow: none !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Wrapper utama — padding-bottom cukup untuk view yang butuh footer fixed */
#utbk-cbt-app:has(#cbt-result-view:not([style*="display: none"])) {
    padding-bottom: 20px !important;
}

/* Fallback kalau browser tidak support :has() */
@supports not (selector(:has(*))) {
    /* Pakai class yang di-set via JS */
    #utbk-cbt-app.result-mode #cbt-footer {
        position: static !important;
        bottom: auto !important;
        margin-top: 40px !important;
        box-shadow: none !important;
    }
    #utbk-cbt-app.result-mode {
        padding-bottom: 20px !important;
    }
}

/* ============================================================
   DARK MODE — Input di Modal Buat Paket Baru
   ============================================================ */
[data-theme="dark"] #admin-paket-modal input[type="text"],
[data-theme="dark"] #admin-new-paket-name {
    background: rgba(15,23,42,0.9) !important;
    color: #e2e8f0 !important;
    border: 1.5px solid rgba(99,102,241,0.4) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease;
}

[data-theme="dark"] #admin-paket-modal input[type="text"]:focus,
[data-theme="dark"] #admin-new-paket-name:focus {
    outline: none !important;
    border-color: #818cf8 !important;
    background: rgba(15,23,42,1) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2) !important;
}

[data-theme="dark"] #admin-paket-modal .form-group label {
    color: #cbd5e1 !important;
}

[data-theme="dark"] #admin-paket-modal .cbt-modal h3 {
    color: #f1f5f9 !important;
}

/* ============================================================
   PAKET BREAKDOWN — chips tipe soal di info paket
   ============================================================ */
.paket-breakdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: 10px;
    vertical-align: middle;
}

.paket-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.15s ease;
}

.paket-type-chip:hover { transform: translateY(-1px); }

.paket-type-chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Light mode ── */
.paket-type-chip.type-pg    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.paket-type-chip.type-pg    .chip-dot { background: #3b82f6; }

.paket-type-chip.type-pgk   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.paket-type-chip.type-pgk   .chip-dot { background: #f59e0b; }

.paket-type-chip.type-bs    { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.paket-type-chip.type-bs    .chip-dot { background: #10b981; }

.paket-type-chip.type-match { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.paket-type-chip.type-match .chip-dot { background: #8b5cf6; }

/* ── Dark mode ── */
[data-theme="dark"] .paket-type-chip.type-pg {
    background: rgba(59,130,246,0.18);
    color: #93c5fd;
    border-color: rgba(59,130,246,0.45);
}
[data-theme="dark"] .paket-type-chip.type-pgk {
    background: rgba(245,158,11,0.18);
    color: #fcd34d;
    border-color: rgba(245,158,11,0.45);
}
[data-theme="dark"] .paket-type-chip.type-bs {
    background: rgba(16,185,129,0.18);
    color: #6ee7b7;
    border-color: rgba(16,185,129,0.45);
}
[data-theme="dark"] .paket-type-chip.type-match {
    background: rgba(139,92,246,0.18);
    color: #c4b5fd;
    border-color: rgba(139,92,246,0.45);
}

/* ── Mobile: lebih ringkas ── */
@media (max-width: 640px) {
    .paket-breakdown { gap: 4px; margin-left: 6px; }
    .paket-type-chip {
        font-size: 0.64rem;
        padding: 2px 7px;
        gap: 3px;
    }
    .paket-type-chip .chip-dot { width: 5px; height: 5px; }
}

/* ============================================================
   ADMIN PANEL — ESTETIKA POLISH
   ============================================================ */

/* ── 1. Tab bar: sembunyikan scrollbar native ── */
.admin-tabs {
    scrollbar-width: none;              /* Firefox */
    -ms-overflow-style: none;           /* IE/Edge legacy */
    padding: 5px;
    gap: 4px;
}
.admin-tabs::-webkit-scrollbar {        /* Chrome/Safari */
    display: none;
    width: 0;
    height: 0;
}

/* ── 2. Tab: ukuran lebih rapi & berjarak ── */
.admin-tab {
    flex: 0 0 auto;                     /* jangan stretch */
    min-width: auto;
    padding: 10px 16px;
    font-size: 0.82rem;
    gap: 7px;
    border-radius: 9px;
}
.admin-tab .tab-icon {
    font-size: 0.98rem;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}

/* Fade hint di kanan — tanda bisa scroll */
.admin-tabs {
    position: relative;
}
.admin-tabs::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 26px;
    background: linear-gradient(90deg, transparent, #fff 85%);
    pointer-events: none;
    border-radius: 0 12px 12px 0;
    z-index: 3;
}
[data-theme="dark"] .admin-tabs::after {
    background: linear-gradient(90deg, transparent, rgba(15,23,42,0.95) 85%);
}

/* ── 3. Chip breakdown: soft-kan warna ── */
.paket-type-chip {
    padding: 2px 9px !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    border-width: 1px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
}
.paket-type-chip .chip-dot {
    width: 5px !important;
    height: 5px !important;
    opacity: 0.85;
}

/* Soft-kan khusus MATCH yang tadinya terlalu terang */
.paket-type-chip.type-match {
    background: #f3f0ff !important;
    color: #6d28d9 !important;
    border-color: #ddd6fe !important;
}
.paket-type-chip.type-match .chip-dot { background: #a78bfa !important; }

[data-theme="dark"] .paket-type-chip.type-match {
    background: rgba(139,92,246,0.14) !important;
    color: #c4b5fd !important;
    border-color: rgba(139,92,246,0.3) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}

/* Chip lain: sedikit lebih soft juga */
[data-theme="dark"] .paket-type-chip.type-pg {
    background: rgba(59,130,246,0.16) !important;
    border-color: rgba(59,130,246,0.35) !important;
}
[data-theme="dark"] .paket-type-chip.type-pgk {
    background: rgba(245,158,11,0.16) !important;
    border-color: rgba(245,158,11,0.35) !important;
}
[data-theme="dark"] .paket-type-chip.type-bs {
    background: rgba(16,185,129,0.16) !important;
    border-color: rgba(16,185,129,0.35) !important;
}

/* ── 4. Toggle "Aktif di Siswa" — soft-kan warna ── */
.paket-toggle {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.paket-toggle.active {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.12) !important;
}
.paket-toggle.active .toggle-track {
    background: #10b981 !important;
}
.paket-toggle .toggle-track {
    width: 32px !important;
    height: 18px !important;
}
.paket-toggle .toggle-track::after {
    width: 14px !important;
    height: 14px !important;
}
.paket-toggle input:checked + .toggle-track::after {
    transform: translateX(14px) !important;
}

[data-theme="dark"] .paket-toggle {
    background: rgba(30,41,59,0.6) !important;
    border-color: rgba(99,102,241,0.2) !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .paket-toggle.active {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.12)) !important;
    border-color: rgba(52,211,153,0.5) !important;
    color: #6ee7b7 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.15) !important;
}

/* ── 5. Info paket: spacing antar chips ── */
#admin-paket-info {
    margin-top: 12px !important;
    font-size: 0.82rem !important;
    line-height: 1.8 !important;
    display: block;
}
.paket-breakdown {
    gap: 5px !important;
    margin-left: 8px !important;
}

/* ── 6. Hilangkan scroll horizontal di halaman admin ── */
#cbt-admin-view {
    overflow-x: hidden !important;
}
#cbt-admin-view .cbt-container {
    overflow-x: hidden;
}

/* ── 7. Rapikan spacing panel ── */
.admin-panel {
    margin-bottom: 14px !important;
}
.admin-panel-head {
    margin-bottom: 14px !important;
    gap: 10px !important;
}

/* ── 8. Select-all bar: biar lebih "kartu" ── */
.admin-select-all-bar {
    padding: 11px 15px !important;
    background: linear-gradient(135deg, #fafbff 0%, #f1f5f9 100%) !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 11px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease;
}
.admin-select-all-bar:hover {
    border-color: #c7d2fe !important;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%) !important;
}

[data-theme="dark"] .admin-select-all-bar {
    background: linear-gradient(135deg, rgba(30,41,59,0.45), rgba(15,23,42,0.5)) !important;
    border-color: rgba(99,102,241,0.18) !important;
}
[data-theme="dark"] .admin-select-all-bar:hover {
    border-color: rgba(99,102,241,0.35) !important;
    background: linear-gradient(135deg, rgba(30,41,59,0.6), rgba(15,23,42,0.7)) !important;
}

/* ── 9. Search bar sedikit lebih "modern" ── */
#admin-soal-search-wrap input {
    padding: 11px 14px 11px 40px !important;
    border-radius: 11px !important;
    font-size: 0.86rem !important;
}

/* ── 10. Mobile tweaks ── */
@media (max-width: 768px) {
    .admin-tab {
        padding: 9px 12px !important;
        font-size: 0.76rem !important;
    }
    .admin-tab .tab-icon {
        font-size: 0.88rem !important;
    }
    .paket-type-chip {
        font-size: 0.62rem !important;
        padding: 2px 6px !important;
    }
}

/* ============================================================
   ADMIN — DROPDOWN PAKET: COMPACT & FLOATING
   ============================================================ */

/* ── 1. Dropdown lebih compact & floating jelas ── */
.cbt-search-select .ss-dropdown {
    z-index: 5000 !important;
    max-height: 260px !important;
    box-shadow:
        0 20px 50px rgba(15,23,42,0.22),
        0 8px 20px rgba(15,23,42,0.12),
        0 0 0 1px rgba(99,102,241,0.15) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ── 2. Search input: compact & tidak terpotong ── */
.cbt-search-select .ss-search-wrap {
    padding: 7px !important;
}
.cbt-search-select .ss-search-input {
    padding: 8px 12px 8px 32px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.cbt-search-select .ss-search-icon {
    left: 16px !important;
    font-size: 0.78rem !important;
}

/* ── 3. List paket: item lebih compact ── */
.cbt-search-select .ss-option {
    padding: 8px 11px !important;
    font-size: 0.84rem !important;
    border-radius: 7px !important;
    line-height: 1.35 !important;
    min-height: 36px;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.cbt-search-select .ss-option .ss-opt-count {
    font-size: 0.68rem !important;
    padding: 2px 7px !important;
    background: #f1f5f9;
    border-radius: 10px;
    margin-left: auto !important;
    color: #64748b !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

/* ── 4. Trigger button: rapikan ── */
.cbt-search-select .ss-trigger {
    padding: 11px 14px !important;
    font-size: 0.86rem !important;
    border-radius: 11px !important;
    background: #fff !important;
    min-height: 44px;
}

.cbt-search-select.open .ss-trigger {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important;
    background: #fff !important;
}

/* ── 5. Dark mode: shadow lebih kuat + border ── */
[data-theme="dark"] .cbt-search-select .ss-dropdown {
    background: #0f172a !important;
    border: 1.5px solid rgba(99,102,241,0.35) !important;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.6),
        0 8px 20px rgba(0,0,0,0.4),
        0 0 0 1px rgba(99,102,241,0.2) !important;
}
[data-theme="dark"] .cbt-search-select .ss-search-wrap {
    background: rgba(2,6,23,0.4) !important;
    border-bottom-color: rgba(99,102,241,0.2) !important;
}
[data-theme="dark"] .cbt-search-select .ss-search-input {
    background: rgba(2,6,23,0.6) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99,102,241,0.2) !important;
}
[data-theme="dark"] .cbt-search-select .ss-search-input:focus {
    background: rgba(15,23,42,1) !important;
    border-color: #818cf8 !important;
}
[data-theme="dark"] .cbt-search-select .ss-option {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .cbt-search-select .ss-option:hover {
    background: rgba(99,102,241,0.15) !important;
}
[data-theme="dark"] .cbt-search-select .ss-option .ss-opt-count {
    background: rgba(99,102,241,0.15) !important;
    color: #a5b4fc !important;
}
[data-theme="dark"] .cbt-search-select .ss-trigger {
    background: rgba(15,23,42,0.9) !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] .cbt-search-select.open .ss-trigger {
    background: rgba(15,23,42,1) !important;
}

/* ── 6. Fix gap besar sebelum footer ── */
#cbt-admin-view {
    padding-bottom: 0 !important;
}
#cbt-admin-view .cbt-container {
    padding-bottom: 20px !important;
}

/* ── 7. Tab bar mobile: scroll halus + fade ── */
.admin-tabs {
    scroll-behavior: smooth;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 5px 6px !important;
    gap: 4px !important;
}
.admin-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ── 8. Tab: tidak ada gap aneh antar icon & text ── */
.admin-tab {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    font-size: 0.78rem !important;
    min-width: auto !important;
    gap: 6px !important;
    letter-spacing: -0.1px;
}
.admin-tab .tab-icon {
    font-size: 0.92rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ── 9. Fix khusus mobile ── */
@media (max-width: 640px) {
    /* Panel: padding lebih compact */
    .admin-panel {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    /* Paket control: stacked vertikal */
    .paket-control-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .cbt-search-select {
        min-width: 0 !important;
        width: 100% !important;
    }

    .paket-toggle {
        align-self: flex-start !important;
        width: auto !important;
    }

    /* Dropdown: lebar penuh container */
    .cbt-search-select .ss-dropdown {
        left: 0 !important;
        right: 0 !important;
        min-width: 100% !important;
        max-height: 240px !important;
    }

    /* Panel head: stack vertikal */
    .admin-panel-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .admin-panel-head h3 {
        justify-content: flex-start !important;
    }
    .admin-panel-actions {
        justify-content: stretch !important;
        width: 100%;
    }
    .admin-panel-actions .admin-btn {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* Info paket: chips tetap rapi */
    .paket-breakdown {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: 0 !important;
        margin-top: 6px !important;
    }
    #admin-paket-info {
        line-height: 1.6 !important;
    }
}

/* ── 10. Sembunyikan scrollbar halaman admin (kalau ada) ── */
#utbk-cbt-app::-webkit-scrollbar {
    width: 8px;
}
#utbk-cbt-app::-webkit-scrollbar-track {
    background: transparent;
}
#utbk-cbt-app::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.3);
    border-radius: 4px;
}
#utbk-cbt-app::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.5);
}

/* ============================================================
   ADMIN MODE — FOOTER STATIC (tidak menutupi konten)
   ============================================================ */

/* Ketika admin mode aktif, footer jadi static */
#utbk-cbt-app.admin-mode #cbt-footer,
#utbk-cbt-app:has(#cbt-admin-view:not([style*="display: none"])) #cbt-footer {
    position: static !important;
    bottom: auto !important;
    margin-top: 32px !important;
    box-shadow: none !important;
    border-top: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
}

/* Wrapper admin: hilangkan padding-bottom fixed footer */
#utbk-cbt-app.admin-mode,
#utbk-cbt-app:has(#cbt-admin-view:not([style*="display: none"])) {
    padding-bottom: 0 !important;
}

/* Admin view: kasih ruang bawah yang wajar */
#cbt-admin-view {
    padding-bottom: 24px !important;
}
#cbt-admin-view .cbt-container {
    padding-bottom: 12px !important;
}

/* Dark mode: footer static tetap match background */
[data-theme="dark"] #utbk-cbt-app.admin-mode #cbt-footer,
[data-theme="dark"] #utbk-cbt-app:has(#cbt-admin-view:not([style*="display: none"])) #cbt-footer {
    background: #06081a !important;
    border-top-color: rgba(99,102,241,0.15) !important;
}

/* ============================================================
   TABEL STATISTIK — Fix kolom terpotong & scrollbar
   ============================================================ */

/* Wrapper scroll: lebih smooth + scrollbar styled */
#admin-stats-body > div[style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 4px;
    /* Scrollbar styled (Chrome/Safari) */
    scrollbar-width: thin;
    scrollbar-color: rgba(99,102,241,0.4) transparent;
}
#admin-stats-body > div[style*="overflow-x"]::-webkit-scrollbar {
    height: 8px;
}
#admin-stats-body > div[style*="overflow-x"]::-webkit-scrollbar-track {
    background: rgba(99,102,241,0.05);
    border-radius: 4px;
    margin: 0 4px;
}
#admin-stats-body > div[style*="overflow-x"]::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.35);
    border-radius: 4px;
}
#admin-stats-body > div[style*="overflow-x"]::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.55);
}

/* Tabel statistik: kolom lebih compact & tidak terpotong */
.paket-stat-table {
    min-width: 100%;
    table-layout: auto;
}
.paket-stat-table th {
    padding: 8px 6px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.3px !important;
}
.paket-stat-table td {
    padding: 9px 6px !important;
    font-size: 0.78rem !important;
}
.paket-stat-table th:first-child,
.paket-stat-table td:first-child {
    min-width: 100px;
    padding-left: 10px !important;
}
.paket-stat-table th:not(:first-child),
.paket-stat-table td:not(:first-child) {
    min-width: 52px;
    padding-right: 6px !important;
}
.paket-stat-table th:last-child,
.paket-stat-table td:last-child {
    padding-right: 12px !important;
}

/* Paket name: ellipsis kalau panjang */
.paket-stat-table .paket-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   PAGINATION — Jangan ketutupan & rapi
   ============================================================ */

.pagination-bar {
    margin-top: 14px !important;
    padding: 12px 8px 6px !important;
    position: relative;
    z-index: 1;
}

/* Pagination: scroll horizontal smooth kalau banyak halaman */
@media (max-width: 640px) {
    .pagination-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        scrollbar-width: none;
    }
    .pagination-bar::-webkit-scrollbar {
        display: none;
    }
    .pg-btn {
        flex-shrink: 0;
    }
}

/* ============================================================
   ADMIN — HILANGKAN GAP BESAR SEBELUM FOOTER
   ============================================================ */

/* Pastikan admin tab panel tidak ada margin bawah berlebih */
.admin-tab-panel.active {
    padding-bottom: 0 !important;
}

/* Panel terakhir: margin lebih kecil */
.admin-tab-panel .admin-panel:last-child {
    margin-bottom: 0 !important;
}

/* ============================================================
   ADMIN — SCROLLBAR CONTAINER (konsisten)
   ============================================================ */

#utbk-cbt-app::-webkit-scrollbar {
    width: 8px;
}
#utbk-cbt-app::-webkit-scrollbar-track {
    background: transparent;
}
#utbk-cbt-app::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.3);
    border-radius: 4px;
}
#utbk-cbt-app::-webkit-scrollbar-thumb:hover {
    background: rgba(99,102,241,0.5);
}

[data-theme="dark"] #utbk-cbt-app::-webkit-scrollbar-thumb {
    background: rgba(129,140,248,0.35);
}
[data-theme="dark"] #utbk-cbt-app::-webkit-scrollbar-thumb:hover {
    background: rgba(129,140,248,0.55);
}

/* ============================================================
   ADMIN — MOBILE: tabel statistik lebih nyaman
   ============================================================ */
@media (max-width: 640px) {
    /* Chips statistik: 1 kolom kalau sempit */
    .stat-chips {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .stat-chip {
        padding: 10px 12px !important;
    }

    /* Tabel: font lebih kecil */
    .paket-stat-table th {
        font-size: 0.58rem !important;
        padding: 7px 5px !important;
    }
    .paket-stat-table td {
        font-size: 0.74rem !important;
        padding: 8px 5px !important;
    }
    .paket-stat-table .paket-name {
        max-width: 110px;
        font-size: 0.72rem;
    }
}

/* ============================================================
   ADMIN — MODAL BUAT PAKET BARU: LAYOUT RAPI
   ============================================================ */

#admin-paket-modal .cbt-modal {
    max-width: 440px;
    padding: 26px 24px 22px;
    text-align: left;
}

#admin-paket-modal h3 {
    text-align: center;
    margin: 0 0 20px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
}

#admin-paket-modal .form-group {
    margin-bottom: 18px;
}

#admin-paket-modal .form-group label {
    display: block !important;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-bottom: 8px;
    letter-spacing: 0.1px;
    text-align: left;
}

#admin-paket-modal .form-group input[type="text"] {
    display: block !important;
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: var(--text-dark) !important;
    transition: all 0.2s ease !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
    box-sizing: border-box !important;
}

#admin-paket-modal .form-group input[type="text"]:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    background: #fbfbff !important;
    box-shadow:
        0 0 0 4px var(--primary-light),
        inset 0 1px 2px rgba(15,23,42,0.04) !important;
}

/* Actions: tombol sejajar */
#admin-paket-modal .cbt-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

#admin-paket-modal .cbt-modal-btn {
    flex: 1;
    padding: 12px 18px;
    font-size: 0.9rem;
    border-radius: 10px;
    font-weight: 700;
}

/* Dark mode */
[data-theme="dark"] #admin-paket-modal h3 {
    color: #f1f5f9;
}

[data-theme="dark"] #admin-paket-modal .form-group label {
    color: #cbd5e1;
}

[data-theme="dark"] #admin-paket-modal .form-group input[type="text"] {
    background: rgba(15,23,42,0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99,102,241,0.3) !important;
}

[data-theme="dark"] #admin-paket-modal .form-group input[type="text"]:focus {
    background: rgba(15,23,42,1) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2) !important;
}

[data-theme="dark"] #admin-paket-modal .form-group input[type="text"]::placeholder {
    color: #475569;
}

/* ============================================================
   ADMIN ACTIONS MENU — DEFAULT (berlaku di manapun menu berada)
   Wajib ada supaya menu TIDAK muncul sebelum dipindah ke body
   ============================================================ */

.admin-actions-menu {
    position: fixed;
    top: -9999px;
    left: -9999px;
    min-width: 230px;
    max-width: 280px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow:
        0 20px 50px rgba(15,23,42,0.18),
        0 8px 20px rgba(15,23,42,0.10),
        0 0 0 1px rgba(99,102,241,0.08);
    padding: 6px;
    z-index: 2147483647;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.18s;
    pointer-events: auto;
    font-family: inherit;
}

.admin-actions-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Dark mode default */
[data-theme="dark"] .admin-actions-menu {
    background: #0f172a;
    border-color: rgba(99,102,241,0.3);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.7),
        0 8px 20px rgba(0,0,0,0.4);
}

/* ============================================================
   BS STATEMENTS — Dynamic rows (override CSS modal lama)
   ============================================================ */

/* Container */
#admin-bs-statements {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Row layout: textarea | select | remove */
#admin-bs-statements .bs-statement-row {
    display: grid !important;
    grid-template-columns: 1fr 130px 40px !important;
    gap: 10px !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
}

/* Textarea — override #admin-form-modal textarea */
#admin-form-modal #admin-bs-statements .admin-bs-statement {
    width: 100% !important;
    min-height: 60px !important;
    max-height: 200px !important;
    padding: 10px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    color: var(--text-dark) !important;
    background: #fff !important;
    resize: vertical !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-sizing: border-box !important;
}

#admin-form-modal #admin-bs-statements .admin-bs-statement:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important;
    background: #fbfbff !important;
}

#admin-form-modal #admin-bs-statements .admin-bs-statement::placeholder {
    color: #cbd5e1 !important;
}

/* Select — override #admin-form-modal select */
#admin-form-modal #admin-bs-statements .admin-bs-kunci {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    /* ✅ Paksa pakai arrow native — jangan appearance: none */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    background-image: none !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

#admin-form-modal #admin-bs-statements .admin-bs-kunci:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important;
}

/* Tombol hapus */
#admin-bs-statements .bs-statement-remove {
    width: 40px !important;
    height: 100% !important;
    min-height: 60px !important;
    border: 1.5px solid #fecaca !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#admin-bs-statements .bs-statement-remove:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    transform: scale(1.05);
}

/* ── Dark mode ── */
[data-theme="dark"] #admin-form-modal #admin-bs-statements .admin-bs-statement,
[data-theme="dark"] #admin-form-modal #admin-bs-statements .admin-bs-kunci {
    background: rgba(15,23,42,0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99,102,241,0.3) !important;
}

[data-theme="dark"] #admin-form-modal #admin-bs-statements .admin-bs-statement:focus,
[data-theme="dark"] #admin-form-modal #admin-bs-statements .admin-bs-kunci:focus {
    background: rgba(15,23,42,1) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2) !important;
}

[data-theme="dark"] #admin-bs-statements .bs-statement-remove {
    background: rgba(220,38,38,0.15) !important;
    border-color: rgba(239,68,68,0.4) !important;
    color: #fca5a5 !important;
}

[data-theme="dark"] #admin-bs-statements .bs-statement-remove:hover {
    background: rgba(220,38,38,0.25) !important;
    border-color: #f87171 !important;
    color: #fecaca !important;
}

/* ── Mobile: stack vertikal ── */
@media (max-width: 640px) {
    #admin-bs-statements .bs-statement-row {
        grid-template-columns: 1fr 40px !important;
        grid-template-areas:
            "statement remove"
            "kunci     kunci" !important;
    }
    #admin-bs-statements .admin-bs-statement { grid-area: statement; }
    #admin-bs-statements .admin-bs-kunci { grid-area: kunci; }
    #admin-bs-statements .bs-statement-remove { grid-area: remove; }
}

/* ============================================================
   IMAGE ZOOM MODAL — Lightbox gambar soal
   ============================================================ */

/* Gambar di soal/opsi klik-able */
#cbt-test-view img {
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#cbt-test-view img:hover {
    transform: scale(1.01);
    box-shadow: 0 4px 16px rgba(99,102,241,0.25);
}

/* Modal overlay */
.cbt-image-zoom-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    touch-action: none;
}
.cbt-image-zoom-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Stage */
.cbt-zoom-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 20px 80px;
    cursor: grab;
}
.cbt-zoom-stage:active { cursor: grabbing; }

#cbt-zoom-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.15s ease;
    will-change: transform;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* Close button */
.cbt-zoom-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.cbt-zoom-close:hover {
    background: rgba(255,255,255,0.28);
    transform: scale(1.08);
}

/* Toolbar zoom */
.cbt-zoom-toolbar {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 40px;
    background: rgba(20,20,30,0.8);
    border: 1px solid rgba(255,255,255,0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.cbt-zoom-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
    line-height: 1;
}
.cbt-zoom-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.08);
}
.cbt-zoom-btn:active { transform: scale(0.95); }
.cbt-zoom-level {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 52px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Hint di mobile */
@media (max-width: 640px) {
    .cbt-zoom-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 1.5rem; }
    .cbt-zoom-toolbar { bottom: 16px; padding: 8px 12px; }
    .cbt-zoom-btn { width: 34px; height: 34px; font-size: 1.05rem; }
}

/* Live Monitor */
.live-monitor-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1.5px solid #f1f5f9;
    margin-bottom: 8px;
    transition: all 0.2s;
}
.live-monitor-row.active { border-color: #6ee7b7; background: linear-gradient(135deg, #f0fdf4, #ecfdf5); }
.live-monitor-row.idle   { opacity: 0.75; border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.live-monitor-row.done   { opacity: 0.6; }

.live-monitor-avatar {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.live-monitor-info { flex: 1; min-width: 0; }
.live-monitor-name {
    font-size: 0.9rem; font-weight: 700; color: var(--text-dark);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.live-monitor-meta {
    font-size: 0.72rem; color: var(--text-muted); font-weight: 600;
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 3px;
}
.live-monitor-progress {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
    min-width: 80px;
}
.live-monitor-progress-bar {
    width: 60px; height: 6px; border-radius: 6px;
    background: #e2e8f0; overflow: hidden;
}
.live-monitor-progress-fill {
    height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    transition: width 0.3s;
}
.live-monitor-progress-text {
    font-size: 0.7rem; font-weight: 800; color: var(--primary-text);
    font-variant-numeric: tabular-nums;
}

.live-monitor-badge-status {
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.live-monitor-badge-status.active { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #065f46; }
.live-monitor-badge-status.idle   { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }

/* ============================================================
   TOMBOL LIVE MONITOR — dengan hover effect
   ============================================================ */
.admin-btn-live {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fcd34d;
    box-shadow: 0 2px 6px rgba(245,158,11,0.15);
    transition: all 0.2s ease;
}
.admin-btn-live:hover {
    background: linear-gradient(135deg, #fde68a, #fcd34d);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245,158,11,0.35);
    border-color: #f59e0b;
}
.admin-btn-live:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(245,158,11,0.2);
}

.live-monitor-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 4px;
    animation: livePulse 1.5s infinite;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.2);
}

.live-monitor-badge {
    display: none;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
    font-weight: 800;
}

/* Dark mode */
[data-theme="dark"] .admin-btn-live {
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(217,119,6,0.18));
    color: #fcd34d;
    border-color: rgba(245,158,11,0.4);
}
[data-theme="dark"] .admin-btn-live:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.35), rgba(217,119,6,0.25));
    border-color: #f59e0b;
    box-shadow: 0 6px 16px rgba(245,158,11,0.25);
}

[data-theme="dark"] .live-monitor-row { background: rgba(30,41,59,0.6); border-color: rgba(99,102,241,0.2); }
[data-theme="dark"] .live-monitor-row.active { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.08)); border-color: rgba(52,211,153,0.5); }
[data-theme="dark"] .live-monitor-row.idle   { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.08)); border-color: rgba(245,158,11,0.4); }
[data-theme="dark"] .live-monitor-name { color: #f1f5f9; }
[data-theme="dark"] .live-monitor-progress-bar { background: rgba(2,6,23,0.6); }

/* ============================================================
   FONT SIZE TOGGLE — Floating di kanan bawah (saat ujian)
   ============================================================ */
.cbt-font-toggle {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 100;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(99,102,241,0.25);
    border-radius: 30px;
    box-shadow:
        0 12px 32px rgba(15,23,42,0.15),
        0 4px 10px rgba(15,23,42,0.08),
        0 0 0 1px rgba(255,255,255,0.5) inset;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
#utbk-cbt-app.exam-mode .cbt-font-toggle {
    display: flex;
}

.font-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #475569;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    letter-spacing: -0.3px;
    padding: 0;
}
.font-btn:hover { background: #eef2ff; color: #4338ca; }
.font-btn.active {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.35);
}
.font-btn:active { transform: scale(0.92); }

/* ============================================================
   FONT TOGGLE DI BANNER (Ganti yang Floating)
   ============================================================ */
.cbt-font-toggle.in-banner {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex-direction: row !important; /* Jadi horizontal */
    padding: 3px !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 20px !important;
    margin-left: 10px !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    display: flex !important;
    gap: 2px !important;
}

.cbt-font-toggle.in-banner .font-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: transparent !important;
}

.cbt-font-toggle.in-banner .font-btn:hover {
    background: rgba(255,255,255,0.25) !important;
}

.cbt-font-toggle.in-banner .font-btn.active {
    background: #fff !important;
    color: #4f46e5 !important;
}

/* Dark mode */
[data-theme="dark"] .cbt-font-toggle {
    background: rgba(15,23,42,0.92);
    border-color: rgba(99,102,241,0.35);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.5),
        0 0 24px rgba(99,102,241,0.15),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="dark"] .font-btn { color: #cbd5e1; }
[data-theme="dark"] .font-btn:hover { background: rgba(99,102,241,0.15); color: #a5b4fc; }

/* ── Apply font size ke konten soal ── */
#cbt-test-view {
    --exam-font-scale: 1;
}
#cbt-test-view .question-text {
    font-size: calc(1.1rem * var(--exam-font-scale)) !important;
    line-height: 1.55 !important;
}
#cbt-test-view .option-text {
    font-size: calc(1rem * var(--exam-font-scale)) !important;
    line-height: 1.55 !important;
}
#cbt-test-view .stimulus-box {
    font-size: calc(0.95rem * var(--exam-font-scale)) !important;
    line-height: 1.7 !important;
}
#cbt-test-view .indicator-text {
    font-size: calc(0.95rem * var(--exam-font-scale)) !important;
}
#cbt-test-view .bs-card-text {
    font-size: calc(0.95rem * var(--exam-font-scale)) !important;
}
#cbt-test-view .bs-opt-label {
    font-size: calc(0.92rem * var(--exam-font-scale)) !important;
}
#cbt-test-view .match-item-text {
    font-size: calc(0.9rem * var(--exam-font-scale)) !important;
}
#cbt-test-view .puzzle-premise-text,
#cbt-test-view .puzzle-response,
#cbt-test-view .puzzle-slot-text {
    font-size: calc(0.85rem * var(--exam-font-scale)) !important;
}

/* Mobile posisi */
@media (max-width: 640px) {
    .cbt-font-toggle {
        bottom: 80px;
        right: 14px;
    }
    .font-btn { width: 38px; height: 38px; font-size: 0.78rem; }
}

/* ============================================================
   MODAL USER FORM — Fix Layout & Dark Mode
   ============================================================ */
#admin-user-modal .cbt-modal {
    max-width: 460px !important;
    padding: 28px 26px 22px !important;
    text-align: left !important;
}

#admin-user-modal .cbt-modal h3 {
    text-align: center;
    margin: 0 0 6px;
    color: var(--text-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

#admin-user-modal .cbt-modal > div > p {
    text-align: center;
    margin: 0 0 22px !important;
    color: #64748b !important;
    font-size: 0.85rem !important;
}

#admin-user-modal .form-group {
    margin-bottom: 16px !important;
    display: block !important;
    width: 100% !important;
}

#admin-user-modal .form-group label {
    display: block !important;
    width: 100% !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    color: #1f2937 !important;              /* ← paksa gelap di light */
    margin-bottom: 7px !important;
    letter-spacing: 0.1px !important;
    text-align: left !important;
    float: none !important;
}

#admin-user-modal .form-group label small {
    font-weight: 500 !important;
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    display: inline !important;
}

#admin-user-modal input[type="text"],
#admin-user-modal input[type="password"],
#admin-user-modal .admin-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04) !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    float: none !important;
    margin: 0 !important;
}

#admin-user-modal input:focus,
#admin-user-modal .admin-select:focus {
    border-color: var(--primary) !important;
    background: #fbfbff !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important;
}

#admin-user-modal > .cbt-modal > div:last-child,
#admin-user-modal .cbt-modal-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
    width: 100% !important;
}

#admin-user-modal .cbt-modal-btn {
    flex: 1 !important;
    padding: 12px 18px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════
   DARK MODE — semua pakai !important biar menang
   ══════════════════════════════════════════════════ */
[data-theme="dark"] #admin-user-modal .cbt-modal h3 {
    color: #f1f5f9 !important;
}

[data-theme="dark"] #admin-user-modal .cbt-modal > div > p {
    color: #94a3b8 !important;
}

[data-theme="dark"] #admin-user-modal .form-group label {
    color: #e2e8f0 !important;              /* ← label terang */
}

[data-theme="dark"] #admin-user-modal .form-group label small {
    color: #94a3b8 !important;
}

[data-theme="dark"] #admin-user-modal input[type="text"],
[data-theme="dark"] #admin-user-modal input[type="password"],
[data-theme="dark"] #admin-user-modal .admin-select {
    background: rgba(15,23,42,0.9) !important;
    color: #f1f5f9 !important;
    border-color: rgba(99,102,241,0.35) !important;
}

[data-theme="dark"] #admin-user-modal input:focus,
[data-theme="dark"] #admin-user-modal .admin-select:focus {
    background: rgba(15,23,42,1) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.2) !important;
}

[data-theme="dark"] #admin-user-modal input::placeholder {
    color: #64748b !important;
}

/* ============================================================
   DARK MODE — MODAL LIVE MONITOR
   Override inline style header & subtitle
   ============================================================ */
#admin-live-clean-btn:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #1f2937 !important;
}
[data-theme="dark"] #admin-live-clean-btn {
    border-color: rgba(99,102,241,0.3) !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] #admin-live-clean-btn:hover {
    background: rgba(99,102,241,0.15) !important;
    border-color: #818cf8 !important;
    color: #a5b4fc !important;
}

/* ── Header modal (background putih → gelap) ── */
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal > div:first-child {
    background: linear-gradient(135deg, #1e293b 0%, #172033 100%) !important;
    border-bottom: 1px solid rgba(99,102,241,0.25) !important;
}

/* ── Judul "Siswa Sedang Ujian" ── */
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal > div:first-child h3 {
    color: #f1f5f9 !important;
}

/* ── Subtitle "0 aktif · 1 total sesi · refresh otomatis" ── */
[data-theme="dark"] #admin-live-monitor-modal #admin-live-monitor-subtitle {
    color: #94a3b8 !important;
}

/* ── Icon bulat merah: kasih glow tipis biar nyala ── */
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal > div:first-child > div:first-child > div:first-child {
    box-shadow: 0 4px 14px rgba(239,68,68,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ── Tombol close (×) ── */
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal > div:first-child button {
    color: #94a3b8 !important;
    transition: all 0.2s;
}
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal > div:first-child button:hover {
    color: #e2e8f0 !important;
    background: rgba(99,102,241,0.15);
    border-radius: 8px;
}

/* ── Body modal ── */
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal {
    background: #0f172a;
    border: 1px solid rgba(99,102,241,0.25);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.7),
        0 0 40px rgba(99,102,241,0.12);
}

[data-theme="dark"] #admin-live-monitor-modal #admin-live-monitor-body {
    background: #0f172a;
}

/* ── Override inline style spesifik (untuk header pakai inline gradient) ── */
[data-theme="dark"] #admin-live-monitor-modal .cbt-modal > div[style*="linear-gradient"] {
    background: linear-gradient(135deg, #1e293b 0%, #172033 100%) !important;
    border-bottom-color: rgba(99,102,241,0.25) !important;
}

/* ── Icon live-monitor-dot tetap menyala ── */
[data-theme="dark"] .admin-btn-live .live-monitor-dot {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.35);
}

/* ============================================================
   DARK MODE — LIVE MONITOR ROW (Detail Peserta)
   ============================================================ */

/* ── Row container: background & border lebih jelas ── */
[data-theme="dark"] .live-monitor-row {
    background: linear-gradient(135deg, rgba(30,41,59,0.85), rgba(15,23,42,0.9)) !important;
    border-color: rgba(99,102,241,0.25) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

[data-theme="dark"] .live-monitor-row.active {
    background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.1)) !important;
    border-color: rgba(52,211,153,0.55) !important;
    box-shadow: 0 4px 14px rgba(16,185,129,0.15);
}

[data-theme="dark"] .live-monitor-row.idle {
    background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(217,119,6,0.08)) !important;
    border-color: rgba(245,158,11,0.5) !important;
    box-shadow: 0 4px 14px rgba(245,158,11,0.12);
}

/* ── Nama peserta ── */
[data-theme="dark"] .live-monitor-name {
    color: #f8fafc !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ── Meta info (XII IPS, Paket, waktu) ── */
[data-theme="dark"] .live-monitor-meta {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}
[data-theme="dark"] .live-monitor-meta span {
    color: #cbd5e1 !important;
}

/* ── Peserta ID (261016-2138) — kasih chip biar rapi ── */
[data-theme="dark"] .live-monitor-meta span:last-child {
    color: #a5b4fc !important;
    background: rgba(99,102,241,0.15);
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: 'SF Mono', Menlo, Monaco, monospace;
    font-size: 0.68rem;
}

/* ── Progress bar track & fill ── */
[data-theme="dark"] .live-monitor-progress-bar {
    background: rgba(2,6,23,0.7) !important;
    border: 1px solid rgba(99,102,241,0.15);
}

[data-theme="dark"] .live-monitor-progress-fill {
    background: linear-gradient(90deg, #818cf8, #a5b4fc) !important;
    box-shadow: 0 0 8px rgba(129,140,248,0.4);
}

/* Kalau row active/idle, fill-nya tetap menyala */
[data-theme="dark"] .live-monitor-row.active .live-monitor-progress-fill {
    background: linear-gradient(90deg, #10b981, #34d399) !important;
    box-shadow: 0 0 8px rgba(52,211,153,0.5);
}
[data-theme="dark"] .live-monitor-row.idle .live-monitor-progress-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24) !important;
    box-shadow: 0 0 8px rgba(245,158,11,0.5);
}

/* ── Progress text (2/20) ── */
[data-theme="dark"] .live-monitor-progress-text {
    color: #e0e7ff !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ── Avatar peserta: glow tipis ── */
[data-theme="dark"] .live-monitor-avatar {
    background: linear-gradient(135deg, #818cf8, #6366f1) !important;
    box-shadow:
        0 4px 14px rgba(99,102,241,0.35),
        inset 0 1px 0 rgba(255,255,255,0.15);
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* ── Badge IDLE / AKTIF ── */
[data-theme="dark"] .live-monitor-badge-status.active {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
    font-weight: 900;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .live-monitor-badge-status.idle {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.4);
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* ── Info icon di meta: beri sedikit ruang ── */
[data-theme="dark"] .live-monitor-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Mobile: meta wrap biar rapi ── */
@media (max-width: 640px) {
    [data-theme="dark"] .live-monitor-meta {
        font-size: 0.7rem;
        gap: 6px;
    }
    [data-theme="dark"] .live-monitor-meta span:last-child {
        font-size: 0.62rem;
        padding: 1px 6px;
    }
}

/* ============================================================
   IMAGE RESPONSIVE — Gambar di Soal (Stimulus, Pertanyaan, Opsi)
   Cegah gambar overflow dari container
   ============================================================ */

/* Semua gambar di test view */
#cbt-test-view img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 10px;
    margin: 10px auto;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Gambar di dalam stimulus box */
#cbt-test-view .stimulus-box img {
    max-width: 100% !important;
    height: auto !important;
    margin: 12px auto;
    border-radius: 10px;
}

/* Gambar di pertanyaan */
#cbt-test-view .question-text img {
    max-width: 100% !important;
    height: auto !important;
    margin: 12px auto;
}

/* Gambar di opsi jawaban */
#cbt-test-view .option-text img {
    max-width: 100% !important;
    height: auto !important;
    margin: 8px auto;
    border-radius: 8px;
}

/* Gambar di BS (Benar-Salah) */
#cbt-test-view .bs-card-text img {
    max-width: 100% !important;
    height: auto !important;
    margin: 8px auto;
}

/* Gambar di Matching (premise/response) */
#cbt-test-view .match-item-text img,
#cbt-test-view .puzzle-premise-text img,
#cbt-test-view .puzzle-response-text img {
    max-width: 100% !important;
    height: auto !important;
    margin: 6px 0;
    border-radius: 6px;
}

/* Overlay teks di atas gambar (kalau ada) */
#cbt-test-view img[alt] {
    line-height: 1.5;
}

/* ── Mobile: gambar lebih kecil padding ── */
@media (max-width: 640px) {
    #cbt-test-view img {
        margin: 8px auto;
        border-radius: 8px;
    }
    #cbt-test-view .stimulus-box img,
    #cbt-test-view .question-text img {
        margin: 8px auto;
    }
}

/* ── Dark mode: gambar tetap terang, tapi beri border tipis ── */
[data-theme="dark"] #cbt-test-view img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(99, 102, 241, 0.15);
}

/* ============================================================
   IMAGE RESPONSIVE — ADMIN PANEL (Preview, Editor, Form)
   Cegah gambar overflow di semua tempat admin
   ============================================================ */

/* ── 1. Preview Soal Modal ── */
#admin-preview-modal .cbt-modal img,
#admin-preview-body img,
.admin-preview-stem img,
.admin-preview-q img,
.admin-preview-opt img,
.admin-preview-explanation img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 10px;
    margin: 10px auto;
    object-fit: contain;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

/* ── 2. Editor Content (WYSIWYG di form edit) ── */
.cbt-editor-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 8px auto;
    border-radius: 8px;
    object-fit: contain;
}

/* ── 3. Form Soal Modal ── */
#admin-form-modal img,
#admin-form-modal textarea img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── 4. Form Input — gambar di dalam textarea (preview kecil) ── */
#admin-form-modal .cbt-editor img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── 5. Modal Code Import (kalau ada preview gambar) ── */
#admin-code-import-modal img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── 6. Modal Import Excel ── */
#admin-import-modal img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── 7. Modal Bulk Edit ── */
#admin-bulk-edit-modal img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── 8. Preview body: kasih padding supaya gambar tidak mepet ── */
#admin-preview-body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

/* Gambar di dalam preview body: max-width sesuai container */
#admin-preview-body > * {
    max-width: 100%;
}

/* ── 9. Kalau preview ada gambar besar, beri tinggi maksimal ── */
#admin-preview-modal img {
    max-height: 480px !important;
    width: auto !important;
    margin: 10px auto !important;
}

/* ── 10. Stimulus & q di preview: cegah overflow dari kata panjang ── */
.admin-preview-stem,
.admin-preview-q,
.admin-preview-opt {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ── 11. Dark mode: beri border tipis ── */
[data-theme="dark"] #admin-preview-modal img,
[data-theme="dark"] .cbt-editor-content img {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.15);
}

/* ── 12. Mobile: sesuaikan ── */
@media (max-width: 640px) {
    #admin-preview-modal img {
        max-height: 320px !important;
        margin: 8px auto !important;
        border-radius: 8px;
    }
    .cbt-editor-content img {
        margin: 6px auto;
        border-radius: 6px;
    }
}

/* Fix Selection & Placeholder di Dark Mode */
[data-theme="dark"] input::selection,
[data-theme="dark"] textarea::selection {
    background: rgba(99,102,241,0.4) !important;
    color: #fff !important;
}
[data-theme="dark"] #admin-bulk-edit-modal input {
    background: rgba(15,23,42,0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99,102,241,0.3) !important;
}
[data-theme="dark"] #admin-bulk-edit-modal input::placeholder {
    color: #64748b !important;
}

/* =========================================
   FIX STYLE INPUT BULK EDIT (BALANCE)
   ========================================= */
#bulk-edit-value {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1.5px solid var(--border-color) !important;
    border-radius: 11px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 0.94rem !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    transition: 0.2s !important;
    box-sizing: border-box !important;
}

#bulk-edit-value:focus {
    outline: none !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px var(--primary-light) !important;
}

/* --- Penyesuaian Dark Mode --- */
[data-theme="dark"] #bulk-edit-value {
    background: rgba(15, 23, 42, 0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] #bulk-edit-value:focus {
    background: rgba(15, 23, 42, 1) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] #bulk-edit-value::placeholder {
    color: #64748b !important;
    font-weight: 500 !important;
}

.nav-box.flagged {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #fcd34d !important;
    position: relative;
}
.nav-box.flagged::after {
    content: '🚩';
    position: absolute;
    top: -6px; right: -6px;
    font-size: 0.7rem;
}

@media print {
    /* Sembunyikan semuanya */
    body * { visibility: hidden; }
    
    /* Hanya tampilkan score-board */
    #cbt-result-view, #cbt-result-view * { visibility: visible; }
    
    /* Posisikan score-board di atas kertas */
    #cbt-result-view {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none !important;
        border: none !important;
    }

    /* Paksa warna putih/terang untuk hemat tinta */
    #cbt-result-view { background: #fff !important; color: #000 !important; }
    .score-ring-center * { color: #000 !important; }
    .score-board h2, .score-name { color: #000 !important; }
    .btn-row, .leaderboard-section, .badges-section { display: none !important; }
    .score-message { background: #f3f4f6 !important; color: #000 !important; }
}

/* ============================================================
   FIX FOOTER 3 TOMBOL (Prev, Flag, Next)
   ============================================================ */
.cbt-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding-top: 20px !important;
}

.cbt-footer .nav-btn-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 1 1 100% !important;
    gap: 8px !important;
}

.cbt-footer .nav-btn-group .btn-cbt {
    flex: 1 !important; /* Bagi rata 3 kolom */
    padding: 12px 8px !important;
    font-size: 0.95rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
}

#btn-submit-main {
    flex: 1 1 100% !important;
    margin-top: 0 !important;
}

@media (max-width: 480px) {
    .cbt-footer .nav-btn-group .btn-cbt {
        font-size: 0.85rem !important;
        padding: 10px 5px !important;
    }
}

/* ============================================================
   POSISI HEADER HP (BULAN & FONT BERDAMPINGAN)
   ============================================================ */
@media (max-width: 768px) {
    .cbt-header {
        position: relative !important;
    }

    /* 1. Ikon Bulan (Paling Kanan) */
    .theme-toggle.mobile-header-pos {
        position: absolute !important;
        top: 12px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
        background: rgba(99,102,241,0.1) !important;
        border: 1.5px solid rgba(99,102,241,0.3) !important;
        color: var(--primary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
        z-index: 50 !important;
        padding: 0 !important;
    }
    [data-theme="dark"] .theme-toggle.mobile-header-pos {
        background: rgba(99,102,241,0.2) !important;
        color: #a5b4fc !important;
    }
    .theme-toggle.mobile-header-pos .theme-icon {
        width: 15px !important;
        height: 15px !important;
    }

    /* 2. Font Size (Sebelah Kiri Bulan) */
    .cbt-font-toggle.mobile-header-pos {
        position: absolute !important;
        top: 12px !important;
        right: 56px !important; /* 14px (bulan) + 34px (lebar bulan) + 8px (jarak) */
        left: auto !important;
        bottom: auto !important;
        display: inline-flex !important;
        flex-direction: row !important;
        margin: 0 !important;
        background: rgba(99,102,241,0.1) !important;
        border: 1.5px solid rgba(99,102,241,0.3) !important;
        border-radius: 10px !important;
        padding: 2px !important;
        box-shadow: none !important;
        height: 34px !important;
        align-items: center !important;
        z-index: 50 !important;
    }
    [data-theme="dark"] .cbt-font-toggle.mobile-header-pos {
        background: rgba(99,102,241,0.2) !important;
        border-color: rgba(99,102,241,0.4) !important;
    }
    
    /* Styling Tombol A-, A, A+ */
    .cbt-font-toggle.mobile-header-pos .font-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.7rem !important;
        color: var(--text-muted) !important;
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }
    [data-theme="dark"] .cbt-font-toggle.mobile-header-pos .font-btn {
        color: #a5b4fc !important;
    }
    .cbt-font-toggle.mobile-header-pos .font-btn.active {
        background: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }

    /* 3. Biar Teks Nama/Kelas Gak Ketutupan Tombol */
    .student-details {
        padding-right: 140px !important; /* Beri ruang kosong di kanan */
    }
}

/* ============================================================
   MASTER CLEANUP: HEADER, FOOTER, & TOGGLES
   ============================================================ */

/* ---------- 1. ADMIN HERO (Mobile) ---------- */
@media (max-width: 768px) {
    .admin-hero { padding: 20px; flex-direction: column; align-items: stretch; gap: 18px; }
    .admin-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 2 kolom sejajar */
        gap: 8px;
    }
    .admin-hero-btn { padding: 12px 10px; font-size: 0.8rem; }
    /* Tombol "Ke Aplikasi" full width di baris bawah */
    .admin-hero-btn:last-child { grid-column: 2 / -1; }
}

/* ---------- 2. FOOTER (Prev, Ragu, Next, Submit) ---------- */
.cbt-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding-top: 20px !important;
    margin-top: 35px !important;
    border-top: 1px solid var(--border-color) !important;
}

.cbt-footer .nav-btn-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex: 1 1 100% !important;
    gap: 8px !important;
}

.cbt-footer .nav-btn-group .btn-cbt {
    flex: 1 !important;
    padding: 12px 8px !important;
    font-size: 0.95rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#btn-submit-main {
    flex: 1 1 100% !important;
    margin-top: 0 !important;
}

@media (max-width: 480px) {
    .cbt-footer .nav-btn-group .btn-cbt {
        font-size: 0.85rem !important;
        padding: 10px 5px !important;
    }
}

/* ---------- 3. HEADER & BANNER UJIAN (Mobile) ---------- */
@media (max-width: 768px) {
    /* Banner Biru */
    .exam-banner {
        flex-wrap: wrap !important;
        padding: 12px 16px !important;
        gap: 10px !important;
    }
    .exam-banner-text { flex: 1 1 calc(100% - 55px) !important; }
    .exam-banner-text p {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
    }

    /* Header Siswa */
    .cbt-header {
        position: relative !important;
        flex-direction: column !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .student-info { width: 100% !important; gap: 10px !important; }
    .student-details { padding-right: 140px !important; /* Ruang buat tombol */ }

    /* Tombol Timer, Soal, Top 5 */
    .header-actions {
        display: flex !important;
        width: 100% !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }
    .header-actions > * {
        flex: 1 !important;
        justify-content: center !important;
        padding: 8px 6px !important;
        font-size: 0.75rem !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
    }

    /* Judul Soal & Badge */
    .question-header {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .question-title-wrap { gap: 8px !important; }
}

/* ---------- 4. THEME & FONT TOGGLE (Berdampingan di Header) ---------- */
@media (max-width: 768px) {
    /* Ikon Bulan */
    .theme-toggle.mobile-header-pos {
        position: absolute !important;
        top: 12px !important; right: 14px !important;
        left: auto !important; bottom: auto !important;
        width: 34px !important; height: 34px !important;
        border-radius: 10px !important;
        background: rgba(99,102,241,0.1) !important;
        border: 1.5px solid rgba(99,102,241,0.3) !important;
        color: var(--primary) !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
        box-shadow: none !important; z-index: 50 !important; padding: 0 !important;
    }
    [data-theme="dark"] .theme-toggle.mobile-header-pos {
        background: rgba(99,102,241,0.2) !important;
        color: #a5b4fc !important;
    }

    /* Font Size (A-, A, A+) */
    .cbt-font-toggle.mobile-header-pos {
        position: absolute !important;
        top: 12px !important; right: 56px !important;
        left: auto !important; bottom: auto !important;
        display: inline-flex !important; flex-direction: row !important;
        margin: 0 !important; height: 34px !important;
        background: rgba(99,102,241,0.1) !important;
        border: 1.5px solid rgba(99,102,241,0.3) !important;
        border-radius: 10px !important; padding: 2px !important;
        box-shadow: none !important; align-items: center !important; z-index: 50 !important;
    }
    [data-theme="dark"] .cbt-font-toggle.mobile-header-pos {
        background: rgba(99,102,241,0.2) !important;
        border-color: rgba(99,102,241,0.4) !important;
    }
    .cbt-font-toggle.mobile-header-pos .font-btn {
        width: 26px !important; height: 26px !important; font-size: 0.7rem !important;
        color: var(--text-muted) !important; background: transparent !important;
        border: none !important; border-radius: 8px !important;
        display: flex !important; align-items: center !important; justify-content: center !important;
    }
    [data-theme="dark"] .cbt-font-toggle.mobile-header-pos .font-btn { color: #a5b4fc !important; }
    .cbt-font-toggle.mobile-header-pos .font-btn.active {
        background: var(--primary) !important; color: #fff !important;
    }
}

/* ============================================================
   FIX: TOMBOL NEXT DISABLED & SUBMIT RATA TENGAH
   ============================================================ */

/* 1. Bikin tombol Next yang mati jadi abu-abu */
.cbt-footer .btn-nav:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: rgba(255,255,255,0.1) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
    transform: none !important;
}

[data-theme="dark"] .cbt-footer .btn-nav:disabled {
    background: rgba(30, 41, 59, 0.5) !important;
    color: #64748b !important;
    border-color: rgba(99,102,241,0.1) !important;
}

/* 2. Teks Selesai Ujian Paksa di Tengah */
#btn-submit-main {
    flex: 1 1 100% !important;
    margin-top: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* ============================================================
   FIX BUG: Sembunyikan Font Toggle di Luar Mode Ujian
   ============================================================ */
#utbk-cbt-app:not(.exam-mode) .cbt-font-toggle {
    display: none !important;
}

/* ============================================================
   PETA SOAL: BEDAKAN JELAS YANG SUDAH DIJAWAB
   ============================================================ */
.nav-box {
    position: relative !important;
}

.nav-box.answered { 
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important; 
    color: #ffffff !important; 
    border-color: #4338ca !important; 
    font-weight: 800 !important;
    box-shadow: 0 4px 10px rgba(99,102,241,0.3) !important;
}

[data-theme="dark"] .nav-box.answered {
    background: linear-gradient(135deg, #818cf8, #6366f1) !important;
    color: #ffffff !important;
    border-color: #a5b4fc !important;
    box-shadow: 0 4px 10px rgba(99,102,241,0.2) !important;
}

.nav-box.answered::after {
    content: '✓';
    position: absolute;
    top: 3px;
    right: 6px;
    font-size: 0.65rem;
    color: #ffffff;
    font-weight: 900;
    opacity: 0.9;
}

/* Jika soal dijawab DAN ditandai ragu (🚩) */
.nav-box.flagged.answered { 
    background: #fef3c7 !important; 
    color: #92400e !important; 
    border-color: #fcd34d !important; 
    box-shadow: none !important;
}
[data-theme="dark"] .nav-box.flagged.answered {
    background: #78350f !important;
    color: #fde68a !important;
    border-color: #f59e0b !important;
}
.nav-box.flagged.answered::after {
    content: '🚩';
    top: -8px; right: -8px;
    font-size: 0.8rem;
    color: inherit;
}

/* ============================================================
   FIX DRAG & DROP DI HP (TOUCH ACTION)
   ============================================================ */

/* 1. Cegah browser nge-scroll saat kartu di-drag */
.puzzle-response,
.puzzle-slot {
    touch-action: none !important; 
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* 2. Pastikan tombol clear (×) di dalam slot tetap bisa diklik normal */
.puzzle-slot-clear {
    touch-action: manipulation !important;
}

/* 3. Opsional: Biar efek visual saat di-drag di HP lebih nendang */
.puzzle-slot.slot-dragging {
    opacity: 0.4 !important;
    transform: scale(0.95) !important;
}
.puzzle-response.dragging {
    opacity: 0.4 !important;
    transform: scale(0.95) !important;
}

/* ============================================================
   DESAIN BARU PETA SOAL (HEADER & KODE TIPE)
   ============================================================ */

/* 1. Header Modal (Judul + Tombol Silang) */
.nav-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.nav-modal-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-dark);
}

[data-theme="dark"] .nav-modal-header { border-bottom-color: rgba(99,102,241,0.2); }
[data-theme="dark"] .nav-modal-header h3 { color: var(--cbt-text-strong); }

/* Tombol Silang (X) */
.nav-modal-close {
    background: transparent;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}
.nav-modal-close:hover {
    color: #dc2626;
    transform: scale(1.15) rotate(90deg);
}

/* 2. Kotak Nomor Soal (Dua Baris) */
.nav-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 4px !important; /* Padding vertikal dikurangi */
    height: 56px !important; /* Tinggi fix biar seragam */
    gap: 2px !important;
    border-radius: 10px !important;
}

/* Teks Angka */
.nav-box .nav-num {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

/* Teks Kode Tipe */
.nav-box .nav-type {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    line-height: 1;
}

/* 3. Sesuaikan warna teks saat dijawab/ragu */
.nav-box.answered .nav-type,
.nav-box.flagged .nav-type {
    opacity: 0.9;
}

/* 4. Sesuaikan ukuran di layar HP (Biar gak kepotong) */
@media (max-width: 480px) {
    .nav-box {
        height: 50px !important;
        padding: 6px 2px !important;
    }
    .nav-box .nav-num { font-size: 0.9rem; }
    .nav-box .nav-type { font-size: 0.52rem; }
}

/* ============================================================
   STYLING KHUSUS MODAL ANALISIS BUTIR SOAL
   ============================================================ */
/* Variabel Warna Khusus Modal */
.item-analysis-modal {
    --ia-bg: #ffffff;
    --ia-text: #1e293b;
    --ia-border: #e2e8f0;
    --ia-header-bg: #f8fafc;
    --ia-table-striped: #f8fafc;
    --ia-table-header: #4f46e5;
}

[data-theme="dark"] .item-analysis-modal {
    --ia-bg: #0f172a;
    --ia-text: #e2e8f0;
    --ia-border: #334155;
    --ia-header-bg: #1e293b;
    --ia-table-striped: #1e293b;
    --ia-table-header: #3730a3;
}

/* Header Modal */
.item-analysis-modal .ia-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ia-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ia-header-bg);
    border-radius: 20px 20px 0 0;
}
.item-analysis-modal .ia-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ia-text);
}
.item-analysis-modal .ia-header p {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--cbt-text-muted);
}
.item-analysis-modal .ia-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--cbt-text-muted);
    transition: 0.2s;
}
.item-analysis-modal .ia-close:hover { color: #ef4444; }

/* Filter Dropdown */
.item-analysis-modal .ia-filter-wrap {
    padding: 16px 24px;
    background: var(--ia-bg);
    border-bottom: 1px solid var(--ia-border);
}
.item-analysis-modal .ia-filter-wrap select {
    background-color: var(--ia-bg) !important;
    color: var(--ia-text) !important;
    border-color: var(--ia-border) !important;
}

/* Body Modal */
.item-analysis-modal .ia-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--ia-bg);
    border-radius: 0 0 20px 20px;
}

/* Stats Cards */
.item-analysis-modal .ia-stats-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.item-analysis-modal .ia-stat-card {
    background: var(--ia-bg);
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid var(--ia-border);
    flex: 1;
    min-width: 150px;
}
.item-analysis-modal .ia-stat-label {
    font-size: 0.7rem;
    color: var(--cbt-text-muted);
    text-transform: uppercase;
    font-weight: 700;
}
.item-analysis-modal .ia-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ia-text);
}
.item-analysis-modal .ia-stat-info {
    background: rgba(99,102,241,0.1);
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(99,102,241,0.2);
    flex: 2;
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--cbt-text-muted);
    line-height: 1.5;
}

/* Tabel */
.item-analysis-modal .ia-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--ia-border);
}
.item-analysis-modal .ia-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--ia-bg);
    color: var(--ia-text);
}
.item-analysis-modal .ia-table thead {
    background: var(--ia-table-header);
    color: #fff;
}
.item-analysis-modal .ia-table th {
    padding: 12px 10px;
    font-weight: 600;
}
.item-analysis-modal .ia-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--ia-border);
}
.item-analysis-modal .ia-table tbody tr:hover {
    background: rgba(99,102,241,0.05) !important;
}

/* Badges */
.item-analysis-modal .ia-type-badge {
    font-size: 0.7rem;
    background: rgba(99,102,241,0.15);
    color: #818cf8;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 800;
}
.item-analysis-modal .ia-badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 800;
}
.item-analysis-modal .ia-badge-mudah { background: #d1fae5; color: #065f46; }
.item-analysis-modal .ia-badge-sedang { background: #fef3c7; color: #92400e; }
.item-analysis-modal .ia-badge-sukar { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .item-analysis-modal .ia-badge-mudah { background: rgba(16,185,129,0.2); color: #6ee7b7; }
[data-theme="dark"] .item-analysis-modal .ia-badge-sedang { background: rgba(245,158,11,0.2); color: #fde68a; }
[data-theme="dark"] .item-analysis-modal .ia-badge-sukar { background: rgba(239,68,68,0.2); color: #fca5a5; }

/* ============================================================
   CUSTOM PROMPT MODAL — FIX DARK MODE & INPUT WIDTH
   ============================================================ */
.custom-prompt-modal {
    max-width: 400px !important; /* Biar gak terlalu lebar */
    text-align: center !important;
    padding: 30px 24px 24px !important;
    box-sizing: border-box !important;
}

/* Ikon */
.custom-prompt-modal .prompt-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 6px 16px rgba(99,102,241,0.2);
}
[data-theme="dark"] .custom-prompt-modal .prompt-icon-wrap {
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15));
    color: #a5b4fc;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ✅ JUDUL & PESAN (PAKSA WARNA) */
.custom-prompt-modal .prompt-title {
    margin: 0 0 8px !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #1f2937 !important; /* Gelap untuk mode terang */
}
[data-theme="dark"] .custom-prompt-modal .prompt-title {
    color: #ffffff !important; /* Terang mutlak untuk mode gelap */
}

.custom-prompt-modal .prompt-message {
    margin: 0 0 20px !important;
    font-size: 0.9rem !important;
    color: #64748b !important;
    line-height: 1.6 !important;
}
[data-theme="dark"] .custom-prompt-modal .prompt-message {
    color: #94a3b8 !important;
}

/* ✅ KOTAK INPUT TEXT (Bukan Dropdown) */
.custom-prompt-modal .prompt-input {
    width: 100% !important;
    box-sizing: border-box !important; /* Wajib biar gak meluber */
    padding: 14px 16px !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
}

.custom-prompt-modal .prompt-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.15) !important;
}

[data-theme="dark"] .custom-prompt-modal .prompt-input {
    background: rgba(2, 6, 23, 0.6) !important;
    border-color: rgba(99,102,241,0.3) !important;
    color: #ffffff !important; /* Teks putih */
}
[data-theme="dark"] .custom-prompt-modal .prompt-input:focus {
    background: rgba(2, 6, 23, 0.9) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.25) !important;
}

/* Tombol */
.custom-prompt-modal .cbt-modal-btn {
    padding: 12px 18px !important;
    font-size: 0.92rem !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* ============================================================
   FIX Z-INDEX & MODAL BLOCKING
   ============================================================ */
/* Naikkan z-index modal konfirmasi biar di atas segalanya */
.cbt-modal-overlay {
    z-index: 2147483647 !important; 
}

/* Matikan interaksi menu aksi kalau lagi ketutup */
.admin-actions-menu {
    pointer-events: none !important; 
}
.admin-actions-menu.active {
    pointer-events: auto !important;
}

/* Fix editor di modal broadcast */
#admin-broadcast-modal .cbt-editor-content {
    min-height: 100px !important;
    max-height: 200px !important;
}

/* ============================================================
   FIX: MODAL BROADCAST — DARK MODE & SCROLL (CHROMEBOOK)
   ============================================================ */

/* 1. Fix Modal Kepotong (Scrollable & Max Height) */
#admin-broadcast-modal .cbt-modal {
    max-height: 90vh !important; /* Maksimal 90% tinggi layar */
    overflow-y: auto !important; /* Kasih scrollbar kalau kontennya panjang */
    padding-bottom: 24px !important;
}

/* Sembunyikan scrollbar bawaan biar tetep estetik (Opsional) */
#admin-broadcast-modal .cbt-modal::-webkit-scrollbar {
    width: 6px;
}
#admin-broadcast-modal .cbt-modal::-webkit-scrollbar-thumb {
    background: rgba(99,102,241,0.3);
    border-radius: 6px;
}

/* 2. Fix Editor Rich Text di Dark Mode */
[data-theme="dark"] #admin-broadcast-modal .cbt-editor {
    background: rgba(2, 6, 23, 0.5) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] #admin-broadcast-modal .cbt-editor-toolbar {
    background: rgba(30, 41, 59, 0.8) !important;
    border-bottom-color: rgba(99, 102, 241, 0.2) !important;
}

[data-theme="dark"] #admin-broadcast-modal .cbt-editor-content {
    color: #e2e8f0 !important;
    background: transparent !important;
}

/* 3. Fix Dropdown Tipe Pesan di Dark Mode */
[data-theme="dark"] #admin-broadcast-modal select#broadcast-type {
    background-color: rgba(15, 23, 42, 0.9) !important;
    color: #e2e8f0 !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

/* 4. Fix Kotak Preview "Sedang Mengedit" di Dark Mode */
[data-theme="dark"] #broadcast-active-preview {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.1)) !important;
    border-left-color: #f59e0b !important;
    color: #fcd34d !important;
}

/* Kotak dalam preview biar lebih gelap dikit */
[data-theme="dark"] #broadcast-active-preview div[style*="background:rgba(255,255,255,0.5)"] {
    background: rgba(0, 0, 0, 0.2) !important;
    color: #e2e8f0 !important;
}