/* ==========================================================================
   BARUNA LMS - MODERN TEAL SCHOOL EXAM & PROCTORING PLATFORM (2026 UI)
   Desain terinspirasi dari layout modern clean:
   - Soft Mint Canvas Backdrop (#E8F7F5)
   - Floating Card App Container (Border Radius 32px)
   - Solid Teal Sidebar (#2563eb) dengan Inverted Concave Curve Active Tab
   - Minimalist Vertical Bar Chart dengan Highlighted Bar & Tooltip
   - High-Security CBT Exam Player dengan Webcam Feed & MathJax Formula
   - Live Proctoring Dashboard (Monitoring Nomor Soal & Aksi Darurat Pengawas)
   ========================================================================== */

:root {
    --primary-teal: #2563eb;
    --primary-dark: #1e40af;
    --primary-light: #eff6ff;
    --accent-yellow: #facc15;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --bg-canvas: #f0f5fc;
    --card-white: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-subtle: #94a3b8;
    --border-light: #e2e8f0;
    --bar-pastel: #bfdbfe;
    --font-main: 'Plus Jakarta Sans', 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-canvas);
    color: var(--text-main);
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: 100vh;
    display: block;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}

/* Background Curve Decoration */
.canvas-decor-curve {
    position: fixed;
    top: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.08);
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0 0 0 0);
}

.canvas-decor-curve-2 {
    position: fixed;
    bottom: -20%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    border: 2px solid rgba(37, 99, 235, 0.06);
    pointer-events: none;
    z-index: 0;
    clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   MAIN FULLSCREEN APP CONTAINER (Full Desktop Screen)
   ========================================================================== */
.lms-app-frame {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: var(--card-white);
    border-radius: 0;
    box-shadow: none;
    border: none;
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

/* ==========================================================================
   SIDEBAR (Solid Teal with Inverted Concave Curve on Active Tab)
   ========================================================================== */
.lms-sidebar {
    width: 215px; /* Lebar sidebar diperkecil sedikit sesuai instruksi */
    height: 100vh;
    background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    padding: 24px 0 20px 0;
    flex-shrink: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.18s cubic-bezier(0.2, 0, 0, 1);
    will-change: width;
    transform: translateZ(0);
}

.sidebar-header {
    padding: 0 18px;
    margin-bottom: 24px;
    transition: padding 0.18s ease;
}

.brand-wrapper {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    width: 100%;
}

.brand-text {
    width: 100%;
}

.brand-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.brand-title-row h2 {
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
}

.brand-subtitle {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-top: 3px;
    white-space: nowrap;
}

.btn-sidebar-hamburger {
    background: rgba(255, 255, 255, 0.14);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-sidebar-hamburger:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.05);
}

/* Sidebar Collapsed State (Perkecil) */
.lms-sidebar.collapsed {
    width: 68px;
}

.lms-sidebar.collapsed .sidebar-header {
    padding: 0 14px;
    margin-bottom: 18px;
}

.lms-sidebar.collapsed .brand-title-row h2,
.lms-sidebar.collapsed .brand-subtitle {
    display: none !important;
}

.lms-sidebar.collapsed .brand-title-row {
    justify-content: center;
}

.lms-sidebar.collapsed .sidebar-nav {
    padding-left: 6px;
    padding-right: 6px;
}

.lms-sidebar.collapsed .nav-link-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
    border-radius: 12px;
}

.lms-sidebar.collapsed .nav-link-item span {
    display: none !important;
}

.lms-sidebar.collapsed .btn-switch-smartapp {
    padding: 10px 0;
    justify-content: center;
    font-size: 0;
}

.lms-sidebar.collapsed .btn-switch-smartapp i {
    font-size: 1rem;
    margin: 0 !important;
}

.lms-sidebar.collapsed .nav-link-item.active::before,
.lms-sidebar.collapsed .nav-link-item.active::after {
    display: none !important;
}

.lms-sidebar.collapsed .nav-link-item.active {
    border-radius: 12px !important;
    margin-right: 0 !important;
}

.lms-sidebar.collapsed .proctor-live-pulse {
    display: none !important;
}

/* Navigation List */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 18px;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.nav-link-item i {
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.nav-link-item:hover {
    color: #ffffff;
}

/* Inverted Concave Curve */
.nav-link-item.active {
    background-color: var(--card-white);
    color: var(--primary-dark);
    font-weight: 700;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    margin-right: -1px;
    position: relative;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.03);
}

.nav-link-item.active i {
    color: var(--primary-teal);
}

.nav-link-item.active::before {
    content: '';
    position: absolute;
    top: -24px;
    right: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    border-bottom-right-radius: 24px;
    box-shadow: 10px 10px 0 10px var(--card-white);
    pointer-events: none;
}

.nav-link-item.active::after {
    content: '';
    position: absolute;
    bottom: -24px;
    right: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    border-top-right-radius: 24px;
    box-shadow: 10px -10px 0 10px var(--card-white);
    pointer-events: none;
}

/* Sidebar Footer / Widget */
.sidebar-footer {
    padding: 0 18px;
}

.sidebar-widget-card {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 16px 14px;
    text-align: center;
    position: relative;
}

.widget-illustration-badge {
    width: 44px;
    height: 44px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    font-size: 1.3rem;
}

.widget-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
}

.widget-desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.4;
    margin-bottom: 12px;
}

.btn-widget-yellow {
    background: var(--accent-yellow);
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: transform 0.15s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-widget-yellow:hover {
    background: #fde047;
    transform: translateY(-1px);
}

/* ==========================================================================
   MAIN CONTENT AREA (Pure White)
   ========================================================================= */
.lms-main-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    height: 100vh;
    background: var(--card-white);
    padding: 24px 32px 64px 32px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

/* Topbar */
.lms-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding-bottom: 20px;
}

.topbar-search-box {
    position: relative;
    width: 300px;
}

.topbar-search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    font-size: 0.95rem;
}

.topbar-search-input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    padding: 10px 18px 10px 42px;
    font-size: 0.86rem;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s ease;
}

.topbar-search-input:focus {
    border-color: var(--primary-teal);
    background: #ffffff;
}

.topbar-user-area {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Role Switcher Pill Capsule */
.role-switcher-capsule {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 3px;
    border: 1px solid var(--border-light);
    gap: 4px;
}

.role-switch-pill {
    background: none;
    border: none;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.role-switch-pill.active {
    background: var(--primary-teal);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.btn-switch-smartapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary-teal);
    border: 1px solid rgba(37, 99, 235, 0.25);
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-switch-smartapp:hover {
    background: var(--primary-teal);
    color: #ffffff;
}

/* Button Setting Global Pengawas di Navbar Role Admin */
.btn-navbar-admin-duties {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #047857, #1d4ed8);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.28);
}

.btn-navbar-admin-duties:hover {
    background: linear-gradient(135deg, #1e3a8a, #1e40af);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.4);
    transform: translateY(-1px);
}

.btn-navbar-admin-duties i {
    font-size: 0.88rem;
    color: #bfdbfe;
}

/* Alert Banner Global di Modal Pengaturan Tugas */
.proctor-global-alert-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.06);
}

.proctor-global-alert-card i {
    color: #059669;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.proctor-global-alert-card .alert-text {
    font-size: 0.82rem;
    color: #1e3a8a;
    line-height: 1.48;
}

.topbar-user-info {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 3px 10px 3px 4px;
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(226, 232, 240, 0.9);
    transition: all 0.2s ease;
}

.topbar-user-info:hover {
    background: rgba(241, 245, 249, 1);
    border-color: rgba(203, 213, 225, 1);
}

.user-avatar-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.user-meta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    min-width: 0;
}

.user-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.user-role-label {
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.lms-header-role-badge,
.topbar-user-info .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 1.5px 7px !important;
    border-radius: 6px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important;
}

.lms-header-role-badge i {
    color: #38bdf8 !important;
    font-size: 0.72rem !important;
    margin-left: 2px !important;
}

.lms-header-role-badge i.icon-telegram-unverified,
.topbar-user-info .lms-header-role-badge i.icon-telegram-unverified,
.topbar-user-info .lms-header-role-badge i.fa-circle-xmark,
.topbar-user-info .badge i.fa-circle-xmark,
.user-role-label i.fa-circle-xmark {
    color: #ef4444 !important;
}

/* ========================================================================== */
/* PUSAT NOTIFIKASI CBT & LMS TERPADU (MODERN & RESPONSIVE)                   */
/* ========================================================================== */
.lms-notification-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-bell-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.1);
    border: 1.5px solid rgba(245, 158, 11, 0.32);
    color: #f59e0b;
    font-size: 1.12rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.notification-bell-btn:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.6);
    color: #fbbf24;
    transform: translateY(-1.5px) scale(1.05);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
}

.notification-bell-btn:active {
    transform: scale(0.95);
}

.notification-bell-btn.has-unread i {
    animation: bellWiggle 4s infinite ease-in-out;
    transform-origin: top center;
}

.notification-badge-count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 5px;
    min-width: 17px;
    height: 17px;
    line-height: 15px;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.6);
    animation: badgePulse 2s infinite ease-in-out;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 5px rgba(239, 68, 68, 0);
    }
}

@keyframes bellWiggle {
    0%, 85%, 100% { transform: rotate(0); }
    88% { transform: rotate(14deg); }
    91% { transform: rotate(-12deg); }
    94% { transform: rotate(10deg); }
    97% { transform: rotate(-6deg); }
}

/* Modal Backdrop & Dialog Pusat Notifikasi */
.lms-notif-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lms-notif-modal-backdrop.show {
    display: flex;
    opacity: 1;
}

.lms-notif-dialog {
    background: #ffffff;
    width: 100%;
    max-width: 540px;
    max-height: 85vh;
    border-radius: 20px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}

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

.lms-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #ffffff;
    flex-shrink: 0;
}

.lms-notif-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lms-notif-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.lms-notif-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.lms-notif-subtitle {
    font-size: 0.74rem;
    color: #94a3b8;
    margin: 2px 0 0 0;
}

.btn-lms-mark-all {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.btn-lms-mark-all:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.btn-lms-close-notif {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-lms-close-notif:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.lms-notif-subbar {
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    overflow-x: auto;
}

.lms-notif-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.lms-notif-filters .filter-pill {
    padding: 5px 11px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lms-notif-filters .filter-pill:hover {
    border-color: #94a3b8;
    color: #0f172a;
}

.lms-notif-filters .filter-pill.active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.filter-pill .pill-count {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    border-radius: 999px;
    padding: 0 5px;
}

.lms-notif-list-wrapper {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 16px;
    max-height: 440px;
}

.lms-notif-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.lms-notif-card:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.lms-notif-card.unread {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.lms-notif-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: #f1f5f9;
}

.lms-notif-card-icon.cbt {
    background: #ecfdf5;
    color: #10b981;
}

.lms-notif-card-icon.pengumuman {
    background: #f0f9ff;
    color: #0284c7;
}

.lms-notif-card-icon.tugas {
    background: #faf5ff;
    color: #9333ea;
}

.lms-notif-card-icon.izin_kbm,
.lms-notif-card-icon.izin {
    background: #ecfeff;
    color: #0891b2;
}

.lms-notif-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.lms-notif-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
}

.lms-notif-cat-tag {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
}

.lms-notif-cat-tag.cbt {
    background: #dcfce7;
    color: #15803d;
}

.lms-notif-cat-tag.pengumuman {
    background: #e0f2fe;
    color: #0369a1;
}

.lms-notif-card-time {
    font-size: 0.72rem;
    color: #94a3b8;
}

.lms-notif-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px 0;
    line-height: 1.35;
}

.lms-notif-card-msg {
    font-size: 0.8rem;
    color: #475569;
    margin: 0;
    line-height: 1.45;
}

.lms-notif-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.lms-notif-card:hover .lms-notif-card-actions {
    opacity: 1;
}

.btn-lms-mark-read,
.btn-lms-delete-notif {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    transition: all 0.2s ease;
}

.btn-lms-mark-read:hover {
    background: #dcfce7;
    color: #15803d;
}

.btn-lms-delete-notif:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.lms-notif-unread-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
}

.lms-notif-empty {
    text-align: center;
    padding: 45px 20px;
    color: #94a3b8;
}

.empty-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #cbd5e1;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
}

.lms-notif-empty h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
    margin: 0 0 5px 0;
}

.lms-notif-empty p {
    font-size: 0.78rem;
    color: #94a3b8;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}

.lms-notif-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.btn-lms-clear-history {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s ease;
}

.btn-lms-clear-history:hover {
    color: #dc2626;
}

.btn-lms-dismiss-modal {
    background: #0f172a;
    color: #ffffff;
    border: none;
    padding: 7px 16px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-lms-dismiss-modal:hover {
    background: #334155;
}

/* Floating Toast Notifikasi Real-Time */
.lms-notif-floating-toast {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000000;
    display: none;
    opacity: 0;
    transform: translateY(-15px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lms-notif-floating-toast.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.lms-toast-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.25);
    border: 1.5px solid #e2e8f0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 380px;
    cursor: pointer;
}

.lms-toast-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fef3c7;
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.lms-toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.lms-toast-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.lms-toast-badge-new {
    background: #ef4444;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
}

.lms-toast-title {
    font-size: 0.84rem;
    color: #0f172a;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.lms-toast-msg {
    font-size: 0.76rem;
    color: #475569;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lms-toast-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

@media (max-width: 768px) {
    .lms-notif-dialog {
        max-width: 100%;
        max-height: 82vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-top: auto;
    }
    .lms-notif-modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }
    .hide-mobile-sm {
        display: none !important;
    }
    .lms-notif-floating-toast {
        top: 12px;
        right: 12px;
        left: 12px;
    }
    .lms-toast-card {
        max-width: 100%;
    }
}

/* Header & Filter Row */
.page-title-section {
    margin-top: 10px;
    margin-bottom: 20px;
}

.page-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 12px;
}

.page-heading {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.btn-download-report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-teal);
    color: #ffffff;
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 0.82rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    transition: background-color 0.2s, transform 0.15s;
}

.btn-download-report:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.filter-period-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.period-select-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
}

.period-select-box i {
    color: var(--primary-teal);
}

.chart-legend-box {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.legend-dot-yellow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-yellow);
    margin-right: 4px;
}

.legend-dot-cyan {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bar-pastel);
    margin-right: 4px;
}

/* ==========================================================================
   MINIMALIST VERTICAL BAR CHART
   ========================================================================== */
.barchart-container {
    margin: 18px 0 28px 0;
    padding: 24px 10px 10px 40px;
    position: relative;
    height: 210px;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--border-light);
}

.chart-y-axis {
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-subtle);
    font-family: var(--font-mono);
}

.chart-bars-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 150px;
    position: relative;
    padding-bottom: 4px;
}

.bar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
    flex: 1;
    height: 100%;
}

.bar-pill {
    width: 22px;
    background: var(--bar-pastel);
    border-radius: 999px 999px 0 0;
    transition: height 0.35s ease, background 0.2s ease;
    flex-shrink: 0;
}

.bar-column:hover .bar-pill {
    background: #7dd3fc;
}

.bar-column.highlighted .bar-pill {
    background: var(--accent-yellow);
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
}

.bar-label {
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 600;
}

.chart-floating-tooltip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.25);
    text-align: center;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

.tooltip-val {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary-teal);
    line-height: 1.1;
}

.tooltip-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.chart-floating-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #ffffff;
}

/* ==========================================================================
   BOTTOM SECTION (Grid 2 Kolom)
   ========================================================================== */
.bottom-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 32px;
    align-items: start;
    margin-top: 6px;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
}

.link-show-all {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-teal);
    text-decoration: none;
    cursor: pointer;
}

.link-show-all:hover {
    text-decoration: underline;
}

/* List Ujian Rows */
.exam-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exam-row-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.exam-row-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
}

.exam-left-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.subject-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.exam-info-text {
    max-width: 320px;
}

.exam-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
    margin-bottom: 2px;
}

.exam-subtext {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.exam-meta-group {
    display: flex;
    align-items: center;
    gap: 18px;
}

.guru-avatar-pill {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e2e8f0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-status-pill {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
}

.badge-approved {
    background: #eff6ff;
    color: var(--primary-dark);
}

.badge-pending {
    background: #fef3c7;
    color: #b45309;
}

.badge-active {
    background: rgba(37, 99, 235, 0.15);
    color: var(--primary-teal);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.exam-schedule-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 120px;
}

.btn-start-exam {
    background: var(--primary-teal);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-start-exam:hover {
    background: var(--primary-dark);
}

/* Right Column: Illustrative Notice Card */
.promo-notice-card {
    background: #cbf3f0;
    border-radius: 24px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    position: relative;
    overflow: hidden;
}

.promo-decor-art {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 130px;
    height: 130px;
    opacity: 0.35;
    pointer-events: none;
}

.promo-card-content {
    position: relative;
    z-index: 2;
}

.promo-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f4c5c;
    margin-bottom: 6px;
}

.promo-desc {
    font-size: 0.76rem;
    color: #2c6e7a;
    line-height: 1.45;
    margin-bottom: 20px;
}

.btn-promo-yellow {
    background: var(--accent-yellow);
    color: #1e293b;
    border: none;
    border-radius: 999px;
    padding: 9px 24px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.15s ease;
    align-self: flex-start;
}

.btn-promo-yellow:hover {
    transform: scale(1.03);
}

/* ==========================================================================
   LIVE PROCTORING DASHBOARD (Ruang Pengawas Ujian CBT)
   ========================================================================== */
.proctor-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

@media (max-width: 1200px) {
    .proctor-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.proctor-stat-card {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.proctor-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.proctor-stat-val {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
}

.proctor-stat-lbl {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.proctor-table-container {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    overflow: hidden;
}

.proctor-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.proctor-table th {
    background: #f8fafc;
    padding: 14px 18px;
    text-align: left;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.proctor-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.proctor-table tr:hover td {
    background: #f8fafc;
}

.badge-question-tracker {
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary-teal);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Action Buttons Pengawas */
.proctor-actions-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-proctor-act {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-proctor-reset {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.btn-proctor-reset:hover {
    background: #fef3c7;
}

.btn-proctor-force {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.btn-proctor-force:hover {
    background: #dbeafe;
}

.btn-proctor-block {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}
.btn-proctor-block:hover {
    background: #fee2e2;
}

/* ==========================================================================
   RUANG PENGAWAS: PROGRES PENGERJAAN SOAL SISWA (PAPAN MONITORING REAL-TIME)
   ========================================================================== */
/* Card Utama Papan Progres Soal (Unified Single View) */
.proctor-progress-card {
    background: #ffffff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 24px;
}

/* Header Bar Progres: Total, Global 10-Q Nav, Pencarian & Legend */
.proctor-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
}

.proctor-progress-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.proctor-progress-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}











.proctor-search-box-inline {
    position: relative;
    max-width: 250px;
    min-width: 190px;
}

.proctor-search-box-inline i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.8rem;
    pointer-events: none;
}

.proctor-search-box-inline input {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 0.82rem;
    background: #ffffff;
    color: #1e293b;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.proctor-search-box-inline input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.proctor-total-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
}

.proctor-active-students-pill {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.2px;
}

.proctor-progress-legend {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
}

.proctor-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.proctor-legend-box {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.proctor-legend-box.unanswered {
    background: #ffffff;
    border: 1.5px solid #94a3b8;
}

.proctor-legend-box.answered {
    background: #2563eb;
    border: 1.5px solid #2563eb;
}

/* List Baris Siswa */
.proctor-progress-list {
    display: flex;
    flex-direction: column;
}

.proctor-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #f1f5f9;
    border-left: 4px solid transparent;
    gap: 16px;
    transition: background 0.15s ease, border-left-color 0.15s ease;
    box-sizing: border-box;
}

.proctor-progress-row:last-child {
    border-bottom: none;
}

.proctor-progress-row:hover {
    background: #f8fafc;
}

.proctor-progress-row.has-cheating {
    border-left: 4px solid #ea580c;
    background: #fffafa;
}

.proctor-progress-row.has-cheating:hover {
    background: #fff1f0;
}

/* Bagian Kiri: Nomor Urut & Nama */
.proctor-student-col-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
    max-width: 250px;
    flex: 0 0 230px;
}

.proctor-student-num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
    font-size: 0.85rem;
    font-family: var(--font-mono, monospace);
    border: 1px solid #dbeafe;
}

.proctor-student-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.proctor-student-name {
    font-weight: 700;
    font-size: 0.90rem;
    color: #0f172a;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proctor-student-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bagian Tengah: Diperbarui pada, Dijawab, & Device */
.proctor-student-col-mid {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 200px;
    max-width: 240px;
    flex: 0 0 220px;
    font-size: 0.76rem;
    color: #64748b;
}

.proctor-student-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.proctor-answered-badge {
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid #dbeafe;
    display: inline-block;
}

.proctor-device-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-weight: 500;
    font-size: 0.74rem;
}

.proctor-device-text i {
    color: #64748b;
    font-size: 0.85rem;
}

/* Kolom Keterangan Aksi Curang (Pill Presisi Sesuai Mockup Referensi Pengawas) */
.proctor-student-col-cheat {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    flex: 0 0 160px;
}

.proctor-cheat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #ea580c;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}

.proctor-cheat-pill i {
    font-size: 0.85rem;
}

.proctor-cheat-pill:hover {
    background: #c2410c;
    transform: scale(1.04);
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.45);
}

.proctor-cheat-pill.is-blocked {
    background: #dc2626;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.35);
}

.proctor-cheat-pill.is-blocked:hover {
    background: #b91c1c;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.45);
}

/* Bagian Kanan: 10 Bubble Soal Horisontal & Menu Aksi */
.proctor-student-col-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.proctor-bubbles-container {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap !important; /* STRICTLY HORIZONTAL: NO WRAP */
    overflow-x: auto;
    padding: 4px 0;
}

/* Lingkaran Nomor Soal */
.proctor-q-bubble {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #1e293b;
    transition: all 0.15s ease;
    user-select: none;
    box-sizing: border-box;
}

.proctor-q-bubble.answered {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.proctor-q-bubble.doubt {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
}

/* Tombol Navigasi 10 Soal (< dan >) & Chip Sisa */
.btn-proctor-bubble-nav {
    width: 24px;
    height: 28px;
    min-width: 24px;
    border: none;
    background: transparent;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    box-sizing: border-box;
}

.btn-proctor-bubble-nav:hover {
    color: #2563eb;
    transform: scale(1.15);
}

.proctor-q-more-chip {
    padding: 2px 4px;
    background: transparent;
    border: none;
    font-size: 0.84rem;
    font-weight: 800;
    color: #1e293b;
    cursor: pointer;
    transition: color 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}

.proctor-q-more-chip:hover {
    color: #2563eb;
}

.proctor-q-end-pill {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 700;
    padding: 2px 6px;
    background: transparent;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Tombol 3-Titik & Dropdown Menu */
.proctor-action-menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

.btn-proctor-menu-dots {
    width: 26px;
    height: 28px;
    min-width: 26px;
    border: none;
    background: transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.15s ease;
    padding: 0;
}

.btn-proctor-menu-dots:hover,
.btn-proctor-menu-dots.active {
    color: #334155;
}

.proctor-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    min-width: 200px;
    padding: 6px;
    z-index: 1050;
    display: none;
    animation: proctorMenuFadeIn 0.15s ease-out;
}

.proctor-dropdown-menu.show {
    display: block;
}

@keyframes proctorMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.proctor-menu-item {
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.proctor-menu-item:hover {
    background: #f8fafc;
    color: #2563eb;
}

.proctor-menu-item i {
    font-size: 0.95rem;
    color: #64748b;
    width: 16px;
    text-align: center;
}

.proctor-menu-item:hover i {
    color: #2563eb;
}

.proctor-menu-item.danger {
    color: #dc2626;
}

.proctor-menu-item.danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.proctor-menu-item.danger i {
    color: #dc2626;
}

/* Responsivitas Layar Mobile & Tablet */
@media (max-width: 900px) {
    .proctor-progress-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }
    .proctor-student-col-left,
    .proctor-student-col-mid,
    .proctor-student-col-cheat {
        min-width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
    }
    .proctor-student-col-cheat {
        justify-content: flex-start;
    }
    .proctor-student-col-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* ==========================================================================
   CBT EXAM PLAYER (Peningkatan MathJax, Gambar, & Mini Webcam)
   ========================================================================== */
.cbt-exam-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    background: #0f172a;
    color: #f8fafc;
    z-index: 99999 !important;
    display: none;
    flex-direction: column !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior: none !important;
    width: 100% !important;
    height: 100% !important;
    height: var(--cbt-app-height, 100%) !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   CBT EXAM HEADER & ACTIONS
   ========================================================================== */
.cbt-exam-header {
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    z-index: 10;
}

.cbt-header-main-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.cbt-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
}

.cbt-header-exam-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.14);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.cbt-header-title-inner {
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cbt-header-title h3 {
    font-size: 1.02rem;
    font-weight: 800;
    color: #f8fafc;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
    display: block;
    max-width: 100%;
}

#cbtExamHeaderMeta {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

.cbt-header-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-shrink: 0;
}

/* Font Resizer A- / A / A+ */
.cbt-font-resizer {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.btn-font-scale {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-font-scale:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.btn-font-scale.active {
    background: var(--primary-teal);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

/* Submit Lock Badge */
.cbt-submit-lock-badge {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.76rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all 0.2s;
}

.cbt-submit-lock-badge.unlocked {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

/* Timer Capsule */
.cbt-timer-capsule {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fbbf24;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.98rem;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Toggle Drawer Button (Mobile) */
.btn-cbt-drawer-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    color: #38bdf8;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

/* Sub-row Header Khusus Mobile */
.cbt-header-mobile-subrow {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cbt-submit-lock-badge-mobile {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cbt-submit-lock-badge-mobile.unlocked {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.cbt-mobile-exam-shield-badge {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   CBT BODY & QUESTION AREA
   ========================================================================== */
.cbt-body-grid {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
}

.cbt-question-column {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.cbt-question-area {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding: 24px 32px 28px 32px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overscroll-behavior: contain !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
}

/* Dynamic Font Resizing (xs, sm, md, lg, xl) */
.cbt-question-area.cbt-font-xs .cbt-q-text { font-size: 0.82rem !important; line-height: 1.5 !important; }
.cbt-question-area.cbt-font-xs .cbt-option-item { font-size: 0.80rem !important; min-height: 40px !important; padding: 6px 10px !important; }
.cbt-question-area.cbt-font-xs .cbt-option-key { width: 26px !important; height: 26px !important; font-size: 0.76rem !important; }

.cbt-question-area.cbt-font-sm .cbt-q-text { font-size: 0.92rem !important; line-height: 1.55 !important; }
.cbt-question-area.cbt-font-sm .cbt-option-item { font-size: 0.88rem !important; min-height: 44px !important; padding: 8px 12px !important; }
.cbt-question-area.cbt-font-sm .cbt-option-key { width: 28px !important; height: 28px !important; font-size: 0.82rem !important; }

.cbt-question-area.cbt-font-md .cbt-q-text { font-size: 1.05rem !important; line-height: 1.6 !important; }
.cbt-question-area.cbt-font-md .cbt-option-item { font-size: 0.95rem !important; padding: 12px 16px !important; }

.cbt-question-area.cbt-font-lg .cbt-q-text { font-size: 1.22rem !important; line-height: 1.7 !important; }
.cbt-question-area.cbt-font-lg .cbt-option-item { font-size: 1.10rem !important; padding: 15px 18px !important; }

.cbt-question-area.cbt-font-xl .cbt-q-text { font-size: 1.35rem !important; line-height: 1.8 !important; }
.cbt-question-area.cbt-font-xl .cbt-option-item { font-size: 1.20rem !important; padding: 16px 20px !important; }

/* Question Header Bar & Mobile Zoom Controls */
.cbt-q-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.cbt-q-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 2px 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn-q-zoom {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
}

.btn-q-zoom:hover,
.btn-q-zoom:active {
    background: rgba(255, 255, 255, 0.14);
    color: #38bdf8;
}

.btn-q-zoom.reset-zoom {
    color: #cbd5e1;
    font-size: 0.72rem;
    padding: 3px 5px;
}

/* CBT Offline & Network Sync Status Badge */
.cbt-sync-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cbt-sync-status-badge.is-synced {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #34d399;
}

.cbt-sync-status-badge.is-offline {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.55);
    color: #f87171;
    animation: cbtPulseOffline 2s infinite;
}

.cbt-sync-status-badge.is-syncing {
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.5);
    color: #38bdf8;
}

@keyframes cbtPulseOffline {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(0.98); }
}

.cbt-question-box {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.cbt-q-number {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-teal);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cbt-q-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #f1f5f9;
    word-break: break-word;
}

/* MathJax & Gambar Soal */
.math-formula-box {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 12px;
    padding: 10px 16px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow-x: auto;
}

.q-image-container {
    margin: 14px 0;
    text-align: center;
}

.q-image-interactive-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: zoom-in;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.q-image-interactive-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(56, 189, 248, 0.35);
}

.q-image-interactive-wrap:hover .q-image-zoom-overlay {
    opacity: 1;
    transform: translateY(0);
}

.cbt-q-text img,
#cbtQuestionText img,
.cbt-question-box img,
.q-image-container img,
.q-image-preview {
    max-width: 100% !important;
    max-height: 380px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    display: block !important;
    margin: 12px auto !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(15, 23, 42, 0.5) !important;
}

.cbt-option-item img {
    max-width: 100% !important;
    max-height: 140px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: inline-block !important;
    margin: 6px 0 !important;
    vertical-align: middle !important;
}

.q-image-zoom-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(8px);
    color: #38bdf8;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    opacity: 0.9;
    transform: translateY(2px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.cbt-inline-zoomable-img {
    cursor: zoom-in !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

.cbt-inline-zoomable-img:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(56, 189, 248, 0.45) !important;
}

/* ==================================================================== */
/* CBT LIGHTBOX IMAGE ZOOM MODAL                                       */
/* ==================================================================== */
.cbt-image-zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    box-sizing: border-box;
    user-select: none;
    animation: cbtZoomFadeIn 0.2s ease-out;
}

@keyframes cbtZoomFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.cbt-zoom-toolbar {
    width: 100%;
    max-width: 860px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 10px 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 10;
}

.cbt-zoom-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
}

.cbt-zoom-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-cbt-zoom-tool {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f8fafc;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-cbt-zoom-tool:hover {
    background: rgba(56, 189, 248, 0.22);
    border-color: #38bdf8;
    color: #38bdf8;
    transform: scale(1.08);
}

.cbt-zoom-percentage {
    min-width: 52px;
    text-align: center;
    font-weight: 700;
    font-size: 0.88rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
    border: 1px solid rgba(56, 189, 248, 0.25);
    padding: 5px 8px;
    border-radius: 6px;
}

.cbt-zoom-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.18);
    margin: 0 4px;
}

.btn-cbt-zoom-close {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-cbt-zoom-close:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.08);
}

.cbt-zoom-viewport {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    touch-action: none;
}

.cbt-zoom-target-img {
    max-width: 88vw;
    max-height: 76vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    transform-origin: center center;
    cursor: grab;
    will-change: transform;
}

.cbt-zoom-hint-pill {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    font-size: 0.82rem;
    padding: 7px 16px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 640px) {
    .cbt-zoom-toolbar {
        padding: 8px 12px;
        border-radius: 10px;
    }
    .cbt-zoom-title {
        font-size: 0.84rem;
    }
    .btn-cbt-zoom-tool, .btn-cbt-zoom-close {
        width: 32px;
        height: 32px;
        font-size: 0.84rem;
    }
    .cbt-zoom-percentage {
        min-width: 44px;
        font-size: 0.8rem;
        padding: 4px 6px;
    }
    .cbt-zoom-hint-pill {
        display: none;
    }
}

.cbt-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbt-option-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.cbt-option-item:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
}

.cbt-option-item.selected {
    background: rgba(37, 99, 235, 0.2);
    border-color: var(--primary-teal);
}

.cbt-option-key {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbt-option-item.selected .cbt-option-key {
    background: var(--primary-teal);
    color: #ffffff;
}

/* Kontrol Navigasi Soal — Docked Konsisten di Bagian Bawah di Semua Perangkat & Browser */
.cbt-nav-controls {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    width: 100% !important;
    padding: 12px 32px calc(12px + env(safe-area-inset-bottom, 0px)) 32px;
    background: #1e293b;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35);
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    z-index: 40;
    box-sizing: border-box !important;
}

.btn-cbt-nav {
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.btn-cbt-prev {
    background: #334155;
    color: #f1f5f9;
}

.btn-cbt-prev:hover {
    background: #475569;
}

.btn-cbt-doubt {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.btn-cbt-doubt:hover {
    background: rgba(245, 158, 11, 0.3);
}

.btn-cbt-next {
    background: var(--primary-teal);
    color: #ffffff;
}

.btn-cbt-next:hover {
    filter: brightness(1.1);
}

.btn-cbt-grid-trigger {
    display: none;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
}

.btn-cbt-finish {
    background: #22c55e;
    color: #ffffff;
}

.btn-cbt-finish:hover {
    background: #16a34a;
}

.btn-cbt-finish.locked-duration {
    background: #475569;
    color: #cbd5e1;
    cursor: not-allowed;
    opacity: 0.75;
}

/* ==========================================================================
   SIDEBAR NAVIGATOR & MOBILE BOTTOM SHEET DRAWER
   ========================================================================== */
.cbt-nav-drawer-backdrop {
    display: none;
}

.cbt-navigator-sidebar {
    background: #1e293b;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.cbt-drawer-pill {
    display: none;
}

.cbt-nav-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cbt-nav-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
}

.cbt-nav-meta-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cbt-nav-counter-summary {
    font-size: 0.74rem;
    color: #94a3b8;
    font-weight: 600;
}

.btn-close-cbt-drawer {
    display: none;
}

.cbt-number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.q-num-btn {
    aspect-ratio: 1/1;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.q-num-btn.answered {
    background: var(--primary-teal);
    color: #ffffff;
    border-color: var(--primary-teal);
}

.q-num-btn.doubt {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}

.q-num-btn.active-q {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.cbt-legend-footer {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.8;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

/* ==========================================================================
   ULTRA-HIGH SENSITIVITY PRIVACY SHIELD (BUBBLE & FLOATING APP DEFENSE)
   ========================================================================== */
.cbt-focus-privacy-shield {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 100010;
    background: rgba(10, 15, 29, 0.98);
    backdrop-filter: blur(45px);
    -webkit-backdrop-filter: blur(45px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    color: #ffffff;
    animation: cbtFadeInShield 0.15s ease-out;
}

@keyframes cbtFadeInShield {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.privacy-shield-card {
    background: #1e293b;
    border: 2px solid rgba(239, 68, 68, 0.45);
    border-radius: 24px;
    padding: 30px 22px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.privacy-shield-pulse-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid #ef4444;
    color: #ef4444;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseShieldRed 1.8s infinite;
}

@keyframes pulseShieldRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.privacy-shield-card h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #f87171;
    margin: 0;
    letter-spacing: 0.3px;
}

.privacy-shield-tag {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.privacy-shield-msg {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 4px 0;
}

.privacy-shield-strike-box {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.84rem;
    color: #f87171;
    font-weight: 700;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-privacy-shield-resume {
    background: linear-gradient(135deg, #2563eb 0%, #0d7a66 100%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 13px 20px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.btn-privacy-shield-resume:active {
    transform: scale(0.98);
}

.privacy-shield-subtext {
    font-size: 0.72rem;
    color: #94a3b8;
    line-height: 1.5;
}

/* ==========================================================================
   EDGE SHIELDS (ANTI-SIDEBAR, ANTI-QUICKBALL & ANTI-GESTURE BARRIERS)
   ========================================================================== */
.cbt-edge-shield-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 14px;
    z-index: 100005;
    touch-action: none !important;
    pointer-events: auto;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.cbt-edge-shield-right {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 14px;
    z-index: 100005;
    touch-action: none !important;
    pointer-events: auto;
    background: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.cbt-edge-shield-top {
    display: none !important;
    pointer-events: none !important;
}

/* Reinforcement: Saat Privacy Shield aktif, konten soal di bawahnya di-blur total 45px & zero opacity */
body.cbt-privacy-shield-active .cbt-question-area,
body.cbt-privacy-shield-active .cbt-body-grid,
body.cbt-privacy-shield-active #cbtQuestionCard,
body.cbt-privacy-shield-active .cbt-question-box,
body.cbt-privacy-shield-active .cbt-options-list {
    filter: blur(45px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    transition: filter 0.05s ease, opacity 0.05s ease;
}

/* Kunci Layar Penuh Total untuk Android & iPhone (iOS) */
html.secure-exam-lock,
body.secure-exam-lock {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
    height: var(--cbt-app-height, 100%) !important;
    margin: 0 !important;
    padding: 0 !important;
    overscroll-behavior: none !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior: none !important;
    touch-action: pan-y !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Sembunyikan seluruh UI Notifikasi LMS & Elemen Melayang selama Sesi Ujian */
html.secure-exam-lock .notification-bell-btn,
body.secure-exam-lock .notification-bell-btn,
html.secure-exam-lock .notification-dropdown,
body.secure-exam-lock .notification-dropdown,
html.secure-exam-lock .lms-floating-toast,
body.secure-exam-lock .lms-floating-toast,
html.secure-exam-lock .lms-toast-container,
body.secure-exam-lock .lms-toast-container,
html.secure-exam-lock .brand-header,
body.secure-exam-lock .brand-header,
html.secure-exam-lock .lms-sidebar,
body.secure-exam-lock .lms-sidebar,
html.secure-exam-lock .mobile-bottom-nav,
body.secure-exam-lock .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Styling Khusus Modal Protokol HP: Kotak Alat Samping, Bola Pintar, Laci Aplikasi */
.protocol-checklist-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
    text-align: left;
}

.protocol-item-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 13px 15px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: all 0.2s ease;
    cursor: pointer;
}

.protocol-item-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
}

.protocol-item-card.checked {
    background: #f0fdf4;
    border-color: #22c55e;
}

.protocol-item-checkbox {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: #16a34a;
    cursor: pointer;
    flex-shrink: 0;
}

.protocol-item-content {
    flex: 1;
    min-width: 0;
}

.protocol-item-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.protocol-item-badge-danger {
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}

.protocol-item-desc {
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 5px;
}

.protocol-item-guide {
    font-size: 0.74rem;
    color: #0369a1;
    background: #f0f9ff;
    border-left: 3px solid #0284c7;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.protocol-quick-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 0 4px;
}

.btn-protocol-check-all {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-protocol-check-all:hover {
    background: #bae6fd;
    color: #0284c7;
}

.protocol-expand-guide-btn {
    color: #64748b;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
}

.protocol-guide-accordion {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.76rem;
    color: #334155;
    line-height: 1.5;
    text-align: left;
}

/* ==========================================================================
   TAMENG PENGAMAN LAYAR PENUH DESKTOP (FULLSCREEN ENFORCEMENT OVERLAY)
   ========================================================================== */
.cbt-fullscreen-enforcer-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    background: rgba(10, 15, 29, 0.96) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 99999999 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    animation: cbtEnforcerFadeIn 0.25s ease-out;
}

@keyframes cbtEnforcerFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.cbt-enforcer-card {
    background: linear-gradient(165deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(239, 68, 68, 0.6);
    border-radius: 24px;
    width: 100%;
    max-width: 520px;
    padding: 36px 28px;
    text-align: center;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.8), 0 0 40px rgba(239, 68, 68, 0.25);
    position: relative;
    overflow: hidden;
}

.cbt-enforcer-icon-pulse {
    width: 76px;
    height: 76px;
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 auto 20px auto;
    animation: cbtIconPulse 1.8s infinite ease-in-out;
}

@keyframes cbtIconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
}

.cbt-enforcer-card h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.cbt-enforcer-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.cbt-enforcer-card p {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 18px;
}

.cbt-enforcer-strike-info {
    background: rgba(15, 23, 42, 0.8);
    border: 1px dashed rgba(239, 68, 68, 0.4);
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.86rem;
    color: #fca5a5;
    margin-bottom: 24px;
}

.btn-cbt-enforcer-resume {
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.45);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cbt-enforcer-resume:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6);
    filter: brightness(1.1);
}

.cbt-enforcer-hint {
    margin-top: 14px;
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Helper display untuk tombol responsive */
.finish-text-short {
    display: none;
}
.cbt-nav-btn-text-mobile {
    display: none;
}

/* ==========================================================================
   MASTER RECONSTRUCTED RESPONSIVE CBT FOR SMARTPHONE / MOBILE PORTRAIT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Header Ujian 2-Baris Terstruktur & 100% Bebas Tumpukan */
    .cbt-exam-header {
        padding: 8px 12px !important;
        gap: 6px !important;
        background: #0f172a !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
        flex-shrink: 0 !important;
    }

    .cbt-header-main-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .cbt-header-title {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        gap: 0 !important;
    }

    .cbt-header-exam-icon {
        display: none !important;
    }

    .cbt-header-title-inner {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .cbt-header-title h3 {
        font-size: 0.9rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        color: #f8fafc !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        max-width: 100% !important;
    }

    #cbtExamHeaderMeta {
        display: none !important;
    }

    .cbt-header-actions-group {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* Pindahkan Sync Badge ke Sub-row Mobile & Sembunyikan Kontrol Zoom Ganda di Baris 1 */
    .cbt-header-main-row #cbtSyncStatusBadge,
    #cbtSyncStatusBadge,
    .cbt-header-main-row .cbt-font-resizer,
    .cbt-font-resizer,
    .cbt-header-main-row #cbtFontResizerBox,
    #cbtFontResizerBox,
    .cbt-header-main-row #cbtSubmitLockBadge,
    #cbtSubmitLockBadge {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Timer Kapsul Mobile */
    .cbt-timer-capsule {
        padding: 4px 9px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        gap: 4px !important;
        background: rgba(245, 158, 11, 0.15) !important;
        border: 1px solid rgba(245, 158, 11, 0.4) !important;
        color: #fbbf24 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Sembunyikan Tombol Drawer Nomor Soal di Header Mobile (Gunakan Tombol Daftar Soal di Navbar Bawah) */
    .btn-cbt-drawer-toggle,
    #btnToggleNavSheet {
        display: none !important;
    }

    /* Tombol Selesai Mobile */
    .btn-cbt-finish {
        padding: 5px 10px !important;
        font-size: 0.76rem !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .finish-text-full {
        display: none !important;
    }

    .finish-text-short {
        display: inline !important;
    }

    /* Baris 2 Header Mobile: Status Sinkronisasi + Kunci Waktu (Kiri) & Pesan + Bantuan (Kanan) */
    .cbt-header-mobile-subrow {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        width: 100% !important;
        padding-top: 6px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .cbt-mobile-subrow-status {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-width: 0 !important;
        flex: 1 1 0% !important;
        overflow: hidden !important;
    }

    #cbtSyncBadgeMobile {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 2px 8px !important;
        font-size: 0.67rem !important;
        font-weight: 700 !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .cbt-submit-lock-badge-mobile {
        font-size: 0.67rem !important;
        padding: 2px 8px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    .cbt-mobile-exam-shield-badge {
        font-size: 0.7rem !important;
    }

    /* 2. Grid 1 Kolom Penuh Khusus Mobile */
    .cbt-body-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .cbt-question-column {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* 3. Kontainer Soal Mobile (Scrollable Independen di Atas Navbar Bawah) */
    .cbt-question-area {
        padding: 14px 14px 24px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scroll-padding-bottom: 24px !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        background: #090e1a !important;
    }

    .cbt-question-box {
        padding: 16px 16px !important;
        border-radius: 16px !important;
        margin-bottom: 14px !important;
        background: linear-gradient(150deg, #1e293b 0%, #111827 100%) !important;
        border: 1px solid rgba(56, 189, 248, 0.22) !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    }

    .cbt-q-number {
        font-size: 0.76rem !important;
        font-weight: 800 !important;
        color: #2dd4bf !important;
        letter-spacing: 0.4px !important;
        margin-bottom: 0 !important;
    }

    .cbt-q-text {
        font-size: 1.0rem !important;
        line-height: 1.6 !important;
        color: #f8fafc !important;
        word-break: break-word !important;
    }

    .q-image-preview,
    .cbt-q-text img,
    #cbtQuestionText img {
        max-height: 200px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        margin: 10px auto !important;
    }

    /* 4. Pilihan Jawaban Ramah Sentuhan Layar HP (Min-Height 48px) */
    .cbt-options-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }

    .cbt-options-list .cbt-option-item:last-child {
        margin-bottom: 8px !important;
    }

    .cbt-option-item {
        min-height: 48px !important;
        padding: 10px 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        touch-action: pan-y !important;
        -webkit-tap-highlight-color: transparent !important;
        background: rgba(30, 41, 59, 0.65) !important;
        border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .cbt-option-item:active {
        transform: scale(0.985) !important;
        background: rgba(56, 189, 248, 0.15) !important;
    }

    .cbt-option-item.selected {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.3), rgba(6, 95, 70, 0.4)) !important;
        border-color: #2563eb !important;
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4) !important;
    }

    .cbt-option-key {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.86rem !important;
        font-weight: 800 !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #e2e8f0 !important;
    }

    .cbt-option-item.selected .cbt-option-key {
        background: linear-gradient(135deg, #2563eb, #0d7a66) !important;
        color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(37, 99, 235, 0.6) !important;
    }

    /* 5. BILAH NAVIGASI BAWAH ERGONOMIS & PROPORSIONAL (DOCKED STABIL DI BAWAH TANPA GESER) */
    .cbt-nav-controls {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        background: #0f172a !important;
        border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 4px)) 10px !important;
        z-index: 40 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.6) !important;
        transform: none !important;
    }

    .btn-cbt-nav {
        height: 42px !important;
        padding: 0 4px !important;
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transition: transform 0.15s ease, opacity 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }

    .btn-cbt-nav:active {
        transform: scale(0.94) !important;
    }

    .cbt-nav-btn-text {
        display: none !important;
    }

    .cbt-nav-btn-text-mobile {
        display: inline !important;
        font-size: 0.74rem !important;
        white-space: nowrap !important;
    }

    .btn-cbt-prev {
        flex: 1 !important;
        background: #334155 !important;
        color: #f1f5f9 !important;
    }

    .btn-cbt-doubt {
        flex: 1 !important;
        background: rgba(245, 158, 11, 0.2) !important;
        color: #fbbf24 !important;
        border: 1px solid rgba(245, 158, 11, 0.45) !important;
    }

    .btn-cbt-grid-trigger {
        display: inline-flex !important;
        flex: 1 !important;
        background: rgba(56, 189, 248, 0.18) !important;
        color: #38bdf8 !important;
        border: 1px solid rgba(56, 189, 248, 0.4) !important;
    }

    .btn-cbt-next {
        flex: 1.15 !important;
        background: var(--primary-teal) !important;
        color: #ffffff !important;
    }

    /* 6. DRAWER NOMOR SOAL SLIDE-UP BOTTOM SHEET MODERN (GPU-Accelerated 60 FPS) */
    .cbt-nav-drawer-backdrop {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        inset: 0 !important;
        background: rgba(15, 23, 42, 0.72) !important;
        z-index: 100001 !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: opacity;
        transform: translateZ(0);
    }

    .cbt-nav-drawer-backdrop.show {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .cbt-navigator-sidebar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 75vh !important;
        max-height: 75dvh !important;
        background: #1e293b !important;
        border-radius: 22px 22px 0 0 !important;
        border-left: none !important;
        border-top: 2px solid rgba(56, 189, 248, 0.4) !important;
        box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.75) !important;
        z-index: 100002 !important;
        transform: translate3d(0, 102%, 0) !important;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        padding: 14px 16px 28px 16px !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }

    .cbt-navigator-sidebar.drawer-open {
        transform: translate3d(0, 0, 0) !important;
    }

    .cbt-drawer-pill {
        display: block !important;
        width: 46px !important;
        height: 5px !important;
        background: rgba(255, 255, 255, 0.25) !important;
        border-radius: 999px !important;
        margin: 0 auto 12px auto !important;
        cursor: pointer !important;
    }

    .btn-close-cbt-drawer {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: none !important;
        color: #cbd5e1 !important;
        cursor: pointer !important;
        font-size: 0.85rem !important;
    }

    .cbt-number-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    .q-num-btn {
        height: 44px !important;
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }

    /* 7. MINI WEBCAM REPOSITIONED TO TOP RIGHT (AGAR TIDAK MENUTUPI TOMBOL NAVIGASI BAWAH) */
    .mini-webcam-proctor-box {
        position: fixed !important;
        top: 68px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        width: 84px !important;
        height: 63px !important;
        border-radius: 10px !important;
        z-index: 990 !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    }
}

/* Optimasi Khusus Layar Sangat Sempit (<= 360px) */
@media (max-width: 360px) {
    .cbt-header-title h3 {
        font-size: 0.82rem !important;
    }

    .cbt-timer-capsule {
        padding: 3px 7px !important;
        font-size: 0.73rem !important;
    }

    .btn-cbt-drawer-toggle,
    #btnToggleNavSheet {
        display: none !important;
    }

    .btn-cbt-finish {
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
    }

    #cbtSyncBadgeMobile,
    .cbt-submit-lock-badge-mobile,
    .cbt-mob-tool-pill {
        padding: 2px 6px !important;
        font-size: 0.63rem !important;
    }

    .btn-cbt-nav {
        padding: 0 3px !important;
        font-size: 0.72rem !important;
    }
}

.webcam-live-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Mirror camera */
}

.webcam-live-indicator {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #35d5af;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Modal Pembuat Ujian, Import Word, dan Seluruh Modal Pengawas (Proctoring Modals) */
.lms-modal-backdrop,
.lms-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.78) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 100005 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    overflow-y: auto !important;
}

.lms-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    animation: lmsModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.lms-modal-card.modal-lg {
    max-width: 960px !important;
    width: 100% !important;
}

.lms-modal-card.modal-md {
    max-width: 580px !important;
    width: 100% !important;
}

.lms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    flex-shrink: 0;
}

.lms-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.lms-modal-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin: 3px 0 0 0;
    line-height: 1.35;
}

.modal-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.lms-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.lms-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-light);
}

.modal-header-row h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
}

.btn-close-modal {
    background: #f1f5f9;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-close-modal:hover {
    background: #e2e8f0;
    color: #0f172a;
}

/* ==================================================================== */
/* MODERN PREMIUM CBT FORM MODALS & CONTROLS                            */
/* ==================================================================== */
.cbt-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 620px;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: lmsModalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    border: 1px solid #e2e8f0;
}

.cbt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 18px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
}

.cbt-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cbt-modal-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.12), rgba(20, 184, 166, 0.2));
    border: 1px solid rgba(29, 78, 216, 0.25);
    color: var(--primary-teal, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cbt-modal-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.cbt-modal-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin: 2px 0 0;
}

.cbt-modal-close-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.cbt-modal-close-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
    transform: rotate(90deg);
}

.cbt-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    max-height: calc(85vh - 140px);
    box-sizing: border-box;
}

.cbt-modal-card .cbt-modal-body {
    display: block !important;
}

.cbt-form-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .cbt-form-grid-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==================================================================== */
/* MODAL ATUR SOAL YANG TIDAK DIACAK (CBT NON-SHUFFLED QUESTIONS)       */
/* ==================================================================== */
.lock-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.83rem;
    color: #166534;
    line-height: 1.45;
}

.lock-info-banner i {
    color: #16a34a;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.lock-actions-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
}

.lock-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.lock-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
}

.lock-search-input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #0f172a;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.lock-search-input:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.lock-quick-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-lock-toggle-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-lock-toggle-all:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.lock-counter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0284c7;
}

.lock-q-list {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 2px 8px 2px;
}

.lock-q-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    position: relative;
}

.lock-q-card.is-unlocked {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
}

.lock-q-card.is-unlocked:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.lock-q-card.is-locked {
    background: linear-gradient(135deg, #f8faff 0%, #e6fffa 100%);
    border: 1.5px solid #1d4ed8;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.12);
}

.lock-q-card.is-locked:hover {
    background: #ccfbf1;
    border-color: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.18);
}

.lock-q-check-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chk-soal-tetap {
    width: 19px;
    height: 19px;
    cursor: pointer;
    accent-color: #1d4ed8;
    border-radius: 5px;
    margin: 0;
}

.lock-q-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.lock-q-card.is-unlocked .lock-q-num-badge {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.lock-q-card.is-locked .lock-q-num-badge {
    background: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.3);
}

.lock-q-text-col {
    flex: 1;
    min-width: 0;
}

.lock-q-text-snippet {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #1e293b;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lock-q-card.is-locked .lock-q-text-snippet {
    color: #0f172a;
    font-weight: 600;
}

.lock-q-status-col {
    flex-shrink: 0;
}

.badge-lock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 700;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.badge-lock-status.status-locked {
    background: #ccfbf1;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.badge-lock-status.status-unlocked {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.cbt-form-group {
    margin-bottom: 16px;
}

.cbt-form-group:last-child {
    margin-bottom: 0;
}

.cbt-form-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 7px;
    letter-spacing: -0.01em;
}

.cbt-form-label .req-star {
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}

.cbt-form-input,
.cbt-form-select,
.cbt-form-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.88rem;
    color: #0f172a;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s ease;
    outline: none;
}

.cbt-form-input {
    height: 44px;
    padding: 0 14px;
}

.cbt-form-input:focus,
.cbt-form-select:focus,
.cbt-form-textarea:focus {
    border-color: var(--primary-teal, #1d4ed8);
    box-shadow: 0 0 0 3.5px rgba(29, 78, 216, 0.15);
    background: #ffffff;
}

.cbt-form-select {
    height: 44px;
    padding: 0 38px 0 14px;
    cursor: pointer;
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.cbt-form-textarea {
    padding: 12px 14px;
    min-height: 80px;
    resize: none;
    line-height: 1.5;
}

.cbt-modal-footer {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.cbt-btn-secondary {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cbt-btn-secondary:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

.cbt-btn-primary {
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
    transition: all 0.2s ease;
}

.cbt-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(29, 78, 216, 0.38);
    filter: brightness(1.05);
}

.cbt-btn-primary:active {
    transform: translateY(0);
}

/* Legacy fallback styles upgraded */
.form-group-cbt {
    margin-bottom: 16px;
}

.form-group-cbt label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main, #334155);
    margin-bottom: 6px;
}

.form-input-cbt {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    padding: 10px 14px;
    border: 1.5px solid var(--border-light, #e2e8f0);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--text-main, #0f172a);
    background: #ffffff;
    outline: none;
    transition: all 0.2s ease;
}

select.form-input-cbt {
    height: 44px;
    padding-right: 38px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

textarea.form-input-cbt {
    resize: none;
    min-height: 80px;
    line-height: 1.5;
}

.form-input-cbt:focus {
    border-color: var(--primary-teal, #1d4ed8);
    box-shadow: 0 0 0 3.5px rgba(29, 78, 216, 0.15);
}

.dropzone-word {
    border: 2px dashed var(--primary-teal);
    background: var(--primary-light);
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.dropzone-word:hover {
    background: #ccfbf1;
}

/* Modal Peringatan Kecurangan CBT (Strike System) */
.cheat-warning-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(6px);
    z-index: 100004;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cheat-modal-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(239, 68, 68, 0.25);
    animation: cheatPop 0.25s ease-out;
}

@keyframes cheatPop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.cheat-modal-card i {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 12px;
    display: inline-block;
}

.cheat-modal-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}

.cheat-modal-card p {
    font-size: 0.86rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Layar Merah Terblokir */
.cbt-blocked-screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: #450a0a;
    color: #fef2f2;
    z-index: 100005;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.cbt-blocked-card {
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ef4444;
    border-radius: 24px;
    padding: 36px 30px;
    max-width: 480px;
}

.cbt-blocked-card i {
    font-size: 3.5rem;
    color: #ef4444;
    margin-bottom: 16px;
}

.cbt-blocked-card h2 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.cbt-blocked-card p {
    font-size: 0.88rem;
    color: #fca5a5;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 1024px) {
    .lms-app-frame {
        border-radius: 20px;
    }
    .bottom-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .proctor-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    body {
        padding: 0;
    }
    .lms-app-frame {
        border-radius: 0;
        flex-direction: column;
        min-height: 100vh;
    }
    .lms-sidebar {
        width: 100%;
        padding: 18px;
    }
    .nav-link-item.active::before,
    .nav-link-item.active::after {
        display: none;
    }
    .lms-main-content {
        padding: 0 12px 20px 12px;
    }
    .topbar-search-box {
        width: 100%;
    }
    .cbt-body-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ROLE SWITCHER CAPSULE (Pengawas / Guru / Siswa)
   ========================================================================== */
.role-switcher-capsule {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

.role-switch-pill {
    border: none;
    background: transparent;
    color: #64748b;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.role-switch-pill:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.6);
}

.role-switch-pill.active {
    background: #ffffff;
    color: var(--primary-teal);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Proctor Live Pulse Dot */
.proctor-live-pulse {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 8px #ef4444;
    animation: proctorPulse 1.8s infinite;
}

@keyframes proctorPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #ef4444; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

/* Submit Lock Badge */
.cbt-submit-lock-badge {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
}

.cbt-submit-lock-badge.unlocked {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

/* Security Dots on Proctor Table */
.indicator-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}

.dot-green {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.dot-red {
    background: #ef4444;
    box-shadow: 0 0 6px #ef4444;
}

.dot-yellow {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
}

/* Word Import & Builder Modal Styles */
.builder-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.builder-badge-info {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 4px;
    display: block;
}

.exam-preview-item {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

/* ==========================================================================
   MENU PENILAIAN & PEMBUATAN SOAL BERBASIS KELAS (DATABASE TERPADU)
   ========================================================================== */
.penilaian-class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.class-pill-card {
    background: #f8fafc;
    border: 1.5px solid var(--border-light);
    border-radius: 16px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.class-pill-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary-teal);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.1);
}

.class-pill-card.active {
    background: #eff6ff;
    border-color: var(--primary-teal);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
}

.class-pill-card .class-name {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-main);
}

.class-pill-card.active .class-name {
    color: var(--primary-dark);
}

.class-pill-card .class-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.class-banner-card {
    background: linear-gradient(135deg, #f8faff, #e0f2fe);
    border: 1px solid #ccfbf1;
    border-radius: 20px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.class-banner-info h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e40af;
    margin-bottom: 4px;
}

.class-banner-info p {
    font-size: 0.82rem;
    color: #334155;
    line-height: 1.4;
}

.penilaian-subtabs {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 20px;
}

.subtab-btn-penilaian {
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -2px;
}

.subtab-btn-penilaian:hover {
    color: var(--primary-teal);
}

.subtab-btn-penilaian.active {
    color: var(--primary-teal);
    border-bottom-color: var(--primary-teal);
}

.table-penilaian-wrap {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    overflow: hidden;
}

.table-penilaian-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.table-penilaian-wrap th {
    background: #f8fafc;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
    font-size: 0.74rem;
    text-transform: uppercase;
}

.table-penilaian-wrap td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-main);
    vertical-align: middle;
}

.table-penilaian-wrap tr:hover td {
    background: #f8fafc;
}

/* ==========================================================================
   LMS CUSTOM STYLED DIALOG & POPUP SYSTEM (2026 UI)
   ========================================================================== */
.lms-dialog-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(8px);
    z-index: 100010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lms-dialog-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 28px 26px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-light);
    animation: dialogZoomIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

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

.lms-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.lms-dialog-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.lms-dialog-title-area {
    flex: 1;
}

.lms-dialog-badge {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.lms-dialog-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.3;
}

.lms-dialog-body {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 4px;
}

.dialog-paragraph {
    margin-bottom: 8px;
}

.dialog-paragraph:last-child {
    margin-bottom: 0;
}

.dialog-paragraph strong,
.dialog-bullet-item strong,
.dialog-numbered-item strong {
    color: #0f172a;
    font-weight: 700;
}

.dialog-bullet-item {
    padding-left: 14px;
    margin-bottom: 6px;
    position: relative;
    font-size: 0.86rem;
    color: #334155;
}

.dialog-bullet-item::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--primary-teal);
    font-weight: bold;
}

.dialog-numbered-item {
    background: #f8fafc;
    border-left: 3px solid var(--primary-teal);
    padding: 8px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 6px;
    font-size: 0.84rem;
    color: #1e293b;
}

.lms-dialog-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.2s ease;
    color: var(--text-main);
    background: #f8fafc;
    box-sizing: border-box;
}

.lms-dialog-input:focus {
    border-color: var(--primary-teal);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.lms-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 18px;
}

.btn-lms-dialog-primary {
    background: var(--primary-teal);
    color: #ffffff;
    border: none;
    padding: 10px 22px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
}

.btn-lms-dialog-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.btn-lms-dialog-cancel {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-lms-dialog-cancel:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

/* Reset Student Submission Choice Modal */
.dialog-reset-choice {
    max-width: 580px;
    width: 95%;
}

.reset-choice-card {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
}

.reset-choice-card.card-continue:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.18);
    border-color: #34d399 !important;
}

.reset-choice-card.card-restart:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(225, 29, 72, 0.18);
    border-color: #fb7185 !important;
}

.btn-action-pick-choice {
    transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}

.btn-action-pick-choice:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.btn-action-pick-choice:active {
    transform: translateY(0);
}

/* Exam Card Styles */
.exam-card-preview-box {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border: 1.5px solid var(--border-light);
    border-radius: 16px;
    padding: 18px;
}

.card-school-header {
    border-bottom: 1.5px dashed #cbd5e1;
    padding-bottom: 10px;
    margin-bottom: 14px;
    text-align: center;
}

.card-details-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 12px;
    font-size: 0.84rem;
}

.card-detail-label {
    color: #64748b;
    font-weight: 600;
}

.card-detail-val {
    color: #1e293b;
    font-weight: 700;
}

.card-qr-footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1.5px dashed #cbd5e1;
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   LMS MATH FORMULA EDITOR MODAL (2026 PREMIUM UI)
   ========================================================================== */
.lms-math-dialog-card {
    max-width: 660px !important;
    width: 95% !important;
    background: #1e1e2d;
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55), 0 0 30px rgba(37, 99, 235, 0.15);
}

.lms-math-dialog-card .lms-dialog-title {
    color: #ffffff;
}

.lms-math-shortcuts-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 14px;
}

.lms-math-shortcut-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.lms-math-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 3px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.lms-math-btn:hover {
    background: rgba(37, 99, 235, 0.25);
    border-color: #2563eb;
    color: #38bdf8;
    transform: translateY(-1px);
}

.lms-math-input-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.lms-math-textarea {
    width: 100%;
    background: #0f172a;
    color: #38bdf8;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 12px 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: all 0.2s ease;
    margin-bottom: 14px;
}

.lms-math-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    background: #0b1120;
}

.lms-math-preview-container {
    background: rgba(15, 23, 42, 0.7);
    border: 1.5px dashed rgba(37, 99, 235, 0.35);
    border-radius: 14px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.lms-math-preview-header {
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lms-math-preview-render {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #ffffff;
    overflow-x: auto;
    padding: 6px 0;
}

.lms-math-preview-render mjx-container {
    margin: 0 !important;
    outline: none !important;
}

.lms-math-dialog-card .lms-dialog-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Floating Toast Notification */
.lms-toast-container {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100020;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.lms-toast-pill {
    background: #0f172a;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    animation: toastSlideDown 0.25s ease-out;
    pointer-events: auto;
}

.lms-toast-pill.fade-out {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s, transform 0.3s;
}

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

/* ==========================================================================
   1. STYLING VIEW MATERI PEMBELAJARAN
   ========================================================================== */
.materi-filters-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.materi-filter-pill {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid var(--border-light);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.materi-filter-pill:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

.materi-filter-pill.active {
    background: var(--primary-teal);
    color: #ffffff;
    border-color: var(--primary-teal);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.materi-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.material-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.material-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}

.material-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.material-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.material-card-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 4px;
}

.material-card-meta {
    font-size: 0.74rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.material-card-summary {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.material-attachments-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.material-attachment-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.material-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

/* ==========================================================================
   2. STYLING BANK SOAL SEKOLAH
   ========================================================================== */
.bank-soal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.bank-soal-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
}

.bank-soal-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.bank-soal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.bank-soal-code {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-teal);
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 6px;
}

.bank-soal-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.4;
    margin-bottom: 6px;
}

.bank-soal-desc {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 12px;
}

.bank-soal-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.bank-soal-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bank-soal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}

/* ==========================================================================
   3. STYLING MODAL METHOD CHOOSER (ALUR PILIHAN SETELAH BUAT PENILAIAN)
   ========================================================================== */
.chooser-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chooser-card {
    background: #f8fafc;
    border: 1.5px solid var(--border-light);
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chooser-card:hover {
    background: #ffffff;
    border-color: var(--primary-teal);
    transform: translateX(4px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.chooser-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.chooser-card-content {
    flex: 1;
}

.chooser-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-main);
    margin-bottom: 4px;
}

.chooser-card-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 6px;
}

.chooser-card-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-block;
}

.chooser-arrow {
    color: #94a3b8;
    font-size: 0.85rem;
    transition: transform 0.2s;
}

.chooser-card:hover .chooser-arrow {
    color: var(--primary-teal);
    transform: translateX(4px);
}

/* ==========================================================================
   4. STYLING MANUAL QUESTION BUILDER FORM
   ========================================================================== */
.manual-options-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.option-row-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.option-key-label {
    width: 32px;
    height: 38px;
    background: #f1f5f9;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
    flex-shrink: 0;
}

/* ==========================================================================
   5. STYLING VIEW LAPORAN AKADEMIK
   ========================================================================== */
.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.report-stat-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.report-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.report-stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
}

.report-stat-lbl {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}

/* ==========================================================================
   6. PROTEKSI MOBILE KIOSK & ANTI SPLIT-SCREEN / FLOATING
   ========================================================================== */
body.secure-exam-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

@media (max-width: 768px) {
    .report-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   7. STYLING SISTEM PENILAIAN, BANK SOAL, PENGUMPULAN & GRADING (2025-2026)
   ========================================================================== */

/* Top Breadcrumb Bar */
.lms-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 16px 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 18px;
}

.breadcrumb-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-breadcrumb-back {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.btn-breadcrumb-back:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--text-main);
}

.breadcrumb-nav-path {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

.breadcrumb-parent {
    color: #64748b;
    font-weight: 600;
}

.breadcrumb-sep {
    color: #94a3b8;
    font-size: 0.8rem;
}

.breadcrumb-active {
    color: var(--text-main);
    font-weight: 700;
}

.btn-link-buku-nilai {
    color: #2563eb;
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-link-buku-nilai:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Orange Year Pill Badge */
.badge-year-orange {
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.5px;
    display: inline-block;
    vertical-align: middle;
}

/* Penilaian Topbar Row & Action Controls */
.penilaian-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.penilaian-search-box,
.penilaian-topbar-actions .topbar-search-box {
    position: relative;
    width: 250px;
    height: 40px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.penilaian-search-box:focus-within,
.penilaian-topbar-actions .topbar-search-box:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.penilaian-search-box i,
.penilaian-topbar-actions .topbar-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 1;
}

.penilaian-search-input,
.penilaian-topbar-actions .topbar-search-box input {
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 14px 0 38px !important;
    font-size: 0.88rem;
    color: var(--text-main);
    font-family: inherit;
    box-sizing: border-box;
    line-height: normal;
}

.penilaian-search-input::placeholder,
.penilaian-topbar-actions .topbar-search-box input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.btn-penilaian-bank-btn {
    height: 40px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-penilaian-bank-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0284c7;
}

.btn-buat-penilaian-primary {
    height: 40px;
    background: var(--primary-teal);
    color: #ffffff;
    border: none;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    white-space: nowrap;
}

.btn-buat-penilaian-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* Penilaian Two-Column Layout (Screenshot 2) */
.penilaian-twocol-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 14px;
}

.penilaian-classes-sidebar {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.sidebar-classes-header {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-main);
    padding-bottom: 8px;
    border-bottom: 1.5px solid #f1f5f9;
    margin-bottom: 12px;
}

.badge-count-classes {
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.74rem;
    padding: 2px 9px;
    border-radius: 999px;
    font-weight: 700;
}

.penilaian-class-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
    transition: all 0.2s;
}

.penilaian-class-item:hover {
    background: #f8fafc;
    color: var(--primary-teal);
}

.penilaian-class-item.active {
    background: #eff6ff;
    color: var(--primary-teal);
    font-weight: 700;
    border-left: 3.5px solid var(--primary-teal);
}

.class-item-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: #64748b;
}

/* Penilaian Status Tabs & Exam Cards */
/* ==========================================================================
   MODUL PENILAIAN CBT - PREMIUM TEAL & EMERALD DESIGN SYSTEM
   ========================================================================== */

/* Top Controls Bar: Row 1 = Filter Capsule (Left) & Sort (Right) */
.penilaian-control-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* Capsule Tag Kelas, Mata Pelajaran & Guru */
.penilaian-class-subject-capsule {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #ccfbf1;
    border-radius: 12px;
    padding: 4px 10px 4px 4px;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.06);
    box-sizing: border-box;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.penilaian-class-subject-capsule:hover {
    border-color: #bfdbfe;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.1);
}

.capsule-class-tag {
    background: linear-gradient(135deg, var(--primary-teal, #2563eb) 0%, #1d4ed8 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.capsule-subject-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e40af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.capsule-subject-select,
.capsule-guru-select {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e40af;
    background: #f8faff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 6px 12px;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    max-width: 230px;
    transition: all 0.15s ease;
}

.capsule-subject-select:hover,
.capsule-guru-select:hover {
    border-color: #14b8a6;
    background: #e6fffa;
}

.capsule-subject-select:focus,
.capsule-guru-select:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.capsule-subject-select option,
.capsule-guru-select option {
    color: #0f172a;
    background: #ffffff;
    font-weight: 500;
}

/* Sort Dropdown */
.penilaian-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.penilaian-sort-wrap:hover {
    border-color: #cbd5e1;
}

.sort-label-text {
    font-size: 0.84rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.select-sort-penilaian {
    height: 32px;
    border: none;
    background: transparent;
    padding: 0 4px;
    font-size: 0.86rem;
    color: #1e293b;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

/* Subtabs Status: Row 2 = Segmented Pill Tabs */
.penilaian-status-tabs-row {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #e2e8f0;
}

.penilaian-status-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
}

.status-tab-btn {
    height: 42px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    padding: 0 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.status-tab-btn:hover {
    background: #f8faff;
    border-color: #bfdbfe;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.status-tab-btn.active {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

.status-tab-btn.active i {
    color: #ffffff !important;
}

.status-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    background: #f1f5f9;
    color: #64748b;
    line-height: 1;
    margin-left: 4px;
    transition: all 0.2s ease;
}

.status-tab-btn.active .status-tab-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    font-weight: 800 !important;
}

/* Empty State Card - Centered, Beautiful, Friendly (Sesuai Referensi Gambar Pengguna) */
.penilaian-empty-state-card {
    background: #ffffff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
    min-height: 170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 20px;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

.empty-state-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    border: 1.5px solid #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 2px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.empty-state-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    letter-spacing: -0.01em;
}

.empty-state-desc {
    font-size: 0.86rem;
    color: #64748b;
    max-width: 500px;
    line-height: 1.5;
    text-align: center;
}

.empty-state-desc strong {
    color: #334155;
    font-weight: 700;
}

/* Exam Cards List */
.penilaian-exam-cards-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Exam Card - Modern, Elevated & Rich */
.penilaian-exam-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    gap: 18px;
    position: relative;
    overflow: visible; /* Pastikan dropdown kebab menu tidak terpotong */
}

.penilaian-exam-card.kebab-active {
    z-index: 120 !important;
}

.penilaian-exam-card:has(.btn-exam-kebab.active) {
    z-index: 120 !important;
}

.penilaian-exam-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-teal, #2563eb);
    opacity: 0;
    transition: opacity 0.2s ease;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.penilaian-exam-card:hover {
    border-color: #14b8a6;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.1);
    transform: translateY(-2px);
}

.penilaian-exam-card:hover::before {
    opacity: 1;
}

.penilaian-exam-card.draf-card {
    background: #fbfcfe;
    border-color: #cbd5e1;
}

.penilaian-exam-card.draf-card::before {
    background: #d97706;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.penilaian-exam-card.draf-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 8px 24px rgba(100, 116, 139, 0.1);
}

/* Empty Card Layout - Tampilan Melebar Seperti Kartu Ujian Asli Sekalipun Tidak Ada Datanya */
.penilaian-exam-card.empty-card-layout {
    cursor: default;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
}

.penilaian-exam-card.empty-card-layout::before {
    opacity: 0.9 !important;
    background: var(--empty-accent, #2563eb) !important;
}

.penilaian-exam-card.empty-card-layout:hover {
    transform: none !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.exam-card-main-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.exam-icon-square {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #f8faff;
    color: #1d4ed8;
    border: 1.5px solid #ccfbf1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.exam-icon-square.saat_ini {
    background: linear-gradient(135deg, var(--primary-teal, #2563eb) 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.exam-icon-square.terjadwal {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #bae6fd;
}

.exam-icon-square.selesai {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

.exam-icon-square.draf {
    background: #fef3c7;
    color: #d97706;
    border-color: #fde68a;
}

.exam-card-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.exam-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.exam-card-title-text {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

/* Badge Status Pills */
.badge-status-pill {
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.03em;
}

.badge-status-pill.badge-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.badge-status-pill.badge-scheduled {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.badge-status-pill.badge-finished {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.badge-status-pill.badge-draft {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.badge-tag-category {
    background: #f8faff;
    color: #1d4ed8;
    border: 1px solid #ccfbf1;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-tag-category.sekolah {
    background: #eff6ff;
    color: #2563eb;
    border-color: #dbeafe;
}

.badge-tag-category.pengganti {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.badge-tag-mode {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bfdbfe;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dot-online {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}

.exam-card-meta-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.84rem;
    color: #64748b;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.meta-pill.author-pill {
    color: #1d4ed8;
    font-weight: 600;
    background: #f8faff;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #ccfbf1;
}

.exam-card-schedule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
    flex-wrap: wrap;
}

.schedule-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.schedule-sep {
    color: #cbd5e1;
    font-weight: 700;
}

/* Clean & Streamlined Exam Card Meta Row */
.exam-card-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #475569;
    margin-top: 2px;
    line-height: 1.5;
}

.exam-card-meta-row .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.exam-card-meta-row .meta-sep {
    color: #cbd5e1;
    font-size: 0.72rem;
    user-select: none;
}

.exam-card-meta-row .meta-deadline {
    color: #b91c1c;
    font-weight: 600;
}

.exam-card-meta-row .meta-start {
    color: #1d4ed8;
    font-weight: 600;
}

.exam-card-meta-row .meta-end {
    color: #475569;
}

.exam-card-meta-row .author-item {
    color: #64748b;
    font-weight: 500;
}

/* Token Required Badge in Title Row */
.badge-token-req {
    background: #f0f9ff;
    color: #0284c7;
    border: 1px solid #bae6fd;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-token-req.warning {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

/* Card Actions Group */
.exam-card-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Card Kebab Actions - Top Right of Exam Card (Safari < 15.4 Safe: dipisahkan dari :has()) */
.penilaian-exam-card.has-kebab-actions {
    position: relative;
}

.penilaian-exam-card:has(.exam-card-kebab-actions) {
    position: relative;
}

.penilaian-exam-card .exam-card-kebab-actions {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 25;
}

.penilaian-exam-card:has(.btn-exam-kebab) .exam-card-right-actions {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 25;
}

.penilaian-exam-card.has-kebab-actions .exam-card-title-row {
    padding-right: 44px;
}

.penilaian-exam-card:has(.btn-exam-kebab) .exam-card-title-row {
    padding-right: 44px;
}

.btn-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
    border-radius: 9px;
    font-size: 0.86rem;
    font-weight: 600;
}

.btn-card-action.btn-action-primary {
    background: linear-gradient(135deg, var(--primary-teal, #2563eb) 0%, #1d4ed8 100%);
    color: #ffffff;
    border: 1px solid #1d4ed8;
    padding: 9px 18px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.btn-card-action.btn-action-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.btn-card-action.btn-action-block {
    background: #f8fafc;
    color: #475569;
    border: 1.5px solid #e2e8f0;
    padding: 9px 14px;
}

.btn-card-action.btn-action-block:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-card-action.btn-action-block.has-blocked {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-card-action.btn-action-delete {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1.5px solid #f1f5f9;
    background: #ffffff;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    padding: 0;
}

.btn-card-action.btn-action-delete:hover {
    background: #fef2f2;
    color: #ef4444;
    border-color: #fee2e2;
    transform: scale(1.05);
}

@media (max-width: 992px) {
    .penilaian-twocol-layout {
        grid-template-columns: 1fr;
    }
    .penilaian-classes-sidebar {
        margin-bottom: 16px;
    }
}

@media (max-width: 768px) {
    .penilaian-control-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .penilaian-class-subject-capsule {
        max-width: 100%;
    }
    .penilaian-sort-wrap {
        width: 100%;
        justify-content: space-between;
    }
    .penilaian-status-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .status-tab-btn {
        width: 100%;
        justify-content: center;
    }
    .penilaian-exam-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .exam-card-main-info {
        flex-direction: column;
        align-items: flex-start;
    }
    .exam-card-right-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ==========================================================================
   BANK SOAL & PAKET SOAL PENILAIAN (PERSIS TAMPILAN SCREENSHOT)
   ========================================================================== */

.bank-soal-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
}

.bank-soal-tabs-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.bank-tab-btn {
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.bank-tab-btn:hover {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.bank-tab-btn.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3) !important;
}

.bank-tab-btn i {
    font-size: 0.84rem;
}

/* Tombol Aksi (Tambah Soal dsb) */
.btn-action-teal {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transition: all 0.2s ease;
}

.btn-action-teal:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}

/* Bilah Pencarian Kanan Atas */
.bank-search-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    height: 38px;
    width: 260px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bank-search-wrap:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

.bank-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 0.88rem;
    color: #1e293b;
    background: transparent;
    font-family: inherit;
}

.btn-bank-search {
    background: #f8fafc;
    border: none;
    border-left: 1px solid #e2e8f0;
    color: #64748b;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.88rem;
    transition: all 0.15s ease;
}

.btn-bank-search:hover {
    background: #0284c7;
    color: #ffffff;
}

/* Bilah Filter: Dropdown Minimalis & Elegan (Modern Soft SaaS) */
.bank-soal-filters-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
}

.custom-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    height: 38px;
    min-width: 150px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.custom-select-wrap:hover {
    border-color: #93c5fd;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}

.custom-select-wrap:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 3.5px rgba(2, 132, 199, 0.12);
}

.custom-select-el {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 36px 0 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-family: inherit;
}

.custom-select-btn {
    position: absolute;
    right: 12px;
    top: 0;
    bottom: 0;
    width: auto;
    background: transparent !important;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    font-size: 0.76rem;
    transition: all 0.2s ease;
}

.custom-select-wrap:hover .custom-select-btn,
.custom-select-wrap:focus-within .custom-select-btn {
    color: #0284c7;
    transform: translateY(1px);
}

/* Tata Letak 2 Kolom: Kolom Kiri Paket & Kolom Kanan Butir Soal */
.bank-soal-twocol-grid {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 1100px) {
    .bank-soal-twocol-grid {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 16px;
    }
}

@media (max-width: 868px) {
    .bank-soal-twocol-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* Kolom Kiri: Container Daftar Paket Soal */
.bank-left-col-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 16px;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    box-sizing: border-box;
    overflow: visible !important;
    position: static !important;
    align-self: start;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.bank-col-heading {
    font-size: 1.02rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.01em;
}

.bank-soal-items-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: none !important;
    overflow: visible !important;
    width: 100%;
    box-sizing: border-box;
}

/* Kartu Paket Soal */
.bank-soal-item-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 13px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.bank-soal-item-card:hover {
    z-index: 5;
    border-color: #93c5fd;
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.08);
}

/* Item Aktif / Terpilih */
.bank-soal-item-card.active {
    z-index: 6;
    background: #f0f9ff !important;
    border-color: #0284c7 !important;
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.14) !important;
}

.bank-soal-item-card:has(.kebab-menu-dropdown.show) {
    z-index: 1000 !important;
}

.bank-soal-item-card.active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 4.5px;
    background: #0284c7;
    border-top-left-radius: 13px;
    border-bottom-left-radius: 13px;
}

.bank-item-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.bank-item-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    word-break: break-word;
}

.bank-soal-item-card.active .bank-item-title {
    color: #0284c7 !important;
    font-weight: 800 !important;
}

.bank-item-meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 6px;
    line-height: 1.4;
    font-weight: 500;
}

.bank-item-author {
    font-size: 0.75rem;
    color: #0284c7 !important;
    background: #e0f2fe;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    margin-bottom: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-item-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 4px;
}

/* Kolom Kanan: Detail Judul Paket & Kartu Butir Soal (Tidak Dibatasi, Mengalir Terus ke Bawah) */
.bank-right-col-card {
    background: transparent;
    min-height: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.bank-detail-header {
    margin-bottom: 18px;
    padding-bottom: 4px;
}

.bank-detail-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.bank-detail-count {
    font-size: 0.88rem;
    color: #475569;
    font-weight: 500;
}

/* Butir Soal Mengalir Bebas ke Bawah (Tidak Kaku / Tidak Dibatasi) */
.bank-questions-scroll {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Kartu Butir Soal Persis Screenshot */
.bank-q-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 22px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    transition: box-shadow 0.2s, border-color 0.2s;
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.bank-q-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.bank-q-text {
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 12px;
}

.bank-q-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #64748b;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid #f8fafc;
    padding-top: 10px;
}

.bank-q-meta-type {
    font-weight: 500;
    color: #64748b;
}

.bank-q-meta-ans {
    color: #64748b;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bank-q-meta-ans strong {
    color: #334155;
    font-weight: 600;
}

.bank-q-meta-points {
    font-weight: 600;
    color: #64748b;
}

/* Opsi Tambahan untuk interaktivitas klik butir soal */
.bank-q-options-container {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bank-q-opt-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.bank-q-opt-pill.correct {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
    font-weight: 600;
}

.bank-q-option.correct {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
    font-weight: 600;
}

/* ========================================================================== */
/* ENHANCED SUBMISSIONS DASHBOARD (PREMIUM MODERN CBT UI)                    */
/* ========================================================================== */
.submission-meta-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
    border-left: 5px solid var(--primary-teal, #2563eb);
    transition: all 0.2s ease;
}

.submission-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

.submission-exam-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.submission-guru-name {
    font-size: 0.84rem;
    color: #475569;
    font-weight: 600;
    background: #f1f5f9;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.submission-guru-name i {
    color: var(--primary-teal, #2563eb);
    font-size: 0.92rem;
}

.submission-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-pill {
    background: #f8fafc;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #e2e8f0;
    transition: all 0.15s ease;
}

.tag-pill.green {
    background: #ecfdf5;
    color: #059669;
    border-color: #bfdbfe;
    font-weight: 700;
}

.tag-pill.blue {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    font-weight: 700;
}

.tag-pill.gray {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.dot-online {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    animation: pulseOnline 2s infinite ease-in-out;
}

@keyframes pulseOnline {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.75; }
}

/* Modern Segmented Status Tabs */
.submission-status-tabs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 0;
}

.submission-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 12px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -2px;
    border-radius: 10px 10px 0 0;
    white-space: nowrap;
}

.submission-tab-btn:hover {
    color: #1e293b;
    background: rgba(241, 245, 249, 0.7);
}

.submission-tab-btn .tab-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    font-family: var(--font-mono, monospace);
    transition: all 0.2s ease;
}

.submission-tab-btn:hover .tab-count-badge {
    background: #e2e8f0;
    color: #0f172a;
}

/* Active Tab Styles */
.submission-tab-btn.active {
    font-weight: 800;
}

#subTabBelumMulai.active {
    color: #d97706;
    border-bottom-color: #d97706;
    background: rgba(254, 243, 199, 0.35);
}
#subTabBelumMulai.active .tab-count-badge {
    background: #d97706;
    color: #ffffff;
    border-color: #d97706;
}

#subTabMengerjakan.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
    background: rgba(239, 246, 255, 0.4);
}
#subTabMengerjakan.active .tab-count-badge {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

#subTabDikumpulkan.active {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
    background: rgba(240, 253, 250, 0.4);
}
#subTabDikumpulkan.active .tab-count-badge {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
}

#subTabSudahDinilai.active {
    color: #059669;
    border-bottom-color: #059669;
    background: rgba(236, 253, 245, 0.4);
}
#subTabSudahDinilai.active .tab-count-badge {
    background: #059669;
    color: #ffffff;
    border-color: #059669;
}

/* Action Toolbar */
.submission-action-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.toolbar-buttons-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbar-search-right {
    display: flex;
    align-items: center;
}

.toolbar-search-right .topbar-search-box {
    position: relative;
    width: 260px;
    height: 38px;
    display: flex;
    align-items: center;
}

.toolbar-search-right .topbar-search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 2;
}

.toolbar-search-right .topbar-search-box input.topbar-search-input,
.toolbar-search-right .topbar-search-box input {
    width: 100%;
    height: 100%;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 999px;
    padding: 8px 16px 8px 38px;
    font-size: 0.85rem;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.toolbar-search-right .topbar-search-box input:focus {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.toolbar-search-right .topbar-search-box:focus-within i {
    color: #2563eb;
}

.toolbar-search-right .topbar-search-box input::placeholder {
    color: #94a3b8;
    font-size: 0.82rem;
}

.btn-sub-toolbar {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-sub-toolbar:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-sub-toolbar.btn-sub-primary {
    background: linear-gradient(135deg, var(--primary-teal, #2563eb) 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.btn-sub-toolbar.btn-sub-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

/* Student Cards List */
.submission-students-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 80px;
}

.submission-student-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.submission-student-row:hover {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

@keyframes rowHighlightAnim {
    0% { background: #f8faff; border-color: #1d4ed8; transform: scale(1.01); box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25); }
    70% { background: #f8faff; border-color: #1d4ed8; }
    100% { background: #ffffff; border-color: #e2e8f0; transform: scale(1); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02); }
}

.submission-student-row.row-just-updated {
    animation: rowHighlightAnim 2.5s ease-out;
}

.student-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.student-row-avatar-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.02em;
}

.student-row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.student-row-name {
    font-weight: 700;
    font-size: 0.94rem;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.student-no-pill {
    font-family: var(--font-mono, monospace);
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #e2e8f0;
}

.student-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #64748b;
    flex-wrap: wrap;
}

.student-row-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Button Kumpulkan Paksa */
.btn-force-submit {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.05);
    white-space: nowrap;
}

.btn-force-submit:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
    transform: translateY(-1px);
}

.student-row-chevron {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    border: 1px solid #f1f5f9;
}

.submission-student-row:hover .student-row-chevron {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    transform: translateX(3px);
}

.sub-row-waiting-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #f8fafc;
}

.student-row-score-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    padding-right: 4px;
}

.student-row-score-badge .score-number {
    font-size: 1.45rem;
    font-weight: 800;
    font-family: var(--font-mono, monospace);
    letter-spacing: -0.03em;
}

.student-row-score-badge .score-label {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.score-pass-chip {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.score-pass-chip.tuntas {
    background: #dcfce7;
    color: #15803d;
}

.score-pass-chip.remedial {
    background: #ffe4e6;
    color: #be123c;
}

.badge-status-pill.badge-dinilai {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bfdbfe;
}

.student-device-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    color: #475569;
    font-family: var(--font-mono);
}

.student-row-score-big {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    min-width: 50px;
    text-align: right;
}

/* ==========================================================================
   STYLE TAB MENGERJAKAN (IMAGE 2)
   ========================================================================== */

.sub-row-mengerjakan {
    display: grid !important;
    grid-template-columns: 280px 240px 1fr !important;
    align-items: center !important;
    gap: 20px !important;
}

@media (max-width: 1024px) {
    .sub-row-mengerjakan {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}

.mengerjakan-student-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mengerjakan-student-identity .student-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mengerjakan-center-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.78rem;
    color: #64748b;
}

.mengerjakan-meta-line {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.mengerjakan-meta-line strong {
    color: #334155;
    font-weight: 600;
}

.badge-dijawab {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: -0.01em;
}

.badge-dijawab-active {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.badge-dijawab-empty {
    background: #f1f5f9;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}

.mengerjakandevice-line {
    color: #475569;
    font-weight: 500;
}

.mengerjakandevice-line i {
    color: #64748b;
    font-size: 0.82rem;
    width: 14px;
}

.mengerjakan-right-bubbles-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.q-progress-bubbles-container {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.q-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-mono, monospace);
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    position: relative;
}

.q-bubble-answered {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    border: 1.5px solid #2563eb !important;
}

.q-bubble-unanswered {
    background: #ffffff !important;
    color: #94a3b8 !important;
    border: 1.5px solid #cbd5e1 !important;
}

.q-bubble-current {
    box-shadow: 0 0 0 2.5px #f59e0b, 0 2px 6px rgba(245, 158, 11, 0.35) !important;
    border-color: #f59e0b !important;
}

.q-bubble-current.q-bubble-unanswered {
    color: #b45309 !important;
    background: #fffbeb !important;
    font-weight: 800 !important;
}

.q-bubble-current-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.9);
}

.q-bubble-more {
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 9999px;
    border: 1px solid #e2e8f0;
    margin-left: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.q-bubble-more:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #cbd5e1;
    transform: scale(1.05);
}

.q-bubble-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    margin: 0 2px;
}

.q-bubble-arrow:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: scale(1.08);
}

.q-bubble-arrow:active {
    transform: scale(0.92);
}

.sub-row-mengerjakan {
    cursor: default !important;
}

.sub-row-mengerjakan:hover {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.btn-sub-kebab {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-sub-kebab:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}

/* Dropdown Menu Popup Kebab */
.proctor-kebab-dropdown-menu {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 12px 35px -4px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 6px;
    min-width: 220px;
    max-width: 280px;
    box-sizing: border-box;
    z-index: 999999 !important;
    animation: dropFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.kebab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
}

.kebab-menu-item:hover {
    background: #f8fafc;
    color: #0f172a;
}

.kebab-menu-item.danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

.kebab-menu-item.warning:hover {
    background: #fffbeb;
    color: #b45309;
}

/* Student Grading View (Screenshot 5) */
.grading-student-switcher-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
}

.student-select-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.select-grading-student {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    background: #ffffff;
    color: #1e293b;
    outline: none;
    min-width: 260px;
    cursor: pointer;
}

.switcher-arrow-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-switch-arrow {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-switch-arrow:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

.grading-exam-score-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.exam-title-side h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}

.exam-score-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.score-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
}

.input-grading-score {
    width: 60px;
    text-align: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px;
    font-size: 0.95rem;
    font-weight: 800;
    outline: none;
}

.btn-save-score {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-score:hover {
    background: #e2e8f0;
}

.badge-points-total {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
}

.btn-outline-action {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-outline-action:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-primary-action {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-primary-action:hover {
    background: #1d4ed8;
}

.grading-twocol-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}

.grading-questions-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grading-q-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.grading-q-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.grading-q-num {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
}

.grading-points-badge {
    font-size: 0.76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.badge-correct {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bfdbfe;
}

.badge-wrong {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.grading-pts-edit-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 3px 8px;
    border-radius: 8px;
}

.input-q-pts {
    width: 48px;
    height: 26px;
    text-align: center;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.82rem;
    background: #ffffff;
    color: #1e293b;
}

.input-point-manual {
    width: 52px;
    height: 28px;
    text-align: center;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.86rem;
    background: #ffffff;
    color: #0f172a;
    transition: all 0.2s ease;
}

.input-point-manual:focus {
    outline: none;
    border-color: #1d4ed8;
    background: #f8faff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.2);
}

.input-point-manual:hover {
    border-color: #94a3b8;
}

.input-q-pts:focus {
    outline: none;
    border-color: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.15);
}

.btn-mini-grade {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.15s ease;
}

.btn-mini-correct {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bfdbfe;
}

.btn-mini-correct:hover {
    background: #059669;
    color: #ffffff;
}

.btn-mini-wrong {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.btn-mini-wrong:hover {
    background: #dc2626;
    color: #ffffff;
}

.grading-q-text {
    font-size: 0.88rem;
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 14px;
}

.grading-option-row {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.84rem;
    transition: all 0.15s ease;
}

.grading-option-row.neutral {
    color: #475569;
    background: #ffffff;
    border-color: #f1f5f9;
}

.grading-option-row.student-wrong {
    background: #fff5f5;
    border: 1.5px solid #ef4444;
    color: #991b1b;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
}

.grading-option-row.correct-key {
    background: #f0fdf4;
    border: 1.5px solid #4ade80;
    color: #166534;
    font-weight: 600;
}

.badge-student-choice {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-student-choice.wrong {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.badge-student-choice.correct {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bfdbfe;
}

.badge-student-choice.correct-key {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.option-key-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

.circle-neutral {
    background: #f1f5f9;
    color: #64748b;
}

.circle-wrong {
    background: #ef4444;
    color: #ffffff;
}

.circle-correct {
    background: #22c55e;
    color: #ffffff;
}

.grading-pembahasan-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 14px;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.5;
}

.grading-sidebar-sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grading-stat-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.grading-stat-card-box {
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-green {
    background: #ecfdf5;
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.stat-red {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.stat-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: #ffffff;
    flex-shrink: 0;
}

.stat-number {
    font-size: 1.4rem;
    font-weight: 800;
}

.stat-lbl {
    font-size: 0.72rem;
    font-weight: 600;
}

.grading-navigator-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
}

.nav-title-row {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.grading-circles-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.btn-q-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn-q-circle.correct {
    background: #22c55e;
    color: #ffffff;
}

.btn-q-circle.wrong {
    background: #ef4444;
    color: #ffffff;
}

.btn-q-circle:hover {
    transform: scale(1.15);
}

.grading-audit-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
}

.audit-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.audit-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.76rem;
    margin-bottom: 8px;
    color: #64748b;
}

.audit-row strong {
    color: #1e293b;
}

@media (max-width: 1024px) {
    .penilaian-twocol-layout,
    .bank-soal-twocol-grid,
    .grading-twocol-grid {
        grid-template-columns: 1fr;
    }
    .grading-sidebar-sticky {
        position: static;
    }
}

/* ==========================================================================
   SECTION 8: WIZARD BUAT PENILAIAN, LAPORAN HUB, & LEGER NILAI (SCREENSHOTS 1-5)
   ========================================================================== */

/* Wizard Stepper Buat Penilaian */
.wizard-container-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-top: 14px;
}

.wizard-stepper-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 34px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    min-width: 150px;
    text-align: center;
}

.stepper-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 700;
    transition: all 0.2s;
}

.stepper-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    transition: color 0.2s;
}

.stepper-step.active .stepper-circle {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28);
}

.stepper-step.active .stepper-label {
    color: #1e293b;
    font-weight: 700;
}

.stepper-step.completed .stepper-circle {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.stepper-step.completed .stepper-label {
    color: #475569;
}

.stepper-line {
    flex: 1;
    max-width: 140px;
    height: 2px;
    background: #e2e8f0;
    margin-top: 17px;
}

/* Wizard Form Layout */
.wizard-form-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 24px;
}

.wizard-form-group {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    gap: 28px;
}

.wizard-form-group.align-start {
    align-items: flex-start;
}

.wizard-form-group.stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.wizard-label {
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    font-size: 0.96rem;
    font-weight: 600;
    color: #0f172a;
    display: block;
    line-height: 1.4;
}

.wizard-label .required-star {
    color: #ef4444;
    margin-left: 2px;
    display: inline;
}

.wizard-label i {
    margin-left: 5px;
    vertical-align: middle;
}

.wizard-field-content {
    flex: 1;
    max-width: 520px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.wizard-field-content.vertical {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.wizard-input-text {
    width: 100%;
    max-width: 520px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    outline: none;
    transition: all 0.15s;
    box-sizing: border-box;
    background: #ffffff;
}

.wizard-input-text:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.wizard-select {
    width: 100%;
    max-width: 520px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #1e293b;
    background: #ffffff;
    outline: none;
    cursor: pointer;
    transition: all 0.15s;
    box-sizing: border-box;
}

.wizard-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

@media (max-width: 768px) {
    .wizard-form-group {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .wizard-label {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    .wizard-field-content {
        width: 100%;
        max-width: 100%;
    }
    .wizard-input-text, .wizard-select {
        max-width: 100%;
    }
}

.btn-atur-urutan {
    height: 38px;
    padding: 0 16px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-atur-urutan:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

/* Token CBT Box & Buttons */
.wizard-token-box-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    box-sizing: border-box;
}

.wizard-token-key-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #e0f2fe;
    color: #0284c7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.wizard-token-input-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    font-family: monospace;
    font-weight: 800;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    background: #ffffff;
    color: #0f172a;
    outline: none;
    padding: 0 8px;
    box-sizing: border-box;
}

.btn-wizard-acak-token {
    height: 36px;
    padding: 0 14px;
    background: #0d9488;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
    box-sizing: border-box;
}

.btn-wizard-acak-token:hover {
    background: #0f766e;
}

.btn-wizard-acak-token:active {
    transform: scale(0.96);
}

.wizard-section-divider {
    border-top: 1px solid #f1f5f9;
    margin: 24px 0 20px 0;
    width: 100%;
    max-width: 760px;
}

.wizard-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.wizard-radio-option input[type="radio"] {
    margin-top: 3px;
    accent-color: #2563eb;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.wizard-radio-title {
    font-weight: 600;
    font-size: 0.88rem;
    color: #1e293b;
}

.wizard-radio-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.4;
}

/* Multi-Select Kelas Dropdown (Screenshots 1, 2, 3) */
.wizard-multiselect-wrap {
    position: relative;
    width: 100%;
    max-width: 480px;
}

.wizard-multiselect-trigger {
    width: 100%;
    min-height: 42px;
    padding: 4px 36px 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    transition: all 0.15s;
    box-sizing: border-box;
}

.wizard-multiselect-trigger:hover {
    border-color: #94a3b8;
}

.wizard-multiselect-trigger.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.multiselect-placeholder {
    color: #94a3b8;
    font-size: 0.88rem;
    padding-left: 4px;
}

.multiselect-chip {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.multiselect-chip i {
    cursor: pointer;
    font-size: 0.72rem;
    color: #3b82f6;
    transition: color 0.15s;
}

.multiselect-chip i:hover {
    color: #ef4444;
}

.multiselect-arrow-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.78rem;
    pointer-events: none;
    transition: transform 0.2s;
}

.wizard-multiselect-trigger.active .multiselect-arrow-icon {
    transform: translateY(-50%) rotate(180deg);
}

.wizard-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    max-height: 240px;
    overflow-y: auto;
    padding: 8px 0;
    display: none;
}

.wizard-multiselect-dropdown.show {
    display: block;
}

.multiselect-option-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 0.88rem;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}

.multiselect-option-item:hover {
    background: #f8fafc;
}

.multiselect-option-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    cursor: pointer;
}

.multiselect-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

/* Instruksi Penilaian Rich Box (Screenshot 3) */
.wizard-instruksi-card {
    width: 100%;
    max-width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.wizard-instruksi-card:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.wizard-instruksi-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.instruksi-tool-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #334155;
    font-size: 0.84rem;
    cursor: pointer;
    transition: all 0.15s;
}

.instruksi-tool-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.instruksi-toolbar-sep {
    width: 1px;
    height: 18px;
    background: #cbd5e1;
    margin: 0 4px;
}

.wizard-instruksi-card textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.88rem;
    color: #1e293b;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

.wizard-instruksi-card .editor-rich-content {
    width: 100%;
    min-height: 140px;
    max-height: 420px;
    overflow-y: auto;
    padding: 14px 16px;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 0.92rem;
    color: #1e293b;
    line-height: 1.6;
    box-sizing: border-box;
    word-break: break-word;
}

.badge-tag-category.khusus {
    background: #fdf2f8;
    color: #db2777;
    border-color: #fbcfe8;
}

.wizard-textarea {
    width: 100%;
    max-width: 760px;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #1e293b;
    line-height: 1.5;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.wizard-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Custom Toggle Switch (Tidak / Ya) */
.toggle-switch-wrapper {
    height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.toggle-switch-label-text {
    font-size: 0.86rem;
    font-weight: 500;
    color: #64748b;
}

.lms-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
}

.lms-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.lms-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background-color: #cbd5e1;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
    border: 1px solid #cbd5e1;
}

.lms-toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: #ffffff;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.lms-toggle-switch input:checked + .lms-toggle-slider {
    background-color: #1d4ed8;
    border-color: #1e40af;
}

.lms-toggle-switch input:checked + .lms-toggle-slider:before {
    transform: translateX(20px);
}

/* Wizard Footer Action Buttons */
.wizard-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.btn-wizard-cancel {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    border-radius: 8px;
    padding: 9px 24px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-wizard-cancel:hover {
    background: #f8fafc;
    color: #1e293b;
}

.btn-wizard-next {
    background: #2563eb;
    border: none;
    color: #ffffff;
    border-radius: 8px;
    padding: 9px 26px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-wizard-next:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ==========================================================================
   LAPORAN HUB & MENU CARDS (SCREENSHOT 1)
   ========================================================================== */
.laporan-page-wrap {
    padding: 8px 4px;
}

.laporan-header-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #2563eb;
    margin: 0 0 8px 0;
}

.laporan-header-desc {
    font-size: 0.88rem;
    color: #64748b;
    margin: 0 0 28px 0;
    line-height: 1.5;
}

.laporan-menu-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}

.laporan-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 420px));
    gap: 20px;
}

.laporan-menu-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.laporan-menu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.12);
    border-color: #93c5fd;
}

.laporan-menu-card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.laporan-menu-card-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    flex: 1;
}

.laporan-menu-card-name {
    font-size: 1.12rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.laporan-menu-card-sub {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ==========================================================================
   LEGER NILAI VIEW & TABEL KOMPREHENSIF (SCREENSHOT 2)
/* ==========================================================================
   LEGER NILAI VIEW & TABEL KOMPREHENSIF (SCREENSHOT DESIGN)
   ========================================================================== */
.leger-badge-year {
    display: inline-flex;
    align-items: center;
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 9999px;
    margin-left: 8px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.btn-leger-export {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
    transition: all 0.2s ease;
}

.btn-leger-export:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.btn-leger-save {
    background: #94a3b8;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-leger-save:hover {
    background: #64748b;
}

.leger-filters-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 20px 0;
}

.leger-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    height: 38px;
    min-width: 140px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s;
}

.leger-select-wrapper:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.leger-native-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    outline: none;
    background: transparent;
    padding: 7px 38px 7px 14px;
    font-size: 0.86rem;
    color: #475569;
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
}

.leger-select-arrow {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    pointer-events: none;
    font-size: 0.76rem;
}

.leger-method-badge {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    color: #475569;
    font-weight: 500;
}

/* Tabel Leger Nilai */
.leger-table-card {
    background: #ffffff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.leger-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
    text-align: center;
    background: #ffffff;
}

.leger-data-table th,
.leger-data-table td {
    border: 1px solid #dbeafe;
    padding: 10px 12px;
}

.leger-th-base {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 700;
    vertical-align: middle;
}

.leger-th-sumatif-group {
    background: #2b76e5 !important;
    color: #ffffff !important;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 700;
    border-color: #2563eb !important;
    letter-spacing: 0.02em;
}

.leger-sumatif-weight-box {
    display: inline-block;
    background: #ffffff;
    color: #1e293b;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.82rem;
    margin: 0 6px;
}

.leger-th-sub {
    background: #ffffff;
    color: #2563eb;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 12px 8px;
    max-width: 180px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.leger-th-rapor {
    background: #f8fafc;
    color: #2563eb;
    font-weight: 700;
    font-size: 0.84rem;
    vertical-align: middle;
    min-width: 95px;
}

.leger-td-no {
    color: #64748b;
    font-weight: 500;
    width: 48px;
    text-align: center;
}

.leger-td-student-name {
    text-align: left;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    padding-left: 18px;
}

.leger-td-val {
    color: #334155;
    font-weight: 500;
    text-align: center;
}

.leger-td-rapor-val {
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    text-align: center;
}

.leger-data-table tbody tr:nth-child(even) td {
    background-color: #fbfdff;
}

.leger-data-table tbody tr:hover td {
    background-color: #f0f7ff;
}

/* ==========================================================================
   RESPONSIVE ENHANCEMENTS - FLUID SCROLL & ADAPTIVE LAYOUT
   ========================================================================== */
@media (max-width: 900px) {
    .lms-app-frame {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .lms-sidebar {
        width: 100%;
        height: auto;
        padding: 16px 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .sidebar-header {
        padding: 0;
        margin-bottom: 0;
    }

    .sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 0;
        gap: 6px;
    }

    .nav-link-item {
        padding: 8px 14px;
        border-radius: 12px;
        font-size: 0.8rem;
    }

    .nav-link-item.active {
        border-radius: 12px;
    }

    .nav-link-item.active::before,
    .nav-link-item.active::after {
        display: none;
    }

    .lms-main-content {
        height: auto;
        min-height: calc(100vh - 80px);
        overflow-y: visible;
        padding: 18px 16px 64px 16px;
    }

    .bank-soal-twocol-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bank-left-col-card {
        position: static;
        width: 100%;
    }

    .bank-soal-items-list {
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ==========================================================================
   8. STYLING INLINE QUESTION EDITOR (GAMBAR 2 - SPLIT SCREEN)
   ========================================================================== */
#viewQuestionEditorInline {
    width: 100%;
    margin: 0 auto;
}

.editor-top-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 18px;
    background: #ffffff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    min-height: 56px;
    box-sizing: border-box;
}

.btn-editor-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-editor-back:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.editor-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}
.editor-breadcrumb-muted {
    color: #94a3b8;
}
.editor-breadcrumb-sep {
    color: #cbd5e1;
}
.editor-breadcrumb-active {
    color: #0f172a;
}

.btn-editor-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-editor-preview:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.btn-editor-save-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border: none;
    background: #0284c7;
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}
.btn-editor-save-all:hover {
    background: #0369a1;
}

.editor-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 20px;
    align-items: start;
}

.editor-form-col {
    min-width: 0;
}

.editor-form-card {
    background: #ffffff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}


.editor-main-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.editor-right-header-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.btn-editor-preview-solid {
    padding: 8px 24px;
    border: none;
    background: #0284c7;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transition: all 0.15s ease;
}
.btn-editor-preview-solid:hover {
    background: #0369a1;
}

/* Split-Screen 2-Column Grid */
.editor-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.editor-form-col {
    min-width: 0;
}

.editor-form-card {
    background: #ffffff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Tipe Soal & Poin Top Row */
.editor-type-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.editor-type-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
}

.editor-points-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    color: #475569;
    margin-left: auto;
}

.editor-points-input {
    width: 65px;
    text-align: center;
    padding: 6px 8px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0284c7;
    background: #f0f9ff;
    outline: none;
    transition: border-color 0.15s;
}
.editor-points-input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Question Input Box with Left Badge (Screenshot 1: Circle "b.") */
.editor-question-box-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.editor-q-left-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 6px;
}

.editor-q-main-box {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.editor-q-main-box:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

/* Rich Toolbar */
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.tb-select-wrap select {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #334155;
    outline: none;
    cursor: pointer;
}

.tb-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #475569;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tb-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.tb-sep {
    width: 1px;
    height: 16px;
    background: #cbd5e1;
    margin: 0 4px;
}

/* Contenteditable Rich Box (Copy-Paste Image Supported) */
.editor-rich-content {
    width: 100%;
    min-height: 170px;
    max-height: 380px;
    overflow-y: auto;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 0.94rem;
    line-height: 1.6;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    word-break: break-word;
}
.editor-rich-content[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}
.editor-rich-content img {
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    display: block;
    margin: 10px auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Options Section for Pilihan Ganda */
.editor-options-section {
    margin-bottom: 18px;
}

.editor-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.editor-opt-row-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.editor-opt-letter-tag {
    flex-shrink: 0;
    margin-top: 8px;
}

.opt-choice-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.opt-choice-label input[type="radio"],
.opt-choice-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #0284c7;
    cursor: pointer;
}

.opt-letter-circle {
    font-weight: 800;
    font-size: 0.92rem;
    color: #0284c7;
    width: 24px;
    text-align: center;
}

.editor-opt-input-wrap {
    flex: 1;
    min-width: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.15s;
}
.editor-opt-input-wrap:focus-within {
    border-color: #0284c7;
}

.editor-opt-mini-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.tb-mini-btn {
    padding: 2px 7px;
    font-size: 0.78rem;
    font-weight: 700;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
}
.tb-mini-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.editor-opt-rich-input {
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
}
.editor-opt-rich-input[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    font-style: italic;
    pointer-events: none;
}
.editor-opt-rich-input img {
    max-width: 100%;
    max-height: 180px;
    display: block;
    margin: 6px 0;
    border-radius: 6px;
}

.btn-opt-delete-row {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 8px 6px;
    margin-top: 6px;
    transition: color 0.15s;
}
.btn-opt-delete-row:hover {
    color: #ef4444;
}

/* Action Links: + Tambah Pilihan, + Tambah Pembahasan */
.editor-options-action-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
}

.btn-editor-link-action {
    background: transparent;
    border: none;
    color: #0284c7;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 0;
    transition: all 0.15s;
}
.btn-editor-link-action:hover {
    text-decoration: underline;
    color: #0369a1;
}

/* Special Sections (Benar/Salah, Menjodohkan, Isian, Esai) */
.editor-special-section {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.editor-special-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 12px;
}

.editor-special-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.editor-special-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.editor-special-text-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #1e293b;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;
}
.editor-special-text-input:focus {
    border-color: #0284c7;
}

.editor-special-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    color: #1e293b;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.editor-special-textarea:focus {
    border-color: #0284c7;
}

/* Explanation / Pembahasan Section */
.editor-explanation-section {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 14px;
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-radius: 12px;
}

.editor-explanation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.btn-exp-close {
    background: transparent;
    border: none;
    color: #64748b;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-exp-close:hover {
    color: #ef4444;
}

.editor-exp-rich {
    min-height: 70px;
    max-height: 180px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 12px;
}

/* Bottom Actions in Form Card */
.editor-card-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    margin-top: 14px;
}

.btn-editor-trash {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #64748b;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.btn-editor-trash:hover {
    background: #fff1f2;
    border-color: #fca5a5;
    color: #dc2626;
}

.btn-editor-save-q {
    padding: 8px 30px;
    border: none;
    background: #0284c7;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
    transition: all 0.15s ease;
}
.btn-editor-save-q:hover {
    background: #0369a1;
}

/* Right Column: Live Question Selector List (Gambar 2 Right) */
.editor-nav-col {
    min-width: 0;
}

.editor-nav-card {
    background: transparent;
    border: none;
}

.editor-nav-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: none !important; /* JANGAN DIBATASI / MENGALIR PANJANG KE BAWAH */
    overflow: visible !important;
    padding-right: 2px;
}

.editor-nav-item-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    position: relative;
    user-select: none;
    content-visibility: auto;
    contain-intrinsic-size: 80px 110px;
}
.editor-nav-item-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.editor-nav-item-card.active {
    border-color: #0284c7;
    background: #ffffff;
    border-right: 5px solid #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

/* Dragging & Reordering Styles */
.editor-nav-item-card.dragging {
    opacity: 0.35;
    border: 2px dashed #1d4ed8 !important;
    background: #f8faff !important;
    transform: scale(0.98);
}

.editor-nav-item-card.drag-over {
    border-top: 3px solid #1d4ed8 !important;
    background: #f8faff;
    transform: translateY(2px);
}

.editor-nav-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    margin-bottom: 8px;
}

/* 6-Dots Drag Handle di Kanan Atas Kartu Soal */
.editor-drag-handle {
    color: #94a3b8;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: grab;
    font-size: 0.95rem;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.editor-drag-handle:hover {
    color: #1d4ed8;
    background: #f8faff;
    transform: scale(1.15);
}

.editor-drag-handle:active {
    cursor: grabbing;
}

.editor-nav-card-img {
    max-width: 100%;
    margin: 8px 0 10px 0;
    text-align: center;
}
.editor-nav-card-img img,
.editor-nav-card-img svg {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.editor-nav-card-snippet {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 12px;
}

.editor-nav-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8rem;
    color: #64748b;
}

.editor-nav-type strong,
.editor-nav-key strong {
    color: #0f172a;
    font-weight: 700;
}

/* Master Checkbox & Dynamic Bulk Delete */
.bank-bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 8px;
    margin-top: 12px;
    border: 1px solid #e2e8f0;
}

.btn-bulk-delete-dynamic {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1.5px solid #f87171;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.12);
}
.btn-bulk-delete-dynamic:hover {
    background: #fee2e2;
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
}


.bank-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}
.bank-check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0284c7;
    cursor: pointer;
}

.btn-bulk-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #dc2626;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-bulk-delete:hover {
    background: #fee2e2;
}

.badge-total-points {
    display: inline-flex;
    align-items: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
}

.btn-create-bank-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: none !important;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    color: #ffffff !important;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.btn-create-bank-btn i {
    color: #ffffff !important;
    font-size: 0.78rem;
}
.btn-create-bank-btn:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(2, 132, 199, 0.38) !important;
}
.btn-create-bank-btn:active {
    transform: translateY(0);
}

/* Question Card Menu & Checkbox in Main View (Screenshot 1) */
.bank-q-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bank-q-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bank-q-checkbox {
    width: 17px;
    height: 17px;
    accent-color: #0284c7;
    cursor: pointer;
}

.bank-q-num-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.bank-q-points-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: #0284c7;
    background: #e0f2fe;
    padding: 2px 8px;
    border-radius: 12px;
}

/* Question Type Badge (Pilihan Ganda, Isian Singkat, Uraian/Esai, dsb) */
.bank-q-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.2px;
    user-select: none;
}
.bank-q-type-badge i {
    font-size: 0.76rem;
}
.bank-q-type-badge.badge-type-pg {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.bank-q-type-badge.badge-type-pg-kompleks {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.bank-q-type-badge.badge-type-benar-salah {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.bank-q-type-badge.badge-type-menjodohkan {
    background: #f8faff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}
.bank-q-type-badge.badge-type-isian {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.bank-q-type-badge.badge-type-esai {
    background: #faf5ff;
    color: #7e22ce;
    border: 1px solid #e9d5ff;
}

.kebab-menu-container {
    position: relative;
    display: inline-block;
}

.btn-kebab-menu {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.15s ease;
}
.btn-kebab-menu:hover {
    background: #f1f5f9;
    color: #334155;
}

.kebab-menu-container {
    position: relative;
    display: inline-block;
    z-index: 50;
}

.kebab-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.22), 0 8px 12px -6px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 99999 !important;
    display: none;
    padding: 6px 0;
}
.kebab-menu-dropdown.show {
    display: block !important;
}

.kebab-item {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s;
}
.kebab-item:hover {
    background: #f8fafc;
    color: #0f172a;
}
.kebab-item.danger {
    color: #dc2626;
}
.kebab-item.danger:hover {
    background: #fff1f2;
}



@media (max-width: 992px) {
    .editor-split-grid {
        grid-template-columns: 1fr;
    }
    .editor-nav-card {
        position: static;
        max-height: none;
    }
}

/* ==================================================================== */
/* TOTAL POIN BADGE (BESIDE PRATINJAU BUTTON)                          */
/* ==================================================================== */
.editor-top-total-points-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
    color: #ffffff;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.editor-top-total-points-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
}
.editor-top-total-points-badge i {
    color: #fef08a;
    font-size: 0.95rem;
}
.editor-top-total-points-badge .etp-label {
    opacity: 0.9;
    font-weight: 500;
}
.editor-top-total-points-badge .etp-value {
    color: #ffffff;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

/* ==================================================================== */
/* PER-SOAL POINTS BADGE (BOTTOM-RIGHT ALIGNMENT)                      */
/* ==================================================================== */
.bank-q-bottom-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}
.bank-q-points-badge-bottom {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 4px 12px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.8rem;
    box-shadow: 0 1px 3px rgba(146, 64, 14, 0.08);
}
.bank-q-points-badge-bottom i {
    color: #f59e0b;
    font-size: 0.82rem;
}

.editor-nav-points-badge-bottom {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.72rem;
    margin-left: auto;
}

/* ==================================================================== */
/* MODERN NON-STOCK OPTION BUTTONS & TOGGLES                            */
/* ==================================================================== */
.modern-opt-choice-label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    user-select: none;
}
.modern-opt-choice-label input[type="radio"],
.modern-opt-choice-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}
.modern-choice-badge {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.modern-opt-choice-label:hover .modern-choice-badge {
    border-color: #0284c7;
    color: #0284c7;
    background: #f0f9ff;
    transform: scale(1.06);
}
.modern-opt-choice-label input:checked ~ .modern-choice-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #059669;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: scale(1.08);
}
.modern-choice-badge::after {
    content: '✓';
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    color: #059669;
    font-size: 9px;
    font-weight: 900;
    display: none;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #059669;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.modern-opt-choice-label input:checked ~ .modern-choice-badge::after {
    display: flex;
}

/* Modern Benar / Salah Segmented Toggle */
.modern-bs-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.modern-bs-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.18s ease;
    user-select: none;
    position: relative;
}
.modern-bs-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.modern-bs-pill.benar {
    color: #15803d;
    background: transparent;
}
.modern-bs-pill.benar:hover {
    background: #dcfce7;
}
.modern-bs-pill.benar.active,
.modern-bs-pill.benar input:checked ~ span {
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}
.modern-bs-pill.salah {
    color: #b91c1c;
    background: transparent;
}
.modern-bs-pill.salah:hover {
    background: #fee2e2;
}
.modern-bs-pill.salah.active,
.modern-bs-pill.salah input:checked ~ span {
    background: #dc2626;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

/* ==================================================================== */
/* CBT EXAM SIMULATION MODAL (PRATINJAU SISWA UJIAN)                    */
/* ==================================================================== */
.cbt-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    animation: cbtFadeIn 0.2s ease-out;
}
@keyframes cbtFadeIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.cbt-modal-container {
    width: 100%;
    max-width: 1320px;
    height: 92vh;
    max-height: 900px;
    background: #f1f5f9;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* CBT Top Bar */
.cbt-modal-topbar {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid #1d4ed8;
    flex-wrap: wrap;
}
.cbt-tb-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cbt-brand-tag {
    background: rgba(29, 78, 216, 0.3);
    color: #2dd4bf;
    border: 1px solid rgba(45, 212, 191, 0.4);
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cbt-exam-title-wrap {
    display: flex;
    flex-direction: column;
}
.cbt-packet-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}
.cbt-packet-badge {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 2px;
}
.cbt-tb-center {
    display: flex;
    align-items: center;
}
.cbt-timer-box {
    background: rgba(245, 158, 11, 0.15);
    border: 1.5px solid #f59e0b;
    padding: 6px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
}
.cbt-timer-icon {
    font-size: 1.1rem;
    animation: cbtPulse 2s infinite ease-in-out;
}
@keyframes cbtPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.95); }
}
.cbt-timer-val {
    font-family: monospace;
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.05em;
}
.cbt-timer-label {
    font-size: 0.72rem;
    color: #cbd5e1;
    font-weight: 600;
    text-transform: uppercase;
}
.cbt-tb-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cbt-student-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    padding: 5px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.cbt-student-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0284c7;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.cbt-student-meta {
    display: flex;
    flex-direction: column;
}
.cbt-student-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}
.cbt-student-nis {
    font-size: 0.72rem;
    color: #94a3b8;
}
.btn-cbt-close {
    background: #dc2626;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-cbt-close:hover {
    background: #b91c1c;
}

/* CBT Simulation Modal Body (Scoped strictly to .cbt-modal-container) */
.cbt-modal-container .cbt-modal-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
    padding: 18px 24px;
    overflow-y: auto;
    box-sizing: border-box;
}
.cbt-question-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cbt-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* CBT Question Header */
.cbt-q-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1.5px solid #f1f5f9;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.cbt-q-num-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f172a;
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
}
.cbt-q-num-label {
    font-weight: 500;
    color: #94a3b8;
    font-size: 0.85rem;
}
.cbt-q-num-digit {
    color: #38bdf8;
    font-weight: 800;
}
.cbt-q-type-tag {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
}
.cbt-q-font-resizer {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 2px;
    margin-left: auto;
}
.cbt-btn-font {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    border-radius: 4px;
}
.cbt-btn-font:hover {
    background: #e2e8f0;
    color: #0f172a;
}
.cbt-q-points-badge {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Question Content */
.cbt-q-content {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1e293b;
    margin-bottom: 22px;
}
.cbt-q-content img {
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    display: block;
    margin: 14px auto;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Modern CBT Option Tiles */
.cbt-q-options-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.cbt-option-tile {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 12px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    user-select: none;
}
.cbt-option-tile:hover {
    border-color: #38bdf8;
    background: #f0f9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(56, 189, 248, 0.12);
}
.cbt-option-tile.selected {
    border-color: #1d4ed8;
    background: #f8faff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.18);
}
.cbt-opt-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    margin-right: 14px;
    flex-shrink: 0;
    transition: all 0.18s ease;
}
.cbt-option-tile.selected .cbt-opt-circle {
    background: #1d4ed8;
    color: #ffffff;
    border-color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.35);
}
.cbt-opt-text {
    flex: 1;
    font-size: 0.98rem;
    color: #334155;
    line-height: 1.5;
}
.cbt-option-tile.selected .cbt-opt-text {
    color: #0f172a;
    font-weight: 600;
}
.cbt-opt-check-icon {
    color: #1d4ed8;
    font-size: 1.15rem;
    margin-left: 10px;
    display: none;
}
.cbt-option-tile.selected .cbt-opt-check-icon {
    display: block;
}

/* ==================================================================== */
/* CBT PREVIEW ANSWER KEY (LIHAT KUNCI JAWABAN & PEMBAHASAN GURU)       */
/* ==================================================================== */
.btn-cbt-key-toggle {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    padding: 7px 16px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.btn-cbt-key-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #38bdf8;
    color: #38bdf8;
    transform: translateY(-1px);
}
.btn-cbt-key-toggle.active {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    border-color: #34d399 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
    animation: cbtKeyGlow 2s infinite ease-in-out;
}
@keyframes cbtKeyGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45); }
    50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.7); }
}

/* Pilihan Ganda / PG Kompleks Highlight Kunci */
.cbt-option-tile.is-correct-answer {
    border-color: #10b981 !important;
    background: #ecfdf5 !important;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.18) !important;
}
.cbt-option-tile.is-correct-answer .cbt-opt-circle {
    background: #10b981 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}
.cbt-correct-badge {
    margin-left: auto;
    background: #10b981;
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
    flex-shrink: 0;
}

/* Benar / Salah Highlight Kunci */
.modern-bs-pill.correct-key-pill {
    outline: 2.5px solid #10b981 !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.45) !important;
    position: relative;
}

/* Isian Singkat & Esai Banner Kunci */
.cbt-key-banner {
    margin-top: 14px;
    background: #ecfdf5;
    border: 1.5px solid #6ee7b7;
    border-radius: 10px;
    padding: 12px 18px;
    color: #1e3a8a;
    font-size: 0.94rem;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
}
.cbt-key-banner i {
    font-size: 1.15rem;
    color: #059669;
    flex-shrink: 0;
}

/* Pembahasan Soal Akademik */
.cbt-explanation-box {
    margin-top: 20px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px 20px;
    animation: cbtFadeIn 0.2s ease-out;
}
.cbt-exp-head {
    font-size: 0.86rem;
    font-weight: 800;
    color: #1e40af;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cbt-exp-head i {
    color: #2563eb;
}
.cbt-exp-body {
    font-size: 0.94rem;
    line-height: 1.65;
    color: #1e293b;
}

/* CBT Bottom Nav */
.cbt-bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1.5px solid #f1f5f9;
    flex-wrap: wrap;
}
.btn-cbt-nav {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}
.btn-cbt-nav:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #94a3b8;
}
.btn-cbt-nav.next {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(29, 78, 216, 0.25);
}
.btn-cbt-nav.next:hover:not(:disabled) {
    background: #1e40af;
    border-color: #1e40af;
}
.btn-cbt-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-cbt-flag {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    color: #b45309;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}
.btn-cbt-flag.active {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

/* CBT Sidebar Card */
.cbt-sidebar-col {
    display: flex;
    flex-direction: column;
}
.cbt-sidebar-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.cbt-sb-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 14px;
}
.cbt-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    overflow-y: auto;
    max-height: 380px;
    padding: 6px;
    box-sizing: border-box;
}
.cbt-num-btn {
    aspect-ratio: 1;
    min-height: 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.94rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    transition: all 0.18s ease;
    user-select: none;
    position: relative;
    box-sizing: border-box;
}
.cbt-num-btn:hover {
    border-color: #0284c7;
    color: #0284c7;
    background: #f0f9ff;
    transform: translateY(-1px);
}
.cbt-num-btn.unattempted {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}
.cbt-num-btn.answered {
    background: #10b981;
    border-color: #059669;
    color: #ffffff;
    font-weight: 800;
}
.cbt-num-btn.flagged {
    background: #f59e0b;
    border-color: #d97706;
    color: #ffffff;
    font-weight: 800;
}
.cbt-num-btn.current {
    border: 2.5px solid #0284c7 !important;
    color: #0369a1 !important;
    background: #e0f2fe !important;
    font-weight: 900;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.22);
    z-index: 2;
    transform: translateY(-1px);
}
.cbt-num-btn.current.answered {
    background: #10b981 !important;
    color: #ffffff !important;
    border: 2.5px solid #047857 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}
.cbt-num-btn.current.flagged {
    background: #f59e0b !important;
    color: #ffffff !important;
    border: 2.5px solid #b45309 !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.35);
}

.cbt-legend-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-top: auto;
    font-size: 0.78rem;
    color: #475569;
}
.cbt-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cbt-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.cbt-dot.answered { background: #10b981; }
.cbt-dot.flagged { background: #f59e0b; }
.cbt-dot.unattempted { background: #e2e8f0; border: 1px solid #cbd5e1; }

.cbt-total-points-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 10px 12px;
    background: #f8faff;
    border: 1px solid #ccfbf1;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #1e40af;
}
.cbt-total-points-footer strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1d4ed8;
}

@media (max-width: 900px) {
    .cbt-modal-container .cbt-modal-body {
        grid-template-columns: 1fr;
    }
    .cbt-modal-container {
        height: 98vh;
    }
}

/* ==========================================================================
   MODAL PETUNJUK & INSTRUKSI PENILAIAN CBT (EXECUTIVE REDESIGN)
   ========================================================================== */
.modal-instruksi-card {
    max-width: 860px !important;
    width: 95% !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    border: none !important;
    animation: modalScaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
}

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

.modal-instruksi-header {
    padding: 22px 28px 18px 28px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1.5px solid #f1f5f9;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.instruksi-header-left {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
}

.instruksi-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.instruksi-header-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.instruksi-mode-badge {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.instruksi-class-badge {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
}

.modal-instruksi-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}

.modal-instruksi-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    margin: 4px 0 0 0;
}

/* KPI Quick Bar */
.instruksi-kpi-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #f8fafc;
    border-bottom: 1.5px solid #f1f5f9;
    padding: 14px 28px;
    gap: 12px;
}

@media (max-width: 768px) {
    .instruksi-kpi-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px 16px;
    }
}

.instruksi-kpi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.kpi-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.icon-clock { background: #eff6ff; color: #2563eb; }
.icon-list { background: #eef2ff; color: #4f46e5; }
.icon-target { background: #ecfdf5; color: #059669; }
.icon-shield { background: #faf5ff; color: #9333ea; }

.kpi-item-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-item-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kpi-item-value {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}

/* Tabs Bar */
.instruksi-tabs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px 0 28px;
    border-bottom: 1.5px solid #e2e8f0;
    background: #ffffff;
    overflow-x: auto;
}

.instruksi-tab-btn {
    border: none;
    background: transparent;
    color: #64748b;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.instruksi-tab-btn:hover {
    color: #2563eb;
}

.instruksi-tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

/* Modal Body */
.modal-instruksi-body {
    padding: 22px 28px;
    overflow-y: auto;
    flex: 1;
}

.instruksi-pane {
    animation: fadeInPane 0.2s ease-out;
}

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

/* Teacher Note */
.instruksi-teacher-note {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-left: 4px solid #2563eb;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.teacher-note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.88rem;
    color: #1e40af;
    margin-bottom: 8px;
}

.teacher-note-content {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #334155;
    font-weight: 500;
}

/* Steps Grid */
.instruksi-steps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .instruksi-steps-grid {
        grid-template-columns: 1fr;
    }
}

.instruksi-step-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: all 0.2s ease;
}

.instruksi-step-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.step-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    border: 1.5px solid #bfdbfe;
    font-weight: 800;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-body h4 {
    margin: 0 0 4px 0;
    font-size: 0.92rem;
    font-weight: 800;
    color: #0f172a;
}

.step-body p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
}

/* Rules List */
.proctor-alert-banner {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.proctor-banner-icon {
    color: #d97706;
    font-size: 1.15rem;
    margin-top: 1px;
}

.proctor-banner-text {
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.5;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
}

.rule-item i {
    font-size: 1.15rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.rule-item strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
}

.rule-item p {
    margin: 0;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.45;
}

/* Navigasi CBT Guide */
.cbt-legend-showcase {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
}

.cbt-guide-color-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.color-guide-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
}

.sample-circle {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.88rem;
    font-family: var(--font-mono, monospace);
    flex-shrink: 0;
}

.sample-unanswered {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
}

.sample-answered {
    background: #2563eb;
    color: #ffffff;
    border: 1.5px solid #2563eb;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.sample-flagged {
    background: #f59e0b;
    color: #ffffff;
    border: 1.5px solid #f59e0b;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.color-guide-desc {
    display: flex;
    flex-direction: column;
}

.color-guide-desc strong {
    font-size: 0.88rem;
    color: #0f172a;
}

.color-guide-desc span {
    font-size: 0.78rem;
    color: #64748b;
}

.cbt-shortcuts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 640px) {
    .cbt-shortcuts-grid {
        grid-template-columns: 1fr;
    }
}

.shortcut-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.shortcut-box i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.shortcut-box strong {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 2px;
}

.shortcut-box span {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}

/* Modal Footer */
.modal-instruksi-footer {
    padding: 16px 28px;
    background: #f8fafc;
    border-top: 1.5px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-instruksi-secondary {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 9px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-instruksi-secondary:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.footer-right-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-instruksi-print {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-instruksi-print:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-instruksi-preview {
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.86rem;
    padding: 9px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-instruksi-preview:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.4);
}

/* CBT Top Bar button for Instruksi */
.btn-cbt-instruksi-toggle {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    padding: 7px 15px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.btn-cbt-instruksi-toggle:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: #60a5fa;
    color: #93c5fd;
    transform: translateY(-1px);
}

/* ==================================================================== */
/* PINNED SIDEBAR BOTTOM PORTION (TOMBOL KELUAR DI PALING BAWAH)        */
/* ==================================================================== */
.sidebar-top-portion {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.sidebar-bottom-portion {
    margin-top: auto;
    padding: 12px 14px 16px 18px;
    display: flex;
    flex-direction: column;
}

.sidebar-divider-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin-bottom: 12px;
    margin-right: 18px;
}

.btn-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-sidebar-logout:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.25);
}

.btn-sidebar-logout i {
    color: #fca5a5;
    font-size: 1.05rem;
    width: 20px;
    text-align: center;
}

.lms-sidebar.collapsed .sidebar-bottom-portion {
    padding-left: 6px;
    padding-right: 6px;
}

.lms-sidebar.collapsed .sidebar-divider-line {
    margin-right: 0;
}

.lms-sidebar.collapsed .btn-sidebar-logout {
    justify-content: center;
    padding: 12px 0;
}

.lms-sidebar.collapsed .btn-sidebar-logout span {
    display: none !important;
}

/* ==================================================================== */
/* TOP-RIGHT POINTS BADGE IN BANK QUESTION CARD (SEBELAH KIRI TITIK 3)  */
/* ==================================================================== */
.bank-q-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bank-q-points-badge-top {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 3px 10px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.78rem;
    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.06);
    user-select: none;
}

.bank-q-points-badge-top i {
    color: #f59e0b;
    font-size: 0.8rem;
}

/* ==================================================================== */
/* DELETE EXAM / PENILAIAN ACTION BUTTON                                */
/* ==================================================================== */
.btn-delete-exam {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fee2e2;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-exam:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
    transform: scale(1.05);
}

/* ==================================================================== */
/* WIZARD STEP 2 FOOTER & COUNTER STYLES (SCREENSHOT 1)                 */
/* ==================================================================== */
.wizard-footer-actions.right-aligned {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.btn-wizard-outline {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-wizard-outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.btn-wizard-primary {
    background: #2563eb;
    border: 1.5px solid #2563eb;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-wizard-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.wizard-instruksi-char-counter {
    text-align: right;
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
    margin-top: 6px;
}

/* ==================================================================== */
/* MODAL: PILIHAN PERTANYAAN TERSEDIA (SCREENSHOT 2)                    */
/* ==================================================================== */
.pilihan-pertanyaan-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pilihan-option-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.pilihan-option-card.card-tambah {
    border-color: #bfdbfe;
    background: #f8faff;
}
.pilihan-option-card.card-tambah:hover,
.pilihan-option-card.card-tambah.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.pilihan-option-card.card-bank {
    border-color: #bbf7d0;
    background: #f8fdf9;
}
.pilihan-option-card.card-bank:hover,
.pilihan-option-card.card-bank.selected {
    border-color: #16a34a;
    background: #f0fdf4;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
}

.pilihan-option-card.card-unggah {
    border-color: #fed7aa;
    background: #fffdfa;
}
.pilihan-option-card.card-unggah:hover,
.pilihan-option-card.card-unggah.selected {
    border-color: #ea580c;
    background: #fffbeb;
    box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.25);
}

.pilihan-opt-icon {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
}

.pilihan-opt-icon.icon-blue { color: #2563eb; }
.pilihan-opt-icon.icon-green { color: #16a34a; }
.pilihan-opt-icon.icon-orange { color: #ea580c; }

.pilihan-opt-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
}

.pilihan-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.btn-pilihan-batal {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    padding: 8px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pilihan-batal:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.btn-pilihan-selanjutnya {
    background: #2563eb;
    border: 1.5px solid #2563eb;
    color: #ffffff;
    padding: 8px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pilihan-selanjutnya:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.btn-pilihan-selanjutnya.disabled {
    background: #cbd5e1;
    border-color: #cbd5e1;
    color: #94a3b8;
    cursor: not-allowed;
}

/* ==================================================================== */
/* MODAL: CARA MENGUNGGAH TEMPLAT SOAL (SCREENSHOT 3)                   */
/* ==================================================================== */
.cara-unggah-step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.cara-unggah-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.link-templat-item {
    color: #2563eb;
    font-size: 0.88rem;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
    display: inline-block;
}

.link-templat-item:hover {
    color: #1d4ed8;
}

.cara-unggah-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 18px 0;
}

.cara-unggah-select-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.cara-unggah-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.88rem;
    color: #1e293b;
    background: #ffffff;
    appearance: none;
    cursor: pointer;
}

.cara-unggah-select:focus {
    border-color: #2563eb;
    outline: none;
}

.cara-unggah-select-arrow {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 38px;
    background: #2563eb;
    color: #ffffff;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.cara-unggah-subtitle-italic {
    font-style: italic;
    font-size: 0.82rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.cara-unggah-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 38px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.cara-unggah-dropzone:hover {
    border-color: #2563eb;
    background: #eff6ff;
}

.dropzone-upload-icon {
    font-size: 2.2rem;
    color: #2563eb;
}

.dropzone-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1e293b;
}

/* ==================================================================== */
/* QUESTION EDITOR & DAFTAR SOAL (TOP NAVBAR LEBIH RAPIH & MODERN)      */
/* ==================================================================== */
.editor-top-nav-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.btn-editor-nav-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    font-size: 0.95rem;
}

.btn-editor-nav-back:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    transform: translateX(-2px);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.editor-top-nav-divider {
    width: 1px;
    height: 22px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.editor-breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    flex-wrap: wrap;
    min-width: 0;
}

.editor-breadcrumb-nav .bc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
}

.editor-breadcrumb-nav .bc-link:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.editor-breadcrumb-nav .bc-link.bc-packet {
    color: #0f172a;
    font-weight: 600;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editor-breadcrumb-nav .bc-link.bc-packet:hover {
    background: #eff6ff;
    color: #2563eb;
}

.editor-breadcrumb-nav .bc-sep {
    color: #cbd5e1;
    font-size: 0.68rem;
    flex-shrink: 0;
}

.editor-breadcrumb-nav .bc-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* Stat Chips in Top Navbar */
.editor-top-meta-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
}

.editor-top-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.76rem;
    font-weight: 600;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.editor-top-stat-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Actions in Header */
.editor-nav-pill-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.btn-editor-top-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    border: 1.5px solid transparent;
    line-height: 1.3;
}

.btn-editor-top-action.btn-action-word {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.btn-editor-top-action.btn-action-word:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12);
}

.btn-editor-top-action.btn-action-preview {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}
.btn-editor-top-action.btn-action-preview:hover {
    background: #f1f5f9;
    color: #0284c7;
    border-color: #94a3b8;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.1);
}

.btn-editor-top-action.btn-action-outline,
.btn-editor-pill-outline {
    background: #ffffff;
    color: #475569;
    border-color: #cbd5e1;
    border: 1.5px solid #cbd5e1;
    padding: 7px 16px;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-editor-top-action.btn-action-outline:hover,
.btn-editor-pill-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-editor-top-action.btn-action-primary,
.btn-editor-pill-primary {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    border: 1.5px solid #2563eb;
    padding: 7px 18px;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}
.btn-editor-top-action.btn-action-primary:hover,
.btn-editor-pill-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

@media (max-width: 900px) {
    .editor-top-nav-bar {
        padding: 10px 14px;
        gap: 12px;
    }
    .editor-top-nav-left {
        width: 100%;
        gap: 8px;
    }
    .editor-nav-pill-actions {
        width: 100%;
        margin-left: 0;
        gap: 6px;
    }
    .editor-top-meta-chips {
        margin-left: auto;
    }
}

.editor-form-header-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.editor-points-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #475569;
}

.editor-points-small-input {
    width: 48px;
    height: 34px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    text-align: center;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9rem;
}

/* Question Editor Right Column Header & Repositioned Buttons (Screenshot 4) */
.editor-nav-card-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
    flex-wrap: wrap;
}

.editor-nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.editor-nav-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-nav-outline {
    border: 1.5px solid #2563eb;
    background: #ffffff;
    color: #2563eb;
    padding: 7px 15px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn-nav-outline:hover {
    background: #eff6ff;
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.btn-nav-primary {
    background: #2563eb;
    border: 1.5px solid #2563eb;
    color: #ffffff;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.btn-nav-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
}

/* ==================================================================== */
/* MODAL BANK SOAL QUESTION PICKER (CHERRY-PICK MULTI-PAKET)           */
/* ==================================================================== */
.picker-modal-card {
    max-width: 880px;
    width: 94vw;
    height: 88vh;
    max-height: 88vh;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px;
    border-radius: 16px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden !important;
}

.picker-modal-card .modal-header-row,
.picker-modal-card .picker-toolbar-row,
.picker-modal-card .pilihan-modal-footer {
    flex-shrink: 0 !important;
}

.picker-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.picker-search-box {
    width: 100%;
    max-width: 360px;
    height: 40px;
    background: #f8fafc;
}

.picker-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.picker-select-filter {
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #334155;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}

.picker-select-filter:focus {
    border-color: #2563eb;
}

.badge-picker-selected {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

.picker-questions-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 6px;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.picker-questions-container::-webkit-scrollbar {
    width: 8px;
}

.picker-questions-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 8px;
}

.picker-questions-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

.picker-questions-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.picker-package-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-height: fit-content !important;
    box-sizing: border-box !important;
}

.picker-package-card:hover {
    border-color: #cbd5e1;
}

.picker-package-header {
    background: #f8fafc;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #e2e8f0;
    gap: 10px;
    flex-shrink: 0 !important;
}

.picker-package-header:hover {
    background: #f1f5f9;
}

.picker-package-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.picker-package-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.picker-package-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: #0f172a;
}

.picker-package-meta {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-picker-toggle-all {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-picker-toggle-all:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.picker-package-questions {
    padding: 10px 14px;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: #ffffff;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-height: fit-content !important;
    box-sizing: border-box !important;
}

.picker-question-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
}

.picker-question-row:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

.picker-question-row.selected {
    background: #eff6ff !important;
    border-color: #93c5fd !important;
}

.picker-q-snippet {
    font-size: 0.85rem !important;
    color: #334155 !important;
    line-height: 1.45 !important;
    margin-top: 2px !important;
    word-break: break-word !important;
}

.picker-q-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    background: #eff6ff !important;
    color: #2563eb !important;
}

.picker-q-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.picker-q-content {
    flex: 1;
    min-width: 0;
}

.picker-q-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.picker-q-num {
    font-weight: 700;
    font-size: 0.88rem;
    color: #0f172a;
}

.picker-q-type-badge {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.picker-q-points-badge {
    background: #ecfdf5;
    color: #059669;
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.picker-q-text {
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.45;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.picker-q-options-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.picker-opt-chip {
    padding: 2px 7px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.picker-opt-chip.correct {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
    font-weight: 700;
}

.btn-picker-confirm-primary {
    background: #2563eb;
    border: 1.5px solid #2563eb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.92rem;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-picker-confirm-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.editor-bulk-select-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1.5px solid #e2e8f0;
}

.bulk-select-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    user-select: none;
}

.bulk-select-checkbox-label input[type="checkbox"] {
    accent-color: #7c3aed;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.btn-bulk-delete-trash {
    background: #ffffff;
    border: 1.5px solid #fca5a5;
    color: #dc2626;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-bulk-delete-trash:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

.editor-card-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.editor-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.editor-checkbox-label:hover {
    background: rgba(124, 58, 237, 0.08);
}

.editor-card-checkbox {
    accent-color: #7c3aed;
    width: 17px;
    height: 17px;
    cursor: pointer;
    margin: 0;
}

.editor-nav-item-card.is-selected {
    background: #faf5ff !important;
    border-color: #c084fc !important;
}

.editor-nav-card-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 8px;
    flex-wrap: wrap;
}

.editor-nav-card-meta-row strong {
    color: #1e293b;
    font-weight: 600;
}

/* ==========================================================================
   8. RUANG PENGAWAS: SELEKTOR PENILAIAN AKTIF & LIVE SCHEDULE MONITORING
   ========================================================================== */
.proctor-exam-selector-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.proctor-selector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.proctor-live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #0f172a;
}

.proctor-exam-dropdown-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.proctor-select-exam {
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    background: #ffffff;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
    max-width: 440px;
}

.proctor-select-exam:focus {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.proctor-exam-meta-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 14px;
    font-size: 0.84rem;
    color: #475569;
}

.proctor-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.proctor-meta-item strong {
    color: #0f172a;
    font-weight: 700;
}

.proctor-no-active-exam {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 36px 20px;
    text-align: center;
    margin-bottom: 24px;
}

/* ==========================================================================
   9. MODAL PENGATURAN PENERBITAN & BLOKIR AKSES SISWA
   ========================================================================== */
.publish-block-modal-card {
    max-width: 840px;
    width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
}

.publish-exam-summary-strip {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.summary-strip-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.strip-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.strip-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.publish-block-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.publish-block-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-block-quick-act {
    height: 36px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-block-quick-act:hover {
    background: #f1f5f9;
}

.btn-block-danger-outline {
    color: #dc2626;
    border-color: #fecaca;
    background: #fef2f2;
}

.btn-block-danger-outline:hover {
    background: #fee2e2;
    border-color: #ef4444;
}

.badge-blocked-counter {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.publish-students-scroll-wrapper {
    overflow-y: auto;
    max-height: 420px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.publish-students-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.publish-students-table th {
    background: #f8fafc;
    padding: 10px 14px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.publish-students-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.publish-students-table tr:hover td {
    background: #f8fafc;
}

.publish-students-table tr.student-row-blocked td {
    background: #fff5f5;
}

.btn-toggle-block-student {
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-toggle-block-student.is-blocked {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.btn-toggle-block-student.is-allowed {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

/* ==========================================================================
   ULTRA-FAST SPA VIEW TRANSITIONS & RESPONSIVENESS (0ms Perceived Latency)
   ========================================================================== */
.lms-view-pane {
    animation: lmsViewFastFade 0.16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: opacity, transform;
    width: 100%;
}

@keyframes lmsViewFastFade {
    0% {
        opacity: 0.88;
        transform: translateY(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fast tap response (eliminates 300ms mobile touch delay) */
.sidebar-nav a,
.sidebar-nav .nav-link-item,
.bank-tab-btn,
.penilaian-tab-pill,
.btn-action-teal,
.btn-custom-add,
.btn-sidebar-logout,
.wizard-step-btn,
.filter-chip-btn,
.custom-select-el,
.btn-link-buku-nilai,
.btn-back-link {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    cursor: pointer;
}

/* Smooth scrolling container without rubber-band stutter */
.lms-main-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important; /* Instant programmatic scroll for SPA */
}

/* Mobile & Tablet Responsive View Container Padding */
@media (max-width: 768px) {
    .lms-view-pane {
        padding-bottom: 28px;
    }
}

/* ==========================================================================
   DASHBOARD CBT VIEW & APP USAGE PROGRESS STYLES
   ========================================================================== */

/* Hero Banner */
.cbt-dashboard-hero {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #3b82f6 100%);
    border-radius: 18px;
    padding: 24px 28px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px -4px rgba(37, 99, 235, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
}

.cbt-dashboard-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.hero-badge .proctor-live-pulse {
    background: #38bdf8;
    box-shadow: 0 0 8px #38bdf8;
}

.hero-title {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.hero-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    max-width: 600px;
    line-height: 1.5;
}

.hero-quick-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    z-index: 1;
}

.btn-hero-action {
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    border: none;
    white-space: nowrap;
}

.btn-hero-action.primary {
    background: #ffffff;
    color: #1e40af;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-hero-action.primary:hover {
    background: #f8faff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.btn-hero-action.secondary {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-hero-action.secondary:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

/* 4 Metrics Grid */
.cbt-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.cbt-metric-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cbt-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.metric-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.metric-icon-wrap.icon-green { background: #ecfdf5; color: #059669; }
.metric-icon-wrap.icon-blue { background: #eff6ff; color: #2563eb; }
.metric-icon-wrap.icon-amber { background: #fef3c7; color: #d97706; }
.metric-icon-wrap.icon-teal { background: #f8faff; color: #1d4ed8; }

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

.metric-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.2;
}

.metric-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Two Column Layout */
.cbt-dash-twocol {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
    align-items: start;
}

.cbt-dash-panel {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.dash-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1.5px solid #f1f5f9;
    margin-bottom: 16px;
}

.panel-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
}

.badge-live-count {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Active Exam Items */
.active-exams-list-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cbt-active-exam-item {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s ease;
}

.cbt-active-exam-item:hover {
    background: #ffffff;
    border-color: #bfdbfe;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.08);
}

.active-exam-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.active-exam-badge-tag {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #f8faff;
    padding: 2px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.active-exam-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.active-exam-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 14px;
    margin-bottom: 14px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    padding: 10px 12px;
    border-radius: 10px;
}

.active-meta-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.active-meta-cell i {
    color: #1d4ed8;
    font-size: 0.85rem;
}

.active-meta-cell.token-cell b {
    color: #2563eb;
    letter-spacing: 0.05em;
    font-family: monospace;
}

.active-exam-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-active-exam-action {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-active-exam-action.primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}

.btn-active-exam-action.primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-active-exam-action.secondary {
    background: #ffffff;
    color: #334155;
    border: 1px solid #cbd5e1;
}

.btn-active-exam-action.secondary:hover {
    background: #f1f5f9;
}

.cbt-no-active-exam-card {
    text-align: center;
    padding: 36px 20px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
}

.no-active-icon {
    font-size: 2.2rem;
    color: #94a3b8;
    margin-bottom: 10px;
}

.no-active-title {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
}

.no-active-desc {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.no-active-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==================================================================== */
/* RECONSTRUCTED CBT METRIC OVERVIEW CARD                               */
/* ==================================================================== */
.cbt-metric-overview-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.cbt-metric-overview-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.metric-overview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.metric-overview-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon-bubble {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.12), rgba(20, 184, 166, 0.22));
    border: 1px solid rgba(29, 78, 216, 0.25);
    color: var(--primary-teal, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.metric-overview-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
}

.metric-overview-subtitle {
    font-size: 0.76rem;
    color: #64748b;
    margin-top: 2px;
}

.metric-kkm-badge {
    font-size: 0.74rem;
    font-weight: 700;
    color: #1d4ed8;
    background: #f8faff;
    border: 1px solid #bfdbfe;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.metric-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 580px) {
    .metric-pillars-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.metric-pillar-box {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 12px 14px;
    text-align: center;
    position: relative;
    transition: all 0.18s ease;
}

.metric-pillar-box:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.metric-pillar-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-bottom: 6px;
}

.metric-pillar-icon.icon-avg {
    background: #eff6ff;
    color: #2563eb;
}

.metric-pillar-icon.icon-mastery {
    background: #ecfdf5;
    color: #059669;
}

.metric-pillar-icon.icon-participation {
    background: #faf5ff;
    color: #7c3aed;
}

.metric-pillar-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.metric-pillar-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 3px;
}

.metric-pillar-trend {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    margin-top: 4px;
}

.metric-recent-insight {
    background: #f8faff;
    border: 1px solid #ccfbf1;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.78rem;
    color: #1e40af;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.metric-recent-insight strong {
    color: #172554;
}

/* Fallback chart legacy styles */
.cbt-chart-card {
    display: none;
}

/* Status Distribution */
.cbt-status-distribution-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.progress-bar-composite {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1f5f9;
    margin-bottom: 10px;
}

.progress-seg {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-seg.seg-active { background: #10b981; }
.progress-seg.seg-scheduled { background: #3b82f6; }
.progress-seg.seg-completed { background: #8b5cf6; }
.progress-seg.seg-draft { background: #f59e0b; }

.progress-legend-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 10px;
    font-size: 0.75rem;
    color: #64748b;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leg-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.leg-dot.dot-active { background: #10b981; }
.leg-dot.dot-scheduled { background: #3b82f6; }
.leg-dot.dot-completed { background: #8b5cf6; }
.leg-dot.dot-draft { background: #f59e0b; }

/* Quick Shortcuts */
.cbt-quick-shortcuts-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.btn-dash-shortcut {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s ease;
}

.btn-dash-shortcut:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.btn-dash-shortcut i {
    font-size: 1.15rem;
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION & MOBILE HEADER (SMARTAPP MODEL)
   ========================================================================== */
.mobile-bottom-nav {
    display: none;
}

.mobile-brand-title {
    display: none;
}

@media (max-width: 768px) {
    /* Hide desktop sidebar on mobile */
    .lms-sidebar {
        display: none !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
        background-color: #ffffff !important;
    }

    .lms-app-frame {
        border-radius: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: #ffffff !important;
    }

    /* Main container full width & padding above bottom nav - MENTOK PALING ATAS (ZERO GAP) */
    .lms-main-content {
        padding-top: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        margin-top: 0 !important;
        height: 100vh !important;
        border-radius: 0 !important;
        background: #ffffff !important;
    }

    /* Sticky Mobile Header - PATEN 56PX IDENTIK DENGAN DASHBOARD */
    .lms-topbar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: calc(100% + 24px) !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        margin: 0 -12px 14px -12px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
        background: #ffffff !important;
        transform: translateZ(0);
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
        border-radius: 0 0 16px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    }

    /* Hilangkan icon toga, pertahankan teks SMARTAPP CBT rapi */
    .mobile-brand-title {
        display: flex !important;
        align-items: center;
        gap: 6px;
        font-weight: 800;
        font-size: 0.95rem;
        color: #1d4ed8;
        letter-spacing: -0.01em;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mobile-brand-title i {
        display: none !important;
    }

    .mobile-brand-title strong {
        color: #0f172a;
    }

    /* User Info & Action Area on Mobile Header */
    .topbar-user-area {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
        flex-shrink: 1;
    }

    .topbar-user-info {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
        flex-shrink: 1;
    }

    .user-meta-text {
        text-align: right;
        min-width: 0;
        max-width: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .user-name {
        font-size: 0.80rem;
        font-weight: 700;
        color: #1e293b;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .user-role-label {
        font-size: 0.68rem;
        font-weight: 500;
        color: #64748b;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .user-avatar-circle {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.76rem !important;
        flex-shrink: 0;
    }

    .btn-switch-smartapp {
        padding: 5px 8px !important;
        font-size: 0.74rem !important;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .btn-switch-text {
        display: none !important;
    }

    .notification-bell-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 0.95rem !important;
        flex-shrink: 0;
    }

    .btn-topbar-logout {
        padding: 5px 8px !important;
        font-size: 0.74rem !important;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .btn-logout-label,
    .btn-text-hide-mob {
        display: none !important;
    }

    .btn-navbar-admin-duties {
        padding: 6px 10px;
        font-size: 0.76rem;
    }

    .btn-navbar-admin-duties .btn-duties-text {
        display: none;
    }

    .mob-nav-link.mob-admin-only {
        color: #1d4ed8;
    }
    .mob-nav-link.mob-admin-only .mob-nav-icon-wrapper {
        color: #1d4ed8;
    }

    /* Hero & Metrics on Mobile */
    .cbt-dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
    }

    .hero-title {
        font-size: 1.2rem;
    }

    .hero-quick-actions {
        width: 100%;
        margin-top: 8px;
    }

    .btn-hero-action {
        flex: 1;
        justify-content: center;
    }

    .cbt-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cbt-metric-card {
        padding: 12px;
        gap: 10px;
    }

    .metric-value {
        font-size: 1.15rem;
    }

    .cbt-dash-twocol {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .penilaian-twocol-layout {
        grid-template-columns: 1fr;
    }

    /* Fixed Bottom Navigation Bar */
    .mobile-bottom-nav {
        display: flex !important;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        height: calc(58px + env(safe-area-inset-bottom, 8px));
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 8px)) 6px;
        background: #ffffff;
        transform: translateZ(0);
        border-top: 1px solid #e2e8f0;
        border-radius: 0;
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
        box-sizing: border-box;
        overflow: hidden;
        user-select: none;
    }

    /* Menu Materi dan Laporan disembunyikan khusus mode mobile */
    .mobile-bottom-nav #mobNavMateri,
    .mobile-bottom-nav #mobNavLaporan {
        display: none !important;
    }

    .mob-nav-link {
        flex: 1 1 0;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: #64748b;
        text-decoration: none;
        cursor: pointer;
        padding: 2px 0;
        white-space: nowrap;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        border: none;
        background: transparent;
        box-sizing: border-box;
    }

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

    .mob-nav-icon-wrapper {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 26px;
        border-radius: 14px;
        font-size: 1.05rem;
        line-height: 1;
        color: #64748b;
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mob-nav-label {
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.01em;
        white-space: nowrap;
        color: #64748b;
        transition: color 0.18s ease;
    }

    .mob-nav-link.active {
        color: #1d4ed8;
    }

    .mob-nav-link.active .mob-nav-icon-wrapper {
        background: rgba(29, 78, 216, 0.12);
        color: #1d4ed8;
        transform: none;
    }

    .mob-nav-link.active .mob-nav-label {
        color: #1d4ed8;
        font-weight: 700;
    }
}

@media (max-width: 380px) {
    .mobile-brand-title {
        font-size: 0.86rem !important;
    }
    .user-meta-text {
        max-width: 90px !important;
    }
    .user-name {
        max-width: 90px !important;
        font-size: 0.74rem !important;
    }
    .user-role-label {
        max-width: 90px !important;
        font-size: 0.65rem !important;
    }
    .topbar-user-area {
        gap: 4px !important;
    }
    .topbar-user-info {
        gap: 4px !important;
    }
}

/* ========================================================================== */
/* NEW CBT & LMS FEATURES: MOBILE HEADER OVERHAUL, LOGOUT, TICKER & MODALS    */
/* ========================================================================== */

/* Topbar Logout Button */
.btn-topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 7px 14px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-topbar-logout:hover {
    background: #ef4444;
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.btn-topbar-logout i {
    font-size: 0.88rem;
}

/* Mobile Bottom Nav Logout Accent */
.mob-nav-link.mob-nav-logout {
    color: #94a3b8;
}

.mob-nav-link.mob-nav-logout:active {
    color: #ef4444;
}

.mob-nav-link.mob-nav-logout:hover {
    color: #dc2626;
}

/* CBT Announcement Ticker (Running Text Marquee) */
.cbt-announcement-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #1e40af 0%, #1d4ed8 40%, #0369a1 100%);
    color: #ffffff;
    padding: 8px 16px;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
    position: relative;
    z-index: 100;
    overflow: hidden;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f59e0b;
    color: #78350f;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    text-transform: uppercase;
    animation: pulseTickerBadge 2s infinite ease-in-out;
}

@keyframes pulseTickerBadge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.ticker-content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.ticker-marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeTicker 24s linear infinite;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.ticker-marquee:hover {
    animation-play-state: paused;
}

@keyframes marqueeTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.ticker-dismiss-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #ffffff;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ticker-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Violation History & Proctor Duty Modals */
.clickable-stat-card {
    transition: all 0.2s ease;
}

.clickable-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.18);
    border-color: #f59e0b;
}

.proctor-badge-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
}

.violation-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.violation-stat-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 14px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.violation-stat-pill .v-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.violation-stat-pill .v-val {
    font-size: 1.15rem;
    font-weight: 800;
}

.violation-stat-pill .text-red { color: #dc2626; }
.violation-stat-pill .text-amber { color: #d97706; }
.violation-stat-pill .text-blue { color: #2563eb; }

.violation-filters-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.student-request-preview-card {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.student-request-preview-card .s-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
}

.student-request-preview-card .lbl {
    color: #64748b;
    font-weight: 500;
}

.badge-req-pending {
    background: #fef3c7;
    color: #b45309;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
}

.badge-req-approved {
    background: #dcfce7;
    color: #15803d;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
}

.badge-req-rejected {
    background: #fee2e2;
    color: #b91c1c;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 700;
}

@media (max-width: 768px) {
    .btn-topbar-logout {
        padding: 5px 10px;
        font-size: 0.74rem;
    }
    .btn-text-hide-mob {
        display: none;
    }
    .violation-summary-grid {
        grid-template-columns: 1fr;
    }
    .violation-filters-row {
        flex-direction: column;
    }
    .lms-modal-backdrop,
    .lms-modal-overlay {
        padding: 8px !important;
        align-items: flex-end !important;
    }
    .lms-modal-backdrop .lms-modal-card {
        max-height: 94vh !important;
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    .lms-modal-header {
        padding: 14px 16px !important;
    }
    .lms-modal-body {
        padding: 14px 16px !important;
    }
    .lms-modal-footer {
        padding: 12px 16px !important;
    }
    .lms-modal-title {
        font-size: 1.02rem !important;
    }
}

/* ==========================================================================
   FORM CONTROLS & MODAL ACTION BUTTON DESIGN SYSTEM
   ========================================================================== */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    text-align: left;
    width: 100%;
}

.form-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2px;
    line-height: 1.4;
}

.form-label.font-bold {
    font-weight: 700 !important;
}

.form-control {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #1e293b;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.form-control::placeholder {
    color: #94a3b8;
    font-size: 0.86rem;
}

.form-control:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
    background: #ffffff;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    padding-right: 36px;
    cursor: pointer;
}

textarea.form-control {
    min-height: 90px;
    resize: vertical;
    line-height: 1.55;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.form-control-sm {
    padding: 6px 10px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    height: auto !important;
}

/* Secondary & Primary Action Buttons in Modals */
.btn-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    white-space: nowrap;
}

.btn-secondary-action:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.btn-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    border: 1px solid #0284c7;
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary-action:hover {
    background: linear-gradient(135deg, #0369a1, #075985);
    border-color: #0369a1;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
    transform: translateY(-1px);
    color: #ffffff;
}

/* Student Request Preview Card */
.student-request-preview-card {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-request-preview-card .s-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.86rem;
    color: #0369a1;
}

.student-request-preview-card .s-info-row .lbl {
    font-weight: 600;
    color: #64748b;
}

.student-request-preview-card .s-info-row strong,
.student-request-preview-card .s-info-row span:not(.lbl) {
    color: #0c4a6e;
    font-weight: 700;
}

/* Proctor Tingkat Filter Bar */
.proctor-tingkat-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.tingkat-pill-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.btn-tingkat-pill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tingkat-pill:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.btn-tingkat-pill.active {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}

/* (CBT Mobile UI Consolidated to Master Responsive Block) */

/* ==========================================================================
   ENHANCED MODAL & FORM CONTROLS DESIGN SYSTEM
   - Modal Pengaturan Tugas Pengawas & Tim Virtual
   - Modal Atur Blokir Akses Siswa
   - Kotak Alasan Penolakan Permohonan Tindakan
   ========================================================================== */

/* Form Control Standard */
.form-control {
    width: 100%;
    padding: 9px 14px;
    font-size: 0.88rem;
    font-family: var(--font-main, 'Plus Jakarta Sans', sans-serif);
    color: #1e293b;
    background-color: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    transition: all 0.18s ease;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14);
}

/* Modal Pengaturan Tugas Pengawas Select Inputs */
.proctor-duty-select {
    width: 100% !important;
    min-width: 180px !important;
    height: 38px !important;
    padding: 6px 30px 6px 11px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    font-family: var(--font-main, 'Plus Jakarta Sans', sans-serif) !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    outline: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    cursor: pointer !important;
}

.proctor-duty-select:focus {
    border-color: #0284c7 !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14) !important;
}

/* Modal Atur Blokir Akses Toolbar & Search */
.publish-block-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.publish-block-toolbar .search-box {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 9px;
    padding: 0 12px;
    min-width: 280px;
    flex: 1;
    transition: all 0.18s ease;
}

.publish-block-toolbar .search-box:focus-within {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14);
}

.publish-block-toolbar .search-box i {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-right: 8px;
    flex-shrink: 0;
}

.publish-block-toolbar .search-box input {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    width: 100% !important;
    font-size: 0.88rem !important;
    font-family: inherit !important;
    color: #1e293b !important;
    padding: 9px 0 !important;
}

.publish-block-toolbar .actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-block-quick-act {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 9px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-block-quick-act:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.btn-block-quick-act.danger {
    border-color: #fecaca;
    background: #fff1f2;
    color: #e11d48;
}

.btn-block-quick-act.danger:hover {
    background: #ffe4e6;
    border-color: #fca5a5;
    color: #be123c;
}

/* Tabel Siswa Blokir */
.publish-students-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.publish-students-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 11px 14px;
    border-bottom: 1.5px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 2;
}

.publish-students-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #1e293b;
}

.publish-students-table tr:hover td {
    background: #f8fafc;
}

/* Tombol Aksi Modal Blokir */
.btn-pilihan-batal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 9px;
    border: 1.5px solid #cbd5e1;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-pilihan-batal:hover {
    background: #e2e8f0;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn-pilihan-selanjutnya {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    padding: 9px 20px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #0284c7, #0369a1);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    transition: all 0.15s ease;
}

.btn-pilihan-selanjutnya:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    background: linear-gradient(135deg, #0369a1, #075985);
}

/* Kotak Keterangan Alasan Penolakan Permohonan */
.req-reject-box {
    margin-top: 6px;
    font-size: 0.76rem;
    background: #fef2f2;
    color: #991b1b;
    border: 1.5px solid #fecaca;
    border-radius: 8px;
    padding: 7px 10px;
    text-align: left;
    line-height: 1.45;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
}

/* Tombol Cepat Tambah Waktu Modal Edit Batas */
.btn-quick-time-pill {
    background: #f1f5f9;
    border: 1.5px solid #cbd5e1;
    color: #334155;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.btn-quick-time-pill:hover {
    background: #fef3c7;
    border-color: #fde68a;
    color: #b45309;
    transform: translateY(-1px);
}

/* ========================================================================== */
/* TIPE ASESMEN SELECTOR CARDS (ASESMEN HARIAN VS ASESMEN SEKOLAH)            */
/* ========================================================================== */
.tipe-asesmen-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    align-items: stretch;
}

@media (max-width: 768px) {
    .tipe-asesmen-selector-grid {
        grid-template-columns: 1fr;
    }
}

.tipe-asesmen-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    user-select: none;
    height: 100%;
    min-height: 104px;
    box-sizing: border-box;
}

.tipe-asesmen-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.tipe-asesmen-card.active {
    border-color: #1d4ed8;
    background: #f8faff;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.12);
}

#cardTipeAsesmenSekolah.active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}

.tipe-asesmen-card .card-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.tipe-asesmen-card .card-text-wrap {
    flex: 1;
    min-width: 0;
}

.tipe-asesmen-card .card-main-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 3px;
    line-height: 1.3;
}

.tipe-asesmen-card .card-desc {
    font-size: 0.76rem;
    color: #64748b;
    line-height: 1.4;
}

.tipe-asesmen-card .card-check-icon {
    font-size: 1.15rem;
    margin-left: auto;
    align-self: flex-start;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ========================================================================== */
/* ENHANCED GRADING & SUBMISSION STYLES                                       */
/* ========================================================================== */
.btn-q-circle.unanswered {
    background: #f1f5f9;
    color: #64748b;
    border: 1.5px solid #cbd5e1;
}

.btn-q-circle.correct {
    background: #ecfdf5;
    color: #059669;
    border: 1.5px solid #6ee7b7;
    font-weight: 800;
}

.btn-q-circle.wrong {
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    font-weight: 800;
}

.grading-option-row.student-correct {
    background: #ecfdf5;
    border: 1.5px solid #34d399;
    color: #1e3a8a;
    font-weight: 600;
}

/* ========================================================================== */
/* EXAM CARD KEBAB (3-DOTS) ACTION DROPDOWN                                   */
/* ========================================================================== */
.exam-kebab-wrapper {
    position: relative;
    display: inline-block;
}

.btn-exam-kebab {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-exam-kebab:hover, .btn-exam-kebab.active {
    background: #f1f5f9;
    color: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.12);
}

.exam-kebab-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    max-height: min(440px, calc(100vh - 130px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.22), 0 4px 14px rgba(0, 0, 0, 0.08);
    animation: examKebabFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: top right;
}

.exam-kebab-menu::-webkit-scrollbar {
    width: 5px;
}

.exam-kebab-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

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

.kebab-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.kebab-menu-item i {
    font-size: 0.95rem;
    width: 18px;
    text-align: center;
}

.kebab-menu-item:hover {
    background: #f1f5f9;
    color: #1d4ed8;
}

.kebab-menu-item.danger:hover {
    background: #fef2f2;
    color: #dc2626 !important;
}

.kebab-menu-item.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.kebab-menu-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

/* ========================================================================== */
/* RECONSTRUCTED CBT REPORT SUITE STYLES                                      */
/* ========================================================================== */
.laporan-suite-wrap {
    padding: 4px 0 30px 0;
}

.laporan-header-banner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.laporan-header-title-box h1 {
    margin: 0 0 6px 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.laporan-header-title-box p {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}

.laporan-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* KPI Summary Cards Grid */
.laporan-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.laporan-kpi-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.laporan-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.laporan-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.laporan-kpi-info .kpi-value {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.laporan-kpi-info .kpi-label {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Tab Navigasi Laporan */
.laporan-tabs-bar {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 22px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.laporan-tab-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.laporan-tab-btn:hover {
    color: #1d4ed8;
}

.laporan-tab-btn.active {
    color: #1d4ed8;
    border-bottom-color: #1d4ed8;
}

/* Filter Card Laporan */
.laporan-filter-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.laporan-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.laporan-stat-banner {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.08), rgba(2, 132, 199, 0.08));
    border: 1px solid rgba(29, 78, 216, 0.2);
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.laporan-stat-item {
    display: flex;
    flex-direction: column;
}

.laporan-stat-item .stat-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
}

.laporan-stat-item .stat-num {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

/* Tabel Rekap Nilai Siswa */
.laporan-table-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

.laporan-student-table {
    width: 100%;
    border-collapse: collapse;
}

.laporan-student-table th {
    background: #f8fafc;
    padding: 14px 16px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1.5px solid #e2e8f0;
    text-align: left;
}

.laporan-student-table td {
    padding: 13px 16px;
    font-size: 0.88rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

.laporan-student-table tr:hover td {
    background: #f8fafc;
}

.badge-kkm-tuntas {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bfdbfe;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-kkm-remidial {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-kkm-pending {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.78rem;
}

/* ==========================================================================
   MODAL EDIT PENILAIAN (SETTINGS CBT) - RAPIH & MODERN DENGAN TABS
   ========================================================================== */
.edit-settings-modal-card {
    max-width: 740px !important;
    width: 95% !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3) !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Tab Navigation Bar */
.edit-settings-tab-bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 24px 0 24px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    overflow-x: auto !important;
    flex-shrink: 0 !important;
}

.edit-settings-tab-bar::-webkit-scrollbar {
    height: 4px;
}

.edit-settings-tab-bar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.edit-tab-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.edit-tab-btn i {
    font-size: 0.92rem !important;
    transition: transform 0.2s ease !important;
}

.edit-tab-btn:hover {
    color: #0f172a !important;
    background: #f1f5f9 !important;
}

.edit-tab-btn.active {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    border-bottom: 2.5px solid #1d4ed8 !important;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.03) !important;
}

.edit-tab-btn.active i {
    color: #1d4ed8 !important;
    transform: scale(1.08) !important;
}

.edit-settings-modal-body {
    padding: 22px 26px !important;
    max-height: calc(90vh - 165px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

.edit-settings-modal-body::-webkit-scrollbar {
    width: 6px !important;
}

.edit-settings-modal-body::-webkit-scrollbar-track {
    background: transparent !important;
}

.edit-settings-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 6px !important;
}

.edit-settings-modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

.edit-settings-pane {
    animation: editPaneFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.edit-settings-section-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #1e40af !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 22px 0 12px 0 !important;
    padding-bottom: 6px !important;
    border-bottom: 1.5px solid #ccfbf1 !important;
}

.edit-settings-section-header:first-child {
    margin-top: 0 !important;
}

.edit-form-group {
    margin-bottom: 14px !important;
}

.edit-form-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
}

.edit-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 540px) {
    .edit-grid-2col {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

.edit-input-custom {
    width: 100% !important;
    height: 42px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
}

.edit-input-custom:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
}

.edit-textarea-custom {
    width: 100% !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 0.86rem !important;
    font-family: inherit !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none !important;
    resize: vertical !important;
    min-height: 72px !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
}

.edit-textarea-custom:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
}

.input-with-unit {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.input-with-unit .edit-input-custom {
    padding-right: 56px !important;
}

.input-unit-badge {
    position: absolute !important;
    right: 12px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    pointer-events: none !important;
}

.edit-settings-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    gap: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.edit-settings-row:last-child {
    border-bottom: none !important;
}

.edit-settings-row-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.edit-settings-row-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    margin-bottom: 2px !important;
}

.edit-settings-row-desc {
    font-size: 0.77rem !important;
    color: #64748b !important;
    line-height: 1.35 !important;
}

.edit-tipe-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 480px) {
    .edit-tipe-grid {
        grid-template-columns: 1fr !important;
    }
}

.edit-tipe-card {
    padding: 12px 14px !important;
    cursor: pointer !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

.edit-tipe-card:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.edit-tipe-card.active-harian {
    border: 2px solid #1d4ed8 !important;
    background: #f8faff !important;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.12) !important;
}

.edit-tipe-card.active-sekolah {
    border: 2px solid #2563eb !important;
    background: #eff6ff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important;
}

.edit-select-custom {
    width: 100% !important;
    height: 42px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0 36px 0 12px !important;
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center !important;
    background-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
}

.edit-select-custom:focus {
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15) !important;
}

.edit-settings-modal-footer {
    border-top: 1px solid #e2e8f0 !important;
    padding: 14px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #f8fafc !important;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.03) !important;
    flex-shrink: 0 !important;
}

/* ==========================================================================
   8. STYLING ANALISIS PENILAIAN DASHBOARD (ITEM ANALYSIS & DISTRIBUTION)
   ========================================================================== */

/* Top Breadcrumb Bar */
.analisis-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 18px 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 22px;
}

.analisis-breadcrumb-bar .breadcrumb-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.analisis-breadcrumb-bar .btn-breadcrumb-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.analisis-breadcrumb-bar .btn-breadcrumb-back:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    transform: translateX(-2px);
}

.analisis-breadcrumb-bar .breadcrumb-nav-path {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
}

.analisis-breadcrumb-bar .breadcrumb-parent {
    color: #64748b;
    transition: color 0.15s ease;
}

.analisis-breadcrumb-bar .breadcrumb-parent:hover {
    color: #2563eb;
    text-decoration: underline;
}

.analisis-breadcrumb-bar .breadcrumb-sep {
    color: #94a3b8;
    display: flex;
    align-items: center;
}

.analisis-breadcrumb-bar .breadcrumb-active {
    color: #2563eb;
    font-weight: 700;
    background: #eff6ff;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid #dbeafe;
}

/* Action Buttons (Ekspor Matriks & Ekspor File) */
.analisis-topbar-btn-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-analisis-export-matriks {
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn-analisis-export-matriks:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.export-file-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.btn-analisis-export-file {
    border: none;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8.5px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

.btn-analisis-export-file:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.38);
    transform: translateY(-1px);
}

.dropdown-caret-icon {
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.export-file-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 14px 30px -4px rgba(15, 23, 42, 0.12), 0 6px 12px -2px rgba(15, 23, 42, 0.06);
    min-width: 250px;
    z-index: 120;
    overflow: hidden;
    padding: 6px;
    animation: fadeInMenu 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.export-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.export-menu-item:hover {
    background: #f8fafc;
}

.export-item-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.export-item-icon-wrap.icon-excel {
    background: #ecfdf5;
    color: #10b981;
}

.export-item-icon-wrap.icon-pdf {
    background: #fef2f2;
    color: #ef4444;
}

.export-item-icon-wrap.icon-csv {
    background: #eff6ff;
    color: #3b82f6;
}

.export-item-text {
    display: flex;
    flex-direction: column;
}

.export-item-text .item-main {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

.export-item-text .item-sub {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}

/* Exam Metadata Card (Elevated Modern) */
.analisis-meta-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 2px 10px -2px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
}

.analisis-meta-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 4px 0 0 4px;
}

.analisis-meta-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #bfdbfe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);
}

.analisis-meta-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.analisis-meta-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.analisis-exam-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
}

.analisis-status-pill {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.analisis-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.analisis-tag-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.analisis-tag-pill i {
    color: #64748b;
    font-size: 0.82rem;
}

.analisis-tag-pill.tag-mode-online {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.analisis-tag-pill.tag-mode-online i {
    color: #2563eb;
}

/* ========================================================
   MODERN EXECUTIVE KPI GRID (4 Cohesive Metric Cards)
   ======================================================== */
.analisis-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

@media (max-width: 1200px) {
    .analisis-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .analisis-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.analisis-kpi-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.analisis-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -4px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.kpi-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.analisis-kpi-card:hover .kpi-icon-wrapper {
    transform: scale(1.05);
}

.kpi-card-blue .kpi-icon-wrapper {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border: 1.2px solid #bfdbfe;
}

.kpi-card-emerald .kpi-icon-wrapper {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: #059669;
    border: 1.2px solid #a7f3d0;
}

.kpi-card-indigo .kpi-icon-wrapper {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4f46e5;
    border: 1.2px solid #c7d2fe;
}

.kpi-card-amber .kpi-icon-wrapper {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #d97706;
    border: 1.2px solid #fde68a;
}

.kpi-body {
    flex: 1;
    min-width: 0;
}

.kpi-caption {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 5px;
    display: block;
}

.kpi-stat-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    line-height: 1;
}

.kpi-stat-number {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    letter-spacing: -0.02em;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.kpi-stat-unit {
    font-size: 0.84rem;
    font-weight: 600;
    color: #64748b;
}

.kpi-stat-split {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.kpi-val-bold {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.kpi-val-divider {
    font-size: 1.15rem;
    color: #cbd5e1;
    font-weight: 400;
}

.kpi-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.chip-blue {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #dbeafe;
}

.chip-emerald {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.chip-indigo {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.chip-amber {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ========================================================
   BALANCED DEEP ANALYTICS GRID (Row 2: Kesukaran + Distribusi)
   ======================================================== */
.analisis-deep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 1080px) {
    .analisis-deep-grid {
        grid-template-columns: 1fr;
    }
}

.analisis-surface-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.analisis-surface-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.07);
}

.surface-card-header {
    padding: 16px 20px;
    border-bottom: 1.5px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
}

.surface-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.surface-header-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.icon-emerald-tint {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.icon-blue-tint {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.surface-card-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.surface-card-subtitle {
    font-size: 0.74rem;
    font-weight: 500;
    color: #64748b;
    margin: 2px 0 0 0;
}

.surface-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2563eb;
    background: #eff6ff;
    border: 1.2px solid #bfdbfe;
    padding: 4px 10px;
    border-radius: 8px;
    white-space: nowrap;
}

.surface-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 16px;
}

.surface-chart-body {
    justify-content: flex-end;
    min-height: 300px;
}

/* 3 Kartu Metrik Kesukaran */
.kesukaran-triplet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.kesukaran-triplet-card {
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.kesukaran-triplet-card:hover {
    transform: translateY(-2px);
}

.card-diff-mudah {
    background: #f0fdf4;
    border: 1.2px solid #bbf7d0;
}

.card-diff-sedang {
    background: #eff6ff;
    border: 1.2px solid #bfdbfe;
}

.card-diff-sukar {
    background: #fff1f2;
    border: 1.2px solid #fecdd3;
}

.triplet-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.triplet-badge {
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-mudah { color: #15803d; }
.badge-sedang { color: #1d4ed8; }
.badge-sukar { color: #be123c; }

.triplet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-mudah { background: #10b981; }
.dot-sedang { background: #3b82f6; }
.dot-sukar { background: #f43f5e; }

.triplet-formula {
    font-size: 0.68rem;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.triplet-val-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0;
}

.triplet-number {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.triplet-unit {
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.triplet-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    font-size: 0.72rem;
}

.triplet-pct {
    font-weight: 800;
    color: #0f172a;
}

.triplet-desc {
    color: #64748b;
    font-weight: 500;
    font-size: 0.7rem;
}

/* Modern Segmented Meter */
.kesukaran-meter-wrap {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
}

.meter-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}

.meter-title {
    font-size: 0.74rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.meter-legend-pills {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-pill {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.kesukaran-segmented-bar {
    display: flex;
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
    gap: 2px;
}

.bar-segment {
    height: 100%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.seg-mudah {
    background: linear-gradient(90deg, #34d399 0%, #10b981 100%);
}

.seg-sedang {
    background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
}

.seg-sukar {
    background: linear-gradient(90deg, #fb7185 0%, #e11d48 100%);
}

/* Insight Box */
.kesukaran-insight-card {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.insight-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fde68a;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.insight-content {
    flex: 1;
}

.insight-label {
    font-size: 0.74rem;
    font-weight: 800;
    color: #92400e;
    display: block;
    margin-bottom: 2px;
}

.insight-message {
    font-size: 0.78rem;
    font-weight: 500;
    color: #78350f;
    margin: 0;
    line-height: 1.45;
}

/* Left Column / Full-Width Question Analysis Table Card (TIDAK TERPOTONG) */
.analisis-table-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.05);
}

.analisis-table-card.analisis-table-fullwidth {
    width: 100%;
    margin-bottom: 30px;
}

.analisis-table-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1.5px solid #f1f5f9;
    background: #ffffff;
    gap: 16px;
    flex-wrap: wrap;
}

.table-card-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.table-card-icon-badge {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    border: 1px solid #dbeafe;
}

.table-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.table-card-subtitle {
    margin: 3px 0 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

/* Toolbar: Search, Filter Tingkat Kesukaran, & Counter Badge */
.analisis-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.analisis-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.analisis-search-box i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
}

.analisis-search-box input {
    padding: 8px 14px 8px 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #1e293b;
    background: #f8fafc;
    width: 250px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.analisis-search-box input:focus {
    outline: none;
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    width: 300px;
}

.analisis-filter-select {
    padding: 8px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.analisis-filter-select:focus {
    outline: none;
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.badge-total-soal {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.analisis-table-responsive {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.analisis-questions-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
    table-layout: auto;
}

.analisis-questions-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 14px 18px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.analisis-questions-table tbody td {
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    line-height: 1.55;
}

.analisis-q-row-card {
    transition: background 0.15s ease;
    cursor: pointer;
}

.analisis-q-row-card:hover {
    background: #f8fafc;
}

.analisis-questions-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table Cells Formatting */
.analisis-td-no {
    width: 60px;
    text-align: center;
}

.q-num-badge {
    background: #f1f5f9;
    color: #475569;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: inline-block;
    font-family: var(--font-mono, monospace);
}

.analisis-td-soal {
    /* Critical: Teks soal tampil LENGKAP & TIDAK TERPOTONG */
    min-width: 320px;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.question-snippet-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.question-clean-text {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
    overflow: visible !important;
    transition: color 0.15s ease;
}

.analisis-q-row-card:hover .question-clean-text {
    color: #2563eb;
}

.q-view-detail-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.15s ease;
}

.analisis-q-row-card:hover .q-view-detail-hint {
    color: #2563eb;
}

/* Type Chip */
.analisis-type-chip {
    font-size: 0.74rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.analisis-type-chip.chip-pg {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #dbeafe;
}

.analisis-type-chip.chip-esai {
    background: #faf5ff;
    color: #9333ea;
    border: 1px solid #f3e8ff;
}

/* Correct Answer Progress Metric */
.analisis-td-benar {
    width: 190px;
    white-space: nowrap;
}

.analisis-correct-metric {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.correct-metric-text {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.8rem;
}

.metric-num-bold {
    font-weight: 800;
    color: #0f172a;
    font-size: 0.88rem;
}

.metric-num-sub {
    color: #64748b;
    font-weight: 500;
}

.correct-mini-progress {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    width: 100%;
}

.correct-mini-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Percentage Pill */
.analisis-td-pct {
    width: 120px;
    text-align: center;
    white-space: nowrap;
}

.analisis-pct-pill {
    font-size: 0.82rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-block;
    text-align: center;
    min-width: 52px;
}

.pct-badge-high {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
}

.pct-badge-mid {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}

.pct-badge-low {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #e11d48;
}

/* Difficulty Pill */
.analisis-td-kesukaran {
    width: 140px;
    text-align: center;
    white-space: nowrap;
}

.analisis-diff-pill {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.diff-badge-mudah {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.diff-badge-sedang {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.diff-badge-sukar {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.diff-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* Row Action Button */
.analisis-td-aksi {
    width: 100px;
    text-align: center;
    white-space: nowrap;
}

.btn-analisis-row-action {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.2px solid #dbeafe;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.btn-analisis-row-action:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.analisis-info-icon {
    color: #94a3b8;
    font-size: 0.82rem;
    margin-left: 4px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.analisis-info-icon:hover {
    color: #2563eb;
}

/* Right Column Distribution Card */
.analisis-distribusi-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px 20px;
    position: relative;
    box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.04);
}

.distribusi-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.distribusi-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.distribusi-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.distribusi-title-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    display: block;
    line-height: 1.2;
}

.distribusi-subtitle {
    margin: 2px 0 0 0;
    font-size: 0.74rem;
    color: #64748b;
    font-weight: 500;
}

.distribusi-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 18px;
    margin-bottom: 22px;
    text-align: center;
    gap: 10px;
}

.distribusi-metric-col {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.distribusi-metric-col.col-avg {
    background: #f5f3ff;
    border-color: #ede9fe;
}

.distribusi-metric-col.col-max {
    background: #f0fdf4;
    border-color: #dcfce7;
}

.distribusi-metric-col.col-min {
    background: #fff1f2;
    border-color: #ffe4e6;
}

.metric-icon-tiny {
    font-size: 0.72rem;
    color: #64748b;
}

.col-avg .metric-icon-tiny { color: #6366f1; }
.col-max .metric-icon-tiny { color: #10b981; }
.col-min .metric-icon-tiny { color: #f43f5e; }

.distribusi-metric-col .metric-label {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.distribusi-metric-col .metric-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
    letter-spacing: -0.02em;
}

.metric-value.text-indigo { color: #4f46e5; }
.metric-value.text-emerald { color: #059669; }
.metric-value.text-rose { color: #e11d48; }

/* Histogram Bar Chart */
.distribusi-chart-container {
    position: relative;
    padding-left: 38px;
    padding-bottom: 20px;
    min-height: 310px;
}

.chart-y-axis-title {
    position: absolute;
    left: -14px;
    top: 48%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.74rem;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.chart-main-plot {
    display: flex;
    height: 250px;
    position: relative;
}

.chart-y-ticks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    padding-right: 8px;
    font-size: 0.72rem;
    color: #64748b;
    font-family: var(--font-mono, monospace);
    text-align: right;
    user-select: none;
    line-height: 1;
}

.chart-bars-area {
    flex: 1;
    position: relative;
    border-left: 1.5px solid #cbd5e1;
    border-bottom: 1.5px solid #cbd5e1;
    height: 100%;
}

.chart-gridlines-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.chart-gridline {
    width: 100%;
    border-top: 1px dashed #e2e8f0;
    height: 0;
}

.chart-bars-row {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 10px;
}

.chart-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    flex: 1;
    max-width: 48px;
    position: relative;
    cursor: pointer;
}

.chart-bar-val-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 4px;
    font-family: var(--font-mono, monospace);
    transition: opacity 0.2s ease;
}

.chart-bar-pillar {
    width: 100%;
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    border-radius: 6px 6px 0 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.chart-bar-wrap:hover .chart-bar-pillar {
    background: linear-gradient(180deg, #38bdf8 0%, #1d4ed8 100%);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    filter: brightness(1.08);
}

.chart-bar-wrap:hover .chart-bar-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-8px);
}

.chart-bar-tooltip {
    position: absolute;
    bottom: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 0.74rem;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    z-index: 20;
    text-align: center;
}

.chart-bar-tooltip .tip-range {
    font-size: 0.68rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chart-bar-tooltip .tip-detail {
    font-size: 0.78rem;
    color: #ffffff;
    margin-top: 2px;
}

.chart-x-axis-wrap {
    margin-left: 26px;
    margin-top: 10px;
}

.chart-x-ticks {
    display: flex;
    justify-content: space-around;
    padding: 0 10px;
    font-size: 0.74rem;
    color: #475569;
    font-weight: 700;
    text-align: center;
}

.chart-x-ticks span {
    flex: 1;
    text-align: center;
    background: #f8fafc;
    border-radius: 5px;
    margin: 0 2px;
    padding: 3px 0;
    border: 1px solid #f1f5f9;
}

.chart-x-axis-title {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-top: 10px;
}

/* Modal Detail Butir Soal & Distraktor Modern */
.modal-rich-qtext-body {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 0.96rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.65;
}

.modal-rich-qtext-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}

.modal-analisis-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analisis-option-row {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.2s ease;
}

.analisis-option-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.analisis-option-row.correct {
    border-color: #10b981;
    background: #f0fdf4;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.option-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    gap: 12px;
}

.option-key-label-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.option-key-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.option-key-circle.correct {
    background: #10b981;
    color: #ffffff;
}

.option-text-clean {
    color: #1e293b;
    line-height: 1.45;
}

.badge-kunci-jawaban {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.option-stat-metric {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.option-stat-metric.correct {
    color: #15803d;
}

.opt-count-bold {
    font-weight: 800;
    color: #0f172a;
}

.option-progress-bar-bg {
    height: 7px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
}

.option-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
    transition: width 0.4s ease;
}

.option-progress-bar-fill.correct {
    background: linear-gradient(90deg, #34d399 0%, #059669 100%);
}

.modal-analisis-student-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1.5px solid #e2e8f0;
    margin-bottom: 12px;
}

.modal-analisis-tab-btn {
    padding: 9px 18px;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.86rem;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.modal-analisis-tab-btn.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.modal-analisis-student-list-container {
    max-height: 240px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    padding: 2px;
}

.analisis-student-badge-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #334155;
    transition: all 0.15s ease;
}

.analisis-student-badge-item:hover {
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}

.analisis-floating-tooltip {
    position: fixed;
    z-index: 10000;
    background: #0f172a;
    color: #ffffff;
    padding: 9px 13px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.45;
    max-width: 280px;
    box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Print Media Styles */
@media print {
    body * {
        visibility: hidden !important;
    }
    #viewAnalisisPenilaianDashboard, #viewAnalisisPenilaianDashboard * {
        visibility: visible !important;
    }
    #viewAnalisisPenilaianDashboard {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        display: block !important;
        padding: 10px !important;
        background: #ffffff !important;
    }
    .analisis-breadcrumb-bar .breadcrumb-actions,
    .btn-breadcrumb-back {
        display: none !important;
    }
    .analisis-twocol-grid,
    .analisis-overview-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================================================== */
/* KHUSUS MODE SISWA (SIMPLIFIED STUDENT DASHBOARD & RIWAYAT PENILAIAN)      */
/* ========================================================================== */

/* Sederhanakan Dashboard untuk Role Siswa */
.student-dashboard-mode .hero-quick-actions {
    display: none !important;
}

.student-dashboard-mode .cbt-metrics-grid {
    display: none !important;
}

.student-dashboard-mode .cbt-dash-twocol .progress-panel {
    display: none !important;
}

.student-dashboard-mode .cbt-dash-twocol {
    display: block !important;
    gap: 0 !important;
}

.student-dashboard-mode .cbt-dash-twocol .active-exams-panel {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Proteksi Siswa: Pastikan modul Laporan Hub, Buku Nilai, Leger Nilai, Bank Soal & Penilaian tidak pernah tampil di mode siswa */
body.lms-student-role #viewLaporanDashboard,
body.lms-student-role #viewLegerNilaiDashboard,
body.lms-student-role #viewBukuNilaiDashboard,
body.lms-student-role #viewMateriDashboard,
body.lms-student-role #viewPenilaianDashboard,
body.lms-student-role #viewProctorDashboard,
body.lms-student-role #viewSettingPengawas,
body.lms-student-role #cardLaporanBukuNilai,
body.lms-student-role #cardLaporanLegerNilai,
#lmsAppView[data-user-role="student"] #viewLaporanDashboard,
#lmsAppView[data-user-role="student"] #viewLegerNilaiDashboard,
#lmsAppView[data-user-role="student"] #viewBukuNilaiDashboard,
#lmsAppView[data-user-role="student"] #viewMateriDashboard,
#lmsAppView[data-user-role="student"] #viewPenilaianDashboard,
#lmsAppView[data-user-role="student"] #viewProctorDashboard,
#lmsAppView[data-user-role="student"] #viewSettingPengawas,
#lmsAppView[data-user-role="student"] #cardLaporanBukuNilai,
#lmsAppView[data-user-role="student"] #cardLaporanLegerNilai {
    display: none !important;
}

/* Empty State Ujian Siswa Bersih & Menarik */
.student-empty-exams-card {
    text-align: center;
    padding: 48px 24px;
    background: #ffffff;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
    margin: 12px 0;
}

.student-empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #059669;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 16px;
}

.student-empty-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.student-empty-desc {
    font-size: 0.88rem;
    color: #64748b;
    max-width: 480px;
    margin: 0 auto 16px auto;
    line-height: 1.5;
}

.btn-open-riwayat-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f1f5f9;
    color: #0284c7;
    border: 1px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-open-riwayat-link:hover {
    background: #e0f2fe;
    color: #0369a1;
}

/* Riwayat Penilaian View Styles */
.riwayat-penilaian-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    overflow: hidden;
    margin-bottom: 30px;
}

.riwayat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    flex-wrap: wrap;
    gap: 12px;
}

.riwayat-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.riwayat-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-riwayat-count {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
}

.riwayat-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 12px;
    width: 260px;
}

.riwayat-search-box i {
    color: #94a3b8;
    font-size: 0.85rem;
}

.riwayat-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.85rem;
    color: #1e293b;
    width: 100%;
}

.riwayat-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.riwayat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    text-align: left;
}

.riwayat-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 12px 18px;
    border-bottom: 1.5px solid #e2e8f0;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.riwayat-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
}

.riwayat-table tr:hover td {
    background: #f8fafc;
}

.riwayat-mapel-badge {
    display: inline-block;
    padding: 3px 9px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 0.78rem;
    border-radius: 6px;
    border: 1px solid #dbeafe;
}

.riwayat-exam-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
    line-height: 1.3;
}

.riwayat-time-text {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
}

/* Badge Status Pengerjaan */
.badge-status-selesai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: #ecfdf5;
    color: #047857;
    font-weight: 700;
    font-size: 0.78rem;
    border: 1px solid #bfdbfe;
}

/* Badge Nilai Pending vs Terbit */
.score-badge-pending {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    min-width: 100px;
}

.score-badge-pending .score-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #64748b;
    line-height: 1;
}

.score-badge-pending .score-sub {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 2px;
}

.score-badge-published {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 8px;
    background: #ecfdf5;
    border: 1px solid #bfdbfe;
    min-width: 100px;
}

.score-badge-published .score-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1;
}

.score-badge-published .score-sub {
    font-size: 0.68rem;
    color: #047857;
    font-weight: 600;
    margin-top: 2px;
}

/* CBT Math Formula Badge in Rich Editor */
.cbt-math-formula {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 3px;
    background-color: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    vertical-align: middle;
    user-select: all;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.cbt-math-formula:hover {
    background-color: #e0f2fe;
    border-color: #0284c7;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.15);
}
.cbt-math-formula mjx-container {
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* CBT Start Exam Instructions Modal & Anti-Screenshot Blinder */
.cbt-instructions-dialog-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    animation: cbtDialogSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes cbtDialogSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#cbtScreenshotBlinder {
    animation: cbtBlinderFadeIn 0.1s ease forwards;
}

@keyframes cbtBlinderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Strict exam mode CSS protection against text selection / drag */
body.secure-exam-lock,
body.secure-exam-lock *:not(input):not(textarea) {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* ==========================================================================
   MODERN BUKU NILAI & GRADEBOOK SYSTEM (2026 SAAS UI)
   Reconstructed strictly matching User Reference Screenshots 1, 2, 3
   ========================================================================== */

/* Top Breadcrumb */
.buku-nilai-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.buku-nilai-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
}

.buku-nilai-breadcrumb .btn-breadcrumb-back {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.buku-nilai-breadcrumb .btn-breadcrumb-back:hover {
    background: #f1f5f9;
    color: #2563eb;
    border-color: #cbd5e1;
}

.buku-nilai-breadcrumb .breadcrumb-nav-path {
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #64748b;
}

.buku-nilai-breadcrumb .breadcrumb-parent {
    color: #475569;
    transition: color 0.15s;
}

.buku-nilai-breadcrumb .breadcrumb-parent:hover {
    color: #2563eb;
}

.buku-nilai-breadcrumb .breadcrumb-sep {
    color: #94a3b8;
    font-size: 0.8rem;
}

.buku-nilai-breadcrumb .breadcrumb-active {
    color: #2563eb;
    font-weight: 700;
}

/* Page Header Row */
.buku-nilai-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.buku-nilai-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin: 0;
}

.buku-nilai-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-buku-fullscreen {
    background: #0f172a;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-buku-fullscreen:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3);
}

.btn-buku-fullscreen.is-fullscreen {
    background: #dc2626 !important;
}

.btn-buku-fullscreen.is-fullscreen:hover {
    background: #b91c1c !important;
}

.btn-buku-toggle-sidebar {
    background: #ffffff;
    color: #334155;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 9px 16px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-buku-toggle-sidebar:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.btn-buku-export {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-buku-export:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.btn-buku-export:active {
    transform: translateY(0);
}

/* Fullscreen Mode Overlay for Buku Nilai */
#viewBukuNilaiDashboard.buku-nilai-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: #f8fafc !important;
    padding: 16px 24px 32px 24px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

#viewBukuNilaiDashboard.buku-nilai-fullscreen .buku-nilai-table-card {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* Lebar Penuh Ketika Buku Nilai Aktif */
.lms-main-content.buku-nilai-active {
    padding: 16px 20px 48px 20px !important;
}

#viewBukuNilaiDashboard {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Filter Card Bar */
.buku-nilai-filter-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 4px 16px rgba(0, 0, 0, 0.02);
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}

.buku-filter-grid {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.buku-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
}

.buku-filter-group.flex-grow {
    flex: 1;
    min-width: 240px;
}

.buku-filter-group.kkm-group {
    min-width: 110px;
    width: 110px;
}

.buku-kkm-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.buku-kkm-input {
    width: 100%;
    height: 42px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

.buku-kkm-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.buku-filter-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
}

.buku-select-wrap {
    position: relative;
    width: 100%;
}

.buku-select {
    width: 100%;
    height: 42px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 38px 0 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.buku-select:hover {
    border-color: #94a3b8;
}

.buku-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.buku-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.76rem;
    pointer-events: none;
}

.buku-status-badge {
    height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.buku-status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.buku-status-badge.opened {
    background: #ecfdf5;
    border: 1.5px solid #a7f3d0;
    color: #059669;
}

.buku-status-badge.opened:hover {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #047857;
    box-shadow: 0 3px 10px rgba(5, 150, 105, 0.15);
}

.buku-status-badge.locked {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
}

.buku-status-badge.locked:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.15);
}

/* Locked cell styles in Buku Nilai */
.buku-td-score.cell-locked {
    background: #f8fafc !important;
    color: #64748b !important;
    cursor: not-allowed !important;
    opacity: 0.9;
}

.buku-td-score.cell-locked:hover {
    background: #f1f5f9 !important;
}

.btn-buku-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Table Card - Lebar Penuh */
.buku-nilai-table-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
}

.buku-table-toolbar {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 12px;
}

.buku-toolbar-left {
    font-size: 0.86rem;
    color: #64748b;
    font-weight: 600;
}

.buku-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-buku-sync {
    background: #1d4ed8;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.btn-buku-sync:hover {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(29, 78, 216, 0.35);
}

.btn-buku-sync:active {
    transform: translateY(0);
}

.btn-buku-sync:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed;
    opacity: 0.8;
}

.btn-buku-save {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

.btn-buku-save:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

.btn-buku-save:disabled {
    background: #cbd5e1 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 0.85;
}

.btn-buku-add-col {
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 9px;
    padding: 8px 18px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
    transition: all 0.2s;
}

.btn-buku-add-col:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Buku Nilai Table Responsive - TAMPILAN PENUH TANPA DIBATASI TINGGI */
.buku-table-responsive {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible !important;
    max-height: none !important;
    min-height: auto !important;
    position: relative;
    border-radius: 0 0 14px 14px;
}

.buku-table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.buku-table-responsive::-webkit-scrollbar-track {
    background: #f8fafc;
}

.buku-table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.buku-table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.buku-main-table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    color: #1e293b;
    background: #ffffff;
    table-layout: auto;
}

.buku-main-table th,
.buku-main-table td {
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    padding: 10px 14px;
    white-space: nowrap;
}

.buku-main-table th:last-child,
.buku-main-table td:last-child {
    border-right: none;
}

/* Multi-Tier Headers */
.buku-th-sticky-no {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    background: #ffffff;
    width: 48px;
    text-align: center;
    font-weight: 700;
    color: #475569;
    border-right: 1.5px solid #cbd5e1 !important;
}

.buku-th-sticky-name {
    position: sticky;
    left: 48px;
    top: 0;
    z-index: 10;
    background: #ffffff;
    min-width: 230px;
    text-align: left;
    padding-left: 18px !important;
    font-weight: 700;
    color: #475569;
    border-right: 2px solid #cbd5e1 !important;
}

.buku-th-category {
    background: #eff6ff !important;
    color: #1e40af !important;
    text-align: center;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 10px 14px;
    letter-spacing: 0.02em;
    border-bottom: 1.5px solid #bfdbfe !important;
    position: sticky;
    top: 0;
    z-index: 5;
}

.buku-th-col-header {
    background: #ffffff;
    padding: 12px 14px !important;
    text-align: center;
    vertical-align: middle;
    position: sticky;
    top: 41px;
    z-index: 5;
    border-bottom: 2px solid #cbd5e1 !important;
    min-width: 170px;
}

.buku-col-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.buku-col-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.82rem;
    line-height: 1.25;
    max-width: 220px;
    white-space: normal;
    text-align: center;
}

.buku-col-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    display: inline-block;
    letter-spacing: 0.02em;
}

.buku-col-badge.online {
    background: #ecfeff;
    color: #0891b2;
    border: 1px solid #a5f3fc;
}

.buku-col-badge.manual {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.buku-col-checkboxes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
    margin-top: 4px;
}

.buku-col-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
}

.buku-col-checkboxes input[type="checkbox"] {
    accent-color: #2563eb;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.btn-col-action-kebab {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    transition: color 0.15s;
}

.btn-col-action-kebab:hover {
    color: #ef4444;
    background: #fef2f2;
}

/* Body Rows */
.buku-td-sticky-no {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ffffff;
    text-align: center;
    font-weight: 700;
    color: #0f172a;
    width: 48px;
    border-right: 1.5px solid #cbd5e1 !important;
}

.buku-td-sticky-name {
    position: sticky;
    left: 48px;
    z-index: 2;
    background: #ffffff;
    min-width: 230px;
    text-align: left;
    padding-left: 18px !important;
    font-weight: 600;
    color: #0f172a;
    border-right: 2px solid #cbd5e1 !important;
}

.buku-mobile-nis,
.buku-main-table .buku-mobile-nis,
.buku-td-sticky-name .buku-mobile-nis {
    display: none !important;
}

.buku-main-table tbody tr:hover td {
    background-color: #f8fafc;
}

.buku-main-table tbody tr:hover .buku-td-sticky-no,
.buku-main-table tbody tr:hover .buku-td-sticky-name {
    background-color: #f1f5f9;
}

/* Cell Styling */
.buku-td-score {
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    color: #0f172a;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}

/* Kolom CBT (Penilaian Online): Terkunci Otomatis */
.buku-td-score.cbt-score-cell {
    background-color: #f8fafc;
    color: #0369a1;
    cursor: default;
}

.buku-td-score.cbt-score-cell:hover {
    background-color: #f0f9ff !important;
}

.cbt-lock-icon {
    font-size: 0.68rem;
    color: #94a3b8;
    margin-left: 4px;
    opacity: 0.65;
    vertical-align: middle;
}

/* Kolom Manual: BISA DIEDIT MANUAL OLEH GURU */
.buku-td-score.manual-score-cell.editable-cell {
    cursor: pointer;
    background-color: #ffffff;
    color: #0f172a;
    border-left: 1px solid #e2e8f0;
}

.buku-td-score.manual-score-cell.editable-cell:hover {
    background-color: #eff6ff !important;
    color: #2563eb;
    box-shadow: inset 0 0 0 1.5px #3b82f6;
}

.cell-edit-icon {
    font-size: 0.65rem;
    color: #3b82f6;
    margin-left: 5px;
    opacity: 0;
    transition: opacity 0.15s ease;
    vertical-align: middle;
}

.buku-td-score.manual-score-cell.editable-cell:hover .cell-edit-icon {
    opacity: 0.75;
}

.buku-td-score.empty-score {
    color: #94a3b8 !important;
    font-weight: 500;
}

/* Animasi Flash Hijau Ketika Nilai Diupdate */
@keyframes cellFlashGreen {
    0% { background-color: #bbf7d0; }
    100% { background-color: transparent; }
}

.cell-flash-updated {
    animation: cellFlashGreen 0.6s ease-out;
}

/* Input Inline Saat Mengedit */
.buku-inline-score-input {
    width: 68px;
    height: 32px;
    text-align: center;
    font-size: 0.94rem;
    font-weight: 800;
    color: #1d4ed8;
    border: 2px solid #2563eb;
    border-radius: 7px;
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Kolom Rekapitulasi Ringkasan Akhir (NA, Predikat, Status) */
.buku-th-summary-group {
    background: #f0fdf4 !important;
    color: #15803d !important;
    text-align: center;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 10px 14px;
    letter-spacing: 0.02em;
    border-bottom: 1.5px solid #bbf7d0 !important;
    border-left: 2px solid #cbd5e1 !important;
    position: sticky;
    top: 0;
    z-index: 5;
}

.buku-th-col-summary {
    background: #f8fafc;
    padding: 10px 12px !important;
    text-align: center;
    vertical-align: middle;
    position: sticky;
    top: 41px;
    z-index: 5;
    font-weight: 700;
    font-size: 0.78rem;
    color: #334155;
    border-bottom: 2px solid #cbd5e1 !important;
}

.buku-th-col-summary.buku-th-na {
    min-width: 100px;
    border-left: 2px solid #cbd5e1 !important;
    color: #1e3a8a;
    background: #eff6ff;
}

.buku-th-col-summary.buku-th-predikat {
    min-width: 80px;
    color: #047857;
    background: #ecfdf5;
}

.buku-th-col-summary.buku-th-status {
    min-width: 110px;
    color: #475569;
    background: #f8fafc;
}

.buku-td-summary {
    text-align: center;
    vertical-align: middle;
    background: #f8fafc;
}

.buku-td-summary.buku-td-na {
    border-left: 2px solid #cbd5e1 !important;
    font-weight: 800;
    font-size: 0.95rem;
    color: #0f172a;
}

.na-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.88rem;
}

.na-pill.tuntas {
    background: #dcfce7;
    color: #15803d;
}

.na-pill.remedial {
    background: #fee2e2;
    color: #b91c1c;
}

.buku-predikat-badge {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.88rem;
}

.buku-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 9999px;
}

.buku-status-pill.tuntas {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.buku-status-pill.remedial {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* Footer Statistik Rekapitulasi (tfoot) */
.buku-tfoot {
    border-top: 2px solid #94a3b8;
}

.buku-tfoot-row td {
    padding: 8px 12px !important;
    font-size: 0.82rem;
    font-weight: 700;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.buku-tfoot-sticky-no {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #f1f5f9 !important;
    color: #334155;
    font-weight: 800;
    text-align: left;
    padding-left: 18px !important;
    border-right: 2px solid #cbd5e1 !important;
}

.buku-tfoot-cell {
    text-align: center;
    color: #1e293b;
}

.buku-tfoot-cell.buku-tfoot-na {
    border-left: 2px solid #cbd5e1 !important;
    color: #2563eb;
    font-weight: 800;
}

.buku-tfoot-row.avg-row td {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 800;
}

.buku-tfoot-row.avg-row .buku-tfoot-sticky-no {
    background: #dbeafe !important;
    color: #1e40af;
}

/* Pulse Animation on Save Button when Unsaved Changes Exist */
@keyframes unsavedButtonPulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.btn-buku-save.btn-unsaved-pulse {
    animation: unsavedButtonPulse 1.8s infinite;
    background: #2563eb !important;
    color: #ffffff !important;
    opacity: 1 !important;
    cursor: pointer !important;
}


/* ==========================================================================
   MODAL TAMBAH NILAI (2-STEP STEPPER WIZARD)
   Strictly matched with User Screenshots 2 & 3
   ========================================================================== */
.buku-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    animation: bukuOverlayFadeIn 0.2s ease-out;
}

@keyframes bukuOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.buku-modal-card {
    background: #ffffff;
    width: 100%;
    max-width: 520px;
    border-radius: 18px;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: bukuModalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bukuModalSlideUp {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.buku-modal-header {
    padding: 22px 26px 14px 26px;
    border-bottom: 1px solid #f1f5f9;
}

.buku-modal-title {
    font-size: 1.28rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin: 0;
}

/* Stepper Component */
.buku-stepper-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 30px 10px 30px;
    position: relative;
}

.buku-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 2;
    position: relative;
    min-width: 110px;
}

.buku-step-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #94a3b8;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.buku-step-item.active .buku-step-circle {
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.buku-step-item.completed .buku-step-circle {
    background: #2563eb;
}

.buku-step-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: #64748b;
    text-align: center;
}

.buku-step-item.active .buku-step-label {
    color: #0f172a;
    font-weight: 800;
}

.buku-step-item.completed .buku-step-label {
    color: #0f172a;
    font-weight: 700;
}

.buku-step-line {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 -20px 24px -20px;
    z-index: 1;
    transition: background 0.25s;
}

.buku-step-line.active {
    background: #2563eb;
}

/* Step Content */
.buku-step-content {
    padding: 14px 26px 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.buku-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.buku-form-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: #1e293b;
}

.required-star {
    color: #ef4444;
    font-weight: 800;
}

.buku-form-input {
    height: 42px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}

.buku-form-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.buku-form-input.readonly {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
    cursor: default;
}

.buku-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.btn-buku-modal-cancel {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #475569;
    border-radius: 9px;
    padding: 9px 22px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-buku-modal-cancel:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
}

.btn-buku-modal-primary {
    background: #2563eb;
    border: none;
    color: #ffffff;
    border-radius: 9px;
    padding: 9px 24px;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    transition: all 0.15s;
}

.btn-buku-modal-primary:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* Step 2 Nilai Murid Table */
.buku-step2-desc {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
    margin: 0 0 6px 0;
}

.buku-quick-fill-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.quick-fill-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-quick-fill {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-quick-fill:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #93c5fd;
}

.buku-step2-table-wrap {
    max-height: 310px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.buku-step2-table-wrap::-webkit-scrollbar {
    width: 6px;
}

.buku-step2-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.buku-step2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.buku-step2-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1.5px solid #e2e8f0;
    z-index: 2;
}

.buku-step2-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.buku-step2-table tr:last-child td {
    border-bottom: none;
}

.buku-step2-table tr:hover td {
    background-color: #f8fafc;
}

.buku-step2-input {
    width: 96px;
    height: 36px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    text-align: center;
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
    outline: none;
    transition: all 0.15s;
    font-family: inherit;
}

.buku-step2-input:focus {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.buku-step2-input::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* ==========================================================================
   THEME-ALIGNED ALERT / DIALOG / POPUP / TOAST STYLES
   Teal School LMS Theme (#2563eb) — 2026
   ========================================================================== */

/* ── Dialog Overlay animation ─────────────────────────────── */
.lms-dialog-overlay { animation: dialogFadeIn 0.18s ease-out; }
@keyframes dialogFadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Dialog Variant: Success ─────────────────────────────── */
.lms-dialog-card.dialog-success .lms-dialog-icon-circle { background: #eff6ff; color: var(--primary-teal); }
.lms-dialog-card.dialog-success .btn-lms-dialog-primary { background: var(--primary-teal); }
.lms-dialog-card.dialog-success .btn-lms-dialog-primary:hover { background: var(--primary-dark); box-shadow: 0 6px 16px rgba(37, 99, 235,0.3); }
.lms-dialog-card.dialog-success .lms-dialog-badge { color: var(--primary-teal); }

/* ── Dialog Variant: Danger ──────────────────────────────── */
.lms-dialog-card.dialog-danger .lms-dialog-icon-circle { background: #fef2f2; color: #ef4444; }
.lms-dialog-card.dialog-danger .btn-lms-dialog-primary { background: #ef4444; }
.lms-dialog-card.dialog-danger .btn-lms-dialog-primary:hover { background: #dc2626; box-shadow: 0 6px 16px rgba(239,68,68,0.3); }
.lms-dialog-card.dialog-danger .lms-dialog-badge { color: #ef4444; }
.lms-dialog-card.dialog-danger .lms-dialog-title { color: #991b1b; }

/* ── Dialog Variant: Warning ─────────────────────────────── */
.lms-dialog-card.dialog-warning .lms-dialog-icon-circle { background: #fffbeb; color: #f59e0b; }
.lms-dialog-card.dialog-warning .btn-lms-dialog-primary { background: #f59e0b; color: #000; }
.lms-dialog-card.dialog-warning .btn-lms-dialog-primary:hover { background: #d97706; }
.lms-dialog-card.dialog-warning .lms-dialog-badge { color: #b45309; }

/* ── Dialog Variant: Info ────────────────────────────────── */
.lms-dialog-card.dialog-info .lms-dialog-icon-circle { background: #eff6ff; color: #3b82f6; }
.lms-dialog-card.dialog-info .btn-lms-dialog-primary { background: #3b82f6; }
.lms-dialog-card.dialog-info .btn-lms-dialog-primary:hover { background: #2563eb; }
.lms-dialog-card.dialog-info .lms-dialog-badge { color: #1d4ed8; }

/* ── Toast Pill Variants ─────────────────────────────────── */
.lms-toast-pill.toast-success { background: linear-gradient(135deg, var(--primary-dark), var(--primary-teal)); box-shadow: 0 8px 24px rgba(37, 99, 235,0.4); }
.lms-toast-pill.toast-error   { background: linear-gradient(135deg, #dc2626, #ef4444); box-shadow: 0 8px 24px rgba(239,68,68,0.4); }
.lms-toast-pill.toast-warning { background: linear-gradient(135deg, #d97706, #f59e0b); color: #000; box-shadow: 0 8px 24px rgba(245,158,11,0.4); }
.lms-toast-pill.toast-info    { background: linear-gradient(135deg, #1d4ed8, #3b82f6); box-shadow: 0 8px 24px rgba(59,130,246,0.4); }

/* ── Inline Alert Banners ────────────────────────────────── */
.lms-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    font-size: 0.875rem; font-weight: 600; line-height: 1.5;
    margin-bottom: 14px; border: 1.5px solid transparent;
}
.lms-alert-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.lms-alert-text { flex: 1; }
.lms-alert-text p { margin: 0; font-weight: 500; opacity: 0.85; font-size: 0.82rem; margin-top: 2px; }
.lms-alert.alert-success { background: #eff6ff; border-color: rgba(37, 99, 235,0.3); color: var(--primary-dark); }
.lms-alert.alert-danger   { background: #fef2f2; border-color: rgba(239,68,68,0.3); color: #991b1b; }
.lms-alert.alert-warning  { background: #fffbeb; border-color: rgba(245,158,11,0.3); color: #92400e; }
.lms-alert.alert-info     { background: #eff6ff; border-color: rgba(59,130,246,0.3); color: #1e40af; }

/* ── Modal Header Standard (Clean & High Contrast) ───────── */
.lms-modal-header {
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 20px 20px 0 0;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}
.lms-modal-title    { color: #0f172a !important; font-weight: 800; font-size: 1.15rem; }
.lms-modal-subtitle { color: #64748b !important; font-size: 0.82rem; margin-top: 2px; }
.btn-close-modal,
.lms-modal-close-btn {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #64748b !important;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-close-modal:hover,
.lms-modal-close-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ── Riwayat Penilaian Grouped by Subject & Teacher Feedback ── */
.riwayat-mapel-pills-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    scrollbar-width: thin;
}
.riwayat-mapel-pills-bar::-webkit-scrollbar {
    height: 4px;
}
.riwayat-mapel-pills-bar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.mapel-pill-btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.mapel-pill-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #f8faff;
}
.mapel-pill-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.mapel-pill-badge {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}
.mapel-pill-btn.active .mapel-pill-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.riwayat-subject-groups-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.riwayat-subject-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}
.riwayat-subject-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.riwayat-subject-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.riwayat-subj-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.riwayat-subj-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ccfbf1, #bfdbfe);
    color: #1e40af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 2px 6px rgba(29, 78, 216, 0.15);
}
.riwayat-subj-title-text {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
}
.riwayat-subj-meta-sub {
    font-size: 0.78rem;
    color: #64748b;
    font-weight: 600;
    margin-top: 2px;
}
.riwayat-subj-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.riwayat-avg-badge {
    background: #ecfdf5;
    border: 1px solid #bfdbfe;
    color: #047857;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.riwayat-feedback-callout {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 320px;
    transition: all 0.2s;
}
.riwayat-feedback-callout:hover {
    background: #fef3c7;
    border-color: #fcd34d;
}
.feedback-callout-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.feedback-callout-text {
    font-size: 0.82rem;
    color: #78350f;
    font-weight: 600;
    line-height: 1.4;
    font-style: italic;
    word-break: break-word;
}
.feedback-empty-pill {
    color: #94a3b8;
    font-size: 0.8rem;
    font-style: italic;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-riwayat-detail {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.btn-riwayat-detail:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* ── Buku Nilai Buttons ──────────────────────────────────── */
.btn-buku-modal-primary {
    background: linear-gradient(135deg, var(--primary-teal), var(--primary-dark));
    color: #fff; border: none; padding: 11px 24px; border-radius: 12px;
    font-weight: 700; font-size: 0.88rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(37, 99, 235,0.3);
}
.btn-buku-modal-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235,0.4); }
.btn-buku-modal-secondary {
    background: #f1f5f9; color: #475569;
    border: 1.5px solid #e2e8f0; padding: 10px 20px; border-radius: 12px;
    font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: all 0.2s;
}
.btn-buku-modal-secondary:hover { background: var(--primary-light); border-color: var(--primary-teal); color: var(--primary-dark); }

/* ── Buku Nilai Table Header Accent ─────────────────────── */
.buku-main-table thead th { background: linear-gradient(180deg, #f8faff, #eff6ff); color: var(--primary-dark); border-bottom: 2px solid var(--primary-teal); }
.buku-th-category { background: var(--primary-teal) !important; color: #fff !important; }

/* ── Inline Score Input ──────────────────────────────────── */
.buku-inline-score-input {
    width: 64px; padding: 4px 6px;
    border: 2px solid var(--primary-teal); border-radius: 8px;
    font-size: 0.88rem; font-weight: 700; text-align: center; outline: none;
    background: #f8faff; color: var(--primary-dark);
    box-shadow: 0 0 0 3px rgba(37, 99, 235,0.15);
}
.buku-inline-score-input:focus { background: #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235,0.22); }

/* ── Save Button ─────────────────────────────────────────── */
#btnBukuNilaiSave {
    background: linear-gradient(135deg, var(--primary-teal), var(--primary-dark));
    color: #fff; border: none; box-shadow: 0 4px 14px rgba(37, 99, 235,0.35);
    transition: transform 0.15s, box-shadow 0.2s;
}
#btnBukuNilaiSave:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235,0.45); }
#btnBukuNilaiSave:disabled { background: #cbd5e1; box-shadow: none; cursor: not-allowed; }

/* ── Scrollbar Theme ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(37, 99, 235,0.3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-teal); }

/* ==========================================================================
   MOBILE RESPONSIVE — COMPLETE OVERHAUL
   ========================================================================== */


/* ============================================================
   RESPONSIVE SYSTEM — BARUNA LMS 2026
   Breakpoints: 1200px · 1024px · 900px · 768px · 640px · 480px · 360px
   ============================================================ */

/* ── 1200px: widescreen nudge ─────────────────────────────── */
@media (max-width: 1200px) {
    .lms-sidebar { width: 210px; }
}

/* ── 1024px: tablet landscape ────────────────────────────── */
@media (max-width: 1024px) {
    .lms-sidebar { width: 190px; }
    .lms-topbar  { padding: 0 18px; }
    .lms-page-content, .view-section { padding: 18px 16px; }

    /* Dashboard stat grid */
    .stats-grid-4 { grid-template-columns: repeat(2, 1fr); }

    /* Exam cards grid */
    .exam-card-grid { grid-template-columns: repeat(2, 1fr); }

    /* Laporan & Buku Nilai tables */
    .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table-responsive-wrapper table { min-width: 640px; }
}

/* ── 900px: small tablet ──────────────────────────────────── */
@media (max-width: 900px) {
    /* Penilaian split layout */
    .penilaian-layout       { flex-direction: column; gap: 14px; }
    .penilaian-classes-sidebar { width: 100%; max-height: 220px; overflow-y: auto; flex-direction: row; flex-wrap: wrap; }
    .class-item-sidebar     { flex: 1 1 140px; }

    /* Buku Nilai  */
    .buku-nilai-topbar       { flex-direction: column; gap: 10px; padding: 12px 14px; }
    .buku-nilai-filters-row  { flex-direction: column; gap: 8px; }
    .buku-nilai-filters-row select { width: 100%; }

    /* Grading sidebar */
    .grading-two-col         { flex-direction: column-reverse; }
    .grading-sidebar-sticky  { width: 100%; position: static; max-height: none; }
}

/* ── 768px: tablet portrait / large phone ────────────────── */
@media (max-width: 768px) {

    /* ▸ App shell */
    .lms-app-frame { flex-direction: column; height: 100dvh; }

    /* ▸ Sidebar desktop disembunyikan sepenuhnya di mobile karena sudah ada #lmsMobileBottomNav */
    .lms-sidebar {
        display: none !important;
    }

    /* ▸ Main content */
    .lms-main-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 72px;
        order: 1;
        height: calc(100dvh - 72px);
        min-height: 0;
    }

    /* ▸ Topbar styles unified in mobile master block below */

    /* ▸ Page content */
    .lms-page-content, .view-section { padding: 14px 12px; }
    .page-title    { font-size: 1.05rem; }
    .page-subtitle { font-size: 0.77rem; }
    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-header-actions { width: 100%; }
    .page-header-actions button { width: 100%; justify-content: center; }

    /* ▸ Stat grids */
    .stats-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stats-grid-3 { grid-template-columns: 1fr 1fr;       gap: 10px; }

    /* ▸ Stat card */
    .stat-card       { padding: 14px 12px; gap: 10px; }
    .stat-card-icon  { width: 40px; height: 40px; font-size: 1.1rem; }
    .stat-card-value { font-size: 1.5rem; }
    .stat-card-label { font-size: 0.72rem; }

    /* ▸ Exam card grid */
    .exam-card-grid { grid-template-columns: 1fr; gap: 12px; }

    /* ▸ Active exam card */
    .cbt-active-exam-item { padding: 14px 12px; }
    .active-exam-top {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
    }
    .active-exam-meta-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }
    .active-exam-actions { margin-top: 4px; }
    .btn-active-exam-action {
        width: 100%;
        height: 42px;
        justify-content: center;
        font-size: 0.85rem;
        border-radius: 10px;
    }

    /* ▸ Dialog → bottom sheet */
    .lms-dialog-overlay { padding: 8px; align-items: flex-end; }
    .lms-dialog-card {
        border-radius: 22px 22px 14px 14px;
        padding: 20px 16px 28px;
        max-width: 100%;
        animation: dialogSlideUp 0.25s cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes dialogSlideUp {
        from { opacity: 0; transform: translateY(48px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .lms-dialog-body  { max-height: 50vh; overflow-y: auto; }
    .lms-dialog-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }
    .btn-lms-dialog-primary,
    .btn-lms-dialog-cancel {
        width: 100%;
        justify-content: center;
        padding: 13px 16px;
        font-size: 0.9rem;
    }

    /* ▸ Modal → bottom sheet */
    .lms-modal-backdrop,
    .lms-modal-overlay { padding: 0; align-items: flex-end; }
    .lms-modal-backdrop .lms-modal-card,
    .lms-modal-overlay  .lms-modal-card {
        border-radius: 22px 22px 0 0;
        max-width: 100%;
        width: 100%;
        max-height: 94vh;
        overflow-y: auto;
    }
    .lms-modal-header { border-radius: 22px 22px 0 0; padding: 16px 18px; }
    .lms-modal-body   { padding: 14px 16px; }
    .lms-modal-footer { padding: 12px 16px 28px; flex-direction: column; gap: 8px; }
    .lms-modal-footer button { width: 100%; justify-content: center; }
    .lms-modal-title  { font-size: 0.97rem; }

    /* ▸ Toast → above bottom nav */
    .lms-toast-container {
        top: auto !important;
        bottom: 80px !important;
        left: 10px;
        right: 10px;
        transform: none !important;
        width: auto !important;
    }
    .lms-toast-pill  { width: 100%; border-radius: 14px; padding: 11px 14px; font-size: 0.88rem; }

    /* ▸ Tables */
    .table-responsive-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
    .table-responsive-wrapper table { min-width: 520px; }

    /* ▸ Buku Nilai */
    .buku-nilai-topbar       { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
    .buku-nilai-topbar-title { font-size: 0.98rem; }
    .buku-nilai-filters-row  { flex-direction: column; gap: 8px; }
    .buku-nilai-filters-row select { width: 100%; }
    .buku-nilai-actions      { flex-wrap: wrap; gap: 8px; }
    .buku-nilai-actions button { flex: 1 1 auto; min-width: 120px; font-size: 0.82rem; padding: 9px 12px; }
    .buku-main-table         { font-size: 0.78rem; }
    .buku-th-sticky-name,
    .buku-td-sticky-name     { max-width: 120px; min-width: 90px; }
    .buku-th-col-header      { min-width: 88px; }

    /* ▸ Buku Nilai Wizard */
    .buku-wiz-steps           { flex-direction: column; gap: 6px; }
    .buku-modal-footer        { flex-direction: column; gap: 8px; padding: 14px 16px 28px; }
    .btn-buku-modal-primary,
    .btn-buku-modal-secondary { width: 100%; justify-content: center; }

    /* ▸ Laporan */
    .laporan-filter-bar { flex-direction: column; gap: 8px; }
    .laporan-filter-bar select,
    .laporan-filter-bar input { width: 100%; }
    .laporan-header-actions   { width: 100%; }
    .laporan-header-actions button { flex: 1; justify-content: center; }

    /* ▸ Penilaian teacher layout */
    .penilaian-layout { flex-direction: column; gap: 12px; }
    .penilaian-classes-sidebar {
        width: 100%; max-height: 180px; overflow-y: auto;
        flex-direction: row; flex-wrap: wrap; gap: 6px;
        padding: 10px;
    }
    .class-item-sidebar { flex: 1 1 120px; }

    /* ▸ Alert inline */
    .lms-alert { padding: 10px 12px; font-size: 0.83rem; border-radius: 10px; }
}

/* ── 640px: small phone landscape ────────────────────────── */
@media (max-width: 640px) {
    .stats-grid-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
    .exam-card-grid { grid-template-columns: 1fr; }
    .page-title { font-size: 1rem; }

    /* CBT navigator */
    .soal-number-grid { grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .soal-number-btn  { width: 38px; height: 38px; font-size: 0.8rem; }

    /* Form controls */
    .form-row-2cols { flex-direction: column; gap: 10px; }
    .form-row-2cols > * { width: 100%; }
}

/* ── 480px: small phone portrait ─────────────────────────── */
@media (max-width: 480px) {
    .lms-dialog-card  { padding: 18px 14px 26px; }
    .lms-dialog-title { font-size: 0.98rem; }
    .lms-dialog-body  { font-size: 0.84rem; }
    .lms-dialog-icon-circle { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 12px; }
    .lms-dialog-header { gap: 10px; }

    .stats-grid-4, .stats-grid-3 { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card-value { font-size: 1.4rem; }

    .buku-main-table         { font-size: 0.72rem; }
    .buku-th-sticky-name,
    .buku-td-sticky-name     { max-width: 90px; min-width: 76px; font-size: 0.72rem; }
    .buku-th-col-header      { min-width: 76px; font-size: 0.72rem; }
    .buku-td-score           { padding: 6px 8px; font-size: 0.76rem; }

    .soal-number-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
    .soal-number-btn  { width: 36px; height: 36px; font-size: 0.78rem; }

    .lms-toast-pill  { font-size: 0.83rem; padding: 10px 12px; }

    .lms-page-content, .view-section { padding: 10px; }

    /* Bottom nav */
    .nav-link-item { min-width: 54px; padding: 7px 6px; }
    .nav-link-item i    { font-size: 1.05rem; }
    .nav-link-item span { font-size: 0.57rem; }

    .active-exam-meta-grid { grid-template-columns: 1fr; }
    .active-meta-cell      { font-size: 0.78rem; }

    .btn-active-exam-action { height: 44px; font-size: 0.87rem; }

    /* Topbar padding standardized in master mobile block */
}

/* ── 360px: very small phone ─────────────────────────────── */
@media (max-width: 360px) {
    .lms-dialog-card  { padding: 16px 12px 22px; }
    .lms-dialog-title { font-size: 0.93rem; }

    .nav-link-item { min-width: 46px; padding: 6px 4px; }
    .nav-link-item span { font-size: 0.5rem; }

    .soal-number-grid { grid-template-columns: repeat(5, 1fr); }
    .soal-number-btn  { width: 34px; height: 34px; font-size: 0.75rem; }

    .stat-card-value { font-size: 1.25rem; }
    .stat-card-icon  { width: 36px; height: 36px; font-size: 1rem; }

    .lms-page-content, .view-section { padding: 8px; }
}

/* ── Validasi Pilihan Jawaban Sama Persis / Duplikat ────── */
.editor-opt-row-box.has-duplicate-opt .editor-opt-rich-input,
.editor-opt-rich-input.editor-opt-error-duplicate {
    border-color: #ef4444 !important;
    background-color: #fff1f2 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
    animation: pulseDupShake 0.4s ease-in-out;
}

.opt-dup-warning-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #f87171;
    padding: 3px 10px;
    border-radius: 6px;
    margin-top: 6px;
    animation: fadeInOptDup 0.2s ease-out;
}

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

@keyframes pulseDupShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ==========================================================================
   THEMATIC SOFT UI SYSTEM (PENILAIAN, MATERI, LAPORAN, DASHBOARD)
   ========================================================================== */

/* 1. Global Academic Year (Tahun Akademik) Topbar Badge */
.topbar-ta-badge-wrap {
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
}

.lms-academic-year-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1.5px solid #bfdbfe;
    padding: 5px 14px;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.08);
    transition: all 0.2s ease;
}

.lms-academic-year-badge:hover {
    border-color: #93c5fa;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.16);
}

.lms-academic-year-badge i {
    color: #2563eb !important;
    font-size: 0.9rem;
}

.global-ta-select {
    border: none;
    background: transparent;
    font-family: var(--font-main, sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e3a8a;
    outline: none;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.global-ta-select:focus {
    background: #ffffff;
}

/* 2. Penilaian & Leger Tahun Akademik Filter Pill */
.penilaian-ta-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 4px 10px;
    transition: all 0.2s ease;
}

.penilaian-ta-wrap:hover {
    border-color: #059669;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
}

.tag-pill.tag-ta {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
    font-weight: 700 !important;
}

/* 3. Reset Pengumpulan Siswa Action Button */
.btn-sub-toolbar.btn-sub-danger {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1.5px solid #fecdd3 !important;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(225, 29, 72, 0.05);
}

.btn-sub-toolbar.btn-sub-danger:hover {
    background: #ffe4e6 !important;
    border-color: #fda4af !important;
    color: #be123c !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.18);
}

.btn-sub-toolbar.btn-sub-danger:active {
    transform: translateY(0);
}

/* 4. Mute Submission Notifications Button State */
.btn-sub-toolbar.btn-sub-muted-active {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #c2410c !important;
    font-weight: 700;
}

/* 5. Thematic Menu Color Soft Transitions */
#lmsAppView {
    transition: background-color 0.35s ease;
}

/* Menu: Penilaian (Unified Royal Blue Theme Accent) */
#lmsAppView[data-active-menu="penilaian"] .page-heading {
    color: #1e3a8a;
}

#lmsAppView[data-active-menu="penilaian"] .btn-buat-penilaian-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* Status Tabs in Penilaian: Modern High-Contrast Segmented Active States */
#lmsAppView[data-active-menu="penilaian"] .status-tab-btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

#lmsAppView[data-active-menu="penilaian"] .status-tab-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
}

#lmsAppView[data-active-menu="penilaian"] .status-tab-btn .status-tab-badge {
    background: #f1f5f9;
    color: #475569;
    font-weight: 800;
}

#lmsAppView[data-active-menu="penilaian"] .status-tab-btn.active {
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 700 !important;
}

#lmsAppView[data-active-menu="penilaian"] .status-tab-btn.active i {
    color: #ffffff !important;
}

#lmsAppView[data-active-menu="penilaian"] .status-tab-btn.active .status-tab-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    font-weight: 800 !important;
}

/* Tab 1: Saat ini (Vibrant Royal Blue - Aktif/Sedang Berlangsung) */
#lmsAppView[data-active-menu="penilaian"] #tabStatusSaatIni.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32) !important;
}

/* Tab 2: Terjadwal (Sky / Ocean Blue) */
#lmsAppView[data-active-menu="penilaian"] #tabStatusTerjadwal.active {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.32) !important;
}

/* Tab 3: Selesai (Slate Indigo / Steel) */
#lmsAppView[data-active-menu="penilaian"] #tabStatusSelesai.active {
    background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
    box-shadow: 0 4px 14px rgba(71, 85, 105, 0.32) !important;
}

/* Tab 4: Draf (Warm Amber) */
#lmsAppView[data-active-menu="penilaian"] #tabStatusDraf.active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.32) !important;
}

/* Menu: Dashboard (Unified Blue Theme Accent) */
#lmsAppView[data-active-menu="dashboard"] .page-heading {
    color: #1e3a8a;
}

#lmsAppView[data-active-menu="dashboard"] .btn-buat-penilaian-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

/* Menu: Materi & Bank Soal (Unified Blue Theme Accent) */
#lmsAppView[data-active-menu="materi"] .page-heading {
    color: #1e3a8a;
}

#lmsAppView[data-active-menu="materi"] .btn-buat-penilaian-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3) !important;
}

#lmsAppView[data-active-menu="materi"] .bank-tab-btn.active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

#lmsAppView[data-active-menu="materi"] .btn-create-bank-btn {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}

#lmsAppView[data-active-menu="materi"] .btn-create-bank-btn i {
    color: #ffffff !important;
}

#lmsAppView[data-active-menu="materi"] .bank-item-row.active {
    background: #eff6ff !important;
    border-left-color: #2563eb !important;
}

/* Menu: Laporan & Leger (Unified Blue Theme Accent) */
#lmsAppView[data-active-menu="laporan"] .laporan-header-title {
    color: #1e3a8a;
}

#lmsAppView[data-active-menu="laporan"] .laporan-menu-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

#lmsAppView[data-active-menu="laporan"] .laporan-menu-card-icon {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
}

#lmsAppView[data-active-menu="laporan"] .btn-leger-save {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
}

/* Clean, soft look for all tables and cards */
.leger-table-card,
.buku-nilai-filter-card,
.riwayat-penilaian-card,
.submission-meta-card {
    border: 1px solid rgba(226, 232, 240, 0.85) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

/* ==========================================================================
   LMS MOBILE RECONSTRUCTION: ANTI-TABLE RESPONSIVE CARDS & HEADER OPTIMIZATION
   Target: Smartphone & Tablet Portrait (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
    /* ----------------------------------------------------------------------
       1. LMS TOPBAR / HEADER MOBILE OPTIMIZATION
       - Hilangkan Tahun Ajaran di Header agar tidak memakan ruang & tumpuk
       - Optimalkan tombol switch SMARTAPP & profil user
       ---------------------------------------------------------------------- */
    .topbar-ta-badge-wrap,
    .lms-academic-year-badge {
        display: none !important;
    }

    .lms-topbar {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: calc(100% + 24px) !important;
        height: 56px !important;
        min-height: 56px !important;
        max-height: 56px !important;
        margin: 0 -12px 14px -12px !important;
        padding: 0 14px !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95) !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
        gap: 6px !important;
    }

    .mobile-brand-title {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.5px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        color: #0f172a !important;
        flex-shrink: 0 !important;
    }

    .mobile-brand-title span {
        color: #0f172a !important;
    }

    .mobile-brand-title strong {
        color: #2563eb !important;
    }

    .topbar-user-area {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        flex: 1 !important;
        justify-content: flex-end !important;
    }

    .btn-switch-smartapp {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(37, 99, 235, 0.08) !important;
        border: 1px solid rgba(37, 99, 235, 0.22) !important;
        color: #2563eb !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }

    .btn-switch-smartapp:active {
        transform: scale(0.92) !important;
    }

    .btn-switch-smartapp .btn-switch-text {
        display: none !important;
    }

    /* Keterangan Foto Profil Pengguna (Sesuai Tema LMS: Nama Gelap & Role Badge Ungu/Biru) */
    .topbar-user-info {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
    }

    .topbar-user-info .user-avatar-circle {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        font-size: 0.78rem !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2) !important;
    }

    .topbar-user-info .user-meta-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        text-align: left !important;
        min-width: 0 !important;
        max-width: 82px !important;
        flex-shrink: 1 !important;
    }

    .topbar-user-info .user-name {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        width: 100% !important;
        max-width: 82px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.2 !important;
    }

    .topbar-user-info .user-role-label {
        display: flex !important;
        align-items: center !important;
        margin-top: 1.5px !important;
        max-width: 82px !important;
    }

    .topbar-user-info .badge,
    .topbar-user-info .lms-header-role-badge {
        font-size: 0.62rem !important;
        padding: 1.5px 6px !important;
        color: #ffffff !important;
        background: #4f46e5 !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        max-width: 82px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        box-shadow: 0 1px 3px rgba(79, 70, 229, 0.25) !important;
    }

    .topbar-user-info .lms-header-role-badge i {
        color: #38bdf8 !important;
        font-size: 0.70rem !important;
        margin-left: 2px !important;
    }

    .topbar-user-info .lms-header-role-badge i.icon-telegram-unverified,
    .topbar-user-info .lms-header-role-badge i.fa-circle-xmark {
        color: #ef4444 !important;
    }

    @media (min-width: 410px) and (max-width: 768px) {
        .topbar-user-info .user-meta-text,
        .topbar-user-info .user-name,
        .topbar-user-info .user-role-label,
        .topbar-user-info .badge,
        .topbar-user-info .lms-header-role-badge {
            max-width: 110px !important;
        }
    }

    .lms-notification-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .notification-bell-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 50% !important;
        background: rgba(245, 158, 11, 0.12) !important;
        border: 1px solid rgba(245, 158, 11, 0.3) !important;
        color: #f59e0b !important;
        font-size: 0.95rem !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }

    .notification-bell-btn:active {
        transform: scale(0.92) !important;
    }

    .btn-topbar-logout {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 8px !important;
        background: rgba(239, 68, 68, 0.12) !important;
        border: 1px solid rgba(239, 68, 68, 0.3) !important;
        color: #ef4444 !important;
        font-size: 0.92rem !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        transition: all 0.2s ease !important;
    }

    .btn-topbar-logout:active {
        transform: scale(0.92) !important;
    }

    .btn-topbar-logout .btn-logout-label {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       2. REKONSTRUKSI MENU PENILAIAN (CBT EXAMS DASHBOARD)
       - Header Penilaian, search, dan tombol aksi
       - Sidebar kelas menjadi horizontal scrollable pill bar
       - Segmented tabs status & kartu penilaian
       ---------------------------------------------------------------------- */
    .page-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .penilaian-topbar-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .penilaian-search-box {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .penilaian-search-input {
        width: 100% !important;
        height: 40px !important;
        font-size: 0.88rem !important;
    }

    .btn-penilaian-bank-btn,
    .btn-buat-penilaian-primary {
        flex: 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        font-size: 0.82rem !important;
        height: 40px !important;
        white-space: nowrap !important;
    }

    /* Layout 2 Kolom -> 1 Kolom Vertikal Bersih */
    .penilaian-twocol-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Sidebar Daftar Kelas -> Horizontal Scrollable Pill Bar */
    .penilaian-classes-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
        scrollbar-width: none;
    }
    .penilaian-classes-sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar-classes-header {
        display: none !important;
    }

    .penilaian-class-vertical-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: max-content !important;
    }

    .class-item-sidebar {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 14px !important;
        border-radius: 999px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #cbd5e1 !important;
        min-width: auto !important;
        margin: 0 !important;
    }

    .class-item-sidebar.active {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3) !important;
    }

    .class-item-sidebar .class-name-text {
        font-size: 0.82rem !important;
    }

    /* Penilaian Control Top Row */
    .penilaian-control-top-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .penilaian-class-subject-capsule {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .penilaian-sort-wrap {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .select-sort-penilaian {
        flex: 1 !important;
    }

    /* Status Tabs: 2x2 Grid Segmen Bersih & Sentuh Mudah */
    .penilaian-status-tabs-row {
        width: 100% !important;
        overflow: visible !important;
    }

    .penilaian-status-tabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .status-tab-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 9px 8px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
    }

    .status-tab-btn .status-tab-badge {
        font-size: 0.72rem !important;
        padding: 1px 6px !important;
    }

    /* Exam Cards in Penilaian - Kompak & Presisi Sesuai Standar UI */
    .penilaian-exam-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        position: relative !important;
    }

    .exam-card-main-info {
        width: 100% !important;
        gap: 10px !important;
    }

    .exam-card-icon-wrap {
        display: none !important;
    }

    .exam-icon-square {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }

    .exam-card-details {
        width: 100% !important;
    }

    .exam-card-title-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
        align-items: center !important;
    }

    /* Ruang judul di kanan atas agar tidak bertabrakan dengan tombol titik tiga (Safari < 15.4 Safe) */
    .penilaian-exam-card.has-kebab-actions .exam-card-title-row {
        padding-right: 42px !important;
    }

    .penilaian-exam-card:has(.btn-exam-kebab) .exam-card-title-row {
        padding-right: 42px !important;
    }

    .exam-card-title-text {
        font-size: 0.98rem !important;
        line-height: 1.35 !important;
        width: 100% !important;
        margin-bottom: 2px !important;
    }

    .exam-card-meta-row {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        font-size: 0.76rem !important;
        margin-top: 2px !important;
    }

    .exam-card-meta-row .meta-sep {
        display: none !important;
    }

    .exam-card-meta-row .meta-item {
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }

    /* Titik Tiga PATEN di Kanan Atas Kartu Soal */
    .penilaian-exam-card .exam-card-kebab-actions {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        border-top: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        z-index: 25 !important;
    }

    .penilaian-exam-card:has(.btn-exam-kebab) .exam-card-right-actions {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        border-top: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        z-index: 25 !important;
    }

    .penilaian-exam-card .btn-exam-kebab {
        width: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
        font-size: 1.05rem !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #475569 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    .penilaian-exam-card .btn-exam-kebab:hover,
    .penilaian-exam-card .btn-exam-kebab.active {
        background: #f1f5f9 !important;
        color: #1d4ed8 !important;
        border-color: #1d4ed8 !important;
    }

    /* Aksi khusus siswa (tombol Kerjakan Ujian di bawah kartu siswa — Kompatibel iPhone Safari Lawas tanpa :has) */
    .penilaian-exam-card:not(.has-kebab-actions) .exam-card-right-actions:not(.exam-card-kebab-actions) {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        border-top: 1px solid #f1f5f9 !important;
        padding-top: 10px !important;
        margin-top: 6px !important;
    }

    .penilaian-exam-card:not(.has-kebab-actions) .exam-card-right-actions:not(.exam-card-kebab-actions) .btn-card-action {
        width: 100% !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        height: 38px !important;
        font-size: 0.82rem !important;
    }

    .exam-kebab-wrapper {
        position: relative !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    .exam-kebab-menu {
        right: 0 !important;
        left: auto !important;
        min-width: 220px !important;
        max-width: calc(100vw - 32px) !important;
        box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.25), 0 4px 14px rgba(0, 0, 0, 0.1) !important;
        z-index: 1050 !important;
    }

    /* Empty State Card di Menu Penilaian - Frame Lebar Penuh & Kompak Vertikal */
    .penilaian-main-panel {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .penilaian-exam-cards-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .penilaian-empty-state-card {
        width: 100% !important;
        min-height: 160px !important;
        background: #ffffff !important;
        border: 1.5px dashed #cbd5e1 !important;
        border-radius: 14px !important;
        padding: 26px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        margin: 0 !important;
    }

    .penilaian-empty-state-card .empty-state-icon-wrap {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 50% !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        border: 1.5px solid #dbeafe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.25rem !important;
        margin-bottom: 2px !important;
    }

    .penilaian-empty-state-card .empty-state-text {
        font-size: 0.95rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        letter-spacing: -0.01em !important;
        margin: 0 !important;
    }

    .penilaian-empty-state-card .empty-state-desc {
        font-size: 0.8rem !important;
        color: #64748b !important;
        max-width: 90% !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }

    /* ----------------------------------------------------------------------
       3. REKONSTRUKSI DAFTAR PENGUMPULAN SISWA (SUBMISSIONS) MOBILE
       - Breadcrumbs rapi 2 tingkat dengan tombol Buku Nilai melengkung
       - Kartu info ujian rapi, kompak & proporsional
       - Tab status berbentuk 2x2 grid jelas & mudah disentuh (tanpa terpotong)
       - Action toolbar: Pencarian di atas + Tombol aksi grid 2 kolom simetris
       - Kartu siswa mandiri, clean, dan responsif
       ---------------------------------------------------------------------- */
    /* 3.1 Top Breadcrumb Bar Mobile */
    #viewSubmissionListDashboard .lms-breadcrumb-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 4px 0 12px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 12px !important;
    }

    #viewSubmissionListDashboard .breadcrumb-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #viewSubmissionListDashboard .btn-breadcrumb-back {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
    }

    #viewSubmissionListDashboard .breadcrumb-nav-path {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

    #viewSubmissionListDashboard .breadcrumb-parent {
        font-size: 0.72rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        line-height: 1 !important;
    }

    #viewSubmissionListDashboard .breadcrumb-sep {
        display: none !important;
    }

    #viewSubmissionListDashboard .breadcrumb-active {
        font-size: 0.98rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #viewSubmissionListDashboard .btn-link-buku-nilai {
        font-size: 0.76rem !important;
        font-weight: 700 !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        border: 1.2px solid #bfdbfe !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* 3.2 Metadata Card Mobile */
    .submission-meta-card {
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
        border-left: 4px solid #2563eb !important;
    }

    .submission-meta-top {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .submission-exam-title {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }

    .submission-guru-name {
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 4px 10px !important;
        max-width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        box-shadow: none !important;
    }

    .submission-tags-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .submission-tags-row .tag-pill {
        font-size: 0.74rem !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
    }

    /* 3.3 Status Tabs 2x2 Grid Mobile (Bebas Cutoff) */
    .submission-status-tabs-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
        border-bottom: none !important;
        margin-bottom: 12px !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .submission-tab-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        color: #475569 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
        margin-bottom: 0 !important;
        border-bottom: 1.5px solid #e2e8f0 !important;
        box-sizing: border-box !important;
    }

    .submission-tab-btn .tab-count-badge {
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        padding: 1px 6px !important;
        border-radius: 999px !important;
        min-width: 20px !important;
        text-align: center !important;
    }

    #subTabBelumMulai.active {
        background: #fffbeb !important;
        border-color: #f59e0b !important;
        color: #b45309 !important;
    }
    #subTabBelumMulai.active .tab-count-badge {
        background: #d97706 !important;
        color: #ffffff !important;
        border-color: #d97706 !important;
    }

    #subTabMengerjakan.active {
        background: #eff6ff !important;
        border-color: #3b82f6 !important;
        color: #1d4ed8 !important;
    }
    #subTabMengerjakan.active .tab-count-badge {
        background: #2563eb !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
    }

    #subTabDikumpulkan.active {
        background: #f0fdfa !important;
        border-color: #0d9488 !important;
        color: #0f766e !important;
    }
    #subTabDikumpulkan.active .tab-count-badge {
        background: #0d9488 !important;
        color: #ffffff !important;
        border-color: #0d9488 !important;
    }

    #subTabSudahDinilai.active {
        background: #ecfdf5 !important;
        border-color: #10b981 !important;
        color: #047857 !important;
    }
    #subTabSudahDinilai.active .tab-count-badge {
        background: #059669 !important;
        color: #ffffff !important;
        border-color: #059669 !important;
    }

    /* 3.4 Action Toolbar Mobile (Search Atas, Tombol Grid Rapi) */
    .submission-action-toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 12px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
    }

    .submission-action-toolbar .toolbar-search-right {
        order: 1 !important;
        width: 100% !important;
    }

    .submission-action-toolbar .toolbar-search-right .topbar-search-box {
        width: 100% !important;
        height: 38px !important;
    }

    .submission-action-toolbar .toolbar-search-right .topbar-search-input {
        width: 100% !important;
        height: 38px !important;
        font-size: 0.84rem !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        padding-left: 36px !important;
    }

    .submission-action-toolbar .toolbar-buttons-left {
        order: 2 !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    .submission-action-toolbar .toolbar-buttons-left .btn-sub-toolbar {
        width: 100% !important;
        height: 36px !important;
        justify-content: center !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    /* Tombol Bagikan Hasil dibuat membentang penuh 2 kolom */
    .submission-action-toolbar .toolbar-buttons-left .btn-sub-toolbar.btn-sub-primary {
        grid-column: 1 / -1 !important;
        height: 40px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        border-radius: 9px !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
    }

    /* 3.5 Kartu Siswa Submissions Mobile */
    .submission-student-row {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 14px !important;
        gap: 10px !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    }

    .student-row-left {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .student-row-info {
        width: 100% !important;
    }

    .student-row-meta {
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        font-size: 0.74rem !important;
    }

    .student-row-right {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-top: 1px dashed #e2e8f0 !important;
        padding-top: 8px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .student-row-right .btn-sub-toolbar {
        flex: 1 1 auto !important;
        justify-content: center !important;
        height: 36px !important;
        font-size: 0.8rem !important;
    }

    .student-row-score-badge {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .student-row-chevron {
        display: none !important;
    }

    /* ----------------------------------------------------------------------
       4. REKONSTRUKSI TABEL BUKU NILAI -> NATIVE MOBILE STUDENT GRADE CARDS
       - Menghindari pemotongan tabel ratusan kolom pada layar kecil
       - Format kartu: Header (Nama+NIS), Grid Nilai per Tugas, Ringkasan NA
       ---------------------------------------------------------------------- */
    .buku-table-responsive {
        overflow-x: visible !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .buku-main-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        font-size: 0.88rem !important;
    }

    .buku-main-table thead,
    .buku-main-table tfoot {
        display: none !important;
    }

    .buku-main-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        width: 100% !important;
    }

    .buku-main-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
        position: relative !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .buku-main-table tbody tr:hover {
        border-color: #3b82f6 !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
    }

    /* Header Kartu: No Urut, Nama Siswa & NIS */
    .buku-main-table .buku-td-sticky-no {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        border-radius: 8px !important;
        font-weight: 800 !important;
        font-size: 0.78rem !important;
        border: 1px solid #bfdbfe !important;
        margin-bottom: 2px !important;
    }

    .buku-main-table .buku-td-sticky-name {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        background: transparent !important;
        font-size: 0.98rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: 8px !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .buku-main-table .buku-mobile-nis {
        display: none !important;
    }

    /* Score Cells: Tile Interaktif dengan Label Asesmen */
    .buku-main-table .buku-td-score {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 9px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.88rem !important;
        transition: all 0.2s ease !important;
    }

    .buku-main-table .buku-td-score:active,
    .buku-main-table .buku-td-score:hover {
        background: #eff6ff !important;
        border-color: #93c5fd !important;
    }

    .buku-main-table .buku-td-score::before {
        content: attr(data-col-title);
        font-size: 0.82rem;
        font-weight: 700;
        color: #475569;
        flex: 1;
        text-align: left;
    }

    .buku-main-table .score-display-val {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin-right: 8px !important;
    }

    .buku-main-table .cell-edit-icon {
        color: #94a3b8 !important;
        font-size: 0.8rem !important;
    }

    /* Summary Bar: NA, Predikat & Status Tuntas */
    .buku-main-table .buku-td-summary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 4px !important;
        border: none !important;
        border-top: 1px dashed #e2e8f0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .buku-main-table .buku-td-summary::before {
        content: attr(data-col-title);
        font-size: 0.82rem;
        font-weight: 700;
        color: #334155;
    }

    .buku-main-table .na-pill {
        font-size: 0.95rem !important;
        padding: 4px 12px !important;
        border-radius: 8px !important;
        font-weight: 800 !important;
    }

    /* ----------------------------------------------------------------------
       5. REKONSTRUKSI ANALISIS PENILAIAN MOBILE
       - Header breadcrumb 2 tingkat dengan tombol ekspor rapi
       - Kartu info ujian kompak & presisi
       - Kartu statistik 2 kolom (Jumlah Murid & Jumlah Murid Dinilai)
       - Komponen kesukaran full-width dengan 3 sub-kolom simetris
       - Kartu analisis butir soal mandiri & distribusi nilai adaptif
       ---------------------------------------------------------------------- */
    /* 5.1 Top Breadcrumb Bar Mobile */
    .analisis-breadcrumb-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 4px 0 12px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 12px !important;
        flex-wrap: wrap !important;
    }

    .analisis-breadcrumb-bar .breadcrumb-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .analisis-breadcrumb-bar .btn-breadcrumb-back {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        flex-shrink: 0 !important;
    }

    .analisis-breadcrumb-bar .breadcrumb-nav-path {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

    .analisis-breadcrumb-bar .breadcrumb-parent {
        font-size: 0.72rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        line-height: 1 !important;
    }

    .analisis-breadcrumb-bar .breadcrumb-sep {
        display: none !important;
    }

    .analisis-breadcrumb-bar .breadcrumb-active {
        font-size: 0.98rem !important;
        font-weight: 800 !important;
        color: #2563eb !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .analisis-breadcrumb-bar .breadcrumb-actions {
        flex-shrink: 0 !important;
    }

    .analisis-topbar-btn-group {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .btn-analisis-export-matriks {
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        color: #2563eb !important;
        border: 1.2px solid #93c5fd !important;
        white-space: nowrap !important;
    }

    .btn-analisis-export-file {
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    /* 5.2 Metadata Card Mobile */
    .analisis-meta-card {
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03) !important;
    }

    .analisis-meta-icon-box {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 10px !important;
        background: #eff6ff !important;
        border: 1.2px solid #bfdbfe !important;
        color: #2563eb !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    .analisis-meta-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .analisis-exam-title {
        font-size: 1.05rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }

    .analisis-tags-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
    }

    .analisis-tag-pill {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
    }

    /* 5.3 Stats Cards Mobile: 2 Kolom Kompak + 1 Kolom Full Kesukaran */
    .analisis-stats-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }

    .analisis-stat-card {
        background: #ffffff !important;
        border: 1.5px solid #dbeafe !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .analisis-stat-card .stat-card-body {
        padding: 12px 8px !important;
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .analisis-stat-card .stat-card-body .stat-big-number {
        font-size: 1.85rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    .analisis-stat-card .stat-card-footer {
        background: #f0f7ff !important;
        border-top: 1px solid #e0f2fe !important;
        padding: 6px 4px !important;
        text-align: center !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        color: #1e40af !important;
        white-space: nowrap !important;
    }

    .analisis-stat-card.card-kesukaran {
        grid-column: 1 / -1 !important;
    }

    .analisis-stat-card.card-kesukaran .stat-card-header {
        background: #f0f7ff !important;
        border-bottom: 1px solid #e0f2fe !important;
        padding: 7px 12px !important;
        text-align: center !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: #1e40af !important;
    }

    .analisis-stat-card.card-kesukaran .kesukaran-columns {
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 10px 6px !important;
        gap: 6px !important;
    }

    .kesukaran-subcol {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 1 !important;
        text-align: center !important;
    }

    .kesukaran-subcol .stat-big-number {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
    }

    .kesukaran-sublabel {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: #475569 !important;
        line-height: 1.2 !important;
    }

    /* 5.4 Questions Analysis Table -> Mobile Question Cards */
    .analisis-table-card {
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        margin-bottom: 14px !important;
    }

    .analisis-table-responsive {
        overflow-x: visible !important;
        padding: 0 !important;
    }

    .analisis-questions-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    .analisis-questions-table thead {
        display: none !important;
    }

    .analisis-questions-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .analisis-q-row-card {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.03) !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .analisis-q-row-card td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 3px 0 !important;
        border: none !important;
        width: 100% !important;
        font-size: 0.82rem !important;
    }

    .analisis-td-no {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-bottom: 2px !important;
    }

    .analisis-td-soal {
        display: block !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        line-height: 1.45 !important;
    }

    .analisis-td-soal .question-clean-text {
        color: #0f172a !important;
        display: block !important;
    }

    .analisis-q-row-card td:not(.analisis-td-soal):not(.analisis-td-no)::before {
        content: attr(data-label);
        font-size: 0.76rem;
        font-weight: 700;
        color: #64748b;
    }

    /* 5.5 Distribusi Nilai Murid & Overview Mobile */
    .analisis-twocol-grid,
    .analisis-overview-grid,
    .analisis-deep-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    .analisis-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 14px !important;
    }

    .kesukaran-triplet-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .analisis-table-card-header {
        padding: 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .analisis-table-toolbar {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .analisis-search-box input {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .analisis-filter-select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .analisis-distribusi-card {
        background: #ffffff !important;
        border: 1.5px solid #dbeafe !important;
        border-radius: 14px !important;
        padding: 14px !important;
        margin-bottom: 14px !important;
    }

    .distribusi-metrics-row {
        gap: 6px !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
    }

    .distribusi-metric-col .metric-value {
        font-size: 1.35rem !important;
        font-weight: 800 !important;
    }

    .distribusi-metric-col .metric-label {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
    }

    .distribusi-chart-container {
        padding-left: 28px !important;
        min-height: 240px !important;
    }

    .chart-main-plot {
        height: 190px !important;
    }

    /* ----------------------------------------------------------------------
       6. REKONSTRUKSI TABEL RIWAYAT PENILAIAN SISWA -> RIWAYAT CARDS
       ---------------------------------------------------------------------- */
    .riwayat-table-wrapper {
        overflow-x: visible !important;
        padding: 0 !important;
    }

    .riwayat-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    .riwayat-table thead {
        display: none !important;
    }

    .riwayat-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .riwayat-row-card {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .riwayat-row-card td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 0 !important;
        border: none !important;
        width: 100% !important;
        text-align: left !important;
    }

    .riwayat-td-no {
        display: none !important;
    }

    .riwayat-td-title {
        display: block !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .riwayat-td-title .riwayat-exam-title {
        font-size: 0.98rem !important;
        font-weight: 800 !important;
        color: #0f172a !important;
    }

    .riwayat-td-action {
        padding-top: 8px !important;
        border-top: 1px dashed #e2e8f0 !important;
    }

    .btn-riwayat-detail {
        width: 100% !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        height: 40px !important;
    }

    .riwayat-row-card td:not(.riwayat-td-title):not(.riwayat-td-action)::before {
        content: attr(data-label);
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748b;
    }

    /* ----------------------------------------------------------------------
       7. REKONSTRUKSI TABEL LEGER NILAI -> STUDENT LEGER CARDS
       ---------------------------------------------------------------------- */
    .leger-data-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    .leger-data-table thead {
        display: none !important;
    }

    .leger-data-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .leger-row-card {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .leger-row-card td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 4px 0 !important;
        border: none !important;
        width: 100% !important;
    }

    .leger-td-no {
        display: none !important;
    }

    .leger-td-student-name {
        display: block !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-weight: 700 !important;
        font-size: 0.94rem !important;
    }

    .leger-row-card td:not(.leger-td-student-name):not(.leger-td-action)::before {
        content: attr(data-label);
        font-size: 0.78rem;
        font-weight: 700;
        color: #64748b;
    }

    .leger-td-action {
        border-top: 1px dashed #e2e8f0 !important;
        padding-top: 8px !important;
    }

    .btn-leger-detail {
        width: 100% !important;
        justify-content: center !important;
        height: 38px !important;
    }

    /* ----------------------------------------------------------------------
       8. REKONSTRUKSI MENU PENGAWAS UJIAN MOBILE (LIVE PROCTORING DASHBOARD)
       ---------------------------------------------------------------------- */
    /* 8.1 Header & Aksi Pengawas */
    #viewProctorDashboard .page-title-section {
        margin-bottom: 14px !important;
    }

    #viewProctorDashboard .page-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #viewProctorDashboard .page-heading {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin: 4px 0 0 0 !important;
    }

    #viewProctorDashboard .proctor-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    #viewProctorDashboard .proctor-header-actions .btn-download-report {
        height: 38px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        border-radius: 9px !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
    }

    #viewProctorDashboard .proctor-header-actions button[onclick*="refreshProctorDashboard"] {
        flex: 0 0 38px !important;
        width: 38px !important;
        padding: 0 !important;
    }

    /* 8.2 Selektor Penilaian Aktif & Metadata Banner */
    .proctor-exam-selector-card {
        padding: 14px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }

    .proctor-selector-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding-bottom: 12px !important;
    }

    .proctor-live-indicator {
        font-size: 0.82rem !important;
    }

    .proctor-exam-dropdown-wrap {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .proctor-select-exam {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        font-size: 0.84rem !important;
        border-radius: 10px !important;
    }

    .proctor-exam-meta-banner {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding-top: 12px !important;
    }

    .proctor-exam-meta-banner .meta-item {
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        padding: 7px 10px !important;
        border-radius: 9px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .proctor-exam-meta-banner .meta-item .label {
        font-size: 0.68rem !important;
        color: #64748b !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
    }

    .proctor-exam-meta-banner .meta-item .val {
        font-size: 0.82rem !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .proctor-exam-meta-banner .meta-item:nth-child(5) {
        grid-column: span 2 !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* 8.3 Banner Tidak Ada Ujian Aktif */
    .proctor-no-active-exam {
        padding: 24px 16px !important;
        border-radius: 14px !important;
        border: 1.5px dashed #cbd5e1 !important;
        margin-bottom: 16px !important;
    }

    .proctor-no-active-exam i {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
    }

    .proctor-no-active-exam h3 {
        font-size: 1rem !important;
    }

    .proctor-no-active-exam p {
        font-size: 0.8rem !important;
    }

    /* 8.4 Grid Statistik Pengawas (2 Kolom Rapi & Presisi) */
    .proctor-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-bottom: 14px !important;
    }

    .proctor-stat-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }

    .proctor-stat-card:last-child {
        grid-column: span 2 !important;
    }

    .proctor-stat-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
        font-size: 1rem !important;
    }

    .proctor-stat-val {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
    }

    .proctor-stat-lbl {
        font-size: 0.72rem !important;
        line-height: 1.25 !important;
    }

    /* 8.5 Papan Monitoring Progres Terpadu (Header & Filter) */
    .proctor-progress-card {
        border-radius: 14px !important;
        margin-bottom: 24px !important;
        border: 1px solid #e2e8f0 !important;
    }

    .proctor-progress-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    .proctor-progress-header-left {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .proctor-progress-header-right {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .proctor-search-box-inline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }

    .proctor-search-box-inline input {
        width: 100% !important;
        height: 38px !important;
        font-size: 0.82rem !important;
        border-radius: 8px !important;
    }

    .proctor-progress-legend {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        font-size: 0.76rem !important;
    }

    /* 8.6 Baris Progres Siswa Direkonstruksi Menjadi Kartu Mandiri Mobile */
    .proctor-progress-list {
        background: #f8fafc !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    .proctor-progress-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: relative !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        gap: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        margin-bottom: 0 !important;
        border-left: 4px solid transparent !important;
    }

    .proctor-progress-row.has-cheating {
        border-left: 4px solid #ea580c !important;
        background: #fffcfb !important;
    }

    /* Kolom Kiri: Nomor, Nama & Kelas */
    .proctor-student-col-left {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-right: 38px !important; /* Ruang untuk tombol 3-titik di kanan atas */
        gap: 10px !important;
    }

    .proctor-student-num {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 0.8rem !important;
        border-radius: 8px !important;
    }

    .proctor-student-info-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .proctor-student-name {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        line-height: 1.3 !important;
    }

    .proctor-student-sub {
        font-size: 0.74rem !important;
        color: #64748b !important;
    }

    /* Kolom Tengah: Info Strip Status, Dijawab & Device */
    .proctor-student-col-mid {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        align-items: center !important;
        font-size: 0.74rem !important;
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    .proctor-student-meta-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .proctor-answered-badge {
        font-size: 0.74rem !important;
        padding: 1px 6px !important;
    }

    .proctor-device-text {
        font-size: 0.72rem !important;
    }

    /* Kolom Peringatan Curang */
    .proctor-student-col-cheat {
        width: 100% !important;
        min-width: auto !important;
        flex: none !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    .proctor-student-col-cheat:empty {
        display: none !important;
    }

    .proctor-cheat-pill {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Kolom Kanan: 10 Bubbles Soal & Tombol Aksi */
    .proctor-student-col-right {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
        padding-top: 6px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .proctor-bubbles-container {
        flex: 1 1 auto !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 2px 0 !important;
        scrollbar-width: none !important;
    }

    .proctor-bubbles-container::-webkit-scrollbar {
        display: none !important;
    }

    .proctor-q-bubble {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 0.74rem !important;
    }

    .btn-proctor-bubble-nav {
        width: 22px !important;
        height: 26px !important;
        min-width: 22px !important;
        font-size: 0.85rem !important;
    }

    /* Tombol 3-Titik Menu Aksi di Kanan Atas Kartu Siswa */
    .proctor-action-menu-wrap {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 10 !important;
    }

    .btn-proctor-menu-dots {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        color: #475569 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        cursor: pointer !important;
    }

    .btn-proctor-menu-dots:hover,
    .btn-proctor-menu-dots.active {
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border-color: #93c5fd !important;
    }

    /* 8.7 Dropdown Menu Aksi Pengawas Floating */
    .proctor-dropdown-menu {
        max-width: calc(100vw - 32px) !important;
        min-width: 190px !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2) !important;
        padding: 6px !important;
        z-index: 1060 !important;
    }

    .proctor-menu-item {
        padding: 9px 12px !important;
        font-size: 0.82rem !important;
        border-radius: 8px !important;
    }

    /* 8.8 Tabel Setting Duties Pengawas Global */
    .proctor-table {
        display: block !important;
        width: 100% !important;
        border: none !important;
    }

    .proctor-table thead {
        display: none !important;
    }

    .proctor-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .proctor-duty-card-row {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 14px !important;
        padding: 14px 16px !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .proctor-duty-card-row td {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 3px 0 !important;
        border: none !important;
        width: 100% !important;
    }

    .proctor-duty-card-row td::before {
        content: attr(data-label);
        font-size: 0.76rem;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 4px;
    }

    .proctor-duty-card-row .proctor-td-name::before {
        display: none !important;
    }

    .proctor-duty-select {
        width: 100% !important;
        height: 40px !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 8px !important;
    }

    .btn-proctor-save {
        width: 100% !important;
        justify-content: center !important;
        height: 40px !important;
    }

    /* ----------------------------------------------------------------------
       9. REKONSTRUKSI MODAL TABEL LAINNYA (BLOKIR SISWA & WIZARD STEP 2)
       ---------------------------------------------------------------------- */
    .publish-students-table {
        display: block !important;
        width: 100% !important;
    }

    .publish-students-table thead {
        display: none !important;
    }

    .publish-students-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 8px !important;
    }

    .publish-student-card-row {
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 12px 14px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
        gap: 6px !important;
    }

    .publish-student-card-row td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border: none !important;
        padding: 2px 0 !important;
    }

    .publish-td-no {
        display: none !important;
    }

    .publish-td-name {
        display: block !important;
        border-bottom: 1px solid #f1f5f9 !important;
        padding-bottom: 4px !important;
    }

    .publish-student-card-row td:not(.publish-td-name)::before {
        content: attr(data-label);
        font-size: 0.76rem;
        font-weight: 700;
        color: #64748b;
    }

    .btn-toggle-block-student {
        width: 100% !important;
        justify-content: center !important;
        padding: 8px 12px !important;
    }

    /* Wizard Step 2 Buku Nilai */
    .buku-step2-table {
        display: block !important;
        width: 100% !important;
    }

    .buku-step2-table thead {
        display: none !important;
    }

    .buku-step2-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .buku-step2-row-card {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }

    .buku-step2-row-card td {
        border: none !important;
        padding: 0 !important;
    }

    .buku-step2-td-no {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        background: #f1f5f9 !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
    }

    .buku-step2-td-name {
        flex: 1 !important;
    }

    .buku-step2-input {
        width: 80px !important;
        height: 36px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    /* Hilangkan min-width 520px pada seluruh table-responsive wrapper */
    .table-responsive-wrapper table {
        min-width: 0 !important;
    }

    /* ----------------------------------------------------------------------
       5. REKONSTRUKSI MENU MATERI & BANK SOAL (STANDARISASI HEADER DENGAN PENILAIAN)
       - Segmented Tabs Bar (Saya, Penilaian, Publik)
       - Bilah Filter Tingkat, Mapel, Semester (Horizontal Touch Scroll)
       ---------------------------------------------------------------------- */

    .bank-soal-top-row {
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .bank-soal-tabs-bar {
        display: flex !important;
        width: 100% !important;
        gap: 4px !important;
        background: #f1f5f9 !important;
        padding: 4px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .bank-soal-tabs-bar .bank-tab-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        font-size: 0.74rem !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .bank-soal-filters-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding-bottom: 6px !important;
        margin-bottom: 14px !important;
        scrollbar-width: none;
    }

    .bank-soal-filters-row::-webkit-scrollbar {
        display: none;
    }

    .bank-soal-filters-row .custom-select-wrap {
        flex: 1 1 auto !important;
        min-width: 110px !important;
    }

    /* ----------------------------------------------------------------------
       6. REKONSTRUKSI MOBILE WIZARD BUAT PENILAIAN (ANTI-BERANTAKAN)
       - Card Container Padding Proporsional (14px, bukan 40px)
       - Token Box & Button Acak Token Rapi & Tidak Terpotong
       - Footer Action Buttons: Buat Soal (100%) di atas, Sebelumnya & Simpan Draf (50%/50%) di bawah
       - Instruksi Rich Text Toolbar & Input Groups Responsive
       ---------------------------------------------------------------------- */
    .wizard-container-card {
        padding: 18px 14px 28px 14px !important;
        border-radius: 14px !important;
        margin-top: 10px !important;
        margin-bottom: 24px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .wizard-stepper-wrap {
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
        gap: 0 !important;
        width: 100% !important;
    }

    .stepper-step {
        min-width: 0 !important;
        flex: 1 1 0 !important;
        gap: 6px !important;
    }

    .stepper-circle {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.8rem !important;
    }

    .stepper-label {
        font-size: 0.74rem !important;
        white-space: nowrap !important;
        letter-spacing: -0.2px !important;
    }

    .stepper-line {
        margin-top: 15px !important;
    }

    .wizard-form-title {
        font-size: 1.12rem !important;
        font-weight: 800 !important;
        margin-bottom: 16px !important;
        color: #0f172a !important;
    }

    .wizard-form-group {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .wizard-label {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        font-size: 0.86rem !important;
        padding-top: 0 !important;
        line-height: 1.35 !important;
    }

    .wizard-field-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wizard-input-text, 
    .wizard-select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        height: 42px !important;
        font-size: 0.88rem !important;
    }

    /* Token CBT Input Box Responsive */
    .wizard-token-box-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 6px 8px !important;
        background: #f8fafc !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    .wizard-token-key-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
        background: #e0f2fe !important;
        color: #0284c7 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        flex-shrink: 0 !important;
    }

    .wizard-token-input-field {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        height: 36px !important;
        font-family: monospace !important;
        font-weight: 800 !important;
        font-size: 1.05rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.12em !important;
        text-align: center !important;
        border: 1px solid #94a3b8 !important;
        border-radius: 6px !important;
        background: #ffffff !important;
        color: #0f172a !important;
        outline: none !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }

    .btn-wizard-acak-token {
        height: 36px !important;
        padding: 0 10px !important;
        background: #0d9488 !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        color: #ffffff !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 420px) {
        .wizard-token-box-wrap {
            flex-wrap: wrap !important;
            padding: 8px !important;
            gap: 8px !important;
        }
        .wizard-token-input-field {
            flex: 1 1 120px !important;
        }
        .btn-wizard-acak-token {
            width: 100% !important;
            height: 36px !important;
            justify-content: center !important;
        }
    }

    /* Instruksi Penilaian Toolbar & Rich Content */
    .wizard-instruksi-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .wizard-instruksi-toolbar {
        padding: 6px 6px !important;
        gap: 3px !important;
    }

    .instruksi-tool-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
    }

    .wizard-instruksi-card .editor-rich-content {
        min-height: 110px !important;
        padding: 10px 12px !important;
        font-size: 0.86rem !important;
    }

    /* Wizard Footer Action Buttons Responsive */
    .wizard-footer-actions {
        margin-top: 22px !important;
        padding-top: 16px !important;
        border-top: 1px solid #e2e8f0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Step 2 Actions: [Buat Soal (100%)] above [Sebelumnya (50%) | Simpan ke Draf (50%)] */
    .wizard-footer-actions.right-aligned {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .wizard-footer-actions.right-aligned .btn-wizard-primary {
        grid-column: 1 / -1 !important;
        order: -1 !important;
        width: 100% !important;
        height: 44px !important;
        font-size: 0.94rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
    }

    .wizard-footer-actions.right-aligned .btn-wizard-outline {
        width: 100% !important;
        height: 42px !important;
        padding: 6px 4px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Step 1 Actions: Selanjutnya di atas (100%), Batal di bawah (100%) */
    .wizard-footer-actions:not(.right-aligned) {
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .wizard-footer-actions:not(.right-aligned) button {
        width: 100% !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }
}

/* ==========================================================================
   CBT AUDIO LISTENING & VIDEO PLAYBACK SYSTEM (RICH AESTHETICS 2026)
   ========================================================================== */

/* 1. Toolbar Buttons */
.tb-btn-media-audio {
    color: #2563eb !important;
}
.tb-btn-media-audio:hover {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1d4ed8 !important;
}
.tb-btn-media-video {
    color: #dc2626 !important;
}
.tb-btn-media-video:hover {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}

/* 2. Modals */
.cbt-media-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: cbtMediaFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cbtMediaFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1); }
}

.cbt-media-modal-card {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.8);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cbt-media-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.cbt-media-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.cbt-media-header-icon.audio {
    background: #eff6ff;
    color: #2563eb;
}
.cbt-media-header-icon.video {
    background: #fef2f2;
    color: #dc2626;
}

.cbt-media-modal-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}
.cbt-media-modal-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
}

.btn-media-modal-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: #94a3b8;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-media-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.cbt-media-modal-body {
    padding: 22px 24px;
    max-height: 75vh;
    overflow-y: auto;
}

.cbt-media-tab-group {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 18px;
    gap: 4px;
}

.cbt-media-tab {
    flex: 1;
    padding: 9px 14px;
    border: none;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.cbt-media-tab.active {
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.cbt-media-dropzone {
    border: 2px dashed #93c5fd;
    background: #f8fafc;
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cbt-media-dropzone:hover {
    border-color: #2563eb;
    background: #eff6ff;
    transform: translateY(-1px);
}
.dropzone-icon {
    font-size: 2.4rem;
    margin-bottom: 10px;
}
.dropzone-icon.audio { color: #3b82f6; }
.dropzone-icon.video { color: #ef4444; }
.dropzone-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.96rem;
    margin-bottom: 4px;
}
.dropzone-desc {
    font-size: 0.78rem;
    color: #64748b;
}

.cbt-media-status-box {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cbt-media-status-box.info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}
.cbt-media-status-box.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.cbt-media-status-box.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.cbt-media-field-label {
    display: block;
    font-weight: 700;
    font-size: 0.86rem;
    color: #334155;
    margin-bottom: 6px;
}
.cbt-media-field-hint {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 4px;
}

.cbt-media-preview-box {
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
}
.cbt-media-preview-box.audio {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
}
.cbt-media-preview-box.video {
    background: #0f172a;
    border: 1.5px solid #334155;
}
.cbt-preview-label {
    font-size: 0.76rem;
    font-weight: 700;
    color: #0284c7;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cbt-media-settings-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
}
.cbt-settings-header {
    font-weight: 800;
    font-size: 0.92rem;
    color: #0f172a;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.cbt-setting-field {
    margin-bottom: 14px;
}
.cbt-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.cbt-media-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f8fafc;
}

/* 3. Rendered Containers in Editor, CBT Preview, & Real Exam */
.cbt-media-container {
    margin: 16px auto;
    position: relative;
    max-width: 100%;
}
.cbt-media-container.cbt-media-audio {
    max-width: 680px;
}

/* Floating delete button in editor */
.cbt-media-delete-btn {
    display: none !important;
}
.editor-rich-content .cbt-media-container .cbt-media-delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    display: none !important;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    transition: all 0.15s;
}
.editor-rich-content .cbt-media-container:hover .cbt-media-delete-btn {
    display: inline-flex !important;
}
.editor-rich-content .cbt-media-container .cbt-media-delete-btn:hover {
    background: #dc2626;
    transform: scale(1.04);
}

/* Audio Card (Modern Aesthetic) */
.cbt-audio-card {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    user-select: none;
}
.cbt-audio-card:hover {
    border-color: #93c5fd;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}
.cbt-audio-card.is-playing {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cbt-audio-card.is-exhausted {
    border-color: #f59e0b;
    background: #fffbeb;
}

.cbt-audio-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.cbt-audio-icon-pulse {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.cbt-audio-card.is-playing .cbt-audio-icon-pulse {
    background: #2563eb;
    color: #ffffff;
    animation: cbtAudioPulse 1.6s infinite;
}
@keyframes cbtAudioPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.cbt-audio-meta {
    flex: 1;
    min-width: 140px;
}
.cbt-audio-badge {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #2563eb;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cbt-audio-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-top: 1px;
}

.cbt-audio-limit-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
}
.cbt-audio-card.is-exhausted .cbt-audio-limit-badge {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.cbt-audio-player-wrap {
    margin: 6px 0;
}
.cbt-audio-element {
    width: 100%;
    height: 42px;
    outline: none;
    border-radius: 30px;
}

.cbt-audio-student-status {
    margin-top: 6px;
    font-size: 0.76rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Video Card & Responsive 16:9 Aspect Ratio */
.cbt-video-card {
    background: transparent;
    border-radius: 14px;
    overflow: hidden;
}
.cbt-video-caption-top {
    font-size: 0.88rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cbt-video-responsive {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #000000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.cbt-video-responsive iframe,
.cbt-video-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

/* 4. DARK MODE SUPPORT FOR REAL CBT STUDENT EXAM (#cbtExamOverlay) */
#cbtExamOverlay .cbt-audio-card {
    background: rgba(30, 41, 59, 0.85);
    border: 1.5px solid #334155;
    color: #f8fafc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
#cbtExamOverlay .cbt-audio-card:hover {
    border-color: #38bdf8;
}
#cbtExamOverlay .cbt-audio-card.is-playing {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}
#cbtExamOverlay .cbt-audio-card.is-exhausted {
    background: rgba(69, 26, 3, 0.4);
    border-color: #d97706;
}
#cbtExamOverlay .cbt-audio-icon-pulse {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}
#cbtExamOverlay .cbt-audio-badge {
    color: #38bdf8;
}
#cbtExamOverlay .cbt-audio-title {
    color: #f8fafc;
}
#cbtExamOverlay .cbt-audio-limit-badge {
    background: rgba(56, 189, 248, 0.15);
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.3);
}
#cbtExamOverlay .cbt-audio-card.is-exhausted .cbt-audio-limit-badge {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.4);
}
#cbtExamOverlay .cbt-audio-student-status {
    color: #94a3b8;
}
#cbtExamOverlay .cbt-video-caption-top {
    color: #cbd5e1;
}

/* 5. Right Question List Mini Badges */
.editor-badge-audio {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
}
.editor-badge-video {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
}




/* ==========================================================================
   MOBILE PERFORMANCE OPTIMIZATION (Anti-Lag, Anti-White-Screen)
   Diterapkan khusus untuk viewport <= 768px (smartphone)
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. Disable berat backdrop-filter blur pada semua overlay/modal di mobile
          Ini adalah penyebab utama lag & white screen karena GPU render per-pixel */
    .lms-notif-modal-backdrop,
    .lms-modal-overlay,
    .lms-dialog-overlay,
    .cbt-modal-overlay,
    .buku-modal-overlay,
    .cbt-media-modal-overlay,
    .lms-wizard-modal-overlay,
    .cbt-fullscreen-enforcer-overlay,
    .cbt-focus-privacy-shield {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* 2. Kurangi animasi yang berjalan terus-menerus, penyebab 60fps drop */
    .proctor-live-pulse {
        animation: none !important;
        opacity: 1 !important;
    }
    .notification-bell-btn.has-unread i {
        animation: none !important;
    }
    .notification-badge-count {
        animation: none !important;
    }
    @keyframes badgePulse { /* override to no-op */ }
    @keyframes bellWiggle { /* override to no-op */ }
    @keyframes cbtAudioPulse { /* override to no-op */ }

    /* 3. Matikan will-change yang tidak perlu (menambah memory layer overhead) */
    .lms-sidebar {
        will-change: auto !important;
    }

    /* 4. Tambah contain untuk mencegah layout thrashing saat scroll */
    .cbt-dash-panel,
    .penilaian-exam-card,
    .bank-soal-card,
    .proctor-stat-card,
    .lms-notif-card {
        contain: layout style;
    }

    /* 5. GPU compositing hint yang benar: hanya untuk elemen fixed yang scroll */
    .lms-topbar,
    .mobile-bottom-nav {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        isolation: isolate;
    }

    /* 6. Disable background decor (penyebab repaint) di mobile */
    .canvas-decor-curve,
    .canvas-decor-curve-2 {
        display: none !important;
    }

    /* 7. Transisi sidebar lebih cepat di mobile */
    .lms-sidebar {
        transition: none !important;
    }

    /* 8. Kurangi box-shadow kompleks yang berat untuk GPU */
    .lms-topbar {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    }
    .mobile-bottom-nav {
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.07) !important;
    }

    /* 9. Scroll performance: momentum scrolling untuk touch device */
    .lms-main-content,
    .lms-view-pane,
    .lms-notif-list-wrapper,
    .exam-list-container,
    .bank-soal-items-list,
    .proctor-table-container,
    .buku-step2-table-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* 10. Kurangi border-radius berat yang perlu GPU clipping */
    .lms-notif-dialog {
        border-radius: 16px 16px 0 0 !important;
    }

    /* 11. Image loading lazy hint */
    img:not([loading]) {
        loading: lazy;
    }

    /* 12. Sembunyikan efek hover di touch device (mengurangi repaint) */
    .penilaian-exam-card:hover,
    .bank-soal-card:hover,
    .lms-notif-card:hover,
    .cbt-dash-panel:hover,
    .proctor-stat-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* 13. Reduce motion untuk accessibility dan performa */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Khusus sangat kecil (max 480px) - mode hemat penuh */
@media (max-width: 480px) {
    /* Matikan semua transisi agar tidak lag */
    .nav-link-item,
    .mob-nav-link,
    .btn-buat-penilaian-primary,
    .btn-hero-action,
    .btn-switch-smartapp,
    .btn-topbar-logout {
        transition: none !important;
    }

    /* Kurangi kompleksitas visual card */
    .penilaian-exam-card,
    .bank-soal-card,
    .cbt-metric-card {
        box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* Padding minimal untuk konten di layar kecil */
    .lms-main-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* ========================================================================== */
/* MODAL PORTAL EXIT CHOOSER (SMARTAPP vs SMARTAPP LMS)                       */
/* ========================================================================== */
.cbt-portal-exit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.65);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.cbt-portal-exit-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cbt-portal-exit-card {
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transform: scale(0.94) translateY(8px);
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.cbt-portal-exit-overlay.active .cbt-portal-exit-card {
    transform: scale(1) translateY(0);
}

.cbt-portal-exit-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    position: relative;
}

.cbt-portal-exit-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.cbt-portal-exit-heading {
    flex: 1;
    min-width: 0;
}

.cbt-portal-exit-title {
    font-size: 1.18rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.cbt-portal-exit-subtitle {
    font-size: 0.82rem;
    color: #64748b;
    margin: 3px 0 0 0;
}

.cbt-portal-exit-close {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cbt-portal-exit-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.cbt-portal-exit-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.cbt-portal-option-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
}

.cbt-portal-option-btn:hover {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
    transform: translateY(-1.5px);
}

.cbt-portal-option-btn:active {
    transform: scale(0.985);
}

.cbt-portal-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cbt-portal-option-icon.classroom-icon-bg {
    background: linear-gradient(135deg, #10b981, #047857);
    color: #ffffff;
    font-size: 1.25rem;
}

.cbt-portal-option-icon.meet-icon-bg {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    font-size: 1.25rem;
}

.cbt-portal-option-meta {
    flex: 1;
    min-width: 0;
}

.cbt-portal-option-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 3px;
}

.cbt-portal-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.cbt-portal-badge.badge-primary {
    background: #eff6ff;
    color: #2563eb;
}

.cbt-portal-badge.badge-green {
    background: #ecfdf5;
    color: #059669;
}

.cbt-portal-badge.badge-amber {
    background: #fffbeb;
    color: #d97706;
}

.cbt-portal-option-desc {
    font-size: 0.77rem;
    color: #64748b;
    line-height: 1.35;
}

.cbt-portal-option-arrow {
    font-size: 0.85rem;
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

.cbt-portal-option-btn:hover .cbt-portal-option-arrow {
    transform: translateX(3px);
    color: #2563eb;
}

.cbt-portal-exit-footer {
    display: flex;
    justify-content: flex-end;
}

.cbt-btn-portal-cancel {
    background: transparent;
    border: none;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cbt-btn-portal-cancel:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* ========================================================================= */
/* TIPE SOAL AKM & SUPPORT GRAFIK STIMULUS (BARUNA CBT)                      */
/* ========================================================================= */

.tb-btn-media-graphic {
    color: #0284c7 !important;
}
.tb-btn-media-graphic:hover {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

/* Stimulus Graphic Styling */
.cbt-stimulus-graphic-box {
    text-align: center;
    margin: 14px auto;
    max-width: 100%;
    display: block;
}

.cbt-stimulus-graphic {
    max-width: 100% !important;
    height: auto !important;
    max-height: 480px;
    object-fit: contain;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    display: inline-block;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cbt-stimulus-graphic:hover {
    transform: scale(1.01);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

.cbt-graphic-caption-tag {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

.cbt-graphic-dropzone:hover,
.cbt-graphic-dropzone:focus {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
}

/* Matrix Variant Selector Pills */
.btn-matrix-tag {
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-matrix-tag:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-matrix-tag.active {
    background: #0284c7;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.3);
}

/* AKM Badges */
.badge-akm-pg-kompleks {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #bae6fd !important;
}

.badge-akm-bs {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0 !important;
}

.badge-akm-yt {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

.badge-akm-sesuai {
    background: #faf5ff !important;
    color: #7e22ce !important;
    border: 1px solid #f3e8ff !important;
}

.badge-akm-menjodohkan {
    background: #f0fdfa !important;
    color: #0f766e !important;
    border: 1px solid #99f6e4 !important;
}

.badge-akm-isian {
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #ffedd5 !important;
}



/* ==========================================================================
   INDIKATOR BADGE KECURANGAN SISWA & MODAL DETAIL KECURANGAN (PENILAIAN CBT)
   ========================================================================== */
.student-violation-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #dc2626;
    border: 1.5px solid #fca5a5;
    border-radius: 999px;
    padding: 2px 10px 2px 8px;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.35;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.16);
    transition: all 0.18s ease;
    white-space: nowrap;
    font-family: inherit;
    vertical-align: middle;
}

.student-violation-badge:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border-color: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

.student-violation-badge:active {
    transform: scale(0.96);
}

.student-violation-badge .viol-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: cbtViolPulseDot 1.6s infinite;
}

.student-violation-badge:hover .viol-badge-dot {
    background: #ffffff;
}

.student-violation-badge .viol-badge-count {
    background: #dc2626;
    color: #ffffff;
    border-radius: 999px;
    padding: 0 6px;
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}

.student-violation-badge:hover .viol-badge-count {
    background: #ffffff;
    color: #dc2626;
}

@keyframes cbtViolPulseDot {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.55; }
    100% { transform: scale(1); opacity: 1; }
}

.submission-student-row.has-violation-flag {
    border-left: 4px solid #ef4444 !important;
    background: linear-gradient(90deg, rgba(254, 242, 242, 0.55) 0%, #ffffff 35%) !important;
}

/* Modal Detail Kecurangan Siswa */
.cbt-student-violation-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    background: rgba(15, 23, 42, 0.74);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cbt-student-violation-modal-overlay.show {
    display: flex !important;
}

.cbt-student-violation-modal-card {
    background: #ffffff;
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.4);
    border: 1px solid #fecaca;
    animation: lmsModalFadeIn 0.2s ease-out;
}

.cbt-viol-modal-header {
    padding: 18px 22px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-bottom: 1px solid #fecaca;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cbt-viol-modal-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.cbt-viol-modal-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fee2e2;
    border: 1.5px solid #fca5a5;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cbt-viol-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cbt-viol-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.cbt-viol-stat-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
}

.cbt-viol-stat-box.danger {
    background: #fef2f2;
    border-color: #fecaca;
}

.cbt-viol-stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}

.cbt-viol-stat-val {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.cbt-viol-stat-box.danger .cbt-viol-stat-val {
    color: #dc2626;
}

.cbt-viol-timeline-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cbt-viol-item-card {
    background: #ffffff;
    border: 1.5px solid #fee2e2;
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.cbt-viol-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.cbt-viol-strike-pill {
    background: #dc2626;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.cbt-viol-type-pill {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fda4af;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cbt-viol-time-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: #64748b;
    font-family: var(--font-mono, monospace);
}

.cbt-viol-detail-text {
    font-size: 0.84rem;
    color: #1e293b;
    font-weight: 600;
    line-height: 1.45;
}

.cbt-viol-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: #64748b;
}

.cbt-viol-meta-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
}

.cbt-viol-modal-footer {
    padding: 14px 22px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .cbt-viol-summary-grid {
        grid-template-columns: 1fr;
    }
    .cbt-viol-modal-header,
    .cbt-viol-modal-body,
    .cbt-viol-modal-footer {
        padding: 14px 16px;
    }
}

/* Stabilisasi Layar Landscape HP saat Ujian Berlangsung */
@media (max-height: 520px) and (orientation: landscape) {
    .cbt-exam-header {
        padding: 6px 14px !important;
        gap: 2px !important;
    }
    .cbt-question-area {
        padding: 10px 16px 16px 16px !important;
    }
    .cbt-nav-controls {
        padding: 6px 14px calc(6px + env(safe-area-inset-bottom, 0px)) 14px !important;
    }
    .btn-cbt-nav {
        height: 36px !important;
        padding: 0 10px !important;
    }
}

/* ==================================================================== */
/* SISTEM PESAN PERINGATAN GURU/PENGAWAS, JEDA UJIAN, BANTUAN & INBOX   */
/* Z-Index Super Tinggi (> 100.000.000) agar Tampil di Atas Shield CBT  */
/* ==================================================================== */

#cbtBlockedOverlay.cbt-blocked-screen {
    z-index: 2147483005 !important;
}

/* Tombol Header CBT (Kotak Masuk Pesan & Bantuan Siswa) */
.cbt-header-tool-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(30, 41, 59, 0.78);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.cbt-header-tool-btn:hover {
    background: rgba(51, 65, 85, 0.95);
    border-color: rgba(56, 189, 248, 0.55);
    color: #ffffff;
}

.cbt-header-tool-btn.has-messages {
    border-color: rgba(245, 158, 11, 0.65);
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
}

.cbt-header-tool-btn.btn-raise-hand {
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(14, 116, 144, 0.22);
    color: #bae6fd;
}

.cbt-header-tool-btn.btn-raise-hand.is-active {
    border-color: rgba(245, 158, 11, 0.75);
    background: rgba(245, 158, 11, 0.24);
    color: #fef08a;
}

.cbt-inbox-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85);
}

.cbt-mobile-subrow-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cbt-mob-tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(30, 41, 59, 0.85);
    color: #e2e8f0;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.cbt-mob-tool-pill.is-help {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(14, 116, 144, 0.28);
    color: #bae6fd;
}

.cbt-mob-tool-pill.is-help.is-active {
    border-color: rgba(245, 158, 11, 0.75);
    background: rgba(245, 158, 11, 0.26);
    color: #fef08a;
}

@media (max-width: 960px) {
    .cbt-header-tool-btn .cbt-tool-label {
        display: none;
    }
    .cbt-header-tool-btn {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .cbt-header-tool-btn {
        display: none !important;
    }
}

/* Overlay Peringatan / Informasi Pengawas ke Layar Siswa */
.cbt-proctor-warning-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(2, 6, 23, 0.86) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 2147483000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cbt-proctor-warning-card {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 22px 22px 20px 22px;
    color: #f8fafc;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 4px rgba(245, 158, 11, 0.16);
    animation: cbtProctorMsgPop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

@keyframes cbtProctorMsgPop {
    0% { opacity: 0; transform: scale(0.92) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.cbt-proctor-warning-card.severity-urgent {
    border-color: #ef4444;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 5px rgba(239, 68, 68, 0.24);
}

.cbt-proctor-warning-card.severity-info {
    border-color: #38bdf8;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 4px rgba(56, 189, 248, 0.2);
}

.cbt-proctor-warning-card.severity-extra_time {
    border-color: #10b981;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 0 4px rgba(16, 185, 129, 0.22);
}

.cbt-pmsg-top-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cbt-pmsg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(245, 158, 11, 0.18);
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.severity-urgent .cbt-pmsg-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.5);
}

.severity-info .cbt-pmsg-badge {
    background: rgba(56, 189, 248, 0.18);
    color: #bae6fd;
    border-color: rgba(56, 189, 248, 0.45);
}

.severity-extra_time .cbt-pmsg-badge {
    background: rgba(16, 185, 129, 0.18);
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, 0.45);
}

.cbt-pmsg-queue-pill {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
    font-size: 0.72rem;
    font-weight: 700;
}

.cbt-pmsg-hero-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 12px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
    border: 2px solid rgba(245, 158, 11, 0.45);
}

.severity-urgent .cbt-pmsg-hero-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.55);
}

.severity-info .cbt-pmsg-hero-icon {
    background: rgba(56, 189, 248, 0.18);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.45);
}

.severity-extra_time .cbt-pmsg-hero-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.5);
}

.cbt-pmsg-title {
    margin: 0 0 6px 0;
    font-size: 1.16rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
}

.cbt-pmsg-sender-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 14px;
}

.cbt-pmsg-sender-meta strong {
    color: #e2e8f0;
}

.cbt-pmsg-body-box {
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 14px;
    padding: 15px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.6;
    color: #f8fafc;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 12px;
}

.cbt-pmsg-footnote {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-bottom: 16px;
}

.cbt-pmsg-ack-btn {
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.32);
    transition: transform 0.15s ease, filter 0.15s ease;
}

.severity-urgent .cbt-pmsg-ack-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.35);
}

.severity-info .cbt-pmsg-ack-btn {
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
}

.severity-extra_time .cbt-pmsg-ack-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.32);
}

.cbt-pmsg-ack-btn.is-neutral {
    background: rgba(51, 65, 85, 0.9);
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.cbt-pmsg-ack-btn:active {
    transform: scale(0.98);
}

/* Kotak Masuk Riwayat Pesan di Layar Siswa */
.cbt-pmsg-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.cbt-pmsg-inbox-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(56, 189, 248, 0.16);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cbt-pmsg-close-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.8);
    color: #cbd5e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cbt-pmsg-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 52vh;
    overflow-y: auto;
    margin-bottom: 14px;
    text-align: left;
}

.cbt-pmsg-inbox-item {
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 11px 13px;
}

.cbt-pmsg-inbox-item.type-URGENT { border-left-color: #ef4444; }
.cbt-pmsg-inbox-item.type-INFO { border-left-color: #38bdf8; }
.cbt-pmsg-inbox-item.type-EXTRA_TIME { border-left-color: #10b981; }
.cbt-pmsg-inbox-item.type-STUDENT_HELP { border-left-color: #a855f7; }

.cbt-pmsg-inbox-empty {
    padding: 28px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.86rem;
}

/* Overlay Jeda Sementara Ujian oleh Pengawas (PAUSE) */
.cbt-exam-paused-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(2, 6, 23, 0.94) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 2147482900 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.cbt-exam-paused-card {
    width: 100%;
    max-width: 460px;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    border: 2px solid #38bdf8;
    border-radius: 22px;
    padding: 28px 24px;
    text-align: center;
    color: #f8fafc;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
}

.cbt-paused-icon-ring {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 14px auto;
    background: rgba(56, 189, 248, 0.16);
    border: 2px solid rgba(56, 189, 248, 0.45);
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.cbt-paused-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.16);
    color: #bae6fd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.cbt-exam-paused-card h2 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
}

.cbt-exam-paused-card p {
    margin: 0 0 16px 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.cbt-paused-assurance {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    padding: 13px 15px;
    text-align: left;
    font-size: 0.82rem;
    line-height: 1.55;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Modal Bantuan / Angkat Tangan Siswa di Dalam Ujian */
.cbt-student-help-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(2, 6, 23, 0.82) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2147482800 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cbt-student-help-card {
    width: 100%;
    max-width: 460px;
    background: #0f172a;
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 20px;
    padding: 20px;
    color: #f8fafc;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
    box-sizing: border-box;
}

.cbt-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.cbt-help-icon-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cbt-help-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.cbt-help-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.cbt-help-cat-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: rgba(30, 41, 59, 0.7);
    color: #e2e8f0;
    font-size: 0.83rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cbt-help-cat-btn.active {
    border-color: #38bdf8;
    background: rgba(14, 116, 144, 0.35);
    color: #ffffff;
}

.cbt-help-textarea {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.9);
    color: #f8fafc;
    padding: 10px 12px;
    font-size: 0.86rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.cbt-help-textarea:focus {
    outline: none;
    border-color: #38bdf8;
}

.cbt-help-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.cbt-help-btn-cancel {
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(30, 41, 59, 0.8);
    color: #cbd5e1;
    font-weight: 700;
    font-size: 0.84rem;
    cursor: pointer;
}

.cbt-help-btn-send {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.84rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Status Chips Live pada Daftar Siswa (Penilaian & Ruang Pengawas) */
.cbt-student-live-chips {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    vertical-align: middle;
}

.cbt-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.cbt-live-chip.is-help {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #f59e0b;
    cursor: pointer;
    animation: cbtHelpChipPulse 1.6s infinite;
}

@keyframes cbtHelpChipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

.cbt-live-chip.is-paused {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}

.cbt-live-chip.is-extra-time {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}

.cbt-live-chip.is-warn-read {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
    cursor: pointer;
}

.cbt-live-chip.is-warn-pending {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
    cursor: pointer;
}

/* Modal Guru: Kirim Pesan / Peringatan Kaya Fitur + Read Receipt */
.cbt-teacher-action-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(15, 23, 42, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 2147482000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cbt-teacher-action-card {
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.25);
    color: #0f172a;
    box-sizing: border-box;
}

.cbt-severity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.cbt-severity-opt {
    padding: 9px 8px;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.cbt-severity-opt.active[data-sev="WARNING"] {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}

.cbt-severity-opt.active[data-sev="URGENT"] {
    border-color: #ef4444;
    background: #fef2f2;
    color: #b91c1c;
}

.cbt-severity-opt.active[data-sev="INFO"] {
    border-color: #0284c7;
    background: #f0f9ff;
    color: #0369a1;
}

.cbt-preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cbt-preset-chip:hover {
    border-color: #0284c7;
    background: #f0f9ff;
    color: #0369a1;
}

/* Interactive Pre-Submit Summary Modal (Siswa Konfirmasi Selesai Ujian) */
.cbt-finish-review-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: rgba(2, 6, 23, 0.85) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2147482700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.cbt-finish-review-card {
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 20px;
    padding: 22px;
    color: #f8fafc;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.78);
    box-sizing: border-box;
}

.cbt-finish-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 14px 0;
}

.cbt-finish-stat-box {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}

.cbt-finish-stat-box .num {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
}

.cbt-finish-stat-box .lbl {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 600;
}

.cbt-finish-q-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.cbt-finish-q-pill {
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.16);
    color: #fde68a;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cbt-finish-q-pill.is-unanswered {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.16);
    color: #fecaca;
}

@media (max-width: 520px) {
    .cbt-severity-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================================== */
/* HEADER CBT RESPONSIVE DESKTOP/TABLET & RENDER RICH HTML INSTRUKSI    */
/* ==================================================================== */

@media (min-width: 769px) {
    #cbtHeaderMobileSubrow,
    #cbtSyncBadgeMobile {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1180px) {
    #cbtFontResizerBox {
        display: none !important;
    }
    .cbt-header-actions-group {
        gap: 6px;
    }
    .cbt-submit-lock-badge {
        padding: 4px 10px;
        font-size: 0.72rem;
    }
    .btn-cbt-finish .finish-text-full {
        display: none;
    }
    .btn-cbt-finish .finish-text-short {
        display: inline;
    }
}

.cbt-mobile-subrow-tools {
    flex-shrink: 0;
    flex-wrap: nowrap !important;
}

/* Grid Metadata & Konten Rich-Text Petunjuk Pengerjaan Ujian */
.cbt-instructions-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

@media (max-width: 580px) {
    .cbt-instructions-meta-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cbt-instructions-meta-card {
    background: var(--bg-hover, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 10px 8px;
    text-align: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cbt-instructions-meta-label {
    font-size: 0.68rem;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cbt-instructions-meta-val {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-color, #0f172a);
    margin-top: 3px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.cbt-instruction-rich-content {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-color, #1e293b);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.cbt-instruction-rich-content p,
.cbt-instruction-rich-content div {
    margin: 0 0 8px 0;
}

.cbt-instruction-rich-content p:last-child,
.cbt-instruction-rich-content div:last-child {
    margin-bottom: 0;
}

.cbt-instruction-rich-content b,
.cbt-instruction-rich-content strong {
    font-weight: 700;
    color: inherit;
}

.cbt-instruction-rich-content ul,
.cbt-instruction-rich-content ol {
    margin: 6px 0 8px 0;
    padding-left: 20px;
}

.cbt-instruction-rich-content li {
    margin-bottom: 4px;
}

.cbt-instruction-rich-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.84rem;
}

.cbt-instruction-rich-content th,
.cbt-instruction-rich-content td {
    border: 1px solid #cbd5e1;
    padding: 6px 10px;
    text-align: left;
}

.cbt-instruction-rich-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px auto;
    display: block;
}

.cbt-instruction-rich-content a {
    color: #2563eb;
    text-decoration: underline;
}

/* Rich Text Mini Editor untuk Edit Pengaturan Petunjuk Ujian */
.edit-richtext-wrapper {
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-richtext-wrapper:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.edit-richtext-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.btn-edit-rt {
    width: 30px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 0.8rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-edit-rt:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.edit-rt-divider {
    width: 1px;
    height: 18px;
    background: #cbd5e1;
    margin: 0 3px;
}

.edit-richtext-instruction {
    min-height: 96px;
    max-height: 220px;
    overflow-y: auto;
    padding: 10px 14px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #1e293b;
    outline: none;
}

.edit-richtext-instruction:empty:before {
    content: attr(data-placeholder);
    color: #94a3b8;
    pointer-events: none;
}

body.dark-mode .edit-richtext-wrapper {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.25);
}

body.dark-mode .edit-richtext-toolbar {
    background: #1e293b;
    border-bottom-color: rgba(148, 163, 184, 0.2);
}

body.dark-mode .btn-edit-rt {
    color: #cbd5e1;
}

body.dark-mode .btn-edit-rt:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

body.dark-mode .edit-richtext-instruction {
    color: #f1f5f9;
}