/* Strict role and visibility enforcement */
.hidden,
#sidebar .nav-item.hidden,
#sidebar .hidden,
.role-admin.hidden,
.role-panitia.hidden,
.role-timekeeper.hidden {
    display: none !important;
}

body:not(.is-admin) .role-admin:not(.nav-item) {
    display: none !important;
}

body:not(.is-admin):not(.is-panitia) .role-panitia:not(.nav-item) {
    display: none !important;
}

body {
            background-color: #f0f4f8;
            color: #0f172a;
            overflow-x: hidden;
            font-family: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        input,
        textarea,
        select,
        button {
            font-family: inherit;
        }

        .exot-card {
            background-color: #ffffff;
            border: 1px solid #1e293b;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .exot-header-border {
            border-bottom: 2px solid #1e293b;
        }

        .exot-table-header {
            border-top: 2px solid #1e293b;
            border-bottom: 2px solid #1e293b;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* Animation */
        .loader {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #1d4ed8;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .toast-enter {
            animation: slideInRight 0.3s ease-out forwards;
        }

        .toast-leave {
            animation: fadeOut 0.3s ease-in forwards;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

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

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        .nav-item.active {
            background-color: #e0f2fe;
            color: #1d4ed8;
            font-weight: 600;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-out forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .animate-pulse-fast {
            animation: pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        .skeleton-box {
            background-color: #e2e8f0;
            border-radius: 4px;
        }

        /* Role Based Visibility */
        body.is-guru .admin-action,
        body.is-panitia .admin-action,
        body.is-timekeeper .admin-action,
        body.is-readonly .admin-action {
            display: none !important;
        }

        body.is-panitia .aksi-column,
        body.is-timekeeper .aksi-column,
        body.is-readonly .aksi-column {
            display: none !important;
        }

        /* Sticky Action Column (Aksi) */
        .aksi-column {
            position: sticky;
            right: 0;
            z-index: 10;
            box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.05);
        }

        th.aksi-column {
            background-color: white;
            z-index: 20;
        }

        td.aksi-column {
            background-color: white;
        }

        tr:hover td.aksi-column {
            background-color: #f9fafb;
            /* Tailwind gray-50 */
        }

        .dark tr:hover td.aksi-column {
            background-color: #1e293b;
            /* Fallback for dark if needed */
        }

        /* Print Styles */
        @media print {
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            html,
            body {
                height: auto !important;
                overflow: visible !important;
                width: 100% !important;
                display: block !important;
            }

            body>* {
                display: none !important;
            }

            #printAreaSchedule {
                display: block !important;
                position: static !important;
                width: 100% !important;
                height: auto !important;
                overflow: visible !important;
                visibility: visible !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            #printAreaSchedule * {
                visibility: visible !important;
                overflow: visible !important;
            }

            .page-break-container {
                display: block !important;
                width: 100% !important;
                height: 277mm !important;
                max-height: 277mm !important;
                overflow: hidden !important;
                page-break-after: always !important;
                break-after: page !important;
                page-break-inside: avoid !important;
                margin: 0 !important;
                padding: 4mm !important;
                box-sizing: border-box !important;
                transform-origin: top left !important;
            }

            .page-break-container:last-child {
                page-break-after: avoid !important;
                break-after: avoid !important;
            }

            /* Perkecil semua teks agar muat */
            .page-break-container table {
                font-size: 7pt !important;
                width: 100% !important;
            }

            .page-break-container th,
            .page-break-container td {
                padding: 2px 4px !important;
                line-height: 1.2 !important;
            }

            /* Header lebih compact */
            .page-break-container h1 {
                font-size: 14pt !important;
                margin-bottom: 2px !important;
            }

            .page-break-container h2 {
                font-size: 9pt !important;
            }

            .page-break-container p,
            .page-break-container span,
            .page-break-container div {
                font-size: 7pt !important;
                line-height: 1.2 !important;
            }

            /* Header banner lebih tipis */
            .page-break-container [style*="background-color: #1a56db"],
            .page-break-container [style*="background:#1a56db"] {
                padding: 6px 10px !important;
                margin-bottom: 8px !important;
            }

            @page {
                size: A4 portrait;
                margin: 8mm;
            }
        }

        .page-break-container {
            display: block !important;
            width: 100% !important;
            page-break-after: always !important;
            break-after: page !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        /* ===== MOBILE RESPONSIVE FIXES ===== */
        @media (max-width: 640px) {
            #headerBadge { font-size: 10px !important; padding: 4px 8px !important; }
            header button[onclick="globalRefreshData()"], header button[onclick="logout()"] { display: flex !important; min-width: 28px !important; }
            #logoSidebar { min-width: 32px !important; min-height: 32px !important; }
            #logoLogin { display: block !important; min-width: 40px !important; }
            #statTotal, #statHadir, #statPanitia, #statPenguji, #statSDinilai, #statBDinilai { font-size: 1.4rem !important; }
            .h-64, .h-72 { height: 180px !important; }
            td.aksi-column .flex { gap: 4px !important; }
            td.aksi-column button, td.aksi-column a { padding: 5px !important; font-size: 10px !important; }
            .fixed.inset-0.z-50 > .flex { padding: 8px !important; }
            .max-w-lg { max-width: calc(100vw - 16px) !important; }
            #toastContainer { right: 8px !important; left: 8px !important; top: 8px !important; }
            #toastContainer > div { min-width: auto !important; width: 100% !important; }
            #page-schedule .flex.flex-wrap.justify-end { flex-direction: column !important; }
            #page-schedule .flex.flex-wrap.justify-end button { width: 100% !important; justify-content: center !important; }
            #page-input-nilai .flex.flex-col.lg\:flex-row { flex-direction: column !important; }
            #page-input-nilai .w-full.lg\:w-2\/3 { min-height: 300px !important; }
            #page-input-nilai .w-full.lg\:w-1\/3 { width: 100% !important; }
        }
        @media (min-width: 641px) and (max-width: 1023px) {
            #sidebar { width: 260px !important; }
            .grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
            #page-input-nilai .flex.flex-col.lg\:flex-row { flex-direction: column !important; }
            #page-input-nilai .w-full.lg\:w-1\/3 { width: 100% !important; }
        }
        #logoLogin { display: block !important; object-fit: contain !important; }
        header .flex.items-center.gap-3.sm\:gap-4.text-gray-500 { gap: 8px !important; flex-shrink: 0 !important; }
        .nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
        .max-h-\[90vh\] { max-height: 90dvh !important; }
        @media screen {
            #printAreaSchedule { overflow-x: auto !important; }
            .page-break-container { margin-bottom: 2rem !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 16px !important; }
        }

        #modalAkun,
        #modalSiswa,
        #modalDokumen,
        #modalPengumuman,
        #modalMappingJadwal,
        #modalManualSchedule,
        #modalViewSoal,
        #modalCekJadwal,
        #modalAbout,
        #modalQuestionEditor,
        #modalQuranPicker,
        #modalPreviewQuestion,
        #modalImageLightbox {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            z-index: 9999 !important;
            overflow-y: auto !important;
            overscroll-behavior: contain !important;
        }

        #modalAkun.hidden,
        #modalSiswa.hidden,
        #modalDokumen.hidden,
        #modalPengumuman.hidden,
        #modalMappingJadwal.hidden,
        #modalManualSchedule.hidden,
        #modalViewSoal.hidden,
        #modalCekJadwal.hidden,
        #modalAbout.hidden,
        #modalQuestionEditor.hidden,
        #modalQuranPicker.hidden,
        #modalPreviewQuestion.hidden,
        #modalImageLightbox.hidden {
            display: none !important;
        }

        #modalCekJadwal:not(.hidden),
        #modalAbout:not(.hidden) {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 1.5rem !important;
            box-sizing: border-box !important;
            background-color: rgba(15, 23, 42, 0.65) !important;
            backdrop-filter: blur(8px) !important;
            -webkit-backdrop-filter: blur(8px) !important;
        }

        #modalCekJadwal > div,
        #modalAbout > div {
            position: relative !important;
            inset: auto !important;
            width: min(100%, 44rem) !important;
            max-width: 44rem !important;
            max-height: calc(100dvh - 3rem) !important;
            border-radius: 1.25rem !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4) !important;
            margin: auto !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

        #modalCekJadwal input,
        #modalCekJadwal button,
        #modalCekJadwal table,
        #modalCekJadwal .grid,
        #modalCekJadwal .rounded-xl {
            max-width: 100% !important;
        }

        #modalCekJadwal *,
        #modalCekJadwal *::before,
        #modalCekJadwal *::after {
            box-sizing: border-box !important;
        }

        #modalCekJadwal .min-w-full {
            min-width: 0 !important;
            width: 100% !important;
        }

        #modalCekJadwal th,
        #modalCekJadwal td {
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        #modalCekJadwalResult,
        #cekJadwalResult {
            min-width: 0 !important;
            overflow-x: hidden !important;
        }

        #modalAkun > .flex,
        #modalSiswa > .flex,
        #modalDokumen > .flex,
        #modalPengumuman > .flex,
        #modalMappingJadwal > .flex,
        #modalManualSchedule > .flex,
        #modalViewSoal > .flex,
        #modalQuestionEditor > .flex,
        #modalQuranPicker > .flex,
                #prevQCard.is-fullscreen {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-width: 100vw !important;
            max-height: 100dvh !important;
            border-radius: 0 !important;
            margin: 0 !important;
            z-index: 10000 !important;
        }

        #modalPreviewQuestion > .flex {
            min-height: 100vh !important;
            min-height: 100dvh !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 1rem !important;
        }

        #modalAkun .exot-card,
        #modalSiswa .exot-card,
        #modalDokumen .exot-card,
        #modalPengumuman .exot-card,
        #modalMappingJadwal .exot-card,
        #modalManualSchedule .exot-card {
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            width: min(100%, 36rem) !important;
            max-height: calc(100dvh - 2rem) !important;
        }

        #modalMappingJadwal .exot-card,
        #modalManualSchedule .exot-card {
            width: min(100%, 72rem) !important;
            max-width: calc(100vw - 2rem) !important;
        }

        #schedule_mapping_table_container table,
        #manual_schedule_table_container table {
            border-collapse: separate !important;
            border-spacing: 0 !important;
        }

        #schedule_mapping_table_container th,
        #manual_schedule_table_container th {
            position: sticky !important;
            top: 0 !important;
            z-index: 5 !important;
        }

        #schedule_mapping_table_container input,
        #manual_schedule_table_container input {
            min-width: 10rem !important;
        }

        #schedule_mapping_table_container .mapping-group-input,
        #manual_schedule_table_container .manual-small-input {
            min-width: 5.5rem !important;
        }

        #modalAkun form,
        #modalSiswa form,
        #modalDokumen form,
        #modalPengumuman form,
        #modalMappingJadwal form,
        #modalManualSchedule form {
            display: flex !important;
            flex-direction: column !important;
            min-height: 0 !important;
            height: auto !important;
            max-height: inherit !important;
        }

        #modalAkun form > .overflow-y-auto,
        #modalSiswa form > .overflow-y-auto,
        #modalDokumen form > .overflow-y-auto,
        #modalPengumuman form > .overflow-y-auto,
        #modalMappingJadwal form > .overflow-y-auto,
        #modalManualSchedule form > .overflow-y-auto {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            overflow-y: auto !important;
        }

        #modalAkun form > .border-t,
        #modalSiswa form > .border-t,
        #modalDokumen form > .border-t,
        #modalPengumuman form > .border-t,
        #modalMappingJadwal form > .border-t,
        #modalManualSchedule form > .border-t {
            flex: 0 0 auto !important;
            position: sticky !important;
            bottom: 0 !important;
            z-index: 2 !important;
            box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06) !important;
        }

        body.modal-open {
            overflow: hidden !important;
        }

        @media (max-width: 640px) {
            #modalAkun > .flex,
            #modalSiswa > .flex,
            #modalDokumen > .flex,
            #modalPengumuman > .flex,
            #modalMappingJadwal > .flex,
            #modalManualSchedule > .flex,
            #modalViewSoal > .flex {
                align-items: flex-start !important;
                padding: 0.5rem !important;
            }

            #modalAkun .exot-card,
            #modalSiswa .exot-card,
            #modalDokumen .exot-card,
            #modalPengumuman .exot-card,
            #modalMappingJadwal .exot-card,
            #modalManualSchedule .exot-card {
                max-height: calc(100dvh - 1rem) !important;
            }

            #modalCekJadwal:not(.hidden),
            #modalAbout:not(.hidden) {
                align-items: center !important;
                padding: 1rem !important;
            }

            #modalCekJadwal > div,
            #modalAbout > div {
                width: 100% !important;
                max-width: min(100%, 42rem) !important;
                max-height: calc(100dvh - 2rem) !important;
                border-radius: 1rem !important;
            }

            #modalCekJadwal .p-5 {
                padding: 0.75rem !important;
            }

            #modalCekJadwal .px-5 {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }

            #modalCekJadwal h3 {
                font-size: 1.05rem !important;
                line-height: 1.25 !important;
            }

            #modalCekJadwal #inputCekJadwal {
                font-size: 16px !important;
                padding-top: 0.9rem !important;
                padding-bottom: 0.9rem !important;
            }

            #modalCekJadwal .grid {
                grid-template-columns: minmax(0, 1fr) !important;
            }

            #modalCekJadwal table {
                min-width: 0 !important;
                width: 100% !important;
                table-layout: fixed !important;
            }

            #modalCekJadwal [class*="min-w-"] {
                min-width: 0 !important;
            }

            #modalCekJadwal .whitespace-nowrap {
                white-space: normal !important;
            }
        }

        /* ===== TAB PILL STYLING ===== */
        .tab-bar {
            display: flex; align-items: center; gap: 4px;
            background: #f1f5f9; border-radius: 10px;
            padding: 4px; overflow-x: auto;
        }
        .tab-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 6px 14px; border-radius: 7px;
            font-size: 12px; font-weight: 700;
            color: #64748b; background: transparent;
            border: none; cursor: pointer;
            transition: all 0.18s; white-space: nowrap; flex-shrink: 0;
        }
        .tab-btn:hover { background: #e2e8f0; color: #1e293b; }
        .tab-btn.active-tab { background: #fff; color: #1d4ed8; box-shadow: 0 1px 4px rgba(0,0,0,0.12); }

        /* ===== VISUAL POLISH ===== */
        tbody tr:hover td { background-color: #f8fafc !important; }
        .nav-item.active {
            background: linear-gradient(to right, #dbeafe, #eff6ff) !important;
            color: #1d4ed8 !important; font-weight: 700 !important;
            box-shadow: inset 3px 0 0 #1d4ed8;
        }

        /* ===== INPUT NILAI DESKTOP TUNING ===== */
        @media (min-width: 1280px) {
            #page-input-nilai {
                max-width: calc(100vw - 4px);
                margin: 0 auto;
                height: auto !important;
                min-height: calc(100vh - 5.75rem);
            }
            #page-input-nilai .input-layout {
                gap: 14px !important;
                min-height: 0;
                overflow: visible !important;
                align-items: flex-start;
            }
            #page-input-nilai .preview-panel {
                width: 100% !important;
                min-height: 560px;
            }
            #page-input-nilai .score-panel {
                width: 100% !important;
                position: sticky;
                top: 10px;
                max-height: calc(100vh - 6.5rem);
                overflow: hidden !important;
                align-self: flex-start;
            }
            #page-input-nilai .score-panel .panel-body {
                padding: 10px 12px;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                flex: 1 1 auto;
            }
            #page-input-nilai .score-panel textarea,
            #page-input-nilai .score-panel input[type="number"] {
                font-size: 14px;
            }
            
/* Modern clean layout for Input Nilai */
#page-input-nilai {
    height: auto !important;
    min-height: calc(100vh - 6rem) !important;
}
#page-input-nilai .preview-panel {
    border-radius: 18px !important;
    overflow: hidden !important;
}
#page-input-nilai .score-panel {
    border-radius: 18px !important;
    overflow: hidden !important;
}
#page-input-nilai .pdf-preview-shell {
    background: #f1f5f9 !important;
    width: 100% !important;
    height: 68vh !important;
    min-height: 560px !important;
    padding: 0 !important;
    border-radius: 12px;
    overflow: hidden !important;
}
#page-input-nilai .pdf-preview-frame {
    width: 100% !important;
    height: 100% !important;
    min-height: 560px !important;
    transform: none !important;
    border: none !important;
    background: #ffffff !important;
}

        }

        /* ===== FUTURISTIC SIMPLE REDESIGN LAYER =====
           Non-destructive visual refresh. Existing IDs, classes, and JS hooks remain intact. */
        @media screen {
            :root {
                --fx-ink: #0b1220;
                --fx-muted: #64748b;
                --fx-line: rgba(148, 163, 184, 0.26);
                --fx-panel: rgba(255, 255, 255, 0.82);
                --fx-primary: #2563eb;
                --fx-primary-2: #06b6d4;
                --fx-radius: 22px;
                --fx-radius-sm: 14px;
                --fx-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
                --fx-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
                --fx-glow: 0 0 0 1px rgba(37, 99, 235, 0.08), 0 20px 60px rgba(37, 99, 235, 0.12);
            }

            .theme-future {
                background:
                    radial-gradient(circle at 4% 3%, rgba(37, 99, 235, 0.16), transparent 30rem),
                    radial-gradient(circle at 92% 7%, rgba(6, 182, 212, 0.14), transparent 24rem),
                    linear-gradient(135deg, #f8fbff 0%, #eef4ff 44%, #f8fafc 100%) !important;
                color: var(--fx-ink) !important;
                letter-spacing: -0.01em;
            }

            .theme-future::before {
                content: "";
                position: fixed;
                inset: 0;
                z-index: -1;
                pointer-events: none;
                background-image:
                    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
                background-size: 44px 44px;
                mask-image: radial-gradient(circle at 50% 0%, black, transparent 72%);
            }

            .theme-future #appPage,
            .theme-future #appPage > .flex-1,
            .theme-future #mainContent { background: transparent !important; }
            .theme-future #mainContent { padding-bottom: 2rem; }

            .theme-future header {
                height: 72px !important;
                border: 0 !important;
                border-bottom: 1px solid var(--fx-line) !important;
                background: rgba(255, 255, 255, 0.78) !important;
                backdrop-filter: blur(18px) saturate(1.3);
                -webkit-backdrop-filter: blur(18px) saturate(1.3);
                box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
            }

            .theme-future #headerBadge {
                border-radius: 999px !important;
                background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary-2)) !important;
                box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22) !important;
                padding: 0.45rem 0.9rem !important;
                letter-spacing: 0.04em;
            }

            .theme-future #topRoleBadge {
                border: 1px solid var(--fx-line) !important;
                background: rgba(255, 255, 255, 0.64) !important;
                box-shadow: var(--fx-shadow-soft);
            }

            .theme-future #sidebar {
                border-right: 1px solid var(--fx-line) !important;
                background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,250,255,0.82)) !important;
                backdrop-filter: blur(20px) saturate(1.35);
                -webkit-backdrop-filter: blur(20px) saturate(1.35);
                box-shadow: 14px 0 42px rgba(15, 23, 42, 0.08) !important;
            }

            .theme-future #sidebar .h-16 {
                height: 72px !important;
                border-bottom: 1px solid var(--fx-line) !important;
            }

            .theme-future #logoSidebar,
            .theme-future #logoLogin { filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.22)); }

            .theme-future .nav-item {
                border-radius: 16px !important;
                color: #526173 !important;
                transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
            }

            .theme-future .nav-item:hover {
                background: rgba(37, 99, 235, 0.07) !important;
                color: var(--fx-primary) !important;
                transform: translateX(3px);
            }

            .theme-future .nav-item.active {
                background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(6, 182, 212, 0.12)) !important;
                color: var(--fx-primary) !important;
                box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14), 0 12px 26px rgba(37, 99, 235, 0.12) !important;
            }

            .theme-future .nav-item.active::after {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 999px;
                margin-left: auto;
                background: var(--fx-primary-2);
                box-shadow: 0 0 18px var(--fx-primary-2);
            }

            .theme-future .exot-card,
            .theme-future #loginPage .bg-white,
            .theme-future .relative.bg-white.rounded-xl,
            .theme-future .tab-bar {
                border: 1px solid var(--fx-line) !important;
                border-radius: var(--fx-radius) !important;
                background: var(--fx-panel) !important;
                box-shadow: var(--fx-shadow) !important;
                backdrop-filter: blur(16px) saturate(1.25);
                -webkit-backdrop-filter: blur(16px) saturate(1.25);
            }

            .theme-future .exot-card:hover { box-shadow: var(--fx-glow) !important; }

            .theme-future .exot-header-border,
            .theme-future .exot-table-header,
            .theme-future .border-b,
            .theme-future .border-t,
            .theme-future .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--fx-line) !important; }

            .theme-future .exot-header-border {
                background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(248,250,252,.56)) !important;
            }

            .theme-future .rounded,
            .theme-future .rounded-md,
            .theme-future .rounded-lg,
            .theme-future .rounded-xl { border-radius: var(--fx-radius-sm) !important; }
            .theme-future .rounded-3xl { border-radius: 30px !important; }

            .theme-future table { border-collapse: separate !important; border-spacing: 0 !important; }
            .theme-future thead tr { background: rgba(241, 245, 249, 0.64) !important; }
            .theme-future th { color: #334155 !important; letter-spacing: 0.06em; }
            .theme-future tbody tr { transition: background .16s ease, transform .16s ease; }
            .theme-future tbody tr:hover td { background: rgba(37, 99, 235, 0.045) !important; }
            .theme-future .aksi-column,
            .theme-future th.aksi-column,
            .theme-future td.aksi-column,
            .theme-future tr:hover td.aksi-column {
                background: rgba(255, 255, 255, 0.86) !important;
                box-shadow: -12px 0 24px -22px rgba(15, 23, 42, 0.55) !important;
            }

            .theme-future input,
            .theme-future textarea,
            .theme-future select {
                border: 1px solid rgba(148, 163, 184, 0.38) !important;
                background-color: rgba(255, 255, 255, 0.78) !important;
                border-radius: 14px !important;
                color: var(--fx-ink) !important;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
                transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
            }

            .theme-future input:focus,
            .theme-future textarea:focus,
            .theme-future select:focus {
                outline: none !important;
                border-color: rgba(37, 99, 235, 0.68) !important;
                box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255,255,255,0.75) !important;
                background-color: #ffffff !important;
            }

            .theme-future button,
            .theme-future a[role="button"] { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important; }
            .theme-future button:hover,
            .theme-future a[role="button"]:hover { transform: translateY(-1px); }
            .theme-future button:active,
            .theme-future a[role="button"]:active { transform: translateY(0) scale(0.99); }

            .theme-future .bg-blue-600,
            .theme-future .hover\:bg-blue-700:hover,
            .theme-future #btnLogin {
                background: linear-gradient(135deg, var(--fx-primary), var(--fx-primary-2)) !important;
                border: 0 !important;
                box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24) !important;
            }
            .theme-future .bg-purple-600,
            .theme-future .hover\:bg-purple-700:hover { background: linear-gradient(135deg, #7c3aed, #2563eb) !important; border: 0 !important; }
            .theme-future .bg-green-600,
            .theme-future .hover\:bg-green-700:hover { background: linear-gradient(135deg, #10b981, #06b6d4) !important; border: 0 !important; }
            .theme-future .bg-orange-600,
            .theme-future .hover\:bg-orange-700:hover { background: linear-gradient(135deg, #f97316, #f59e0b) !important; border: 0 !important; }
            .theme-future .bg-red-600,
            .theme-future .hover\:bg-red-700:hover { background: linear-gradient(135deg, #ef4444, #f97316) !important; border: 0 !important; }
            .theme-future .bg-cyan-600,
            .theme-future .hover\:bg-cyan-700:hover { background: linear-gradient(135deg, #0891b2, #2563eb) !important; border: 0 !important; }

            .theme-future .bg-white.border:not(button),
            .theme-future .border.bg-white:not(button),
            .theme-future button.border:not([onclick*="modal"]):not([onclick*="import"]):not([onclick*="downloadTemplate"]):not([class*="bg-"]):not(.admin-action) {
                background: rgba(255, 255, 255, 0.76) !important;
                border-color: var(--fx-line) !important;
                box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
            }

            .theme-future .tab-bar {
                padding: 6px !important;
                gap: 6px !important;
                background: rgba(238, 244, 255, 0.72) !important;
            }
            .theme-future .tab-btn {
                border-radius: 999px !important;
                padding: 0.55rem 1rem !important;
                font-weight: 800 !important;
                color: var(--fx-muted) !important;
            }
            .theme-future .tab-btn.active-tab {
                background: #ffffff !important;
                color: var(--fx-primary) !important;
                box-shadow: 0 10px 22px rgba(37, 99, 235, 0.13) !important;
            }

            .theme-future #dashboard-admin .grid.grid-cols-2 > .exot-card,
            .theme-future #page-backup .grid > .border {
                border: 1px solid var(--fx-line) !important;
                border-radius: 20px !important;
                background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.68)) !important;
                box-shadow: var(--fx-shadow-soft) !important;
            }

            .theme-future #statTotal,
            .theme-future #statHadir,
            .theme-future #statPanitia,
            .theme-future #statPenguji,
            .theme-future #statSDinilai,
            .theme-future #bkpSiswa,
            .theme-future #bkpUser,
            .theme-future #bkpNilai,
            .theme-future #bkpAbsen {
                background: linear-gradient(135deg, var(--fx-ink), var(--fx-primary));
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent !important;
            }
            .theme-future #statBDinilai {
                background: linear-gradient(135deg, #ef4444, #f59e0b);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent !important;
            }

            .theme-future #loginPage {
                background: radial-gradient(circle at 84% 8%, rgba(6, 182, 212, 0.18), transparent 26rem), linear-gradient(135deg, #f8fbff 0%, #eef4ff 100%) !important;
            }
            .theme-future #loginPage .hidden.lg\:flex {
                background-image: linear-gradient(135deg, rgba(11, 18, 32, 0.88), rgba(30, 64, 175, 0.74)), none !important;
                border-radius: 0 36px 36px 0;
                overflow: hidden;
            }
            .theme-future #loginPage .hidden.lg\:flex::after {
                content: "";
                position: absolute;
                inset: auto 8% 10% auto;
                width: 220px;
                height: 220px;
                background: radial-gradient(circle, rgba(6, 182, 212, .26), transparent 70%);
                filter: blur(4px);
                pointer-events: none;
            }
            .theme-future #btnLogin { border-radius: 16px !important; letter-spacing: .04em; }

            .theme-future .bg-\[\#eef2ff\],
            .theme-future .bg-blue-50,
            .theme-future .bg-blue-50\/50,
            .theme-future .bg-\[\#f8fafc\] {
                background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(6, 182, 212, 0.06)) !important;
                border-color: rgba(37, 99, 235, 0.18) !important;
            }
            .theme-future .bg-yellow-50 { background: rgba(245, 158, 11, 0.10) !important; border-color: rgba(245, 158, 11, 0.22) !important; }
            .theme-future .bg-green-100,
            .theme-future .bg-green-50 { background: rgba(16, 185, 129, 0.10) !important; border-color: rgba(16, 185, 129, 0.22) !important; }
            .theme-future .bg-red-50,
            .theme-future .bg-red-100 { background: rgba(239, 68, 68, 0.09) !important; border-color: rgba(239, 68, 68, 0.20) !important; }

            .theme-future #readerInline,
            .theme-future .pdf-preview-shell {
                border-radius: 22px !important;
                border: 1px solid rgba(37, 99, 235, 0.16) !important;
                background: radial-gradient(circle at center, rgba(37, 99, 235, 0.12), transparent 60%), #0f172a !important;
                box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 20px 44px rgba(15, 23, 42, 0.13) !important;
            }

            @media (max-width: 640px) {
                .theme-future header { height: 64px !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
                .theme-future #mainContent { padding: 0.75rem !important; }
                .theme-future .exot-card,
                .theme-future #loginPage .bg-white,
                .theme-future .relative.bg-white.rounded-xl { border-radius: 18px !important; }
                .theme-future .tab-bar { border-radius: 18px !important; }
            }
        }
    

        /* ===== FULL RESPONSIVE FUTURISTIC REDESIGN ===== */
        :root {
            --bg-main: #07111f;
            --bg-soft: rgba(15, 23, 42, 0.68);
            --panel: rgba(255, 255, 255, 0.74);
            --panel-strong: rgba(255, 255, 255, 0.9);
            --border-soft: rgba(148, 163, 184, 0.28);
            --line-soft: rgba(148, 163, 184, 0.22);
            --text-main: #e2e8f0;
            --text-dark: #0f172a;
            --text-soft: #64748b;
            --primary-start: #2563eb;
            --primary-end: #06b6d4;
            --accent: #60a5fa;
            --shadow-soft: 0 18px 50px rgba(2, 6, 23, 0.10);
            --shadow-panel: 0 22px 60px rgba(2, 6, 23, 0.16);
            --radius-xl: 26px;
            --radius-lg: 20px;
            --radius-md: 16px;
            --radius-sm: 12px;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-height: 100vh;
            background:
                radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 28%),
                radial-gradient(circle at 100% 20%, rgba(34, 211, 238, 0.18), transparent 22%),
                linear-gradient(180deg, #0b1220 0%, #111827 16%, #e7edf6 16%, #eef4fb 100%) !important;
            color: var(--text-dark);
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 28px 28px;
            mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 78%);
            opacity: 0.55;
            z-index: 0;
        }

        #loginPage,
        #appPage,
        #sidebar,
        header,
        main,
        .page-view,
        .exot-card,
        #sidebarOverlay {
            position: relative;
            z-index: 1;
        }

        #appPage {
            background: transparent !important;
        }

        /* Generic panel system */
        .exot-card,
        #sidebar,
        header,
        .tab-bar,
        #printAreaSchedule,
        #scheduleOrderEditor,
        #scheduleValidationReport,
        #documentImportReport,
        [id^="dashboard-"] > div,
        [id^="page-"] > div:not(.page-view),
        .bg-white,
        .bg-gray-50,
        .bg-gray-50\/30,
        .bg-gray-50\/50,
        .bg-blue-50,
        .bg-blue-50\/30,
        .bg-blue-50\/50,
        .bg-green-50,
        .bg-red-50,
        .bg-white\/5,
        .bg-white\/10 {
            border-color: var(--border-soft) !important;
            box-shadow: var(--shadow-soft) !important;
        }

        .exot-card,
        .bg-white,
        .bg-gray-50,
        .bg-gray-50\/30,
        .bg-gray-50\/50,
        .bg-blue-50,
        .bg-blue-50\/30,
        .bg-blue-50\/50,
        .bg-green-50,
        .bg-red-50,
        .bg-white\/5,
        .bg-white\/10 {
            background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,255,255,0.78)) !important;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border-radius: var(--radius-lg) !important;
            border: 1px solid var(--border-soft) !important;
        }

        .exot-header-border,
        .exot-table-header,
        .border-b,
        .border-t,
        .border,
        .border-gray-100,
        .border-gray-200,
        .border-gray-300,
        .divide-y > :not([hidden]) ~ :not([hidden]) {
            border-color: var(--line-soft) !important;
        }

        /* Buttons */
        button,
        .tab-btn,
        a[class*="bg-"],
        a[class*="border"],
        .nav-item,
        [type="button"],
        [type="submit"] {
            transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
        }

        button:hover,
        .tab-btn:hover,
        .nav-item:hover,
        [type="button"]:hover,
        [type="submit"]:hover {
            transform: translateY(-1px);
        }

        .bg-blue-600,
        .hover\:bg-blue-700:hover,
        .bg-cyan-600,
        .bg-purple-600,
        .bg-green-600,
        .bg-orange-600,
        .bg-red-600 {
            background-image: linear-gradient(135deg, var(--primary-start), var(--primary-end)) !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 16px 30px rgba(37, 99, 235, 0.20) !important;
        }

        .bg-white.text-gray-700,
        .bg-white.text-blue-600,
        .bg-white.text-green-600,
        .bg-white.text-red-600,
        .bg-white.text-purple-700,
        .bg-white.text-emerald-700,
        .bg-white.text-orange-700,
        .bg-white.text-indigo-700,
        .border-gray-300.bg-white,
        .border.bg-white {
            background: rgba(255,255,255,0.82) !important;
            border: 1px solid rgba(148,163,184,0.22) !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
        }

        button:active,
        .tab-btn:active,
        .nav-item:active {
            transform: translateY(0);
        }

        /* Inputs */
        input,
        textarea,
        select {
            border-radius: 16px !important;
            border: 1px solid rgba(148, 163, 184, 0.28) !important;
            background: rgba(255, 255, 255, 0.82) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.35) !important;
        }

        input:focus,
        textarea:focus,
        select:focus {
            outline: none !important;
            border-color: rgba(37, 99, 235, 0.60) !important;
            box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255,255,255,0.35) !important;
        }

        /* Login redesign */
        #loginPage {
            background: linear-gradient(135deg, rgba(8,15,33,0.96), rgba(16,28,55,0.88) 28%, rgba(233,240,249,0.95) 28%, rgba(241,245,249,0.98) 100%) !important;
        }

        #loginPage > .hidden.lg\:flex.lg\:w-1\/2 {
            background:
                radial-gradient(circle at 20% 20%, rgba(59,130,246,0.28), transparent 24%),
                radial-gradient(circle at 80% 70%, rgba(34,211,238,0.20), transparent 24%),
                linear-gradient(155deg, #081226 0%, #122654 45%, #1d4ed8 100%) !important;
            border-radius: 0 34px 34px 0;
            overflow: hidden;
        }

        #loginPage > .w-full.lg\:w-1\/2 {
            background: transparent !important;
        }

        #loginPage .max-w-\[420px\] {
            max-width: 470px !important;
            border-radius: 32px !important;
            border: 1px solid rgba(255,255,255,0.5) !important;
            background: rgba(255,255,255,0.76) !important;
            box-shadow: 0 30px 80px rgba(15, 23, 42, 0.15) !important;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
        }

        #loginPage h1,
        #loginPage h2 {
            letter-spacing: -0.03em;
        }

        #loginPage .grid.grid-cols-2.gap-4.max-w-lg {
            gap: 14px !important;
        }

        #loginPage .grid.grid-cols-2.gap-4.max-w-lg > div {
            background: rgba(255,255,255,0.10) !important;
            border: 1px solid rgba(255,255,255,0.14) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
            border-radius: 22px !important;
        }

        /* App shell redesign */
        #sidebar {
            background: linear-gradient(180deg, rgba(8,15,33,0.93), rgba(15,23,42,0.88)) !important;
            border-right: 1px solid rgba(148,163,184,0.18) !important;
            box-shadow: 14px 0 50px rgba(2, 6, 23, 0.22) !important;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
        }

        #sidebar .border-b,
        #sidebar .border-t {
            border-color: rgba(148, 163, 184, 0.14) !important;
        }

        #sidebar h2,
        #sidebar nav button,
        #sidebar nav span,
        #sidebar .text-gray-600,
        #sidebar .text-gray-500,
        #sidebar .text-gray-800 {
            color: #dbeafe !important;
        }

        #sidebar .text-gray-500 {
            color: rgba(219, 234, 254, 0.68) !important;
        }

        #sidebar .nav-item {
            border-radius: 18px !important;
            padding-top: 14px !important;
            padding-bottom: 14px !important;
            color: rgba(226, 232, 240, 0.88) !important;
            background: transparent !important;
            border: 1px solid transparent;
        }

        #sidebar .nav-item:hover {
            background: rgba(255,255,255,0.07) !important;
            border-color: rgba(255,255,255,0.08) !important;
        }

        #sidebar .nav-item.active {
            background: linear-gradient(135deg, rgba(37,99,235,0.30), rgba(6,182,212,0.26)) !important;
            color: #ffffff !important;
            box-shadow: inset 0 0 0 1px rgba(125,211,252,0.20), 0 10px 24px rgba(6, 182, 212, 0.12) !important;
        }

        #sidebar .nav-item.active i,
        #sidebar .nav-item:hover i {
            filter: drop-shadow(0 6px 14px rgba(96,165,250,0.20));
        }

        .flex-1.flex.flex-col.h-full.w-full.overflow-hidden.relative.bg-\[\#f0f4f8\] {
            background: transparent !important;
        }

        header {
            position: sticky !important;
            top: 0;
            background: rgba(255,255,255,0.78) !important;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(148,163,184,0.18) !important;
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08) !important;
        }

        header .bg-blue-600 {
            background-image: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
            border-radius: 999px !important;
            padding-inline: 14px !important;
        }

        main {
            padding-bottom: 32px !important;
        }

        .page-view {
            animation: fadeIn .35s ease-out forwards;
        }

        .page-view > .exot-card,
        .page-view .exot-card,
        .page-view > div:not(.hidden):not(.tab-bar):not(.grid):not(.page-view) {
            border-radius: var(--radius-xl) !important;
        }

        .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 > div,
        .grid.grid-cols-1.lg\:grid-cols-2 > div,
        #page-backup .grid.grid-cols-2.md\:grid-cols-4 > div,
        #dashboard-admin .grid > div,
        #dashboard-penguji .grid > div {
            border-radius: 24px !important;
        }

        /* Tables */
        .overflow-x-auto {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(37,99,235,.35) transparent;
        }

        table {
            border-collapse: separate !important;
            border-spacing: 0 !important;
        }

        thead tr,
        .exot-table-header {
            background: rgba(248, 250, 252, 0.72) !important;
        }

        thead th {
            position: sticky;
            top: 0;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            z-index: 5;
        }

        tbody tr {
            transition: background .2s ease, transform .2s ease;
        }

        tbody tr:hover {
            transform: scale(0.998);
        }

        tbody tr:hover td {
            background: rgba(239, 246, 255, 0.72) !important;
        }

        tbody td,
        thead th {
            border-bottom: 1px solid rgba(148,163,184,0.16) !important;
        }

        th:first-child { border-top-left-radius: 16px; }
        th:last-child { border-top-right-radius: 16px; }

        td.aksi-column,
        th.aksi-column {
            background: rgba(255,255,255,0.88) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* Tabs, badges, pills */
        .tab-bar {
            border-radius: 22px !important;
            padding: 6px !important;
            background: rgba(255,255,255,0.64) !important;
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(148,163,184,0.18) !important;
        }

        .tab-btn {
            border-radius: 16px !important;
            font-weight: 800 !important;
            min-height: 40px;
            padding-inline: 16px !important;
        }

        .tab-btn.active-tab {
            background: linear-gradient(135deg, rgba(37,99,235,0.92), rgba(6,182,212,0.90)) !important;
            color: #fff !important;
            box-shadow: 0 10px 24px rgba(37,99,235,0.20) !important;
        }

        .rounded-full,
        .rounded-xl,
        .rounded-lg,
        .rounded-md,
        .rounded {
            border-radius: 16px !important;
        }

        .shadow-sm,
        .shadow,
        .shadow-lg,
        .shadow-xl {
            box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
        }

        .text-gray-900,
        .text-gray-800,
        .text-black { color: #0f172a !important; }
        .text-gray-700 { color: #334155 !important; }
        .text-gray-600,
        .text-gray-500,
        .text-gray-400 { color: #64748b !important; }

        /* Preview and score page */
        #page-input-nilai .preview-panel,
        #page-input-nilai .score-panel {
            border-radius: 28px !important;
            overflow: hidden !important;
        }

        #page-input-nilai .pdf-preview-shell {
            background:
                radial-gradient(circle at top, rgba(37,99,235,0.14), transparent 24%),
                linear-gradient(180deg, #eff6ff 0%, #e2e8f0 100%) !important;
        }

        #iframeInputSoal,
        .pdf-preview-frame {
            background: #ffffff !important;
            border-radius: 20px !important;
            box-shadow: 0 20px 48px rgba(15,23,42,.10) !important;
        }

        /* Modal redesign */
        [id^="modal"] .absolute.inset-0 {
            background: rgba(2, 6, 23, 0.48) !important;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        [id^="modal"] .relative.bg-white,
        .fixed.inset-0.z-50 .relative.bg-white,
        .fixed.inset-0.z-50 .bg-white.rounded-xl,
        .fixed.inset-0.z-50 .bg-white.rounded-3xl {
            background: rgba(255,255,255,0.82) !important;
            border: 1px solid rgba(255,255,255,0.48) !important;
            border-radius: 28px !important;
            box-shadow: 0 30px 90px rgba(15, 23, 42, 0.20) !important;
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }

        /* Schedule print workspace */
        #printAreaSchedule {
            background: rgba(255,255,255,0.68) !important;
            border-radius: 30px !important;
            border: 1px solid rgba(148,163,184,0.18) !important;
            padding: 18px !important;
        }

        /* Mobile-first comprehensive adjustments */
        @media (max-width: 1279px) {
            main {
                padding-inline: 16px !important;
            }

            #page-input-nilai {
                height: auto !important;
            }

            #page-input-nilai .input-layout {
                overflow: visible !important;
            }

            #page-input-nilai .preview-panel,
            #page-input-nilai .score-panel {
                width: 100% !important;
                min-height: auto !important;
            }
        }

        @media (max-width: 1023px) {
            #loginPage {
                background: linear-gradient(180deg, #0b1220 0%, #1d4ed8 36%, #eff6ff 36%, #f8fafc 100%) !important;
                flex-direction: column !important;
            }

            #loginPage > .hidden.lg\:flex.lg\:w-1\/2 {
                display: flex !important;
                width: 100% !important;
                min-height: auto !important;
                padding: 40px 24px 30px !important;
                border-radius: 0 0 28px 28px !important;
            }

            #loginPage > .w-full.lg\:w-1\/2 {
                width: 100% !important;
                padding: 24px 18px 36px !important;
                min-height: auto !important;
            }

            #loginPage .grid.grid-cols-2.gap-4.max-w-lg {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                max-width: 100% !important;
            }

            #sidebar {
                width: min(84vw, 320px) !important;
                height: 100dvh !important;
            }

            header {
                padding-inline: 14px !important;
            }

            #topRoleBadge {
                max-width: 180px !important;
            }

            .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-5,
            .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4,
            .grid.grid-cols-1.lg\:grid-cols-2,
            .grid.grid-cols-2.md\:grid-cols-4,
            .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 {
                gap: 14px !important;
            }

            .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            }
        }

        @media (max-width: 767px) {
            body {
                background:
                    radial-gradient(circle at top, rgba(37,99,235,0.20), transparent 24%),
                    linear-gradient(180deg, #0b1220 0%, #172554 24%, #eef4fb 24%, #f8fafc 100%) !important;
            }

            #loginPage > .hidden.lg\:flex.lg\:w-1\/2 {
                padding: 28px 18px 24px !important;
            }

            #loginPage h1 {
                font-size: clamp(2.3rem, 11vw, 3.25rem) !important;
                line-height: 1.02 !important;
            }

            #loginPage h2 {
                font-size: 1.85rem !important;
            }

            #loginPage .grid.grid-cols-2.gap-4.max-w-lg {
                grid-template-columns: 1fr !important;
            }

            #loginPage .max-w-\[420px\] {
                padding: 24px 18px !important;
                max-width: 100% !important;
            }

            #appPage {
                display: block !important;
            }

            header {
                height: auto !important;
                min-height: 64px;
                padding-top: 10px !important;
                padding-bottom: 10px !important;
            }

            main {
                padding: 14px !important;
            }

            .page-view,
            .page-view.max-w-7xl,
            .page-view.max-w-4xl,
            .page-view.max-w-3xl {
                width: 100% !important;
                max-width: 100% !important;
            }

            .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-6,
            .grid.grid-cols-1.lg\:grid-cols-2,
            .grid.grid-cols-1.md\:grid-cols-2.xl\:grid-cols-5,
            .grid.grid-cols-2.md\:grid-cols-4,
            .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4,
            .grid.grid-cols-1.sm\:grid-cols-2,
            .grid.grid-cols-1.sm\:grid-cols-2.gap-4,
            .grid.grid-cols-1.sm\:grid-cols-2.gap-3,
            .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4.gap-4 {
                grid-template-columns: 1fr !important;
            }

            .flex.flex-col.sm\:flex-row,
            .flex.flex-col.md\:flex-row,
            .flex.flex-col.lg\:flex-row,
            .flex.justify-between.items-center.px-1.sm\:px-2.flex-wrap.gap-2,
            .flex.items-center.gap-1.sm\:gap-4.text-gray-500.shrink-0,
            .flex.items-center.gap-2.sm\:gap-3.overflow-hidden,
            .flex.flex-wrap.items-center.gap-2.w-full.sm\:w-auto,
            .flex.flex-col.sm\:flex-row.items-center.gap-2.w-full.sm\:w-auto,
            .flex.flex-col.sm\:flex-row.gap-2.w-full.sm\:w-auto,
            .flex.flex-col.sm\:flex-row.sm\:items-center.gap-2,
            .flex.flex-col.lg\:flex-row.lg\:items-center.gap-3 {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .flex.items-center.gap-1.sm\:gap-4.text-gray-500.shrink-0 {
                width: 100%;
                justify-content: space-between;
            }

            .tab-bar {
                gap: 8px !important;
            }

            .tab-btn {
                min-width: max-content;
            }

            .overflow-x-auto table {
                min-width: 640px !important;
            }

            .max-w-lg,
            .max-w-3xl,
            .max-w-4xl,
            .max-w-7xl {
                max-width: 100% !important;
            }

            #page-schedule .flex.flex-wrap.justify-end.pt-2.gap-3.border-t.border-gray-100.mt-2 {
                flex-direction: column !important;
            }

            #page-schedule .flex.flex-wrap.justify-end.pt-2.gap-3.border-t.border-gray-100.mt-2 > button,
            #page-schedule .flex.flex-wrap.justify-end.pt-2.gap-3.border-t.border-gray-100.mt-2 > a {
                width: 100% !important;
                justify-content: center !important;
            }

            #page-profile .flex.flex-col.sm\:flex-row.gap-6.items-start,
            #page-backup .grid.grid-cols-1.md\:grid-cols-2,
            #page-settings .grid.grid-cols-1.sm\:grid-cols-2.md\:grid-cols-4 {
                gap: 14px !important;
            }

            [id^="modal"] .relative.bg-white,
            .fixed.inset-0.z-50 .relative.bg-white,
            .fixed.inset-0.z-50 .bg-white.rounded-xl,
            .fixed.inset-0.z-50 .bg-white.rounded-3xl {
                width: calc(100vw - 16px) !important;
                max-height: calc(100dvh - 16px) !important;
                border-radius: 24px !important;
            }
        }

        @media (max-width: 480px) {
            header .hidden.md\:inline,
            header .hidden.sm\:flex,
            .hidden.sm\:inline {
                display: none !important;
            }

            #headerBadge {
                width: 100%;
                text-align: center;
                justify-content: center;
            }

            .overflow-x-auto table {
                min-width: 560px !important;
            }

            button,
            a,
            select,
            input,
            textarea {
                font-size: 14px !important;
            }
        }



<!-- ===== CRITICAL MOBILE FIX: LOGIN + APP RESPONSIVE ===== -->

/*
   Override terakhir untuk memperbaiki tampilan HP.
   Fokus: jangan biarkan login layout menjadi 2 kolom di viewport mobile.
*/
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

#loginPage, #appPage {
  max-width: 100vw !important;
}

@media screen and (max-width: 900px) {
  body {
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #09111f 0%, #123a86 30%, #eef5ff 30%, #f8fbff 100%) !important;
  }

  /* LOGIN HARUS SATU KOLOM */
  #loginPage {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #0b1220 0%, #1d4ed8 34%, #eef5ff 34%, #f8fbff 100%) !important;
  }

  #loginPage > div:first-child,
  #loginPage > .hidden,
  #loginPage > .lg\:flex,
  #loginPage > .lg\:w-1\/2,
  #loginPage > div[class*="lg:w-1/2"] {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    padding: 24px 18px 22px !important;
    border-radius: 0 0 30px 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #loginPage > div:first-child {
    background:
      radial-gradient(circle at 20% 0%, rgba(125, 211, 252, .28), transparent 28%),
      radial-gradient(circle at 100% 60%, rgba(37, 99, 235, .38), transparent 28%),
      linear-gradient(145deg, #0b1220 0%, #163271 55%, #1d4ed8 100%) !important;
  }

  #loginPage > div:first-child > div.relative,
  #loginPage > div:first-child > .relative {
    width: 100% !important;
    max-width: 100% !important;
  }

  #loginPage > div:first-child .flex.items-center.gap-3.mb-8 {
    margin-bottom: 18px !important;
  }

  #loginPage > div:first-child h1 {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.04 !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.04em !important;
  }

  #loginPage > div:first-child p {
    font-size: 13px !important;
    margin-bottom: 20px !important;
  }

  #loginPage > div:first-child .inline-block {
    margin-bottom: 18px !important;
  }

  #loginPage > div:first-child .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #loginPage > div:first-child .grid > div {
    padding: 12px !important;
    min-height: 72px !important;
    border-radius: 20px !important;
    align-items: center !important;
  }

  #loginPage > div:first-child .grid span {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  #loginPage > div:nth-child(2),
  #loginPage > .w-full,
  #loginPage > div[class*="lg:w-1/2"]:last-child {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    height: auto !important;
    padding: 18px 14px 32px !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  #loginPage form,
  #loginPage .max-w-\[420px\],
  #loginPage > div:nth-child(2) > div {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #loginPage > div:nth-child(2) > div {
    padding: 24px 18px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  #loginPage > div:nth-child(2) h2 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.08 !important;
  }

  #loginPage input {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 15px !important;
    border-radius: 18px !important;
  }

  #loginPage button[type="submit"] {
    min-height: 56px !important;
    border-radius: 20px !important;
    font-size: 15px !important;
  }

  #loginPage .flex.items-center.justify-between.py-1 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #loginPage button[onclick="openCekJadwalModal()"] {
    white-space: nowrap !important;
  }

  /* APP MOBILE SHELL */
  #appPage {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #sidebar {
    width: min(86vw, 320px) !important;
    max-width: 86vw !important;
  }

  #appPage > div.flex-1,
  #appPage .flex-1.flex.flex-col {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  header {
    height: auto !important;
    min-height: 64px !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  header > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  header > div:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  #headerBadge {
    max-width: 44vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #topRoleBadge {
    display: none !important;
  }

  #mainContent {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .page-view,
  .page-view.max-w-7xl,
  .page-view.max-w-4xl,
  .page-view.max-w-3xl {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .exot-card,
  .page-view > div,
  .page-view .bg-white,
  .page-view .bg-gray-50,
  .page-view .tab-bar {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .grid {
    min-width: 0 !important;
  }

  #dashboard-admin .grid,
  #dashboard-penguji .grid,
  #page-backup .grid,
  #page-settings .grid,
  #page-schedule .grid,
  #page-profile .grid {
    grid-template-columns: 1fr !important;
  }

  #dashboard-admin .grid.grid-cols-2,
  #dashboard-admin .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tab-bar {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tab-btn {
    flex: 0 0 auto !important;
    min-height: 40px !important;
  }

  .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  table {
    width: max-content !important;
    min-width: 640px !important;
  }

  #page-input-nilai,
  #page-input-nilai .input-layout {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #page-input-nilai .preview-panel,
  #page-input-nilai .score-panel {
    width: 100% !important;
    min-height: 360px !important;
  }

  [id^="modal"] .flex.items-start,
  [id^="modal"] .flex.items-center,
  .fixed.inset-0.z-50 > .flex {
    align-items: flex-start !important;
    padding: 8px !important;
  }

  [id^="modal"] .relative.bg-white,
  .fixed.inset-0.z-50 .relative.bg-white {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 24px !important;
  }
}

@media screen and (max-width: 420px) {
  #loginPage > div:first-child {
    padding: 20px 14px 18px !important;
  }

  #loginPage > div:first-child .grid {
    grid-template-columns: 1fr !important;
  }

  #loginPage > div:first-child .grid > div {
    min-height: 58px !important;
  }

  #loginPage > div:nth-child(2) {
    padding: 14px 10px 26px !important;
  }

  #loginPage > div:nth-child(2) > div {
    padding: 22px 16px !important;
  }

  #loginPage .flex.items-center.justify-between.py-1 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #loginPage button[onclick="openCekJadwalModal()"] {
    justify-content: center !important;
    width: 100% !important;
  }

  #mainContent {
    padding: 10px !important;
  }

  #dashboard-admin .grid.grid-cols-2,
  #dashboard-admin .grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}



/* Final override: readability + real mobile layout */
html,
body {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  display: block !important;
  color: #0f172a !important;
  line-height: 1.5;
}

#loginPage.hidden,
#appPage.hidden {
  display: none !important;
}

#loginPage:not(.hidden) {
  display: flex !important;
}

@media screen and (min-width: 768px) {
  #loginPage:not(.hidden) {
    display: flex !important;
    align-items: stretch !important;
    background:
      radial-gradient(circle at 72% 20%, rgba(6, 182, 212, 0.18), transparent 26rem),
      linear-gradient(135deg, #f8fbff 0%, #edf5ff 52%, #e6f8ff 100%) !important;
  }

  #loginPage > .hidden.lg\:flex.lg\:w-1\/2,
  #loginPage > div:first-child {
    display: flex !important;
    width: 48% !important;
    min-height: 100dvh !important;
    padding: clamp(36px, 5vw, 72px) !important;
    background:
      linear-gradient(135deg, rgba(8, 15, 33, 0.76), rgba(29, 78, 216, 0.58)),
      none center/cover no-repeat !important;
    border-radius: 0 34px 34px 0 !important;
  }

  #loginPage > div:first-child .w-12.h-12,
  #loginPage > .hidden.lg\:flex.lg\:w-1\/2 .w-12.h-12 {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    padding: 5px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    overflow: hidden !important;
    flex: 0 0 58px !important;
  }

  #loginPage > div:first-child .relative.z-10 {
    width: 100% !important;
    max-width: 640px !important;
  }

  #loginPage > div:first-child h1 {
    font-size: clamp(48px, 4.5vw, 76px) !important;
    line-height: 1.02 !important;
  }

  #loginPage > .w-full.lg\:w-1\/2,
  #loginPage > div:nth-child(2) {
    width: 52% !important;
    min-height: 100dvh !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px !important;
  }

  #loginPage > div:nth-child(2) > div,
  #loginPage .max-w-\[420px\] {
    width: min(100%, 470px) !important;
    padding: 40px !important;
    border-radius: 28px !important;
  }

  #loginPage input:not([type="checkbox"]) {
    width: 100% !important;
    min-height: 58px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
  }

  #btnLogin {
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 18px !important;
    font-size: 17px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #logoLogin,
  #logoSidebar {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }
}

#appPage:not(.hidden) {
  display: flex !important;
  width: 100% !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

#appPage > .flex-1 {
  min-width: 0 !important;
}

#mainContent {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.page-view,
.exot-card,
.page-view > div {
  min-width: 0 !important;
}

/* Stronger text contrast */
.text-gray-400,
.text-gray-500 {
  color: #64748b !important;
}

.text-gray-600,
.text-gray-700 {
  color: #334155 !important;
}

.text-gray-800,
.text-gray-900,
.text-black,
tbody,
td {
  color: #0f172a !important;
}

input,
textarea,
select {
  color: #0f172a !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}

/* Sidebar: keep the airy look, but make labels readable */
#sidebar {
  width: 288px !important;
  max-width: 288px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-right: 1px solid rgba(148, 163, 184, 0.26) !important;
  box-shadow: 10px 0 34px rgba(15, 23, 42, 0.08) !important;
}

#sidebar h2,
#sidebar nav button,
#sidebar nav span,
#sidebar .text-gray-500,
#sidebar .text-gray-600,
#sidebar .text-gray-800 {
  color: #334155 !important;
}

#sidebar .nav-item {
  color: #334155 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#sidebar .nav-item:hover {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #bfdbfe !important;
}

#sidebar .nav-item.active {
  background: linear-gradient(135deg, #dbeafe, #ecfeff) !important;
  color: #0f172a !important;
  border-color: #93c5fd !important;
  box-shadow: inset 4px 0 0 #2563eb, 0 10px 24px rgba(37, 99, 235, 0.10) !important;
}

#sidebar .nav-item.active span,
#sidebar .nav-item:hover span {
  color: #0f172a !important;
}

header {
  min-width: 0 !important;
}

#headerBadge,
#topRoleBadge {
  color: #ffffff !important;
}

#topRoleBadge {
  background: #ffffff !important;
  color: #334155 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tables should scroll inside their card, not stretch the whole page */
.overflow-x-auto {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.overflow-x-auto > table {
  width: 100% !important;
  min-width: 600px !important;
}

th,
td {
  vertical-align: middle;
}

td {
  line-height: 1.45;
}

@media screen and (max-width: 1023px) {
  #appPage:not(.hidden) {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: row !important;
  }

  #appPage > .flex-1,
  #appPage .flex-1.flex.flex-col {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(84vw, 300px) !important;
    max-width: min(84vw, 300px) !important;
    height: 100dvh !important;
    z-index: 60 !important;
  }

  #sidebarOverlay {
    position: fixed !important;
    z-index: 50 !important;
  }

  header {
    position: sticky !important;
    top: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  header > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  header > div:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  #headerBadge {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    max-width: 48vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  header button {
    flex-shrink: 0 !important;
  }

  header button[onclick="toggleSidebar()"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 16px !important;
  }

  header .border-l {
    padding-left: 4px !important;
  }

  header .border-l button {
    padding: 7px !important;
  }

  #mainContent {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px !important;
    overflow-x: hidden !important;
  }
}

@media screen and (max-width: 767px) {
  body {
    background: #f3f7fc !important;
  }

  #loginPage:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #0b1220 0%, #1d4ed8 24%, #eef5ff 24%, #f8fbff 100%) !important;
  }

  #loginPage > .hidden.lg\:flex.lg\:w-1\/2,
  #loginPage > div:first-child {
    display: flex !important;
    width: 100% !important;
    min-height: 178px !important;
    height: auto !important;
    padding: 24px 18px 22px !important;
    border-radius: 0 0 28px 28px !important;
    background:
      linear-gradient(135deg, rgba(11, 18, 32, 0.84), rgba(30, 64, 175, 0.78)),
      none center/cover no-repeat !important;
    overflow: hidden !important;
  }

  #loginPage > div:first-child > .relative {
    width: 100% !important;
  }

  #loginPage > div:first-child .flex.items-center.gap-3.mb-8 {
    margin-bottom: 12px !important;
  }

  #loginPage > div:first-child .inline-block {
    margin-bottom: 10px !important;
  }

  #loginPage > div:first-child h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
    line-height: 1.03 !important;
    margin-bottom: 6px !important;
  }

  #loginPage > div:first-child p {
    margin-bottom: 0 !important;
    font-size: 12px !important;
  }

  #loginPage > div:first-child .grid {
    display: none !important;
  }

  header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  header > div:first-child,
  header .flex.items-center.gap-2.sm\:gap-3.overflow-hidden {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  header > div:last-child,
  header .flex.items-center.gap-1.sm\:gap-4.text-gray-500.shrink-0 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: max-content !important;
  }

  #headerBadge {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 42vw !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    font-size: 12px !important;
  }

  header button[onclick="toggleSidebar()"] span {
    display: none !important;
  }

  #loginPage > .w-full.lg\:w-1\/2,
  #loginPage > div:nth-child(2) {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 16px 14px 28px !important;
    background: transparent !important;
  }

  #loginPage .max-w-\[420px\],
  #loginPage > div:nth-child(2) > div {
    width: 100% !important;
    max-width: 430px !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  #loginPage h2 {
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
  }

  #loginPage p,
  #loginPage label,
  #loginPage button,
  #loginPage input {
    letter-spacing: 0 !important;
  }

  #loginPage input {
    min-height: 52px !important;
    font-size: 15px !important;
  }

  #loginPage input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
  }

  #loginPage .flex.items-center.justify-between.py-1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .page-view,
  .page-view.max-w-7xl,
  .page-view.max-w-4xl,
  .page-view.max-w-3xl {
    width: 100% !important;
    max-width: 100% !important;
  }

  .exot-card {
    border-radius: 16px !important;
  }

  .exot-header-border {
    gap: 10px !important;
  }

  .exot-header-border > .flex,
  #page-students .exot-header-border > div,
  #page-scores .exot-header-border > div,
  #page-documents .exot-header-border > div {
    min-width: 0 !important;
  }

  select,
  input,
  textarea,
  button {
    max-width: 100% !important;
  }

  .overflow-x-auto > table {
    min-width: 540px !important;
    font-size: 12px !important;
  }

  #page-students .overflow-x-auto > table,
  #page-attendance .overflow-x-auto > table {
    min-width: 520px !important;
  }

  th,
  td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #page-input-nilai .input-layout {
    min-height: 0 !important;
    overflow: visible !important;
  }

  #page-input-nilai .preview-panel,
  #page-input-nilai .score-panel {
    min-height: 340px !important;
  }
}

@media screen and (max-width: 420px) {
  #mainContent {
    padding: 10px !important;
  }

  #headerBadge {
    width: auto !important;
    max-width: 42vw !important;
  }

  #loginPage > div:nth-child(2) {
    padding: 10px 10px 24px !important;
  }

  #loginPage > div:first-child {
    min-height: 158px !important;
    padding: 20px 14px 18px !important;
  }

  #loginPage > div:first-child h1 {
    font-size: 30px !important;
  }

  #loginPage .flex.items-center.justify-between.py-1 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #loginPage button[onclick="openCekJadwalModal()"] {
    width: 100% !important;
    justify-content: center !important;
  }

  .overflow-x-auto > table {
    min-width: 500px !important;
  }

  th,
  td {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media screen and (min-width: 1024px) {
  #loginPage:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr) !important;
    align-items: stretch !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }

  #loginPage > div:first-child {
    width: 100% !important;
    min-height: 100vh !important;
    padding: clamp(40px, 4vw, 72px) !important;
    border-radius: 0 !important;
    justify-content: center !important;
    background:
      linear-gradient(135deg, rgba(8, 15, 33, 0.72), rgba(29, 78, 216, 0.50)),
      none center/cover no-repeat !important;
  }

  #loginPage > div:first-child > .relative {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
  }

  #loginPage > div:first-child h1 {
    max-width: 720px !important;
    font-size: clamp(54px, 5vw, 86px) !important;
    line-height: 0.98 !important;
    margin-bottom: 14px !important;
  }

  #loginPage > div:first-child p {
    margin-bottom: 42px !important;
    font-size: 16px !important;
  }

  #loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg {
    max-width: 720px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg > div {
    min-height: 62px !important;
    padding: 13px 16px !important;
    border-radius: 18px !important;
  }

  #loginPage > div:nth-child(2) {
    width: 100% !important;
    min-height: 100vh !important;
    padding: clamp(34px, 5vw, 84px) !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border-left: 1px solid rgba(148, 163, 184, 0.28) !important;
  }

  #loginPage > div:nth-child(2) > div {
    width: min(100%, 614px) !important;
    max-width: 614px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #loginPage > div:nth-child(2) > div > .mb-8 {
    margin-bottom: 34px !important;
  }

  #loginPage > div:nth-child(2) h2 {
    font-size: clamp(34px, 3vw, 48px) !important;
    line-height: 1.08 !important;
    margin-bottom: 10px !important;
  }

  #loginPage > div:nth-child(2) p {
    font-size: 16px !important;
  }

  #loginForm.space-y-4 > :not([hidden]) ~ :not([hidden]),
  #loginForm.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 22px !important;
  }

  #loginPage input:not([type="checkbox"]) {
    min-height: 64px !important;
    border-radius: 14px !important;
    border-color: rgba(148, 163, 184, 0.38) !important;
    background: #ffffff !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  #btnLogin {
    min-height: 58px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    box-shadow: none !important;
  }

  .login-map-card {
    margin-top: 22px !important;
    border-radius: 14px !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .login-map-card iframe {
    height: 116px !important;
  }

  #loginPage .mt-8 {
    margin-top: 24px !important;
  }
}



/* Stable login layout using local assets */
#loginPage:not(.hidden) {
  background:
    radial-gradient(circle at 88% 8%, rgba(6, 182, 212, 0.18), transparent 26rem),
    linear-gradient(135deg, #f8fbff 0%, #eef6ff 55%, #e9f9ff 100%) !important;
}

#loginPage #logoLogin {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#loginPage > div:first-child .w-12.h-12 {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  flex: 0 0 58px !important;
  padding: 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  overflow: hidden !important;
}

#loginPage input:not([type="checkbox"]) {
  width: 100% !important;
  min-height: 58px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 15px !important;
  border-radius: 18px !important;
}

#loginPage input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
}

#btnLogin {
  width: 100% !important;
  min-height: 58px !important;
  border-radius: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.login-map-card {
  width: 100%;
  margin: 16px 0 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.82);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.login-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 9px;
  color: #0f172a;
}

.login-map-head div {
  min-width: 0;
}

.login-map-head strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-map-kicker {
  display: block;
  margin-bottom: 2px;
  color: #2563eb;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-map-head a {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
}

.login-map-card iframe {
  display: block;
  width: 100%;
  height: 102px;
  border: 0;
  filter: saturate(0.96) contrast(0.98);
}

@media screen and (min-width: 1024px) {
  #loginPage:not(.hidden) {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  #loginPage > div:first-child {
    display: flex !important;
    width: 48% !important;
    min-height: 100vh !important;
    justify-content: center !important;
    padding: clamp(32px, 4vw, 58px) !important;
    border-radius: 0 36px 36px 0 !important;
    background:
      linear-gradient(135deg, rgba(8, 15, 33, 0.78), rgba(29, 78, 216, 0.58)),
      none center/cover no-repeat !important;
  }

  #loginPage > div:first-child > .relative {
    width: 100% !important;
    max-width: 720px !important;
  }

  #loginPage > div:first-child .flex.items-center.gap-3.mb-8 {
    margin-bottom: 18px !important;
  }

  #loginPage > div:first-child .inline-block {
    margin-bottom: 16px !important;
  }

  #loginPage > div:first-child h1 {
    font-size: clamp(44px, 4vw, 66px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 10px !important;
  }

  #loginPage > div:first-child p {
    margin-bottom: 34px !important;
  }

  #loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg {
    gap: 10px !important;
    max-width: 100% !important;
  }

  #loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg > div {
    min-height: 58px !important;
    padding: 12px 14px !important;
  }

  #loginPage > div:nth-child(2) {
    display: flex !important;
    width: 52% !important;
    min-height: 100vh !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background: transparent !important;
  }

  #loginPage > div:nth-child(2) > div {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    padding: 28px 34px 24px !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, 0.9) !important;
  }

  #loginPage > div:nth-child(2) > div > .mb-8 {
    margin-bottom: 24px !important;
  }

  #loginForm {
    gap: 16px !important;
  }

  #loginForm.space-y-4 > :not([hidden]) ~ :not([hidden]),
  #loginForm.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 16px !important;
  }

  #loginPage input:not([type="checkbox"]),
  #btnLogin {
    min-height: 54px !important;
  }

  #loginPage .mt-8 {
    margin-top: 18px !important;
  }
}

@media screen and (max-width: 1023px) {
  #loginPage:not(.hidden) {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #loginPage > div:first-child {
    display: flex !important;
    width: 100% !important;
    min-height: 176px !important;
    height: auto !important;
    padding: 24px 18px 20px !important;
    border-radius: 0 0 28px 28px !important;
    background:
      linear-gradient(135deg, rgba(8, 15, 33, 0.76), rgba(29, 78, 216, 0.6)),
      none center/cover no-repeat !important;
  }

  #loginPage > div:first-child .grid {
    display: none !important;
  }

  #loginPage > div:first-child .w-12.h-12 {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    flex-basis: 48px !important;
  }

  #loginPage > div:first-child h1 {
    font-size: clamp(30px, 8.6vw, 42px) !important;
    line-height: 1.04 !important;
    margin-bottom: 6px !important;
  }

  #loginPage > div:first-child p {
    margin-bottom: 0 !important;
  }

  .login-map-card {
    display: block !important;
    margin-top: 14px;
    border-radius: 16px;
  }

  .login-map-card iframe {
    height: 86px;
  }

  .login-map-head strong {
    font-size: 10px;
  }

  #loginPage > div:nth-child(2) {
    display: flex !important;
    width: 100% !important;
    min-height: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px 14px 30px !important;
    background: transparent !important;
  }

  #loginPage > div:nth-child(2) > div {
    width: 100% !important;
    max-width: 430px !important;
    padding: 24px 18px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }
}


<!-- ===== UNIFIED CLEAN LOGIN (FINAL) ===== -->

/* Unified single-column centered login. Hide left hero, show all in one flow. */

/* === ALL SCREENS: base reset === */
html body div#loginPage:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100vw !important;
  height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #f0f2f5 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Hide left branding panel entirely — must survive Tailwind CDN lg:flex override */
html body div#loginPage > div:first-child,
html body div#loginPage > div.hidden,
html body div#loginPage > div.lg\:flex,
html body div#loginPage > div.lg\:w-1\/2:first-child,
div#loginPage > div:first-child {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Right panel becomes full-width centered */
html body div#loginPage > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 100% !important;
  padding: 32px 16px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The form card — unified clean card */
html body div#loginPage > div:nth-child(2) > div {
  width: 100% !important;
  max-width: 460px !important;
  padding: 32px 28px 28px !important;
  margin: 0 auto !important;
  border: 1px solid #dddfe2 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Header section inside card */
html body div#loginPage > div:nth-child(2) > div > .mb-8 {
  margin-bottom: 24px !important;
  text-align: center !important;
}

html body div#loginPage > div:nth-child(2) h2 {
  font-size: 26px !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  color: #1c1e21 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

html body div#loginPage > div:nth-child(2) > div > .mb-8 p {
  font-size: 14px !important;
  color: #606770 !important;
  font-weight: 400 !important;
}

html body div#loginPage > div:nth-child(2) > div > .mb-8 > div:first-child {
  justify-content: center !important;
  margin-bottom: 8px !important;
}

/* Form spacing */
html body div#loginPage #loginForm.space-y-4 > :not([hidden]) ~ :not([hidden]),
html body div#loginPage #loginForm.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 14px !important;
}

/* Labels */
html body div#loginPage label {
  color: #1c1e21 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Input fields */
html body div#loginPage input:not([type="checkbox"]) {
  width: 100% !important;
  min-height: 50px !important;
  padding: 0 16px 0 42px !important;
  border: 1px solid #dddfe2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 15px !important;
  color: #1c1e21 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html body div#loginPage input:not([type="checkbox"]):focus {
  border-color: #1877f2 !important;
  box-shadow: 0 0 0 2px rgba(24,119,242,0.2) !important;
  outline: none !important;
  background: #ffffff !important;
}

/* Checkbox */
html body div#loginPage input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border-radius: 4px !important;
  padding: 0 !important;
}

/* Login button */
html body div#loginPage #btnLogin {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: #1877f2 !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  letter-spacing: 0.02em !important;
}

html body div#loginPage #btnLogin:hover {
  background: #166fe5 !important;
  transform: none !important;
}

/* Checkbox row */
html body div#loginPage .flex.items-center.justify-between.py-1 {
  flex-direction: row !important;
  align-items: center !important;
}

/* Map card — subtle, inside the card */
html body div#loginPage .login-map-card {
  margin-top: 18px !important;
  border: 1px solid #dddfe2 !important;
  border-radius: 8px !important;
  background: #f7f8fa !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

html body div#loginPage .login-map-card iframe {
  height: 90px !important;
}

html body div#loginPage .login-map-head {
  padding: 8px 12px !important;
}

html body div#loginPage .login-map-kicker {
  color: #1877f2 !important;
}

html body div#loginPage .login-map-head strong {
  color: #1c1e21 !important;
}

html body div#loginPage .login-map-head a {
  background: #1877f2 !important;
  box-shadow: none !important;
}

/* Footer */
html body div#loginPage .mt-8 {
  margin-top: 18px !important;
}

html body div#loginPage .mt-8 p {
  color: #8a8d91 !important;
}

/* Logo */
html body div#loginPage #logoLogin {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* === DESKTOP: vertically center the card === */
@media screen and (min-width: 1024px) {
  html body div#loginPage > div:nth-child(2) {
    justify-content: center !important;
    padding: 40px 24px !important;
  }

  html body div#loginPage > div:nth-child(2) > div {
    max-width: 440px !important;
    padding: 36px 32px 28px !important;
  }
}

/* === MOBILE (<768px) === */
@media screen and (max-width: 767px) {
  html body div#loginPage:not(.hidden) {
    background: #f0f2f5 !important;
  }

  html body div#loginPage > div:nth-child(2) {
    padding: 20px 14px 28px !important;
    justify-content: flex-start !important;
    padding-top: 40px !important;
  }

  html body div#loginPage > div:nth-child(2) > div {
    max-width: 100% !important;
    padding: 24px 18px 22px !important;
    border-radius: 10px !important;
  }

  html body div#loginPage input:not([type="checkbox"]) {
    min-height: 46px !important;
    font-size: 14px !important;
  }

  html body div#loginPage #btnLogin {
    min-height: 46px !important;
    font-size: 15px !important;
  }

  html body div#loginPage > div:nth-child(2) h2 {
    font-size: 22px !important;
  }
}



/* Final polish: readable, premium split-login layout */
@media screen and (min-width: 1024px) {
  #loginPage:not(.hidden) {
    height: 100dvh !important;
    background: #ffffff !important;
  }

  #loginPage > div:first-child {
    position: relative !important;
  }

  #loginPage > div:first-child::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.34), transparent 42%),
      radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.16), transparent 28rem);
  }

  #loginPage > div:first-child > .relative {
    position: relative !important;
    z-index: 1 !important;
  }

  #loginPage > div:nth-child(2) {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding-top: clamp(28px, 5vh, 56px) !important;
    padding-bottom: 28px !important;
  }

  #loginPage > div:nth-child(2) > div {
    margin: 0 auto !important;
  }

  #loginPage > div:nth-child(2) h2 {
    color: #071127 !important;
    font-size: clamp(32px, 2.55vw, 44px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  #loginPage > div:nth-child(2) p,
  #loginPage label {
    color: #334155 !important;
  }

  #loginPage input:not([type="checkbox"]) {
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
  }

  #loginPage input:not([type="checkbox"])::placeholder {
    color: #718096 !important;
  }

  .login-map-card {
    overflow: hidden !important;
    background: #f8fafc !important;
  }

  .login-map-head {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
  }

  .login-map-card iframe {
    height: 92px !important;
  }

  #loginPage .mt-8 p {
    color: #64748b !important;
  }
}

@media screen and (max-width: 1023px) {
  #loginPage > div:nth-child(2) {
    align-items: flex-start !important;
  }

  #loginPage > div:nth-child(2) h2 {
    color: #071127 !important;
  }

  #loginPage > div:nth-child(2) p,
  #loginPage label {
    color: #334155 !important;
  }

  .login-map-card iframe {
    height: 78px !important;
  }
}



/* Authoritative final login UI: visible text, split layout, premium but compact */
html body div#loginPage:not(.hidden) {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

html body div#loginPage > div:first-child {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  padding: clamp(30px, 4vw, 60px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.72), rgba(29, 78, 216, 0.48)),
    none center/cover no-repeat !important;
}

html body div#loginPage > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 6, 23, 0.32), transparent 58%),
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.16), transparent 22rem);
}

html body div#loginPage > div:first-child > .relative {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 720px) !important;
  max-width: 720px !important;
}

html body div#loginPage > div:first-child .flex.items-center.gap-3.mb-8 {
  margin-bottom: 18px !important;
}

html body div#loginPage > div:first-child .inline-block {
  margin-bottom: 18px !important;
}

html body div#loginPage > div:first-child h1 {
  color: #ffffff !important;
  font-size: clamp(44px, 4.7vw, 78px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  margin: 0 0 12px !important;
  text-shadow: 0 16px 42px rgba(2, 6, 23, 0.32);
}

html body div#loginPage > div:first-child p {
  color: #dbeafe !important;
  margin: 0 0 34px !important;
  font-size: 15px !important;
}

html body div#loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(100%, 600px) !important;
  max-width: 600px !important;
}

html body div#loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg > div {
  min-height: 56px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

html body div#loginPage > div:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: clamp(20px, 4vh, 34px) clamp(26px, 4vw, 70px) 22px !important;
  background: #ffffff !important;
  border-left: 1px solid #e2e8f0 !important;
}

html body div#loginPage > div:nth-child(2) > div {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.login-identity-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.login-identity-logo {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.login-identity-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-identity-strip strong {
  display: block;
  color: #071127;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
}

.login-identity-strip span {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

html body div#loginPage > div:nth-child(2) > div > .mb-8 {
  margin-bottom: 18px !important;
  text-align: left !important;
}

html body div#loginPage > div:nth-child(2) h2 {
  display: block !important;
  color: #071127 !important;
  font-size: clamp(30px, 2.45vw, 40px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 8px !important;
}

html body div#loginPage > div:nth-child(2) p,
html body div#loginPage label {
  color: #334155 !important;
}

html body div#loginPage #loginForm.space-y-4 > :not([hidden]) ~ :not([hidden]),
html body div#loginPage #loginForm.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 14px !important;
}

html body div#loginPage input:not([type="checkbox"]) {
  min-height: 52px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  font-size: 15px !important;
}

html body div#loginPage input:not([type="checkbox"])::placeholder {
  color: #64748b !important;
}

html body div#loginPage #btnLogin {
  min-height: 52px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.22) !important;
}

.login-action-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.login-schedule-btn {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(191, 219, 254, 0.95);
  background: #ffffff;
  color: #2563eb;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10);
}

@media screen and (min-width: 640px) {
  .login-action-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.65fr);
  }
}

.login-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.login-trust-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.login-map-card {
  margin-top: 12px !important;
  border: 1px solid #dbeafe !important;
  border-radius: 14px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.login-map-head {
  padding: 8px 10px !important;
}

.login-map-card iframe {
  height: 70px !important;
}

html body div#loginPage .mt-8 {
  margin-top: 12px !important;
}

html body div#loginPage .mt-8 button {
  margin-bottom: 10px !important;
}

@media screen and (min-width: 900px) {
  html body div#loginPage:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.82fr) !important;
  }
}

@media screen and (max-width: 899px) {
  html body div#loginPage:not(.hidden) {
    display: block !important;
    overflow-y: auto !important;
    background: #f8fafc !important;
  }

  html body div#loginPage > div:first-child {
    height: auto !important;
    min-height: 156px !important;
    padding: 18px 16px !important;
  }

  html body div#loginPage > div:first-child h1 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }

  html body div#loginPage > div:first-child p,
  html body div#loginPage > div:first-child .grid {
    display: none !important;
  }

  html body div#loginPage > div:nth-child(2) {
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 14px 28px !important;
    border-left: 0 !important;
    background: #f8fafc !important;
  }

  html body div#loginPage > div:nth-child(2) > div {
    max-width: 440px !important;
    padding: 20px 18px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 22px !important;
    background: #ffffff !important;
  }

  .login-trust-row {
    grid-template-columns: 1fr !important;
  }

  .login-map-card iframe {
    height: 62px !important;
  }
}



/* Highest-priority fix for old rules that hide the left login panel */
@media screen and (min-width: 900px) {
  html body div#loginPage:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #ffffff !important;
  }

  html body div#loginPage > div.hidden.lg\:flex.lg\:w-1\/2,
  html body div#loginPage > div.hidden,
  html body div#loginPage > div.lg\:flex,
  html body div#loginPage > div.lg\:w-1\/2:first-child,
  html body div#loginPage > div:first-child {
    grid-column: 1 !important;
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: clamp(34px, 4vw, 64px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(135deg, rgba(2, 6, 23, 0.74), rgba(29, 78, 216, 0.48)),
      none center/cover no-repeat !important;
    transform: none !important;
  }

  html body div#loginPage > div:nth-child(2) {
    grid-column: 2 !important;
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: clamp(18px, 3.4vh, 32px) clamp(26px, 4vw, 68px) 22px !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body div#loginPage > div:nth-child(2) > div {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}



/* Inspected fix: desktop split must use full viewport and no internal right-panel scroll */
@media screen and (min-width: 900px) {
  html,
  body {
    overflow: hidden !important;
  }

  html body div#loginPage:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: 56vw 44vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  html body div#loginPage > div:first-child,
  html body div#loginPage > div.hidden,
  html body div#loginPage > div.lg\:flex,
  html body div#loginPage > div.hidden.lg\:flex.lg\:w-1\/2 {
    grid-column: 1 !important;
    display: flex !important;
    position: relative !important;
    width: 56vw !important;
    max-width: 56vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: clamp(34px, 4vw, 62px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(135deg, rgba(2, 6, 23, 0.72), rgba(29, 78, 216, 0.50)),
      none center/cover no-repeat !important;
  }

  html body div#loginPage > div:first-child > .relative {
    width: min(100%, 720px) !important;
    max-width: 720px !important;
  }

  html body div#loginPage > div:first-child h1 {
    font-size: clamp(44px, 4.35vw, 76px) !important;
    line-height: 0.99 !important;
    margin-bottom: 12px !important;
  }

  html body div#loginPage > div:first-child p {
    margin-bottom: 28px !important;
  }

  html body div#loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg {
    gap: 10px !important;
    max-width: 620px !important;
  }

  html body div#loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg > div {
    min-height: 54px !important;
    padding: 11px 14px !important;
  }

  html body div#loginPage > div:nth-child(2) {
    grid-column: 2 !important;
    display: flex !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44vw !important;
    max-width: 44vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: clamp(18px, 3vh, 30px) clamp(28px, 3.4vw, 56px) !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html body div#loginPage > div:nth-child(2) > div {
    width: min(100%, 560px) !important;
    max-width: 560px !important;
    max-height: calc(100vh - 36px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body div#loginPage .login-identity-strip {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
  }

  html body div#loginPage > div:nth-child(2) > div > .mb-8 {
    margin-bottom: 14px !important;
  }

  html body div#loginPage > div:nth-child(2) h2 {
    font-size: clamp(28px, 2.25vw, 38px) !important;
    line-height: 1.06 !important;
    margin: 0 0 6px !important;
  }

  html body div#loginPage > div:nth-child(2) > div > .mb-8 p {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  html body div#loginPage #loginForm.space-y-4 > :not([hidden]) ~ :not([hidden]),
  html body div#loginPage #loginForm.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 13px !important;
  }

  html body div#loginPage label {
    margin-bottom: 5px !important;
    font-size: 13px !important;
  }

  html body div#loginPage input:not([type="checkbox"]) {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }

  html body div#loginPage #btnLogin {
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
  }

  html body div#loginPage .login-trust-row {
    margin-top: 9px !important;
    gap: 6px !important;
  }

  html body div#loginPage .login-trust-row span {
    min-height: 30px !important;
    font-size: 9px !important;
  }

  html body div#loginPage .login-map-card {
    margin-top: 9px !important;
  }

  html body div#loginPage .login-map-head {
    padding: 7px 10px !important;
  }

  html body div#loginPage .login-map-card iframe {
    height: 58px !important;
  }

  html body div#loginPage .mt-8 {
    margin-top: 9px !important;
  }

  html body div#loginPage .mt-8 button {
    margin-bottom: 7px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}



/* Desktop rebuild: full-bleed school visual + stable right login panel. Does not affect tablet/mobile. */
@media screen and (min-width: 1024px) {
  html,
  body {
    overflow: hidden !important;
  }

  html body div#loginPage:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #071127 !important;
  }

  html body div#loginPage > div:first-child,
  html body div#loginPage > div.hidden,
  html body div#loginPage > div.lg\:flex,
  html body div#loginPage > div.hidden.lg\:flex.lg\:w-1\/2 {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: clamp(42px, 5vw, 82px) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      linear-gradient(90deg, rgba(2, 6, 23, 0.78) 0%, rgba(15, 23, 42, 0.54) 45%, rgba(15, 23, 42, 0.20) 68%, rgba(248, 250, 252, 0.90) 100%),
      none center/cover no-repeat !important;
  }

  html body div#loginPage > div:first-child > .absolute {
    display: none !important;
  }

  html body div#loginPage > div:first-child > .relative {
    position: relative !important;
    z-index: 2 !important;
    width: min(54vw, 760px) !important;
    max-width: min(54vw, 760px) !important;
  }

  html body div#loginPage > div:first-child .flex.items-center.gap-3.mb-8 {
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 34px !important;
  }

  html body div#loginPage > div:first-child .login-hero-logo,
  html body div#loginPage > div:first-child .w-12.h-12 {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    flex: 0 0 76px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  html body div#loginPage > div:first-child #logoLogin {
    display: block !important;
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 24px rgba(2, 6, 23, 0.32)) !important;
  }

  html body div#loginPage > div:first-child #appNameLogin {
    color: #ffffff !important;
    font-size: 34px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
    margin: 0 !important;
  }

  html body div#loginPage > div:first-child #appNameLogin + p {
    display: block !important;
    margin: 7px 0 0 !important;
    color: #dbeafe !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
  }

  html body div#loginPage > div:first-child .inline-block {
    margin-bottom: 24px !important;
  }

  html body div#loginPage > div:first-child h1 {
    color: #ffffff !important;
    font-size: clamp(58px, 5vw, 94px) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 18px !important;
    text-shadow: 0 18px 46px rgba(2, 6, 23, 0.35) !important;
  }

  html body div#loginPage > div:first-child p {
    color: #dbeafe !important;
    margin: 0 0 40px !important;
    font-size: 17px !important;
  }

  html body div#loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: min(100%, 640px) !important;
    max-width: 640px !important;
  }

  html body div#loginPage > div:first-child .grid.grid-cols-2.gap-4.max-w-lg > div {
    min-height: 62px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.13) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: none !important;
  }

  html body div#loginPage > div:nth-child(2) {
    position: absolute !important;
    z-index: 3 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(42vw, 680px) !important;
    min-width: 540px !important;
    max-width: 680px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: clamp(28px, 3vw, 52px) !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html body div#loginPage > div:nth-child(2) > div {
    width: 100% !important;
    max-width: 540px !important;
    max-height: calc(100vh - 64px) !important;
    margin: 0 !important;
    padding: 24px 28px 54px !important;
    overflow: hidden !important;
    border: 1px solid rgba(203, 213, 225, 0.82) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
  }

  html body div#loginPage .login-identity-strip {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
  }

  html body div#loginPage .login-identity-logo {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  html body div#loginPage .login-identity-strip strong {
    font-size: 20px !important;
  }

  html body div#loginPage > div:nth-child(2) > div > .mb-8 {
    margin-bottom: 14px !important;
  }

  html body div#loginPage > div:nth-child(2) h2 {
    color: #071127 !important;
    font-size: clamp(32px, 2.45vw, 44px) !important;
    line-height: 1.04 !important;
    margin: 0 0 6px !important;
  }

  html body div#loginPage > div:nth-child(2) > div > .mb-8 p {
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  html body div#loginPage #loginForm.space-y-4 > :not([hidden]) ~ :not([hidden]),
  html body div#loginPage #loginForm.sm\:space-y-5 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 11px !important;
  }

  html body div#loginPage label {
    color: #1e293b !important;
    font-size: 13px !important;
    margin-bottom: 5px !important;
  }

  html body div#loginPage input:not([type="checkbox"]) {
    min-height: 48px !important;
    border-radius: 13px !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    font-size: 14px !important;
  }

  html body div#loginPage #btnLogin {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.20) !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body div#loginPage #loginForm button[onclick="openCekJadwalModal()"] {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #2563eb !important;
    border: 1px solid rgba(191, 219, 254, 0.95) !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.10) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body div#loginPage #loginForm button[onclick="openCekJadwalModal()"] i {
    font-size: 16px !important;
  }

  html body div#loginPage #loginForm {
    padding-bottom: 22px !important;
  }

  html body div#loginPage #loginForm .flex.items-center.justify-between.py-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 4px 0 0 !important;
  }

  html body div#loginPage .login-action-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(160px, 0.65fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    margin-top: 16px !important;
    margin-bottom: 22px !important;
  }

  html body div#loginPage .login-trust-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 9px !important;
  }

  html body div#loginPage .login-trust-row span {
    min-height: 28px !important;
    font-size: 9px !important;
  }

  html body div#loginPage .login-map-card {
    margin-top: 9px !important;
    border-radius: 13px !important;
  }

  html body div#loginPage .login-map-head {
    padding: 7px 10px !important;
  }

  html body div#loginPage .login-map-card iframe {
    height: 58px !important;
  }

  html body div#loginPage .mt-8 {
    margin-top: 9px !important;
  }

  html body div#loginPage .mt-8 button {
    margin-bottom: 7px !important;
    padding: 8px 14px !important;
  }

  html body div#loginPage .mt-8 p {
    line-height: 1.35 !important;
  }
}




    /* ============================================================
       EXOT 2026 — MODERN ACADEMIC ISLAMIC DESIGN SYSTEM
       SD AL-WILDAN 4 ISLAMIC SCHOOL JAKARTA
       Anti-Slop Certified: Purposeful, High-Contrast, Zero-Slop
       ============================================================ */

    :root {
        --exot-navy-950: #040D1A;
        --exot-navy-900: #081A36;
        --exot-navy-800: #0E2A4D;
        --exot-navy-700: #173D6A;
        --exot-gold-500: #D4AF37;
        --exot-gold-400: #E5C358;
        --exot-gold-300: #F3DC85;
        --exot-gold-100: #FDF8E7;
        --exot-slate-900: #0F172A;
        --exot-slate-800: #1E293B;
        --exot-slate-700: #334155;
        --exot-slate-600: #475569;
        --exot-slate-500: #64748B;
        --exot-slate-400: #94A3B8;
        --exot-slate-300: #CBD5E1;
        --exot-slate-200: #E2E8F0;
        --exot-slate-100: #F1F5F9;
        --exot-slate-50:  #F8FAFC;
    }

    /* Global Body */
    html body {
        background-color: var(--exot-slate-50) !important;
        color: var(--exot-slate-900) !important;
        font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    }

    /* ==================== MODERN LOGIN LAYOUT ==================== */
    #loginPage {
        background: var(--exot-slate-50) !important;
        min-height: 100vh !important;
        align-items: stretch !important;
    }

    /* Hero Left Pane (Desktop) - No blurry photo, pure vector elegance */
    #loginPage > .hidden.lg\:flex.lg\:w-1\/2 {
        width: 52% !important;
        padding: clamp(2.5rem, 5vw, 5rem) !important;
        background: radial-gradient(circle at 12% 18%, #102A4C 0%, #081A36 55%, #040D1A 100%) !important;
        position: relative !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border-right: 1px solid rgba(212, 175, 55, 0.25) !important;
        box-shadow: none !important;
    }

    /* Geometric Islamic Architectural Overlay (Crisp SVG) */
    #loginPage > .hidden.lg\:flex.lg\:w-1\/2::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40 Z' fill='none' stroke='rgba(212,175,55,0.14)' stroke-width='1.2'/%3E%3Cpath d='M0 0 L80 80 M80 0 L0 80' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3Cpolygon points='40,12 68,40 40,68 12,40' fill='none' stroke='rgba(212,175,55,0.18)' stroke-width='1'/%3E%3Ccircle cx='40' cy='40' r='14' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1.2'/%3E%3Ccircle cx='40' cy='40' r='4' fill='rgba(212,175,55,0.22)'/%3E%3C/svg%3E") !important;
        background-size: 80px 80px !important;
        pointer-events: none !important;
        z-index: 1 !important;
        opacity: 0.9 !important;
    }

    /* Subtle Architectural Gold Edge Accent */
    #loginPage > .hidden.lg\:flex.lg\:w-1\/2::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 3px !important;
        background: linear-gradient(180deg, transparent 0%, var(--exot-gold-500) 30%, var(--exot-gold-400) 70%, transparent 100%) !important;
        z-index: 2 !important;
    }

    /* Remove legacy aurora blobs and overlays */
    .login-aurora,
    .blob {
        display: none !important;
    }

    .hero-brand-card {
        position: relative !important;
        z-index: 5 !important;
    }

    .hero-badge-pill {
        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.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        border: 1px solid rgba(212, 175, 55, 0.45) !important;
        background: rgba(212, 175, 55, 0.12) !important;
        color: var(--exot-gold-300) !important;
        margin-bottom: 1.25rem !important;
    }

    .hero-title-main {
        font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
        font-size: clamp(2rem, 3.2vw, 3rem) !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        color: #FFFFFF !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 0.5rem !important;
    }

    .hero-subtitle-main {
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        color: #CBD5E1 !important;
        margin-bottom: 2.25rem !important;
        max-width: 36rem !important;
        line-height: 1.5 !important;
    }

    /* 4 Key Pillar Cards */
    .hero-pillars-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.875rem !important;
        max-width: 34rem !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .hero-pillar-item {
        background: rgba(14, 42, 77, 0.7) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 0.75rem !important;
        padding: 0.875rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        transition: border-color 0.2s ease, background-color 0.2s ease !important;
    }

    .hero-pillar-item:hover {
        border-color: rgba(212, 175, 55, 0.5) !important;
        background: rgba(14, 42, 77, 0.95) !important;
    }

    .hero-pillar-icon {
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 0.5rem !important;
        background: rgba(212, 175, 55, 0.15) !important;
        color: var(--exot-gold-400) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.15rem !important;
        flex-shrink: 0 !important;
    }

    .hero-pillar-text strong {
        display: block !important;
        color: #FFFFFF !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .hero-pillar-text span {
        display: block !important;
        color: #94A3B8 !important;
        font-size: 0.7rem !important;
        font-weight: 500 !important;
    }

    .hero-footer-copy {
        position: relative !important;
        z-index: 5 !important;
        color: #64748B !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        margin-top: 2rem !important;
    }

    /* Right Form Container */
    #loginPage > .w-full.lg\:w-1\/2 {
        width: 48% !important;
        background: var(--exot-slate-50) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: clamp(1.5rem, 3vw, 3rem) !important;
    }

    /* Modern Login Card */
    .login-card {
        background: #FFFFFF !important;
        border: 1px solid var(--exot-slate-200) !important;
        border-radius: 1.25rem !important;
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 20px 25px -5px rgba(15, 23, 42, 0.05) !important;
        padding: clamp(1.75rem, 3vw, 2.5rem) !important;
        width: 100% !important;
        max-width: 440px !important;
    }

    .login-badge-kicker {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--exot-navy-800) !important;
        background: var(--exot-slate-100) !important;
        padding: 0.25rem 0.65rem !important;
        border-radius: 0.375rem !important;
        margin-bottom: 0.75rem !important;
    }

    .login-header-title {
        font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.75rem !important;
        font-weight: 800 !important;
        color: var(--exot-slate-900) !important;
        letter-spacing: -0.02em !important;
        line-height: 1.2 !important;
        margin-bottom: 0.35rem !important;
    }

    .login-header-desc {
        font-size: 0.85rem !important;
        color: var(--exot-slate-500) !important;
        margin-bottom: 1.5rem !important;
    }

    .login-field-label {
        display: block !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        color: var(--exot-slate-700) !important;
        margin-bottom: 0.375rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
    }

    .login-input-wrap {
        position: relative !important;
    }

    .login-input-wrap input {
        width: 100% !important;
        padding: 0.85rem 1rem 0.85rem 2.75rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: var(--exot-slate-900) !important;
        background: var(--exot-slate-50) !important;
        border: 1.5px solid var(--exot-slate-200) !important;
        border-radius: 0.75rem !important;
        transition: all 0.2s ease !important;
    }

    .login-input-wrap input:focus {
        background: #FFFFFF !important;
        border-color: var(--exot-navy-800) !important;
        box-shadow: 0 0 0 4px rgba(14, 42, 77, 0.12) !important;
        outline: none !important;
    }

    .login-input-icon {
        position: absolute !important;
        left: 0.95rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--exot-slate-400) !important;
        font-size: 1.15rem !important;
        pointer-events: none !important;
    }

    .login-btn-primary {
        width: 100% !important;
        background: linear-gradient(135deg, #0A192F 0%, #0E2A4D 100%) !important;
        color: #FFFFFF !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.875rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.03em !important;
        padding: 0.85rem 1.25rem !important;
        border-radius: 0.75rem !important;
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
        box-shadow: 0 4px 12px rgba(10, 25, 47, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }

    .login-btn-primary:hover {
        background: linear-gradient(135deg, #0E2A4D 0%, #173D6A 100%) !important;
        box-shadow: 0 6px 16px rgba(10, 25, 47, 0.25) !important;
        transform: translateY(-1px) !important;
    }

    .login-btn-secondary {
        width: 100% !important;
        background: #FFFFFF !important;
        color: var(--exot-slate-700) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        padding: 0.7rem 1.25rem !important;
        border-radius: 0.75rem !important;
        border: 1.5px solid var(--exot-slate-200) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        margin-top: 0.5rem !important;
    }

    .login-btn-secondary:hover {
        background: var(--exot-slate-50) !important;
        border-color: var(--exot-slate-300) !important;
        color: var(--exot-slate-900) !important;
    }

    /* ==================== DASHBOARD & MAIN APP POLISH ==================== */
    #appPage {
        background-color: var(--exot-slate-50) !important;
    }

    /* Cards */
    .exot-card {
        background-color: #FFFFFF !important;
        border: 1px solid var(--exot-slate-200) !important;
        border-radius: 0.75rem !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    }

    /* Tables */
    .exot-table-header {
        background-color: var(--exot-slate-100) !important;
        border-top: 1px solid var(--exot-slate-200) !important;
        border-bottom: 1px solid var(--exot-slate-200) !important;
        color: var(--exot-slate-700) !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    /* Active Nav Items */
    .nav-item.active {
        background: #E2E8F0 !important;
        color: var(--exot-navy-900) !important;
        font-weight: 700 !important;
    }



    /* ============================================================
       EXOT 2026 — FRESH VIBRANT ENTERPRISE DASHBOARD REDESIGN
       Anti-Slop: High-Contrast, Fresh Colors, Zero-Pale Look
       ============================================================ */

    /* Main Canvas Background: Fresh Slate-100 (NOT pale washed-out white!) */
    #appPage,
    .theme-future #appPage {
        background-color: #F1F5F9 !important;
    }

    #appPage .flex-1.flex.flex-col,
    .theme-future .flex-1.flex.flex-col {
        background-color: #F1F5F9 !important;
    }

    #mainContent,
    .theme-future #mainContent {
        background-color: #F1F5F9 !important;
        padding: clamp(1rem, 2vw, 1.75rem) !important;
    }

    /* ==================== VIBRANT DEEP ACADEMIC NAVY SIDEBAR ==================== */
    #sidebar,
    .theme-future #sidebar {
        width: 270px !important;
        background: linear-gradient(180deg, #071326 0%, #0A192F 55%, #050F1E 100%) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 6px 0 24px rgba(7, 19, 38, 0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #sidebar .h-16,
    .theme-future #sidebar .h-16 {
        height: 70px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 0 1.25rem !important;
    }

    #sidebar #appNameSidebar,
    .theme-future #sidebar #appNameSidebar {
        font-family: 'Sora', 'Plus Jakarta Sans', sans-serif !important;
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        color: #FFFFFF !important;
        letter-spacing: -0.01em !important;
    }

    #sidebar #appNameSidebar span {
        color: #F59E0B !important;
        font-weight: 700 !important;
    }

    #sidebar #logoSidebar {
        filter: drop-shadow(0 2px 8px rgba(245, 158, 11, 0.35)) !important;
    }

    /* Sidebar Navigation Items */
    #sidebar nav {
        padding: 1rem 0.75rem !important;
    }

    #sidebar .nav-item,
    .theme-future .nav-item {
        color: #94A3B8 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.85rem !important;
        margin-bottom: 0.25rem !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: none !important;
        transform: none !important;
    }

    #sidebar .nav-item span {
        color: inherit !important;
        max-width: 100% !important;
        font-weight: inherit !important;
    }

    #sidebar .nav-item i {
        font-size: 1.25rem !important;
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
    }

    #sidebar .nav-item:hover,
    .theme-future .nav-item:hover {
        background: rgba(255, 255, 255, 0.07) !important;
        color: #FFFFFF !important;
        transform: translateX(4px) !important;
        border: none !important;
    }

    #sidebar .nav-item:hover i {
        transform: scale(1.1) !important;
    }

    /* Active Nav Item: Solid Royal Blue + Gold Accent Strip, NO UGLY BLACK BORDER! */
    #sidebar .nav-item.active,
    .theme-future .nav-item.active {
        background: linear-gradient(90deg, rgba(30, 64, 175, 0.55) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
        color: #FFFFFF !important;
        border: none !important;
        border-left: 4px solid #F59E0B !important;
        border-radius: 0 10px 10px 0 !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22) !important;
        font-weight: 700 !important;
        padding-left: 0.85rem !important;
        transform: none !important;
    }

    #sidebar .nav-item.active span {
        color: #FFFFFF !important;
        font-weight: 700 !important;
    }

    .theme-future .nav-item.active::after {
        display: none !important;
    }

    #sidebar .border-t {
        border-color: rgba(255, 255, 255, 0.08) !important;
        margin: 0.75rem 0 !important;
    }

    /* ==================== CRISP MODERN TOPBAR HEADER ==================== */
    header,
    .app-header {
        height: 70px !important;
        background: #FFFFFF !important;
        border-bottom: 1.5px solid #E2E8F0 !important;
        box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04) !important;
        padding: 0 clamp(1rem, 2vw, 1.75rem) !important;
    }

    /* Menu Button */
    header button[onclick="toggleSidebar()"] {
        background: #F8FAFC !important;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 8px !important;
        color: #0F172A !important;
        font-weight: 700 !important;
        padding: 0.45rem 0.85rem !important;
        transition: all 0.15s ease !important;
    }

    header button[onclick="toggleSidebar()"]:hover {
        background: #EFF6FF !important;
        border-color: #BFDBFE !important;
        color: #1D4ED8 !important;
    }

    /* Active Page Badge in Header */
    #headerBadge {
        background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%) !important;
        color: #FFFFFF !important;
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 0.75rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
        padding: 0.4rem 0.95rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.28) !important;
    }

    /* User Role Badge in Header */
    #topRoleBadge {
        background: #F8FAFC !important;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 9999px !important;
        padding: 0.35rem 0.95rem !important;
        color: #0F172A !important;
        font-weight: 800 !important;
        font-size: 0.75rem !important;
        box-shadow: none !important;
    }

    #topRoleBadge i {
        color: #2563EB !important;
        font-size: 1.15rem !important;
    }

    #topRoleBadge span {
        color: #0F172A !important;
        font-weight: 700 !important;
    }

    /* Header Icons (Info, Sync, Logout) */
    header .hover\:bg-gray-100 {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        transition: all 0.15s ease !important;
    }

    header .hover\:bg-gray-100:hover {
        background: #EFF6FF !important;
        color: #2563EB !important;
    }

    header .hover\:bg-red-50:hover {
        background: #FEE2E2 !important;
        color: #DC2626 !important;
    }

    /* ==================== FRESH VIBRANT CARDS & PANELS ==================== */
    .exot-card,
    .theme-future .exot-card {
        background: #FFFFFF !important;
        border: 1.5px solid #E2E8F0 !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05) !important;
        overflow: hidden !important;
    }

    /* Page Heading Icons & Titles */
    .page-view h2,
    .page-view .font-bold.text-gray-800 {
        color: #0F172A !important;
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Action Buttons (+ Tambah, Import CSV, Template) */
    .theme-future button[onclick*="modalSiswa"],
    .theme-future button[onclick*="modalDokumen"],
    .theme-future button[onclick*="modalAkun"],
    button[onclick*="modalSiswa"],
    button[onclick*="modalDokumen"],
    button[onclick*="modalAkun"] {
        background: #2563EB !important;
        color: #FFFFFF !important;
        font-weight: 700 !important;
        border: 1px solid #1D4ED8 !important;
        border-radius: 8px !important;
        padding: 0.45rem 1rem !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        transition: all 0.15s ease !important;
    }

    .theme-future button[onclick*="modalSiswa"] i,
    .theme-future button[onclick*="modalDokumen"] i,
    .theme-future button[onclick*="modalAkun"] i,
    button[onclick*="modalSiswa"] i,
    button[onclick*="modalDokumen"] i,
    button[onclick*="modalAkun"] i {
        color: #FFFFFF !important;
    }

    .theme-future button[onclick*="modalSiswa"]:hover,
    .theme-future button[onclick*="modalDokumen"]:hover,
    .theme-future button[onclick*="modalAkun"]:hover,
    button[onclick*="modalSiswa"]:hover,
    button[onclick*="modalDokumen"]:hover,
    button[onclick*="modalAkun"]:hover {
        background: #1D4ED8 !important;
        color: #FFFFFF !important;
        transform: translateY(-1px) !important;
    }

    .theme-future button[onclick*="importFile"],
    .theme-future button[onclick*="importUserFile"],
    .theme-future button[onclick*="importCSV"],
    button[onclick*="importFile"],
    button[onclick*="importUserFile"],
    button[onclick*="importCSV"] {
        background: #F5F3FF !important;
        color: #6D28D9 !important;
        font-weight: 700 !important;
        border: 1.5px solid #DDD6FE !important;
        border-radius: 8px !important;
        padding: 0.45rem 1rem !important;
        box-shadow: 0 1px 3px rgba(109, 40, 217, 0.1) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        transition: all 0.15s ease !important;
    }

    .theme-future button[onclick*="importFile"] i,
    .theme-future button[onclick*="importUserFile"] i,
    .theme-future button[onclick*="importCSV"] i,
    button[onclick*="importFile"] i,
    button[onclick*="importUserFile"] i,
    button[onclick*="importCSV"] i {
        color: #7C3AED !important;
    }

    .theme-future button[onclick*="importFile"]:hover,
    .theme-future button[onclick*="importUserFile"]:hover,
    .theme-future button[onclick*="importCSV"]:hover,
    button[onclick*="importFile"]:hover,
    button[onclick*="importUserFile"]:hover,
    button[onclick*="importCSV"]:hover {
        background: #EDE9FE !important;
        border-color: #C4B5FD !important;
        color: #5B21B6 !important;
        transform: translateY(-1px) !important;
    }

    .theme-future button[onclick*="downloadTemplate"],
    button[onclick*="downloadTemplate"] {
        background: #FFFFFF !important;
        color: #334155 !important;
        font-weight: 700 !important;
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 8px !important;
        padding: 0.45rem 1rem !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        transition: all 0.15s ease !important;
    }

    .theme-future button[onclick*="downloadTemplate"] i,
    button[onclick*="downloadTemplate"] i {
        color: #64748B !important;
    }

    .theme-future button[onclick*="downloadTemplate"]:hover,
    button[onclick*="downloadTemplate"]:hover {
        background: #F8FAFC !important;
        border-color: #94A3B8 !important;
        color: #0F172A !important;
        transform: translateY(-1px) !important;
    }

    /* Filter Selects & Search Input */
    select.dynamic-filter-class,
    select.dynamic-filter-room,
    select#filterSiswaKelas,
    select#filterSiswaRuang,
    select#filterDocMapel,
    select#filterDocKelas,
    select#filterDocRuangan {
        background-color: #FFFFFF !important;
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 8px !important;
        color: #1E293B !important;
        font-weight: 600 !important;
        padding: 0.45rem 0.85rem !important;
        font-size: 0.825rem !important;
        transition: all 0.15s ease !important;
    }

    input#searchSiswa,
    input[placeholder*="Cari"] {
        background-color: #FFFFFF !important;
        border: 1.5px solid #CBD5E1 !important;
        border-radius: 8px !important;
        color: #1E293B !important;
        font-weight: 600 !important;
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
        padding-right: 0.85rem !important;
        padding-left: 0.85rem;
        font-size: 0.825rem !important;
        transition: all 0.15s ease !important;
    }

    /* Keep icons from overlapping placeholder text */
    input.pl-9,
    input[class*="pl-9"],
    input[placeholder*="Cari"].pl-9,
    .relative:has(> i[class*="ph-"]) input,
    .relative > i[class*="ph-"] + input,
    .relative > i.ph + input {
        padding-left: 2.5rem !important;
    }

    input.pl-8,
    input[class*="pl-8"],
    input[placeholder*="Cari"].pl-8 {
        padding-left: 2.25rem !important;
    }

    select.dynamic-filter-class:focus,
    select.dynamic-filter-room:focus,
    input#searchSiswa:focus,
    input[placeholder*="Cari"]:focus {
        border-color: #2563EB !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
        outline: none !important;
    }

    /* ==================== FRESH VIBRANT TABLES ==================== */
    table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        width: 100% !important;
    }

    /* Table Header */
    .exot-table-header,
    thead tr,
    .theme-future .exot-table-header {
        background: #F8FAFC !important;
        border-top: none !important;
        border-bottom: 2px solid #E2E8F0 !important;
    }

    thead th,
    .exot-table-header th {
        color: #475569 !important;
        font-weight: 800 !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        padding: 0.85rem 1rem !important;
        border-bottom: 2px solid #E2E8F0 !important;
        border-top: none !important;
    }

    /* Table Body Rows */
    tbody tr {
        border-bottom: 1px solid #F1F5F9 !important;
        transition: background-color 0.15s ease !important;
    }

    tbody tr:hover {
        background-color: #F8FAFC !important;
    }

    tbody td {
        padding: 0.85rem 1rem !important;
        font-size: 0.825rem !important;
        color: #334155 !important;
        vertical-align: middle !important;
    }

    /* Student Name Column Bold */
    tbody td.font-bold,
    tbody td:nth-child(2) {
        color: #0F172A !important;
        font-weight: 700 !important;
    }

    /* Action Buttons in Table Rows (Edit / Delete) */
    tbody tr button[onclick*="editSiswa"],
    tbody tr button[onclick*="editDokumen"],
    tbody tr button[onclick*="editAkun"] {
        background: #FEF3C7 !important;
        color: #D97706 !important;
        border: 1px solid #FDE68A !important;
        border-radius: 8px !important;
        padding: 0.45rem 0.65rem !important;
        transition: all 0.15s ease !important;
    }

    tbody tr button[onclick*="editSiswa"]:hover,
    tbody tr button[onclick*="editDokumen"]:hover,
    tbody tr button[onclick*="editAkun"]:hover {
        background: #FDE68A !important;
        transform: scale(1.08) !important;
    }

    tbody tr button[onclick*="deleteDataAPI"] {
        background: #FEE2E2 !important;
        color: #DC2626 !important;
        border: 1px solid #FECACA !important;
        border-radius: 8px !important;
        padding: 0.45rem 0.65rem !important;
        transition: all 0.15s ease !important;
    }

    tbody tr button[onclick*="deleteDataAPI"]:hover {
        background: #FECACA !important;
        transform: scale(1.08) !important;
    }

    /* View link for docs */
    tbody tr a[href*="drive.google"] {
        background: #EFF6FF !important;
        color: #2563EB !important;
        border: 1px solid #BFDBFE !important;
        border-radius: 6px !important;
        padding: 0.35rem 0.75rem !important;
        font-weight: 700 !important;
        font-size: 0.75rem !important;
        transition: all 0.15s ease !important;
    }

    tbody tr a[href*="drive.google"]:hover {
        background: #DBEAFE !important;
    }

    /* Table Pagination Bar */
    .exot-card > .border-t {
        background: #F8FAFC !important;
        border-color: #E2E8F0 !important;
        padding: 0.75rem 1rem !important;
    }

    /* ==================== EXECUTIVE DASHBOARD STATS ==================== */
    #dashboard-admin .grid > .exot-card {
        padding: 1.25rem !important;
        border-radius: 12px !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        position: relative !important;
    }

    #dashboard-admin .grid > .exot-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08) !important;
    }

    #dashboard-admin .grid > .exot-card:nth-child(1) { border-top: 4px solid #2563EB !important; }
    #dashboard-admin .grid > .exot-card:nth-child(2) { border-top: 4px solid #059669 !important; }
    #dashboard-admin .grid > .exot-card:nth-child(3) { border-top: 4px solid #D97706 !important; }
    #dashboard-admin .grid > .exot-card:nth-child(4) { border-top: 4px solid #7C3AED !important; }
    #dashboard-admin .grid > .exot-card:nth-child(5) { border-top: 4px solid #0284C7 !important; }
    #dashboard-admin .grid > .exot-card:nth-child(6) { border-top: 4px solid #0D9488 !important; }

    #dashboard-admin .grid > .exot-card h3 {
        font-family: 'Sora', sans-serif !important;
        font-weight: 800 !important;
        font-size: 1.75rem !important;
        color: #0F172A !important;
    }

.timer-green { background-color: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.timer-yellow { background-color: #fefce8; border-color: #fde68a; color: #92400e; }
.timer-red { background-color: #fef2f2; border-color: #fecaca; color: #991b1b; }
.timer-flash { background-color: #fef2f2; border-color: #f87171; color: #991b1b; animation: timerFlash 0.5s ease-in-out infinite; }
@keyframes timerFlash { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.theme-future .timer-green { background-color: rgba(16, 185, 129, 0.15); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; }
.theme-future .timer-yellow { background-color: rgba(245, 158, 11, 0.15); border-color: rgba(251, 191, 36, 0.3); color: #fcd34d; }
.theme-future .timer-red { background-color: rgba(239, 68, 68, 0.15); border-color: rgba(248, 113, 113, 0.3); color: #fca5a5; }
.theme-future .timer-flash { background-color: rgba(239, 68, 68, 0.2); border-color: rgba(248, 113, 113, 0.5); color: #fca5a5; }
.exam-timer-digits { font-variant-numeric: tabular-nums; }

/* ==================== MOBILE PWA BOTTOM BAR (RUDDER / DOCK STYLE) ==================== */
#mobileBottomNav {
    padding-bottom: env(safe-area-inset-bottom, 8px);
    transition: transform 0.25s ease-in-out, background-color 0.2s ease;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
}

.mob-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 52px;
    min-height: 48px;
    padding: 0.35rem 0.5rem;
    border-radius: 0.75rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
    transition: all 0.18s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.mob-nav-btn i {
    font-size: 1.35rem;
    transition: transform 0.18s ease;
}

.mob-nav-btn:active {
    transform: scale(0.92);
}

.mob-nav-btn.active {
    color: #2563eb;
}

.mob-nav-btn.active i {
    transform: translateY(-1px);
}

/* Center Elevated FAB (Rudder / Bottom Bar FAB) */
.mob-center-fab {
    position: relative;
    top: -14px;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.45), 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 3.5px solid #ffffff;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.mob-center-fab i {
    font-size: 1.45rem;
}

.mob-center-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 24px -3px rgba(37, 99, 235, 0.55);
}

.mob-center-fab:active {
    transform: scale(0.92);
}

/* Quick Action Bottom Sheet Drawer */
#mobileBottomSheetPanel {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mob-sheet-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.825rem;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.mob-sheet-card:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.mob-sheet-card:active {
    transform: scale(0.98);
}

.mob-sheet-icon {
    width: 38px;
    height: 38px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Theme Future (Dark) Adjustments for Mobile Nav & Sheet */
.theme-future #mobileBottomNav {
    background: rgba(15, 23, 42, 0.95) !important;
    border-top-color: rgba(51, 65, 85, 0.8) !important;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35) !important;
}

.theme-future .mob-nav-btn {
    color: #94a3b8 !important;
}

.theme-future .mob-nav-btn.active {
    color: #60a5fa !important;
}

.theme-future .mob-center-fab {
    border-color: #0f172a !important;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5) !important;
}

.theme-future #mobileBottomSheetPanel {
    background-color: #0f172a !important;
    border-top-color: #334155 !important;
    color: #f8fafc !important;
}

.theme-future .mob-sheet-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.theme-future .mob-sheet-card:hover {
    background-color: #334155 !important;
}