@font-face {
    font-family: 'Klassin UI';
    src: url('assets/fonts/Sarabun-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: 'Klassin UI';
    src: url('assets/fonts/Sarabun-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 600 900;
    font-display: swap;
}

/* Screen-only: official document typography and print geometry stay independent. */
@media screen {
    body.klassin-ui {
        --ui-ink: #17332f;
        --ui-muted: #617571;
        --ui-line: #d9e5e1;
        --ui-mint: #e5f6ee;
        --ui-teal: #075b56;
        --ui-deep: #064a46;
        --ui-accent: #0c8d75;
        --ui-navigation-surface: #f3f7f5;
        --ui-navigation-ink: #526f69;
        --ui-navigation-active: #105158;
        --ui-dashboard-background: linear-gradient(180deg, #004e4a 0%, #00484f 48%, #003c4b 100%);
        background: #f3f7f5;
        color: var(--ui-ink);
        font-family: 'Klassin UI', sans-serif;
        font-size: 14px;
        line-height: 1.55;
    }
    .klassin-ui *, .klassin-ui *::before, .klassin-ui *::after { letter-spacing: 0; }
    .klassin-ui [hidden], .klassin-ui .admin-only.hidden, .klassin-ui .student-only.hidden { display: none !important; }
    body.klassin-ui #dashboard-quick-panel-main > button.hidden { display: none !important; }
    .klassin-ui button, .klassin-ui input, .klassin-ui select, .klassin-ui textarea { font-family: inherit; }
    .klassin-ui button, .klassin-ui a, .klassin-ui input, .klassin-ui select, .klassin-ui textarea { -webkit-tap-highlight-color: transparent; }
    .klassin-ui :is(button, a, input, select, textarea):focus-visible { outline: 2px solid #0c8d75; outline-offset: 3px; }
    .klassin-ui button { touch-action: manipulation; }
    .klassin-ui #app-scroll-main { min-width: 0; background: #f3f7f5; }
    .klassin-ui .app-topbar {
        flex-shrink: 0;
        min-height: 76px;
        padding: 14px 24px;
        gap: 12px;
        background: #f3f4f6 !important;
        border-bottom: 1px solid #e2e7ed;
        color: var(--ui-ink);
        z-index: 40;
        box-shadow: none;
    }
    .klassin-ui .app-topbar > div:first-child { min-width: 0; flex: 1; gap: 12px; }
    .klassin-ui .app-topbar > div:last-child { flex: 0 0 auto; gap: 8px; }
    .klassin-ui #page-title { min-width: 0; font-size: 19px; line-height: 1.4; color: var(--ui-ink); }
    .klassin-ui .dashboard-title-brand { padding: 0; gap: 10px; }
    .klassin-ui .dashboard-title-logo { width: 48px; height: 48px; border-radius: 8px; }
    .klassin-ui .dashboard-title-name { color: #0ea5e9; font-size: 30px; font-weight: 800; }
    .klassin-ui .dashboard-title-subtitle { display: block; color: #596574; font-size: 9px; }
    .klassin-ui :is(.topbar-notification-button, .topbar-clock-card) {
        width: 48px; height: 48px; min-width: 48px; min-height: 48px;
        border: 0; border-radius: 6px;
        background: transparent; color: #173c4b; box-shadow: none;
        padding: 0; display: inline-flex; align-items: center; justify-content: center;
    }
    .klassin-ui :is(.topbar-notification-button, .topbar-clock-card):hover { background: #173c4b08; box-shadow: none; transform: none; }
    .klassin-ui .topbar-notification-button > i, .klassin-ui .topbar-clock-mobile-icon { font-size: 24px; display: inline; color: #173c4b; }
    .klassin-ui :is(.topbar-clock-time, .topbar-clock-date, .topbar-clock-expand) { display: none; }
    .klassin-ui .topbar-notification-badge { font-size: 10px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; top: 3px; right: 3px; border: 0; background: #ef3c46; color: white; }
    .klassin-ui #sidebar.app-sidebar { background: #093a3e !important; color: #b9d1d0; border: 0; z-index: 45; box-shadow: none; overflow: hidden; min-height: 0; }
    .klassin-ui #sidebar .sidebar-brand-panel { position: relative; display: block; flex: 0 0 auto; margin: 22px 18px 14px; padding: 16px 34px 16px 14px; border: 1px solid #ffffff0b; border-radius: 20px; background: #ffffff0a; }
    .klassin-ui #sidebar .sidebar-logo-lockup { gap: 12px; }
    .klassin-ui #sidebar .sidebar-logo-lockup > div { min-width: 0; }
    .klassin-ui #sidebar .sidebar-logo-lockup h1 { color: #f0faf8; font-size: 22px; line-height: 1.3; }
    .klassin-ui #sidebar .sidebar-logo-lockup p { color: #9ebdbb; font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
    .klassin-ui #sidebar .sidebar-logo-mark { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; box-shadow: 0 4px 10px #001c2433; }
    .klassin-ui #sidebar .sidebar-mode-toggle { width: 28px; height: 28px; color: #8bb8b5 !important; background: transparent !important; border: 0; border-radius: 6px; box-shadow: none; }
    .klassin-ui #sidebar .sidebar-mode-toggle:hover { color: #f0faf8 !important; background: #ffffff0d !important; }
    .klassin-ui #sidebar .sidebar-compact-toggle-row { position: absolute; top: 33px; right: 23px; padding: 0; border: 0; background: transparent !important; z-index: 1; }
    .klassin-ui #sidebar .sidebar-close-btn { top: 11px; right: 5px; width: 28px; height: 28px; color: #9fc6c2; background: transparent; border: 0; box-shadow: none; }
    .klassin-ui #sidebar .sidebar-clock-wrap { display: none; }
    .klassin-ui #sidebar nav { flex: 1 1 0; min-height: 0; overflow: auto; overflow-x: hidden; padding: 0 18px 12px; scrollbar-width: thin; scrollbar-color: #527b7b #093a3e; overscroll-behavior: contain; }
    .klassin-ui #sidebar nav ul { padding: 0; }
    .klassin-ui #sidebar nav li { margin: 4px 0; }
    .klassin-ui #sidebar nav li.mt-4 { margin-top: 4px !important; padding-top: 0 !important; border: 0 !important; }
    .klassin-ui #sidebar .sidebar-section-label { padding: 19px 14px 9px; color: #799b9b; font-size: 11px; font-weight: 600; line-height: 1.5; }
    .klassin-ui #sidebar .nav-link, .klassin-ui #sidebar nav a:not(.nav-link) { position: relative; display: flex; align-items: center; width: 100%; padding: 8px 12px !important; border-radius: 13px; min-height: 54px; color: #b9d1d0 !important; background: transparent; font-size: 14px; line-height: 1.4; gap: 13px; box-shadow: none; transform: none; transition: background-color .16s ease, color .16s ease; }
    .klassin-ui #sidebar .nav-link i, .klassin-ui #sidebar nav a:not(.nav-link) i { display: inline-flex; align-items: center; justify-content: center; width: 38px !important; min-width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: 10px; background: #ffffff04; color: #72b8ac !important; font-size: 18px; box-shadow: none; animation: none; transform: none; }
    .klassin-ui #sidebar .nav-link:hover, .klassin-ui #sidebar nav a:not(.nav-link):hover { color: #eefbf7 !important; background: #ffffff0b !important; box-shadow: none; transform: none; }
    .klassin-ui #sidebar .nav-link:hover i { background: #ffffff0a; color: #9ce4d5 !important; box-shadow: none; transform: none; }
    .klassin-ui #sidebar .nav-link.bg-white\/20 { background: #ffffff1a !important; color: #fff !important; font-weight: 700; box-shadow: none !important; }
    .klassin-ui #sidebar .nav-link.bg-white\/20::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 3px 3px 0; background: #48c5ad; }
    .klassin-ui #sidebar .nav-link.bg-white\/20 i { color: #c4f3e9 !important; background: #ffffff16; border: 0; box-shadow: inset 0 0 0 1px #ffffff06; transform: none; }
    .klassin-ui #sidebar .sidebar-account-panel { display: flex; align-items: center; flex: 0 0 auto; gap: 11px; margin: 8px 18px 18px; padding: 12px; border: 1px solid #ffffff0b; border-radius: 20px; background: #ffffff0a; }
    .klassin-ui #sidebar .sidebar-account-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; color: #e2f5ed; background: #87cab82b; font-size: 18px; font-weight: 700; box-shadow: inset 0 0 0 1px #ffffff12; }
    .klassin-ui #sidebar .sidebar-account-copy { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
    .klassin-ui #sidebar .sidebar-account-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #effbf8; font-size: 13px; line-height: 1.5; }
    .klassin-ui #sidebar .sidebar-account-copy span { color: #99b9b5; font-size: 11px; line-height: 1.5; }
    .klassin-ui #sidebar .sidebar-logout-button { display: grid; place-items: center; flex: 0 0 32px; width: 32px; min-height: 40px; padding: 0; border: 0; border-radius: 8px; color: #82b5b0; background: transparent; font-size: 18px; }
    .klassin-ui #sidebar .sidebar-logout-button:hover { color: #f2fffb; background: #ffffff0d; }
    .klassin-ui #sidebar-overlay { z-index: 44; }
    .klassin-ui #app-main-content { padding: 22px 24px 32px; }
    .klassin-ui .view-section > :is(.bg-white, [class$="-shell"]) { border-radius: 0; box-shadow: none; }
    .klassin-ui .view-section > .bg-white { background: transparent; padding: 0; }
    .klassin-ui :is(.subject-manager-shell, .advisory-dashboard-shell, .student-exam-lobby, .school-documents-shell, .subject-media-shell) { border: 0; border-radius: 0; box-shadow: none; }
    .klassin-ui :is(.subject-manager-header, .advisory-dashboard-header, .exam-lobby-header, .subject-media-header, .attendance-workspace-header, .school-activities-header, .school-tournaments-page-header) { background: transparent; padding: 0 0 16px; border-bottom: 1px solid var(--ui-line); box-shadow: none; border-radius: 0; }
    .klassin-ui .view-section :is(h2, h3).text-3xl { font-size: 22px; }
    .klassin-ui .view-section :is(h2, h3).text-2xl { font-size: 20px; }
    .klassin-ui .view-section :is(h2, h3).text-xl { font-size: 18px; }
    .klassin-ui :is(.rounded-xl, .rounded-2xl, .rounded-3xl) { border-radius: 8px; }
    .klassin-ui #app-main-content :is(.shadow-md, .shadow-lg, .shadow-xl) { box-shadow: none; }
    .klassin-ui #app-main-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
        border-color: #c5d8d0; border-radius: 6px; background-color: #fff; color: #17332f;
    }
    .klassin-ui #app-main-content :is(select, input[type="date"], input[type="search"]) { min-height: 42px; }
    .klassin-ui #app-main-content :is(input[type="checkbox"], input[type="radio"]) { accent-color: #0c8d75; }
    .klassin-ui #app-main-content table { background: white; font-size: 13px; }
    .klassin-ui #app-main-content table th { background: #eaf3ee; color: #36544a; font-weight: 700; padding-top: 12px; padding-bottom: 12px; border-color: #d4e2dc; }
    .klassin-ui #app-main-content table td { border-color: #e3ece7; }
    .klassin-ui #app-main-content table tbody tr:hover { background-color: #d8f1e4; }
    .klassin-ui #app-main-content table tbody tr:hover td { background-color: #d8f1e4; }
    .klassin-ui #app-main-content table tbody tr:hover :is(.bg-red-50, .bg-yellow-50) { background-color: inherit; }
    .klassin-ui .swal2-popup { border-radius: 8px; color: var(--ui-ink); font-family: 'Klassin UI', sans-serif; }
    .klassin-ui .swal2-title { font-size: 22px; line-height: 1.5; }
    .klassin-ui .swal2-styled { border-radius: 6px; font-size: 14px; min-height: 44px; box-shadow: none !important; }
    .klassin-ui .swal2-confirm { background-color: #08776a; }
    .klassin-ui .swal2-cancel { background-color: #e8efeb; color: #39574e; }
    .klassin-ui .staff-profile-camera { display: block; width: 100%; max-height: 45dvh; aspect-ratio: 3 / 4; object-fit: cover; background: #152b29; border-radius: 8px; }
    .klassin-ui :is(.klassin-staff-avatar, .klassin-staff-photo-camera)[aria-busy="true"] { opacity: 0.65; cursor: progress; }
    .klassin-ui .swal2-deny { background-color: #bc3f4e; }
    .klassin-ui .attendance-choice-popup .attendance-choice-camera { background: #0865a9 !important; }
    .klassin-ui .attendance-choice-popup .attendance-choice-manual { background: #16834b !important; }
    .klassin-ui .attendance-choice-popup .attendance-choice-camera:hover { background: #07558f !important; }
    .klassin-ui .attendance-choice-popup .attendance-choice-manual:hover { background: #116e3f !important; }
    .klassin-ui :is(.system-settings-modal-dialog, .klassin-notification-panel) { border-radius: 8px; border-color: var(--ui-line); }
    .klassin-ui :is(.system-settings-modal-header, .klassin-notification-header) { background: var(--ui-mint); color: var(--ui-ink); }
    .klassin-ui #mobile-home-btn { display: none !important; }
    .klassin-ui.klassin-ui-blocked #klassin-buddy-dock { display: none !important; }

    /* Dashboard bands use live counters, rosters, scores, and notifications. */
    .klassin-ui.on-dashboard #app-scroll-main { background: #fff; }
    .klassin-ui.on-dashboard #app-main-content { --klassin-main-gutter: 24px; background: transparent; padding-top: 0; padding-bottom: 0; }
    .klassin-ui .klassin-dashboard-surface {
        width: calc(100% + var(--klassin-main-gutter) * 2);
        margin: 0 calc(var(--klassin-main-gutter) * -1);
        padding: 20px var(--klassin-main-gutter) 32px;
        border-radius: 24px 24px 0 0;
        background-color: #003c4b; background-image: var(--ui-dashboard-background);
        background-size: 100% 100dvh; background-repeat: no-repeat;
        min-height: calc(100dvh - 76px);
    }
    .klassin-ui .klassin-dashboard-layout { gap: 24px; }
    .klassin-ui .klassin-dashboard-layout > div:first-child { gap: 20px; }
    .klassin-ui :is(#student-welcome-card, #admin-welcome-card) {
        background: #e5f6ee !important; background-image: none !important; color: #17332f;
        border-radius: 8px; border: 1px solid #c3e5d4; box-shadow: none; padding: 18px;
    }
    .klassin-ui #student-welcome-card :is(.student-welcome-info > p, #dash-student-name-display, .student-welcome-meta) { color: #17332f; filter: none; text-shadow: none; }
    .klassin-ui #student-welcome-card {
        width: calc(100% + var(--klassin-main-gutter) * 2);
        margin: 0 calc(var(--klassin-main-gutter) * -1); padding: 18px var(--klassin-main-gutter) 20px;
        background: #e6f8f5 !important; border: 0; border-radius: 0; box-shadow: none;
    }
    .klassin-ui #student-welcome-card .student-welcome-layout { grid-template-columns: 112px minmax(0,1fr) 116px; gap: 20px; }
    .klassin-ui #student-welcome-card .student-welcome-photo-wrap, .klassin-ui #student-welcome-card .student-welcome-photo { width: 112px; }
    .klassin-ui #student-welcome-card .student-welcome-photo { height: 136px; border: 0; border-radius: 8px; object-fit: cover; }
    .klassin-ui #student-welcome-card .student-welcome-info > p { color: #596b70; font-size: 15px; font-weight: 400; }
    .klassin-ui #student-welcome-card #dash-student-name-display { color: #082f3b; font-size: 26px; line-height: 1.4; overflow-wrap: anywhere; }
    .klassin-ui #student-welcome-card .student-welcome-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; color: #596b70; font-size: 14px; }
    .klassin-ui #student-welcome-card .student-welcome-meta span { color: inherit; font-size: inherit; }
    .klassin-ui #student-welcome-card .student-welcome-qr-card { width: 116px; height: 128px; grid-template-rows: minmax(0,1fr) 16px; padding: 8px; background: #fff; border: 0; border-radius: 8px; }
    .klassin-ui #student-welcome-card .student-welcome-qr { width: 96px; height: 96px; object-fit: contain; }
    .klassin-ui #student-welcome-card .student-welcome-qr-card span { font-size: 10px; line-height: 16px; }
    .klassin-ui #student-welcome-card .student-welcome-today { display: block; padding-top: 0; margin-top: 16px; border-top: 0; }
    .klassin-ui #student-welcome-card .student-dashboard-status-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    .klassin-ui #student-welcome-card .student-today-item { position: relative; border-radius: 8px; padding: 14px 14px 14px 58px; min-height: 124px; box-shadow: none; }
    .klassin-ui #student-welcome-card .student-today-label { font-size: 14px; font-weight: 600; }
    .klassin-ui #student-welcome-card .student-today-label > i { position: absolute; top: 18px; left: 16px; font-size: 28px; }
    .klassin-ui #student-welcome-card .student-today-lesson.assembly-status-present { background: #c8effb; border-color: #bae8f5; color: #074868; }
    .klassin-ui #student-welcome-card .student-today-line { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
    .klassin-ui #student-welcome-card .student-today-line strong { font-size: 22px; line-height: 1.4; }
    .klassin-ui #student-welcome-card .student-today-line strong > i { display: none; }
    .klassin-ui #student-welcome-card .student-today-meta { font-size: 13px; }
    .klassin-ui #student-welcome-card .student-today-advisor { margin-top: 3px; font-size: 12px; }
    .klassin-ui #admin-welcome-card { display: flex; align-items: center; gap: 14px; min-height: 108px; }
    .klassin-ui .klassin-staff-avatar { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; background: #c5e9d9; color: #0e6c57; display: grid; place-items: center; overflow: hidden; font-size: 25px; }
    .klassin-ui .klassin-staff-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .klassin-ui .klassin-staff-avatar.has-photo i { display: none; }
    .klassin-ui .klassin-staff-name { min-width: 0; flex: 1; }
    .klassin-ui .klassin-staff-name p { font-size: 11px; color: #4b7766; }
    .klassin-ui .klassin-staff-name h2 { font-size: 20px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
    .klassin-ui #klassin-dashboard-date { color: #517566; font-size: 11px; }
    .klassin-ui .klassin-identity-mark { width: 34px; flex-shrink: 0; }
    .klassin-ui .klassin-identity-mark img { width: 34px; border-radius: 6px; }
    .klassin-ui .klassin-staff-stats { gap: 1px; background: #338078; border: 1px solid #338078; border-radius: 8px; overflow: hidden; }
    .klassin-ui .klassin-staff-stats > div { padding: 14px; border-radius: 0; background: #0b635b; box-shadow: none; gap: 10px; }
    .klassin-ui .klassin-staff-stats > div > i { display: none; }
    .klassin-ui .klassin-staff-stats > div > div:first-of-type { width: 28px; height: 28px; background: transparent; margin: 0; border-radius: 0; box-shadow: none; }
    .klassin-ui .klassin-staff-stats h3 { font-size: 24px; text-shadow: none; }
    .klassin-ui .klassin-staff-stats p { font-size: 11px; }
    .klassin-ui .klassin-primary-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
    .klassin-ui .klassin-primary-action { display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 8px; min-width: 0; color: #edfbf4; padding: 4px; border: 0; background: transparent; font-size: 12px; }
    .klassin-ui .klassin-primary-action .klassin-action-symbol { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; color: #fff; background: #0ca67d; font-size: 23px; }
    .klassin-ui .tone-blue .klassin-action-symbol { background: #1593ba; }
    .klassin-ui .tone-amber .klassin-action-symbol { background: #b67d23; }
    .klassin-ui .tone-violet .klassin-action-symbol { background: #7560b1; }
    .klassin-ui .klassin-action-label { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
    .klassin-ui .klassin-primary-action:hover .klassin-action-symbol { filter: brightness(1.15); transform: translateY(-2px); }
    .klassin-ui :is(.student-quick-menu-panel, .student-score-card, .klassin-inbox) { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; color: #ecfaf3; }
    .klassin-ui :is(.student-quick-menu-header h3, .student-score-card-header h3, .klassin-section-heading h3) { color: #ecfaf3; font-size: 15px; }
    .klassin-ui .student-quick-menu-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 8px; }
    .klassin-ui .student-quick-menu-button { padding: 4px 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; color: #f0fbf4; min-height: 102px; gap: 8px; justify-content: flex-start; }
    .klassin-ui .student-quick-menu-button:hover { background: transparent; box-shadow: none; transform: none; }
    .klassin-ui .student-quick-menu-button .student-quick-menu-icon { width: 54px; height: 54px; flex: 0 0 54px; background: #0ba17a; color: #fff; border: 0; border-radius: 8px; font-size: 22px; box-shadow: none; }
    .klassin-ui .student-quick-menu-button .student-quick-menu-label { color: #f0fbf4; font-size: 11px; min-height: 32px; }
    .klassin-ui .student-quick-menu-exam .student-quick-menu-icon { background: #1593ba; }
    .klassin-ui .student-quick-menu-score .student-quick-menu-icon { background: #7560b1; }
    .klassin-ui .student-quick-menu-leave .student-quick-menu-icon { background: #b67d23; }
    .klassin-ui .student-self-check-shortcut.submitted .student-quick-menu-icon { background: #bc861a; }
    .klassin-ui .student-self-check-shortcut.checked .student-quick-menu-icon { background: #16a065; }
    .klassin-ui .student-quick-menu-profile { grid-column: 1; order: 2; }
    .klassin-ui .student-quick-menu-media { order: 2; }
    .klassin-ui .student-quick-menu-assembly { order: 3; }
    .klassin-ui :is(.student-quick-menu-profile, .student-quick-menu-media, .student-quick-menu-assembly) .student-quick-menu-icon { width: 42px; height: 42px; flex-basis: 42px; background: #064a46; border: 1px solid #3e8980; border-radius: 50%; color: #b2e5cf; font-size: 18px; }
    .klassin-ui :is(.student-quick-menu-profile, .student-quick-menu-media, .student-quick-menu-assembly) { min-height: 72px; }
    .klassin-ui #student-quick-stats { gap: 1px; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid #358378; background: #358378; border-radius: 6px; overflow: hidden; }
    .klassin-ui #student-quick-stats > div { background: #0b635b; padding: 10px 6px; border: 0; border-radius: 0; box-shadow: none; }
    .klassin-ui #student-quick-stats p { color: #c0e2d4; font-size: 10px; }
    .klassin-ui #student-quick-stats h4 { font-size: 17px; color: #fff; }
    .klassin-ui .student-score-card-header { padding: 0 0 10px; gap: 10px; }
    .klassin-ui .student-score-card-header p { color: #b9dace; font-size: 11px; }
    .klassin-ui .student-score-card-header-icon { width: 32px; height: 32px; background: transparent; border: 0; color: #c6e6db; font-size: 18px; }
    .klassin-ui .student-score-card-count { background: #0b635b; color: #d4f1e4; border-color: #358378; font-size: 11px; padding: 4px 9px; }
    .klassin-ui .student-score-folder-compact { background: #f8fcfa; border: 1px solid #d5e7de; border-radius: 8px; box-shadow: none; padding: 12px; gap: 10px; }
    .klassin-ui .student-score-folder-compact .student-score-folder-name { font-size: 14px; color: #183d32; }
    .klassin-ui .student-score-folder-compact .student-score-folder-teacher { font-size: 11px; color: #5b766b; }
    .klassin-ui .student-score-folder-compact .student-score-folder-icon { width: 30px; height: 36px; border: 0; background: transparent; font-size: 21px; }
    .klassin-ui .student-score-folder-compact .student-score-total-value { font-size: 23px; }
    .klassin-ui .student-score-folder-compact .student-score-grade-value { font-size: 24px; color: #087761; }
    .klassin-ui .student-score-folder-compact::before, .klassin-ui .student-score-folder-compact::after { display: none; }
    .klassin-ui #student-dashboard-data > .bg-white { padding: 0; background: transparent; border: 0; color: #e7f7ef; }
    .klassin-ui #student-dashboard-data > .bg-white > h3 { color: #e7f7ef; font-size: 15px; border-color: #358378; }
    .klassin-ui #view-dashboard .dashboard-quick-menu-heading { border-color: #358378; margin-bottom: 12px; padding-bottom: 10px; }
    .klassin-ui .klassin-dashboard-layout > div:first-child > .bg-white { padding: 0; background: transparent; border: 0; }
    .klassin-ui #view-dashboard .dashboard-quick-tabs { background: #064a46; border: 1px solid #358378; border-radius: 6px; padding: 3px; }
    .klassin-ui #view-dashboard .dashboard-quick-tab { background: transparent; color: #c9e5da; border-radius: 4px; font-size: 12px; padding: 8px 10px; border: 0; box-shadow: none; }
    .klassin-ui #view-dashboard .dashboard-quick-tab.active { background: #d9f4e5; color: #095b48; }
    .klassin-ui #dashboard-quick-panel-main { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px 10px; }
    .klassin-ui #dashboard-quick-panel-main > button { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: transparent !important; color: #dff5ea; border: 0 !important; border-radius: 0; padding: 0 3px !important; min-height: 80px !important; height: auto !important; box-shadow: none !important; transform: none; gap: 6px; }
    .klassin-ui #view-dashboard #dashboard-quick-panel-main > button > div { display: none !important; }
    .klassin-ui #dashboard-quick-panel-main > button::before, .klassin-ui #dashboard-quick-panel-main > button::after { display: none; }
    .klassin-ui #view-dashboard #dashboard-quick-panel-main > button > :is(svg, i, span:not(.klassin-utility-symbol)) { display: none !important; }
    .klassin-ui #dashboard-quick-panel-main > button { aspect-ratio: auto; }
    .klassin-ui #dashboard-quick-panel-main h4 { color: #dff5ea !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.4; min-width: 0; max-width: 100%; max-height: none; overflow: visible; overflow-wrap: anywhere; }
    .klassin-ui .klassin-utility-symbol { width: 40px !important; height: 40px !important; flex: 0 0 40px; border-radius: 50%; border: 1.5px solid #fff; background: transparent; color: #fff; display: grid; place-items: center; font-size: 17px; }
    .klassin-ui #dashboard-quick-panel-main > button:hover .klassin-utility-symbol { background: #ffffff14; color: #fff; }
    .klassin-ui .activity-quick-button { background: #f8fcfa; border-radius: 6px; box-shadow: none; min-height: 100px; }
    .klassin-ui .activity-quick-caption { display: none; }
    .klassin-ui .activity-quick-icon { width: 40px; height: 40px; font-size: 20px; }
    .klassin-ui .klassin-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 10px; }
    .klassin-ui .klassin-section-heading button { width: 36px; height: 36px; color: #d8f4e5; border-radius: 50%; }
    .klassin-ui .klassin-inbox-row { width: 100%; padding: 12px; display: grid; grid-template-columns: 28px minmax(0,1fr) 16px; gap: 10px; text-align: left; color: #1e5143; background: #e1f3e8; border-radius: 6px; margin-bottom: 6px; }
    .klassin-ui .klassin-inbox-row.is-assembly { background: #fff0cd; color: #805912; }
    .klassin-ui .klassin-inbox-row .klassin-action-label { font-size: 12px; }
    .klassin-ui .klassin-inbox { display: grid; grid-template-rows: 1fr; }
    .klassin-inbox-content { min-height: 0; overflow: hidden; }
    .klassin-ui .klassin-inbox.is-revealing { animation: klassin-inbox-slide-down 280ms ease-out; }
    @keyframes klassin-inbox-slide-down {
        from { grid-template-rows: 0fr; opacity: 0; }
        to { grid-template-rows: 1fr; opacity: 1; }
    }
    .klassin-ui #view-dashboard .dashboard-overview-card { border: 0; background: transparent; border-radius: 0; box-shadow: none; padding: 0; height: auto; min-height: 0; }
    .klassin-ui .dashboard-overview-header { border-color: #358378; padding: 0 0 12px; }
    .klassin-ui .dashboard-overview-header :is(h3, p, span) { color: #e7f7ef; }
    .klassin-ui .dashboard-overview-subject-list { gap: 8px; max-height: none; overflow: visible; }
    .klassin-ui .dashboard-overview-subjects > div:first-child > p { color: #e7f7ef; }
    .klassin-ui .dashboard-overview-card > .absolute { display: none; }
    .klassin-ui .dashboard-overview-subject-row { border-radius: 6px; background: #f8fcfa; border-color: #d2e5db; box-shadow: none; }
    .klassin-ui .dashboard-overview-subject-name { font-size: 14px; }
    .klassin-ui .dashboard-overview-all-gradebook { background: #d9f4e5; color: #075b48; border-radius: 6px; }
    .klassin-ui #view-dashboard > .admin-only > h3 { color: #e7f7ef; font-size: 15px; border-color: #358378; }
    .klassin-ui #dashboard-folders { gap: 10px; }
    .klassin-ui :is(.dashboard-folder-level-card, .dashboard-folder-room-card) { background: #f8fcfa; border-radius: 6px; min-height: 105px; box-shadow: none; padding: 14px; }
    .klassin-ui :is(.dashboard-folder-level-card, .dashboard-folder-room-card)::before, .klassin-ui :is(.dashboard-folder-level-card, .dashboard-folder-room-card)::after { display: none; }
    .klassin-ui #dashboard-today-summary > .bg-white { border: 1px solid #cfe3d8; border-radius: 8px; box-shadow: none; padding: 18px; }

    /* Login uses the same compact identity rather than a separate promotional layout. */
    .klassin-ui #login-container { background: #e5f6ee; z-index: 200; }
    .klassin-ui #login-container > .bg-bubbles, .klassin-ui #login-container > .absolute.bottom-4 { display: none; }
    .klassin-ui #login-container > .bg-white { max-width: 440px; border-radius: 8px; border: 1px solid #c4dfd0; box-shadow: 0 10px 32px #153d2c12; min-height: 0; }
    .klassin-ui #login-container > .bg-white > div:first-child { display: none; }
    .klassin-ui #login-container > .bg-white > div:last-child { width: 100%; padding: 28px; }
    .klassin-ui #login-container .lg\:hidden { display: flex; }
    .klassin-ui #login-container h2 { font-size: 21px; }
    .klassin-ui #login-container button { box-shadow: none; }
    .klassin-ui #login-container > button { color: #356f58; background: #cfe9db; }

    .klassin-bottom-nav { display: none; }
    .klassin-ui.klassin-executive { --blue: #0c8d75; --navy: #17332f; --muted: #617571; --line: #d9e5e1; --panel: #fff; }
    .klassin-ui.klassin-executive::before { display: none; }
    .klassin-executive .hero { background: #e5f6ee; padding: 18px; margin: -18px -18px 20px; border-bottom: 1px solid #cee7dc; }
    .klassin-executive .brand h1 { color: #075b56; font-size: 25px; }
    .klassin-executive .brand img { border-radius: 8px; box-shadow: none; }
    .klassin-executive :is(.card, .btn, .date-input, .notice) { border-radius: 6px; box-shadow: none; }
    .klassin-executive .card:not(.kpi) { border: 0; border-radius: 0; }
    .klassin-executive .kpi strong { font-size: 27px; }
    .klassin-executive .btn.primary { background: #d9f4e5; border-color: #bcdcca; color: #075b48; }
    .klassin-executive .panel-head { border-color: #d9e5e1; }
    .klassin-executive table th { background: #eaf3ee; color: #36544a; }
    .klassin-executive table tbody tr:hover { background: #d8f1e4; }
    @media (min-width: 768px) {
        .klassin-ui #sidebar.app-sidebar { width: 286px !important; flex-basis: 286px; }
        .klassin-ui.sidebar-compact #sidebar.app-sidebar { width: 60px !important; min-width: 60px; flex-basis: 60px; }
        .klassin-ui.sidebar-compact #sidebar .sidebar-brand-panel { display: none; }
        .klassin-ui.sidebar-compact #sidebar .sidebar-compact-toggle-row { position: static; flex: 0 0 60px; padding: 10px 0; border: 0; }
        .klassin-ui.sidebar-compact #sidebar .sidebar-section-label { display: none; }
        /* Desktop scrollbars must not squeeze the fixed-size icon rail. */
        .klassin-ui.sidebar-compact #sidebar nav { padding: 0 6px 10px !important; scrollbar-width: none; scrollbar-gutter: auto; }
        .klassin-ui.sidebar-compact #sidebar nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
        .klassin-ui.sidebar-compact #sidebar nav li { margin: 4px 0; }
        .klassin-ui.sidebar-compact #sidebar .nav-link, .klassin-ui.sidebar-compact #sidebar nav a:not(.nav-link) { box-sizing: border-box; width: 48px; min-width: 48px; height: 48px; flex: 0 0 48px; min-height: 48px; padding: 6px !important; border-radius: 12px; font-size: 0; line-height: 0; gap: 0; justify-content: center; color: transparent !important; }
        .klassin-ui.sidebar-compact #sidebar .nav-link i, .klassin-ui.sidebar-compact #sidebar nav a:not(.nav-link) i { width: 36px !important; min-width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; font-size: 18px; color: #72b8ac !important; background: #ffffff04; box-shadow: none; transform: none; }
        .klassin-ui.sidebar-compact #sidebar .nav-link:hover, .klassin-ui.sidebar-compact #sidebar nav a:not(.nav-link):hover { background: #ffffff0b !important; box-shadow: none; }
        .klassin-ui.sidebar-compact #sidebar .nav-link.bg-white\/20 { background: #ffffff1a !important; box-shadow: none !important; }
        .klassin-ui.sidebar-compact #sidebar .nav-link.bg-white\/20 i { color: #c4f3e9 !important; background: #ffffff16; box-shadow: inset 0 0 0 1px #ffffff0d; }
        .klassin-ui.sidebar-compact #sidebar .nav-link.bg-white\/20::before { top: 13px; bottom: 13px; width: 3px; }
        .klassin-ui.sidebar-compact #sidebar .nav-link[data-target="dashboard"] { padding: 5px !important; }
        .klassin-ui.sidebar-compact #sidebar .nav-link[data-target="dashboard"] i { width: 38px !important; min-width: 38px; height: 38px; flex: 0 0 38px; font-size: 20px; }
        .klassin-ui.sidebar-compact #sidebar .nav-link[data-target="dashboard"].bg-white\/20 { background: #224d52 !important; }
        .klassin-ui.sidebar-compact #sidebar .nav-link[data-target="dashboard"].bg-white\/20 i { background: #355f64; color: #c0f0e6 !important; box-shadow: inset 0 0 0 1px #ffffff0d; }
        .klassin-ui.sidebar-compact #sidebar .nav-link[data-target="dashboard"].bg-white\/20::before { top: 12px; bottom: 12px; background: #66c0b4; }
        .klassin-ui.sidebar-compact #sidebar .sidebar-account-panel { margin: 8px 5px 12px; padding: 4px; border-radius: 11px; justify-content: center; }
        .klassin-ui.sidebar-compact #sidebar .sidebar-account-avatar, .klassin-ui.sidebar-compact #sidebar .sidebar-account-copy { display: none; }
        .klassin-ui.sidebar-compact #sidebar .sidebar-logout-button { width: 38px; flex-basis: 38px; }
        .klassin-ui.on-dashboard #app-main-content { max-width: 1500px; margin: 0 auto; width: 100%; }
        .klassin-ui.role-student .klassin-dashboard-layout { grid-template-columns: minmax(0,1fr); max-width: 1100px; margin: 0 auto; }
    }
    @media (max-width: 767px) {
        .klassin-ui .app-topbar { min-height: 66px; padding: 12px 14px; gap: 8px; }
        .klassin-ui #page-title { font-size: 17px; }
        .klassin-ui .app-topbar > div:first-child { gap: 8px; }
        .klassin-ui .dashboard-title-brand { gap: 7px; }
        .klassin-ui .dashboard-title-logo { width: 38px; height: 38px; }
        .klassin-ui .dashboard-title-name { font-size: 24px; }
        .klassin-ui .dashboard-title-subtitle { display: block; font-size: 7px; }
        .klassin-ui .app-topbar > div:first-child > button { min-width: 28px; min-height: 44px; color: #4b5563; }
        .klassin-ui .app-topbar > div:first-child > button i { font-size: 24px; }
        .klassin-ui :is(.topbar-notification-button, .topbar-clock-card) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
        .klassin-ui #app-main-content { padding: 14px 14px calc(94px + env(safe-area-inset-bottom)); }
        .klassin-ui.on-dashboard #app-main-content { --klassin-main-gutter: 14px; padding-top: 0; padding-bottom: 0; }
        .klassin-ui .klassin-dashboard-surface { padding-top: 18px; padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
        .klassin-ui #klassin-buddy-dock { bottom: calc(86px + env(safe-area-inset-bottom)); right: 14px; }
        .klassin-ui #main-fab-btn { width: 42px !important; height: 42px !important; font-size: 16px !important; background: #0b6f60 !important; box-shadow: 0 2px 10px #042c2426 !important; }
        .klassin-ui .klassin-dashboard-layout { gap: 18px; }
        .klassin-ui .klassin-dashboard-layout > div:first-child { gap: 18px; }
        .klassin-ui :is(#student-welcome-card, #admin-welcome-card) { padding: 14px; }
        .klassin-ui #student-welcome-card { padding: 14px var(--klassin-main-gutter) 18px; }
        .klassin-ui #student-welcome-card .student-welcome-layout { grid-template-columns: 72px minmax(0,1fr) 70px; gap: 12px; }
        .klassin-ui #student-welcome-card .student-welcome-photo-wrap, .klassin-ui #student-welcome-card .student-welcome-photo { width: 72px; }
        .klassin-ui #student-welcome-card .student-welcome-photo { height: 96px; }
        .klassin-ui #student-welcome-card .student-welcome-camera-btn { width: 26px; height: 26px; font-size: 11px; }
        .klassin-ui #student-welcome-card .student-welcome-info > p { font-size: 12px; }
        .klassin-ui #student-welcome-card #dash-student-name-display { font-size: 18px; }
        .klassin-ui #student-welcome-card .student-welcome-meta { gap: 2px 5px; font-size: 11px; }
        .klassin-ui #student-welcome-card .student-welcome-qr-card { width: 70px; height: 82px; grid-template-rows: 58px 12px; padding: 4px; }
        .klassin-ui #student-welcome-card .student-welcome-qr { width: 58px; height: 58px; }
        .klassin-ui #student-welcome-card .student-welcome-qr-card span { font-size: 9px; line-height: 14px; }
        .klassin-ui #student-welcome-card .student-welcome-today { gap: 8px; }
        .klassin-ui #student-welcome-card .student-today-item { padding: 10px 8px 10px 34px; min-height: 112px; }
        .klassin-ui #student-welcome-card .student-today-label { font-size: 11px; }
        .klassin-ui #student-welcome-card .student-today-label > i { top: 13px; left: 9px; font-size: 20px; }
        .klassin-ui #student-welcome-card .student-today-line strong { font-size: 16px; }
        .klassin-ui #student-welcome-card .student-today-meta { font-size: 11px; }
        .klassin-ui #student-welcome-card .student-today-advisor { font-size: 10px; }
        .klassin-ui .klassin-staff-name h2 { font-size: 18px; }
        .klassin-ui .klassin-staff-stats > div { padding: 12px 8px; gap: 6px; }
        .klassin-ui .klassin-staff-stats > div > div:first-of-type { display: none; }
        .klassin-ui .klassin-staff-stats h3 { font-size: 23px; }
        .klassin-ui .klassin-staff-stats p { font-size: 10px; white-space: normal; }
        .klassin-ui .student-score-folder-compact { padding: 11px 9px; }
        .klassin-ui #dashboard-today-summary > .bg-white { padding: 14px; }
        .klassin-ui .klassin-bottom-nav {
            display: grid; grid-template-columns: repeat(var(--klassin-nav-columns,5),minmax(0,1fr));
            align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
            padding: 9px 10px calc(9px + env(safe-area-inset-bottom)); min-height: 70px;
            border: 0; background: var(--ui-navigation-surface); box-shadow: none;
        }
        .klassin-ui .klassin-nav-item { min-width: 0; min-height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 2px; color: var(--ui-navigation-ink); background: transparent; }
        .klassin-ui .klassin-nav-item .klassin-action-symbol { font-size: 19px; line-height: 24px; }
        .klassin-ui .klassin-nav-item .klassin-action-label { font-size: 10px; }
        .klassin-ui .klassin-nav-item.is-active { color: var(--ui-navigation-active); font-weight: 700; }
        .klassin-ui .klassin-nav-center .klassin-action-symbol { width: 44px; height: 44px; margin-top: -21px; display: grid; place-items: center; background: var(--ui-navigation-active); color: #fff; border-radius: 50%; border: 3px solid var(--ui-navigation-surface); }
        .klassin-ui .swal2-title { font-size: 19px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .klassin-ui .klassin-inbox.is-revealing { animation: none; }
        .klassin-ui .klassin-primary-action .klassin-action-symbol { transition: none; transform: none !important; }
    }
}

@media screen {
    .klassin-reference-staff.on-dashboard #view-dashboard #admin-welcome-card.klassin-staff-flight-enabled { position: relative; isolation: isolate; }
    .klassin-reference-staff #admin-welcome-card.klassin-staff-flight-enabled > :not(.klassin-staff-paper-flight-lane) { position: relative; z-index: 1; }
    .klassin-staff-paper-flight-lane { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: layout paint; }
    .klassin-staff-paper-plane { position: absolute; left: 0; top: 0; display: block; width: 28px; height: 21px; opacity: 0; pointer-events: none; user-select: none; transform-origin: center; filter: drop-shadow(0 2px 2px #37677730); will-change: transform, opacity; }
    .klassin-staff-paper-plane img { display: block; width: 100%; height: 100%; }
    .klassin-staff-paper-plane::before { content: ''; position: absolute; right: calc(100% + 3px); top: 50%; width: 14px; height: 1px; background: linear-gradient(90deg, transparent, #aac5cc); }
    @media (prefers-reduced-motion: reduce) {
        .klassin-staff-paper-flight-lane { display: none; }
    }
}
/* Reference dashboard: one white identity band followed by compact teal sections. */
@media screen {
    .klassin-ui { --reference-mint: #defaf3; --reference-teal: #005b61; }
    .klassin-reference-staff.on-dashboard #app-main-content { --klassin-main-gutter: 24px; padding-top: 0; }
    .klassin-reference-staff .klassin-dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
    .klassin-reference-staff .klassin-dashboard-layout > div:first-child { gap: 16px; }
    .klassin-reference-staff #admin-welcome-card {
        display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: center; gap: 20px;
        width: calc(100% + var(--klassin-main-gutter) * 2);
        margin: 0 calc(var(--klassin-main-gutter) * -1); padding: 12px var(--klassin-main-gutter);
        min-height: 120px; background: #fff !important; border: 0; border-radius: 0; box-shadow: none;
    }
    .klassin-reference-staff .klassin-staff-identity { display: flex; align-items: center; gap: 20px; min-width: 0; }
    .klassin-reference-staff .klassin-staff-photo-wrap { position: relative; flex: 0 0 auto; }
    .klassin-reference-staff .klassin-staff-avatar { width: 90px; height: 120px; border: 0; padding: 0; border-radius: 8px; background: #cbdedd; cursor: zoom-in; }
    .klassin-reference-staff .klassin-staff-photo-camera { position: absolute; right: -5px; bottom: -5px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #0284c7; background: #eaf5fc; font-size: 13px; cursor: pointer; }
    .klassin-reference-staff .klassin-staff-photo-camera:hover { color: #0369a1; background: #d9effb; }
    .klassin-reference-staff .klassin-staff-avatar:hover { outline: 2px solid #0ea5e9; outline-offset: 2px; }
    .klassin-reference-staff .klassin-staff-name { display: flex; flex-direction: column; gap: 2px; }
    .klassin-reference-staff .klassin-staff-name p { margin: 0; color: #2d6460; font-size: 13px; line-height: 1.6; }
    .klassin-reference-staff .klassin-staff-name h2 { margin: 0; color: #004c49; font-size: 21px; line-height: 1.6; }
    .klassin-reference-staff #klassin-dashboard-date { display: block; margin: 0; color: #326763; font-size: 11px; line-height: 1.6; }
    .klassin-reference-staff .klassin-staff-stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
    .klassin-reference-staff .klassin-staff-stats > div { display: grid; grid-template-columns: auto auto; align-content: center; align-items: center; justify-content: center; min-width: 0; gap: 3px 5px; padding: 4px 8px; background: transparent; color: #005653; border-left: 1px solid #dce6e3; }
    .klassin-reference-staff .klassin-staff-stats > div > i { display: block; font-size: 16px; }
    .klassin-reference-staff .klassin-staff-stats span { font-size: 11px; }
    .klassin-reference-staff .klassin-staff-stats strong { grid-column: 1 / -1; justify-self: center; max-width: 100%; min-width: 0; font-size: 20px; line-height: 1.25; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .klassin-reference-staff .klassin-staff-stats > .klassin-student-count-carousel { display: block; min-width: 0; }
    .klassin-reference-staff .klassin-staff-stats > .klassin-student-count-carousel > .klassin-student-count-viewport { display: block; width: 100%; height: 48px; overflow: hidden; }
    .klassin-student-count-track { animation: klassin-student-count-slide 8s ease-in-out infinite; }
    .klassin-student-count-slide { height: 48px; display: grid; align-content: center; justify-items: center; gap: 2px; }
    .klassin-student-count-heading { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 18px; }
    .klassin-student-count-heading > i { flex: 0 0 auto; font-size: 13px; }
    .klassin-reference-staff .klassin-student-count-heading > span { min-width: 0; font-size: 10px; line-height: 1.3; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
    .klassin-reference-staff .klassin-staff-stats > .klassin-subject-count-carousel { display: block; min-width: 0; }
    .klassin-reference-staff .klassin-staff-stats > .klassin-subject-count-carousel > .klassin-subject-count-viewport { display: block; width: 100%; height: 48px; overflow: hidden; }
    .klassin-subject-count-track { display: flex; width: 200%; animation: klassin-subject-count-slide 9s ease-in-out 2s infinite; }
    .klassin-subject-count-slide { flex: 0 0 50%; width: 50%; min-width: 0; }
    .klassin-student-count-carousel:hover .klassin-student-count-track,
    .klassin-subject-count-carousel:hover .klassin-subject-count-track,
    .klassin-ui.klassin-ui-blocked :is(.klassin-student-count-track, .klassin-subject-count-track),
    .klassin-ui:not([data-klassin-view="dashboard"]) :is(.klassin-student-count-track, .klassin-subject-count-track) { animation-play-state: paused; }
    @keyframes klassin-student-count-slide {
        0%, 40%, 100% { transform: translateY(0); }
        50%, 90% { transform: translateY(-50%); }
    }
    @keyframes klassin-subject-count-slide {
        0%, 40%, 100% { transform: translateX(0); }
        50%, 90% { transform: translateX(-50%); }
    }
    .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon) > i {
        display: inline-block;
        animation: var(--klassin-shortcut-animation, klassin-glyph-glow) 1600ms ease-in-out var(--klassin-shortcut-delay, 0ms);
        transform-origin: center;
        backface-visibility: hidden;
    }
    .klassin-shortcut-animated .fa-flag { transform-origin: 12% 80%; }
    .klassin-shortcut-animated :is(.fa-chart-simple, .fa-chart-bar, .fa-chart-line, .fa-chart-pie) { transform-origin: center bottom; }
    @keyframes klassin-flag-wave {
        0%, 100% { transform: skewY(0) scaleX(1); }
        18%, 54% { transform: skewY(-9deg) scaleX(.92); }
        36%, 72% { transform: skewY(7deg) scaleX(1.05); }
        88% { transform: skewY(-3deg) scaleX(.98); }
    }
    @keyframes klassin-page-turn {
        0%, 100% { transform: perspective(70px) rotateY(0); }
        30% { transform: perspective(70px) rotateY(-28deg); }
        65% { transform: perspective(70px) rotateY(22deg); }
    }
    @keyframes klassin-clock-tick {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(-12deg); }
        50% { transform: rotate(12deg); }
        75% { transform: rotate(-5deg); }
    }
    @keyframes klassin-chart-grow {
        0%, 100% { transform: scaleY(1); }
        25% { transform: scaleY(.68); }
        60% { transform: scaleY(1.12); }
        82% { transform: scaleY(.94); }
    }
    @keyframes klassin-scan-flash {
        0%, 100% { opacity: 1; filter: brightness(1); }
        25%, 65% { opacity: .5; filter: brightness(1.7); }
        45%, 85% { opacity: 1; filter: brightness(1.15); }
    }
    @keyframes klassin-screen-glow {
        0%, 100% { filter: brightness(1); text-shadow: none; }
        40%, 70% { filter: brightness(1.4); text-shadow: 0 0 5px #8eeafa; }
    }
    @keyframes klassin-star-shine {
        0%, 100% { filter: brightness(1); transform: scale(1); }
        40% { filter: brightness(1.7); transform: scale(1.12); }
        70% { filter: brightness(1.2); transform: scale(.96); }
    }
    @keyframes klassin-send-drift {
        0%, 100% { transform: translate(0,0); }
        40% { transform: translate(3px,-3px); }
        75% { transform: translate(-1px,1px); }
    }
    @keyframes klassin-search-sweep {
        0%, 100% { transform: rotate(0); }
        30% { transform: rotate(-15deg); }
        65% { transform: rotate(15deg); }
    }
    @keyframes klassin-glyph-glow {
        0%, 100% { opacity: 1; text-shadow: none; }
        45% { opacity: .75; text-shadow: 0 0 5px #b8fff0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon) > i { animation: none; }
        .klassin-student-count-track { animation: none; }
        .klassin-subject-count-track { display: grid; width: 100%; animation: none; }
        .klassin-reference-staff .klassin-staff-stats > .klassin-student-count-carousel > .klassin-student-count-viewport { height: auto; }
        .klassin-reference-staff .klassin-staff-stats > .klassin-subject-count-carousel > .klassin-subject-count-viewport { height: auto; }
        .klassin-subject-count-slide { width: 100%; }
        .klassin-student-count-slide { height: auto; min-height: 48px; }
    }
    .klassin-reference-staff .klassin-primary-panel { padding: 0 0 14px; border-bottom: 1px solid #75aaa3; }
    .klassin-reference-staff .klassin-primary-action { padding: 0; min-height: 86px; gap: 8px; font-size: 14px; font-weight: 700; }
    .klassin-reference-staff .klassin-primary-action .klassin-action-symbol { width: 66px; height: 66px; font-size: 30px; background: #00c987; }
    .klassin-reference-staff .tone-blue .klassin-action-symbol { background: #00bad4; }
    .klassin-reference-staff .tone-amber .klassin-action-symbol { background: #ffb921; }
    .klassin-reference-staff .tone-violet .klassin-action-symbol { background: #9268ec; }
    .klassin-reference-staff .klassin-section-heading { padding-bottom: 7px; }
    .klassin-reference-staff .klassin-section-heading h3,
    .klassin-reference-staff .klassin-shortcuts-title,
    .klassin-reference-staff .dashboard-overview-subjects > div:first-child > p,
    .klassin-reference-staff .dashboard-overview-column > section > h3 { color: #f6fffc; font-size: 18px; font-weight: 700; }
    .klassin-reference-staff .klassin-section-heading button { width: auto; height: 32px; padding: 0; border-radius: 0; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }
    .klassin-reference-staff .klassin-inbox-row { display: grid; grid-template-columns: 42px minmax(0,1fr) 28px 12px; gap: 10px; padding: 10px 12px; background: #f0f7f5; color: #2f5650; margin-bottom: 5px; }
    .klassin-reference-staff .klassin-inbox-row.is-assembly { background: #fff8e7; color: #955b08; }
    .klassin-reference-staff .klassin-inbox-row.is-leave { background: #e5f3ff; color: #0c5b9b; }
    .klassin-reference-staff .klassin-inbox-row .klassin-action-symbol { display: grid; place-items: center; width: 40px; height: 40px; font-size: 22px; border-radius: 50%; background: #fff0bf; }
    .klassin-reference-staff .klassin-inbox-row.is-leave .klassin-action-symbol { background: #c9e3ff; }
    .klassin-reference-staff .klassin-inbox-row .klassin-action-label { color: #172d2a; font-size: 15px; font-weight: 700; }
    .klassin-reference-staff .klassin-inbox-row small { display: block; font-size: 11px; color: #496661; font-weight: 400; }
    .klassin-reference-staff .klassin-inbox-count { font-size: 23px; line-height: 1; text-align: center; }
    .klassin-reference-staff #view-dashboard .dashboard-quick-menu-heading { display: flex; flex-direction: row; align-items: center; gap: 10px; border: 0; margin: 0; padding: 0 0 8px; }
    .klassin-reference-staff .klassin-shortcuts-title { flex: 1; }
    .klassin-reference-staff #view-dashboard .dashboard-quick-tabs { display: flex; width: auto; flex: 0 0 auto; border: 0; padding: 0; background: transparent; gap: 4px; }
    .klassin-reference-staff #view-dashboard .dashboard-quick-tab { padding: 5px; min-height: 28px; min-width: 28px; font-size: 12px; background: transparent; border-bottom: 1px solid transparent; border-radius: 0; }
    .klassin-reference-staff #view-dashboard .dashboard-quick-tab.active { color: #fff; background: transparent; border-bottom-color: #bcdfd7; }
    .klassin-reference-staff #view-dashboard .dashboard-quick-tab span { display: none; }
    .klassin-reference-staff #dashboard-quick-panel-main { border-bottom: 1px solid #75aaa3; padding-bottom: 14px; }
    .klassin-reference-staff #view-dashboard .dashboard-overview-column { height: auto; gap: 16px; }
    .klassin-reference-staff #view-dashboard #dashboard-assembly-overview-card { position: static; inset: auto; height: auto; }
    .klassin-reference-staff #view-dashboard .dashboard-overview-subject-list { gap: 6px; grid-auto-rows: max-content; padding: 0; }
    .klassin-reference-staff #view-dashboard .dashboard-overview-subject-row { min-height: 0; grid-template-columns: minmax(0,1fr) 40px; background: #fff; }
    .klassin-reference-staff .dashboard-overview-subject-main { flex-direction: row; align-items: center; padding: 10px; gap: 10px; }
    .klassin-reference-staff .dashboard-overview-subject-level { flex: 0 0 58px; min-height: 64px; align-self: center; background: #e7f4fa; color: #0c3640; border: 0; border-radius: 6px; padding: 6px; align-items: center; justify-content: center; }
    .klassin-reference-staff .dashboard-overview-subject-level-caption { display: none; }
    .klassin-reference-staff .dashboard-overview-subject-level strong { font-size: 23px; }
    .klassin-reference-staff .dashboard-overview-subject-name { font-size: 15px; color: #102a27; }
    .klassin-reference-staff .dashboard-overview-subject-title-row { flex-wrap: wrap; gap: 2px 8px; font-size: 11px; color: #48635e; }
    .klassin-reference-staff .dashboard-overview-subject-code { font-size: 11px; }
    .klassin-reference-staff .dashboard-overview-gradebook-label,
    .klassin-reference-staff .dashboard-overview-subject-meta { display: none; }
    .klassin-reference-staff .klassin-performance-bar { display: flex; width: 100%; height: 7px; border-radius: 3px; overflow: hidden; background: #e3e9e6; margin: 5px 0 3px; }
    .klassin-performance-bar .is-strong { background: #23b98a; }
    .klassin-performance-bar .is-middle { background: #ffc52e; }
    .klassin-performance-bar .is-weak { background: #fa5c68; }
    .klassin-reference-staff .dashboard-subject-performance-heading { font-size: 0; margin: 0; }
    .klassin-reference-staff .dashboard-subject-performance-heading > span { font-size: 9px; }
    .klassin-reference-staff .dashboard-subject-performance { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
    .klassin-reference-staff .dashboard-subject-performance > span { display: inline-flex; align-items: center; gap: 3px; padding: 0; background: none; color: #294844; border: 0; font-size: 11px; }
    .klassin-reference-staff .dashboard-subject-performance > span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #23b98a; }
    .klassin-reference-staff .dashboard-subject-performance > .is-middle::before { background: #ffc52e; }
    .klassin-reference-staff .dashboard-subject-performance > .is-weak::before { background: #fa5c68; }
    .klassin-reference-staff .dashboard-subject-performance > span > span:last-child { display: none; }
    .klassin-reference-staff .dashboard-subject-performance strong { font-size: 11px; }
    .klassin-subject-actions { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 5px; }
    .klassin-subject-open { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: #e8f4fa; color: #154b56; font-size: 17px; }
    .klassin-reference-staff .dashboard-overview-subject-chart { width: 26px; height: 22px; min-width: 26px; background: #fff; color: #527b74; border: 0; font-size: 12px; }
    .klassin-reference-staff .dashboard-overview-all-gradebook { background: none; color: #edfffa; padding: 4px 0; font-size: 11px; }
    .klassin-reference-staff .dashboard-overview-subjects > div:first-child > p i { display: none; }
    .klassin-reference-staff .dashboard-overview-column > section > h3 { margin-bottom: 8px; }
    .klassin-advisory-row { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,1fr)); width: 100%; background: #f0fcf8; border-radius: 6px; padding: 10px; text-align: left; color: #104c47; }
    .klassin-advisory-room { font-size: 20px; font-weight: 700; align-self: center; }
    .klassin-advisory-room small { display: block; font-size: 10px; font-weight: 400; }
    .klassin-advisory-stat { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 0 4px; align-items: center; padding: 0 7px; border-left: 1px solid #c4e6dd; }
    .klassin-advisory-stat i { grid-row: span 2; font-size: 20px; color: #0eb776; }
    .klassin-advisory-stat span { font-size: 10px; }
    .klassin-advisory-stat strong { font-size: 20px; line-height: 1.2; }
    .klassin-advisory-stat.is-late i { color: #f7ad00; }
    .klassin-advisory-stat.is-missing i { color: #f46b6b; }
    .klassin-announcement-row { display: grid; grid-template-columns: 58px minmax(0,1fr) 14px; align-items: center; gap: 12px; width: 100%; background: #fff; color: #264b46; padding: 10px; border-radius: 6px; text-align: left; margin-bottom: 6px; }
    .klassin-announcement-row .klassin-action-symbol { display: grid; place-items: center; height: 42px; background: #e2f6ed; color: #0b8677; border-radius: 6px; font-size: 23px; }
    .klassin-announcement-row .klassin-action-label { font-size: 14px; }
    .klassin-announcement-row small { display: block; font-size: 11px; color: #6b7b75; }
    .klassin-announcement-empty { padding: 12px; background: #f1faf6; border-radius: 6px; color: #54736c; font-size: 12px; }
    .klassin-dashboard-extra { margin-top: 18px; }
    .klassin-dashboard-extra > summary { display: flex; justify-content: space-between; padding: 10px 0; color: #c8e8de; border-top: 1px solid #75aaa3; cursor: pointer; font-size: 12px; }
    .klassin-dashboard-extra > summary::-webkit-details-marker { display: none; }
    .klassin-dashboard-extra[open] > summary i { transform: rotate(180deg); }
    @media (min-width: 768px) {
        .klassin-reference-staff.on-dashboard #app-main-content { max-width: 1100px; }
        .klassin-reference-staff .dashboard-overview-subject-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (min-width: 768px) and (max-width: 1023px) {
        .klassin-reference-staff #admin-welcome-card { grid-template-columns: minmax(0,1fr) 200px; gap: 12px; }
    }
    @media (min-width: 768px) and (max-width: 1279px) {
        .klassin-reference-staff .klassin-staff-stats strong { font-size: 24px; line-height: 1.15; }
        .klassin-reference-staff .klassin-student-count-heading > span { font-size: 12px; }
        .klassin-reference-staff .klassin-student-count-heading > i { font-size: 14px; }
    }
    @media (max-width: 767px) {
        .klassin-reference-staff.on-dashboard #app-main-content { --klassin-main-gutter: 13px; padding-left: 13px; padding-right: 13px; }
        .klassin-reference-staff #admin-welcome-card { grid-template-columns: minmax(0,1fr) 72px; padding-top: 8px; padding-bottom: 8px; gap: 10px; min-height: 100px; }
        .klassin-reference-staff .klassin-staff-identity { gap: 14px; }
        .klassin-reference-staff .klassin-staff-avatar { width: 76px; height: 100px; font-size: 30px; }
        .klassin-reference-staff .klassin-staff-name h2 { font-size: 18px; line-height: 1.6; }
        .klassin-reference-staff .klassin-staff-name p { font-size: 12px; line-height: 1.6; }
        .klassin-reference-staff #klassin-dashboard-date { font-size: 11px; line-height: 1.6; }
        .klassin-reference-staff .klassin-staff-stats { grid-template-columns: minmax(0,1fr); gap: 4px; }
        .klassin-reference-staff .klassin-staff-stats > div { padding: 2px 4px; gap: 2px 4px; }
        .klassin-reference-staff .klassin-staff-stats > div > i { font-size: 13px; }
        .klassin-reference-staff .klassin-staff-stats span { font-size: 10px; }
        .klassin-reference-staff .klassin-staff-stats strong { font-size: 18px; }
        .klassin-reference-staff .klassin-primary-action { min-height: 70px; font-size: 12px; gap: 6px; }
        .klassin-reference-staff .klassin-primary-action .klassin-action-symbol { width: 48px; height: 48px; font-size: 24px; }
        .klassin-reference-staff .klassin-section-heading h3,
        .klassin-reference-staff .klassin-shortcuts-title,
        .klassin-reference-staff .dashboard-overview-subjects > div:first-child > p,
        .klassin-reference-staff .dashboard-overview-column > section > h3 { font-size: 16px; }
        .klassin-reference-staff .klassin-inbox-row { padding: 6px 10px; grid-template-columns: 34px minmax(0,1fr) 24px 10px; gap: 8px; }
        .klassin-reference-staff .klassin-inbox-row .klassin-action-symbol { width: 32px; height: 32px; font-size: 18px; }
        .klassin-reference-staff .klassin-inbox-row .klassin-action-label { font-size: 13px; line-height: 1.3; }
        .klassin-reference-staff .klassin-inbox-row small { font-size: 10px; line-height: 1.3; }
        .klassin-reference-staff .klassin-section-heading button { height: 24px; }
        .klassin-reference-staff .dashboard-overview-subject-main { padding: 8px; gap: 9px; }
        .klassin-reference-staff .dashboard-overview-subject-level { flex-basis: 43px; min-height: 56px; }
        .klassin-reference-staff .dashboard-overview-subject-level strong { font-size: 19px; }
        .klassin-reference-staff .dashboard-overview-subject-name { font-size: 13px; line-height: 1.35; }
        .klassin-reference-staff .dashboard-overview-subject-title-row { line-height: 1.3; }
        .klassin-reference-staff .dashboard-subject-performance-heading > span { font-size: 9px; line-height: 1.2; }
        .klassin-reference-staff .dashboard-subject-performance-heading { line-height: 1.2; }
        .klassin-reference-staff .dashboard-subject-performance > span { line-height: 1.3; }
        .klassin-reference-staff .dashboard-subject-performance { gap: 6px; }
        .klassin-reference-staff .dashboard-subject-performance > span { font-size: 10px; }
        .klassin-reference-staff .dashboard-subject-performance strong { font-size: 10px; }
        .klassin-reference-staff .klassin-nav-item .klassin-action-symbol { font-size: 22px; }
        .klassin-reference-staff .klassin-nav-center .klassin-action-symbol { width: 52px; height: 52px; margin-top: -26px; font-size: 23px; }
        .klassin-advisory-row { padding: 7px; }
        .klassin-advisory-room { font-size: 17px; line-height: 1.1; }
        .klassin-advisory-room small { font-size: 9px; line-height: 1.3; }
        .klassin-advisory-stat { padding: 0 5px; grid-template-columns: 17px minmax(0,1fr); }
        .klassin-advisory-stat i { font-size: 17px; }
        .klassin-advisory-stat span { font-size: 9px; line-height: 1.3; }
        .klassin-advisory-stat strong { font-size: 18px; line-height: 1.1; }
        .klassin-announcement-row { padding: 8px; grid-template-columns: 46px minmax(0,1fr) 14px; }
        .klassin-announcement-row .klassin-action-symbol { height: 32px; font-size: 20px; }
        .klassin-announcement-row .klassin-action-label { font-size: 13px; line-height: 1.3; }
        .klassin-announcement-row small { font-size: 10px; line-height: 1.3; }
    }
    @media (max-width: 359px) {
        .klassin-reference-staff #admin-welcome-card { grid-template-columns: minmax(0,1fr) 68px; gap: 8px; }
        .klassin-reference-staff .klassin-staff-identity { gap: 12px; }
        .klassin-reference-staff .klassin-staff-name h2 { font-size: 17px; }
        .klassin-ui .app-topbar { padding-left: 10px; padding-right: 10px; }
        .klassin-ui .dashboard-title-logo { width: 34px; height: 34px; }
        .klassin-ui .dashboard-title-name { font-size: 22px; }
        .klassin-ui .dashboard-title-subtitle { font-size: 6px; }
        .klassin-ui :is(.topbar-notification-button, .topbar-clock-card) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
        .klassin-reference-staff .klassin-primary-grid { gap: 6px; }
        .klassin-reference-staff .klassin-primary-action { font-size: 11px; }
        .klassin-reference-staff .dashboard-quick-tab span { display: none; }
        .klassin-advisory-stat { grid-template-columns: minmax(0,1fr); justify-items: center; padding: 0 3px; }
        .klassin-advisory-stat i { display: none; }
    }
}

/* Desktop staff dashboard follows the original side-by-side working layout. */
@media screen and (min-width: 1024px) {
    .klassin-reference-staff.on-dashboard #app-scroll-main { background: #f3f5f7; }
    .klassin-reference-staff.on-dashboard #app-main-content { max-width: 1800px; margin: 0 auto; padding: 24px; }
    .klassin-reference-staff.on-dashboard #view-dashboard {
        display: grid;
        grid-template-columns: minmax(0,1.65fr) minmax(340px,1fr);
        grid-template-rows: max-content max-content minmax(0,1fr);
        grid-template-areas: 'identity courses' 'workspace courses' 'extra courses';
        gap: 20px 24px;
        align-items: start;
        align-content: start;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard > .klassin-dashboard-surface,
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-dashboard-layout { display: contents; }
    .klassin-reference-staff.on-dashboard #view-dashboard #admin-welcome-card {
        grid-area: identity; width: 100%; margin: 0; padding: 16px 20px;
        grid-template-columns: minmax(0,1fr) 190px; gap: 18px;
        border-top: 3px solid #0c8d75; border-bottom: 1px solid #e0e7e5;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-avatar { width: 72px; height: 96px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-name { gap: 2px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-name h2 { font-size: 20px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-dashboard-workspace {
        grid-area: workspace; grid-column: auto; min-width: 0; gap: 18px;
        padding: 18px 20px; background: #fff; border-bottom: 1px solid #e0e7e5;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-column {
        grid-area: courses; min-width: 0; gap: 22px; padding: 20px;
        background: #fff; border-top: 3px solid #13a4c1; border-bottom: 1px solid #e0e7e5;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-dashboard-extra {
        grid-area: extra; min-width: 0; margin-top: 0; color: #294844;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-dashboard-extra > summary {
        padding: 14px 0; color: #294844; border-color: #d5e1dd; font-size: 14px;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-dashboard-extra #dashboard-folders {
        grid-template-columns: repeat(auto-fit,minmax(min(110px,100%),1fr));
    }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-today-summary { grid-template-columns: minmax(0,1fr); }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-today-summary > div { grid-column: auto; min-width: 0; }
    .klassin-reference-staff.on-dashboard #view-dashboard :is(.klassin-section-heading h3, .klassin-shortcuts-title, .dashboard-overview-column > section > h3) { color: #173c38; font-size: 16px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-section-heading button { color: #087c70; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-primary-panel { border-color: #e1e9e5; padding-bottom: 16px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-primary-action {
        flex-direction: row; justify-content: center; align-items: center; gap: 9px;
        min-height: 60px; color: #224b44; font-size: 13px;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-primary-action .klassin-action-symbol { width: 42px; height: 42px; flex: 0 0 42px; font-size: 22px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-quick-menu-heading { flex-wrap: wrap; padding-bottom: 14px; gap: 12px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-quick-tabs { gap: 6px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-quick-tab { color: #58736d; min-height: 34px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 6px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-quick-tab span { display: inline; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-quick-tab.active { color: #006c60; background: #e5f5ee; border-bottom-color: #0c8d75; border-radius: 4px; }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 16px 8px; border: 0; padding: 0; }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main > button { min-height: 92px !important; padding: 8px 3px !important; gap: 10px; border-radius: 6px; color: #254c45; }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main h4 { color: #254c45 !important; font-size: 12px !important; font-weight: 600 !important; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-utility-symbol { width: 44px !important; height: 44px !important; flex-basis: 44px; color: #087568; border-color: #75b5a8; font-size: 19px; }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main > button:hover { background: #eff8f3 !important; }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main > button:hover .klassin-utility-symbol { background: #e0f2e9; color: #006c60; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subjects > div:first-child > p { color: #173c38; font-size: 16px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subjects > div:first-child > p i { display: inline-block; color: #1399b4; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-all-gradebook { color: #087c70; font-size: 12px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-list {
        grid-template-columns: minmax(0,1fr); max-height: min(62dvh,620px);
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
        scrollbar-color: #a7c5bd #f1f6f4; padding-right: 5px; gap: 10px;
    }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-row { grid-template-columns: minmax(0,1fr) 34px; border-color: #dae5e1; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-main { align-items: stretch; padding: 12px; gap: 10px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-level { flex-basis: 48px; min-height: 70px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-level strong { font-size: 20px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-name { font-size: 14px; line-height: 1.5; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-subject-summary { display: none; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-overview-subject-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 4px; font-size: 10px; color: #59756c; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-top: 5px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance > span { display: flex; flex-direction: column; gap: 0; padding: 4px 2px; font-size: 10px; border-radius: 2px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance > span::before { display: none; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance strong { font-size: 14px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance > .is-strong { background: #e5f7eb; color: #186a43; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance > .is-middle { background: #fff6d3; color: #8b6310; }
    .klassin-reference-staff.on-dashboard #view-dashboard .dashboard-subject-performance > .is-weak { background: #ffe8eb; color: #a52b43; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-advisory-row { grid-template-columns: minmax(0,1.2fr) repeat(3,minmax(0,1fr)); }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-advisory-room { font-size: 17px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-advisory-stat { padding: 0 4px; grid-template-columns: minmax(0,1fr); justify-items: center; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-advisory-stat i { display: none; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-announcement-row { background: #f6f9f8; grid-template-columns: 42px minmax(0,1fr) 12px; gap: 8px; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .klassin-reference-staff.on-dashboard #view-dashboard #admin-welcome-card { grid-template-columns: minmax(0,1fr) 132px; gap: 12px; padding: 14px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-stats > div { padding: 4px 3px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-student-count-heading { gap: 3px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-student-count-heading > i { font-size: 13px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-identity { gap: 12px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-avatar { width: 60px; height: 80px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-staff-name h2 { font-size: 18px; }
    .klassin-reference-staff.on-dashboard #view-dashboard .klassin-primary-action { flex-direction: column; gap: 6px; font-size: 12px; min-height: 78px; }
}
@media screen and (min-width: 1280px) {
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
}
@media screen and (min-width: 1600px) {
    .klassin-reference-staff.on-dashboard #view-dashboard { grid-template-columns: minmax(0,1.9fr) minmax(380px,1fr); }
    .klassin-reference-staff.on-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
}

/* Student workspaces share the staff dashboard layout on tablets and desktops. */
@media screen and (min-width: 768px) {
    .klassin-ui.role-student.on-dashboard #app-scroll-main { background: #f3f5f7; }
    .klassin-ui.role-student.on-dashboard #app-main-content { max-width: 1100px; margin: 0 auto; padding: 24px; }
    .klassin-ui.role-student.on-dashboard #view-dashboard {
        display: grid; grid-template-columns: minmax(0,1fr);
        grid-template-areas: 'identity' 'today' 'shortcuts' 'stats' 'scores' 'attendance';
        gap: 20px; align-items: start; align-content: start;
    }
    .klassin-ui.role-student.on-dashboard #view-dashboard :is(.klassin-dashboard-surface, .klassin-dashboard-layout, .klassin-dashboard-workspace, #student-welcome-card, #student-dashboard-data) { display: contents; }
    .klassin-ui.role-student.on-dashboard #student-dashboard-data > * { margin: 0; min-width: 0; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card > .student-welcome-layout {
        grid-area: identity; grid-template-columns: 72px minmax(0,1fr) 88px; gap: 14px;
        padding: 16px 20px; background: #fff; border-top: 3px solid #0c8d75; border-bottom: 1px solid #e0e7e5;
    }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-photo-wrap,
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-photo { width: 72px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-photo { height: 96px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-info > p { margin-bottom: 3px; font-size: 12px; color: #2d6460; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card #dash-student-name-display { font-size: 20px; line-height: 1.5; color: #004c49; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-meta { margin-top: 4px; gap: 2px 8px; font-size: 12px; color: #326763; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-qr-card { width: 88px; height: 98px; padding: 4px; grid-template-rows: 74px 14px; border: 0; background: #fff; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-qr { width: 74px; height: 74px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-qr-card span { font-size: 10px; line-height: 14px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today { grid-area: today; margin: 0; padding: 16px; background: #fff; border-top: 3px solid #13a4c1; border-bottom: 1px solid #e0e7e5; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today .student-dashboard-status-grid { gap: 10px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-item { position: relative; min-height: 96px; padding: 10px 10px 10px 38px; border-radius: 6px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-label { font-size: 12px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-label > i { position: absolute; top: 14px; left: 11px; font-size: 19px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-line strong { font-size: 18px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today :is(.student-today-meta, .student-today-advisor) { font-size: 11px; }
    .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-lesson.assembly-status-present { background: #c8effb; border-color: #bae8f5; color: #074868; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-panel { grid-area: shortcuts; padding: 18px 20px; background: #fff; border-bottom: 1px solid #e0e7e5; color: #173c38; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-header { border-color: #e1e9e5; padding-bottom: 12px; margin-bottom: 12px; }
    .klassin-ui.role-student.on-dashboard :is(.student-quick-menu-header h3, .student-score-card-header h3) { color: #173c38; font-size: 16px; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px 8px; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-button { min-height: 92px; padding: 8px 3px; gap: 10px; color: #254c45; justify-content: flex-start; }
    .klassin-ui.role-student.on-dashboard :is(.student-quick-menu-profile, .student-quick-menu-media, .student-quick-menu-assembly) { grid-column: auto; order: 0; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-button .student-quick-menu-icon { width: 44px; height: 44px; flex-basis: 44px; border: 1.5px solid #75b5a8; border-radius: 50%; background: transparent; color: #087568; font-size: 19px; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-button .student-quick-menu-label { min-height: 0; color: #254c45; font-size: 12px; font-weight: 600; }
    .klassin-ui.role-student.on-dashboard .student-quick-menu-button:hover { background: #eff8f3; border-radius: 6px; }
    .klassin-ui.role-student.on-dashboard .student-self-check-shortcut.checked .student-quick-menu-icon { background: #e5f7eb; color: #167047; border-color: #83bf98; }
    .klassin-ui.role-student.on-dashboard .student-self-check-shortcut.submitted .student-quick-menu-icon { background: #fff3d1; color: #946100; border-color: #e6c66a; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats { grid-area: stats; border: 0; border-bottom: 1px solid #e0e7e5; border-radius: 0; gap: 0; background: #fff; overflow: visible; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats > div { min-width: 0; min-height: 86px; padding: 12px 10px; background: #fff; border-left: 1px solid #e1e9e5; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats > div:first-child { border-left: 0; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats p { font-size: 11px; color: #617571; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats h4 { font-size: 22px; line-height: 1.3; font-variant-numeric: tabular-nums; color: #0865a9; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats > div:nth-child(2) h4 { color: #16834b; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats > div:nth-child(3) h4 { color: #9a6700; }
    .klassin-ui.role-student.on-dashboard #student-quick-stats > div:nth-child(4) h4 { color: #b6384a; }
    .klassin-ui.role-student.on-dashboard .student-score-card { grid-area: scores; margin: 0 !important; padding: 18px 20px !important; background: #fff; border-top: 3px solid #13a4c1; border-bottom: 1px solid #e0e7e5; color: #173c38; }
    .klassin-ui.role-student.on-dashboard .student-score-card-header { border-bottom: 1px solid #e1e9e5; padding-bottom: 12px; margin-bottom: 12px; }
    .klassin-ui.role-student.on-dashboard .student-score-card-header p { color: #617571; font-size: 11px; }
    .klassin-ui.role-student.on-dashboard .student-score-card-header-icon { color: #1399b4; }
    .klassin-ui.role-student.on-dashboard .student-score-card-count { color: #0865a9; background: #e6f4fb; border-color: #c6dfe9; white-space: nowrap; }
    .klassin-ui.role-student.on-dashboard #student-dash-scores { min-width: 0; }
    .klassin-ui.role-student.on-dashboard .student-score-folder.student-score-folder-compact { grid-template-columns: minmax(0,1fr) 110px 10px; gap: 8px; padding: 12px 10px; }
    .klassin-ui.role-student.on-dashboard .student-score-folder-compact .student-score-folder-title { font-size: 14px; }
    .klassin-ui.role-student.on-dashboard .student-score-folder-compact .student-score-overview { grid-template-columns: minmax(0,1fr) 42px; gap: 6px; }
    .klassin-ui.role-student.on-dashboard .student-score-folder-compact .student-score-overview-value strong,
    .klassin-ui.role-student.on-dashboard .student-score-folder-compact .student-score-grade-value { font-size: 22px; }
    .klassin-ui.role-student.on-dashboard #student-dashboard-data > .bg-white { grid-area: attendance; padding: 18px 20px; background: #fff; color: #173c38; border: 0; border-bottom: 1px solid #e0e7e5; border-radius: 0; }
    .klassin-ui.role-student.on-dashboard #student-dashboard-data > .bg-white > h3 { color: #173c38; font-size: 16px; border-color: #e1e9e5; }
    .klassin-ui.role-student.on-dashboard #student-dash-attendance { font-size: 12px; }
    .klassin-ui.role-student.on-dashboard #student-dash-attendance :is(th, td) { padding: 10px 8px; }
    .klassin-ui.role-student.on-dashboard #student-dash-attendance td:first-child { max-width: 180px; }
    @media (min-width: 1024px) {
        .klassin-ui.role-student.on-dashboard #app-main-content { max-width: 1800px; }
        .klassin-ui.role-student.on-dashboard #view-dashboard {
            grid-template-columns: minmax(0,1.65fr) minmax(340px,1fr);
            grid-template-rows: repeat(3,max-content) minmax(0,1fr);
            grid-template-areas: 'identity overview' 'shortcuts overview' 'stats overview' 'attendance overview';
            gap: 20px 24px;
        }
        .klassin-ui.role-student.on-dashboard .klassin-student-overview { grid-area: overview; display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 20px; background: #fff; border-top: 3px solid #13a4c1; border-bottom: 1px solid #e0e7e5; }
        .klassin-ui.role-student.on-dashboard .klassin-student-overview #student-welcome-today { padding: 0; border: 0; background: transparent; }
        .klassin-ui.role-student.on-dashboard .klassin-student-overview .student-score-card { padding: 0 !important; border: 0; }
        .klassin-ui.role-student.on-dashboard #student-welcome-today .student-dashboard-status-grid { grid-template-columns: minmax(0,1fr); }
        .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-item { min-height: 78px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-line { flex-direction: row; align-items: baseline; gap: 4px 10px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-today .student-today-line strong { font-size: 16px; }
        .klassin-ui.role-student.on-dashboard #student-dash-scores { max-height: min(62dvh,620px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a7c5bd #f1f6f4; padding-right: 4px; }
    }
    @media (min-width: 1024px) and (max-width: 1279px) {
        .klassin-ui.role-student.on-dashboard #student-welcome-card > .student-welcome-layout { grid-template-columns: 60px minmax(0,1fr) 72px; padding: 14px; gap: 12px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-photo-wrap,
        .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-photo { width: 60px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-photo { height: 80px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-card #dash-student-name-display { font-size: 18px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-qr-card { width: 72px; height: 86px; grid-template-rows: 58px 16px; }
        .klassin-ui.role-student.on-dashboard #student-welcome-card .student-welcome-qr { width: 58px; height: 58px; }
        .klassin-ui.role-student.on-dashboard .student-quick-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    }
    @media (min-width: 1280px) {
        .klassin-ui.role-student.on-dashboard .student-quick-menu-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
    }
    @media (min-width: 1600px) {
        .klassin-ui.role-student.on-dashboard #view-dashboard { grid-template-columns: minmax(0,1.9fr) minmax(380px,1fr); }
    }
}

/* Highlight the existing rotating pair without moving shortcut controls. */
@media screen {
    .klassin-ui #view-dashboard :is(#dashboard-quick-panel-main, #dashboard-quick-panel-activities, #dashboard-quick-panel-documents, .student-quick-menu-grid) {
        --klassin-shortcut-rgb: 45,212,191;
        --klassin-shortcut-ink: #0f766e;
    }
    .klassin-ui #view-dashboard :is(button[onclick*="Assembly"], button[onclick*="assembly"], button[onclick*="home_visit"], .document-quick-leave) { --klassin-shortcut-rgb: 52,211,153; --klassin-shortcut-ink: #047857; }
    .klassin-ui #view-dashboard :is(button[onclick*="subjects"], button[onclick*="Scanning"], button[onclick*="scanning"], .activity-quick-main, .document-quick-travel) { --klassin-shortcut-rgb: 56,189,248; --klassin-shortcut-ink: #0369a1; }
    .klassin-ui #view-dashboard :is(button[onclick*="scoring"], .activity-quick-tournament, .document-quick-salary) { --klassin-shortcut-rgb: 251,191,36; --klassin-shortcut-ink: #92400e; }
    .klassin-ui #view-dashboard :is(button[onclick*="exam"], button[onclick*="Timetable"], .document-quick-increment) { --klassin-shortcut-rgb: 167,139,250; --klassin-shortcut-ink: #6d28d9; }
    .klassin-ui #view-dashboard :is(button[onclick*="randomizer"], button[onclick*="Lookup"]) { --klassin-shortcut-rgb: 251,113,133; --klassin-shortcut-ink: #be123c; }
    .klassin-ui #view-dashboard :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon) {
        position: relative; isolation: isolate; overflow: visible; transform: none;
        transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
    }
    .klassin-ui #view-dashboard :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon) > i { position: relative; z-index: 1; }
    .klassin-ui #view-dashboard :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::before {
        content: ''; position: absolute; inset: -5px; padding: 2px; border-radius: inherit;
        background: conic-gradient(from 0deg, transparent 10%, rgba(var(--klassin-shortcut-rgb),.2) 30%, rgb(var(--klassin-shortcut-rgb)) 47%, transparent 65%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        opacity: 0; pointer-events: none;
    }
    .klassin-ui #view-dashboard :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::after {
        content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
        background: linear-gradient(115deg, transparent 35%, #ffffff80 48%, transparent 61%) 150% 0 / 300% 100% no-repeat;
    }
    .klassin-ui #view-dashboard .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon) {
        box-shadow: 0 0 0 4px rgba(var(--klassin-shortcut-rgb),.13), inset 0 0 0 1px rgba(var(--klassin-shortcut-rgb),.35);
    }
    .klassin-ui #view-dashboard .klassin-shortcut-animated .klassin-utility-symbol {
        border-color: rgb(var(--klassin-shortcut-rgb)); background-color: rgba(var(--klassin-shortcut-rgb),.2);
    }
    .klassin-ui #view-dashboard .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::before {
        animation: klassin-shortcut-contour 2600ms ease-in-out var(--klassin-shortcut-delay, 0ms);
    }
    .klassin-ui #view-dashboard .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::after {
        animation: klassin-shortcut-sheen 2000ms ease-in-out var(--klassin-shortcut-delay, 0ms);
    }
    .klassin-ui #view-dashboard :is(#dashboard-quick-panel-main, #dashboard-quick-panel-activities, #dashboard-quick-panel-documents, .student-quick-menu-grid) > button:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; }
    @keyframes klassin-shortcut-contour {
        0%, 100% { opacity: 0; transform: rotate(0deg); }
        18% { opacity: 1; }
        75% { opacity: 1; }
        95% { opacity: 0; transform: rotate(300deg); }
    }
    @keyframes klassin-shortcut-sheen {
        0%, 100% { opacity: 0; background-position: 150% 0; }
        15% { opacity: .85; }
        80% { opacity: .85; background-position: -50% 0; }
        95% { opacity: 0; background-position: -50% 0; }
    }
    @media (hover: hover) {
        .klassin-ui #view-dashboard #dashboard-quick-panel-main > button:not(:disabled):hover .klassin-utility-symbol {
            border-color: rgb(var(--klassin-shortcut-rgb)); background-color: rgba(var(--klassin-shortcut-rgb),.2);
            box-shadow: 0 0 0 4px rgba(var(--klassin-shortcut-rgb),.13);
        }
        .klassin-ui #view-dashboard :is(#dashboard-quick-panel-main, #dashboard-quick-panel-activities, #dashboard-quick-panel-documents, .student-quick-menu-grid) > button:not(:disabled):hover :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::before { opacity: 1; }
    }
    @media (min-width: 1024px) {
        .klassin-reference-staff.on-dashboard #view-dashboard :is(.klassin-shortcut-animated, button:not(:disabled):hover) .klassin-utility-symbol { color: var(--klassin-shortcut-ink); }
    }
    @media (max-width: 1023px) {
        .klassin-ui #view-dashboard #dashboard-quick-panel-main > button { overflow: visible; }
    }
    @media (prefers-reduced-motion: reduce) {
        .klassin-ui #view-dashboard :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon) { transition: none; }
        .klassin-ui #view-dashboard .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::before,
        .klassin-ui #view-dashboard .klassin-shortcut-animated :is(.klassin-utility-symbol, .activity-quick-icon, .student-quick-menu-icon)::after { animation: none; }
    }
}

.klassin-advisory-carousel { display: none; }
@media screen {
    .klassin-desktop-only, .klassin-primary-category { display: none; }
}
@media screen {
    body.klassin-ui.klassin-desktop-dashboard { --ui-navigation-surface: #f1f6f6; --klassin-home-photo-width: 120px; --klassin-home-photo-height: 160px; }
    body.klassin-ui.klassin-desktop-dashboard #app-scroll-main { background: #f1f6f6; }
    body.klassin-ui.klassin-desktop-dashboard #app-main-content { width: 100%; max-width: 1800px; padding: 10px 32px 36px; margin: 0 auto; }
    body.klassin-ui.klassin-desktop-dashboard .app-topbar { min-height: 60px; padding: 8px 32px; background: #f1f6f6 !important; border-color: #e0eaea; }
    body.klassin-ui.klassin-desktop-dashboard #page-title { display: none; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-date { display: inline-flex; align-items: center; gap: 10px; color: #758b89; font-size: 14px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-date > i { color: #6dbfaf; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-clock-card { display: inline-flex; flex-direction: row; align-items: center; width: auto; min-width: 116px; height: 36px; min-height: 36px; gap: 9px; padding: 0 15px; background: #fff; border: 1px solid #deebea; border-radius: 22px; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-clock-mobile-icon { font-size: 15px; color: #56a99b; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-clock-time { display: inline; font-size: 14px; color: #526e69; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-notification-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; background: #fff; border: 1px solid #deebea; border-radius: 50%; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-notification-button > i { font-size: 17px; color: #367a72; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard > .klassin-dashboard-surface,
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-dashboard-layout,
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-dashboard-workspace { display: contents; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-dashboard-nav { order: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 58px; padding: 6px; border: 1px solid #e1ebea; border-radius: 17px; background: #ffffffed; box-shadow: 0 3px 12px #173d3905; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 16px; min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: #708781; font-size: 13px; white-space: nowrap; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab .klassin-action-symbol { color: #6bbbb0; font-size: 17px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab.is-active { background: #0c5055; color: #fff; font-weight: 700; box-shadow: 0 5px 10px #0c50551c; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab.is-active .klassin-action-symbol { color: #91ddce; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab:not(.is-active):hover { color: #155c55; background: #eaf5f1; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #admin-welcome-card { order: 1; display: flex; justify-content: space-between; width: 100%; min-height: 114px; padding: 0 0 2px; margin: 0; border: 0; background: transparent !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-identity { gap: 20px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-avatar { width: var(--klassin-home-photo-width); height: var(--klassin-home-photo-height); border-radius: 8px; background: #e0ecea; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name { gap: 3px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name h2 { color: #112e31; font-size: 26px; line-height: 1.45; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name p { font-size: 14px; color: #728b84; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-dashboard-date { font-size: 12px; color: #78918a; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-stats { display: none; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary { order: 2; padding: 24px 28px 28px; margin: 0; border: 0; border-radius: 25px; background: linear-gradient(115deg,#10565c,#093a3e 78%); color: #fff; box-shadow: 0 9px 22px #123e3a0c; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #1a4342; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-section-title > i { font-size: 17px; color: #3a9c8d; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-section-title h3 { margin: 0; font-size: 17px; font-weight: 700; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-staff-primary .klassin-desktop-section-title { color: #b9d8d4; font-weight: 400; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-staff-primary .klassin-desktop-section-title h3 { font-size: 14px; font-weight: 400; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-staff-primary .klassin-desktop-section-title > i { color: #89c8bb; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 142px; padding: 16px; border: 1px solid #ffffff0a; border-radius: 16px; color: #fff; background: #ffffff0b; text-align: left; transition: background .18s ease, border-color .18s ease; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action:hover { transform: none; background: #ffffff15; border-color: #9ee8d53d; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action .klassin-action-symbol { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; margin-bottom: 3px; border-radius: 12px; background: #a1e5d414; color: #9ee5d6; font-size: 21px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action .klassin-action-label { font-size: 14px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-primary-category { display: block; color: #9cbfba; font-size: 11px; line-height: 1.5; font-weight: 400; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-dashboard-metrics { display: block; order: 3; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-metrics-date { margin-left: auto; color: #859994; font-size: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-metrics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric { --metric-ink:#2d87a8; --metric-bg:#e3f1f7; display: flex; align-items: flex-start; position: relative; isolation: isolate; min-width: 0; min-height: 112px; padding: 18px; gap: 13px; overflow: hidden; border: 1px solid #e4ecea; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px #254f4704; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric.tone-mint { --metric-ink:#2d9a78; --metric-bg:#e1f5eb; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric.tone-violet { --metric-ink:#8371bd; --metric-bg:#f0ebf9; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric.tone-cyan { --metric-ink:#26959c; --metric-bg:#e1f3f4; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric.tone-amber { --metric-ink:#c58d36; --metric-bg:#fff4df; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric.tone-rose { --metric-ink:#bd6b7c; --metric-bg:#fce9ee; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric.tone-slate { --metric-ink:#758c92; --metric-bg:#edf2f3; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-symbol { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 46px; border-radius: 12px; color: var(--metric-ink); background: var(--metric-bg); font-size: 19px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy { display: flex; flex-direction: column; position: relative; z-index: 1; min-width: 0; gap: 2px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy > span { color: #7b918a; font-size: 12px; line-height: 1.5; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy strong { color: #173c38; font-size: 25px; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy small { color: #859994; font-size: 10px; line-height: 1.5; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-watermark { position: absolute; right: 12px; bottom: -5px; font-size: 72px; color: var(--metric-ink); opacity: .045; transform: rotate(-8deg); z-index: 0; pointer-events: none; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-dashboard-inbox { order: 4; padding: 0; background: transparent; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-dashboard-inbox-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-inbox-row { margin: 0; border: 1px solid #e7e6d8; border-radius: 12px; padding: 12px 16px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-shortcuts { order: 5; min-width: 0; padding: 0; border: 0; background: transparent; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-menu-heading { margin: 0 0 14px; padding: 0; border: 0; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tabs { padding: 4px; border: 1px solid #dfe9e6; border-radius: 12px; background: #fff; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tab { padding: 7px 14px; border: 0; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tab:not(.active) { color: #58736d; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tab.active { border: 0; border-radius: 8px; background: #0c5055; color: #fff; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(8,minmax(0,1fr)) !important; gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main > button { min-height: 94px !important; padding: 12px 6px !important; border: 1px solid #e2ebe8 !important; border-radius: 12px; background: #fff !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-utility-symbol { width: 36px !important; height: 36px !important; flex-basis: 36px; border: 0; border-radius: 10px; background: #eaf5f0; font-size: 18px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main > button { color: #254c45; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main h4 { color: #254c45 !important; font-weight: 600 !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main > button .klassin-utility-symbol { color: var(--klassin-shortcut-ink); background: rgba(var(--klassin-shortcut-rgb),.16); }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main > button:is(:hover, :focus-visible, .klassin-shortcut-animated) .klassin-utility-symbol { color: var(--klassin-shortcut-ink); background: rgba(var(--klassin-shortcut-rgb),.24); }
    body.klassin-ui.klassin-desktop-dashboard #dashboard-quick-panel-main > button[onclick*="subject_media"],
    body.klassin-ui.klassin-desktop-dashboard #dashboard-quick-panel-main > button[onclick*="ndlp_tablet"] { --klassin-shortcut-rgb: 34,211,238; --klassin-shortcut-ink: #0e7490; }
    body.klassin-ui.klassin-desktop-dashboard #dashboard-quick-panel-main > button[onclick*="advisory_room"] { --klassin-shortcut-rgb: 244,114,182; --klassin-shortcut-ink: #be185d; }
    body.klassin-ui.klassin-desktop-dashboard #dashboard-quick-panel-main > button[onclick*="executive_dashboard"] { --klassin-shortcut-rgb: 96,165,250; --klassin-shortcut-ink: #1d4ed8; }
    body.klassin-ui.klassin-desktop-dashboard #dashboard-quick-panel-main > button[onclick*="report"] { --klassin-shortcut-rgb: 167,139,250; --klassin-shortcut-ink: #6d28d9; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-column { order: 6; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: 'advisory announcements' 'courses courses'; min-width: 0; gap: 24px; padding: 0; border: 0; background: transparent; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-advisory { grid-area: advisory; min-width: 0; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-announcements { grid-area: announcements; min-width: 0; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-assembly-overview-card { grid-area: courses; min-width: 0; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-advisory-row { padding: 14px; background: #fff; border: 1px solid #e2ebe8; border-radius: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-announcement-row { min-height: 72px; padding: 14px; background: #fff; border: 1px solid #e2ebe8; border-radius: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-list { grid-template-columns: repeat(3,minmax(0,1fr)); max-height: 600px; overflow-y: auto; overscroll-behavior: contain; padding: 0 4px 0 0; gap: 16px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-row { border: 1px solid #e2ebe8; border-radius: 12px; overflow: hidden; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-main { padding: 14px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-level { flex-basis: 44px; min-height: 64px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-level strong { font-size: 19px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-name { font-size: 13px; overflow-wrap: anywhere; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-dashboard-extra { order: 7; margin: 0; min-width: 0; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subjects > div:first-child > p { color: #173c38; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-dashboard-extra > summary { color: #294844; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-today-summary { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-today-summary > div:first-child { grid-column: 1 / -1; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard :is(.klassin-section-heading h3, .klassin-shortcuts-title, .dashboard-overview-column > section > h3) { font-size: 17px; color: #1a4342; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.75fr); grid-template-areas: none; grid-template-rows: none; grid-auto-rows: max-content; align-items: start; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .dashboard-overview-column { display: contents; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard :is(#klassin-desktop-dashboard-nav, #admin-welcome-card, #klassin-staff-primary, #klassin-desktop-dashboard-metrics, #klassin-dashboard-inbox, #klassin-staff-shortcuts, #klassin-reference-advisory, #klassin-reference-announcements, #dashboard-assembly-overview-card, .klassin-dashboard-extra) { grid-area: auto; grid-column: 1 / -1; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #admin-welcome-card { align-self: center; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard:has(#klassin-reference-advisory:not([hidden])) #admin-welcome-card { grid-column: 1; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-reference-advisory { grid-column: 2; order: 1; align-self: center; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-reference-advisory > h3 { margin: 0 0 10px; font-size: 15px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-reference-announcements { order: 6; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #dashboard-assembly-overview-card { order: 7; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .klassin-dashboard-extra { order: 8; }
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #app-scroll-main { background: #f1f6f6; }
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #app-main-content { width: 100%; max-width: 1800px; padding: 10px 32px 36px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #view-dashboard { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #view-dashboard :is(#student-welcome-card, #student-dashboard-data) { display: contents; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-dashboard-data > * { grid-area: auto; min-width: 0; margin: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #view-dashboard :is(.student-welcome-layout, .klassin-student-overview) { grid-area: auto; min-width: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card > .student-welcome-layout { order: 1; grid-template-columns: var(--klassin-home-photo-width) minmax(0,1fr) calc(var(--klassin-home-photo-height) + 8px); padding: 4px 0; border: 0; background: transparent; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card :is(.student-welcome-photo-wrap, .student-welcome-photo) { width: var(--klassin-home-photo-width); }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-photo-wrap { align-self: center; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-photo { height: var(--klassin-home-photo-height); }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-qr-card { width: calc(var(--klassin-home-photo-height) + 8px); height: calc(var(--klassin-home-photo-height) + 8px); padding: 4px; grid-template-rows: minmax(0,1fr); gap: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-qr { width: var(--klassin-home-photo-height); height: var(--klassin-home-photo-height); }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card #dash-student-name-display { font-size: 26px; color: #112e31; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-panel { order: 2; padding: 24px 28px 28px; border: 0; border-radius: 25px; background: linear-gradient(115deg,#10565c,#093a3e 78%); }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-header { border: 0; margin-bottom: 16px; padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-header h3 { color: #b9d8d4; font-size: 14px; font-weight: 400; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button { align-items: flex-start; justify-content: flex-start; min-height: 120px; padding: 16px; border: 1px solid #ffffff0a; border-radius: 16px; background: #ffffff0b; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button .student-quick-menu-icon { width: 42px; height: 42px; flex-basis: 42px; border: 0; border-radius: 12px; background: #a1e5d414; color: #9ee5d6; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button .student-quick-menu-label { color: #fff; font-size: 13px; text-align: left; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button:hover { border-radius: 16px; background: #ffffff15; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats { order: 3; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; border: 0; background: transparent; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats > div { min-height: 110px; padding: 18px; border: 1px solid #e4ecea; border-radius: 16px; background: #fff; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .klassin-student-overview { order: 4; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 26px; border: 0; padding: 0; background: transparent; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .klassin-student-overview :is(#student-welcome-today, .student-score-card) { grid-area: auto; min-width: 0; align-self: start; padding: 20px !important; border: 1px solid #e2ebe8; border-radius: 16px; background: #fff; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-dashboard-data > .bg-white { order: 5; padding: 20px; border: 1px solid #e2ebe8; border-radius: 16px; background: #fff; }
    body.klassin-ui.klassin-desktop-dashboard.role-student :is(.student-score-card, #student-dashboard-data > .bg-white) { color: #173c38; }
    body.klassin-ui.klassin-desktop-dashboard.role-student :is(.student-score-card-header h3, #student-dashboard-data > .bg-white > h3) { color: #173c38; border-color: #e1e9e5; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-score-card-header p { color: #617571; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-score-card-header-icon { color: #1399b4; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-score-card-count { color: #0865a9; background: #e6f4fb; border-color: #c6dfe9; white-space: nowrap; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats p { color: #617571; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats h4 { color: #0865a9; font-size: 22px; line-height: 1.3; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats > div:nth-child(2) h4 { color: #16834b; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats > div:nth-child(3) h4 { color: #9a6700; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats > div:nth-child(4) h4 { color: #b6384a; }
    body.klassin-ui.klassin-desktop-dashboard.role-student :is(.student-quick-menu-profile, .student-quick-menu-media, .student-quick-menu-assembly) { grid-column: auto; order: 0; }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    body.klassin-ui.klassin-desktop-dashboard #app-main-content { padding-left: 24px; padding-right: 24px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab { padding: 10px 12px; font-size: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action { padding: 14px 11px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action .klassin-action-label { font-size: 13px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric { padding: 15px 12px; gap: 9px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width: 1279px) {
    body.klassin-ui.klassin-desktop-dashboard #app-main-content,
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #app-main-content { padding: 16px 20px 28px; }
    body.klassin-ui.klassin-desktop-dashboard .app-topbar { padding: 8px 20px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard,
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #view-dashboard { gap: 22px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-dashboard-nav { flex-wrap: nowrap; justify-content: flex-start; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b4d2c9 transparent; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab { flex: 0 0 auto; padding: 10px 13px; min-height: 44px; border-radius: 6px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-identity { gap: 14px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name h2,
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card #dash-student-name-display { font-size: 22px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name p { font-size: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-panel { padding: 18px; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-grid,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button { min-height: 120px; padding: 13px; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric { gap: 10px; padding: 14px 12px; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-symbol { flex-basis: 32px; width: 32px; height: 36px; border-radius: 8px; font-size: 17px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(6,minmax(0,1fr)) !important; gap: 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main > button { border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-overview-subject-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; overflow: visible; gap: 12px; padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard { grid-template-columns: minmax(0,1fr) minmax(310px,.9fr); }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-advisory-row { padding: 12px; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-advisory-stat { grid-template-columns: minmax(0,1fr); justify-items: center; padding: 0 6px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-advisory-stat i { display: none; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tab { min-height: 44px; padding: 8px 12px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .klassin-student-overview { gap: 18px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .klassin-student-overview :is(#student-welcome-today, .student-score-card),
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-dashboard-data > .bg-white { padding: 16px !important; border-radius: 8px; }
}
@media screen and (max-width: 1023px) {
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard { grid-template-columns: minmax(0,1fr); }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-reference-advisory { grid-column: 1; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard :is(.dashboard-overview-subject-list, #dashboard-today-summary),
    body.klassin-ui.klassin-desktop-dashboard #klassin-dashboard-inbox-list,
    body.klassin-ui.klassin-desktop-dashboard.role-student .klassin-student-overview { grid-template-columns: minmax(0,1fr); }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-dash-scores { max-height: none; overflow: visible; padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-quick-stats > div { min-height: 90px; padding: 14px; border-radius: 8px; }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    body.klassin-ui.klassin-desktop-dashboard { --klassin-home-photo-width: 96px; --klassin-home-photo-height: 128px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary-grid { grid-template-columns: none; grid-template-rows: minmax(0,1fr); grid-auto-flow: column; grid-auto-columns: minmax(92px,1fr); min-width: 0; max-width: 100%; gap: 8px; padding: 3px 0 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #75b8aa #ffffff08; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary .klassin-primary-action { min-height: 96px; padding: 10px 8px; gap: 6px; scroll-snap-align: start; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary .klassin-action-symbol { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; font-size: 18px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary .klassin-action-label { font-size: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-staff-primary .klassin-primary-category { display: block; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
}
@media screen and (max-width: 767px) {
    body.klassin-ui.klassin-desktop-dashboard { --klassin-home-photo-width: 80px; --klassin-home-photo-height: 108px; }
    body.klassin-ui.klassin-desktop-dashboard #app-main-content,
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #app-main-content { padding: 14px 14px calc(104px + env(safe-area-inset-bottom)); }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard,
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #view-dashboard { gap: 20px; }
    body.klassin-ui.klassin-desktop-dashboard .app-topbar { min-height: 64px; padding: 8px 14px; }
    body.klassin-ui.klassin-desktop-dashboard #page-title { display: block; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-date { display: none; }
    body.klassin-ui.klassin-desktop-dashboard .dashboard-title-logo { width: 32px; height: 32px; }
    body.klassin-ui.klassin-desktop-dashboard .dashboard-title-name { font-size: 22px; }
    body.klassin-ui.klassin-desktop-dashboard .dashboard-title-subtitle { font-size: 6px; }
    body.klassin-ui.klassin-desktop-dashboard :is(.topbar-clock-card, .topbar-notification-button) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-clock-time { display: none; }
    body.klassin-ui.klassin-desktop-dashboard .topbar-clock-mobile-icon { font-size: 20px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-dashboard-nav { display: none; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-tab { padding: 9px 12px; gap: 7px; font-size: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #admin-welcome-card { min-height: 96px; padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard:has(#klassin-reference-advisory:not([hidden])) { grid-template-columns: minmax(0,1fr) 76px; column-gap: 12px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-reference-advisory { grid-column: 2; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-reference-advisory > h3 { display: none; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-advisory .klassin-advisory-row { display: block; min-height: 84px; padding: 4px 0 4px 10px; border: 0; border-left: 1px solid #d3e3de; border-radius: 0; background: transparent; text-align: center; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-advisory :is(.klassin-advisory-stat, .klassin-advisory-room > small) { display: none; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-advisory .klassin-advisory-room { display: block; color: #0c5055; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-advisory .klassin-advisory-room::before { content: 'ห้องที่ปรึกษา'; display: block; margin-bottom: 6px; color: #58736d; font-size: 9px; font-weight: 400; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-reference-advisory .klassin-advisory-room::after { content: none; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-reference-advisory .klassin-advisory-carousel { display: block; height: 44px; margin-top: 4px; overflow: hidden; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-carousel-track { display: block; animation: klassin-advisory-cycle 24s cubic-bezier(.25,.75,.25,1) infinite; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide { --advisory-slide-ink: #0c5055; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; gap: 2px; color: var(--advisory-slide-ink); }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide.is-present { --advisory-slide-ink: #047857; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide.is-late { --advisory-slide-ink: #92400e; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide.is-absent { --advisory-slide-ink: #be123c; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide.is-missing { --advisory-slide-ink: #536b70; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide-label { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 9px; line-height: 12px; white-space: nowrap; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide strong { font-size: 22px; line-height: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-reference-advisory:is(:hover, :focus-within) .klassin-advisory-carousel-track,
    body.klassin-ui.klassin-desktop-dashboard.klassin-ui-blocked .klassin-advisory-carousel-track { animation-play-state: paused; }
    @keyframes klassin-advisory-cycle {
        0%, 16% { transform: translateY(0); }
        20%, 36% { transform: translateY(-16.666667%); }
        40%, 56% { transform: translateY(-33.333333%); }
        60%, 76% { transform: translateY(-50%); }
        80%, 96% { transform: translateY(-66.666667%); }
        100% { transform: translateY(-83.333333%); }
    }
    @media (prefers-reduced-motion: reduce) {
        body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-carousel-track { animation: none; display: flex; height: 44px; }
        body.klassin-ui.klassin-desktop-dashboard #klassin-reference-advisory .klassin-advisory-carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
        body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide { flex: 0 0 100%; scroll-snap-align: start; }
        body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide:last-child { display: none; }
    }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name { gap: 1px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-staff-name h2,
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card #dash-student-name-display { font-size: 20px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-dashboard-date { font-size: 11px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .klassin-staff-identity { gap: 10px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .klassin-staff-name h2 { font-size: 18px; line-height: 1.45; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .klassin-staff-name p { font-size: 11px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard #klassin-dashboard-date { font-size: 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-panel { padding: 14px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-section-title { margin-bottom: 12px; flex-wrap: wrap; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-section-title h3 { font-size: 16px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-grid,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-grid { gap: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button { min-height: 108px; padding: 12px 8px; gap: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action .klassin-action-symbol,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button .student-quick-menu-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 8px; font-size: 19px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-action .klassin-action-label,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button .student-quick-menu-label { font-size: 12px; min-height: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-panel { padding: 12px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-header { margin-bottom: 10px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button { min-height: 76px; padding: 10px 4px; gap: 6px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button .student-quick-menu-icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 6px; font-size: 16px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-exam-pass-check { width: 16px; height: 16px; top: -3px; right: -3px; font-size: 8px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-button .student-quick-menu-label { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0; white-space: nowrap; overflow-wrap: normal; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary { padding: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-staff-primary .klassin-desktop-section-title { margin-bottom: 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary .klassin-primary-action { min-height: 76px; padding: 10px 7px; gap: 6px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-staff-primary .klassin-action-symbol { width: 28px; height: 28px; flex-basis: 28px; margin: 0; border-radius: 6px; font-size: 16px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-primary-category { display: none; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-desktop-metrics-grid { gap: 10px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric { min-height: 110px; padding: 12px 10px; gap: 8px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy > span { font-size: 11px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy strong { font-size: 24px; white-space: nowrap; overflow-wrap: normal; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric-copy small { font-size: 9px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-menu-heading { align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tabs { gap: 2px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .dashboard-quick-tab { min-width: 40px; padding: 8px 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #dashboard-quick-panel-main > button { min-height: 94px !important; padding: 12px 5px !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-inbox-row { padding: 12px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student .klassin-student-overview { padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-dashboard-data > .bg-white > h3 { font-size: 15px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card > .student-welcome-layout { gap: 10px; min-height: 116px; padding: 0; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-info > p { font-size: 11px; margin: 0 0 3px; line-height: 1.5; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card #dash-student-name-display { font-size: 18px; line-height: 1.45; white-space: nowrap; overflow-wrap: normal; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-meta { margin-top: 3px; font-size: 11px; line-height: 1.5; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-qr-card { border: 0; border-radius: 4px; background: #fff; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card .student-welcome-qr { border-radius: 0; }
}
@media screen and (max-width: 359px) {
    body.klassin-ui.klassin-desktop-dashboard { --klassin-home-photo-width: 68px; --klassin-home-photo-height: 92px; }
    body.klassin-ui.klassin-desktop-dashboard #app-main-content,
    body.klassin-ui.klassin-desktop-dashboard.role-student.on-dashboard #app-main-content { padding-left: 10px; padding-right: 10px; }
    body.klassin-ui.klassin-desktop-dashboard .app-topbar { padding-left: 8px; padding-right: 8px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-desktop-metric { flex-direction: column; gap: 6px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard:has(#klassin-reference-advisory:not([hidden])) { grid-template-columns: minmax(0,1fr) 68px; column-gap: 10px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .klassin-staff-identity { gap: 8px; }
    body.klassin-ui.klassin-desktop-dashboard.klassin-reference-staff #view-dashboard .klassin-staff-name h2 { font-size: 16px; }
    body.klassin-ui.klassin-desktop-dashboard .klassin-advisory-slide strong { font-size: 20px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card > .student-welcome-layout { gap: 8px; min-height: 100px; }
    body.klassin-ui.klassin-desktop-dashboard.role-student #student-welcome-card #dash-student-name-display { font-size: 16px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard .klassin-primary-grid,
    body.klassin-ui.klassin-desktop-dashboard.role-student .student-quick-menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Directory reuses the daily-work panel and action components. */
@media screen {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel { padding: 24px 28px 28px; border: 0; border-radius: 25px; background: linear-gradient(115deg,#10565c,#093a3e 78%); color: #fff; box-shadow: 0 9px 22px #123e3a0c; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-directory-panel .klassin-desktop-section-title { color: #b9d8d4; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-directory-panel .klassin-desktop-section-title h3 { font-size: 14px; font-weight: 400; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-directory-panel .klassin-desktop-section-title > i { color: #89c8bb; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel #dashboard-folders { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui #view-dashboard #klassin-directory-panel .dashboard-directory-button { width: 100%; min-height: 84px; padding: 12px 14px; gap: 6px; justify-content: center; border-radius: 8px; cursor: pointer; box-shadow: none; }
    body.klassin-ui #view-dashboard #klassin-directory-panel :is(.dashboard-folder-level-name,.dashboard-folder-room-name) { display: block; width: 100%; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
    body.klassin-ui #view-dashboard #klassin-directory-panel [data-directory-stage="0"] :is(.dashboard-folder-level-name,.dashboard-folder-room-name) { font-size: 18px; }
    body.klassin-ui #view-dashboard #klassin-directory-panel :is(.dashboard-folder-level-count,.dashboard-folder-room-count) { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 11px; font-weight: 400; line-height: 1.5; }
    body.klassin-ui #view-dashboard #klassin-directory-panel .dashboard-folder-room-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
    body.klassin-ui #view-dashboard #klassin-directory-panel .dashboard-folder-room-face-count { padding: 0; border: 0; background: transparent; color: #9ee5d6; font-size: 11px; line-height: 1.5; }
    body.klassin-ui #view-dashboard #klassin-directory-panel #dashboard-folders .dashboard-directory-room-list { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; min-width: 0; max-width: 100%; }
    body.klassin-ui #klassin-directory-panel .dashboard-directory-back-row { grid-column: 1 / -1; }
    body.klassin-ui #klassin-directory-panel .dashboard-directory-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; color: #b9d8d4; font-size: 13px; font-weight: 600; }
    body.klassin-ui #klassin-directory-panel :is(.dashboard-directory-button,.dashboard-directory-back):focus-visible { outline: 2px solid #9ee5d6; outline-offset: 3px; }
    body.klassin-ui #klassin-directory-panel .dashboard-directory-empty { grid-column: 1 / -1; padding: 24px 12px; border: 1px dashed #9cbfba80; border-radius: 8px; color: #fff; text-align: center; }
    body.klassin-ui #klassin-directory-panel .dashboard-directory-empty > span { display: block; margin-top: 6px; color: #9cbfba; font-size: 12px; }
}
@media screen and (max-width: 1439px) {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel .dashboard-directory-button { padding: 12px; }
}
@media screen and (max-width: 1279px) {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel { padding: 18px; border-radius: 8px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel #dashboard-folders { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel .dashboard-directory-button { padding: 10px; }
}
@media screen and (min-width: 600px) and (max-width: 1279px) {
    body.klassin-ui #view-dashboard #klassin-directory-panel #dashboard-folders .dashboard-directory-room-list { grid-template-columns: none; grid-template-rows: minmax(0,1fr); grid-auto-flow: column; grid-auto-columns: minmax(96px,1fr); gap: 8px; padding: 3px 0 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #75b8aa #ffffff08; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel .dashboard-directory-button { min-height: 76px; padding: 10px 8px; gap: 4px; scroll-snap-align: start; }
    body.klassin-ui #view-dashboard #klassin-directory-panel :is(.dashboard-folder-level-count,.dashboard-folder-room-count) { font-size: 10px; }
}
@media screen and (max-width: 767px) {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel { padding: 12px; }
    body.klassin-ui.klassin-desktop-dashboard #klassin-directory-panel .klassin-desktop-section-title { margin-bottom: 10px; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel #dashboard-folders { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel .dashboard-directory-button { min-height: 72px; padding: 8px 7px; gap: 4px; align-items: flex-start; text-align: left; }
    body.klassin-ui #view-dashboard #klassin-directory-panel :is(.dashboard-folder-level-name,.dashboard-folder-room-name) { font-size: 22px; }
    body.klassin-ui #view-dashboard #klassin-directory-panel .dashboard-folder-room-stats { width: 100%; justify-content: flex-start; gap: 3px 6px; }
}
@media screen and (max-width: 359px) {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel #dashboard-folders { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media screen and (min-width: 600px) {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel #dashboard-folders.dashboard-folders-levels { grid-template-columns: none !important; grid-template-rows: minmax(0,1fr); grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); min-width: 0; max-width: 100%; gap: 8px; padding: 3px 0 8px; }
}
@media screen and (min-width: 600px) and (max-width: 959px) {
    body.klassin-ui.klassin-desktop-dashboard #view-dashboard #klassin-directory-panel .dashboard-folder-level-card { padding-left: 6px; padding-right: 6px; }
    body.klassin-ui #view-dashboard #klassin-directory-panel .dashboard-folder-level-name { font-size: 20px; }
}

/* Settings share the dashboard's quiet workspace and compact controls. */
@media screen {
    .klassin-ui #view-settings .system-settings-page-shell { width: 100%; max-width: none; margin: 0; padding: 0; }
    .klassin-ui #view-settings .system-settings-page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
    .klassin-ui #view-settings .system-settings-page-heading { min-width: 0; }
    .klassin-ui #view-settings .system-settings-page-title { gap: 12px; margin: 0; color: #1a4342; font-size: 22px; font-weight: 700; line-height: 1.4; }
    .klassin-ui #view-settings .system-settings-page-title > i { width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 8px; color: #167c6a; background: #dfefe9; font-size: 20px; }
    .klassin-ui #system-settings-result-count { margin: 5px 0 0 54px; color: #607269; font-size: 12px; }
    .klassin-ui #view-settings .system-settings-search { display: flex; align-items: center; gap: 9px; width: 320px; max-width: 100%; min-height: 44px; padding: 0 8px 0 13px; border: 1px solid #dbe6e4; border-radius: 8px; color: #82a59e; background: #fff; }
    .klassin-ui #view-settings .system-settings-search:focus-within { border-color: #348d7f; box-shadow: 0 0 0 3px #348d7f14; }
    .klassin-ui #view-settings #system-settings-search { width: 100%; min-width: 0; min-height: 42px; padding: 8px 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; color: #244c47; font-size: 14px; }
    .klassin-ui #system-settings-search::-webkit-search-cancel-button { -webkit-appearance: none; }
    .klassin-ui #system-settings-search::placeholder { color: #65786f; opacity: 1; }
    .klassin-ui #system-settings-search-clear { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; padding: 0; border: 0; border-radius: 6px; background: #f0f6f4; color: #617f78; }
    .klassin-ui #view-settings .system-settings-filter-bar { display: flex; gap: 5px; align-items: center; max-width: 100%; min-width: 0; margin-bottom: 20px; padding: 6px; overflow-x: auto; border: 1px solid #dbe6e4; border-radius: 8px; background: #fff; scrollbar-width: thin; scrollbar-color: #afcfc5 transparent; }
    .klassin-ui #view-settings .system-settings-filter-bar > button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-height: 42px; padding: 9px 14px; border: 0; border-radius: 6px; background: transparent; color: #526f65; font-size: 13px; font-weight: 600; white-space: nowrap; }
    .klassin-ui #view-settings .system-settings-filter-bar > button > i { color: #7bb9ac; font-size: 14px; }
    .klassin-ui #view-settings .system-settings-filter-bar > button > small { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 4px; background: #edf4f1; color: #537268; font-size: 10px; line-height: 1; }
    .klassin-ui #view-settings .system-settings-filter-bar > button:hover { background: #f0f6f4; }
    .klassin-ui #view-settings .system-settings-filter-bar > button[aria-pressed="true"] { color: #fff; background: #105158; box-shadow: 0 2px 4px #0f4b5012; }
    .klassin-ui #view-settings .system-settings-filter-bar > button[aria-pressed="true"] > i { color: #a0e3d4; }
    .klassin-ui #view-settings .system-settings-filter-bar > button[aria-pressed="true"] > small { color: #dcf6ee; background: #ffffff15; }
    .klassin-ui #view-settings .system-settings-menu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
    .klassin-ui #view-settings .system-settings-menu-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 16px; grid-template-rows: auto auto; align-content: center; align-items: center; justify-items: start; column-gap: 13px; row-gap: 4px; min-height: 100px; aspect-ratio: auto; padding: 16px; border: 1px solid #dbe6e4; border-radius: 8px; background: #fff; box-shadow: none; text-align: left; transform: none; transition: background-color .16s ease, border-color .16s ease; }
    .klassin-ui #view-settings .system-settings-menu-card:is(:hover,:active,:focus-visible) { border-color: #8fbbaf; background: #fafffd; box-shadow: none; transform: none; }
    .klassin-ui #view-settings .system-settings-menu-card:focus-visible { outline: 2px solid #278c76; outline-offset: 3px; }
    .klassin-ui #view-settings .system-settings-menu-card:is(.hidden,[hidden]) { display: none !important; }
    .klassin-ui #view-settings .system-settings-menu-card::before,
    .klassin-ui #view-settings .system-settings-menu-card::after,
    .klassin-ui #view-settings .system-settings-menu-icon::before,
    .klassin-ui #view-settings .system-settings-menu-icon::after { display: none; content: none; animation: none; }
    .klassin-ui #view-settings .system-settings-menu-card .system-settings-menu-icon { grid-column: 1; grid-row: 1 / 3; width: 42px; height: 42px; border: 0; border-radius: 8px; background: var(--settings-soft); color: var(--settings-tone); box-shadow: none; font-size: 20px; animation: none; transform: none; }
    .klassin-ui #view-settings .system-settings-menu-card .system-settings-menu-icon i { animation: none; transform: none; }
    .klassin-ui #view-settings .system-settings-menu-card > strong { grid-column: 2; grid-row: 1; display: block; align-self: end; min-height: 0; width: 100%; color: #234943; font-size: 14px; font-weight: 700; line-height: 1.5; }
    .klassin-ui #view-settings .system-settings-menu-card > small { grid-column: 2; grid-row: 2; display: block; align-self: start; min-height: 0; max-width: 100%; overflow: visible; color: #65786f; font-size: 12px; font-weight: 400; line-height: 1.55; -webkit-line-clamp: unset; overflow-wrap: anywhere; }
    .klassin-ui #view-settings .system-settings-menu-arrow { grid-column: 3; grid-row: 1 / 3; color: #91ada4; font-size: 12px; }
    .klassin-ui #view-settings .system-settings-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 220px; color: #607269; }
    .klassin-ui #view-settings .system-settings-empty > i { color: #aac4ba; font-size: 28px; }
    .klassin-ui #view-settings .system-settings-empty > strong { font-size: 15px; font-weight: 600; }
    .klassin-ui #system-settings-reset-filters { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid #cfdfd8; border-radius: 6px; background: #fff; color: #306958; font-size: 13px; }

    .klassin-ui #system-settings-modal { padding: 24px; }
    .klassin-ui #system-settings-modal .system-settings-modal-backdrop { background: #102e32a3; }
    .klassin-ui #system-settings-modal .system-settings-modal-dialog { width: min(880px,100%); max-height: min(880px,calc(100dvh - 48px)); border-color: #d7e4df; box-shadow: 0 18px 70px #10343538; }
    .klassin-ui #system-settings-modal .system-settings-modal-header { flex: 0 0 auto; gap: 12px; padding: 18px 20px; border: 0; background: #104e54; }
    .klassin-ui #system-settings-modal .system-settings-modal-icon { width: 40px; height: 40px; color: #ade8d8; background: #ffffff12; font-size: 19px; }
    .klassin-ui #system-settings-modal .system-settings-modal-heading h2 { margin: 0; color: #fff; font-size: 18px; font-weight: 700; white-space: normal; line-height: 1.5; overflow-wrap: anywhere; }
    .klassin-ui #system-settings-modal .system-settings-modal-heading p { margin-top: 3px; color: #b9d7d2; font-size: 12px; font-weight: 400; white-space: normal; line-height: 1.5; }
    .klassin-ui #system-settings-modal .system-settings-modal-close { width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff24; border-radius: 6px; color: #d2e7e1; background: #ffffff0c; font-size: 18px; }
    .klassin-ui #system-settings-modal .system-settings-modal-close:hover { color: #fff; background: #ffffff1b; }
    .klassin-ui #system-settings-modal .system-settings-modal-close:focus-visible { outline-color: #bdebdc; }
    .klassin-ui #system-settings-modal .system-settings-modal-content { padding: 22px; background: #fff; scrollbar-width: thin; scrollbar-color: #afcfc4 transparent; }
    .klassin-ui #system-settings-modal .is-system-settings-modal-panel { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .klassin-ui #system-settings-modal .is-system-settings-modal-panel :is(.shadow-sm,.shadow-md,.shadow-inner) { box-shadow: none; }
    .klassin-ui #system-settings-modal-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),select,textarea) { max-width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #ccded5; border-radius: 6px; background: #fff; color: #284c42; font-size: 14px; line-height: 1.5; }
    .klassin-ui #system-settings-modal-content input[type="password"] { padding-right: 44px; }
    .klassin-ui #system-settings-modal-content input[type="color"] { width: 40px; height: 40px; flex: 0 0 40px; padding: 2px; border: 1px solid #c9ded3; border-radius: 6px; background: #fff; }
    .klassin-ui #system-settings-modal-content :is(input[type="checkbox"],input[type="radio"],input[type="range"]) { accent-color: #16826c; }
    .klassin-ui #system-settings-modal-content :is(input.peer:checked + div,.fcm-enabled-toggle input:checked + span,.fcm-notification-option > input:checked + .fcm-notification-switch) { background: #16826c; }
    .klassin-ui #system-settings-modal-content :is(.fcm-enabled-toggle input:focus-visible + span,.fcm-notification-option > input:focus-visible + .fcm-notification-switch) { outline: 2px solid #16826c; outline-offset: 3px; }
    .klassin-ui #system-settings-modal-content input[type="range"] { height: 24px; appearance: auto; background: transparent; }
    .klassin-ui #system-settings-modal-content :is(button,label,p,small,span,div) { min-width: 0; }
    .klassin-ui #system-settings-modal-content button { border-radius: 6px; font-size: 13px; }
    .klassin-ui #system-settings-modal-content button:is([onclick^="save"],.teacher-backup-action,.fcm-action-button.is-primary) { min-height: 42px; padding: 10px 18px; border: 1px solid #105158; background: #105158; color: #fff; box-shadow: none; font-size: 14px; font-weight: 700; }
    .klassin-ui #system-settings-modal-content button:is([onclick^="save"],.teacher-backup-action,.fcm-action-button.is-primary):hover { background: #0b4248; border-color: #0b4248; }
    .klassin-ui #system-settings-modal-content :is(.text-gray-800,.text-gray-700) { color: #2e5045; }
    .klassin-ui #system-settings-modal-content :is(.text-gray-600,.text-gray-500) { color: #65786f; }
    .klassin-ui #system-settings-modal-content .klassin-buddy-setting-row { min-height: 72px; padding: 12px; border-color: #e1eae5; border-radius: 6px; background: #f7faf8; box-shadow: none; }
    .klassin-ui #system-settings-modal-content .scan-chrome-guide { margin-top: 22px; border-color: #dbe8e1; border-radius: 8px; background: #f6faf8; box-shadow: none; }
    .klassin-ui #system-settings-modal-content .scan-chrome-guide-header { background: transparent; }
    .klassin-ui #system-settings-modal-content .scan-chrome-guide-step { border-color: #dbe8e1; border-radius: 6px; background: #fff; box-shadow: none; }
    .klassin-ui #system-settings-modal-content .scan-chrome-guide-step strong { font-size: 13px; }
    .klassin-ui #system-settings-modal-content .scan-chrome-guide-step code { overflow-wrap: anywhere; white-space: normal; }
    .klassin-ui #system-settings-modal-content .teacher-backup-panel { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
    .klassin-ui #system-settings-modal-content .teacher-backup-panel-visual { justify-content: center; padding: 18px; border: 1px solid #dce8e1; border-radius: 8px; background: #eff7f3; }
    .klassin-ui #system-settings-modal-content .teacher-backup-panel-copy > strong { color: #254c42; font-size: 18px; }
    .klassin-ui #system-settings-modal-content .teacher-backup-action { align-self: flex-end; }
    .klassin-ui #system-settings-modal-content .fcm-settings-section { padding: 20px 0 0; border: 0; border-top: 1px solid #dfe9e3; border-radius: 0; background: transparent; box-shadow: none; }
    .klassin-ui #system-settings-modal-content .fcm-configuration-status { border-color: #dce8e0; border-radius: 8px; background: #eff7f3; box-shadow: none; }
    .klassin-ui #system-settings-modal-content .fcm-settings-section-heading h4 { color: #2b5146; font-size: 15px; }
    .klassin-ui #system-settings-modal-content .fcm-notification-option { border-color: #e1eae5; border-radius: 6px; background: #f7faf8; box-shadow: none; }
    .klassin-ui #system-settings-modal-content .fcm-notification-copy b { color: #315346; }
    .klassin-ui #system-settings-modal-content .fcm-notification-copy small { color: #65786f; }
    .klassin-ui #system-settings-modal-content :is(.fcm-action-button.is-secondary,.fcm-file-button) { border-color: #ccded3; color: #38705c; background: #fff; box-shadow: none; }
}
@media screen and (max-width: 1199px) {
    .klassin-ui #view-settings .system-settings-menu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width: 959px) {
    .klassin-ui #view-settings .system-settings-page-header { align-items: stretch; flex-direction: column; gap: 16px; }
    .klassin-ui #view-settings .system-settings-search { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
    .klassin-ui #view-settings .system-settings-menu-card { grid-template-columns: 32px minmax(0,1fr); padding: 12px; column-gap: 10px; }
    .klassin-ui #view-settings .system-settings-menu-card .system-settings-menu-icon { width: 32px; height: 32px; font-size: 17px; }
    .klassin-ui #view-settings .system-settings-menu-arrow { display: none; }
}
@media screen and (max-width: 767px) {
    .klassin-ui #view-settings .system-settings-page-header { align-items: stretch; flex-direction: column; gap: 16px; margin-bottom: 16px; }
    .klassin-ui #view-settings .system-settings-page-title { font-size: 20px; }
    .klassin-ui #view-settings .system-settings-search { width: 100%; }
    .klassin-ui #view-settings #system-settings-search { font-size: 16px; }
    .klassin-ui #view-settings .system-settings-filter-bar { margin-bottom: 14px; }
    .klassin-ui #view-settings .system-settings-filter-bar > button { min-height: 40px; padding: 8px 11px; font-size: 12px; }
    .klassin-ui #view-settings .system-settings-menu-grid { gap: 10px; }
    .klassin-ui #view-settings .system-settings-menu-card { grid-template-columns: 38px minmax(0,1fr) 14px; min-height: 90px; padding: 14px; column-gap: 11px; }
    .klassin-ui #view-settings .system-settings-menu-card .system-settings-menu-icon { width: 38px; height: 38px; font-size: 18px; }
    .klassin-ui #system-settings-modal { padding: 12px; }
    .klassin-ui #system-settings-modal .system-settings-modal-dialog { max-height: calc(100dvh - 24px); }
    .klassin-ui #system-settings-modal .system-settings-modal-header { padding: 15px; }
    .klassin-ui #system-settings-modal .system-settings-modal-heading h2 { font-size: 16px; }
    .klassin-ui #system-settings-modal .system-settings-modal-content { padding: 18px 15px; }
    .klassin-ui #system-settings-modal-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),select,textarea) { font-size: 16px; }
    .klassin-ui #system-settings-modal-content .teacher-backup-action { align-self: stretch; }
}
@media screen and (max-width: 599px) {
    .klassin-ui #view-settings .system-settings-menu-grid { grid-template-columns: minmax(0,1fr); }
    .klassin-ui #system-settings-modal .system-settings-modal-header { grid-template-columns: 34px minmax(0,1fr) 36px; gap: 10px; padding: 14px 12px; }
    .klassin-ui #system-settings-modal .system-settings-modal-icon { width: 34px; height: 34px; font-size: 17px; }
    .klassin-ui #system-settings-modal .system-settings-modal-close { width: 36px; height: 40px; }
    .klassin-ui #system-settings-modal-content .fcm-settings-actions { flex-direction: column-reverse; align-items: stretch; }
}
@media screen and (prefers-reduced-motion: reduce) {
    .klassin-ui #view-settings .system-settings-menu-card,
    .klassin-ui #system-settings-modal :is(.system-settings-modal-dialog,.system-settings-modal-backdrop) { transition: none; }
}

@media screen {
    .klassin-ui.klassin-ui-blocked #klassin-buddy-speech { display: none !important; }
    .klassin-ui .klassin-buddy-display-mode { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
    .klassin-ui .klassin-buddy-display-mode legend { margin-bottom: 10px; color: #2e5045; font-size: 14px; font-weight: 700; }
    .klassin-ui .klassin-buddy-display-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .klassin-ui .klassin-buddy-display-option { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 11px 12px; border: 1px solid #d4e3db; border-radius: 6px; background: #f7faf8; color: #45645a; cursor: pointer; font-size: 13px; font-weight: 700; }
    .klassin-ui .klassin-buddy-display-option input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: #16826c; }
    .klassin-ui .klassin-buddy-display-option i { color: #54897a; }
    .klassin-ui .klassin-buddy-display-option:has(input:checked) { border-color: #16826c; background: #e8f6f0; color: #175647; }
    .klassin-ui .klassin-buddy-display-option:has(input:focus-visible) { outline: 2px solid #16826c; outline-offset: 2px; }
    .klassin-ui .klassin-buddy-display-mode:disabled { opacity: .55; }
    .klassin-ui .klassin-buddy-display-mode:disabled label { cursor: default; }
    .klassin-buddy.buddy-entering { transform-origin: 50% 100%; animation: klassinBuddyArrive .62s cubic-bezier(.22,.8,.28,1) both; will-change: transform,opacity; }
    .klassin-buddy.buddy-leaving { transform-origin: 50% 100%; animation: klassinBuddyDepart .36s ease-in both; pointer-events: none; will-change: transform,opacity; }
    .klassin-buddy:is(.buddy-entering,.buddy-leaving)::before,
    .klassin-buddy:is(.buddy-entering,.buddy-leaving)::after { content: ""; position: absolute; z-index: 3; width: 15px; height: 15px; pointer-events: none; background: #f3bb49; clip-path: polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); animation: klassinBuddyHelloSpark .62s ease-out both; }
    .klassin-buddy:is(.buddy-entering,.buddy-leaving)::before { left: 0; top: 12%; }
    .klassin-buddy:is(.buddy-entering,.buddy-leaving)::after { right: -1px; top: 40%; width: 11px; height: 11px; background: #70cdb7; animation-delay: .08s; }
    .klassin-buddy.buddy-leaving::before,
    .klassin-buddy.buddy-leaving::after { animation-name: klassinBuddyByeSpark; animation-duration: .36s; animation-delay: 0s; }
}
@keyframes klassinBuddyArrive {
    0% { opacity: 0; transform: translateY(22px) scale(.28,.18) rotate(-10deg); }
    42% { opacity: 1; transform: translateY(-12px) scale(.89,1.12) rotate(5deg); }
    65% { transform: translateY(3px) scale(1.10,.90) rotate(-3deg); }
    83% { transform: translateY(-3px) scale(.98,1.03); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes klassinBuddyDepart {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    32% { opacity: 1; transform: translateY(-8px) scale(.93,1.08) rotate(-5deg); }
    70% { opacity: .7; transform: translateY(8px) scale(1.08,.66) rotate(5deg); }
    100% { opacity: 0; transform: translateY(20px) scale(.2,.08) rotate(8deg); }
}
@keyframes klassinBuddyHelloSpark {
    0%,15% { opacity: 0; transform: translateY(8px) scale(.2) rotate(-35deg); }
    48% { opacity: 1; transform: translateY(-8px) scale(1.15) rotate(10deg); }
    100% { opacity: 0; transform: translateY(-18px) scale(.4) rotate(50deg); }
}
@keyframes klassinBuddyByeSpark {
    0% { opacity: 0; transform: scale(.3); }
    35% { opacity: 1; transform: translateY(-5px) scale(.9) rotate(15deg); }
    100% { opacity: 0; transform: translateY(8px) scale(.1) rotate(65deg); }
}
@media screen and (max-width: 599px) {
    .klassin-ui .klassin-buddy-display-options { grid-template-columns: minmax(0,1fr); }
}
@media screen and (max-width: 767px) {
    .klassin-ui .klassin-buddy-speech { bottom: calc(174px + env(safe-area-inset-bottom)); }
}
@media screen and (prefers-reduced-motion: reduce) {
    .klassin-buddy:is(.buddy-entering,.buddy-leaving) { animation: none !important; transition: none !important; }
    .klassin-buddy:is(.buddy-entering,.buddy-leaving)::before,
    .klassin-buddy:is(.buddy-entering,.buddy-leaving)::after { display: none; animation: none !important; }
}

/* Student lookup keeps the system theme and animates real record folders. */
@media screen {
    body.klassin-ui .swal2-container:has(.quick-intel-dialog) { background: #123d3e80; backdrop-filter: blur(2px); }
    body.klassin-ui .swal2-popup.quick-student-dialog.quick-intel-dialog { --quick-console-bg: #ffffff; --quick-console-line: #dbe9e3; --quick-console-muted: #647b73; width: min(920px,calc(100vw - 40px)) !important; max-height: calc(100dvh - 40px); border: 1px solid #c7ddd2; border-radius: 8px !important; background: var(--quick-console-bg); color: #173c38; box-shadow: 0 20px 70px #173e3a24; color-scheme: light; }
    body.klassin-ui .quick-intel-dialog.swal2-show { animation: quickIntelOpen .3s ease both; }
    body.klassin-ui .quick-intel-dialog.swal2-hide { animation: quickIntelClose .16s ease both; }
    body.klassin-ui .quick-intel-dialog .swal2-title { padding: 18px 72px 18px 24px !important; border-color: var(--quick-console-line); background: #f3f9f6; color: #173c38; font-size: 22px !important; }
    body.klassin-ui .quick-intel-dialog .swal2-close { top: 18px !important; right: 16px !important; color: #376a5c; background: #eff7f3; }
    body.klassin-ui .quick-intel-dialog .swal2-close:hover { color: #0c5055; background: #dff0e7; }
    body.klassin-ui .quick-intel-dialog .swal2-html-container.quick-student-dialog-html { padding: 20px 24px !important; background: var(--quick-console-bg); color: #2a4c43; scrollbar-width: thin; scrollbar-color: #93bbaa #ffffff; }
    body.klassin-ui .quick-intel-dialog-heading { display: flex; align-items: center; gap: 14px; min-width: 0; }
    body.klassin-ui .quick-intel-dialog-heading > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    body.klassin-ui .quick-intel-dialog-heading small { color: #5b7468; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
    body.klassin-ui .quick-intel-dialog-heading :is(button,.quick-intel-heading-icon) { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid #c1dbcc; border-radius: 6px; background: #e5f4ec; color: #167757; font-size: 20px; }
    body.klassin-ui .quick-intel-dialog-heading button:hover { background: #cce8d8; color: #0c5055; }
    body.klassin-ui .quick-intel-toolbar { display: flex; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 12px; color: var(--quick-console-muted); font-size: 12px; }
    body.klassin-ui .quick-intel-toolbar > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
    body.klassin-ui #quick-student-sync-status { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #167757; font-size: 11px; }
    body.klassin-ui #quick-student-sync-status::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
    body.klassin-ui #quick-student-sync-status[data-state="loading"]::before { width: 10px; height: 10px; flex-basis: 10px; border: 1px solid #9ccbb4; border-top-color: #167757; border-radius: 50%; background: transparent; animation: quickIntelSpin .8s linear infinite; }
    body.klassin-ui #quick-student-sync-status[data-state="cached"] { color: #956c20; }
    body.klassin-ui #quick-student-retry-sync { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1px solid #ead7a0; border-radius: 6px; color: #956c20; background: #fff6de; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search { position: relative; top: auto; display: flex; align-items: center; min-height: 60px; gap: 12px; padding: 0 16px; margin-bottom: 20px !important; border: 1px solid #b3d0bf; border-radius: 6px; background: #f8fcfa; transition: border-color .18s, box-shadow .18s; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search:focus-within { border-color: #159777; box-shadow: 0 0 0 3px #0a8b671c; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search > i { flex: 0 0 20px; color: #318c69; font-size: 20px; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search input { min-width: 0; min-height: 58px; padding: 12px 0; border: 0; border-radius: 0; background: transparent; color: #153f36; font-size: 17px; font-weight: 500; box-shadow: none; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search input:focus { outline: none; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search input::placeholder { color: #647b73; opacity: 1; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search input:disabled { cursor: wait; opacity: .65; }
    body.klassin-ui .quick-intel-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--quick-console-line); color: #365c4e; }
    body.klassin-ui .quick-intel-section-heading h4 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 600; }
    body.klassin-ui .quick-intel-section-heading > span { color: var(--quick-console-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
    body.klassin-ui .quick-intel-dialog #quick-student-search-results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 10px; min-height: 280px; padding: 14px 0 4px; }
    body.klassin-ui .quick-intel-dialog #quick-student-search-results:not([data-state="results"]) { grid-template-columns: minmax(0,1fr); }
    body.klassin-ui .quick-intel-dialog .quick-intel-empty { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 270px; padding: 20px; color: #6b8a79; }
    body.klassin-ui .quick-intel-empty p { margin: 18px 0 0; color: #295441; font-size: 16px; font-weight: 600; }
    body.klassin-ui .quick-intel-empty small { margin-top: 6px; color: var(--quick-console-muted); font-size: 12px; }
    body.klassin-ui .quick-lookup-idle-folder { display: block; position: relative; width: 108px; height: 84px; color: #50b89a; }
    body.klassin-ui .quick-lookup-idle-folder > i:first-child { position: absolute; inset: 0; font-size: 86px; }
    body.klassin-ui .quick-lookup-idle-folder > i:last-child { position: absolute; top: 32px; left: 43px; color: #fff; font-size: 24px; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result { position: relative; display: grid; grid-template-columns: 54px minmax(0,1fr) 24px; align-items: center; gap: 12px; min-width: 0; min-height: 96px; margin-top: 7px; padding: 12px; border: 1px solid #cddfd5; border-radius: 6px; background: #ffffff; color: #244c40; animation: quickFolderResultFloat .45s ease both; animation-delay: calc(.32s + var(--quick-result-order,0) * 35ms); transition: border-color .18s, background .18s; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result::before { content: ''; position: absolute; top: -7px; left: 14px; width: 42px; height: 7px; border: 1px solid #cddfd5; border-bottom: 0; border-radius: 4px 4px 0 0; background: #e9f5ed; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result:hover { border-color: #84c8a4; background: #eff8f3; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result p { color: #193f34; font-size: 14px; font-weight: 600; }
    body.klassin-ui .quick-intel-dialog .quick-intel-result-photo { display: block; width: 54px; height: 70px; overflow: hidden; border-radius: 4px; background: #e5efe9; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result img { display: block; width: 54px; height: 70px; border: 0; border-radius: 4px; object-fit: cover; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result .quick-intel-result-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; color: #5b7468; font-size: 11px; font-weight: 400; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result mark { padding: 0 2px; border-radius: 2px; background: #fff0b8; color: #755b0b; font: inherit; }
    body.klassin-ui .quick-intel-result-arrow { color: #237e62; font-size: 16px; transition: transform .18s ease; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-result:is(:hover,:focus-visible) .quick-intel-result-arrow { transform: translateX(3px); }
    body.klassin-ui .quick-intel-terminal { display: flex; align-items: center; gap: 7px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--quick-console-line); color: #5b7468; font-size: 10px; }
    body.klassin-ui .quick-intel-terminal > span:last-child { margin-left: auto; color: #5b7468; }
    body.klassin-ui .quick-intel-dialog :is(.quick-student-photo-card,.quick-lookup-identity) { gap: 24px; padding: 0 0 22px !important; margin-bottom: 20px !important; border-color: var(--quick-console-line); background: transparent; }
    body.klassin-ui .quick-intel-dialog .quick-intel-portrait { display: block; position: relative; flex: 0 0 144px; width: 144px; height: 192px; overflow: hidden; border: 1px solid #c5dccd; border-radius: 4px; padding: 0; background: #eaf2ed; }
    body.klassin-ui .quick-intel-dialog :is(.quick-student-photo-card,.quick-lookup-identity) .quick-intel-portrait img { display: block; width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; }
    body.klassin-ui .quick-intel-photo-scan { position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: #ffffff6b; opacity: 0; pointer-events: none; transform: skewX(-15deg); animation: quickIntelPhotoScan .8s .18s ease both; }
    body.klassin-ui .quick-intel-photo-expand { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d1e7dc80; border-radius: 4px; background: #0c5055c9; color: #fff; font-size: 12px; }
    body.klassin-ui .quick-intel-dialog .quick-intel-student-name { margin-top: 8px; color: #173c38 !important; font-size: 24px !important; line-height: 1.5 !important; font-weight: 700; }
    body.klassin-ui .quick-intel-dialog .quick-intel-section-label { display: flex; align-items: center; gap: 7px; color: #2c7655; font-size: 11px; font-weight: 500; }
    body.klassin-ui .quick-intel-dialog :is(.text-slate-900,.text-slate-800,.text-slate-700) { color: #294b3f; }
    body.klassin-ui .quick-intel-dialog :is(.text-slate-500,.text-slate-400,.text-slate-600) { color: #5b7468; }
    body.klassin-ui .quick-intel-dialog .text-sky-700 { color: #18808b; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-card { --quick-status-ink: #15774a; --quick-status-surface: #effaf2; padding: 16px !important; border: 1px solid #b4d9c0; border-left: 3px solid var(--quick-status-ink); border-radius: 4px !important; background: var(--quick-status-surface); color: #225e3b; animation: quickIntelResult .4s .1s ease both; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-card[data-status="ไม่ได้เช็ค"] { --quick-status-ink: #667d72; --quick-status-surface: #f1f5f4; background: var(--quick-status-surface); color: #496456; border-color: #c6d6cc; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-card[data-status="ขาด"] { --quick-status-ink: #b23e57; --quick-status-surface: #fff1f3; background: var(--quick-status-surface); color: #8a3049; border-color: #eab9c4; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-card[data-status="ลา"] { --quick-status-ink: #1c7892; --quick-status-surface: #f0f9fc; background: var(--quick-status-surface); color: #256d86; border-color: #b9dce6; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-card:is([data-status="สาย"],[data-status="มาสาย"]) { --quick-status-ink: #9b7321; --quick-status-surface: #fff8e6; background: var(--quick-status-surface); border-color: #ead59b; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-title { margin-top: 7px; color: inherit; font-size: 20px !important; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-status span { background: #ffffffb3; color: var(--quick-status-ink); border: 1px solid currentColor; }
    body.klassin-ui .quick-intel-dialog .quick-student-assembly-card { gap: 12px; padding: 16px 0 !important; border-color: var(--quick-console-line); background: transparent; }
    body.klassin-ui .quick-intel-dialog [data-quick-status] { background: #e9f7ef; border-color: #bbdac7; color: #21784a; }
    body.klassin-ui .quick-intel-dialog [data-quick-status="ขาด"] { background: #fff0f3; border-color: #ebc1cc; color: #a83955; }
    body.klassin-ui .quick-intel-dialog [data-quick-status="ลา"] { background: #edf7fb; border-color: #badbe7; color: #256f88; }
    body.klassin-ui .quick-intel-dialog :is([data-quick-status="สาย"],[data-quick-status="มาสาย"]) { background: #fff7e3; border-color: #ead397; color: #94701e; }
    body.klassin-ui .quick-intel-dialog [data-quick-status="ไม่ได้เช็ค"] { background: #f0f4f2; border-color: #c9d8ce; color: #61786a; }
    body.klassin-ui .quick-intel-dialog .quick-student-subject-list { margin-top: 20px; background: transparent; }
    body.klassin-ui .quick-intel-dialog .quick-student-subject-list > div:not(.quick-intel-section-heading) { border-color: var(--quick-console-line); padding-block: 13px; }
    body.klassin-ui .quick-intel-dialog .quick-student-summary-actions { gap: 10px !important; bottom: -20px; padding: 16px 0 4px; margin: 0; border-color: var(--quick-console-line); background: var(--quick-console-bg); }
    body.klassin-ui .quick-intel-dialog .quick-student-action-btn { min-height: 48px; padding: 10px !important; border: 1px solid #c9ddd0; background: #f3f8f5; color: #245d49; font-size: 13px !important; }
    body.klassin-ui .quick-intel-dialog .quick-student-action-btn:first-child { background: #087d60; border-color: #08785c; color: #fff; }
    body.klassin-ui .quick-intel-dialog .quick-student-action-btn:nth-child(2) { background: #eef7fa; border-color: #bdd9de; color: #256e7c; }
    body.klassin-ui .quick-intel-dialog .quick-student-action-btn:hover { filter: brightness(1.2); }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics { gap: 10px; padding-bottom: 20px; border-color: var(--quick-console-line); }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics > div { padding: 14px 8px; border: 1px solid #f2ced7; border-radius: 4px; background: #fff1f4; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics > div:nth-child(2) { border-color: #eadab6; background: #fff8e9; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics > div:nth-child(3) { border-color: #c7e1e6; background: #eef8fa; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics p:first-child { color: #6f776f; font-size: 11px; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics p:last-child { color: #173c38; font-size: 32px; font-variant-numeric: tabular-nums; }
    body.klassin-ui .quick-intel-dialog .quick-history-group { border-color: var(--quick-console-line); background: transparent; }
    body.klassin-ui .quick-intel-dialog .quick-history-group summary { gap: 10px; min-height: 54px; }
    body.klassin-ui .quick-intel-dialog .quick-history-group summary > span { border: 1px solid #ebc6d1; background: #fff0f4; color: #a53654; }
    body.klassin-ui .quick-intel-dialog .quick-history-group > div > div { border-color: var(--quick-console-line); }
    body.klassin-ui .quick-intel-dialog .quick-history-group .bg-rose-50 { background: #fff2f5; border-color: #f0d1db; color: #a63350; }
    body.klassin-ui .quick-intel-dialog .quick-history-group .bg-emerald-50,
    body.klassin-ui .quick-intel-dialog .quick-student-history-popup > div > .bg-emerald-50 { background: #effaf3; border-color: #bddbc7; color: #277b4a; }
    body.klassin-ui .quick-intel-dialog .quick-history-chevron { color: #749b86; }
    body.klassin-ui .quick-intel-dialog .quick-history-copy { bottom: -20px; min-height: 48px; background: #087d60; border: 1px solid #197b5e; color: #fff; }
    body.klassin-ui .quick-intel-dialog :is(button,summary):focus-visible { outline: 2px solid #118a70; outline-offset: -3px; }
    @keyframes quickIntelOpen { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
    @keyframes quickIntelClose { to { opacity: 0; transform: translateY(6px) scale(.985); } }
    @keyframes quickIntelSpin { to { transform: rotate(360deg); } }
    @keyframes quickIntelPhotoScan { 0% { left: -80%; opacity: 0; } 20% { opacity: .6; } 80% { opacity: .6; } 100% { left: 140%; opacity: 0; } }
    @keyframes quickIntelResult { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    body.klassin-ui .quick-folder-motion { position: relative; grid-column: 1 / -1; width: 100%; height: 100px; overflow: hidden; isolation: isolate; }
    body.klassin-ui .quick-folder-path { position: absolute; top: 68px; left: 8%; right: 8%; border-top: 1px dashed #c1dccd; }
    body.klassin-ui .quick-folder-runners { position: absolute; inset: 5px 0; animation: quickFolderSearchExit .2s .42s ease both; }
    body.klassin-ui .quick-folder-runner { position: absolute; top: 22px; left: -12%; display: block; width: 46px; height: 42px; color: #62b798; animation: quickFolderRun .64s linear both; animation-delay: calc(var(--folder-order) * -120ms); }
    body.klassin-ui .quick-folder-runner:nth-child(2) { color: #63b6c3; }
    body.klassin-ui .quick-folder-runner:nth-child(3) { color: #e6b454; }
    body.klassin-ui .quick-folder-runner:nth-child(4) { color: #0e7f72; }
    body.klassin-ui .quick-folder-runner > i { display: block; font-size: 42px; }
    body.klassin-ui .quick-folder-paper { position: absolute; top: 20px; left: 15px; width: 19px; height: 12px; border-radius: 1px; background: #fff; box-shadow: 0 2px 4px #174b3910; }
    body.klassin-ui .quick-folder-paper::after { content: ''; position: absolute; top: 4px; left: 4px; width: 11px; height: 2px; background: #a3c9b6; box-shadow: 0 4px #c4ddd0; }
    body.klassin-ui .quick-folder-arrival { position: absolute; top: 14px; left: 50%; display: block; width: 84px; height: 68px; color: #34a786; opacity: 0; transform: translateX(-50%); animation: quickFolderFound .6s .28s ease both; }
    body.klassin-ui .quick-folder-arrival > i { display: block; width: 84px; font-size: 66px; line-height: 1; }
    body.klassin-ui .quick-folder-arrival > span { position: absolute; right: 1px; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%; background: #0c8062; color: #fff; font-size: 11px; }
    body.klassin-ui .quick-folder-motion[data-outcome="empty"] .quick-folder-arrival { color: #6aa9b5; }
    body.klassin-ui .quick-folder-motion[data-outcome="empty"] .quick-folder-arrival > span { background: #517d8a; }
    body.klassin-ui .quick-folder-motion[data-outcome="loading"] .quick-folder-runners { animation: none; }
    body.klassin-ui .quick-folder-motion[data-outcome="loading"] .quick-folder-runner { animation-iteration-count: infinite; }
    body.klassin-ui .quick-folder-motion[data-outcome="loading"] .quick-folder-arrival { display: none; }
    body.klassin-ui .quick-intel-dialog #quick-student-search-results:is([data-state="loading"],[data-state="empty"]) .quick-intel-empty { min-height: 150px; padding-top: 0; }
    body.klassin-ui .quick-intel-dialog.quick-folder-opened.swal2-show { transform-origin: 50% 75%; animation: quickFolderDossierOpen .55s ease both; }
    body.klassin-ui .quick-folder-opened .quick-student-summary-popup { animation: quickFolderPageReveal .45s .12s ease both; }
    @keyframes quickFolderRun { 0% { left: -12%; opacity: 0; transform: translateY(5px) rotate(-7deg); } 12% { opacity: 1; } 50% { transform: translateY(-6px) rotate(4deg); } 88% { opacity: 1; } 100% { left: 105%; opacity: 0; transform: translateY(3px) rotate(-3deg); } }
    @keyframes quickFolderSearchExit { to { opacity: 0; } }
    @keyframes quickFolderFound { 0% { opacity: 0; transform: translate(-50%,20px) scale(.45) rotate(-12deg); } 55% { opacity: 1; transform: translate(-50%,-6px) scale(1.1) rotate(3deg); } 100% { opacity: 1; transform: translate(-50%,0) scale(1) rotate(0); } }
    @keyframes quickFolderResultFloat { from { opacity: 0; transform: translateY(22px) rotate(-1.5deg) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes quickFolderDossierOpen { 0% { opacity: 0; transform: translateY(36px) rotate(-2deg) scale(.94); } 65% { opacity: 1; transform: translateY(-4px) rotate(.3deg) scale(1.005); } 100% { opacity: 1; transform: none; } }
    @keyframes quickFolderPageReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media screen and (max-width: 639px) {
    body.klassin-ui .swal2-popup.quick-student-dialog.quick-intel-dialog { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px); }
    body.klassin-ui .quick-intel-dialog .swal2-title { padding: 14px 58px 14px 14px !important; font-size: 19px !important; }
    body.klassin-ui .quick-intel-dialog .swal2-close { top: 14px !important; right: 9px !important; }
    body.klassin-ui .quick-intel-dialog-heading { gap: 10px; }
    body.klassin-ui .quick-intel-dialog-heading :is(button,.quick-intel-heading-icon) { width: 40px; flex-basis: 40px; height: 44px; font-size: 18px; }
    body.klassin-ui .quick-intel-dialog-heading small { font-size: 8px; }
    body.klassin-ui .quick-intel-dialog .swal2-html-container.quick-student-dialog-html { padding: 14px !important; }
    body.klassin-ui .quick-intel-dialog #quick-student-search-results { grid-template-columns: minmax(0,1fr); min-height: 250px; }
    body.klassin-ui .quick-folder-motion { height: 84px; }
    body.klassin-ui .quick-folder-path { top: 62px; }
    body.klassin-ui .quick-intel-dialog .quick-intel-empty { min-height: 240px; padding: 20px 8px; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search { gap: 10px; min-height: 56px; padding-inline: 12px; }
    body.klassin-ui .quick-intel-dialog .quick-lookup-search input { min-height: 54px; font-size: 16px; }
    body.klassin-ui .quick-intel-toolbar { font-size: 11px; flex-wrap: wrap; }
    body.klassin-ui #quick-student-sync-status { font-size: 10px; }
    body.klassin-ui .quick-intel-dialog :is(.quick-student-photo-card,.quick-lookup-identity) { gap: 14px; padding-bottom: 18px !important; margin-bottom: 16px !important; }
    body.klassin-ui .quick-intel-dialog .quick-intel-portrait { flex-basis: 90px; width: 90px; height: 120px; }
    body.klassin-ui .quick-intel-dialog .quick-intel-student-name { font-size: 20px !important; }
    body.klassin-ui .quick-intel-dialog .quick-student-latest-title { font-size: 18px !important; }
    body.klassin-ui .quick-intel-dialog .quick-student-summary-actions { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px !important; bottom: -14px; padding-top: 12px; }
    body.klassin-ui .quick-intel-dialog .quick-student-action-btn { flex-direction: column; min-height: 58px; padding: 8px 3px !important; font-size: 11px !important; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics { gap: 6px; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics > div { padding: 10px 3px; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics p:first-child { font-size: 10px; }
    body.klassin-ui .quick-intel-dialog .quick-history-metrics p:last-child { font-size: 28px; }
    body.klassin-ui .quick-intel-dialog .quick-history-copy { bottom: -14px; }
}
@media screen and (prefers-reduced-motion: reduce) {
    body.klassin-ui .quick-intel-dialog,
    body.klassin-ui .quick-intel-dialog *,
    body.klassin-ui .quick-intel-dialog *::before,
    body.klassin-ui .quick-intel-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    body.klassin-ui .quick-intel-dialog .quick-intel-photo-scan { display: none; }
    body.klassin-ui .quick-intel-dialog .quick-folder-runners { display: none; }
    body.klassin-ui .quick-intel-dialog .quick-folder-arrival { opacity: 1; transform: translateX(-50%); }
    body.klassin-ui .quick-intel-dialog .quick-folder-motion[data-outcome="loading"] .quick-folder-arrival { display: block; }
}

/* Student directory: scoped workspace, compact folders and readable rosters. */
#view-management { color: #244e50; }
#view-management .management-page-shell { min-width: 0; min-height: 0 !important; border: 0; border-radius: 0 !important; padding: 0 !important; background: transparent; box-shadow: none !important; container: student-directory / inline-size; }
#view-management .management-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
#view-management .management-page-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
#view-management .management-page-title > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: #ddefea; color: #0e6260; font-size: 22px; }
#view-management .management-page-title p { margin: 0 0 2px; color: #64817e; font-size: 12px; }
#view-management .management-page-title h2 { margin: 0; color: #103f42; font-size: 24px; font-weight: 800; line-height: 1.4; }
#view-management .management-add-button { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; border: 1px solid #0c5559; border-radius: 7px; padding: 10px 16px; background: #0c5559; color: #fff; font-size: 14px; font-weight: 700; }
#view-management .management-add-button:hover { background: #083e42; }
#view-management .management-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; border-block: 1px solid #d6e5e2; padding: 18px 0; background: #fff; }
#view-management .management-overview > div { min-width: 0; border-right: 1px solid #e1ebe8; padding: 0 20px; }
#view-management .management-overview > div:last-child { border-right: 0; }
#view-management .management-overview dt { display: flex; align-items: center; gap: 7px; color: #627e79; font-size: 12px; }
#view-management .management-overview dt i { color: #4c9390; }
#view-management .management-overview dd { display: flex; align-items: baseline; gap: 7px; margin: 6px 0 0; }
#view-management .management-overview strong { color: #0e5256; font-size: 27px; font-weight: 800; line-height: 1.25; font-variant-numeric: tabular-nums; }
#view-management .management-overview dd span { color: #6e8581; font-size: 12px; }
#view-management .management-overview .is-ready strong,
#view-management .management-overview .is-ready dt i { color: #168065; }
#view-management .management-overview .is-pending strong,
#view-management .management-overview .is-pending dt i { color: #b5751c; }
#view-management .management-tools { margin: 0 0 18px; border-bottom: 1px solid #d6e5e2; }
#view-management .management-tools:not(:has(.management-primary-actions:not(.hidden), #management-room-photo-permission-action:not(.hidden), .management-profile-lock-actions:not(.hidden))) { display: none; }
#view-management .management-tools > summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 10px; color: #376463; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
#view-management .management-tools > summary::-webkit-details-marker { display: none; }
#view-management .management-tools > summary span { display: inline-flex; align-items: center; gap: 9px; }
#view-management .management-tools > summary > i { font-size: 10px; transition: transform .18s ease; }
#view-management .management-tools[open] > summary > i { transform: rotate(180deg); }
#view-management .management-tools-content { padding: 6px 0 12px; }
#view-management .management-primary-actions { display: flex; width: auto; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#view-management .management-primary-action { display: inline-flex; min-height: 42px; align-items: center; gap: 7px; border-width: 1px; padding: 8px 12px; box-shadow: none; }
#view-management .management-primary-action > i { width: auto; height: auto; background: transparent; color: var(--management-action-accent); box-shadow: none; font-size: 14px; }
#view-management .management-primary-action > span { font-size: 12px; font-weight: 700; }
#view-management .management-csv-guide { border-color: #dce9e5; background: #f1f7f4; margin-bottom: 12px; }
#view-management .management-csv-guide > summary { min-height: 40px; color: #3b7066; padding: 8px 12px; }
#view-management .management-csv-guide-title { font-size: 12px; font-weight: 600; }
#view-management .management-csv-guide-content { border-color: #dce9e5; background: #fff; }
#view-management .management-permission-actions { margin: 0; padding: 0 0 4px; }
#view-management .management-room-permission { min-height: 56px; border-color: #d6e6e0; background: #f5f9f7; box-shadow: none; color: #27685b; }
#view-management .management-room-permission-icon { background: #e1efe9; color: #277863; }
#view-management .management-room-permission-copy strong { font-size: 12px; font-weight: 700; }
#view-management .management-room-permission-copy small { font-size: 11px; }
#view-management .management-room-permission-count { border-radius: 5px; }
#view-management .management-filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 14px; margin: 0 0 22px; }
#view-management .management-search-field { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 10px; border: 1px solid #cbded8; border-radius: 7px; padding: 0 5px 0 14px; background: #fff; }
#view-management .management-search-field > i { flex: 0 0 auto; color: #66938a; font-size: 15px; }
#view-management .management-search-field:focus-within { border-color: #368f7d; box-shadow: 0 0 0 3px #2b947b16; }
#view-management #manage-search { min-width: 0; width: 100%; min-height: 44px; border: 0; padding: 10px 0; background: transparent; color: #204b49; font-size: 14px; outline: none; box-shadow: none; }
#view-management #manage-search::-webkit-search-cancel-button { display: none; }
#view-management #manage-search::placeholder { color: #7b928d; }
#view-management #management-clear-search { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 5px; color: #597b72; }
#view-management #management-clear-search:hover { background: #eef5f1; }
#view-management .management-status-filter { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 9px; }
#view-management .management-status-filter > span { flex: 0 0 auto; color: #587c74; font-size: 12px; }
#view-management .management-status-filter select { width: 100%; min-width: 0; min-height: 46px; border: 1px solid #cbded8; border-radius: 7px; padding: 8px 26px 8px 10px; background: #fff; color: #305e57; font-size: 13px; }
#view-management .management-directory-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
#view-management .management-directory-heading h3 { min-width: 0; margin: 0; color: #163f42; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
#view-management #management-result-count { flex: 0 0 auto; color: #63847b; font-size: 12px; font-variant-numeric: tabular-nums; }
#view-management #management-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
#view-management #management-folders > button { position: relative; display: flex; min-width: 0; min-height: 96px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid #28666a; border-radius: 8px; padding: 14px; background: #105258; color: #fff; text-align: left; box-shadow: none; transition: background-color .15s ease, transform .15s ease; }
#view-management #management-folders > button:hover { background: #17686b; transform: translateY(-2px); }
#view-management #management-folders > button > i { position: absolute; top: 15px; right: 12px; color: #90cdc1; font-size: 11px; }
#view-management #management-folders .management-folder-level-name,
#view-management #management-folders .management-folder-room-name { max-width: 100%; padding-right: 12px; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
#view-management #management-folders .management-folder-room-name { padding-right: 0; }
#view-management .management-folder-level-count,
#view-management .management-folder-room-count { max-width: 100%; margin: 0; border: 0; border-radius: 0; padding: 0; background: transparent; color: #fff; font-size: 12px; font-weight: 600; }
#view-management .management-folder-level-rooms { color: #a8d6ce; font-size: 11px; }
#view-management #management-folders .management-folder-level-card.is-other .management-folder-level-name { font-size: 18px; line-height: 1.35; }
#view-management .management-folder-room-stats { display: flex; width: 100%; align-items: center; justify-content: flex-start !important; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
#view-management .management-folder-room-face-count { border: 0; border-radius: 0; padding: 0; background: transparent; color: #a4e0d0; font-size: 11px; white-space: nowrap; }
#view-management .management-folder-back { grid-column: 1 / -1; margin: 0 0 2px; }
#view-management .management-folder-back button { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; color: #3e7c70; font-size: 13px; font-weight: 600; }
#view-management .management-room-toolbar { margin: 0 0 12px !important; }
#view-management .management-room-nav { width: auto; min-height: 44px; border: 0; border-radius: 0 !important; padding: 0 !important; background: transparent; box-shadow: none !important; }
#view-management .management-room-back { color: #307f70; font-size: 13px !important; }
#view-management .management-room-label { color: #4e706a; font-size: 13px !important; }
#view-management #management-download-room-photos { border-color: #c9ded5; background: #fff; color: #2f7668; font-size: 12px; box-shadow: none; }
#view-management .management-table-wrap { margin-top: 0; border: 1px solid #d9e7e2; border-radius: 8px; background: #fff; }
#view-management .management-roster-table { font-size: 13px; }
#view-management .management-roster-table th { padding: 13px 10px; background: #e8f1ed; color: #54756e; font-size: 11px; font-weight: 700; text-transform: none; }
#view-management .management-roster-table thead tr { border-bottom: 1px solid #d5e4de; }
#view-management .management-roster-table td { border-color: #e4eeea; padding: 12px 10px; vertical-align: middle; }
#view-management .management-roster-table tbody tr:hover { background: #f4f9f6; }
#view-management .management-roster-table .management-student-details { min-width: 220px; }
#view-management .management-roster-table .management-student-photo { width: 78px; height: 104px; border: 2px solid #fff; box-shadow: 0 1px 4px #1749401c; }
#view-management .management-student-name { color: #174f50; font-weight: 700; }
#view-management .management-roster-table .management-student-name { font-size: 14px; }
#view-management .management-student-name:hover { color: #16836c; text-decoration: underline; text-underline-offset: 3px; }
#view-management .management-profile-status { gap: 4px 12px; font-size: 11px; font-weight: 400; }
#view-management .management-profile-status .is-saved { color: #337d67; }
#view-management .management-profile-status .is-missing { color: #7e9089; }
#view-management .management-face-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 5px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
#view-management .management-face-badge.is-ready { background: #e7f4ed; color: #237459; }
#view-management .management-face-badge.is-pending { background: #fbf1db; color: #9b6a1d; }
#view-management .management-table-actions { display: flex; align-items: center; justify-content: center; gap: 5px; }
#view-management .management-table-actions .management-student-action { flex: 0 0 36px; width: 36px; min-height: 36px; font-size: 13px; }
#view-management .management-student-action { border-radius: 6px; font-weight: 600; }
#view-management .management-student-action.scanner { border-color: #c5ded8; background: #eef7f2; color: #307765; }
#view-management .management-student-action.scanner.active { border-color: #297b69; background: #297b69; color: #fff; }
#view-management .management-student-action.photo { border-color: #cbe3ec; background: #edf7fb; color: #357b94; }
#view-management .management-student-action.edit { border-color: #eadcc1; background: #fbf5e9; color: #a0762f; }
#view-management .management-student-action.delete { border-color: #efd5d4; background: #fff4f3; color: #b76059; }
#view-management .management-student-action:hover { filter: brightness(.96); }
#view-management .management-empty { grid-column: 1 / -1; display: flex; min-height: 200px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; padding: 24px; color: #6f8981; text-align: center; }
#view-management .management-empty > i { margin-bottom: 4px; color: #88b5a8; font-size: 32px; }
#view-management .management-empty strong { color: #355e53; font-size: 15px; }
#view-management .management-empty span { font-size: 12px; white-space: normal; }
#view-management .management-empty button { min-height: 40px; color: #277b66; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
#view-management #management-folders.hidden,
#view-management #management-clear-search.hidden,
#view-management :is(.management-primary-actions, .management-primary-action, .management-add-button, .management-profile-lock-actions).hidden { display: none !important; }
#view-management :is(button, summary, select):focus-visible { outline: 2px solid #268b75; outline-offset: 3px; }
@media (max-width: 1099px) {
    #view-management .management-table-wrap { display: none; }
    #view-management .management-student-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
    #view-management .management-student-card { border: 1px solid #d9e7df; border-radius: 8px; background: #fff; box-shadow: none; }
    #view-management .management-student-main { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px; }
    #view-management .management-student-photo { width: 104px; height: 140px; border: 2px solid #fff; box-shadow: 0 1px 4px #1749401c; }
    #view-management .management-student-copy { min-width: 0; }
    #view-management .management-student-copy h4 { margin-bottom: 5px; font-size: 14px; line-height: 1.5; }
    #view-management .management-student-copy p { margin: 5px 0 8px; color: #678378; font-size: 12px; }
    #view-management .management-student-meta { gap: 6px; margin-bottom: 7px; }
    #view-management .management-student-number { font-size: 10px; color: #718b81; }
    #view-management .school-activity-student-room { background: #edf5f0; color: #478675; font-size: 10px; }
    #view-management .management-student-card > .management-profile-status { padding: 0 14px 14px; }
    #view-management .management-student-actions { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 6px; border-color: #e4ede7; padding: 10px; background: #f7faf8; }
    #view-management .management-student-action { min-height: 40px; font-size: 11px; }
}
@media (min-width: 1100px) {
    #view-management .management-student-grid { display: none !important; }
    #view-management .management-table-wrap { display: block; }
}
@media (max-width: 767px) {
    #view-management { padding-bottom: 72px; }
    #view-management .management-page-heading { gap: 10px; margin-bottom: 16px; }
    #view-management .management-page-title { gap: 9px; }
    #view-management .management-page-title > span { width: 40px; height: 40px; font-size: 18px; }
    #view-management .management-page-title p { font-size: 10px; }
    #view-management .management-page-title h2 { font-size: 20px; }
    #view-management .management-add-button { gap: 6px; padding: 9px 10px; font-size: 12px; }
    #view-management .management-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; padding: 16px 0; }
    #view-management .management-overview > div { padding: 0 14px; }
    #view-management .management-overview > div:nth-child(2) { border-right: 0; }
    #view-management .management-overview dt { font-size: 11px; }
    #view-management .management-overview strong { font-size: 24px; }
    #view-management .management-tools { margin-bottom: 14px; }
    #view-management .management-filter-bar { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 20px; }
    #view-management .management-status-filter { justify-content: space-between; }
    #view-management .management-status-filter select { width: 65%; }
    #view-management .management-directory-heading h3 { font-size: 15px; }
    #view-management #management-result-count { font-size: 11px; }
    #view-management #management-folders.management-folders-levels,
    #view-management #management-folders.management-folders-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    #view-management #management-folders > button { min-height: 96px; border-radius: 8px; padding: 12px 10px; }
    #view-management #management-folders .management-folder-level-name,
    #view-management #management-folders .management-folder-room-name { font-size: 22px; }
    #view-management #management-folders .management-folder-level-count,
    #view-management #management-folders .management-folder-room-count,
    #view-management #management-folders .management-folder-room-face-count { margin: 0; padding: 0; font-size: 11px; }
    #view-management #management-folders .management-folder-room-stats { justify-content: flex-start; gap: 6px; margin-top: 4px; }
    #view-management #management-folders > button > i { top: 12px; right: 9px; font-size: 9px; }
    #view-management .management-student-grid { grid-template-columns: minmax(0, 1fr) !important; }
    #view-management .management-room-toolbar { align-items: stretch !important; gap: 8px !important; }
    #view-management .management-room-nav { min-height: 36px; }
    #view-management #management-download-room-photos { min-height: 42px; }
}
@media (max-width: 359px) {
    #view-management .management-page-title > span { display: none; }
    #view-management .management-student-main { grid-template-columns: 90px minmax(0, 1fr); }
    #view-management .management-student-photo { width: 90px; height: 120px; }
    #view-management .management-directory-heading { gap: 8px; }
    #view-management .management-student-action { flex-direction: column; font-size: 10px; }
    #view-management .management-student-action > span { font-size: 10px; }
}
@media (min-width: 600px) and (max-width: 959px) {
    #view-management #management-folders .management-folder-level-name { font-size: 20px; }
}
@container student-directory (max-width: 620px) {
    #view-management .management-student-grid { grid-template-columns: minmax(0, 1fr) !important; }
    #view-management .management-filter-bar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #view-management .management-status-filter { justify-content: space-between; }
    #view-management .management-status-filter select { width: 65%; }
    #view-management .management-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    #view-management .management-overview > div:nth-child(2) { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    #view-management *, #view-management *::before, #view-management *::after { animation: none !important; transition: none !important; }
}

/* Animated daily attendance summaries; illustrations are not quantitative charts. */
body.klassin-ui #dashboard-today-summary .dashboard-attendance-panel { min-width: 0; border: 1px solid #d4e5de; border-radius: 8px; padding: 18px; background: #fff; color: #244b46; }
.attendance-panel-heading { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.attendance-panel-heading h3 { display: flex; min-width: 0; align-items: center; gap: 9px; margin: 0; color: #234b47; font-size: 15px; font-weight: 700; line-height: 1.5; }
.attendance-panel-heading h3 > i { color: #c56b61; font-size: 15px; }
.is-subject .attendance-panel-heading h3 > i { color: #3a889a; }
.attendance-motion-control { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: #f0f6f3; color: #5a8577; font-size: 10px; }
.attendance-motion-control:hover { background: #dfeee5; }
.attendance-panel-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.attendance-refresh-control { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: #edf5f2; color: #437f70; font-size: 12px; }
.attendance-refresh-control:hover { background: #dfeee5; }
.attendance-refresh-control:disabled { color: #8ca99e; cursor: wait; }
.attendance-update-status { display: flex; min-height: 20px; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: -5px 0 10px; color: #7b9287; font-size: 11px; line-height: 1.6; }
.attendance-update-status > i { font-size: 10px; }
.attendance-update-status time { color: #5b8071; font-variant-numeric: tabular-nums; white-space: nowrap; }
.attendance-update-status [role="status"]:empty { display: none; }
.attendance-update-status [role="status"] { flex-basis: 100%; color: #5c8b7b; }
.attendance-update-status .is-error { color: #b16b5c; }
.attendance-summary-visual { position: relative; height: 215px; overflow: hidden; border-radius: 6px; background: #edf5ee; isolation: isolate; }
.is-subject .attendance-summary-visual { background: #edf5f7; }
.attendance-summary-total { position: absolute; z-index: 2; top: 25px; left: 18px; display: flex; max-width: 28%; align-items: flex-start; flex-direction: column; gap: 4px; text-align: left; }
.attendance-summary-total > span { color: #587b6e; font-size: 11px; }
.attendance-summary-total > strong { color: #195b50; font-size: 38px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.is-subject .attendance-summary-total > strong { color: #216579; }
.attendance-summary-total > small { display: flex; align-items: center; gap: 9px; color: #6c8b7c; font-size: 11px; }
.attendance-summary-total > small i { font-size: 9px; }
.attendance-summary-total:hover strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.attendance-mini-scene { position: absolute; top: 0; right: 3px; display: block; width: 70%; height: 100%; overflow: hidden; pointer-events: none; }
.attendance-illustrated-scene :is(.attendance-mini-pupil,.mini-head,.mini-arm,.mini-book,.mini-eyes,.mini-flag,.mini-teacher-pointer) { transform-box: fill-box; }
.attendance-illustrated-scene .attendance-mini-pupil { transform-origin: center bottom; animation: attendancePupilSway 5.2s ease-in-out var(--phase) infinite; }
.attendance-illustrated-scene .pose-1 { animation-duration: 6.3s; }
.attendance-illustrated-scene .mini-head { transform-origin: 50% 85%; }
.attendance-illustrated-scene .pose-2 .mini-head { animation: attendancePupilTalk 5.6s ease-in-out var(--phase) infinite; }
.attendance-illustrated-scene .mini-eyes { transform-origin: center; animation: attendancePupilBlink 5.8s linear var(--phase,0s) infinite; }
.attendance-illustrated-scene .mini-arm { transform-origin: center top; }
.attendance-illustrated-scene .mini-arm-right { animation: attendanceArmRelax 5.2s ease-in-out var(--phase,0s) infinite; }
.attendance-illustrated-scene .mini-flag { transform-origin: left center; animation: attendanceFlagWave 3.6s ease-in-out infinite; }
.attendance-illustrated-scene .mini-class-pupils .mini-head { animation: attendancePupilRead 5.4s ease-in-out var(--phase) infinite; }
.attendance-illustrated-scene .mini-class-pupils .pose-1 .mini-head { animation-name: attendancePupilTalk; }
.attendance-illustrated-scene .mini-class-pupils .mini-arm-left { transform: rotate(-22deg); }
.attendance-illustrated-scene .mini-class-pupils .mini-arm-right { animation-name: attendancePupilWrite; }
.attendance-illustrated-scene .mini-class-pupils .mini-book { transform-origin: center bottom; animation: attendanceBookRead 5.4s ease-in-out var(--phase) infinite; }
.attendance-illustrated-scene .mini-teacher-pointer { transform-origin: 0 70%; animation: attendanceTeacherPoint 5s ease-in-out infinite; }
.attendance-student-totals { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin: 15px 0 0; }
.attendance-student-total { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 3px 5px; border-right: 1px solid #e2ece6; padding: 3px 13px; color: #226d5d; text-align: left; }
.attendance-student-total:first-child { padding-left: 2px; }
.attendance-student-total:last-child { border-right: 0; }
.attendance-student-total > span { grid-column: 1 / -1; color: #688279; font-size: 11px; }
.attendance-student-total > strong { font-size: 27px; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.attendance-student-total > small { color: #80958c; font-size: 10px; }
.attendance-student-total.is-absent { color: #b1655c; }
.attendance-student-total.is-unchecked { color: #648294; }
.attendance-student-total:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.attendance-room-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 15px; border-top: 1px solid #e4ece7; padding-top: 10px; color: #6c867c; font-size: 11px; }
.attendance-room-heading button { display: grid; width: 32px; height: 30px; place-items: center; border-radius: 5px; color: #4a8574; font-size: 10px; }
.attendance-room-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.attendance-room-total { display: grid; min-width: 0; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: 3px 5px; border-radius: 5px; padding: 8px 10px; background: #f1f7f3; color: #387f66; text-align: left; }
.attendance-room-total > span { display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; gap: 5px; font-size: 10px; }
.attendance-room-total strong { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.attendance-room-total small { color: #7f968b; font-size: 10px; }
.attendance-room-total.is-partial { background: #fcf7e9; color: #a67d30; }
.attendance-room-total.is-missing { background: #f1f4f7; color: #6c8494; }
.attendance-room-total:hover { filter: brightness(.97); }
.dashboard-attendance-panel button:focus-visible { outline: 2px solid #31967a; outline-offset: 3px; }
.dashboard-attendance-panel.is-paused .attendance-mini-scene *, .klassin-dashboard-extra:not([open]) .attendance-mini-scene * { animation-play-state: paused !important; }
@keyframes attendanceFlagWave { 0%,100% { transform: skewY(-3deg) scaleX(.96); } 50% { transform: skewY(3deg) scaleX(1); } }
@keyframes attendancePupilSway { 0%,100% { transform: rotate(-.7deg); } 50% { transform: translateY(-.6px) rotate(.7deg); } }
@keyframes attendancePupilRead { 0%,100% { transform: rotate(2deg); } 45%,65% { transform: translateY(1px) rotate(7deg); } }
@keyframes attendancePupilTalk { 0%,70%,100% { transform: rotate(0); } 35%,50% { transform: rotate(-6deg); } }
@keyframes attendanceTeacherPoint { 0%,100% { transform: rotate(-5deg); } 45%,65% { transform: rotate(12deg); } }
@keyframes attendancePupilBlink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
@keyframes attendanceArmRelax { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes attendancePupilWrite { 0%,100% { transform: rotate(25deg); } 30%,70% { transform: rotate(32deg); } 50% { transform: rotate(27deg); } }
@keyframes attendanceBookRead { 0%,100% { transform: rotate(-1deg); } 50% { transform: translateY(-1px) rotate(2deg); } }
.dashboard-attendance-dialog.swal2-popup { display: flex !important; max-height: calc(100dvh - 24px); flex-direction: column; border: 1px solid #d1e3d9; border-radius: 8px; padding: 0 0 15px; background: #fff; color: #345e52; }
.dashboard-attendance-dialog .attendance-detail-title { flex: 0 0 auto; margin: 0; padding: 20px 48px 12px 20px; color: #214d43; font-size: 19px; font-weight: 700; line-height: 1.5; text-align: left; }
.dashboard-attendance-dialog .attendance-detail-close { position: absolute; top: 9px; right: 9px; width: 36px; height: 36px; border-radius: 6px; color: #739285; font-size: 28px; }
.dashboard-attendance-dialog .attendance-detail-content { display: flex !important; min-height: 0; height: min(660px,calc(100dvh - 118px)); flex-direction: column; gap: 12px; margin: 0; padding: 0 20px; overflow: hidden; color: #345e52; text-align: left; }
.attendance-detail-meta { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; color: #789182; font-size: 12px; }
.attendance-detail-meta strong { color: #2d7861; font-size: 15px; font-variant-numeric: tabular-nums; }
.attendance-detail-modes { display: flex; min-height: 42px; flex: 0 0 auto; gap: 4px; border-bottom: 1px solid #e2eae5; padding-bottom: 7px; }
.attendance-detail-mode { display: inline-flex; min-width: 110px; min-height: 36px; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; padding: 7px 12px; color: #6c8879; font-size: 13px; }
.attendance-detail-mode[aria-pressed="true"] { background: #e3f1e9; color: #216f56; font-weight: 700; }
.attendance-detail-filters { display: grid; flex: 0 0 auto; grid-template-columns: minmax(0,1fr) 185px; gap: 9px; }
.attendance-detail-filters input, .attendance-detail-filters select { min-width: 0; width: 100%; min-height: 44px; border: 1px solid #ccdfd3; border-radius: 6px; padding: 9px 11px; background: #fff; color: #345f4e; font-size: 13px; }
.attendance-detail-room-nav { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; font-size: 12px; }
.attendance-detail-room-nav:has(button[hidden]):has(strong:empty) { display: none; }
.attendance-detail-room-nav button { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; color: #388567; }
.attendance-detail-room-nav button[hidden] { display: none; }
.attendance-detail-list { min-height: 80px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #a9cbbb #f4f8f5; }
.attendance-detail-student-row { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #e5ede7; padding: 13px 2px; }
.attendance-detail-number { color: #9aafa2; font-size: 11px; font-variant-numeric: tabular-nums; }
.attendance-detail-student-row strong, .attendance-detail-room-row strong { display: block; color: #2f5949; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.attendance-detail-student-row small, .attendance-detail-room-row small { display: block; margin-top: 4px; color: #7d9386; font-size: 11px; overflow-wrap: anywhere; }
.attendance-detail-student-row p { margin: 5px 0 0; color: #779989; font-size: 11px; overflow-wrap: anywhere; }
.attendance-detail-badge { display: inline-block; max-width: 110px; border-radius: 5px; padding: 5px 8px; background: #f0f4f5; color: #738791; font-size: 11px; text-align: center; overflow-wrap: anywhere; }
.attendance-detail-badge.is-present, .attendance-detail-badge.is-complete { background: #e8f5eb; color: #3d865d; }
.attendance-detail-badge.is-absent { background: #fbefed; color: #af7164; }
.attendance-detail-badge.is-partial { background: #fcf4df; color: #a78337; }
.attendance-detail-room-row { display: grid; width: 100%; grid-template-columns: minmax(0,1fr) auto 15px; align-items: center; gap: 12px; border-bottom: 1px solid #e4ece5; padding: 15px 6px; text-align: left; }
.attendance-detail-room-row:hover { background: #f4f9f4; }
.attendance-detail-room-row > i { color: #90ac99; font-size: 10px; }
.attendance-detail-pagination { display: flex; min-height: 40px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #dfebe1; padding-top: 9px; color: #789584; font-size: 12px; }
.attendance-detail-pagination > div { display: flex; gap: 6px; }
.attendance-detail-pagination button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cee3d4; border-radius: 5px; color: #4d8766; }
.attendance-detail-pagination button:disabled { border-color: #e9efeb; color: #c0cec4; cursor: default; }
.attendance-detail-empty { display: flex; min-height: 160px; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #829b8c; font-size: 14px; }
.attendance-detail-empty i { font-size: 25px; }
.dashboard-attendance-dialog :is(button,input,select):focus-visible { outline: 2px solid #499a77; outline-offset: 2px; box-shadow: none; }
@media (max-width: 767px) {
    body.klassin-ui #dashboard-today-summary .dashboard-attendance-panel { padding: 14px; }
    .attendance-panel-heading h3 { font-size: 14px; }
    .attendance-summary-visual { height: 165px; }
    .attendance-summary-total { top: 16px; left: 13px; }
    .attendance-summary-total > strong { font-size: 34px; }
    .attendance-mini-scene { top: 18px; right: 6px; width: 62%; max-width: calc(100% - 116px); height: calc(100% - 24px); }
    .attendance-student-total { padding-right: 8px; padding-left: 9px; }
    .attendance-student-total > strong { font-size: 25px; }
    .attendance-room-totals { gap: 6px; }
    .attendance-room-total { gap: 3px; padding: 8px; }
    .attendance-room-total > span { gap: 4px; font-size: 10px; }
    .dashboard-attendance-dialog.swal2-popup { width: calc(100vw - 18px) !important; }
    .dashboard-attendance-dialog .attendance-detail-title { padding-left: 14px; font-size: 17px; }
    .dashboard-attendance-dialog .attendance-detail-content { padding-inline: 14px; gap: 10px; }
    .attendance-detail-filters { grid-template-columns: minmax(0,1fr); gap: 7px; }
    .attendance-detail-filters input, .attendance-detail-filters select { font-size: 16px; }
    .attendance-detail-student-row { grid-template-columns: 19px minmax(0,1fr) auto; gap: 7px; }
    .attendance-detail-badge { max-width: 76px; padding: 5px 6px; font-size: 10px; }
}
@media (max-width: 359px) {
    .attendance-student-total { column-gap: 3px; padding-inline: 6px; }
    .attendance-student-total > strong { font-size: 23px; }
}
@media (max-height: 550px) {
    .dashboard-attendance-dialog .attendance-detail-content { display: block !important; height: auto; max-height: calc(100dvh - 96px); overflow-y: auto; }
    .attendance-detail-content > * + * { margin-top: 10px; }
    .attendance-detail-list { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .attendance-mini-scene *, .attendance-mini-scene *::before, .attendance-mini-scene *::after { animation: none !important; transition: none !important; }
    .attendance-motion-control { display: none; }
}

/* Shared assembly and subject camera theme; activity scanning keeps its own layout. */
@media screen {
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).attendance-workspace-shell {
        --attendance-accent: var(--ui-teal);
        --attendance-accent-soft: var(--ui-mint);
        min-width: 0; border: 0 !important; background: transparent; box-shadow: none !important;
        border-radius: 0 !important; overflow: visible;
    }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) { max-width: none; margin: 0; }
    body.klassin-ui :is(#assembly-header, #scan-header) { gap: 14px; align-items: center; margin-bottom: 18px; padding: 0 0 16px; border-top: 0; border-bottom: 1px solid var(--ui-line); }
    body.klassin-ui :is(#assembly-header, #scan-header) .attendance-workspace-title-wrap { min-width: 0; gap: 12px; }
    body.klassin-ui :is(#assembly-header, #scan-header) .attendance-workspace-title-icon { width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--ui-mint); color: var(--ui-teal); box-shadow: none; font-size: 20px; }
    body.klassin-ui :is(#assembly-header, #scan-header) h2 { color: var(--ui-ink); font-size: 22px; line-height: 1.4; }
    body.klassin-ui :is(#assembly-header, #scan-header) .assembly-workspace-subtitle { margin-top: 3px; color: var(--ui-muted); font-size: 12px; }
    .assembly-workspace-date { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--ui-muted); font-size: 12px; }
    .assembly-workspace-date i { color: #509181; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) { margin-bottom: 18px !important; padding: 16px 18px; border: 1px solid var(--ui-line); border-radius: 8px; background: #fff; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) .attendance-workspace-controls-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) .attendance-workspace-controls-heading > span { width: auto; height: auto; padding: 0; border: 0; background: none; color: #5b9385; font-size: 13px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) h3 { color: var(--ui-ink); font-size: 14px; }
    body.klassin-ui :is(#assembly-room-context, #scan-room-context) { margin: 0 0 0 auto; color: #869891; font-size: 12px; text-align: right; overflow-wrap: anywhere; }
    body.klassin-ui :is(#assembly-room-context, #scan-room-context).has-room { color: var(--ui-teal); }
    body.klassin-ui :is(#assembly-controls, #scan-controls) .attendance-workspace-fields { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) label { gap: 6px; color: var(--ui-muted); font-size: 12px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) label i { color: #72a294; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) select { min-height: 46px; border-color: #cbddd5 !important; border-radius: 6px !important; padding: 10px 12px; background: #fff; color: var(--ui-ink); box-shadow: none !important; font-size: 14px; font-weight: 600; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) select:disabled { background: #f2f7f4; color: #55786c; opacity: 1; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-live-layout, #scan-live-layout) { grid-template-columns: minmax(0,1fr) !important; gap: 16px; margin: 0; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-video-wrapper, #scan-video-wrapper) {
        min-width: 0; width: 100%; max-width: none; height: 320px !important; min-height: 320px !important;
        aspect-ratio: auto !important; border: 1px solid #cadfd4 !important; border-radius: 8px !important;
        background: #edf5ef; box-shadow: none;
    }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) { display: flex; align-items: center; justify-content: center; gap: 24px; border: 0; padding: 24px; background: #edf5ef !important; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay).hidden { display: none !important; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-launch-head { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 420px; text-align: center; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-prompt-icon { position: relative; display: grid; width: 80px; height: 80px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 2px solid #8ab7a3; border-radius: 18px; background: #e2eee5; color: #6e9c89; box-shadow: none; font-size: 38px; }
    .assembly-idle-scan-line { position: absolute; top: 15%; left: 8px; right: 8px; height: 1px; background: #73ac90; box-shadow: 0 0 7px #a2cbb1; animation: assemblyIdleScan 4s ease-in-out infinite; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) h3 { margin: 0; color: #426b5c; font-size: 17px; font-weight: 600; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-grid { width: 100%; max-width: 470px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button { display: grid; min-width: 0; min-height: 56px; grid-template-columns: 24px minmax(0,1fr) 12px; align-items: center; gap: 10px; border: 1px solid #075b56; border-radius: 6px; padding: 13px 15px; background: var(--ui-teal); color: #fff; box-shadow: none; text-align: left; transition: background .15s ease; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button.hidden { display: none !important; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button > i { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: inherit; font-size: 20px; box-shadow: none; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button strong { color: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; white-space: normal; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button .assembly-mode-arrow { font-size: 11px; opacity: .65; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-face:hover { background: var(--ui-deep); }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-qr { border-color: #bdd5cc; background: #fff; color: var(--ui-teal); }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-qr:hover { background: #e1eee6; }
    body.klassin-ui :is(#assembly-side-panel, #scan-side-panel) { min-width: 0; min-height: 0; gap: 14px; border: 1px solid var(--ui-line); border-radius: 8px; padding: 18px; background: #fff; box-shadow: none; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-side-panel, #scan-side-panel) { display: grid !important; grid-template-columns: minmax(0,1fr) 156px; align-content: start; align-items: center; gap: 12px 16px; }
    :is(#assembly-side-panel, #scan-side-panel) .assembly-room-summary h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 5px; color: var(--ui-ink); font-size: 14px; font-weight: 600; }
    :is(#assembly-side-panel, #scan-side-panel) .assembly-room-summary h3 i { color: #679c8a; }
    body.klassin-ui :is(#assembly-side-room, #scan-side-room) { border: 0; border-radius: 0; padding: 0; background: none; color: var(--ui-muted); font-size: 11px; font-weight: 400; text-align: left; overflow-wrap: anywhere; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-counts { gap: 0; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; border-radius: 0; padding: 2px 10px; background: none; text-align: center; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count + .scan-side-count { border-left: 1px solid var(--ui-line); }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count span { color: #18775d; font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count.pending span { color: #a77c39; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count small { margin: 0; color: var(--ui-muted); font-size: 11px; font-weight: 400; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-progress { grid-column: 1 / -1; height: 5px; background: #e8efea; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-progress > div { background: #398b71; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-hero { display: grid; grid-column: 1 / -1; grid-template-columns: 62px minmax(0,1fr); gap: 6px 12px; align-items: center; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; padding: 14px 0 0; background: none; text-align: left; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-mode { display: none; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-photo { grid-row: 1 / 3; width: 62px; height: 72px; border: 1px solid #dfebe3; border-radius: 6px; background: #f2f7f3; box-shadow: none; object-fit: cover; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-student { min-width: 0; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-name { color: var(--ui-ink); font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-meta { margin-top: 3px; color: var(--ui-muted); font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-status { justify-self: start; width: auto; max-width: 100%; border: 0; border-radius: 4px; padding: 4px 7px; background: #eff4f1; color: #728b7c; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-status.success { background: #e5f5ea; color: #287153; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-status.warn { background: #fcf3df; color: #a0782e; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-status.danger { background: #faeae8; color: #ae625a; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-list-wrap { grid-column: 1 / -1; gap: 10px; border: 0; border-top: 1px solid var(--ui-line); border-radius: 0; padding: 14px 0 0; background: none; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) .scan-side-checked-list-wrap { display: none; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-list-title { color: var(--ui-muted); font-size: 12px; font-weight: 500; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-list { gap: 0; max-height: 210px; scrollbar-width: thin; scrollbar-color: #b8d3c5 #f5f8f5; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-item { grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; border: 0; border-bottom: 1px solid #eaf0eb; border-radius: 0; padding: 9px 0; box-shadow: none; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-item img { width: 32px; height: 36px; border-radius: 4px; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-name { color: #35594a; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-meta { color: #8b9e91; font-weight: 400; line-height: 1.5; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-checked-status { border-radius: 4px; font-weight: 500; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-empty { padding: 15px 0; color: #8ba093; font-weight: 400; }
    body.klassin-ui :is(#assembly-history, #scan-history) { margin: 20px 0 0 !important; border: 0; border-top: 1px solid var(--ui-line); padding: 18px 0 0; background: none; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
    body.klassin-ui :is(#assembly-history, #scan-history) .attendance-section-title { gap: 8px; color: var(--ui-ink); font-size: 15px; }
    body.klassin-ui :is(#assembly-history, #scan-history) .attendance-section-title > span { width: auto; height: auto; border: 0; padding: 0; background: none; color: #649582; font-size: 14px; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions { flex-wrap: wrap; gap: 7px; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions button { min-height: 40px; min-width: 0; border: 1px solid #c9ddd2; border-radius: 6px; padding: 9px 11px; background: #fff; color: #356d59; box-shadow: none; font-size: 12px; font-weight: 600; line-height: 1.5; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions button:hover { background: #e7f2eb; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions .assembly-mark-present { background: #e6f4ea; color: #287555; border-color: #cce4d6; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions .assembly-mark-absent { background: #fcf0ee; color: #ad665c; border-color: #edd5cf; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions .attendance-line-summary-trigger { background: #fff; color: #428665; border-color: #c9ddd2; }
    body.klassin-ui :is(#assembly-logs, #scan-logs) { height: 190px; border: 1px solid var(--ui-line); border-radius: 6px; padding: 12px; background: #fff; scrollbar-width: thin; scrollbar-color: #bbd2c2 #f4f8f4; }
    body.klassin-ui :is(#assembly-logs, #scan-logs) > p:only-child { display: grid; min-height: 160px; margin: 0; place-items: center; color: #8aa093; font-size: 12px; }
    body.klassin-ui :is(#assembly-logs, #scan-logs) > div { box-shadow: none; border-radius: 5px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper) :is(button,select):focus-visible, body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice) button:focus-visible { outline: 2px solid #388c70 !important; outline-offset: 3px; box-shadow: none !important; }

    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active { overflow: hidden; background: #101e19; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-live-layout, #scan-live-layout) { margin: 0; gap: 0; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-video-wrapper, #scan-video-wrapper) { height: 100% !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important; background: #101e19; }
    body.klassin-ui :is(#assembly-active-topbar, #scan-active-topbar) { top: max(12px, env(safe-area-inset-top)); gap: 12px; max-width: 680px; border: 1px solid #d6e6dc; border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,.96); box-shadow: 0 4px 20px #061d1526; }
    :is(#assembly-active-topbar, #scan-active-topbar) .assembly-active-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: #e1f0e7; color: #367d63; }
    body.klassin-ui :is(#assembly-active-mode-label, #scan-active-mode-label) { margin: 0 0 3px; color: #688578; font-size: 11px; font-weight: 400; }
    body.klassin-ui :is(#assembly-active-title, #scan-active-title) { color: #264c3b; font-size: 16px; line-height: 1.4; }
    :is(#assembly-active-topbar, #scan-active-topbar) button { min-width: 40px; min-height: 40px; justify-content: center; border: 1px solid #cedfd3; border-radius: 6px; padding: 9px 12px; background: #eff5f0; color: #4f8068; font-size: 12px; font-weight: 600; }
    :is(#assembly-active-topbar, #scan-active-topbar) .assembly-camera-close { border-color: #ead2cd; background: #fcf0ed; color: #aa665c; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-side-panel, #scan-side-panel) { display: flex; min-height: 0; border: 0; border-left: 1px solid #d9e5dc; border-radius: 0; padding: 20px 16px; overflow-y: auto; overscroll-behavior: contain; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active .scan-side-checked-list-wrap { flex: 1 1 auto; min-height: 100px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active .scan-side-checked-list { max-height: none; }
    body.klassin-ui :is(#assembly-active-bottom-log, #scan-active-bottom-log) { bottom: max(12px, env(safe-area-inset-bottom)); }
    :is(#assembly-active-bottom-log, #scan-active-bottom-log) > div { gap: 10px; border-radius: 8px; padding: 12px; box-shadow: 0 4px 20px #061d1526; }
    :is(#assembly-active-bottom-log, #scan-active-bottom-log) > div > div:first-child { min-width: 0; }
    :is(#assembly-active-bottom-log, #scan-active-bottom-log) img { width: 48px; height: 60px; border: 1px solid #e0ebe3; border-radius: 5px; box-shadow: none; }
    :is(#assembly-active-bottom-log, #scan-active-bottom-log) h4 { font-size: 14px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
    :is(#assembly-active-bottom-log, #scan-active-bottom-log) > div > div:last-child > span { border-radius: 4px; box-shadow: none; }
    :is(#assembly-video-wrapper, #scan-video-wrapper):has(:is(#assembly-qr-verify, #scan-qr-verify):not(.hidden)) :is(#assembly-active-bottom-log, #scan-active-bottom-log) { display: none; }
    body.klassin-ui :is(#assembly-qr-verify, #scan-qr-verify):not(.hidden) { padding: 96px 20px 24px; overflow-y: auto; background: rgba(13,35,26,.95); }
    :is(#assembly-qr-verify, #scan-qr-verify) img { width: 110px; height: 130px; flex-shrink: 0; border: 2px solid #d7e9de; border-radius: 7px; box-shadow: none; }
    :is(#assembly-qr-verify, #scan-qr-verify) h3 { max-width: 520px; color: #f3faf5; font-size: 20px; line-height: 1.5; overflow-wrap: anywhere; }
    :is(#assembly-qr-verify, #scan-qr-verify) p { color: #b4ccbc; font-size: 13px; }
    :is(#assembly-qr-verify, #scan-qr-verify) button { min-height: 44px; border-radius: 6px; background: #376f57; box-shadow: none; }
    :is(#assembly-qr-verify, #scan-qr-verify) button:first-child { background: #3f5147; }
    body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice).swal2-popup { padding: 22px !important; border: 1px solid var(--ui-line); border-radius: 8px !important; background: #fff; }
    body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice) .swal2-title { color: var(--ui-ink); font-size: 20px !important; line-height: 1.5; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-hint { color: var(--ui-muted); font-size: 12px; font-weight: 400; }
    body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-button { min-height: 86px; border: 1px solid #c8dfd1 !important; border-radius: 6px !important; box-shadow: none !important; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-auto { background: #075b56 !important; color: #fff !important; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-confirm { background: #edf5ef !important; color: #356f56 !important; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-button .attendance-choice-copy strong, :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-button .attendance-choice-copy small, :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-button .attendance-choice-icon, :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-button .attendance-choice-arrow { color: inherit; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-icon { width: 40px; height: 40px; border: 0; border-radius: 6px; background: #ffffff1f; box-shadow: none; font-size: 19px; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-confirm .attendance-choice-icon { background: #dcece0; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-content { grid-template-columns: 40px minmax(0,1fr) 12px; gap: 12px; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-copy strong { font-size: 14px; font-weight: 600; line-height: 1.5; }
    :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-copy small { font-size: 11px; font-weight: 400; opacity: .8; line-height: 1.6; }
    body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice) .attendance-choice-cancel { min-height: 42px; border-radius: 6px !important; background: #f1f5f2 !important; color: #6e8778 !important; box-shadow: none; }
}
@media screen and (min-width: 1280px) {
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-live-layout, #scan-live-layout) { grid-template-columns: minmax(0,1fr) 300px !important; align-items: stretch; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-video-wrapper, #scan-video-wrapper) { height: 100% !important; min-height: 430px !important; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-side-panel, #scan-side-panel) { display: flex !important; align-items: stretch; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) .scan-side-checked-list-wrap { display: flex; flex: 1 1 auto; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) .scan-side-checked-list { max-height: 120px; }
}
@media screen and (min-width: 768px) {
    /* Leave the fixed quick-action button clear of the history toolbar. */
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-heading { padding-right: 64px; }
}
@media screen and (max-width: 1023px) {
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-side-panel, #scan-side-panel) { display: none !important; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-video-wrapper, #scan-video-wrapper) { height: 100dvh !important; }
}
@media screen and (max-width: 767px) {
    body.klassin-ui :is(#assembly-header, #scan-header) { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; }
    body.klassin-ui :is(#assembly-header, #scan-header) .attendance-workspace-title-icon { width: 40px; height: 40px; font-size: 18px; }
    body.klassin-ui :is(#assembly-header, #scan-header) h2 { font-size: 20px; }
    .assembly-workspace-date { padding-left: 52px; font-size: 11px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) { margin-bottom: 14px !important; padding: 14px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) .attendance-workspace-fields { gap: 10px; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) select { min-height: 46px; padding-inline: 8px; font-size: 16px; }
    body.klassin-ui :is(#assembly-room-context, #scan-room-context) { max-width: 70%; font-size: 11px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-video-wrapper, #scan-video-wrapper) { height: 250px !important; min-height: 250px !important; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) { gap: 20px; padding: 18px 14px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-prompt-icon { width: 66px; height: 66px; border-radius: 14px; font-size: 31px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-launch-head { gap: 10px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) h3 { font-size: 16px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-grid { gap: 8px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button { grid-template-columns: 20px minmax(0,1fr); gap: 8px; min-height: 52px; padding: 10px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button > i { font-size: 18px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button strong { font-size: 12px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-button .assembly-mode-arrow { display: none; }
    body.klassin-ui :is(#assembly-side-panel, #scan-side-panel) { padding: 14px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-side-panel, #scan-side-panel) { grid-template-columns: minmax(0,1fr) 138px; gap: 12px; }
    :is(#assembly-side-panel, #scan-side-panel) .assembly-room-summary h3 { font-size: 12px; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count span { font-size: 27px; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-count { padding-inline: 6px; }
    :is(#assembly-side-panel, #scan-side-panel) .scan-side-name { font-size: 14px; }
    body.klassin-ui :is(#assembly-history, #scan-history) { margin-top: 16px !important; padding-top: 16px; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions button { grid-column: auto; min-height: 44px; padding: 9px 7px; font-size: 11px; }
    body.klassin-ui :is(#assembly-active-topbar, #scan-active-topbar) { width: calc(100% - 20px); gap: 8px; padding: 8px; }
    :is(#assembly-active-topbar, #scan-active-topbar) .assembly-active-icon { width: 30px; height: 34px; }
    :is(#assembly-active-topbar, #scan-active-topbar) > div:first-child { gap: 8px; padding-right: 0; }
    body.klassin-ui :is(#assembly-active-title, #scan-active-title) { font-size: 14px; }
    body.klassin-ui :is(#assembly-active-mode-label, #scan-active-mode-label) { font-size: 10px; }
    :is(#assembly-active-topbar, #scan-active-topbar) button { min-width: 40px; min-height: 42px; padding: 9px; }
    body.klassin-ui :is(#assembly-qr-verify, #scan-qr-verify):not(.hidden) { padding-inline: 16px; }
    :is(#assembly-qr-verify, #scan-qr-verify) h3 { font-size: 17px; }
    body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice).swal2-popup { padding: 18px 14px !important; }
    body.klassin-ui :is(.assembly-scan-choice, .subject-scan-choice) .swal2-title { font-size: 18px !important; }
}
@media screen and (max-height: 500px) {
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-qr-verify, #scan-qr-verify):not(.hidden) { display: grid !important; grid-template-columns: 90px minmax(0,360px); align-content: center; justify-content: center; gap: 8px 18px; padding-top: 90px; }
    :is(#assembly-qr-verify, #scan-qr-verify) img { grid-row: 1 / 4; width: 90px; height: 110px; margin: 0; }
    :is(#assembly-qr-verify, #scan-qr-verify) h3, :is(#assembly-qr-verify, #scan-qr-verify) p { margin: 0; text-align: left; }
    :is(#assembly-qr-verify, #scan-qr-verify) > div { gap: 8px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .assembly-idle-scan-line { animation: none; } }
@keyframes assemblyIdleScan { 0%,100% { top: 18%; opacity: .3; } 50% { top: 80%; opacity: .8; } }

@media screen {
    body.klassin-ui :is(#view-scanning,#view-manual_check) .subject-room-picker { min-width: 0; }
    body.klassin-ui :is(#view-scanning,#view-manual_check) .attendance-picker-expanded { border: 0 !important; border-radius: 0 !important; padding: 0; background: none !important; }
    .attendance-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; color: var(--ui-muted); font-size: 12px; font-weight: 500; }
    .attendance-picker-heading > span { display: inline-flex; align-items: center; gap: 7px; }
    .attendance-picker-heading i { color: #73a08b; }
    .attendance-subject-options { display: grid; max-height: 240px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; overflow-y: auto; padding: 2px; scrollbar-width: thin; scrollbar-color: #bad2c3 #f4f8f4; }
    .attendance-subject-option { min-width: 0; min-height: 70px; border: 1px solid #d4e2da; border-radius: 6px; padding: 12px; background: #fff; color: #3d6754; text-align: left; }
    .attendance-subject-option strong { display: block; color: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
    .attendance-subject-option small { display: block; margin-top: 5px; color: #80978a; font-size: 11px; }
    .attendance-subject-option:hover { background: #edf5ef; }
    .attendance-subject-option[aria-pressed="true"] { border-color: #075b56; background: #075b56; color: #fff; }
    .attendance-subject-option[aria-pressed="true"] small { color: #bfded0; }
    .attendance-picker-selection, .attendance-picker-selected-subject { display: flex; width: 100%; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; border: 0; border-radius: 0; padding: 0; background: none; color: var(--ui-ink); text-align: left; box-shadow: none; }
    .attendance-picker-selection strong, .attendance-picker-selected-subject strong { display: block; color: var(--ui-ink); font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
    .attendance-picker-label { display: block; margin-bottom: 4px; color: #80988a; font-size: 11px; font-weight: 400; }
    .attendance-picker-room { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #4d8b70; font-size: 12px; }
    .attendance-picker-change, .attendance-picker-edit { display: inline-flex; min-height: 40px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; border: 1px solid #c9ddd0; border-radius: 5px; padding: 8px 12px; background: #eef5ef; color: #4b7a60; font-size: 12px; font-weight: 500; }
    .attendance-picker-selection:hover .attendance-picker-change, .attendance-picker-edit:hover { background: #dfeee3; }
    .attendance-picker-rooms { margin-top: 14px; border-top: 1px solid var(--ui-line); padding-top: 14px; }
    .attendance-picker-rooms.hidden { display: none; }
    .attendance-room-options { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 8px; }
    .attendance-room-option { min-width: 0; min-height: 44px; border: 1px solid #c9ddd0; border-radius: 5px; padding: 9px 10px; background: #f5f9f5; color: #3c6d52; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
    .attendance-room-option:hover { background: #e5f1e7; }
    .attendance-room-option[aria-pressed="true"] { border-color: #075b56; background: #075b56; color: #fff; }
    .attendance-picker-empty { grid-column: 1 / -1; padding: 22px 10px; color: #849b8b; font-size: 13px; text-align: center; }
    body.klassin-ui :is(#view-scanning,#view-manual_check) .attendance-timetable-preset { margin-bottom: 14px; border: 1px solid #d4e4d8; border-radius: 6px; padding: 10px 12px; background: #edf5ef; box-shadow: none; }
    body.klassin-ui :is(#view-scanning,#view-manual_check) .attendance-timetable-preset-icon { width: 32px; height: 32px; border: 0; border-radius: 5px; background: #e0eee3; color: #57876b; }
    body.klassin-ui :is(#view-scanning,#view-manual_check) .attendance-timetable-preset-main strong { color: #4d785f; font-size: 12px; }
    body.klassin-ui :is(#view-scanning,#view-manual_check) .attendance-timetable-preset-main span { color: #809787; font-size: 11px; }
    body.klassin-ui :is(#view-scanning,#view-manual_check) .attendance-timetable-preset b { border: 0; border-radius: 4px; background: #dceee2; color: #528366; font-size: 10px; }
    body.klassin-ui .subject-attendance-choice.attendance-choice-popup .attendance-choice-camera { background: #0865a9 !important; color: #fff !important; }
    body.klassin-ui .subject-attendance-choice.attendance-choice-popup .attendance-choice-camera:is(:hover,:focus-visible) { background: #07558f !important; color: #fff !important; }
    body.klassin-ui .subject-attendance-choice.attendance-choice-popup .attendance-choice-manual { background: #16834b !important; color: #fff !important; }
    body.klassin-ui .subject-attendance-choice.attendance-choice-popup .attendance-choice-manual:is(:hover,:focus-visible) { background: #116e3f !important; color: #fff !important; }
    body.klassin-ui .subject-attendance-choice.attendance-choice-popup .attendance-choice-manual .attendance-choice-icon { background: #ffffff26; color: inherit; }
    body.klassin-ui .subject-attendance-choice.attendance-choice-popup .attendance-choice-copy small { color: inherit; opacity: 1; }

    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) :is(.manual-subject-page, .manual-assembly-page) { min-width: 0; max-width: none; margin: 0; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: none; box-shadow: none !important; overflow: visible; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-header { align-items: center; gap: 14px; margin-bottom: 18px; border-top: 0; padding: 0 0 16px; }
    :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-title-wrap { min-width: 0; gap: 12px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-title-icon { width: 44px; height: 44px; border: 0; border-radius: 8px; background: var(--ui-mint); color: var(--ui-teal); box-shadow: none; font-size: 20px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-header h2 { color: var(--ui-ink); font-size: 22px; line-height: 1.4; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .assembly-workspace-subtitle { margin-top: 3px; color: var(--ui-muted); font-size: 12px; }
    .manual-save-indicator { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; color: #648c73; font-size: 11px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-body { padding: 0; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-controls--manual { margin: 0 0 18px; border: 1px solid var(--ui-line); border-radius: 8px; padding: 16px 18px; background: #fff; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-controls-heading { gap: 8px; margin-bottom: 14px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-controls-heading > span { width: auto; height: auto; border: 0; background: none; color: #6a9980; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-controls-heading h3 { color: var(--ui-ink); font-size: 14px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-fields-manual { grid-template-columns: 180px minmax(0,1fr); align-items: start; gap: 20px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-manual-date-field { grid-column: auto; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) #manual-subject-room-picker { grid-column: auto; min-width: 0; border-left: 1px solid var(--ui-line); padding-left: 20px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) label[for="manual-date"] { margin-bottom: 8px; color: var(--ui-muted); font-size: 12px; }
    body.klassin-ui :is(#manual-date, #manual-assembly-date) { min-height: 46px; border-color: #cbddd5 !important; border-radius: 6px !important; padding: 10px 12px; background: #fff; color: var(--ui-ink); font-size: 14px; box-shadow: none !important; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) { gap: 0 !important; margin-bottom: 12px; border: 1px solid var(--ui-line); border-radius: 6px; padding: 14px 0; background: #fff; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) > div { min-width: 0; min-height: 0; border: 0 !important; border-right: 1px solid var(--ui-line) !important; border-radius: 0 !important; padding: 0 10px; background: none !important; box-shadow: none; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) > div:last-child { border-right: 0 !important; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) p:first-child { color: #7c9486; font-size: 11px; font-weight: 400; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) p:last-child { margin-top: 7px; font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
    body.klassin-ui :is(#manual-sum-present, #manual-assembly-sum-present) { color: #287a59; }
    body.klassin-ui :is(#manual-sum-late, #manual-assembly-sum-late) { color: #a37c36; }
    body.klassin-ui :is(#manual-sum-leave, #manual-assembly-sum-leave) { color: #4b8598; }
    body.klassin-ui :is(#manual-sum-absent, #manual-assembly-sum-absent) { color: #b06b61; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-line-summary-trigger { min-height: 40px; border: 1px solid #c9ddd2; border-radius: 5px; padding: 8px 12px; background: #fff; color: #427958; font-size: 12px; box-shadow: none; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-list-heading { position: static; gap: 10px; margin-bottom: 12px; border-color: var(--ui-line); padding: 10px 0; background: none; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-list-heading h3, body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-checked-section h3 { color: var(--ui-ink); font-size: 15px; }
    :is(#view-manual_check, #view-manual_assembly) .manual-list-actions { display: flex; flex-shrink: 0; align-items: center; gap: 12px; }
    :is(#view-manual_check, #view-manual_assembly) .manual-list-save-state { color: #87a08e; font-size: 10px; white-space: nowrap; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-list-actions .attendance-line-summary-trigger { width: auto; min-height: 36px; padding: 7px 10px; font-size: 11px; }
    body.klassin-ui :is(#manual-subject-controls, #manual-assembly-controls):not(.hidden) { display: flex !important; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
    body.klassin-ui :is(#manual-subject-controls, #manual-assembly-controls) .manual-bulk-btn { min-height: 42px; border-radius: 5px; padding: 9px 13px; font-size: 12px; line-height: 1.5; box-shadow: none; transform: none; }
    body.klassin-ui :is(#btn-manual-all-present, #btn-assembly-all-present) { border-color: #cce2d1; background: #e9f5ec; color: #367752; }
    body.klassin-ui :is(#btn-manual-all-absent, #btn-assembly-all-absent) { border-color: #ecd5ce; background: #fcf1ee; color: #aa6b5e; }
    body.klassin-ui :is(#btn-manual-reset, #btn-assembly-reset) { border-color: #d7e2d8; background: #f2f6f2; color: #718775; }
    body.klassin-ui #btn-manual-import-csv { width: 44px; min-width: 44px; flex: 0 0 44px; border-color: #ccded3; background: #eaf1ed; color: #547c66; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) :is(:is(#manual-pending-list, #manual-assembly-pending-list),:is(#manual-checked-list, #manual-assembly-checked-list)) { grid-template-columns: minmax(0,1fr) !important; gap: 12px !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-card { min-height: 0 !important; height: auto !important; aspect-ratio: auto !important; border-color: #dbe7f0; border-left-color: #cbd5e1; box-shadow: none; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-card.present { border-left-color: #10b981; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-card.late { border-left-color: #f59e0b; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-card.leave { border-left-color: #38bdf8; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-card.absent { border-left-color: #ef4444; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-student-main { display: grid !important; min-height: 0 !important; flex: 0 0 auto !important; grid-template-columns: 96px minmax(0,1fr) !important; gap: 14px; padding: 14px; text-align: left !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-photo-wrap { display: block !important; width: auto !important; padding: 0 !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-photo-hint { display: none !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-student-info { min-width: 0; width: auto !important; text-align: left !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-photo { width: 96px !important; height: 128px !important; border: 1px solid #dce8df; border-radius: 5px !important; box-shadow: none; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-student-name { margin: 7px 0 3px; color: #172033; font-size: 16px !important; font-weight: 600; line-height: 1.6; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-student-id { color: #64748b; font-size: 12px !important; font-weight: 400; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-room { border-radius: 4px; padding: 3px 7px; background: #e0f2fe; color: #0369a1; font-size: 11px; font-weight: 500; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-status { border-radius: 4px; padding: 4px 7px; font-size: 11px; font-weight: 500; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-status.pending { background: #f1f5f9; color: #64748b; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-status.present { background: #dcfce7; color: #047857; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-status.late { background: #fef3c7; color: #b45309; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-status.leave { background: #e0f2fe; color: #0369a1; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-attendance-status.absent { background: #fee2e2; color: #b91c1c; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) 38px; gap: 7px; border-top: 1px solid #e2e8f0; padding: 10px 12px; background: #f8fafc; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn { min-width: 0; min-height: 44px !important; border: 1px solid #cbd5e1; border-radius: 5px; padding: 8px 5px !important; background: #fff; color: #64748b; font-size: 12px; font-weight: 600; box-shadow: none; transform: none; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.present { border-color: #a7f3d0; color: #047857; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.late { border-color: #fde68a; color: #b45309; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.leave { border-color: #bae6fd; color: #0369a1; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.absent { border-color: #fecaca; color: #b91c1c; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.present.active { border-color: #10b981; background: #10b981; color: #fff; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.late.active { border-color: #f59e0b; background: #f59e0b; color: #fff; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.leave.active { border-color: #0ea5e9; background: #0ea5e9; color: #fff; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.absent.active { border-color: #ef4444; background: #ef4444; color: #fff; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.present:not(.active):hover { background: #ecfdf5; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.late:not(.active):hover { background: #fffbeb; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.leave:not(.active):hover { background: #f0f9ff; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn.absent:not(.active):hover { background: #fef2f2; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn:disabled { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; opacity: 1; cursor: default; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-checked-section { margin-top: 24px; border-top: 1px solid var(--ui-line); padding-top: 18px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) :is(:is(#manual-pending-list, #manual-assembly-pending-list),:is(#manual-checked-list, #manual-assembly-checked-list)) > div:only-child { grid-column: 1 / -1; border-color: #d5e3d7; border-radius: 6px; background: #f5f9f5; color: #7c9482; font-size: 13px; }
    body.klassin-ui :is(#view-scanning,:is(#view-manual_check, #view-manual_assembly)) :is(button,input):focus-visible { outline: 2px solid #398c70; outline-offset: 3px; box-shadow: none; }
}
@media screen and (min-width: 1100px) {
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) :is(:is(#manual-pending-list, #manual-assembly-pending-list),:is(#manual-checked-list, #manual-assembly-checked-list)) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media screen and (min-width: 1600px) {
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) :is(:is(#manual-pending-list, #manual-assembly-pending-list),:is(#manual-checked-list, #manual-assembly-checked-list)) { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media screen and (max-width: 1023px) {
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-fields-manual { grid-template-columns: minmax(0,1fr); gap: 16px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-manual-date-field { max-width: 240px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) #manual-subject-room-picker { border: 0; border-top: 1px solid var(--ui-line); padding: 14px 0 0; }
}
@media screen and (max-width: 767px) {
    body.klassin-ui #scan-header h2 { font-size: 19px; }
    body.klassin-ui #scan-room-context { max-width: 45%; }
    .attendance-subject-options { grid-template-columns: minmax(0,1fr); max-height: 260px; }
    .attendance-subject-option { min-height: 62px; padding: 10px 12px; }
    .attendance-picker-selection strong, .attendance-picker-selected-subject strong { font-size: 14px; }
    .attendance-picker-change, .attendance-picker-edit { gap: 6px; padding: 8px 10px; font-size: 11px; }
    .attendance-room-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .attendance-room-option { padding-inline: 5px; font-size: 12px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-header { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-title-icon { width: 40px; height: 40px; font-size: 18px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-header h2 { font-size: 19px; }
    :is(#view-manual_check, #view-manual_assembly) .manual-save-indicator { padding-left: 52px; font-size: 10px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-workspace-controls--manual { margin-bottom: 14px; padding: 14px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-manual-date-field { max-width: none; }
    body.klassin-ui :is(#manual-date, #manual-assembly-date) { font-size: 16px; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) { padding: 12px 0; }
    body.klassin-ui :is(#manual-summary, #manual-assembly-summary) p:last-child { font-size: 25px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .attendance-list-heading h3 { font-size: 14px; }
    :is(#view-manual_check, #view-manual_assembly) .manual-list-actions { gap: 8px; }
    :is(#view-manual_check, #view-manual_assembly) .manual-list-save-state { font-size: 9px; }
    body.klassin-ui :is(#manual-subject-controls, #manual-assembly-controls) .manual-bulk-btn { min-height: 44px; flex: 1 1 auto; padding: 9px 10px; font-size: 11px; }
    body.klassin-ui :is(#manual-subject-controls, #manual-assembly-controls) #btn-manual-import-csv { flex: 0 0 44px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-student-main { grid-template-columns: 86px minmax(0,1fr) !important; gap: 12px; padding: 12px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-photo { width: 86px !important; height: 116px !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-student-name { font-size: 15px !important; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-actions { grid-template-columns: repeat(4,minmax(0,1fr)) 36px; gap: 6px; padding: 10px; }
    body.klassin-ui :is(#view-manual_check, #view-manual_assembly) .manual-subject-status-btn { min-height: 44px; font-size: 12px; }
}

/* Both course pickers share the original manual palette with full-opacity black text. */
@media screen {
    :is(#scan-subject-room-picker,#manual-subject-room-picker) :is(.attendance-picker-heading,.attendance-picker-label,.attendance-picker-room,.attendance-picker-change,.attendance-picker-edit,.attendance-picker-empty) { color: #000000; opacity: 1; }
    :is(#scan-subject-room-picker,#manual-subject-room-picker) :is(.attendance-picker-selection,.attendance-picker-selected-subject) strong { color: #000000; opacity: 1; }
    :is(#scan-subject-room-picker,#manual-subject-room-picker) :is(.attendance-subject-option,.attendance-room-option):not([aria-pressed="true"]) { color: #000000; opacity: 1; }
    :is(#scan-subject-room-picker,#manual-subject-room-picker) .attendance-subject-option small { color: inherit; opacity: 1; }
}

@media screen {
    body.klassin-ui #view-manual_assembly .attendance-workspace-header { border-bottom: 1px solid var(--ui-line); background: none; border-radius: 0; box-shadow: none; }
    #view-manual_assembly #assembly-self-staff-panel:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; background: none; }
    body.klassin-ui #view-manual_assembly #assembly-self-staff-panel > button { min-width: 0; min-height: 42px; gap: 7px; border: 1px solid #ccded2; border-radius: 6px; padding: 9px 13px; background: #fff; color: #4c7a62; font-size: 12px; font-weight: 600; line-height: 1.5; box-shadow: none; }
    body.klassin-ui #view-manual_assembly #assembly-self-staff-panel > button:nth-child(2) { border-color: #075b56; background: #075b56; color: #fff; }
    body.klassin-ui #view-manual_assembly #assembly-self-staff-panel > button:hover { filter: brightness(.97); }
    body.klassin-ui #manual-assembly-filter-toggle { min-height: 46px; gap: 10px; border: 1px solid #cfdfd4; border-radius: 6px; padding: 11px 13px; background: #fff; color: #49735b; font-size: 12px; font-weight: 500; line-height: 1.5; box-shadow: none; text-align: left; }
    #manual-assembly-filter-toggle > span { min-width: 0; overflow-wrap: anywhere; }
    #manual-assembly-filter-toggle > i { flex-shrink: 0; color: #83a48c; font-size: 10px; }
    body.klassin-ui #manual-assembly-filter-panel { min-width: 0; gap: 14px; margin: 0 0 18px; border: 1px solid var(--ui-line); border-radius: 8px; padding: 16px 18px; background: #fff; }
    #manual-assembly-filter-panel:not(.hidden) { display: grid; }
    #manual-assembly-filter-panel > div { min-width: 0; gap: 8px; }
    body.klassin-ui #manual-assembly-filter-panel label { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--ui-muted); font-size: 12px; font-weight: 500; }
    #manual-assembly-filter-panel label i { color: #77a08a; }
    body.klassin-ui #manual-assembly-filter-panel :is(input,select) { min-width: 0; min-height: 46px; width: 100%; border-color: #cbddd5 !important; border-radius: 6px !important; padding: 10px 12px; background: #fff; color: var(--ui-ink); font-size: 14px; font-weight: 500; box-shadow: none !important; }
    body.klassin-ui #manual-assembly-filter-panel select:disabled { background: #f2f7f4; color: #55786c; opacity: 1; }
    body.klassin-ui #manual-assembly-sum-duty { color: #7e22ce; }
    body.klassin-ui #view-manual_assembly .manual-attendance-card.duty { border-left-color: #8b5cf6; }
    body.klassin-ui #view-manual_assembly .manual-attendance-status.duty { background: #f3e8ff; color: #7e22ce; }
    #view-manual_assembly .manual-attendance-room-row { flex-wrap: wrap; gap: 6px; }
    body.klassin-ui #view-manual_assembly .manual-attendance-duty-toggle { min-height: 32px; max-width: 100%; border: 1px solid #ddd6fe; border-radius: 5px; padding: 5px 7px; background: #faf5ff; color: #7e22ce; font-size: 11px; font-weight: 500; line-height: 1.4; box-shadow: none; }
    body.klassin-ui #view-manual_assembly .manual-attendance-duty-toggle.active { border-color: #8b5cf6; background: #8b5cf6; color: #fff; }
    body.klassin-ui #view-manual_assembly .manual-assembly-profile-link { min-width: 0; color: inherit; font: inherit; line-height: inherit; text-align: left; white-space: normal; overflow-wrap: anywhere; }
    #view-manual_assembly .assembly-manual-line-desktop { align-items: center; gap: 12px; margin: 0 0 14px; }
    body.klassin-ui #view-manual_assembly :is(button,input,select):focus-visible { outline: 2px solid #398c70; outline-offset: 3px; box-shadow: none; }
}
@media screen and (min-width: 768px) {
    body.klassin-ui #manual-assembly-month-panel { min-width: 0; max-width: 100%; }
    body.klassin-ui #view-manual_assembly .manual-assembly-month-toolbar { min-width: 0; border: 1px solid var(--ui-line); border-radius: 7px 7px 0 0; padding: 16px; background: #fff; }
    #view-manual_assembly .manual-assembly-month-left { min-width: 0; flex-direction: column; gap: 14px; width: 100%; }
    #view-manual_assembly .manual-assembly-month-heading { min-width: 0; }
    #view-manual_assembly .manual-assembly-month-heading h3 { color: var(--ui-ink); font-size: 15px; font-weight: 600; }
    #view-manual_assembly .manual-assembly-month-heading h3 i { color: #6d9a7d; }
    #view-manual_assembly .manual-assembly-month-heading p { color: #7f9587; font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
    #view-manual_assembly .manual-assembly-month-tools { min-width: 0; width: 100%; gap: 12px; padding: 0; }
    #view-manual_assembly :is(.manual-assembly-month-mode,.manual-assembly-month-bulk) { min-width: 0; gap: 6px; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; }
    #view-manual_assembly .manual-assembly-month-bulk { flex: 1 1 420px; }
    #view-manual_assembly .manual-assembly-tool-label { padding-left: 0; color: #8a9e90; font-size: 10px; font-weight: 500; }
    body.klassin-ui #view-manual_assembly :is(.manual-assembly-month-mode,.manual-assembly-month-bulk) button { min-height: 38px; border-radius: 5px; padding: 8px 10px; font-size: 11px; font-weight: 600; box-shadow: none; transform: none; }
    body.klassin-ui #view-manual_assembly .manual-assembly-month-bulk button:is(.print,.select-date) { border-color: #cbded0; background: #f0f6f1; color: #537c60; }
    #view-manual_assembly .manual-assembly-month-selected-count { border: 0; border-radius: 4px; background: #eaf3ec; color: #6a8f75; font-size: 10px; }
    body.klassin-ui #view-manual_assembly .manual-assembly-month-table-wrap { min-width: 0; max-width: 100%; max-height: min(68dvh,720px); overflow: auto; overscroll-behavior: contain; border-color: var(--ui-line); border-radius: 0 0 7px 7px; scrollbar-width: thin; scrollbar-color: #adcdb8 #f3f8f4; }
    #view-manual_assembly .manual-assembly-month-table { min-width: 1280px; font-size: 12px; }
    #view-manual_assembly .manual-assembly-month-table :is(th,td) { border-color: #e0eae2; }
    #view-manual_assembly .manual-assembly-month-table thead th { background: #edf5ef; color: #52775e; font-weight: 600; }
    #view-manual_assembly .manual-assembly-month-table thead :is(.manual-assembly-month-index,.manual-assembly-month-student) { background: #edf5ef !important; }
    #view-manual_assembly .manual-assembly-month-student img { width: 38px; height: 48px; border: 1px solid #dce7de; border-radius: 4px; }
    #view-manual_assembly .manual-assembly-month-student strong { color: #365941; font-size: 12px; font-weight: 600; line-height: 1.5; }
    #view-manual_assembly .manual-assembly-month-student span { color: #8ba08f; font-size: 10px; font-weight: 400; }
    #view-manual_assembly .manual-assembly-month-duty-btn { border-radius: 4px; box-shadow: none; font-size: 10px; }
    #view-manual_assembly .manual-assembly-month-cell { width: 34px; height: 36px; border-radius: 4px; font-size: 12px; box-shadow: none; transform: none; }
    #view-manual_assembly .manual-assembly-month-day span { font-size: 13px; }
    #view-manual_assembly .manual-assembly-month-date-check input { width: 16px; height: 16px; accent-color: #16856c; }
    #view-manual_assembly .manual-assembly-month-empty { border: 1px solid var(--ui-line); border-radius: 7px; background: #f5f9f5; color: #6f8b77; box-shadow: none; }
}
@media screen and (max-width: 767px) {
    #view-manual_assembly #assembly-self-staff-panel:not([hidden]) { gap: 7px; margin-bottom: 12px; }
    body.klassin-ui #view-manual_assembly #assembly-self-staff-panel > button { flex: 1 1 0; min-height: 44px; padding: 9px 7px; font-size: 11px; }
    body.klassin-ui #manual-assembly-filter-panel { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 14px; padding: 14px; }
    #manual-assembly-filter-panel > div:first-child { grid-column: 1 / -1; }
    body.klassin-ui #manual-assembly-filter-panel :is(input,select) { font-size: 16px; padding-inline: 9px; }
    #view-manual_assembly .assembly-manual-line-desktop { display: none !important; }
    body.klassin-ui #manual-assembly-summary > div { padding-inline: 5px; }
    body.klassin-ui #manual-assembly-summary p:last-child { font-size: 23px; }
}

/* Retain an inset inside the bordered tournament shell after the shared header reset. */
@media screen {
    body.klassin-ui #view-tournaments .school-tournaments-page-header { padding-inline: 22px; }
}
@media screen and (max-width: 767px) {
    body.klassin-ui #view-tournaments .school-tournaments-page-header { padding-inline: 12px; }
}

/* Teaching media: bright content categories within the shared school workspace. */
@media screen {
    body.klassin-ui #view-subject_media .subject-media-shell { min-width: 0; width: 100%; max-width: none; padding: 0 0 24px; color: var(--ui-ink); }
    body.klassin-ui #view-subject_media .subject-media-header { min-height: 0; gap: 16px; margin-bottom: 0; border: 0; border-bottom: 1px solid var(--ui-line); padding: 0 0 18px; background: none; box-shadow: none; }
    #view-subject_media .subject-media-title-wrap { gap: 12px; }
    #view-subject_media .subject-media-title-icon { width: 48px; height: 48px; flex-basis: 48px; border: 0; border-radius: 8px; background: #098773; color: #fff; font-size: 23px; box-shadow: none; }
    #view-subject_media .subject-media-title-wrap h2 { color: #173b33; font-size: 22px; font-weight: 700; line-height: 1.5; }
    #view-subject_media #subject-media-header-caption { margin: 3px 0 0; color: #718b80; font-size: 12px; font-weight: 400; }
    #view-subject_media .subject-media-refresh-button { min-width: 44px; min-height: 44px; gap: 7px; border: 1px solid #c8dfd3; border-radius: 6px; padding: 10px 13px; background: #fff; color: #27775b; font-size: 12px; box-shadow: none; }
    #view-subject_media .subject-media-refresh-button:disabled { opacity: .55; cursor: wait; }
    #view-subject_media .subject-media-content { min-width: 0; padding: 0; }
    #view-subject_media .subject-media-picker-band { display: grid; grid-template-columns: minmax(170px,1fr) minmax(0,2fr); align-items: center; gap: 14px; margin: 0; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; padding: 16px 0; background: none; }
    #view-subject_media .subject-media-picker-copy { gap: 9px; }
    #view-subject_media .subject-media-picker-icon { width: 32px; height: 32px; border: 0; border-radius: 6px; background: #e3efff; color: #2471d2; font-size: 15px; box-shadow: none; }
    #view-subject_media .subject-media-picker-copy label { color: #4b7061; font-size: 13px; font-weight: 600; }
    #view-subject_media .subject-media-picker-band select { min-width: 0; min-height: 46px; width: 100%; border-radius: 6px; padding: 10px 12px; background: #fff; color: var(--ui-ink); font-size: 14px; font-weight: 500; }
    #view-subject_media .subject-media-action-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 20px 0; }
    #view-subject_media .subject-media-selected-subject { min-width: 0; flex: 1 1 260px; border: 0; border-radius: 0; padding: 0; background: none; }
    #view-subject_media .subject-media-selected-subject > span { display: inline-block; margin-bottom: 5px; border: 0; border-radius: 4px; padding: 3px 7px; background: #e2efff; color: #2268bf; font-size: 11px; font-weight: 600; }
    #view-subject_media .subject-media-selected-subject h3 { margin: 0; color: var(--ui-ink); font-size: 19px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
    #view-subject_media .subject-media-selected-subject p { margin: 5px 0 0; color: #789184; font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
    #view-subject_media .subject-media-create-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    #view-subject_media .subject-media-add-button { display: flex; min-width: 0; min-height: 52px; flex-direction: row; align-items: center; gap: 10px; border: 0; border-radius: 6px; padding: 12px 14px; background: #d93650; color: #fff; box-shadow: none; transform: none; }
    #view-subject_media .subject-media-add-button.slides { background: #2474d7; }
    #view-subject_media .subject-media-add-button > i { display: inline; width: auto; height: auto; flex-basis: auto; border: 0; border-radius: 0; padding: 0; background: none; color: #fff; font-size: 21px; box-shadow: none; }
    #view-subject_media .subject-media-add-button strong { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
    #view-subject_media .subject-media-add-button .subject-media-add-mark { margin-left: 10px; font-size: 12px; opacity: .8; }
    #view-subject_media .subject-media-add-button:hover { filter: brightness(.94); box-shadow: none; transform: none; }
    #view-subject_media .subject-media-summary-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 0; border-block: 1px solid var(--ui-line); padding: 13px 0; }
    #view-subject_media .subject-media-summary-row > div { display: flex; min-width: 0; min-height: 50px; align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--ui-line); border-radius: 0; padding: 0 15px; background: none; color: #6c897a; box-shadow: none; }
    #view-subject_media .subject-media-summary-row > div:first-child { padding-left: 0; }
    #view-subject_media .subject-media-summary-row > div:last-child { border-right: 0; }
    #view-subject_media .subject-media-summary-row i { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 6px; background: #e4eeff; color: #3972cb; font-size: 15px; }
    #view-subject_media .subject-media-summary-row > div:nth-child(2) i { background: #ddf5e9; color: #15936b; }
    #view-subject_media .subject-media-summary-row > div:nth-child(3) i { background: #ffe8ec; color: #dc3d57; }
    #view-subject_media .subject-media-summary-row > div:nth-child(4) i { background: #fff0cb; color: #ac7510; }
    #view-subject_media .subject-media-summary-row strong { display: block; color: #305c47; font-size: 22px; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
    #view-subject_media .subject-media-summary-row small { display: block; margin-top: 4px; color: #789183; font-size: 11px; font-weight: 400; }
    .subject-media-browser-toolbar { display: grid; gap: 13px; margin: 22px 0 16px; }
    .subject-media-browser-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
    .subject-media-browser-heading h3 { display: flex; align-items: baseline; gap: 9px; margin: 0; color: #274c3b; font-size: 16px; font-weight: 600; }
    .subject-media-browser-heading h3 > span { color: #8aa091; font-size: 11px; font-weight: 400; }
    .subject-media-type-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; border: 1px solid #d6e4da; border-radius: 6px; padding: 3px; background: #fff; }
    .subject-media-type-filters button { display: flex; min-width: 0; min-height: 36px; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 4px; padding: 7px 10px; color: #7c9484; font-size: 12px; font-weight: 500; }
    .subject-media-type-filters button small { color: inherit; opacity: .7; font-size: 10px; font-variant-numeric: tabular-nums; }
    .subject-media-type-filters button[aria-pressed="true"] { background: #087f6b; color: #fff; }
    .subject-media-type-filters button.youtube[aria-pressed="true"] { background: #d93650; }
    .subject-media-type-filters button.slides[aria-pressed="true"] { background: #2474d7; }
    .subject-media-browser-fields { display: flex; gap: 9px; min-width: 0; }
    #view-subject_media .subject-media-search-field { display: flex; min-width: 0; min-height: 44px; width: auto; flex: 1 1 auto; align-items: center; gap: 8px; border: 1px solid #cbded2; border-radius: 6px; padding: 8px 12px; background: #fff; color: #7fa38a; box-shadow: none; }
    body.klassin-ui #view-subject_media .subject-media-search-field input { min-width: 0; min-height: 0; width: 100%; border: 0; border-radius: 0; padding: 0; background: none; color: #31543e; font-size: 13px; font-weight: 400; box-shadow: none; }
    #view-subject_media .subject-media-browser-fields > select { min-width: 110px; min-height: 44px; flex: 0 0 auto; border: 1px solid #cbded2; border-radius: 6px; padding: 9px 10px; background: #fff; color: #5b7a65; font-size: 12px; }
    #view-subject_media .subject-media-grid { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 16px; }
    #view-subject_media .subject-media-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #d8e5dc; border-top: 3px solid #ef5b72; border-radius: 8px; background: #fff; box-shadow: 0 3px 8px #204d3510; }
    #view-subject_media .subject-media-card.is-slides { border-top-color: #3c8fe5; }
    #view-subject_media .subject-media-card-preview { position: relative; display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 0; padding: 0; background: #fff2f4; }
    #view-subject_media .subject-media-card-preview.slides { background: #eaf4ff; }
    #view-subject_media .subject-media-placeholder { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; place-items: center; background: inherit; color: #ed9ba9; font-size: 52px; }
    #view-subject_media .slides .subject-media-placeholder { color: #8bbde8; }
    #view-subject_media .subject-media-card-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .18s ease; }
    #view-subject_media .subject-media-card-preview.slides > img { object-fit: contain; }
    #view-subject_media .subject-media-card-preview > img[hidden] { display: none !important; }
    #view-subject_media .subject-media-preview-type { top: 10px; left: 10px; right: auto; bottom: auto; gap: 6px; border: 0; border-radius: 4px; padding: 5px 8px; background: #d93650; color: #fff; font-size: 10px; font-weight: 600; box-shadow: none; }
    #view-subject_media .slides .subject-media-preview-type { background: #2474d7; }
    #view-subject_media .subject-media-preview-play { width: 42px; height: 42px; border: 1px solid #ffffffb3; border-radius: 50%; background: #fff; color: #d93650; font-size: 15px; box-shadow: 0 2px 10px #283a3b26; }
    #view-subject_media .slides .subject-media-preview-play { background: #fff; color: #2474d7; }
    #view-subject_media .subject-media-card-body { min-width: 0; min-height: 0; gap: 0; padding: 14px; }
    #view-subject_media .subject-media-card-status-row { flex-direction: row; align-items: center; gap: 10px; min-height: 28px; margin-bottom: 8px; }
    #view-subject_media :is(.subject-media-publish-badge,.subject-media-learning-label) { gap: 5px; border-radius: 4px; padding: 4px 7px; font-size: 10px; font-weight: 500; }
    #view-subject_media .subject-media-publish-badge.published, #view-subject_media .subject-media-learning-label { background: #e1f6e9; color: #218456; }
    #view-subject_media .subject-media-publish-badge.draft { background: #f1f3f4; color: #89969e; }
    .subject-media-card-publish { position: relative; display: flex; width: 44px; height: 28px; flex: 0 0 44px; align-items: center; cursor: pointer; }
    .subject-media-card-publish input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    .subject-media-card-publish > span { position: relative; width: 38px; height: 22px; border-radius: 12px; background: #c8d1d6; transition: background .16s ease; }
    .subject-media-card-publish > span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
    .subject-media-card-publish input:checked + span { background: #0ba779; }
    .subject-media-card-publish input:checked + span::after { transform: translateX(16px); }
    .subject-media-card-publish input:disabled + span { opacity: .5; }
    .subject-media-card-publish input:focus-visible + span { outline: 2px solid #287dba; outline-offset: 3px; }
    #view-subject_media .subject-media-card-body h4 { margin: 5px 0 7px; color: #243e36; font-size: 16px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
    #view-subject_media .subject-media-card-body > p { margin: 0; color: #7d8e89; font-size: 12px; font-weight: 400; line-height: 1.7; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
    #view-subject_media .subject-media-owner { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; margin-top: auto; padding-top: 14px; color: #769482; font-size: 10px; font-weight: 400; }
    .subject-media-owner > span { min-width: 0; display: flex; align-items: center; gap: 5px; overflow-wrap: anywhere; }
    #view-subject_media .subject-media-updated { color: #97a79f; font-size: 9px; font-weight: 400; }
    #view-subject_media .subject-media-card-actions { display: flex; gap: 6px; border-top: 1px solid #e3ece6; padding: 10px 12px; background: #fafcfb; }
    #view-subject_media .subject-media-card-actions button { display: inline-flex; min-width: 38px; min-height: 40px; flex: 0 0 38px; flex-direction: row; align-items: center; justify-content: center; gap: 7px; border: 1px solid #dce7e0; border-radius: 5px; padding: 8px; background: #fff; color: #718f7e; font-size: 13px; box-shadow: none; }
    #view-subject_media .subject-media-card-actions button.open { flex: 1 1 auto; border-color: #f6cbd3; background: #fff0f3; color: #c3334f; font-size: 12px; font-weight: 600; }
    #view-subject_media .is-slides .subject-media-card-actions button.open { border-color: #cce0fb; background: #edf5ff; color: #236dc3; }
    #view-subject_media .subject-media-card-actions button.edit { color: #3785c5; }
    #view-subject_media .subject-media-card-actions button.download { color: #b58a1e; }
    #view-subject_media .subject-media-card-actions button.delete { color: #d46a74; }
    #view-subject_media .subject-media-card-actions button:hover { filter: brightness(.96); }
    #view-subject_media .subject-media-student-card-footer { display: flex; gap: 8px; border-top: 1px solid #e6eeea; padding: 10px 12px; }
    #view-subject_media .subject-media-student-card-footer button { min-width: 0; min-height: 42px; flex: 1 1 auto; gap: 8px; border: 0; border-radius: 5px; padding: 10px 12px; background: #d93650; color: #fff; font-size: 12px; font-weight: 600; }
    #view-subject_media .is-slides .subject-media-student-card-footer button { background: #2474d7; }
    #view-subject_media .subject-media-student-card-footer button.download { min-width: 42px; flex: 0 0 42px; background: #fff0ca; color: #9b7013; }
    #view-subject_media .subject-media-course-band { display: block; margin: 0; border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; padding: 18px 0; background: none; }
    #view-subject_media .subject-media-course-band-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    #view-subject_media .subject-media-course-band-title h3 { color: #395f4b; font-size: 15px; }
    .subject-media-course-band-title > span { color: #8ba191; font-size: 11px; }
    #view-subject_media .subject-media-course-rail { display: flex; overflow-x: auto; gap: 9px; margin-top: 12px; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: #abd6bf #edf6ef; }
    #view-subject_media .subject-media-course-button { min-width: 0; width: 240px; flex: 0 0 240px; grid-template-columns: 38px minmax(0,1fr) auto; gap: 5px 9px; border: 1px solid #d7e5dd; border-radius: 6px; padding: 12px; background: #fff; box-shadow: none; }
    #view-subject_media .subject-media-course-button.active { border-color: #20a87c; background: #e7f8ee; box-shadow: 0 0 0 1px #20a87c; }
    #view-subject_media .subject-media-course-icon { width: 38px; height: 40px; grid-row: 1; border-radius: 6px; background: #e0efff; color: #2979d3; font-size: 17px; }
    #view-subject_media .subject-media-course-button:nth-child(4n+2) .subject-media-course-icon { background: #ffe4e9; color: #dc4962; }
    #view-subject_media .subject-media-course-button:nth-child(4n+3) .subject-media-course-icon { background: #fff0c9; color: #b38317; }
    #view-subject_media .subject-media-course-button:nth-child(4n) .subject-media-course-icon { background: #e1f6e9; color: #24946a; }
    #view-subject_media .subject-media-course-button small { color: #5a9b79; font-size: 10px; font-weight: 500; }
    #view-subject_media .subject-media-course-button strong { color: #355344; font-size: 13px; font-weight: 600; line-height: 1.5; }
    #view-subject_media .subject-media-course-button em { grid-row: 1; border-radius: 4px; padding: 4px 6px; background: #eef4f0; color: #739480; font-size: 9px; }
    #view-subject_media .subject-media-student-subject-header { gap: 12px; margin: 0; border: 0; padding: 18px 0 0; background: none; }
    #view-subject_media .subject-media-student-subject-header > div { min-width: 0; flex: 1 1 auto; }
    #view-subject_media .subject-media-student-subject-header h3 { color: #2f503e; font-size: 19px; line-height: 1.5; overflow-wrap: anywhere; }
    #view-subject_media .subject-media-student-subject-header > strong { flex-shrink: 0; border-radius: 4px; padding: 7px 9px; background: #e2f5e8; color: #389361; font-size: 12px; }
    #view-subject_media :is(.subject-media-empty-state,.subject-media-loading-state) { grid-column: 1 / -1; min-height: 240px; gap: 12px; border: 1px dashed #cedfd3; border-radius: 7px; padding: 28px 20px; background: #fff; box-shadow: none; }
    #view-subject_media :is(.subject-media-empty-state,.subject-media-loading-state) > i { color: #65b7a1; font-size: 34px; }
    #view-subject_media .subject-media-empty-state.is-error > i { color: #dc6678; }
    #view-subject_media :is(.subject-media-empty-state h3,.subject-media-loading-state strong) { color: #466c58; font-size: 16px; font-weight: 600; }
    #view-subject_media .subject-media-empty-state p { max-width: 440px; color: #81978a; font-size: 12px; font-weight: 400; }
    #view-subject_media .subject-media-empty-state button { min-height: 42px; border: 1px solid #c9e2d3; border-radius: 5px; padding: 9px 13px; background: #e9f7ee; color: #3d8b62; font-size: 12px; box-shadow: none; }
    #view-subject_media :is(button,input,select):focus-visible { outline: 2px solid #248ac2; outline-offset: 3px; box-shadow: none; }
    body.klassin-ui .subject-media-form-popup { max-height: calc(100dvh - 24px); border: 1px solid #d6e5dc; border-radius: 8px; padding-bottom: 18px; }
    body.klassin-ui .subject-media-form-popup .swal2-title { color: #315140; font-size: 20px; font-weight: 600; }
    .subject-media-form-popup .swal2-html-container { max-height: calc(100dvh - 195px); margin: 14px 22px 0; padding: 3px; overflow-y: auto; text-align: left; }
    .subject-media-form { gap: 13px; }
    .subject-media-form-type { border: 0; border-radius: 6px; }
    .subject-media-form-type.youtube { background: #ffedf1; }
    .subject-media-form-type.youtube > i { background: #d93650; }
    .subject-media-form-type.slides { background: #eaf3ff; }
    .subject-media-form-type.slides > i { background: #2474d7; }
    .subject-media-form-type small { display: none; }
    .subject-media-form :is(input[type="text"],input[type="url"],select,textarea) { border-color: #ccded4; border-radius: 6px; font-size: 14px; font-weight: 400; }
    .subject-media-form-popup .subject-media-form-confirm { background: #098773 !important; font-weight: 600 !important; }
    .subject-media-form-popup .subject-media-form-cancel { background: #eef4f0 !important; color: #6e8b79 !important; }
    .subject-media-form .subject-media-file-picker { border-color: #86b9ed; border-radius: 6px; background: #eff7ff; }
    .subject-media-form .subject-media-file-picker-icon { background: #2474d7; }
    .subject-media-form .subject-media-publish-option { border-color: #c7e9d5; border-radius: 6px; background: #ecfaf0; }
    body.klassin-ui #subject-media-viewer { height: 100dvh; overflow: hidden; background: #101d19; }
    #subject-media-viewer .subject-media-viewer-toolbar { min-height: 76px; flex-shrink: 0; flex-wrap: wrap; gap: 12px; padding: max(12px,env(safe-area-inset-top)) 20px 12px; border-color: #345345; background: #182d24; }
    #subject-media-viewer .subject-media-viewer-type { color: #7fdec0; font-size: 11px; font-weight: 500; }
    #subject-media-viewer .subject-media-viewer-toolbar h3 { max-width: 100%; color: #f1faf5; font-size: 18px; font-weight: 600; line-height: 1.5; }
    #subject-media-viewer .subject-media-viewer-toolbar p { color: #9fbaaa; font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
    #subject-media-viewer .subject-media-viewer-actions { min-width: 0; gap: 7px; }
    #subject-media-viewer .subject-media-viewer-actions button { min-height: 42px; border-color: #436752; border-radius: 5px; padding: 9px 12px; background: #294737; color: #d7eee0; font-size: 12px; font-weight: 500; }
    #subject-media-viewer .subject-media-viewer-actions button:last-child { min-width: 42px; background: #754148; border-color: #90535c; color: #fff0f1; }
    #subject-media-viewer :is(.subject-media-youtube-view,.subject-media-slides-view) { min-height: 0; overflow-y: auto; padding: 14px 18px max(14px,env(safe-area-inset-bottom)); }
    #subject-media-viewer .subject-media-slide-stage { min-height: 180px; flex: 1 1 300px; border-color: #344c3f; border-radius: 6px; background: #0c1612; }
    #subject-media-viewer .subject-media-slide-stage > img { max-height: calc(100dvh - 240px); object-fit: contain; }
    #subject-media-viewer .subject-media-slide-thumbnails { min-height: 68px; flex: 0 0 auto; padding-top: 9px; }
    #subject-media-viewer .subject-media-slide-thumbnails button { width: 78px; height: 52px; flex-basis: 78px; border-radius: 4px; background: #294235; }
    #subject-media-viewer .subject-media-slide-thumbnails button.active { border-color: #64d6af; }
    #subject-media-viewer .subject-media-viewer-description { border-left-color: #4db48e; background: #213b2c; color: #bfd9c9; font-size: 12px; font-weight: 400; }
    #subject-media-viewer .subject-media-viewer-description:empty { display: none; }
    #subject-media-viewer .subject-media-slide-nav { width: 42px; height: 52px; border-radius: 5px; background: #203a2ddd; font-size: 16px; }
    #subject-media-viewer .subject-media-slide-download { border-radius: 5px; background: #203a2ddd; }
}
@media screen and (min-width: 1024px) { #view-subject_media .subject-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media screen and (min-width: 1360px) { #view-subject_media .subject-media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media screen and (min-width: 1900px) { #view-subject_media .subject-media-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media screen and (max-width: 767px) {
    #view-subject_media .subject-media-header { gap: 10px; padding-bottom: 14px; }
    #view-subject_media .subject-media-title-icon { width: 42px; height: 42px; flex-basis: 42px; font-size: 20px; }
    #view-subject_media .subject-media-title-wrap { gap: 10px; }
    #view-subject_media .subject-media-title-wrap h2 { font-size: 20px; }
    #view-subject_media #subject-media-header-caption { max-width: 200px; font-size: 11px; }
    #view-subject_media .subject-media-refresh-button { padding: 10px; }
    #view-subject_media .subject-media-refresh-button span { display: none; }
    #view-subject_media .subject-media-picker-band { grid-template-columns: minmax(0,1fr); gap: 9px; padding: 14px 0; }
    #view-subject_media .subject-media-picker-band select { font-size: 16px; }
    #view-subject_media .subject-media-action-band { gap: 13px; padding: 16px 0; }
    #view-subject_media .subject-media-selected-subject { flex-basis: 100%; }
    #view-subject_media .subject-media-selected-subject h3 { font-size: 17px; }
    #view-subject_media .subject-media-create-actions { width: 100%; }
    #view-subject_media .subject-media-add-button { gap: 8px; min-height: 50px; padding: 11px; }
    #view-subject_media .subject-media-add-button strong { font-size: 12px; }
    #view-subject_media .subject-media-add-button .subject-media-add-mark { margin-left: auto; font-size: 10px; }
    #view-subject_media .subject-media-summary-row > div { flex-direction: column; justify-content: center; gap: 7px; padding: 3px 5px; text-align: center; }
    #view-subject_media .subject-media-summary-row i { width: 29px; height: 29px; flex-basis: 29px; font-size: 13px; }
    #view-subject_media .subject-media-summary-row strong { font-size: 20px; }
    #view-subject_media .subject-media-summary-row small { font-size: 10px; }
    .subject-media-browser-toolbar { gap: 10px; margin: 18px 0 14px; }
    .subject-media-browser-heading { gap: 10px; }
    .subject-media-type-filters { width: 100%; }
    .subject-media-type-filters button { min-height: 40px; gap: 5px; padding: 8px 6px; font-size: 11px; }
    .subject-media-browser-fields { flex-wrap: wrap; gap: 8px; }
    #view-subject_media .subject-media-search-field { flex-basis: 100%; }
    body.klassin-ui #view-subject_media .subject-media-search-field input { font-size: 16px; }
    #view-subject_media .subject-media-browser-fields > select { min-width: 0; flex: 1 1 0; font-size: 16px; }
    #view-subject_media .subject-media-grid { gap: 14px; }
    #view-subject_media .subject-media-card-body h4 { font-size: 15px; }
    #view-subject_media .subject-media-card-actions button { min-height: 44px; flex-basis: 40px; }
    #view-subject_media .subject-media-card-actions button.open { flex: 1 1 auto; }
    #view-subject_media .subject-media-course-button { width: 220px; flex-basis: 220px; }
    #view-subject_media .subject-media-student-subject-header h3 { font-size: 17px; }
    body.klassin-ui .subject-media-form-popup .swal2-title { font-size: 18px; }
    .subject-media-form-popup .swal2-html-container { margin-inline: 13px; }
    .subject-media-form :is(input[type="text"],input[type="url"],select,textarea) { font-size: 16px; }
    #subject-media-viewer .subject-media-viewer-toolbar { padding-inline: 12px; }
    #subject-media-viewer .subject-media-viewer-toolbar > div:first-child { flex: 1 1 100%; }
    #subject-media-viewer .subject-media-viewer-toolbar h3 { font-size: 15px; }
    #subject-media-viewer .subject-media-viewer-actions { justify-content: flex-end; width: 100%; }
    #subject-media-viewer .subject-media-viewer-actions button { min-width: 42px; padding: 9px; }
    #subject-media-viewer .subject-media-viewer-actions button > span { display: none; }
    #subject-media-viewer :is(.subject-media-youtube-view,.subject-media-slides-view) { padding-inline: 10px; }
    #subject-media-viewer .subject-media-slide-nav.previous { left: 6px; }
    #subject-media-viewer .subject-media-slide-nav.next { right: 6px; }
}
@media screen and (max-height: 500px) { #subject-media-viewer .subject-media-slide-stage { min-height: 140px; } }
@media (prefers-reduced-motion: reduce) {
    #view-subject_media .subject-media-card-preview > img, .subject-media-card-publish > span, .subject-media-card-publish > span::after { transition: none; }
}

/* Staff portraits share the same identity row in the activity list and detail dialog. */
@media screen {
    body.klassin-ui .dashboard-teacher-activity-identity { display: flex; min-width: 0; align-items: center; gap: 12px; }
    body.klassin-ui .dashboard-teacher-activity-photo { display: block; width: 48px; height: 64px; flex: 0 0 48px; border: 1px solid #d7e5dc; border-radius: 6px; background: #e8f2ed; object-fit: cover; }
    body.klassin-ui .dashboard-teacher-activity-person { min-width: 0; flex: 1 1 auto; }
    body.klassin-ui .dashboard-teacher-activity-name { margin: 0; color: #173c38; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
    body.klassin-ui .dashboard-teacher-activity-meta { margin: 4px 0 0; color: #667f76; font-size: 11px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
    body.klassin-ui .dashboard-teacher-activity-detail .dashboard-teacher-activity-name { font-size: 16px; }
    body.klassin-ui .dashboard-teacher-activity-detail .dashboard-teacher-activity-meta { font-size: 12px; }
    #dashboard-teacher-activity-table .dashboard-teacher-activity-identity { min-width: 220px; }
}

/* Show today's attendance beside both cameras on iPad and tablet screens. */
@media screen and (min-width: 768px) and (max-width: 1279px), screen and (min-width: 740px) and (max-width: 1399px) and (any-pointer: coarse) {
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper) { --attendance-tablet-sidebar: clamp(220px,25vw,280px); }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-live-layout, #scan-live-layout) { grid-template-columns: minmax(0,1fr) var(--attendance-tablet-sidebar) !important; align-items: stretch; gap: 16px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-video-wrapper, #scan-video-wrapper) { height: 100% !important; min-height: 430px !important; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper) :is(#assembly-side-panel, #scan-side-panel) { flex-direction: column; padding: 16px 14px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) :is(#assembly-side-panel, #scan-side-panel) { display: flex !important; align-items: stretch; gap: 14px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) .scan-side-checked-list-wrap { display: flex; flex: 1 1 auto; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper):not(.scan-fullscreen-active) .scan-side-checked-list { max-height: 160px; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) { flex-direction: column; }
    body.klassin-ui :is(#assembly-overlay, #scan-overlay) .attendance-camera-mode-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); }
    body.klassin-ui :is(#assembly-header, #scan-header) { flex-direction: row; align-items: center; }
    body.klassin-ui :is(#assembly-header, #scan-header) .assembly-workspace-date { padding-left: 0; }
    body.klassin-ui :is(#assembly-controls, #scan-controls) select { font-size: 16px; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-heading { flex-direction: column; align-items: flex-start; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions { display: flex; flex-wrap: wrap; width: 100%; }
    body.klassin-ui :is(#assembly-history, #scan-history) .assembly-history-actions button { min-height: 44px; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-live-layout, #scan-live-layout) { display: grid; grid-template-columns: minmax(0,1fr) var(--attendance-tablet-sidebar) !important; height: 100%; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-side-panel, #scan-side-panel) { display: flex !important; align-items: stretch; gap: 14px; height: 100%; min-height: 0; padding: max(16px,env(safe-area-inset-top)) 14px max(16px,env(safe-area-inset-bottom)); overflow-y: auto; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-video-wrapper, #scan-video-wrapper) { width: 100% !important; height: 100% !important; min-height: 0 !important; }
    body.klassin-ui :is(#assembly-wrapper, #scan-wrapper).scan-fullscreen-active :is(#assembly-active-topbar, #scan-active-topbar) { left: 0 !important; right: var(--attendance-tablet-sidebar) !important; width: min(680px,calc(100% - var(--attendance-tablet-sidebar) - 32px)) !important; max-width: none !important; margin-inline: auto !important; }
}