/* =========================================================
   SPHIRA LMS — GOOGLE DESIGN SYSTEM v12.0
   Tema: Google Colors — Blue, Red, Yellow, Green, White
   Palet Utama Google:
     Blue   #4285F4   (Primary)
     Red    #EA4335   (Danger / Alert)
     Yellow #FBBC05   (Warning / Accent)
     Green  #34A853   (Success)
     White  #FFFFFF   (Background)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Inter:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1. DESIGN TOKENS — GOOGLE COLOR PALETTE
   ============================================================ */
:root {
    /* --- Google Brand Colors --- */
    --google-blue:        #4285F4;
    --google-blue-dark:   #1A73E8;
    --google-blue-darker: #1557B0;
    --google-blue-light:  #E8F0FE;
    --google-blue-mid:    #669DF6;

    --google-red:         #EA4335;
    --google-red-dark:    #C5221F;
    --google-red-light:   #FCE8E6;

    --google-yellow:      #FBBC05;
    --google-yellow-dark: #E37400;
    --google-yellow-light:#FEF7E0;

    --google-green:       #34A853;
    --google-green-dark:  #1E8E3E;
    --google-green-light: #E6F4EA;

    --google-white:       #FFFFFF;
    --google-gray-50:     #F8F9FA;
    --google-gray-100:    #F1F3F4;
    --google-gray-200:    #E8EAED;
    --google-gray-400:    #BDC1C6;
    --google-gray-600:    #80868B;
    --google-gray-900:    #202124;

    /* --- Semantic Mapping --- */
    --color-primary:        var(--google-blue);
    --color-primary-dark:   var(--google-blue-dark);
    --color-primary-light:  var(--google-blue-light);
    --color-primary-mid:    var(--google-blue-mid);

    --color-accent:         var(--google-yellow);
    --color-accent-dark:    var(--google-yellow-dark);

    --color-success:        var(--google-green);
    --color-warning:        var(--google-yellow);
    --color-danger:         var(--google-red);
    --color-danger-light:   var(--google-red-light);
    --color-info:           var(--google-blue);

    /* --- Backgrounds --- */
    --bg-app:       #F1F3F4;
    --bg-card:      #FFFFFF;
    --bg-sidebar:   #1A73E8;        /* Google Blue sebagai sidebar */
    --bg-sidebar-hover:  rgba(255,255,255,0.12);
    --bg-sidebar-active: rgba(255,255,255,0.18);

    /* --- Text --- */
    --text-primary:   #202124;
    --text-secondary: #5F6368;
    --text-tertiary:  #80868B;
    --text-sidebar:   rgba(255,255,255,0.82);
    --text-sidebar-active: #FFFFFF;

    /* --- Borders --- */
    --border-soft:  rgba(232,234,237,0.8);
    --border-main:  #E8EAED;
    --border-focus: var(--google-blue);

    /* --- Shadows --- */
    --shadow-xs:    0 1px 2px rgba(60,64,67,0.06);
    --shadow-sm:    0 1px 3px rgba(60,64,67,0.08), 0 1px 2px rgba(60,64,67,0.05);
    --shadow-md:    0 4px 8px rgba(60,64,67,0.1), 0 2px 4px rgba(60,64,67,0.06);
    --shadow-lg:    0 8px 24px rgba(60,64,67,0.12), 0 4px 8px rgba(60,64,67,0.08);
    --shadow-xl:    0 16px 40px rgba(60,64,67,0.15);
    --shadow-primary:    0 4px 12px rgba(66,133,244,0.3);
    --shadow-primary-lg: 0 8px 24px rgba(66,133,244,0.4);

    /* --- Sidebar Dimensions --- */
    --sidebar-w-full:  260px;
    --sidebar-w-mini:  68px;
    --sidebar-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Radius --- */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-2xl: 28px;

    /* --- Transitions --- */
    --transition-fast:   all 0.15s ease;
    --transition-normal: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', 'Google Sans', -apple-system, sans-serif;
    background: var(--bg-app);
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}

/* ============================================================
   3. SCROLLBAR — Google Material Style
   ============================================================ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 10px; }
::-webkit-scrollbar-thumb {
    background: rgba(95,99,104,0.35);
    border-radius: 10px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(95,99,104,0.6); }
.custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   4. LAYOUT — SIDEBAR + MAIN CONTENT
   ============================================================ */

#mainSidebar {
    width: var(--sidebar-w-full);
    /* Sidebar gradient: Google Blue ke darker blue */
    background: linear-gradient(180deg, #1A73E8 0%, #1557B0 60%, #0D47A1 100%);
    display: flex;
    flex-direction: column;
    padding: 20px 12px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    transition: var(--sidebar-transition);
    overflow: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
    border-right: none;
    box-shadow: 2px 0 16px rgba(26,115,232,0.25);
}

/* Google-colored accent strip di atas sidebar */
#mainSidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #EA4335 0%, #FBBC05 33%, #34A853 66%, #4285F4 100%);
    z-index: 10;
}

/* Google-colored radial glow di atas */
#mainSidebar::after {
    content: '';
    position: absolute;
    top: 4px; left: 0; right: 0;
    height: 100px;
    background: radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

#mainSidebar::-webkit-scrollbar { width: 3px; }
#mainSidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }

/* --- SIDEBAR MINI (COLLAPSED) --- */
@media (min-width: 768px) {
    #mainSidebar.sidebar-collapsed {
        width: var(--sidebar-w-mini);
        padding: 20px 8px;
    }
    #mainSidebar.sidebar-collapsed .sidebar-logo-text,
    #mainSidebar.sidebar-collapsed .sidebar-user-name,
    #mainSidebar.sidebar-collapsed .sidebar-user-role,
    #mainSidebar.sidebar-collapsed .sidebar-class-badge,
    #mainSidebar.sidebar-collapsed .nav-label,
    #mainSidebar.sidebar-collapsed .nav-group-header,
    #mainSidebar.sidebar-collapsed details > summary > span:not(.sidebar-chevron),
    #mainSidebar.sidebar-collapsed details > div {
        opacity: 0; width: 0; overflow: hidden; pointer-events: none;
    }
    #mainSidebar.sidebar-collapsed .nav-item {
        justify-content: center;
        padding: 12px 8px !important;
    }
    #mainSidebar.sidebar-collapsed .nav-item svg { margin: 0; }
    #mainSidebar.sidebar-collapsed #sidebarCollapseBtn svg { transform: rotate(180deg); }
}

/* Toggle button */
#sidebarCollapseBtn {
    position: absolute;
    top: 20px; right: 12px;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.7);
    transition: var(--transition-normal);
    z-index: 10; flex-shrink: 0;
}
#sidebarCollapseBtn:hover { background: rgba(255,255,255,0.22); color: white; }
#sidebarCollapseBtn svg { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }

/* Main content margin */
#mainSidebar.sidebar-collapsed ~ #mainContent,
#mainSidebar.sidebar-collapsed ~ main,
#mainSidebar.sidebar-collapsed ~ .main-content-area {
    margin-left: var(--sidebar-w-mini) !important;
}

.main-content-area {
    margin-left: var(--sidebar-w-full);
    transition: margin-left var(--sidebar-transition);
    background: var(--bg-app);
    height: 100vh;
    overflow-y: auto;
}

/* ============================================================
   5. SIDEBAR LOGO & USER CARD
   ============================================================ */
.sidebar-logo-wrap {
    position: relative; z-index: 1;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 8px; /* spacing dari rainbow strip */
}

.sidebar-logo-img {
    width: 100%; max-width: 140px; height: 52px;
    object-fit: contain;
    filter: brightness(1.1) drop-shadow(0 2px 8px rgba(0,0,0,0.25));
}

.sidebar-user-card {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    padding: 12px 14px; margin-bottom: 20px;
    backdrop-filter: blur(8px);
    transition: var(--transition-normal);
}
.sidebar-user-card:hover { background: rgba(255,255,255,0.15); }

.sidebar-user-name {
    font-size: 13px; font-weight: 700; color: white;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #A8C7FA;  /* Light blue tint */
    margin-top: 2px;
}

.sidebar-class-badge {
    display: inline-block; margin-top: 6px;
    padding: 3px 10px;
    background: rgba(255,255,255,0.12);
    border-radius: 20px;
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,0.85);
}

/* ============================================================
   6. NAVIGASI MENU
   ============================================================ */
#sidebarNav {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; position: relative; z-index: 1;
}

.nav-group-header {
    padding: 14px 12px 6px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.45); white-space: nowrap;
}

.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px !important;
    border-radius: var(--radius-md) !important;
    color: rgba(255,255,255,0.82) !important;
    font-size: 13px !important; font-weight: 500 !important;
    cursor: pointer;
    border: 1px solid transparent !important;
    transition: var(--transition-normal);
    white-space: nowrap; overflow: hidden;
    min-height: 42px; margin-bottom: 2px;
    background: transparent !important;
    position: relative; text-overflow: ellipsis;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.65; transition: var(--transition-normal); }
.nav-item:hover {
    background: rgba(255,255,255,0.12) !important;
    color: white !important; transform: translateX(3px);
    border-color: rgba(255,255,255,0.08) !important;
}
.nav-item:hover svg { opacity: 1; }
.nav-item.active {
    background: rgba(255,255,255,0.18) !important;
    color: white !important; font-weight: 600 !important;
    border-color: rgba(255,255,255,0.15) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); transform: none;
}
.nav-item.active::before {
    content: '';
    position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 3px;
    /* Rainbow accent bar mengikuti Google colors secara sequential */
    background: #FBBC05;
    border-radius: 0 3px 3px 0; opacity: 1;
}
.nav-item.active svg { opacity: 1; }

/* Accordion sidebar */
details > summary {
    list-style: none; outline: none; cursor: pointer;
    padding: 8px 12px 6px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: space-between;
    user-select: none; transition: var(--transition-fast);
    border-radius: var(--radius-sm); white-space: nowrap;
}
details > summary::-webkit-details-marker { display: none; }
details > summary:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); }
details > div {
    border-left: 1px solid rgba(255,255,255,0.1);
    margin-left: 16px; padding-left: 8px;
}

/* Logout button */
.sidebar-logout-btn {
    position: relative; z-index: 1; width: 100%;
    margin-top: auto; padding: 11px 16px;
    background: rgba(234,67,53,0.12);
    border: 1px solid rgba(234,67,53,0.25);
    color: rgba(255,255,255,0.6);
    font-size: 12px; font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition-normal);
    display: flex; align-items: center; justify-content: center;
    gap: 8px; letter-spacing: 0.05em; flex-shrink: 0;
}
.sidebar-logout-btn:hover {
    background: rgba(234,67,53,0.22);
    color: #FFADA6;
    border-color: rgba(234,67,53,0.4);
}

/* ============================================================
   7. BUTTONS — GOOGLE STYLE
   ============================================================ */
button { transition: var(--transition-normal); font-family: inherit; }
button:active { transform: scale(0.96) translateY(1px) !important; }

/* Primary: Google Blue */
.btn-primary {
    background: linear-gradient(135deg, #4285F4 0%, #1A73E8 100%) !important;
    color: #FFFFFF !important;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border: none !important; cursor: pointer;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important; font-size: 12px !important;
    letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(66,133,244,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    min-height: 42px; transition: var(--transition-normal) !important;
    text-transform: uppercase;
}
.btn-primary:hover {
    box-shadow: 0 4px 16px rgba(66,133,244,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-2px); filter: brightness(1.06);
}
.btn-primary:active { transform: translateY(1px) scale(0.98) !important; box-shadow: var(--shadow-xs) !important; }

/* btn-gold: dipakai untuk Tugas → pakai Google Green */
.btn-gold {
    background: linear-gradient(135deg, #34A853 0%, #1E8E3E 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(52,168,83,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; border: none !important; cursor: pointer;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important; font-size: 12px !important;
    min-height: 42px; text-transform: uppercase;
}
.btn-gold:hover {
    box-shadow: 0 4px 16px rgba(52,168,83,0.45) !important;
    transform: translateY(-2px);
    background: linear-gradient(135deg, #2E9644 0%, #1A7A35 100%) !important;
}

/* ============================================================
   8. FORM INPUTS
   ============================================================ */
.input-soal {
    width: 100%; padding: 11px 14px !important;
    border: 1.5px solid var(--border-main) !important;
    border-radius: var(--radius-md) !important;
    outline: none; background: white !important;
    transition: var(--transition-normal);
    font-weight: 500; font-size: 13.5px;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-xs) !important;
    font-family: inherit;
}
.input-soal:focus {
    border-color: var(--google-blue) !important;
    box-shadow: 0 0 0 3px rgba(66,133,244,0.15), var(--shadow-xs) !important;
}

/* ============================================================
   9. TABLES — GOOGLE MATERIAL DATA GRID
   ============================================================ */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td {
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--border-soft) !important;
    text-align: left; vertical-align: middle;
}
th {
    background: rgba(241,243,244,0.98) !important;
    backdrop-filter: blur(8px);
    font-size: 10.5px !important; text-transform: uppercase;
    color: var(--text-secondary) !important;
    font-weight: 700 !important; letter-spacing: 0.07em;
    position: sticky; top: 0; z-index: 10;
    border-bottom: 1.5px solid var(--border-main) !important;
}
tr { transition: background 0.15s ease; }
tr:last-child td { border-bottom: none !important; }
tr:hover { background: rgba(232,240,254,0.4); }
tr.selected-row { background: var(--google-blue-light) !important; }
tr.selected-row td:first-child { border-left: 3px solid var(--google-blue) !important; }

/* ============================================================
   10. CARDS — GOOGLE MATERIAL ELEVATION
   ============================================================ */
.bg-white {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.9);
}
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow-md  { box-shadow: var(--shadow-md) !important; }
.shadow-xl  { box-shadow: var(--shadow-xl) !important; }

.modal-pop {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border: 1px solid var(--border-soft) !important;
}

.stat-card {
    background: white; border-radius: var(--radius-xl);
    padding: 28px; border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm); transition: var(--transition-normal);
    position: relative; overflow: hidden;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 16px; flex-shrink: 0;
}

/* ============================================================
   11. SKELETON LOADING — SHIMMER
   ============================================================ */
@keyframes shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position: 800px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #F1F3F4 25%, #E8EAED 50%, #F1F3F4 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);
}
.skeleton-text   { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-title  { height: 22px; border-radius: 4px; margin-bottom: 12px; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card {
    background: white; border-radius: var(--radius-xl);
    padding: 24px; border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-xs);
}

/* ============================================================
   12. CBT TIMER — WARNING ANIMATION
   ============================================================ */
@keyframes timerPulseRed {
    0%, 100% { color: var(--google-red); text-shadow: 0 0 20px rgba(234,67,53,0.4); transform: scale(1); }
    50%       { color: #C5221F; text-shadow: 0 0 35px rgba(234,67,53,0.7); transform: scale(1.04); }
}
.timer-critical { animation: timerPulseRed 0.8s ease-in-out infinite !important; color: var(--google-red) !important; }

@keyframes timerPulseOrange {
    0%, 100% { color: var(--google-yellow-dark); }
    50%       { color: var(--google-yellow); }
}
.timer-warning { animation: timerPulseOrange 1.5s ease-in-out infinite !important; color: var(--google-yellow-dark) !important; }

/* ============================================================
   12b. CBT EXAM CONTAINER
   ============================================================ */
#examSingleQuestionArea {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
#examNavMobile { flex-wrap: nowrap; min-height: 52px; }
#examNavGrid button, #examNavMobile button {
    min-width: 40px; min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer; outline: none;
}
#btnPrevQ:disabled, #btnNextQ:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

#btnSubmitExamGlobal:not(.hidden),
#btnSubmitExamMobile:not(.hidden),
#btnSubmitExamSidebar:not(.hidden) {
    animation: submitPulse 2s ease-in-out infinite;
}
@keyframes submitPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,168,83,0.5); }
    50%       { box-shadow: 0 0 0 8px rgba(52,168,83,0); }
}
@media (max-width: 767px) {
    #examSingleQuestionArea label { padding: 14px 14px !important; }
    #examSingleQuestionArea input[type="radio"] { width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; }
    #activeExamContainer > footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        position: sticky; bottom: 0;
    }
}

/* ============================================================
   13. ANIMASI SISTEM
   ============================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.85); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

.anim-fade-up { opacity: 0; animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-fade-in     { animation: fadeIn 0.35s ease-out both; }
.anim-pop-in      { animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.anim-slide-right { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.anim-float       { animation: float 4s ease-in-out infinite; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================================================
   14. GLASS PANEL UTILITIES
   ============================================================ */
.glass-panel {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.55);
    box-shadow: var(--shadow-md);
}
.glass-dark {
    background: rgba(32,33,36,0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
}

/* ============================================================
   15. BOTTOM NAV MOBILE
   ============================================================ */
@media (max-width: 767px) {
    #sphiraBottomNav {
        position: fixed; bottom: 0; left: 0; width: 100%;
        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-top: 1px solid rgba(232,234,237,0.8);
        box-shadow: 0 -4px 20px rgba(32,33,36,0.06);
        z-index: 100; display: flex !important;
        justify-content: space-around; align-items: center;
        padding: 8px 4px 16px;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 20px 20px 0 0;
    }
}
@media (min-width: 768px) { #sphiraBottomNav { display: none !important; } }

.bot-nav-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 8px 12px; border-radius: var(--radius-lg);
    background: transparent; border: none; cursor: pointer;
    transition: var(--transition-normal);
    color: var(--text-tertiary); position: relative;
}
.bot-nav-item.active { color: var(--google-blue); }
.bot-nav-item.active::before {
    content: ''; position: absolute; top: 4px;
    width: 20px; height: 3px;
    background: var(--google-blue);
    border-radius: 2px; bottom: auto;
}
.bot-nav-item:hover { color: var(--google-blue); transform: translateY(-2px); }
.bot-nav-item svg { width: 22px; height: 22px; }

/* ============================================================
   16. MOBILE RESPONSIVENESS
   ============================================================ */
@media (max-width: 768px) {
    #mainSidebar {
        transform: translateX(-100%) !important;
        width: var(--sidebar-w-full) !important;
    }
    #mainSidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 40px rgba(26,115,232,0.35) !important;
    }
    .main-content-area { margin-left: 0 !important; padding-top: 74px !important; padding-bottom: 80px; }
    th, td { padding: 11px 12px !important; }
    .overflow-x-auto { -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
}

/* ============================================================
   17. OVERRIDE COMPATIBILITY (Tailwind CDN)
   ============================================================ */
[class*="rounded-[2.5rem]"] { border-radius: var(--radius-xl) !important; }
[class*="rounded-[2rem]"]   { border-radius: var(--radius-xl) !important; }
[class*="rounded-[3rem]"]   { border-radius: var(--radius-xl) !important; }

/* Remap warna lama ke Google colors */
.text-\[\#2563EB\]  { color: var(--google-blue) !important; }
.bg-\[\#0F172A\]    { background-color: #1A73E8 !important; }
.text-indigo-600    { color: var(--google-blue) !important; }
.bg-indigo-600      { background-color: var(--google-blue) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--google-blue-dark) !important; }
.border-indigo-200  { border-color: #C5D9FC !important; }
.bg-indigo-50       { background-color: var(--google-blue-light) !important; }
.text-indigo-700    { color: var(--google-blue-dark) !important; }
.ring-indigo-500    { --tw-ring-color: var(--google-blue) !important; }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--google-blue) !important; }
.accent-indigo-600  { accent-color: var(--google-blue) !important; }
.shadow-indigo-200  { --tw-shadow-color: rgba(66,133,244,0.2) !important; }

/* indigo → Google Blue di beberapa komponen penting */
.bg-indigo-600.text-white,
.from-indigo-600, .from-purple-600 {
    background: linear-gradient(135deg, #4285F4, #1A73E8) !important;
}

/* Tracking lebih proporsional */
.tracking-\[0\.2em\] { letter-spacing: 0.1em !important; }

/* ============================================================
   18. GOOGLE STATUS BADGE SYSTEM
   ============================================================ */

/* Override status badge warna untuk Live Radar & tabel */
/* SELESAI → Google Green */
.bg-green-500, .bg-green-600 { background-color: var(--google-green) !important; }
.hover\:bg-green-600:hover   { background-color: var(--google-green-dark) !important; }
.text-green-600, .text-green-700 { color: var(--google-green-dark) !important; }
.bg-green-50  { background-color: var(--google-green-light) !important; }
.border-green-200 { border-color: #B7DFC3 !important; }

/* MENGERJAKAN → Google Blue */
.bg-blue-500  { background-color: var(--google-blue) !important; }
.bg-blue-600  { background-color: var(--google-blue-dark) !important; }
.text-blue-600, .text-blue-700 { color: var(--google-blue-dark) !important; }
.bg-blue-50   { background-color: var(--google-blue-light) !important; }
.border-blue-200 { border-color: #AECBFA !important; }

/* DIBLOKIR → Google Red */
.bg-red-600, .bg-red-700 { background-color: var(--google-red) !important; }
.hover\:bg-red-700:hover  { background-color: var(--google-red-dark) !important; }
.text-red-600, .text-red-700 { color: var(--google-red-dark) !important; }
.bg-red-50    { background-color: var(--google-red-light) !important; }
.border-red-200 { border-color: #F5C6C3 !important; }

/* BELUM / WARNING → Google Yellow */
.bg-amber-500, .bg-yellow-500 { background-color: var(--google-yellow) !important; }
.text-amber-600, .text-yellow-700 { color: var(--google-yellow-dark) !important; }
.bg-amber-50, .bg-yellow-50   { background-color: var(--google-yellow-light) !important; }

/* ============================================================
   19. LIVE RADAR MODAL — GOOGLE STYLED HEADER
   ============================================================ */
/* Override indigo-600 header Live Radar → Google Blue */
.bg-indigo-600.text-white {
    background: linear-gradient(90deg, #1A73E8 0%, #4285F4 100%) !important;
}

/* ============================================================
   20. PRINT
   ============================================================ */
@media print {
    body * { visibility: hidden; }
    #panelAnalisisUjian, #panelAnalisisUjian * { visibility: visible; }
    #modalAnalisaRAMAH, #modalAnalisaRAMAH * { visibility: visible; }
    #panelAnalisisUjian, #modalAnalisaRAMAH {
        position: absolute !important;
        left: 0; top: 0;
        width: 100% !important; height: auto !important;
        min-height: 100vh !important; overflow: visible !important;
        background: white; padding: 0; margin: 0;
        display: block !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    .overflow-y-auto { overflow: visible !important; max-height: none !important; }
    .no-print { display: none !important; }
    .print-shadow-none { box-shadow: none !important; border: 1px solid #E8EAED !important; }
    .page-break-inside-avoid { break-inside: avoid; }
}

/* ============================================================
   21. MADA ANIMATION (RAMAH — tetap utuh)
   ============================================================ */
.login-bg {
    background: linear-gradient(135deg, #1A73E8 0%, #1557B0 100%);
    position: relative;
}
.login-bg::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.05) 2px, transparent 2px);
    background-size: 28px 28px;
    z-index: 0; pointer-events: none;
}
.login-bg > div { z-index: 1; position: relative; }
.ramah-hug-stage { perspective: 1000px; }
.mada-actor-container { animation: madaWalkIn 3s ease-out forwards, madaTransformToHug 1s ease-in-out 3s forwards; }
.sphira-pillow-container { animation: sphiraAppearAsPillow 1s ease-out 1.5s forwards; }
.mada-transform-hug-active .mada-arm-L { transform-origin: right top; animation: armHugL 1s ease-out forwards; }
.mada-transform-hug-active .mada-arm-R { transform-origin: left top; animation: armHugR 1s ease-out forwards; }
.mada-transform-hug-active .mada-trunk { transform-origin: top center; animation: trunkHappy 1s ease-out forwards; }
.mada-transform-hug-active .mada-eyes { opacity: 0; transition: opacity 0.5s 0.5s; }
.mada-transform-hug-active .mada-eyes-happy { opacity: 1 !important; transition: opacity 0.5s 0.5s; }
.sphira-pillow-active .sphira-pillow-img { animation: sphiraPillowSquish 1s ease-in-out forwards; }
.mada-transform-hug-active ~ .hug-glow { animation: glowAppear 1s ease-out forwards; }

@keyframes madaWalkIn { 0% { opacity: 0; transform: translateX(-200px) scale(0.9); } 10% { opacity: 1; } 90% { transform: translateX(0px) scale(1); } 100% { opacity: 1; transform: translateX(0px) scale(1); } }
@keyframes legSwing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes bodyBob { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } }
@keyframes earFlap { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sphiraAppearAsPillow { 0% { opacity: 0; transform: scale(0.5); filter: blur(5px); } 100% { opacity: 1; transform: scale(1); filter: blur(0px); } }
@keyframes madaTransformToHug { 0% { transform: translateX(0px) translateY(0px) scale(1); } 100% { transform: translateX(0px) translateY(5px) scale(1.02); } }
@keyframes armHugL { 0% { d: path("M55 110C45 120 45 135 55 145"); } 100% { d: path("M55 110C70 125 70 140 55 155"); stroke: #CBD5E1; } }
@keyframes armHugR { 0% { d: path("M145 110C155 120 155 135 145 145"); } 100% { d: path("M145 110C130 125 130 140 145 155"); stroke: #CBD5E1; } }
@keyframes trunkHappy { 0% { transform: rotate(0deg); } 100% { transform: rotate(15deg) translateX(5px); } }
@keyframes sphiraPillowSquish { 0% { transform: scale(1); filter: drop-shadow(0 5px 15px rgba(66,133,244,0.1)); } 100% { transform: scale(0.92) translateY(2px); filter: drop-shadow(0 2px 5px rgba(66,133,244,0.05)); } }
@keyframes glowAppear { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }
.sphira-load-progress { width: 0%; animation: progressLoadLoop 2.5s infinite ease-in-out; }
@keyframes progressLoadLoop { 0% { width: 0%; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0%; left: 100%; } }

/* ============================================================
   22. CUSTOM CHECKBOX
   ============================================================ */
.custom-checkbox {
    width: 18px; height: 18px;
    accent-color: var(--google-blue);
    cursor: pointer; border-radius: 6px;
}

/* ============================================================
   23. SHINE EFFECT
   ============================================================ */
@keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); animation: shine 4s infinite; pointer-events: none;
}

/* ============================================================
   24. Z-INDEX STACK
   ============================================================ */
#mainSidebar         { z-index: 50 !important; }
.modal-overlay,
[id^="modal"]        { z-index: 200 !important; }
#activeExamContainer { z-index: 300 !important; }
#sphiraBottomNav     { z-index: 100 !important; }
#toast-container     { z-index: 9999 !important; }
#loader, #ramahLoader { z-index: 8000 !important; }
#appDialog           { z-index: 9998 !important; }
#sidebarOverlay      { z-index: 49 !important; }

/* ============================================================
   25. 3D LOGO CONSTRUCTION
   ============================================================ */
@keyframes logoConstruct3D {
    0%   { transform: rotateY(90deg) rotateX(-45deg) scale(0) translateZ(-200px); opacity: 0; filter: blur(10px); }
    50%  { transform: rotateY(-20deg) rotateX(10deg) scale(1.1) translateZ(50px); opacity: 0.8; filter: blur(2px); }
    100% { transform: rotateY(0deg) rotateX(0deg) scale(1) translateZ(0); opacity: 1; filter: blur(0px); }
}

/* ============================================================
   26. GOOGLE RAINBOW DIVIDER — ornamen Google di top cards
   ============================================================ */
.google-rainbow-bar {
    height: 4px;
    background: linear-gradient(90deg, #EA4335 0%, #FBBC05 25%, #34A853 50%, #4285F4 75%, #EA4335 100%);
    background-size: 200% 100%;
    animation: rainbowShift 4s linear infinite;
    border-radius: 2px;
}
@keyframes rainbowShift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* ============================================================
   27. LOGIN PAGE — GOOGLE THEMED
   ============================================================ */
#loginView {
    background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%) !important;
}
.login-card {
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg, #EA4335, #FBBC05, #34A853, #4285F4) 1 !important;
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
}
.login-btn {
    background: linear-gradient(135deg, #4285F4 0%, #1A73E8 100%) !important;
    box-shadow: 0 4px 16px rgba(66,133,244,0.4) !important;
}
.login-btn:hover { box-shadow: 0 8px 24px rgba(66,133,244,0.5) !important; }

/* ============================================================
   28. HIDE SCROLL
   ============================================================ */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }