: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;
    }
}

/* =========================================================================
 * Mobile Hamburger Menu Ergonomic Touch Targets (40px Min Dimension)
 * ========================================================================= */
#mobile-hamburger-btn, #mobile-menu-btn {
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
    #mobile-hamburger-btn, #mobile-menu-btn {
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
    }
}
html.light #mobile-hamburger-btn,
html.light #mobile-menu-btn {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}
html.light #mobile-hamburger-btn:hover,
html.light #mobile-menu-btn:hover {
    background-color: #d1fae5 !important;
    border-color: #10b981 !important;
    color: #047857 !important;
}

/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.0 — PRIORITAS 1: MOBILE-FIRST & RESPONSIVITAS
 * Berlaku global untuk Portal, Modul 01-16, dan Template Master
 * ========================================================================= */

/* P1.1 — Anti iOS Zoom: Input/select minimal 16px di layar sentuh */
@media (max-width: 640px) {
    input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="search"], select, textarea {
        font-size: 16px !important;
    }
}

/* P1.2 — Touch Target Minimum 44x44px (WCAG 2.5.5 / Apple HIG) */
@media (pointer: coarse) {
    .quiz-dot {
        min-width: 2.75rem !important;
        min-height: 2.75rem !important;
    }
    .mobile-nav-item {
        min-height: 3rem;
    }
    .tab-btn {
        min-height: 2.75rem;
    }
    .btn {
        min-height: 2.75rem;
    }
    .accordion-header {
        min-height: 3.25rem;
    }
}

/* P1.3 — Anti Horizontal Scroll Breakout di Layar Sempit */
@media (max-width: 640px) {
    html, body {
        overflow-x: clip;
    }
    img, canvas, video, iframe, table {
        max-width: 100%;
        height: auto;
    }
    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
    }
    /* Teks Arab panjang (QS. Al-Baqarah 282) tidak boleh memecah layout */
    .arabic-text, .verse-word {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* P1.4 — Kompresi Header 3-Tier di Smartphone: lega tanpa tumpang tindih */
@media (max-width: 640px) {
    header .max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .header-nav-btn {
        height: 2.25rem !important;
    }
    /* Sembunyikan divider vertikal di layar sangat sempit (< 360px) */
    @media (max-width: 359px) {
        .header-nav-btn span {
            font-size: 0.625rem !important;
        }
    }
}

/* P1.5 — Quiz Dots: Rapih Wrap & Scroll Halus di Mobile */
@media (max-width: 640px) {
    .dot-nav {
        justify-content: center;
        gap: 0.5rem;
        padding: 0.25rem;
    }
}

/* P1.6 — Bottom Nav: Safe-area & tidak menutupi konten interaktif */
.mobile-bottom-nav {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 640px) {
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Modal & toast harus tampil di atas bottom nav */
    .modal-overlay {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
}

/* P1.7 — Tab Bar Navigasi Materi: momentum scrolling iOS */
nav.overflow-x-auto, .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
@media (max-width: 640px) {
    .tab-btn {
        scroll-snap-align: start;
    }
}


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.0 — PRIORITAS 2: HARMONISASI TEMA TERANG-GELAP
 * Transisi mulus, zero flicker, zero dark leak, fokus keyboard terlihat
 * ========================================================================= */

/* P2.1 — Transisi Tema Global yang Halus (Anti Kedip Saat Toggle) */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease,
                color 0.25s ease, box-shadow 0.3s ease, fill 0.3s ease !important;
    transition-delay: 0s !important;
}

/* P2.2 — Focus Ring Konsisten (Keyboard Navigation, WCAG 2.4.7) */
:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
    border-radius: 0.5rem;
}
html.light :focus-visible {
    outline-color: #059669;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* P2.3 — Sinkronisasi meta theme-color dinamis via CSS (browser modern) */
html { color-scheme: dark; }
html.light { color-scheme: light; }

/* P2.4 — Proteksi Kebocoran Gelap Terakhir: teks putih di atas permukaan terang */
html.light .glass-panel .text-white:not(.keep-white),
html.light .glass-card .text-white:not(.keep-white),
html.light .modal-box .text-white:not(.keep-white),
html.light .bg-white .text-white:not(.keep-white) {
    color: #0f172a !important;
}

/* P2.5 — Scrollbar light/dark selaras dengan permukaan aktif */
html.light ::-webkit-scrollbar-track { background: #f1f5f9; }
html.light ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
html.light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* P2.6 — Seleksi Teks Terbaca di Kedua Tema */
::selection { background: rgba(16, 185, 129, 0.35); color: inherit; }
html.light ::selection { background: rgba(5, 150, 105, 0.2); color: #0f172a; }


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.0 — PRIORITAS 3: MICRO-INTERACTIONS & ANIMASI
 * Hover, scroll, toast, timer, back-to-top, reveal-on-scroll
 * ========================================================================= */

/* P3.1 — Kartu Pilar & Kartu Materi: terangkat + glow emerald elegan */
.glass-card, .case-item, .pilar-nav-btn, .quiz-opt-label {
    will-change: transform;
}
html.light .pilar-nav-btn:hover:not(.active-pilar) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4) !important;
}
.pilar-nav-btn:hover:not(.active-pilar) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -6px rgba(16, 185, 129, 0.25);
}
.pilar-nav-btn {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* P3.2 — Pilihan Jawaban Kuis: feedback tekan yang memuaskan */
.quiz-opt-label {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease, background-color 0.2s ease,
                box-shadow 0.25s ease, color 0.2s ease;
}
.quiz-opt-label:active {
    transform: scale(0.985);
}
.quiz-opt-label.selected-opt {
    animation: selectPulse 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes selectPulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.02); }
    100% { transform: scale(1.01); }
}

/* P3.3 — Tombol Aksi Utama: subtle lift on hover */
.btn-primary, .header-nav-btn {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease, filter 0.2s ease,
                background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-primary:hover {
    transform: translateY(-1.5px);
}
.btn-primary:active, .header-nav-btn:active {
    transform: scale(0.96) translateY(0);
}

/* P3.4 — Reveal-on-Scroll: konten muncul halus saat digulir (IntersectionObserver di theme-provider.js) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}
/* Fallback: jika JS mati, konten tetap tampil */
.no-js .reveal-on-scroll { opacity: 1; transform: none; }
/* Hormati pengguna yang mengurangi animasi (vestibular disorder) */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
    .glass-card:hover, .pilar-nav-btn:hover, .btn-primary:hover { transform: none; }
    .quiz-opt-label.selected-opt { animation: none; }
    html { scroll-behavior: auto; }
}

/* P3.5 — Back-to-Top: fade + slide in/out elegan */
#back-to-top {
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease, box-shadow 0.25s ease !important;
}
#back-to-top.hidden {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    pointer-events: none;
}
#back-to-top:not(.hidden) {
    opacity: 1;
    transform: translateY(0) scale(1);
}
#back-to-top:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.45);
}

/* P3.6 — Toast Offline Queue: slide-in halus dari kanan atas */
#offline-queue-toast {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    max-width: min(24rem, calc(100vw - 2rem));
}
@media (max-width: 640px) {
    #offline-queue-toast {
        left: 1rem;
        right: 1rem;
        top: 4.5rem;
    }
}

/* P3.7 — Timer Kuis: denyut halus saat waktu menipis (< 60 detik) */
.timer-badge.timer-critical {
    animation: timerPulse 1s ease-in-out infinite;
    background: rgba(244, 63, 94, 0.15) !important;
    color: #fb7185 !important;
    border-color: rgba(244, 63, 94, 0.4) !important;
}
html.light .timer-badge.timer-critical {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}
@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .timer-badge.timer-critical { animation: none; }
}

/* P3.8 — Progress Bar Timer: transisi lebar mulus per detik */
#quiz-progress-bar, .quiz-progress-bar, [id*="progress-bar"] {
    transition: width 0.6s linear, background-color 0.3s ease;
}

/* P3.9 — Kartu Quiz: entrance animation lebih hidup */
.quiz-card.quiz-active {
    animation: quizFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes quizFadeIn {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* P3.10 — Tab Navigasi Materi: indikator aktif bergeser halus */
.tab-btn {
    transition: color 0.2s ease, background-color 0.2s ease,
                border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s ease, transform 0.15s ease;
}
.tab-btn:active {
    transform: scale(0.97);
}

/* P3.11 — Accordion Bedah Kasus: chevron berputar saat terbuka */
.accordion-header .accordion-chevron,
.accordion-header i.fa-chevron-down,
.accordion-header i.fa-angle-down {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-header.open .accordion-chevron,
.accordion-header[aria-expanded="true"] .accordion-chevron,
.accordion-header.open i.fa-chevron-down,
.accordion-header[aria-expanded="true"] i.fa-chevron-down,
.accordion-header.open i.fa-angle-down,
.accordion-header[aria-expanded="true"] i.fa-angle-down {
    transform: rotate(180deg);
}

/* P3.12 — Sertifikat & Kartu Hasil: reveal progresif saat skor keluar */
#quiz-result-card, #result-shot, #score-banner {
    animation: resultReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes resultReveal {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* P3.13 — Modal: entrance scale+fade sinkron dengan overlay */
.modal-overlay {
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.modal-box {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.25s ease, border-color 0.25s ease !important;
}

/* P3.14 — Badge & Chip: micro-bounce saat pertama muncul */
.chip, .timer-badge {
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* P3.15 — Loading Spinner: fade out halus */
#global-loading-spinner {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* P3.16 — Ripple halus pada tombol aksi utama (driver JS: theme-provider.js) */
.btn-primary,
.header-nav-btn {
    position: relative;
    overflow: hidden;
}
.btn-primary::before,
.header-nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255, 255, 255, 0.35) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.btn-primary:active::before,
.header-nav-btn:active::before {
    opacity: 1;
    transition: opacity 0s;
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary::before,
    .header-nav-btn::before { display: none; }
}


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.1 — PRIORITAS 4: AKSESIBILITAS (a11y)
 * Berlaku global via theme-provider.js (injected), hormat WCAG 2.1 AA
 * ========================================================================= */

/* P4.1 — Skip Link: lompat ke konten utama via keyboard (WCAG 2.4.1) */
.taa-skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 400;
    padding: 0.65rem 1.1rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #059669, #0d9488);
    color: #ffffff !important;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px -6px rgba(5, 150, 105, 0.5);
    transform: translateY(-160%);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.taa-skip-link:focus,
.taa-skip-link:focus-visible {
    transform: translateY(0);
    opacity: 1;
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* P4.2 — Font-Size Adjuster (A- / A+): skala root, ramah tunanetra parsial */
html.taa-font-scaled { font-size: var(--taa-root-font, 100%); }
.taa-font-adjuster {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}
.taa-font-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
    color: #cbd5e1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.taa-font-btn:hover { background: rgba(16, 185, 129, 0.18); color: #34d399; }
.taa-font-btn:active { transform: scale(0.9); }
.taa-font-btn:disabled { opacity: 0.4; cursor: not-allowed; }
html.light .taa-font-adjuster { background: #f1f5f9; border-color: #cbd5e1; }
html.light .taa-font-btn { color: #475569; }
html.light .taa-font-btn:hover { background: #d1fae5; color: #047857; }

/* P4.3 — ARIA live region (status kuis dibacakan screen reader) */
.taa-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.1 — PRIORITAS 5: UX KUIS & EVALUASI
 * ========================================================================= */

/* P5.1 — Indikator Status Jaringan (sinyal hijau/kuning/merah) */
.taa-net-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: monospace;
    border: 1px solid transparent;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}
.taa-net-indicator .taa-net-dot {
    width: 0.5rem; height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 currentColor;
}
.taa-net-online {
    background: rgba(16, 185, 129, 0.14);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.35);
}
.taa-net-online .taa-net-dot { background: #10b981; animation: netPulse 2.4s ease-in-out infinite; }
.taa-net-offline {
    background: rgba(244, 63, 94, 0.14);
    color: #fb7185;
    border-color: rgba(244, 63, 94, 0.35);
}
.taa-net-offline .taa-net-dot { background: #f43f5e; }
.taa-net-slow {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}
.taa-net-slow .taa-net-dot { background: #f59e0b; animation: netPulse 1.4s ease-in-out infinite; }
html.light .taa-net-online { background: #dcfce7; color: #047857; border-color: #a7f3d0; }
html.light .taa-net-offline { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
html.light .taa-net-slow { background: #fef3c7; color: #b45309; border-color: #fde68a; }
@keyframes netPulse {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
    50% { box-shadow: 0 0 0 4px transparent; opacity: 0.6; }
}

/* P5.2 — Resume Position: banner "lanjutkan baca" yang muncul halus */
.taa-resume-toast {
    position: fixed;
    left: 1rem; right: 1rem;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    max-width: 26rem;
    margin-left: auto; margin-right: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: rgba(11, 19, 32, 0.96);
    border: 1px solid rgba(52, 211, 153, 0.4);
    box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #e2e8f0;
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    pointer-events: none;
}
.taa-resume-toast.taa-resume-show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.taa-resume-toast .taa-resume-text { font-size: 0.75rem; line-height: 1.35; flex: 1; min-width: 0; }
.taa-resume-toast .taa-resume-text strong { color: #34d399; display: block; font-size: 0.8125rem; margin-bottom: 0.1rem; }
.taa-resume-btn {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, background-color 0.2s ease;
}
.taa-resume-btn:active { transform: scale(0.94); }
.taa-resume-btn.taa-resume-go { background: linear-gradient(135deg, #059669, #0d9488); color: #ffffff; }
.taa-resume-btn.taa-resume-dismiss { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
html.light .taa-resume-toast { background: rgba(255, 255, 255, 0.98); border-color: #a7f3d0; color: #0f172a; box-shadow: 0 12px 34px -8px rgba(0, 0, 0, 0.18); }
html.light .taa-resume-toast .taa-resume-text strong { color: #047857; }
html.light .taa-resume-btn.taa-resume-dismiss { background: #f1f5f9; color: #64748b; }
@media (min-width: 640px) {
    .taa-resume-toast { left: auto; right: 1.5rem; bottom: 2rem; margin: 0; }
}

/* P5.3 — Konfirmasi Submit: dialog anti salah-klik */
.taa-confirm-overlay {
    position: fixed; inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.taa-confirm-overlay.taa-confirm-open { opacity: 1; pointer-events: auto; }
.taa-confirm-box {
    width: 100%;
    max-width: 24rem;
    padding: 1.5rem;
    border-radius: 1.5rem;
    background: #0b1320;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    color: #e2e8f0;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.taa-confirm-overlay.taa-confirm-open .taa-confirm-box { transform: scale(1); }
.taa-confirm-icon {
    width: 3.5rem; height: 3.5rem;
    margin: 0 auto 0.9rem;
    border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.taa-confirm-title { font-size: 1.05rem; font-weight: 800; color: #ffffff; margin-bottom: 0.4rem; }
.taa-confirm-msg { font-size: 0.8125rem; line-height: 1.5; color: #94a3b8; margin-bottom: 1.25rem; }
.taa-confirm-actions { display: flex; gap: 0.6rem; }
.taa-confirm-actions button {
    flex: 1;
    padding: 0.7rem;
    border-radius: 0.875rem;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, filter 0.2s ease;
}
.taa-confirm-actions button:active { transform: scale(0.96); }
.taa-confirm-cancel { background: rgba(255, 255, 255, 0.08); color: #cbd5e1; border-color: rgba(255, 255, 255, 0.15) !important; }
.taa-confirm-cancel:hover { background: rgba(255, 255, 255, 0.14); }
.taa-confirm-ok { background: linear-gradient(135deg, #059669, #0d9488); color: #ffffff; box-shadow: 0 6px 18px -4px rgba(5, 150, 105, 0.5); }
.taa-confirm-ok:hover { filter: brightness(1.08); }
html.light .taa-confirm-box { background: #ffffff; border-color: #cbd5e1; color: #0f172a; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2); }
html.light .taa-confirm-title { color: #0f172a; }
html.light .taa-confirm-msg { color: #64748b; }
html.light .taa-confirm-cancel { background: #f1f5f9; color: #475569; border-color: #cbd5e1 !important; }

/* P5.4 — Animasi Reveal Skor Progresif (hitung naik + pop) */
@keyframes taaScorePop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.taa-score-animating { animation: taaScorePop 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.taa-score-counting { transition: color 0.3s ease; }


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.1 — PRIORITAS 6: NAVIGASI & WAYFINDING
 * ========================================================================= */

/* P6.1 — Progress Bar Baca (reading progress) di puncak viewport */
.taa-read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    z-index: 90;
    background: linear-gradient(90deg, #059669, #10b981, #14b8a6, #22d3ee);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
    transition: width 0.1s linear;
    pointer-events: none;
}

/* P6.2 — Badge Progres Bab (Bab X dari 16) — jalur TENGAH-BAWAH.
   Non-interaktif, jadi diletakkan di tengah agar tidak bertabrakan dengan
   kontrol ukuran font (kiri) maupun back-to-top/tombol cari (kanan). */
.taa-chapter-progress {
    position: fixed;
    bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    right: auto;
    transform: translate(-50%, 8px);
    z-index: 44;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 800;
    font-family: monospace;
    background: rgba(11, 19, 32, 0.9);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #a7f3d0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.taa-chapter-progress.taa-cp-show { opacity: 1; transform: translate(-50%, 0); }
.taa-chapter-progress .taa-cp-track {
    width: 2.5rem; height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.taa-chapter-progress .taa-cp-fill { height: 100%; background: #34d399; border-radius: 2px; transition: width 0.4s ease; }
html.light .taa-chapter-progress { background: rgba(255, 255, 255, 0.95); border-color: #a7f3d0; color: #047857; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.12); }
html.light .taa-chapter-progress .taa-cp-track { background: #e2e8f0; }
@media (min-width: 640px) { .taa-chapter-progress { bottom: 1.5rem; left: 50%; right: auto; } }

/* P6.3 — Scroll-Spy: tab aktif mengikuti seksi yang sedang dibaca */
.tab-btn.taa-scrollspy-active {
    color: #059669 !important;
    background-color: rgba(16, 185, 129, 0.08) !important;
}
.tab-btn.taa-scrollspy-active::after { width: 60% !important; }
html.dark .tab-btn.taa-scrollspy-active { color: #34d399 !important; background-color: rgba(52, 211, 153, 0.1) !important; }

/* P6.4 — Sorotan hasil pencarian global (highlight match) */
.taa-search-hit {
    background: rgba(251, 191, 36, 0.35);
    color: inherit;
    border-radius: 0.25rem;
    padding: 0 0.15rem;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5);
    scroll-margin-top: 6rem;
}
html.light .taa-search-hit { background: #fde68a; box-shadow: 0 0 0 1px #f59e0b; }

/* P6.5 — Global Search Bar (portal lintas pertemuan) */
.taa-search-wrap { position: relative; flex: 1; min-width: 0; max-width: 22rem; }
.taa-search-input {
    width: 100%;
    padding: 0.5rem 0.85rem 0.5rem 2.25rem !important;
    border-radius: 9999px !important;
    font-size: 0.8125rem !important;
}
.taa-search-wrap .taa-search-icon {
    position: absolute;
    left: 0.8rem; top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.8125rem;
    pointer-events: none;
}
.taa-search-count {
    position: absolute;
    right: 0.75rem; top: 50%;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: monospace;
    color: #34d399;
    pointer-events: none;
}

/* P6.6 — Search FAB (tombol cari mengambang) — jalur KANAN, DI ATAS back-to-top
   (back-to-top: bottom-20 = 80px, tinggi 44px) agar tidak bertumpuk. */
.taa-search-fab {
    position: fixed;
    right: 1rem;
    left: auto;
    bottom: calc(8.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 44;
    width: 2.5rem; height: 2.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9999px;
    background: rgba(11, 19, 32, 0.9);
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: #a7f3d0;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.taa-search-fab:hover { transform: translateY(-2px) scale(1.05); color: #34d399; }
.taa-search-fab:active { transform: scale(0.92); }
html.light .taa-search-fab { background: rgba(255,255,255,0.95); border-color: #a7f3d0; color: #047857; box-shadow: 0 6px 18px -6px rgba(0,0,0,0.12); }
@media (min-width: 640px) { .taa-search-fab { right: 1.5rem; left: auto; bottom: 5rem; } }

/* P6.7 — Search Bar Overlay (in-page find & highlight) */
.taa-searchbar {
    position: fixed;
    top: 0.6rem; left: 50%;
    transform: translate(-50%, -160%);
    z-index: 350;
    width: min(94vw, 30rem);
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 9999px;
    background: rgba(11, 19, 32, 0.97);
    border: 1px solid rgba(52, 211, 153, 0.45);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    opacity: 0;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
    pointer-events: none;
}
.taa-searchbar.taa-searchbar-open { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.taa-searchbar input {
    flex: 1; min-width: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #f8fafc !important;
    font-size: 0.875rem !important;
    padding: 0.35rem 0.5rem !important;
}
.taa-searchbar input::placeholder { color: #64748b; }
.taa-search-bar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.taa-search-bar-icon {
    color: #34d399;
    font-size: 0.9rem;
    flex-shrink: 0;
    padding-left: 0.35rem;
}
.taa-search-count {
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: monospace;
    color: #94a3b8;
    min-width: 3.2rem;
    text-align: center;
    flex-shrink: 0;
}
.taa-searchbar .taa-font-btn {
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.taa-searchbar .taa-font-btn:hover { background: rgba(16,185,129,0.2); color: #34d399; }
.taa-searchbar .taa-font-btn:active { transform: scale(0.9); }
.taa-search-hit.taa-search-current { background: #34d399 !important; color: #04231a !important; box-shadow: 0 0 0 2px rgba(52,211,153,0.6) !important; }
html.light .taa-searchbar { background: rgba(255,255,255,0.98); border-color: #10b981; box-shadow: 0 16px 40px -10px rgba(0,0,0,0.2); }
html.light .taa-searchbar input { color: #0f172a !important; }
html.light .taa-searchbar .taa-font-btn { background: #f1f5f9; color: #475569; }
html.light .taa-search-count { color: #64748b; }

/* P6.8 — Hormat reduced-motion untuk seluruh fitur v1.1 */
@media (prefers-reduced-motion: reduce) {
    .taa-skip-link, .taa-resume-toast, .taa-confirm-box, .taa-confirm-overlay,
    .taa-chapter-progress, .taa-read-progress, .taa-searchbar, .taa-search-fab {
        transition: none !important;
    }
    .taa-net-online .taa-net-dot, .taa-net-slow .taa-net-dot { animation: none !important; }
    .taa-score-animating { animation: none !important; }
}

/* P4.2b — Font adjuster disembunyikan di layar sempit (header sudah padat; pakai zoom OS) */
@media (max-width: 639px) {
    .taa-font-adjuster { display: none !important; }
}

/* P5.1b — Jarak indikator jaringan terhadap elemen sebelahnya */
.taa-net-indicator { margin-left: 0.4rem; }


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.2 — PRIORITAS 7: TIPOGRAFI & KALIGRAFI ARAB
 * Sistem tampilan bersifat aditif: geometri chip P03 (inline) tetap otoritatif.
 * Atribut lang/dir dilengkapi otomatis via theme-provider.js (tanpa edit HTML).
 * ========================================================================= */

/* P7.1 — Slot Arabic display (04/template/P05-16): teks berharakat lapang */
.arabic-display {
    font-family: 'Amiri', 'Traditional Arabic', serif;
    direction: rtl;
    unicode-bidi: isolate;
    line-height: 2.4;
    letter-spacing: 0 !important;
    word-spacing: 0.1em;
    text-wrap: pretty;
    font-feature-settings: "cv01" on, "ss01" on;
}
html.light .arabic-display { color: #065f46 !important; }

/* P7.2 — Perkuat .arabic-text bersama: harakat tak bertumpuk & tak ter-spacing */
.arabic-text {
    letter-spacing: 0 !important;
    word-spacing: 0.08em;
    line-height: 2.2;
    text-wrap: pretty;
}

/* P7.3 — Chip kata interaktif: kursor + fokus keyboard jelas (klik tetap milik modul) */
.verse-word { cursor: pointer; }
.verse-word:focus-visible {
    outline: 2px solid #10b981 !important;
    outline-offset: 3px !important;
    border-radius: 0.4rem;
}

/* P7.4 — Seleksi teks Arab bernuansa zamrud */
.arabic-text::selection, .arabic-display::selection, .verse-word::selection {
    background: rgba(16, 185, 129, 0.4);
}


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.2 — PRIORITAS 8: PRINT STYLESHEET GLOBAL
 * Satu aturan cetak untuk Portal + 16 modul: hemat tinta, rapi, lengkap.
 * ========================================================================= */
@media print {
    /* P8.1 — Sembunyikan seluruh chrome aplikasi & widget injeksi */
    .taa-read-progress, .taa-chapter-progress, .taa-search-fab, .taa-searchbar,
    .taa-resume-toast, .taa-font-adjuster, #taa-font-controls, #taa-skip-link,
    #taa-live-region, #offline-queue-toast, #global-loading-spinner,
    #version-guard-toast, #print-manager-toast, .taa-confirm-overlay,
    #meeting-access-locked-modal, #meeting-locked-banner, .taa-net-indicator,
    .ambient-orb { display: none !important; }

    /* P8.2 — Paksa tema terang hemat tinta */
    html, html.light, html.dark, body { background: #ffffff !important; color: #000000 !important; }
    .glass-panel, .glass-card, .modal-box, .case-item, .case-solution-body,
    #pretest, #quiz-identity-gate, #quiz-result-card, #result-shot, #score-banner,
    .quiz-card, #quiz-question-card, #bedah-kasus {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #999999 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    h1, h2, h3, h4, h5, h6, p, li, td, th, span, strong, label {
        color: #000000 !important;
        text-shadow: none !important;
    }
    .quiz-opt-label, .quiz-dot, .quiz-dot.active, .quiz-dot.filled,
    .quiz-opt-label.selected-opt, .chip, .timer-badge, .opt-letter-badge {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid #666666 !important;
        box-shadow: none !important;
    }

    /* P8.3 — Buka seluruh akordeon: materi yang terlipat ikut tercetak */
    .accordion-content {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* P8.4 — Cetak SEMUA soal kuis bertumpuk (bahan belajar), bukan 1 soal aktif */
    #quiz-form .quiz-card, .quiz-card {
        display: block !important;
        break-inside: avoid;
        margin-bottom: 0.8rem;
    }

    /* P8.5 — Jaga ayat & kartu tidak terbelah halaman */
    .arabic-display, .arabic-text, .case-item, #quiz-identity-gate {
        break-inside: avoid;
    }
    h2, h3 { break-after: avoid; }

    /* P8.6 — Margin halaman + tampilkan URL tautan luar */
    @page { margin: 12mm; }
    main a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.7em;
        color: #333333 !important;
    }
}


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.2 — PRIORITAS 9: PERCEIVED PERFORMANCE
 * Tanpa menyentuh tag <script> modul (area Kilo): murni CSS + auto-JS.
 * ========================================================================= */

/* P9.1 — Lewati render seksi di luar viewport (krusial untuk P03 566KB) */
main > section {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* P9.2 — Hemat data: matikan orbs dekoratif saat mode Save-Data */
@media (prefers-reduced-data: reduce) {
    .ambient-orb { display: none !important; }
}

/* P9.3 — Utilitas skeleton shimmer (dipakai otomatis/future use) */
.taa-skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.25);
    border-radius: 0.5rem;
    min-height: 1rem;
}
.taa-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: taaShimmer 1.4s infinite;
}
@keyframes taaShimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .taa-skeleton::after { animation: none !important; }
    main > section { content-visibility: visible; }
}


/* =========================================================================
 * UI/UX ENHANCEMENT LAYER v1.2 — PRIORITAS 10: NORMALISASI CROSS-MODUL
 * Audit 10-Nov: header-nav-btn & back-to-top identik di P01-P04+template.
 * Sisa Mikro: cegah wrap label tombol di layar sempit + gambar global aman.
 * ========================================================================= */
.header-nav-btn, .tab-btn { white-space: nowrap; }
img { max-width: 100%; height: auto; }
.taa-net-text { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; }

/* P6.7b — Searchbar inner & sub-elements (missing dari JS engine P4-P6) */
.taa-searchbar-inner {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.taa-searchbar-icon {
    color: #34d399;
    font-size: 0.9rem;
    flex-shrink: 0;
    padding-left: 0.35rem;
}
.taa-searchbar-btn {
    width: 1.9rem;
    height: 1.9rem;
    min-width: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(255,255,255,0.08);
    color: #cbd5e1;
    cursor: pointer;
    border: none;
    font-size: 0.8rem;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.taa-searchbar-btn:hover { background: rgba(16,185,129,0.2); color: #34d399; }
.taa-searchbar-btn:active { transform: scale(0.9); }
html.light .taa-searchbar-btn { background: #f1f5f9; color: #475569; }
.taa-searchbar-count {
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: monospace;
    color: #94a3b8;
    min-width: 3.2rem;
    text-align: center;
    flex-shrink: 0;
}
.taa-searchbar-hint {
    font-size: 0.625rem;
    font-weight: 700;
    color: #64748b;
    font-family: monospace;
    white-space: nowrap;
    flex-shrink: 0;
}
html.light .taa-searchbar-hint { color: #94a3b8; }
html.light .taa-searchbar-count { color: #64748b; }

/* ==========================================================================
   HUKUM BISNIS ISLAM (HBI) SPECIFIC TOKENS & SIMULATOR ENHANCEMENTS
   ========================================================================== */

/* Gold & Amber Law Accents */
.glow-border-gold { border: 1.5px solid rgba(245, 158, 11, 0.6) !important; box-shadow: 0 0 30px -6px rgba(245, 158, 11, 0.3); }
html.light .glow-border-gold { border: 1.5px solid #d97706 !important; box-shadow: 0 0 25px -6px rgba(217, 119, 6, 0.25); }

.glow-border-amber { border: 1.5px solid rgba(251, 191, 36, 0.5) !important; box-shadow: 0 0 25px -6px rgba(251, 191, 36, 0.25); }
html.light .glow-border-amber { border: 1.5px solid #f59e0b !important; box-shadow: 0 0 20px -6px rgba(245, 158, 11, 0.2); }

.text-gold-gradient {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.light .text-gold-gradient {
  background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Akad Validator & Sharia Simulator Elements */
.validator-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
html.light .validator-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.status-badge-sah {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}
html.light .status-badge-sah {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.status-badge-fasid {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
html.light .status-badge-fasid {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.status-badge-batil {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}
html.light .status-badge-batil {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Klausul Baku X-Ray Lens */
.clause-box {
  border-left: 4px solid #f59e0b;
  background: rgba(30, 41, 59, 0.5);
  padding: 1rem;
  border-radius: 0.5rem;
}
html.light .clause-box {
  background: #f8fafc;
  border-left-color: #d97706;
  border: 1px solid #e2e8f0;
  border-left-width: 4px;
}