:root{color-scheme:dark;--sab:env(safe-area-inset-bottom,0px)}
    html{scroll-behavior:smooth;overflow-x:hidden;max-width:100vw;width:100%}
    body{background-color:#060913;color:#e2e8f0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;overflow-x:hidden;max-width:100vw;width:100%;position:relative}
    html.light{color-scheme:light;background-color:#f8fafc}
    html.light body{background-color:#f8fafc;color:#0f172a}

    /* Glassmorphism & Cards */
    .glass-panel{background:rgba(11,19,32,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08)}
    html.light .glass-panel{background:rgba(255,255,255,.9);border:1px solid #e2e8f0;box-shadow:0 4px 20px rgba(0,0,0,.04)}
    .glass-card{background:rgba(17,29,48,.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);transition:all .3s cubic-bezier(.16,1,.3,1)}
    .glass-card:hover{transform:translateY(-3px);border-color:rgba(52,211,153,.4);box-shadow:0 14px 35px -8px rgba(16,185,129,.2)}
    html.light .glass-card{background:#ffffff;border:1px solid #e2e8f0;box-shadow:0 2px 10px rgba(0,0,0,.04)}
    html.light .glass-card:hover{border-color:#10b981;box-shadow:0 14px 30px -6px rgba(16,185,129,.18)}

    /* Ambient Lighting */
    .ambient-orb{position:absolute;border-radius:9999px;filter:blur(130px);opacity:.25;pointer-events:none;mix-blend-mode:screen}
    html.light .ambient-orb{opacity:.12;mix-blend-mode:multiply}
    .glow-border-emerald{border:1.5px solid rgba(52,211,153,.5)!important;box-shadow:0 0 30px -6px rgba(16,185,129,.25)}
    html.light .glow-border-emerald{border:1.5px solid #10b981!important;box-shadow:0 0 25px -6px rgba(16,185,129,.3)}
    
    /* Typography */
    .arabic-text{font-family:'Amiri',serif;direction:rtl}
    .font-display{font-family:'Cinzel',serif}

    /* Scrollbars */
    ::-webkit-scrollbar{width:8px;height:8px}
    ::-webkit-scrollbar-track{background:#060913}
    ::-webkit-scrollbar-thumb{background:#1e293b;border-radius:4px}
    html.light ::-webkit-scrollbar-track{background:#f1f5f9}
    html.light ::-webkit-scrollbar-thumb{background:#cbd5e1}

    /* Buttons */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:.75rem;font-weight:700;font-size:.8125rem;transition:all .2s cubic-bezier(.16,1,.3,1);cursor:pointer;user-select:none}
    .btn:active{transform:scale(.97)}
    .btn-primary{background:linear-gradient(135deg,#059669,#0d9488);color:#ffffff;border:1px solid rgba(52,211,153,.3);box-shadow:0 4px 14px rgba(5,150,105,.3)}
    .btn-primary:hover{background:linear-gradient(135deg,#10b981,#14b8a6);box-shadow:0 6px 20px rgba(16,185,129,.4)}
    .btn-secondary{background:rgba(255,255,255,.08);color:#cbd5e1;border:1px solid rgba(255,255,255,.12)}
    .btn-secondary:hover{background:rgba(255,255,255,.15);color:#ffffff}
    html.light .btn-secondary{background:#f1f5f9;color:#334155;border-color:#cbd5e1}
    html.light .btn-secondary:hover{background:#e2e8f0;color:#0f172a}

    /* Inputs & Selects */
    input[type="text"],input[type="password"],select,textarea{background:rgba(17,29,48,.7);border:1px solid rgba(255,255,255,.15);border-radius:.75rem;padding:.625rem .875rem;color:#f8fafc;font-size:.875rem;transition:all .2s ease;outline:none;width:100%}
    input[type="text"]:focus,input[type="password"]:focus,select:focus,textarea:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
    html.light input[type="text"],html.light input[type="password"],html.light select,html.light textarea{background:#ffffff;border-color:#cbd5e1;color:#0f172a}
    html.light input[type="text"]:focus,html.light input[type="password"]:focus,html.light select:focus,html.light textarea:focus{border-color:#059669;box-shadow:0 0 0 3px rgba(5,150,105,.15)}

    /* Modals */
    .modal-overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
    .modal-overlay.active,.modal-overlay.flex{display:flex!important;opacity:1!important;pointer-events:auto!important}
    .modal-box{position:relative;width:100%;max-width:32rem;background:#0b1320;border:1px solid rgba(255,255,255,.15);border-radius:1.5rem;padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.7);color:#e2e8f0;max-height:90vh;overflow-y:auto;transform:scale(.95);transition:transform .25s cubic-bezier(.16,1,.3,1)}
    .modal-overlay.active .modal-box{transform:scale(1)}
    html.light .modal-box{background:#ffffff;border-color:#cbd5e1;color:#0f172a;box-shadow:0 25px 50px -12px rgba(0,0,0,.15)}

    /* Accordion */
    .accordion-header{cursor:pointer;user-select:none;padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;transition:background .2s ease}
    .accordion-header:hover{background:rgba(255,255,255,.04)}
    html.light .accordion-header:hover{background:rgba(0,0,0,.02)}
    .accordion-content{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s cubic-bezier(.16,1,.3,1),opacity .3s ease}
    .accordion-content.open{max-height:2500px;opacity:1}

    /* Quiz Steps & Badges */
    .dot-nav{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
    .quiz-dot{width:1.875rem;height:1.875rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;background:rgba(255,255,255,.06);color:#94a3b8;border:1px solid rgba(255,255,255,.1);transition:all .2s;cursor:pointer}
    .quiz-dot.active{background:#10b981;color:#ffffff;border-color:#10b981;box-shadow:0 0 10px rgba(16,185,129,.4)}
    .quiz-dot.filled{background:#059669;color:#ffffff;border-color:#059669}
    .opt-letter-badge{width:1.75rem;height:1.75rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;background:rgba(255,255,255,.1);color:#ffffff;flex-shrink:0;transition:all .2s}
    .quiz-opt-label.selected-opt .opt-letter-badge{background:#10b981;color:#ffffff}
    .timer-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:.75rem;font-family:monospace;font-weight:700;font-size:.8125rem;background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3)}
    .chip{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:.625rem;font-size:.75rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#cbd5e1}
    .quiz-card{display:none;animation:quizFadeIn .3s ease-out}
    .quiz-card.quiz-active{display:block!important}
    @keyframes quizFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

    /* Loading Spinner */
    .loading-spinner{width:3.5rem;height:3.5rem;border-radius:9999px;border:3px solid rgba(16,185,129,.2);border-top-color:#10b981;animation:spin .8s linear infinite;margin:0 auto}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Mobile Bottom Nav */
    .mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:40;background:rgba(11,19,32,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:space-around;padding:.5rem .25rem;padding-bottom:calc(.5rem + var(--sab))}
    .mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.65rem;font-weight:700;color:#94a3b8;transition:color .2s}
    .mobile-nav-item.active-nav,.mobile-nav-item:hover{color:#34d399}
    html.light .mobile-bottom-nav{background:rgba(255,255,255,.95);border-top:1px solid #e2e8f0;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
    html.light .mobile-nav-item{color:#64748b}
    html.light .mobile-nav-item.active-nav,html.light .mobile-nav-item:hover{color:#059669}

    /* Light Theme Utility Overrides */
    html.light header.glass-panel{background:rgba(255,255,255,.9);border-bottom:1px solid #e2e8f0}
    html.light .bg-dark_canvas{background:#f8fafc!important}
    html.light .bg-dark_elevated{background:#ffffff!important;border:1px solid #e2e8f0}
    html.light .border-white\/10{border-color:#e2e8f0!important}
    html.light .border-white\/5{border-color:#f1f5f9!important}
    html.light .text-slate-300{color:#475569!important}
    html.light .text-slate-400{color:#64748b!important}
    html.light .text-slate-500{color:#94a3b8!important}
    html.light .bg-white\/5{background:#f8fafc!important}
    html.light .bg-white\/10{background:#f1f5f9!important}
    html.light .bg-emerald-500\/20{background:#d1fae5!important}
    html.light .bg-amber-500\/20{background:#fef3c7!important}
    html.light .bg-cyan-500\/20{background:#cffafe!important}
    html.light .text-emerald-400{color:#059669!important}
    html.light .text-amber-400{color:#d97706!important}
    html.light .text-cyan-400{color:#0891b2!important}
    html.light .chip{background:#f1f5f9;border:1px solid #e2e8f0;color:#334155}
    html.light .quiz-opt-label{background:#f8fafc;border:1px solid #e2e8f0;color:#334155}
    html.light .quiz-opt-label:hover{background:#f1f5f9;border-color:#10b981;color:#0f172a}
    html.light .quiz-opt-label.selected-opt{background:#ecfdf5;border-color:#10b981;color:#065f46}
    html.light .quiz-dot{background:#e2e8f0;color:#64748b;border:1px solid #cbd5e1}
    html.light .quiz-dot.active{background:#10b981;color:#ffffff;border-color:#10b981}
    html.light .quiz-dot.filled{background:#059669;color:#ffffff;border-color:#059669}
    html.light #global-loading-spinner{background:rgba(255,255,255,.85)}
    html.light #global-loading-spinner .bg-dark_surface{background:#ffffff!important;border:1px solid #e2e8f0}
    html.light #global-loading-spinner .text-white{color:#0f172a!important}

    @media(max-width:640px){body{padding-bottom:calc(76px + var(--sab))!important}}
    @media print{header,nav,.mobile-bottom-nav,#back-to-top,.no-print{display:none!important}body{background:#fff!important;color:#000!important}}

    /* Student Search Autocomplete Dropdown & Gate */
    #student-search-results {
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.3);
    }
    html.light #student-search-results {
        background: #ffffff !important;
        border-color: #cbd5e1 !important;
        box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15) !important;
    }
    html.light #student-search-results span.text-white {
        color: #0f172a !important;
    }
    html.light #student-search-results span.text-cyan-300 {
        color: #0284c7 !important;
    }
    html.light #student-search-results div:hover {
        background: #ecfdf5 !important;
    }
    html.light #quiz-nim {
        background: #f1f5f9 !important;
        color: #0284c7 !important;
        border-color: #cbd5e1 !important;
    }
    html.light #quiz-identity-gate {
        background: #ffffff !important;
        border-color: #a7f3d0 !important;
        box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
    }
    html.light #quiz-identity-gate .bg-dark_elevated {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }
    html.light #quiz-id-badge {
        background: #ecfdf5 !important;
        color: #065f46 !important;
        border-color: #a7f3d0 !important;
    }
    html.light #quiz-id-badge-text strong {
        color: #047857 !important;
    }
    html.light #score-banner.bg-emerald-950\/70 {
        background: #ecfdf5 !important;
        color: #065f46 !important;
        border-color: #10b981 !important;
    }
    html.light #score-banner.bg-amber-950\/70 {
        background: #fffbeb !important;
        color: #92400e !important;
        border-color: #f59e0b !important;
    }
    html.light #score-banner.bg-rose-950\/70 {
        background: #fff1f2 !important;
        color: #9f1239 !important;
        border-color: #f43f5e !important;
    }
    html.light #result-shot {
        background: #ffffff !important;
        color: #0f172a !important;
        border-color: #10b981 !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
    }
    html.light #result-shot .text-white {
        color: #0f172a !important;
    }
    html.light #result-shot .bg-dark_canvas\/80,
    html.light #result-shot .bg-dark_canvas\/60 {
        background: #f8fafc !important;
        border-color: #e2e8f0 !important;
    }
    html.light #result-shot .bg-emerald-950\/60 {
        background: #ecfdf5 !important;
        border-color: #a7f3d0 !important;
    }
    html.light #result-shot .bg-amber-950\/60 {
        background: #fffbeb !important;
        border-color: #fde68a !important;
    }
    html.light #result-shot .bg-teal-950\/60 {
        background: #f0fdfa !important;
        border-color: #99f6e4 !important;
    }
    html.light #result-shot .bg-indigo-950\/60 {
        background: #eef2ff !important;
        border-color: #c7d2fe !important;
    }
    html.light #result-shot .bg-sky-950\/60 {
        background: #f0f9ff !important;
        border-color: #bae6fd !important;
    }
    html.light #result-shot strong.text-emerald-300 {
        color: #059669 !important;
    }
    html.light #result-shot span.text-amber-300 {
        color: #d97706 !important;
    }
    html.light #result-shot span.text-teal-300 {
        color: #0d9488 !important;
    }
    html.light #result-shot span.text-indigo-300 {
        color: #4f46e5 !important;
    }
    html.light #result-shot span.text-sky-300 {
        color: #0284c7 !important;
    }
    html.light #result-shot canvas#rc-qr-cv {
        border-color: #cbd5e1 !important;
    }


    /* Enhanced Selected Option Highlighting (Dark & Light Mode) */
    .quiz-opt-label.selected-opt {
        border-color: #10b981 !important;
        background-color: rgba(6, 78, 59, 0.55) !important;
        color: #ecfdf5 !important;
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.3) !important;
        transform: scale(1.01);
    }
    .quiz-opt-label.selected-opt .opt-letter-badge {
        background: #10b981 !important;
        color: #ffffff !important;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
    }
    html.light .quiz-opt-label.selected-opt {
        border-color: #059669 !important;
        background-color: #ecfdf5 !important;
        color: #065f46 !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 14px rgba(5, 150, 105, 0.2) !important;
    }
    html.light .quiz-opt-label.selected-opt .opt-letter-badge {
        background: #059669 !important;
        color: #ffffff !important;
    }
    #quiz-form.show-all > div.quiz-card {
        display: block !important;
    }



/* =========================================================================
 * COMPREHENSIVE LIGHT THEME — MODERN, SIMPLE, CLEAN & COLORFUL (BERANDA-STYLE)
 * ========================================================================= */

html.light {
    color-scheme: light;
    background-color: #f8fafc;
}

html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Background Ambient Orbs - Subtle Colorful Glows */
html.light .ambient-orb {
    opacity: 0.15 !important;
    mix-blend-mode: multiply !important;
}

/* Header & Navbar */
html.light header,
html.light header.glass-panel {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

html.light header .text-white {
    color: #0f172a !important;
}

/* Surface Architecture (Cards & Panels) */
html.light .glass-panel {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

html.light .glass-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

html.light .glass-card:hover {
    transform: translateY(-3px);
    border-color: #10b981 !important;
    box-shadow: 0 14px 30px -6px rgba(16, 185, 129, 0.18) !important;
}

/* Canvas & Elevated Background Remappings */
html.light .bg-dark_canvas,
html.light [class*="bg-dark_canvas"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light .bg-dark_surface,
html.light [class*="bg-dark_surface"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light .bg-dark_elevated,
html.light [class*="bg-dark_elevated"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* Typography & Headings */
html.light h1, 
html.light h2, 
html.light h3, 
html.light h4, 
html.light h5, 
html.light h6 {
    color: #0f172a !important;
}

html.light p {
    color: #334155;
}

html.light .text-slate-200,
html.light .text-slate-300 {
    color: #334155 !important;
}

html.light .text-slate-400 {
    color: #64748b !important;
}

html.light .text-slate-500 {
    color: #94a3b8 !important;
}

/* COLORFUL CLUSTERS & CARDS (Simple, Vibrant, High-Readability) */

/* 1. Mint / Emerald Pastel (Epistemologi & Tauhid) */
html.light [class*="bg-emerald-950"],
html.light .card-cluster-emerald {
    background-color: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    color: #065f46 !important;
}
html.light [class*="bg-emerald-950"] p,
html.light .card-cluster-emerald p {
    color: #1e293b !important;
}
html.light .text-emerald-400,
html.light .text-emerald-300 {
    color: #059669 !important;
}

/* 2. Amber / Gold Pastel (Keadilan & Hisab) */
html.light [class*="bg-amber-950"],
html.light .card-cluster-amber {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
}
html.light [class*="bg-amber-950"] p,
html.light .card-cluster-amber p {
    color: #1e293b !important;
}
html.light .text-amber-400,
html.light .text-amber-300 {
    color: #d97706 !important;
}

/* 3. Cyan / Teal Pastel (Sains & Regulasi) */
html.light [class*="bg-teal-950"],
html.light [class*="bg-cyan-950"],
html.light .card-cluster-teal {
    background-color: #f0fdfa !important;
    border: 1px solid #99f6e4 !important;
    color: #0f766e !important;
}
html.light [class*="bg-teal-950"] p,
html.light .card-cluster-teal p {
    color: #1e293b !important;
}
html.light .text-teal-400,
html.light .text-cyan-400 {
    color: #0d9488 !important;
}

/* 4. Rose / Red Pastel (Kritik & Peringatan Moral) */
html.light [class*="bg-rose-950"],
html.light .card-cluster-rose {
    background-color: #fff1f2 !important;
    border: 1px solid #fecdd3 !important;
    color: #9f1239 !important;
}
html.light [class*="bg-rose-950"] p,
html.light .card-cluster-rose p {
    color: #1e293b !important;
}
html.light .text-rose-400,
html.light .text-rose-300 {
    color: #e11d48 !important;
}

/* 5. Indigo / Purple Pastel (Living Law & Madura) */
html.light [class*="bg-purple-950"],
html.light [class*="bg-indigo-950"],
html.light .card-cluster-purple {
    background-color: #faf5ff !important;
    border: 1px solid #e9d5ff !important;
    color: #6b21a8 !important;
}
html.light [class*="bg-purple-950"] p,
html.light .card-cluster-purple p {
    color: #1e293b !important;
}
html.light .text-purple-400,
html.light .text-indigo-400 {
    color: #7c3aed !important;
}

/* Status Badges */
html.light .bg-emerald-500\/20 {
    background-color: #d1fae5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
}
html.light .bg-amber-500\/20 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}
html.light .bg-cyan-500\/20 {
    background-color: #cffafe !important;
    color: #0891b2 !important;
    border: 1px solid #a5f3fc !important;
}
html.light .bg-rose-500\/20 {
    background-color: #ffe4e6 !important;
    color: #be123c !important;
    border: 1px solid #fecdd3 !important;
}

/* Tombol Aksi Gradasi Tetap Putih Kontras */
html.light button.bg-gradient-to-r,
html.light a.bg-gradient-to-r,
html.light button.bg-gradient-to-tr,
html.light a.bg-gradient-to-tr,
html.light button[class*="from-emerald-600"],
html.light a[class*="from-emerald-600"],
html.light button[class*="from-teal-600"],
html.light a[class*="from-teal-600"],
html.light button[class*="from-amber-600"],
html.light a[class*="from-amber-600"],
html.light button[class*="from-rose-600"],
html.light a[class*="from-rose-600"] {
    color: #ffffff !important;
}
html.light button.bg-gradient-to-r *,
html.light a.bg-gradient-to-r *,
html.light button.bg-gradient-to-tr *,
html.light a.bg-gradient-to-tr *,
html.light button[class*="from-emerald-600"] *,
html.light a[class*="from-emerald-600"] *,
html.light button[class*="from-teal-600"] *,
html.light a[class*="from-teal-600"] *,
html.light button[class*="from-amber-600"] *,
html.light a[class*="from-amber-600"] *,
html.light button[class*="from-rose-600"] *,
html.light a[class*="from-rose-600"] * {
    color: #ffffff !important;
}

/* Studi Kasus Accordion */
html.light .case-item {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}
html.light .case-item:hover {
    border-color: #10b981 !important;
    box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.12) !important;
}
html.light .case-header {
    color: #0f172a !important;
}
html.light .case-solution-body {
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Evaluasi & Kuis (Clean & Crisp) */
html.light #pretest {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 25px -4px rgba(0, 0, 0, 0.05) !important;
}
html.light .quiz-opt-label {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}
html.light .quiz-opt-label:hover {
    background-color: #f1f5f9 !important;
    border-color: #10b981 !important;
    color: #0f172a !important;
}
html.light .quiz-opt-label.selected-opt {
    border-color: #059669 !important;
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.15) !important;
}
html.light .quiz-opt-label.selected-opt .opt-letter-badge {
    background-color: #059669 !important;
    color: #ffffff !important;
}
html.light .quiz-dot {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}
html.light .quiz-dot.active {
    background-color: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}
html.light .quiz-dot.filled {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

/* Form Input & Textarea */
html.light input[type="text"],
html.light input[type="password"],
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}
html.light input[type="text"]:focus,
html.light input[type="password"]:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Modals & Dialogs */
html.light .modal-box {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15) !important;
}

/* Mobile Bottom Navigation */
html.light .mobile-bottom-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05) !important;
}
html.light .mobile-nav-item {
    color: #64748b !important;
}
html.light .mobile-nav-item.active-nav,
html.light .mobile-nav-item:hover {
    color: #059669 !important;
}

/* Footer Elegan & Bersih */
html.light footer {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #64748b !important;
}
html.light footer h4,
html.light footer strong {
    color: #0f172a !important;
}
html.light footer a:hover {
    color: #059669 !important;
}


/* =========================================================================
 * PETA KONSEP LOGIS & MINDMAP CONTAINER OVERRIDES (LIGHT MODE)
 * ========================================================================= */
html.light .bg-gradient-to-r.from-dark_surface {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
}

html.light .bg-gradient-to-r.from-dark_surface h3 {
    color: #b45309 !important; /* Amber gold pekat tajam */
}

/* Kotak 4 Fase dalam Peta Konsep */
html.light .bg-gradient-to-r.from-dark_surface .bg-dark_canvas\/90 {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    border-top: 1px solid #e2e8f0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

/* Judul Fase */
html.light .bg-gradient-to-r.from-dark_surface .text-emerald-400 {
    color: #047857 !important;
}
html.light .bg-gradient-to-r.from-dark_surface .text-teal-400 {
    color: #0f766e !important;
}
html.light .bg-gradient-to-r.from-dark_surface .text-amber-400 {
    color: #b45309 !important;
}
html.light .bg-gradient-to-r.from-dark_surface .text-purple-400 {
    color: #6b21a8 !important;
}

/* Paragraf Deskripsi Fase */
html.light .bg-gradient-to-r.from-dark_surface p,
html.light .bg-gradient-to-r.from-dark_surface p.text-slate-300 {
    color: #334155 !important;
    font-weight: 500 !important;
}

/* Sub-label Tag di Bawah Tiap Fase */
html.light .bg-gradient-to-r.from-dark_surface .text-emerald-300 {
    color: #059669 !important;
    font-weight: 600 !important;
}
html.light .bg-gradient-to-r.from-dark_surface .text-teal-300 {
    color: #0d9488 !important;
    font-weight: 600 !important;
}
html.light .bg-gradient-to-r.from-dark_surface .text-amber-300 {
    color: #d97706 !important;
    font-weight: 600 !important;
}
html.light .bg-gradient-to-r.from-dark_surface .text-purple-300 {
    color: #7c3aed !important;
    font-weight: 600 !important;
}


/* =========================================================================
   SINKRONISASI TEMA TERANG: EVALUASI KUIS & KARTU SOAL (ALL MODULES)
   ========================================================================= */
html.light #pretest {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html.light #pretest h2,
html.light #pretest h3 {
    color: #064e3b !important; /* Deep emerald */
}

html.light #pretest p,
html.light #pretest span.text-slate-300,
html.light #pretest span.text-slate-400 {
    color: #334155 !important;
}

/* Gerbang Identitas Mahasiswa */
html.light #quiz-identity-gate {
    background-color: #f8fafc !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.08) !important;
    color: #0f172a !important;
}

html.light #quiz-identity-gate .text-emerald-400 {
    color: #047857 !important;
}

html.light #quiz-identity-gate label {
    color: #1e293b !important;
    font-weight: 700 !important;
}

html.light #quiz-identity-gate select,
html.light #quiz-identity-gate input[type="text"] {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

html.light #quiz-identity-gate select:focus,
html.light #quiz-identity-gate input[type="text"]:focus {
    border-color: #059669 !important;
    outline: none !important;
}

html.light #quiz-identity-gate #quiz-nim {
    background-color: #f1f5f9 !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0369a1 !important;
}

html.light #quiz-id-badge {
    background-color: #ecfdf5 !important;
    border: 1.5px solid #10b981 !important;
    color: #065f46 !important;
}

html.light #quiz-id-badge-text strong {
    color: #047857 !important;
}

/* Navigasi Kuis & Info Bar */
html.light #quiz-main .bg-dark_elevated\/90 {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light #quiz-timer {
    color: #b45309 !important;
}

html.light #quiz-count {
    color: #047857 !important;
}

/* Kartu Butir Soal Kuis (Quiz Card) */
html.light .quiz-card {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

html.light .quiz-card p,
html.light .quiz-card p.text-white {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

/* Pilihan Jawaban (Radio Label) */
html.light .quiz-opt-label {
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #1e293b !important;
}

html.light .quiz-opt-label:hover {
    background-color: #f1f5f9 !important;
    border-color: #10b981 !important;
    color: #064e3b !important;
}

html.light .quiz-opt-label.selected-opt {
    background-color: #ecfdf5 !important;
    border-color: #059669 !important;
    color: #064e3b !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.15) !important;
}

html.light .opt-letter-badge {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
    font-weight: 800 !important;
}

html.light .quiz-opt-label.selected-opt .opt-letter-badge {
    background-color: #059669 !important;
    color: #ffffff !important;
}

/* Titik Navigasi Kuis (Quiz Dots) */
html.light .quiz-dot {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border: 1.5px solid #cbd5e1 !important;
    font-weight: 700 !important;
}

html.light .quiz-dot.active {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #047857 !important;
    box-shadow: 0 0 10px rgba(5, 150, 105, 0.4) !important;
}

html.light .quiz-dot.filled {
    background-color: #047857 !important;
    color: #ffffff !important;
    border-color: #064e3b !important;
}

/* Kartu Bukti & Sertifikat Hasil Evaluasi */
html.light #quiz-result-card {
    background-color: #ffffff !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
}

html.light #quiz-result-card .bg-gradient-to-r {
    background: linear-gradient(to right, #065f46, #047857) !important;
    color: #ffffff !important;
}

html.light #quiz-result-card .bg-dark_elevated\/70,
html.light #quiz-result-card .bg-dark_elevated,
html.light #quiz-result-card .bg-white\/5 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html.light #quiz-result-card #rc-nama,
html.light #quiz-result-card strong {
    color: #0f172a !important;
}

html.light #quiz-result-card .text-slate-400 {
    color: #64748b !important;
}

html.light #student-search-results {
    background-color: #ffffff !important;
    border: 1.5px solid #10b981 !important;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.12) !important;
}

html.light #student-search-results div {
    color: #0f172a !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

html.light #student-search-results div:hover {
    background-color: #ecfdf5 !important;
}

html.light #student-search-results strong {
    color: #0f172a !important;
}

/* Modal Kunci Dosen & Pembahasan */
html.light .modal-box {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    color: #0f172a !important;
}

html.light .modal-box h3 {
    color: #065f46 !important;
}

html.light .modal-box .text-white {
    color: #0f172a !important;
}

html.light #quiz-answers-body div.bg-dark_canvas\/80 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

html.light #quiz-answers-body .bg-white\/5 {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
}

/* =========================================================================
   HOMEPAGE COLORFUL LIGHT THEME AESTHETIC ENGINE (ANTI-SLOP & ZERO DARK LEAKS)
   Desain Terang Bersih, Elegan, Berwarna Segar (Emerald, Amber, Cyan, Rose)
   Tanpa Ada Kontainer Gelap Mengganggu
   ========================================================================= */

/* Transisi Halus Global Perubahan Tema */
html, body, .glass-card, .glass-panel, .case-item, header, footer,
input, select, textarea, .quiz-card, .modal-box, .btn-secondary, .filter-btn,
.accordion-header, #bedah-kasus, #pretest, #quiz-identity-gate {
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Base Light Mode Surface & Typography */
html.light, html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Menghilangkan Semua Wadah Gelap Pada Mode Terang */
html.light .glass-card,
html.light .glass-panel,
html.light .bg-dark_surface,
html.light [class*="bg-dark_surface"],
html.light .bg-dark_elevated,
html.light [class*="bg-dark_elevated"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

html.light .bg-dark_canvas,
html.light [class*="bg-dark_canvas"] {
    background-color: #f8fafc !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Border Halus Bersih */
html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/15,
html.light .border-white\/20,
html.light .border-white\/30 {
    border-color: #e2e8f0 !important;
}

/* Tipografi Tajam & Nyaman Dibaca */
/* Headings on light surfaces (excluding colored/dark hero containers) */
html.light h1:not([class*="text-"]):not([class*="from-"] *):not(.bg-gradient-to-br *):not(.bg-gradient-to-tr *):not(.hero-banner *),
html.light h2:not([class*="text-"]):not([class*="from-"] *):not(.bg-gradient-to-br *):not(.bg-gradient-to-tr *):not(.hero-banner *),
html.light h3:not([class*="text-"]):not([class*="from-"] *):not(.bg-gradient-to-br *):not(.bg-gradient-to-tr *):not(.hero-banner *),
html.light h4:not([class*="text-"]):not([class*="from-"] *):not(.bg-gradient-to-br *):not(.bg-gradient-to-tr *):not(.hero-banner *),
html.light h5:not([class*="text-"]):not([class*="from-"] *):not(.bg-gradient-to-br *):not(.bg-gradient-to-tr *):not(.hero-banner *),
html.light h6:not([class*="text-"]):not([class*="from-"] *):not(.bg-gradient-to-br *):not(.bg-gradient-to-tr *):not(.hero-banner *) {
    color: #0f172a !important;
}

html.light h1.text-white,
html.light h2.text-white,
html.light h3.text-white,
html.light h4.text-white,
html.light h5.text-white,
html.light h6.text-white {
    color: #0f172a !important;
}

html.light p.text-slate-300,
html.light p.text-slate-400,
html.light p.text-slate-500,
html.light span.text-slate-300,
html.light span.text-slate-400 {
    color: #475569 !important;
}

html.light .text-slate-200 {
    color: #334155 !important;
}

/* Pastikan Teks Tombol Aksi Utama Tetap Putih Kontras */
html.light button.bg-emerald-600,
html.light a.bg-emerald-600,
html.light button.bg-blue-600,
html.light a.bg-blue-600,
html.light button.bg-emerald-700,
html.light a.bg-emerald-700,
html.light .btn-primary,
html.light button[class*="from-emerald-600"],
html.light a[class*="from-emerald-600"],
html.light button[class*="from-teal-600"],
html.light a[class*="from-teal-600"] {
    color: #ffffff !important;
}
html.light button.bg-emerald-600 *,
html.light a.bg-emerald-600 *,
html.light button.bg-blue-600 *,
html.light a.bg-blue-600 *,
html.light .btn-primary * {
    color: #ffffff !important;
}

/* =========================================================================
   LABORATORIUM BEDAH KASUS HOTS (KASUS 15-19 & MASTER TEMPLATE)
   Warna Terang Bersih, Elegan & Colorful
   ========================================================================= */
html.light #bedah-kasus {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #fde68a !important; /* Border amber-200 hangat */
    box-shadow: 0 10px 30px -5px rgba(245, 158, 11, 0.08), 0 4px 15px -3px rgba(0, 0, 0, 0.03) !important;
    color: #0f172a !important;
}

html.light #bedah-kasus h3 {
    color: #0f172a !important;
}

html.light #bedah-kasus p {
    color: #475569 !important;
}

/* Baris Akordeon Kasus */
html.light .case-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

html.light .case-item:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
}

html.light .case-item h4 {
    color: #0f172a !important;
}

html.light .case-item p {
    color: #475569 !important;
}

/* Kotak Tinjauan Syariah & Standar di Dalam Akordeon Kasus */
html.light .case-item div[class*="bg-amber-950"],
html.light .case-item div[class*="border-amber-500"] {
    background-color: #fffbeb !important;
    border: 1.5px solid #fde68a !important;
    color: #78350f !important;
}

html.light .case-item div[class*="bg-amber-950"] span,
html.light .case-item div[class*="bg-amber-950"] strong {
    color: #b45309 !important;
}

html.light .case-item div[class*="bg-amber-950"] p {
    color: #92400e !important;
}

/* Kotak Kunci Pembahasan Solusi Dosen di Dalam Akordeon Kasus */
html.light .case-solution-body {
    background-color: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.05) !important;
}

html.light .case-solution-body span,
html.light .case-solution-body strong {
    color: #065f46 !important;
}

html.light .case-solution-body p {
    color: #14532d !important;
}

/* =========================================================================
   EVALUASI KUIS HOTS (#pretest) & IDENTITAS MAHASISWA
   ========================================================================= */
html.light #pretest {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06), 0 4px 12px -2px rgba(0, 0, 0, 0.03) !important;
    color: #0f172a !important;
}

html.light #pretest h2,
html.light #pretest h3 {
    color: #064e3b !important; /* Deep emerald tegas */
}

html.light #pretest p {
    color: #334155 !important;
}

/* Gerbang Identitas Mahasiswa */
html.light #quiz-identity-gate {
    background-color: #f8fafc !important;
    border: 2px solid #10b981 !important;
    box-shadow: 0 8px 25px -4px rgba(16, 185, 129, 0.12) !important;
    color: #0f172a !important;
}

html.light #quiz-identity-gate h4 {
    color: #064e3b !important;
}

html.light #quiz-identity-gate input[type="text"],
html.light #quiz-identity-gate select {
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light #quiz-identity-gate input[type="text"]:focus,
html.light #quiz-identity-gate select:focus {
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
}

/* Area Soal Kuis Aktif */
html.light #quiz-question-card {
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light #quiz-question-card p {
    color: #0f172a !important;
}

/* Badge Berwarna-Warni Lembut (Colorful Pastels) */
html.light .bg-amber-500\/20,
html.light [class*="bg-amber-500\/20"] {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #fde68a !important;
}
html.light .text-amber-300,
html.light .text-amber-400 {
    color: #b45309 !important;
}

html.light .bg-emerald-500\/20,
html.light [class*="bg-emerald-500\/20"] {
    background-color: #dcfce7 !important;
    color: #065f46 !important;
    border-color: #bbf7d0 !important;
}
html.light .text-emerald-300,
html.light .text-emerald-400 {
    color: #047857 !important;
}

html.light .bg-cyan-500\/20,
html.light .bg-teal-500\/20,
html.light [class*="bg-teal-500\/20"] {
    background-color: #cffafe !important;
    color: #0e7490 !important;
    border-color: #a5f3fc !important;
}
html.light .text-cyan-300,
html.light .text-cyan-400,
html.light .text-teal-300,
html.light .text-teal-400 {
    color: #0891b2 !important;
}

html.light .bg-rose-500\/20,
html.light [class*="bg-rose-500\/20"] {
    background-color: #ffe4e6 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}
html.light .text-rose-400,
html.light .text-rose-600 {
    color: #e11d48 !important;
}

html.light .bg-purple-500\/20,
html.light .bg-indigo-500\/20,
html.light [class*="bg-purple-500\/20"] {
    background-color: #f3e8ff !important;
    color: #6b21a8 !important;
    border-color: #e9d5ff !important;
}
html.light .text-purple-300,
html.light .text-purple-400,
html.light .text-indigo-300,
html.light .text-indigo-400 {
    color: #7c3aed !important;
}

/* Tombol Modal Kunci Pembahasan Dosen */
html.light button[onclick*="openDosenAuthModal"] {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}
html.light button[onclick*="openDosenAuthModal"]:hover {
    background-color: #fde68a !important;
    color: #78350f !important;
}

/* Footer Elegan & Bersih */
html.light footer {
    background-color: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
html.light footer strong {
    color: #0f172a !important;
}

/* =========================================================================
   PERFECTION & HARMONY: HERO CARD WHITE TEXT PRESERVATION (LIGHT & DARK)
   ========================================================================= */

/* Hero Banner dan Kontainer Gradien Gelap WAJIB Mempertahankan Teks Putih Bersih di Mode Terang */
html.light .hero-banner,
html.light [class*="from-emerald-900"],
html.light [class*="from-emerald-800"] {
    color: #ffffff !important;
}

html.light .hero-banner h1,
html.light [class*="from-emerald-900"] h1,
html.light [class*="from-emerald-800"] h1,
html.light .hero-banner h2,
html.light [class*="from-emerald-900"] h2,
html.light [class*="from-emerald-800"] h2,
html.light .hero-banner h3,
html.light [class*="from-emerald-900"] h3,
html.light [class*="from-emerald-800"] h3,
html.light .hero-banner p,
html.light [class*="from-emerald-900"] p,
html.light [class*="from-emerald-800"] p,
html.light .hero-banner span,
html.light [class*="from-emerald-900"] span,
html.light [class*="from-emerald-800"] span {
    color: #ffffff !important;
}

html.light [class*="from-emerald-900"] .text-emerald-100,
html.light [class*="from-emerald-800"] .text-emerald-100 {
    color: #d1fae5 !important;
}

html.light [class*="from-emerald-900"] .text-emerald-200,
html.light [class*="from-emerald-800"] .text-emerald-200 {
    color: #a7f3d0 !important;
}

html.light [class*="from-emerald-900"] .text-amber-300,
html.light [class*="from-emerald-800"] .text-amber-300,
html.light [class*="from-emerald-900"] .text-amber-400,
html.light [class*="from-emerald-800"] .text-amber-400 {
    color: #fcd34d !important;
}

html.light [class*="from-emerald-900"] button,
html.light [class*="from-emerald-800"] button,
html.light [class*="from-emerald-900"] a,
html.light [class*="from-emerald-800"] a {
    color: #ffffff !important;
}

html.light [class*="from-emerald-900"] button *,
html.light [class*="from-emerald-800"] button *,
html.light [class*="from-emerald-900"] a *,
html.light [class*="from-emerald-800"] a * {
    color: #ffffff !important;
}

/* =========================================================================
   PERFECTION & HARMONY: UNIVERSAL DARK MODE CARD & TEXT ENGINE
   Mencegah Kartu Putih Menyilaukan di Mode Gelap
   ========================================================================= */

/* Seluruh Kartu Putih Otomatis Menjadi Permukaan Gelap Elegan di Mode Gelap */
html.dark header,
html.dark .bg-white {
    background-color: #0b1320 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
}

html.dark nav.bg-slate-100\/95,
html.dark .bg-slate-100 {
    background-color: #090f1b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .bg-slate-50 {
    background-color: #060913 !important;
}

html.dark .text-slate-900 {
    color: #f8fafc !important;
}

html.dark .text-slate-800 {
    color: #e2e8f0 !important;
}

html.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

html.dark .text-slate-600 {
    color: #94a3b8 !important;
}

html.dark .text-slate-500 {
    color: #64748b !important;
}

html.dark .border-slate-200,
html.dark .border-slate-300 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Tab Bar Modul 02 di Mode Gelap */
html.dark .tab-btn {
    color: #94a3b8 !important;
}

html.dark .tab-btn:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark .tab-btn.active {
    background-color: #0b1320 !important;
    color: #34d399 !important;
    border-bottom: 3px solid #10b981 !important;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .tab-btn.active i {
    color: #34d399 !important;
}

/* Pilar Navigation Button di Mode Gelap */
html.dark .pilar-nav-btn {
    background-color: #0b1320 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
}

html.dark .pilar-nav-btn.active-pilar {
    background-color: #111d30 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.25), 0 0 0 1px #10b981 !important;
}

/* =========================================================================
   POLISH & FINESSE: ALL BG-SLATE-50 / BG-SLATE-100 OPACITIES IN DARK MODE
   Menghilangkan Seluruh Kontainer Abu-abu Terang / Putih di Mode Gelap
   ========================================================================= */

html.dark [class*="bg-slate-50"],
html.dark td.bg-slate-50,
html.dark div.bg-slate-50 {
    background-color: #0b1320 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark [class*="bg-slate-100"],
html.dark td.bg-slate-100,
html.dark div.bg-slate-100 {
    background-color: #0e1726 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark tr.hover\:bg-slate-50:hover,
html.dark tr:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark li.hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark select {
    background-color: #0b1320 !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

/* Pilar Navigation Inactive Buttons in Dark Mode */
html.dark .pilar-nav-btn:not(.active-pilar) {
    background-color: rgba(11, 19, 32, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #94a3b8 !important;
}

html.dark .pilar-nav-btn:not(.active-pilar):hover {
    background-color: rgba(17, 29, 48, 0.8) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    color: #f8fafc !important;
}


/* ==========================================================================
   Light Mode Consistency Safeguard (Zero Intrusive Dark Containers)
   ========================================================================== */
html.light .bg-slate-900:not(footer):not(.keep-dark) {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

html.light .bg-slate-800:not(footer):not(.keep-dark) {
    background-color: #f8fafc !important;
    color: #1e293b !important;
    border-color: #cbd5e1 !important;
}

html.light .border-slate-800:not(footer) {
    border-color: #e2e8f0 !important;
}

html.light .border-slate-700:not(footer) {
    border-color: #cbd5e1 !important;
}


/* =========================================================================
 * ZERO-FRAME FIX: REMOVE ANY BORDER / OUTLINE FROM HEADER TITLE LINK
 * ========================================================================= */
header a[href*="index.html"],
header a[href*="index.html"]:focus,
header a[href*="index.html"]:active,
header a[href*="index.html"]:hover,
.main-header-bar a[href*="index.html"],
.main-header-bar a[href*="index.html"]:focus,
.main-header-bar a[href*="index.html"]:active,
.main-header-bar a[href*="index.html"]:hover,
html.light header a[href*="index.html"],
html.light header a[href*="index.html"]:focus,
html.light header a[href*="index.html"]:active,
html.light header a[href*="index.html"]:hover,
html.light .main-header-bar a[href*="index.html"],
html.light .main-header-bar a[href*="index.html"]:focus,
html.light .main-header-bar a[href*="index.html"]:active,
html.light .main-header-bar a[href*="index.html"]:hover {
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* =========================================================================
 * FIX READABILITY: DRAF ARTIKEL JURNAL ILMIAH LENGKAP BADGE
 * Menjamin kontras tinggi dan teks terbaca sangat jelas di tema terang & gelap
 * ========================================================================= */
.journal-draft-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background-color: rgba(6, 78, 59, 0.75) !important;
    border: 1px solid rgba(251, 191, 36, 0.6) !important;
    color: #fef08a !important; /* Gold lembut terang di mode gelap */
    backdrop-filter: blur(8px) !important;
}

html.light .journal-draft-badge {
    background-color: rgba(2, 44, 34, 0.85) !important; /* Deep emerald pekat berlatar kontras */
    border: 1.5px solid #f59e0b !important; /* Border amber-500 tegas */
    color: #fef08a !important; /* Kuning emas terang 100% terbaca di atas latar hijau */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html.light .journal-draft-badge i {
    color: #fbbf24 !important;
}

html.light .journal-draft-badge span {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
}


/* =========================================================================
 * MOBILE-FIRST HEADER ARCHITECTURE & ANTI-OVERLAP RULES
 * Mencegah tabrakan visual dan overflow pada resolusi smartphone (320px - 640px)
 * ========================================================================= */
@media (max-width: 639px) {
    /* Header bar height fluid */
    header .main-header-bar-container,
    .main-header-bar > div:first-child {
        height: auto !important;
        min-height: 3.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Pastikan tombol Bab Sebelumnya dan Bab Selanjutnya tetap ramping & proporsional */
    .header-nav-btn {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.6875rem !important; /* 11px */
    }

    /* Brand title and badge stack nicely on extra small screens */
    .header-brand-title {
        font-size: 0.8125rem !important; /* 13px */
        line-height: 1.2 !important;
    }
}