/**
 * SIGMA ELMS - Unified Mobile & Tablet Responsive Stylesheet (mobile.css)
 * 
 * Shared across Student, Teacher, Admin portals, and Login page.
 * Centralizes all responsive layouts for screen widths <= 1023px (Tablet) and <= 768px (Mobile).
 * Edit ONLY THIS FILE for mobile & tablet responsive adjustments to keep the codebase clean.
 * 
 * TABLE OF CONTENTS:
 * 1. Global Responsive Core & Layout Wrapper (< 1024px)
 * 2. Mobile Header, Green Top-Bar & Search Overlay (<= 768px)
 * 3. Mobile Sub-Bar (Icon Panel) & Active Highlights (<= 768px)
 * 4. Unified Mobile Panel System & Full-Screen Overlays (<= 768px)
 * 5. Mobile Sidebar Navigation Drawer & Backdrop (<= 1023px)
 * 6. Main Dashboard Layout, Center Column & Full-Width Welcome Panel (<= 768px)
 * 7. Mobile Feeds, Tabs & Cards System (<= 768px)
 * 8. Tablet Adaptations (769px - 1023px)
 * 9. Mobile Login & Authentication Page Enhancements (index.html)
 */

/* Content-sized mobile table pages; keep browser clearance outside the paper. */
@media (max-width: 768px) {
    :is(body, #layout-wrapper, #main-content, #admin-main, #content-sections):has(:is(
        #section-grades:not(.hidden) #admin-grades-gradebook-view:not(.hidden),
        #school-grades-view:not(.hidden) #admin-grades-gradebook-view:not(.hidden),
        #section-classroom-detail:not(.hidden) #detail-section-attendance:not(.hidden),
        #classroom-detail-view.dynamic-section:not(.hidden) #detail-section-attendance:not(.hidden)
    )) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        overflow-y: visible !important;
        background: var(--admin-bg, #f8fafc) !important;
    }

    :is(#section-grades, #school-grades-view):has(#admin-grades-gradebook-view:not(.hidden)),
    :is(#section-grades, #school-grades-view):has(#admin-grades-gradebook-view:not(.hidden)) > div,
    #section-classroom-detail:has(#detail-section-attendance:not(.hidden)),
    #section-classroom-detail:has(#detail-section-attendance:not(.hidden)) .classroom-room-container,
    #section-classroom-detail:has(#detail-section-attendance:not(.hidden)) .classroom-detail-shell,
    #classroom-detail-view.dynamic-section:has(#detail-section-attendance:not(.hidden)) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 0 0 auto !important;
    }

    :is(#section-grades, #school-grades-view):not(.hidden):has(#admin-grades-gradebook-view:not(.hidden)),
    #section-classroom-detail:not(.hidden):has(#detail-section-attendance:not(.hidden)),
    #classroom-detail-view.dynamic-section:not(.hidden):has(#detail-section-attendance:not(.hidden)) {
        margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Shared classroom navigation clears the visible browser viewport and home indicator. */
@media (max-width: 767px) {
    html body .classroom-detail-shell:has(#classes-detail-tabs) #detail-section-room .announcement-composer-trigger-card,
    html body .classroom-detail-shell:has(#classes-detail-tabs) #detail-section-room .classroom-room-main > div:first-child:has(button[onclick*="openClassroomComposer"]) {
        border-top: 1px solid rgba(0, 0, 0, .08) !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        box-shadow: none !important;
    }
    html body .classroom-detail-shell:has(#student-classroom-tabs-wrapper) #room-announcements-feed .sigma-announcement-card {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, .08) !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }
    html body #student-classroom-tabs-wrapper #student-room-dropdown {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: calc(60px + max(env(safe-area-inset-bottom, 0px), 8px) + var(--classroom-viewport-bottom, 0px)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60dvh;
        margin: 0 !important;
        padding: 12px 16px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
        overflow-y: auto;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, .12) !important;
    }
    html body #student-classroom-tabs-wrapper #student-room-dropdown .classroom-settings-item {
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
        text-align: left;
    }
    html body :is(#classes-detail-tabs:has(#tab-btn-gradebook), #student-classroom-tabs-wrapper),
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) {
        bottom: var(--classroom-viewport-bottom, 0px) !important;
        height: calc(60px + max(env(safe-area-inset-bottom, 0px), 8px)) !important;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px) !important;
        box-sizing: border-box !important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) {
        padding-left: 8px !important;
        padding-right: 8px !important;
        border-top: 1px solid #e2e8f0 !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, .06) !important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) > div,
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) nav { gap: 0 !important; }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn, .canonical-back-btn) {
        height: 60px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 2px 4px !important;
        gap: 4px !important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn, .canonical-back-btn) > i {
        width: 20px !important;
        height: 20px !important;
        font-size: 16px !important;
        line-height: 20px !important;
        flex: 0 0 20px !important;
    }
    html body #section-topic-content .canonical-tabs-bar:has([data-canonical-tab="videos"]) :is(.canonical-tab-btn, .canonical-back-btn) > span {
        font-size: 10px !important;
        line-height: 12px !important;
        height: 24px !important;
        font-weight: 500 !important;
        text-align: center !important;
    }
    html body #section-topic-content {
        padding-bottom: calc(80px + max(env(safe-area-inset-bottom, 0px), 8px) + var(--classroom-viewport-bottom, 0px)) !important;
    }
    html body #student-classroom-tabs-wrapper > div { gap: 0 !important; }
    html body #student-classroom-tabs-wrapper > div > div:first-child { flex: 3 1 0 !important; gap: 0 !important; }
    html body #student-classroom-tabs-wrapper > div > div:last-child { flex: 1 1 0 !important; min-width: 0; }
    html body #student-classroom-tabs-wrapper > div > div:last-child > div { width: 100%; }
    html body #student-classroom-tabs-wrapper #student-room-menu-btn { width: 100% !important; }
    html body .classroom-detail-shell:has(:is(#classes-detail-tabs, #student-classroom-tabs-wrapper)) {
        padding-bottom: calc(76px + max(env(safe-area-inset-bottom, 0px), 8px) + var(--classroom-viewport-bottom, 0px)) !important;
    }
    html body :is(#student-room-dropdown, #classroom-settings-menu) {
        bottom: calc(60px + max(env(safe-area-inset-bottom, 0px), 8px) + var(--classroom-viewport-bottom, 0px)) !important;
    }
}

/* Embedded topic toolbars use the desktop 16px gap on mobile too. */
@media (max-width: 767px) {
    html body #section-topic-content :is(.topic-detail-grid, .teacher-topic-page-grid):has(#topic-task-progress-card) #topic-content-main {
        order: 1 !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    html body #section-topic-content #topic-content-main > div:has(:is(#handout-list, #assessment-list, .topic-videos-list-card)) {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
    }
    html body #section-topic-content :is(#topic-right-section, .student-topic-progress-rail, .teacher-topic-progress-rail):has(#topic-task-progress-card) {
        order: 2 !important;
        position: static !important;
        min-height: 0 !important;
        height: auto !important;
        margin-top: 0 !important;
        padding-top: 16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    html body .classroom-detail-shell #room-topics-mount :is(.teacher-topic-toolbar, .student-topic-toolbar) {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 16px !important;
    }
    html body .classroom-detail-shell #room-topics-mount .room-embedded-topics :is(.topic-main-shell, .student-topic-main-shell, .teacher-topic-main-shell) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    html body .classroom-detail-shell:has(> :is(#teacher-classroom-banner-wrapper,#student-classroom-banner-wrapper)) #room-topics-mount :is(.teacher-topic-toolbar,.student-topic-toolbar) {
        padding-top:16px!important;
    }
    html body .classroom-detail-shell #room-topics-mount .teacher-topic-toolbar .manage-curriculum-dropdown-btn {
        height:36px!important;
        min-height:36px!important;
        padding:0 10px!important;
        border-radius:12px!important;
    }
}

/* Gradebooks keep one white surface beyond the final student row. */
@media (max-width: 768px) {
    html body:has(:is(#section-grades, #school-grades-view):not(.hidden) #admin-grades-gradebook-view:not(.hidden)):has(#layout-wrapper):has(#main-content):has(#admin-grades-gradebook-view),
    html body :is(#layout-wrapper, #main-content, #admin-main, #content-sections):has(:is(#section-grades, #school-grades-view):not(.hidden) #admin-grades-gradebook-view:not(.hidden)):has(#admin-grades-gradebook-view) {
        background: #fff !important;
    }
    html body :is(#section-grades, #school-grades-view):not(.hidden):has(#admin-grades-gradebook-view:not(.hidden)) {
        min-height: calc(100dvh - var(--shell-offset, 106px)) !important;
        background: #fff !important;
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   1. GLOBAL RESPONSIVE CORE & LAYOUT WRAPPER (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    :root {
        --mobile-browser-safe-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
        --mobile-page-bottom-space: var(--mobile-browser-safe-bottom);
    }

    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #layout-wrapper,
    body.sidebar-collapsed #layout-wrapper {
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-height: calc(100dvh - var(--shell-offset, 105px)) !important;
    }

    #main-content,
    #content-sections,
    #section-home,
    #section-dashboard,
    #section-attendance,
    #section-classroom-detail,
    #section-topic-content,
    #section-topic-detail,
    #section-curriculum-page,
    #user-profile-view,
    #user-profile-header-panel,
    .topic-page-shell,
    .student-topic-page-shell,
    .teacher-topic-page-shell,
    .topic-page-tabs-header,
    #search-results-view,
    .search-results-layout {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.calendar-page-mode,
    body.calendar-page-mode #layout-wrapper,
    body.calendar-page-mode #main-content,
    body.calendar-page-mode #content-sections,
    #section-attendance:not(.hidden) {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #main-content:has(#section-topic-content:not(.hidden)),
    #main-content:has(#section-topic-detail:not(.hidden)),
    #main-content:has(#user-profile-view:not(.hidden)),
    #main-content:has(.teacher-topic-page-shell),
    #main-content:has(.student-topic-page-shell),
    #main-content:has(.topic-page-shell) {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Mobile-only bottom clearance for all main dashboard & page views (prevents mobile browser bottom toolbar from covering content) */
    #main-content,
    #admin-main,
    #content-sections,
    #section-home,
    #section-dashboard,
    #section-classroom-detail,
    #classroom-detail-view,
    #section-topic-content,
    #section-topic-detail,
    #section-curriculum-page,
    .topic-page-shell,
    .student-topic-page-shell,
    .teacher-topic-page-shell,
    #user-profile-view,
    #user-settings-view,
    .center-feed-scroll,
    .home-center-column,
    .admin-main-content,
    .quiz-creator-shell,
    #paper-canvas {
        padding-bottom: var(--mobile-page-bottom-space) !important;
    }

    #main-content::after,
    #admin-main::after,
    #section-home::after,
    #section-dashboard::after,
    #section-classroom-detail::after,
    #classroom-detail-view::after,
    .topic-page-shell::after,
    .student-topic-page-shell::after,
    .teacher-topic-page-shell::after,
    .quiz-creator-shell::after {
        content: none !important;
        display: none !important;
    }
}

/* ==========================================================================
   2. MOBILE HEADER, GREEN TOP-BAR & SEARCH OVERLAY (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --student-top-nav-height: clamp(17px, 4.2vw, 21px) !important;
        --student-mainbar-height: clamp(40px, 10.5vw, 46px) !important;
        --student-subbar-height: clamp(38px, 9.8vw, 44px) !important;
        --student-header-height: calc(var(--student-mainbar-height) + var(--student-subbar-height)) !important;
        --student-total-top-offset: calc(var(--student-top-nav-height) + var(--student-header-height)) !important;
        --shell-offset: calc(var(--student-top-nav-height) + var(--student-header-height)) !important;
        --teacher-total-top-offset: calc(var(--student-top-nav-height) + var(--student-header-height)) !important;
    }

    /* Global Green Top Bar */
    .portal-top-bar,
    .top-nav {
        position: relative !important;
        z-index: 400 !important;
        height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        min-height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        max-height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        padding: 0 clamp(8px, 2.5vw, 14px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        line-height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        background-color: #15803d !important;
        box-sizing: border-box !important;
    }

    .top-nav #global-sy-display {
        font-size: clamp(7.5px, 2vw, 9px) !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        line-height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        display: inline-block !important;
        white-space: nowrap !important;
        color: #ffffff !important;
    }

    .top-nav .top-nav__lang,
    .top-nav #global-lang-btn,
    .top-nav .pr-4,
    .top-nav > div.pr-4,
    .top-nav > div:nth-child(2),
    .top-nav > div:not(:first-child):not(.top-nav-loading-bar) {
        display: flex !important;
        align-items: center !important;
        gap: 3.5px !important;
        padding-right: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }

    .top-nav .top-nav__lang span,
    .top-nav #global-lang-btn span,
    .top-nav .pr-4 span,
    .top-nav > div.pr-4 span,
    .top-nav > div:nth-child(2) span,
    .top-nav > div:not(:first-child):not(.top-nav-loading-bar) span,
    .top-nav span:not(#global-sy-display) {
        font-size: clamp(7.5px, 2vw, 9px) !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        line-height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        color: #ffffff !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }

    .top-nav .top-nav__lang i,
    .top-nav #global-lang-btn i,
    .top-nav .pr-4 i,
    .top-nav > div.pr-4 i,
    .top-nav > div:nth-child(2) i,
    .top-nav > div:not(:first-child):not(.top-nav-loading-bar) i,
    .top-nav i.fa-globe,
    .top-nav i {
        font-size: clamp(7.5px, 2vw, 9px) !important;
        line-height: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        color: rgba(255, 255, 255, 0.85) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Main Navigation Row */
    .admin-topbar__inner {
        height: clamp(40px, 10.5vw, 46px) !important;
        min-height: clamp(40px, 10.5vw, 46px) !important;
        max-height: clamp(40px, 10.5vw, 46px) !important;
        padding: 0 12px !important;
    }

    .admin-topbar__brand-copy {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 110px) !important;
        overflow: hidden !important;
        margin-left: clamp(6px, 1.8vw, 10px) !important;
    }

    .has-breadcrumb,
    #nav-context-text.has-breadcrumb,
    #header-brand-title.has-breadcrumb,
    .admin-topbar__brand-label.has-breadcrumb {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        max-width: calc(100vw - 110px) !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: clip !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .has-breadcrumb .breadcrumb-line-group,
    #nav-context-text.has-breadcrumb .breadcrumb-line-group,
    #header-brand-title.has-breadcrumb .breadcrumb-line-group,
    .admin-topbar__brand-label.has-breadcrumb .breadcrumb-line-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .has-breadcrumb .breadcrumb-subject,
    #nav-context-text.has-breadcrumb .breadcrumb-subject,
    #header-brand-title.has-breadcrumb .breadcrumb-subject,
    .admin-topbar__brand-label.has-breadcrumb .breadcrumb-subject {
        font-size: clamp(9px, 2.5vw, 10.5px) !important;
        font-weight: 600 !important;
        color: rgba(0, 0, 0, 0.45) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        line-height: 1.15 !important;
        display: block !important;
    }

    .has-breadcrumb .breadcrumb-topic,
    #nav-context-text.has-breadcrumb .breadcrumb-topic,
    #header-brand-title.has-breadcrumb .breadcrumb-topic,
    .admin-topbar__brand-label.has-breadcrumb .breadcrumb-topic {
        font-size: clamp(12px, 3.2vw, 13.5px) !important;
        font-weight: 700 !important;
        color: #000000 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        line-height: 1.2 !important;
        display: block !important;
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
    }

    /* Hide desktop actions row on mobile */
    .admin-topbar__desktop-icons {
        display: none !important;
    }

    /* Mobile Search Dim Backdrop (Dim light everything below the search bar) */
    .mobile-search-backdrop {
        position: fixed !important;
        inset: 0 !important;
        top: var(--mobile-search-bar-bottom, clamp(57px, 15vw, 67px)) !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        z-index: 9998 !important;
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: opacity 0.2s ease !important;
    }

    .mobile-search-backdrop.hidden,
    .mobile-search-backdrop[hidden] {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* When mobile search is active, hide subbar so no icons or white strips poke through */
    body.mobile-search-active .mobile-header-subbar,
    header.mobile-search-active .mobile-header-subbar {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Mobile Search Dropdown: History & Suggestions Panel (Full width, seamless gap) */
    .mobile-search-dropdown {
        position: fixed !important;
        top: var(--mobile-search-bar-bottom, clamp(57px, 15vw, 67px)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - var(--mobile-search-bar-bottom, 60px) - 20px) !important;
        max-height: calc(100dvh - var(--mobile-search-bar-bottom, 60px) - 20px) !important;
        background: #ffffff !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-radius: 0 0 18px 18px !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.08) !important;
        z-index: 9999 !important;
        padding: 8px 0 14px 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .mobile-search-dropdown.hidden,
    .mobile-search-dropdown[hidden] {
        display: none !important;
    }

    /* Mobile Search Overlay */
    .mobile-search-overlay {
        position: absolute !important;
        inset: 0 !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 10px !important;
        gap: 6px !important;
        z-index: 100 !important;
    }

    .mobile-search-overlay.hidden {
        display: none !important;
    }

    .mobile-search-overlay__back {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: #000000 !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
    }

    .mobile-search-overlay__back i {
        font-size: 15px !important;
        color: #000000 !important;
    }

    .mobile-search-overlay__field {
        flex: 1 1 auto !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .mobile-search-overlay__input {
        width: 100% !important;
        height: 36px !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        border-radius: 9999px !important;
        padding: 0 36px 0 14px !important;
        font-size: 13px !important;
        color: #0f172a !important;
        outline: none !important;
        font-family: 'Inter', sans-serif !important;
        box-sizing: border-box !important;
        transition: border-color 0.15s ease !important;
    }

    .mobile-search-overlay__input:focus {
        border-color: #facc15 !important;
        background: #ffffff !important;
    }

    .mobile-search-overlay__submit {
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #0f172a !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .mobile-search-overlay__submit i {
        font-size: 13.5px !important;
        color: #0f172a !important;
    }

    .mobile-search-overlay__close {
        display: none !important;
    }
}

/* ==========================================================================
   3. MOBILE SUB-BAR (ICON PANEL) & ACTIVE HIGHLIGHTS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Row 2: Sub-Bar (Icon Panel) */
    .mobile-header-subbar {
        display: flex !important;
        width: 100% !important;
        height: clamp(38px, 9.8vw, 44px) !important;
        min-height: clamp(38px, 9.8vw, 44px) !important;
        max-height: clamp(38px, 9.8vw, 44px) !important;
        margin-top: 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 0 clamp(4px, 1.5vw, 10px) !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 20 !important;
        overflow: hidden !important;
        transition: margin-top 0.15s cubic-bezier(0.16, 1, 0.3, 1), 
                    height 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                    max-height 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                    min-height 0.15s cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 0.12s ease, 
                    box-shadow 0.12s ease,
                    visibility 0.15s !important;
    }

    /* Scroll Down: Icon panel smoothly slides up behind main bar */
    .subbar-hidden .mobile-header-subbar,
    header.subbar-hidden .mobile-header-subbar,
    body.subbar-hidden .mobile-header-subbar {
        margin-top: calc(-1 * clamp(38px, 9.8vw, 44px)) !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .subbar-hidden .admin-topbar__inner,
    header.subbar-hidden .admin-topbar__inner,
    body.subbar-hidden .admin-topbar__inner {
        border-bottom: 2px solid #15803d !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    .mobile-subbar-btn {
        width: clamp(36px, 9.5vw, 44px) !important;
        height: clamp(32px, 8vw, 36px) !important;
        border-radius: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        color: rgba(0, 0, 0, 0.48) !important;
        cursor: pointer !important;
        padding: 0 !important;
        font-size: clamp(15px, 4vw, 18px) !important;
        position: relative !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Active Yellow Highlight */
    .mobile-subbar-btn.active,
    .mobile-subbar-btn.selected,
    body.mobile-panel-open .mobile-subbar-btn.active,
    body.mobile-panel-open .mobile-subbar-btn.selected {
        color: #FFD000 !important;
    }

    .mobile-subbar-btn.active i,
    .mobile-subbar-btn.selected i,
    .mobile-subbar-btn.active .fa-bell,
    .mobile-subbar-btn.selected .fa-bell,
    .mobile-subbar-btn.active .fa-calendar,
    .mobile-subbar-btn.selected .fa-calendar,
    .mobile-subbar-btn.active .fa-user,
    .mobile-subbar-btn.selected .fa-user {
        color: #FFD000 !important;
    }

    .mobile-subbar-btn.active svg,
    .mobile-subbar-btn.selected svg {
        stroke: #FFD000 !important;
    }

    .mobile-subbar-btn.active svg line,
    .mobile-subbar-btn.selected svg line {
        stroke: #FFD000 !important;
        stroke-width: 2.2 !important;
    }

    .mobile-subbar-btn.active svg polygon,
    .mobile-subbar-btn.selected svg polygon {
        fill: #FFD000 !important;
        stroke: #FFD000 !important;
    }
}

/* ==========================================================================
   4. UNIFIED MOBILE PANEL SYSTEM & FULL-SCREEN OVERLAYS (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Strict Mobile Page Scroll Lock: Main page cannot be scrolled while inside any topbar panel or composer */
    html.mobile-panel-open,
    body.mobile-panel-open,
    html.mobile-account-fullscreen,
    body.mobile-account-fullscreen {
        overflow: hidden !important;
        height: 100% !important;
        max-height: 100% !important;
        overscroll-behavior: none !important;
        touch-action: none !important;
    }

    html.sigma-composer-open,
    body.sigma-composer-open {
        overflow: hidden !important;
        height: 100% !important;
        max-height: 100% !important;
        overscroll-behavior: none !important;
    }

    body.mobile-panel-open #layout-wrapper,
    body.mobile-account-fullscreen #layout-wrapper,
    body.sigma-composer-open #layout-wrapper,
    body.mobile-panel-open #main-content,
    body.mobile-account-fullscreen #main-content,
    body.sigma-composer-open #main-content,
    body.mobile-panel-open #content-sections,
    body.mobile-account-fullscreen #content-sections,
    body.sigma-composer-open #content-sections,
    body.mobile-panel-open .main-dashboard-column,
    body.mobile-account-fullscreen .main-dashboard-column,
    body.sigma-composer-open .main-dashboard-column,
    body.mobile-panel-open #home-view,
    body.mobile-account-fullscreen #home-view,
    body.sigma-composer-open #home-view {
        overflow: hidden !important;
        pointer-events: none !important;
        touch-action: none !important;
        user-select: none !important;
    }

    /* Contain overscroll on panels and composer so momentum does not propagate to main background */
    body.mobile-panel-open #noti-dropdown,
    body.mobile-panel-open #calendar-dropdown,
    body.mobile-panel-open #sigmaAiPanel,
    body.mobile-panel-open #analytics-dropdown,
    body.mobile-panel-open #schedule-dropdown,
    body.mobile-account-fullscreen #profileDropdownMenu,
    #profileDropdownMenu.mobile-account-fullscreen,
    .sigma-composer-backdrop,
    .sigma-composer-modal,
    .sigma-composer-body,
    #schedule-dropdown-cards,
    #analytics-dropdown-cards,
    #noti-dropdown .notif-scroll-area,
    #sigmaAiMessages {
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Full-screen panels below icon subbar */
    body.mobile-panel-open #noti-dropdown:not(.hidden),
    body.mobile-panel-open #calendar-dropdown:not(.hidden),
    body.mobile-panel-open #analytics-dropdown:not(.hidden),
    body.mobile-panel-open #schedule-dropdown:not(.hidden) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        top: calc(clamp(17px, 4.2vw, 21px) + clamp(40px, 10.5vw, 46px)) !important;
        height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 250 !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        animation: none !important;
        transition: none !important;
    }

    body.mobile-panel-open #sigmaAiPanel:not(.hidden) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        top: calc(clamp(17px, 4.2vw, 21px) + clamp(40px, 10.5vw, 46px)) !important;
        height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 250 !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        animation: none !important;
        transition: none !important;
    }

    /* Mobile Schedule & Analytics Drawer Panels: Seamless closed gaps, single divider, fullwidth */
    body.mobile-panel-open #schedule-dropdown:not(.hidden),
    body.mobile-panel-open #analytics-dropdown:not(.hidden),
    #schedule-dropdown,
    #analytics-dropdown {
        background-color: #ffffff !important;
    }

    #schedule-dropdown-cards,
    #analytics-dropdown-cards,
    #noti-dropdown .notif-scroll-area,
    #calendar-dropdown .calendar-content,
    #calendar-dropdown #mobile-calendar-container,
    #calendar-dropdown > div.overflow-y-auto,
    .mobile-pull-up-content,
    #mobile-sigma-sheet .mobile-sigma-cards {
        padding: 0 !important;
        padding-bottom: var(--mobile-page-bottom-space) !important;
        scroll-padding-bottom: var(--mobile-page-bottom-space) !important;
        margin-bottom: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
    }

    #schedule-dropdown-cards::after,
    #analytics-dropdown-cards::after,
    #noti-dropdown .notif-scroll-area::after,
    #calendar-dropdown .calendar-content::after,
    #calendar-dropdown #mobile-calendar-container::after,
    .mobile-pull-up-content::after,
    #mobile-sigma-sheet .mobile-sigma-cards::after {
        content: none !important;
        display: none !important;
    }

    #schedule-dropdown-cards > div:last-child,
    #schedule-dropdown-cards .home-dashboard-card:last-child,
    #analytics-dropdown-cards > div:last-child,
    #analytics-dropdown-cards .pocket-card:last-child,
    #analytics-dropdown-cards .sigma-card:last-child {
        border-bottom: none !important;
        margin-bottom: 0 !important;
    }

    #schedule-dropdown-cards > :not([hidden]) ~ :not([hidden]),
    #analytics-dropdown-cards > :not([hidden]) ~ :not([hidden]),
    #schedule-dropdown-cards .home-dashboard-group > :not([hidden]) ~ :not([hidden]),
    #analytics-dropdown-cards .home-dashboard-group > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
    }

    /* Distinct Noticeable Sharp Edge Shadow Between Adjacent Closed-Gap Schedule & Tasks Panels */
    #mobile-schedule-class-slot,
    #mobile-schedule-tasks-slot,
    #schedule-dropdown-cards > .home-dashboard-group,
    #schedule-dropdown-cards > .home-dashboard-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        position: relative !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    #mobile-schedule-class-slot {
        z-index: 2 !important;
    }

    #mobile-schedule-tasks-slot {
        z-index: 1 !important;
    }

    #mobile-schedule-class-slot .home-dashboard-card,
    #mobile-schedule-tasks-slot .home-dashboard-card,
    #schedule-dropdown-cards .home-dashboard-group .home-dashboard-card {
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    #schedule-dropdown-cards .right-panel-card,
    #schedule-dropdown-cards .home-overview-card,
    #schedule-dropdown-cards .home-dashboard-list,
    #schedule-dropdown-cards .home-dashboard-card,
    .home-dashboard-card,
    .right-panel-card,
    .home-overview-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        transform: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        padding-left: clamp(16px, 4.5vw, 22px) !important;
        padding-right: clamp(16px, 4.5vw, 22px) !important;
    }

    /* Edge-to-edge full width for SIGMA Analytics cards in mobile panel */
    #analytics-dropdown-cards .pocket-card,
    #analytics-dropdown-cards .sigma-card,
    #analytics-dropdown-cards [data-id^="metric-"],
    #analytics-dropdown-cards [data-id^="sigma-"],
    #analytics-dropdown-cards .pocket-overview-card,
    #analytics-dropdown-cards .home-dashboard-card,
    #analytics-dropdown-cards .home-overview-card,
    #analytics-dropdown-cards > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    #analytics-dropdown-cards .pocket-card-body,
    #analytics-dropdown-cards .sigma-card-body {
        padding: 0.875rem clamp(16px, 4.5vw, 22px) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #analytics-dropdown-cards .pocket-card > div:first-child,
    #analytics-dropdown-cards .sigma-card > div:first-child,
    #analytics-dropdown-cards .bg-\[\#15803d\] {
        width: 100% !important;
        padding-left: clamp(16px, 4.5vw, 22px) !important;
        padding-right: clamp(16px, 4.5vw, 22px) !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    #schedule-dropdown-cards .home-dashboard-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    #schedule-dropdown-cards .home-dashboard-more-btn,
    #analytics-dropdown-cards .pocket-rail-more-btn,
    #analytics-dropdown-cards .sigma-rail-more-btn {
        width: calc(100% - clamp(32px, 9vw, 44px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    #schedule-dropdown-cards .home-dashboard-card:hover,
    #schedule-dropdown-cards .right-panel-card:hover,
    #analytics-dropdown-cards .pocket-card:hover,
    .home-dashboard-card:hover,
    .right-panel-card:hover {
        box-shadow: none !important;
        transform: none !important;
    }

    /* Mobile Account Panel: Ungrouped from subbar, goes directly up to the green bar */
    body.mobile-account-fullscreen #profileDropdownMenu:not(.hidden),
    #profileDropdownMenu.mobile-account-fullscreen:not(.hidden) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        top: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        height: calc(100vh - var(--student-top-nav-height, clamp(17px, 4.2vw, 21px))) !important;
        height: calc(100dvh - var(--student-top-nav-height, clamp(17px, 4.2vw, 21px))) !important;
        bottom: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        z-index: 10000 !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        animation: none !important;
        transition: none !important;
    }

    @keyframes mobilePanelSlideIn {
        from {
            opacity: 0;
            transform: translateY(3px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Unified Mobile Panel Header System */
    body.mobile-panel-open .mobile-panel-header,
    body.mobile-panel-open #noti-dropdown .notif-header,
    body.mobile-panel-open #calendar-dropdown .calendar-header,
    body.mobile-panel-open #analytics-dropdown .notif-header,
    body.mobile-panel-open #schedule-dropdown .notif-header,
    body.mobile-panel-open #profileDropdownMenu .mobile-profile-header,
    body.mobile-account-fullscreen .mobile-panel-header,
    body.mobile-account-fullscreen .mobile-profile-header,
    body.mobile-account-fullscreen #profileDropdownMenu .mobile-profile-header,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-panel-header,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-profile-header,
    body.mobile-panel-open #sigmaAiPanel .sigma-ai-header,
    body.mobile-panel-open #sigmaAiPanel > div:first-child {
        height: clamp(48px, 12vw, 54px) !important;
        min-height: clamp(48px, 12vw, 54px) !important;
        max-height: clamp(48px, 12vw, 54px) !important;
        padding: 0 clamp(12px, 3.5vw, 18px) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }

    body.mobile-panel-open .mobile-panel-header-left,
    body.mobile-account-fullscreen .mobile-panel-header-left,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-panel-header-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: clamp(6px, 1.8vw, 10px) !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Back Button: sleek "<" chevron right beside the header title */
    body.mobile-panel-open .mobile-panel-header-back-btn,
    body.mobile-account-fullscreen .mobile-panel-header-back-btn,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-panel-header-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: clamp(28px, 7.5vw, 34px) !important;
        height: clamp(28px, 7.5vw, 34px) !important;
        min-width: clamp(28px, 7.5vw, 34px) !important;
        border-radius: 9999px !important;
        background: transparent !important;
        border: none !important;
        color: #0f172a !important;
        font-size: clamp(13px, 3.5vw, 15px) !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
        transition: background-color 0.15s ease !important;
        flex-shrink: 0 !important;
    }

    body.mobile-panel-open .mobile-panel-header-back-btn:active,
    body.mobile-account-fullscreen .mobile-panel-header-back-btn:active,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-panel-header-back-btn:active {
        background-color: rgba(0, 0, 0, 0.08) !important;
    }

    /* Unified Header Title Typography */
    body.mobile-panel-open .mobile-panel-title,
    body.mobile-account-fullscreen .mobile-panel-title,
    body.mobile-panel-open #noti-dropdown .notif-header__title,
    body.mobile-panel-open #calendar-dropdown .calendar-header__title,
    body.mobile-panel-open #analytics-dropdown .notif-header__title,
    body.mobile-panel-open #schedule-dropdown .notif-header__title,
    body.mobile-account-fullscreen #profileDropdownMenu .mobile-profile-header h3,
    body.mobile-account-fullscreen #profileDropdownMenu .mobile-panel-title,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-profile-header h3,
    #profileDropdownMenu.mobile-account-fullscreen .mobile-panel-title,
    body.mobile-panel-open #sigmaAiPanel .mobile-panel-title,
    body.mobile-panel-open #sigmaAiPanel .sigma-ai-title {
        display: inline-block !important;
        font-size: clamp(15px, 4vw, 17px) !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        letter-spacing: -0.015em !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        text-transform: none !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    }

    body.mobile-panel-open #profileDropdownMenu,
    body.mobile-account-fullscreen #profileDropdownMenu,
    #profileDropdownMenu.mobile-account-fullscreen {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mobile-panel-open #profileDropdownMenu::after,
    body.mobile-account-fullscreen #profileDropdownMenu::after,
    #profileDropdownMenu.mobile-account-fullscreen::after {
        display: none !important;
    }

    /* Mobile SIGMA AI panel composer bottom safe area */
    body.mobile-panel-open #sigmaAiPanel > div:last-child {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 16px)) !important;
    }

    body.mobile-panel-open #sigmaAiMessages {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.mobile-panel-open #profileDropdownMenu .profile-panel-hero,
    body.mobile-account-fullscreen #profileDropdownMenu .profile-panel-hero,
    #profileDropdownMenu.mobile-account-fullscreen .profile-panel-hero {
        padding: 24px 20px 20px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   5. MOBILE SIDEBAR NAVIGATION DRAWER & BACKDROP (<= 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
    #sidebar,
    body.sidebar-collapsed #sidebar {
        top: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        height: calc(100vh - var(--student-top-nav-height, clamp(17px, 4.2vw, 21px))) !important;
        height: calc(100dvh - var(--student-top-nav-height, clamp(17px, 4.2vw, 21px))) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        width: var(--sidebar-expanded-width, 260px) !important;
        z-index: 10000 !important;
        position: fixed !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
    }

    #sidebar.sidebar-visible,
    body.sidebar-open #sidebar {
        transform: translateX(0) !important;
    }

    #sidebar-overlay {
        top: var(--student-top-nav-height, clamp(17px, 4.2vw, 21px)) !important;
        z-index: 9999 !important;
    }
}

/* ==========================================================================
   6. MAIN DASHBOARD LAYOUT & FULL-WIDTH WELCOME PANEL (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Hide Side Rails on Mobile */
    .home-sticky-rail,
    .home-sticky-rail--left,
    .home-sticky-rail--right,
    #section-home .home-sticky-rail,
    #section-home .home-sticky-rail--left,
    #section-home .home-sticky-rail--right,
    #section-dashboard .home-sticky-rail,
    #dashboard-view .home-sticky-rail,
    .dashboard-grid > div:first-child:not(.main-dashboard-column),
    .dashboard-grid > div:last-child:not(.main-dashboard-column),
    #sigma-panels-container {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Single column dashboard grid with 0 top-padding to close subbar gap */
    .dashboard-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 12px 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #section-home .workstation-container,
    #section-home .grid,
    #section-home .dashboard-grid,
    #section-dashboard .workstation-container,
    #section-dashboard .grid,
    #section-dashboard .dashboard-grid {
        gap: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .main-dashboard-column {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Welcome Panel Container & Banner (White full-width container, rounded & padded banner) */
    .welcome-panel-container {
        display: block !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 12px 14px 10px 14px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .main-dashboard-column .welcome-panel,
    .welcome-panel-container .welcome-panel,
    .welcome-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        border: 1px solid #e2e8f0 !important;
        overflow: hidden !important;
        box-shadow: var(--sigma-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
        height: clamp(145px, 36vw, 175px) !important;
        min-height: clamp(145px, 36vw, 175px) !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .welcome-panel h4,
    .welcome-panel .welcome-subtitle {
        font-size: clamp(0.95rem, 3.2vw, 1.2rem) !important;
        margin-bottom: clamp(0.2rem, 1vw, 0.35rem) !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .welcome-panel h2,
    .welcome-panel .welcome-title {
        font-size: clamp(1.2rem, 4.5vw, 1.75rem) !important;
        line-height: 1.18 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ==========================================================================
   7. MOBILE FEEDS, TABS & CARDS SYSTEM (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Feed containers - reset spacing */
    #student-announcements-feed,
    #admin-announcements-feed,
    .room-announcements-feed {
        margin: 0 !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        padding-bottom: 0 !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    #student-announcements-feed.space-y-3.5 > :not([hidden]) ~ :not([hidden]),
    #admin-announcements-feed.space-y-3.5 > :not([hidden]) ~ :not([hidden]),
    .space-y-3.5 > :not([hidden]) ~ :not([hidden]),
    #section-home .main-dashboard-column > :not([hidden]) ~ :not([hidden]),
    #section-dashboard .main-dashboard-column > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Mobile Canvas Background for Classroom Room Page */
    #main-content:has(#section-classroom-detail:not(.hidden)),
    #admin-main:has(#classroom-detail-view:not(.hidden)),
    body:has(#section-classroom-detail:not(.hidden)),
    body:has(#classroom-detail-view:not(.hidden)) {
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    #section-classroom-detail {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    .classroom-room-container {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    #classroom-detail-content,
    #class-detail-content,
    #classroom-detail-view,
    .classroom-detail-content,
    .classroom-tab-section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        background-color: #ffffff !important;
        background: #ffffff !important;
    }

    .classroom-room-hero-banner,
    .classroom-room-hero-banner.rounded-\[24px\],
    .classroom-room-hero-banner[class*="rounded"] {
        width: calc(100% - 2 * clamp(12px, 3.5vw, 16px)) !important;
        max-width: calc(100% - 2 * clamp(12px, 3.5vw, 16px)) !important;
        margin: clamp(10px, 2.5vw, 14px) auto clamp(10px, 2.5vw, 14px) auto !important;
        border-radius: clamp(16px, 4vw, 20px) !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        mask-image: radial-gradient(white, black) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04) !important;
        overflow: hidden !important;
    }

    .classroom-room-hero-banner img.classroom-room-banner-bg {
        border-radius: clamp(16px, 4vw, 20px) !important;
    }

    /* Mobile Typography, Sizing, Alignment & Spacing */
    .classroom-room-hero-banner__content {
        padding: 1.15rem 1.15rem 1rem 1.15rem !important;
        min-height: 84px !important;
        box-sizing: border-box !important;
    }

    .classroom-room-hero-row {
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .classroom-room-hero-title,
    .classroom-room-hero-banner h1 {
        font-size: clamp(1.2rem, 4.8vw, 1.45rem) !important;
        font-weight: 800 !important;
        line-height: 1.22 !important;
        letter-spacing: -0.02em !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .classroom-room-hero-aside {
        flex-shrink: 0 !important;
        align-self: flex-start !important;
        margin-top: 2px !important;
    }

    .classroom-banner-info-btn {
        min-height: 26px !important;
        height: 26px !important;
        padding: 0 0.75rem !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        white-space: nowrap !important;
    }

    .classroom-banner-watermark {
        opacity: 0.15 !important;
        right: -60px !important;
        bottom: -60px !important;
        width: 240px !important;
        height: 220px !important;
        pointer-events: none !important;
    }

    /* Mobile Inline Info Drawer Alignment & Spacing */
    .classroom-inline-info-drawer {
        padding: 0.55rem 1rem 0.65rem 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
        background: rgba(0, 0, 0, 0.45) !important;
        box-sizing: border-box !important;
    }

    .classroom-room-meta-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 1.25rem !important;
        row-gap: 0.35rem !important;
        width: 100% !important;
    }

    .classroom-room-meta-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }

    .classroom-room-meta-item i {
        font-size: 12px !important;
        width: 16px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    .classroom-room-meta-item span,
    .classroom-room-meta-text {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        letter-spacing: 0.01em !important;
        color: #ffffff !important;
    }

    .classroom-detail-tabs,
    .classroom-room-tabs,
    .student-room-tabs {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 0.75rem !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    html body #student-classroom-tabs-wrapper > div {width:100%!important;gap:0!important}
    html body #student-classroom-tabs-wrapper > div > .overflow-x-auto {display:flex!important;flex:1 1 0!important;min-width:0!important;gap:0!important;justify-content:space-evenly!important}
    html body #student-classroom-tabs-wrapper .student-room-tab {flex:1 1 0!important;min-width:0!important;width:auto!important;padding-left:4px!important;padding-right:4px!important;text-align:center!important}
    html body #student-classroom-tabs-wrapper:has(:is(#tab-btn-attendance,#tab-btn-topics).active) > div > .overflow-x-auto {display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;flex:1 1 100%!important;gap:0!important}
    html body #student-classroom-tabs-wrapper:has(:is(#tab-btn-attendance,#tab-btn-topics).active) > div > div:last-child {display:none!important}
    html body #student-classroom-tabs-wrapper:has(:is(#tab-btn-attendance,#tab-btn-topics).active) .student-room-tab {width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;justify-self:stretch;justify-content:center!important}
    html body #student-classroom-tabs-wrapper:has(:is(#tab-btn-attendance,#tab-btn-topics).active) > div > .overflow-x-auto > :not(.student-room-tab) {display:none!important}

    .classroom-detail-tabs > div,
    .classroom-room-tabs > div,
    .student-room-tabs > div {
        gap: 0.25rem !important;
    }

    .classroom-detail-tabs .flex.overflow-x-auto,
    .student-room-tabs .flex.overflow-x-auto,
    .classroom-room-tabs .flex.overflow-x-auto {
        gap: 0.15rem !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .classroom-detail-tabs .flex.overflow-x-auto::-webkit-scrollbar,
    .student-room-tabs .flex.overflow-x-auto::-webkit-scrollbar,
    .classroom-room-tabs .flex.overflow-x-auto::-webkit-scrollbar {
        display: none !important;
    }

    .student-room-tab,
    .teacher-section-tab {
        padding: 0 clamp(8px, 2.2vw, 14px) !important;
        gap: 0.35rem !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        border-bottom: none !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }

    .student-room-tab i,
    .teacher-section-tab i {
        font-size: 11.5px !important;
    }

    .student-room-tab span,
    .teacher-section-tab span {
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
    }

    .student-room-tab--active,
    .student-room-tab.active,
    .teacher-section-tab.active {
        color: #15803d !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    .student-room-tab--active span,
    .student-room-tab.active span,
    .teacher-section-tab.active span {
        font-weight: 600 !important;
        color: #15803d !important;
    }

    .student-room-tab--active i,
    .student-room-tab.active i,
    .teacher-section-tab.active i {
        color: #15803d !important;
    }

    .student-room-tab.active::after,
    .student-room-tab--active::after,
    .teacher-section-tab.active::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 6px !important;
        right: 6px !important;
        height: 2.5px !important;
        background-color: #15803d !important;
        border-radius: 2px 2px 0 0 !important;
    }

    .classroom-quick-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Hide legacy direct members button if any from selection bar */
    .classroom-detail-tabs .room-members-btn,
    .classroom-quick-btn.room-members-btn,
    #tab-btn-members,
    .room-members-btn {
        display: none !important;
    }

    /* Solid black text and icons for mobile room dropdown */
    .classroom-settings-menu {
        min-width: 210px !important;
        max-width: calc(100vw - 32px) !important;
        right: 0 !important;
        border-radius: 16px !important;
    }

    .classroom-settings-menu button,
    .classroom-settings-menu button i,
    .classroom-settings-menu button span,
    #classroom-mobile-dropdown button,
    #classroom-mobile-dropdown button i,
    #classroom-mobile-dropdown button span {
        color: #000000 !important;
    }

    .classroom-detail-content,
    #class-detail-content,
    #admin-class-detail-content,
    #classroom-detail-content,
    .classroom-tab-section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .classroom-room-sidebar,
    .student-room-sidebar {
        display: none !important;
    }

    /* Topic Selection Tabs Panel (Closed gap to icon panel, refined font size) */
    .topic-page-tabs-header,
    #topic-content-header,
    #topic-main-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        background: #ffffff !important;
    }

    .topic-page-tabs-header::-webkit-scrollbar,
    #topic-content-header::-webkit-scrollbar,
    #topic-main-header::-webkit-scrollbar {
        display: none !important;
    }

    .topic-page-tabs-header .canonical-tabs-bar,
    #topic-content-header .canonical-tabs-bar,
    #topic-main-header .canonical-tabs-bar,
    .topic-page-tabs-header > div,
    #topic-content-header > div,
    #topic-main-header > div {
        height: 48px !important;
        min-height: 48px !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-top: none !important;
        box-sizing: border-box !important;
    }

    .topic-page-tabs-header nav,
    #topic-content-header nav,
    #topic-main-header nav {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        min-width: max-content !important;
        gap: 0.5rem !important;
        padding: 0 !important;
        height: 100% !important;
    }

    .topic-page-tabs-header nav button,
    #topic-content-header nav button,
    #topic-main-header nav button,
    .topic-page-tabs-header nav button,
    #topic-content-header nav button,
    #topic-main-header nav button,
    .canonical-tab-btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 0 0.75rem !important;
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        line-height: 1.25rem !important;
        box-sizing: border-box !important;
        border: none !important;
        border-bottom: 3.5px solid transparent !important;
        transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease !important;
    }

    .canonical-tab-btn::after,
    .canonical-tabs-bar button::after,
    .topic-page-tabs-header nav button::after,
    #topic-content-header nav button::after,
    #topic-main-header nav button::after {
        display: none !important;
        content: none !important;
    }

    .canonical-tab-btn.active,
    .topic-page-tabs-header nav button.active,
    #topic-content-header nav button.active,
    #topic-main-header nav button.active {
        color: #15803d !important;
        border-bottom: 3.5px solid #15803d !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .canonical-tab-btn span,
    .topic-page-tabs-header nav button span,
    #topic-content-header nav button span,
    #topic-main-header nav button span {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .canonical-tab-btn i,
    .topic-page-tabs-header nav button i,
    #topic-content-header nav button i,
    #topic-main-header nav button i {
        font-size: 11.5px !important;
    }

    .canonical-back-btn,
    .topic-page-tabs-header button:has(i.fa-chevron-left),
    #topic-content-header button:has(i.fa-chevron-left) {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
        padding: 0 !important;
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }

    .canonical-back-btn span,
    .topic-page-tabs-header button:has(i.fa-chevron-left) span,
    #topic-content-header button:has(i.fa-chevron-left) span {
        display: none !important;
    }

    .canonical-back-btn i,
    .topic-page-tabs-header button:has(i.fa-chevron-left) i,
    #topic-content-header button:has(i.fa-chevron-left) i {
        font-size: 11px !important;
        margin: 0 !important;
    }

    .topic-detail-grid,
    .teacher-topic-page-grid,
    .topic-detail-grid.no-rail,
    .teacher-topic-page-grid.no-rail {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .topic-detail-grid #topic-content-main,
    .teacher-topic-page-grid #topic-content-main,
    .topic-detail-grid .student-topic-main-shell,
    .teacher-topic-page-grid .teacher-topic-main-shell {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .topic-detail-grid .student-topic-progress-rail,
    .topic-detail-grid #topic-right-section,
    .student-topic-page-shell #topic-right-section,
    .student-topic-progress-rail {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 16px 16px 28px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .teacher-topic-page-shell #topic-right-section,
    .teacher-topic-page-grid #topic-right-section,
    .teacher-topic-page-grid .teacher-topic-progress-rail {
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .topic-detail-grid .student-topic-progress-rail .topic-switch-panel,
    .topic-detail-grid .teacher-topic-progress-rail .topic-switch-panel,
    .teacher-topic-page-grid .teacher-topic-progress-rail .topic-switch-panel,
    .teacher-topic-page-grid #topic-right-section .topic-switch-panel,
    .topic-detail-grid #topic-right-section .topic-switch-panel,
    .topic-switch-panel {
        display: none !important;
    }

    /* Mobile Tasks Panel: Hidden completely on mobile (not in desktop mode) */
    .topic-tasks-panel,
    .teacher-topic-progress-rail .topic-tasks-panel,
    .student-topic-progress-rail .topic-tasks-panel,
    #topic-right-section .topic-tasks-panel,
    .teacher-topic-page-grid:has(.topic-video-player-view) .teacher-topic-progress-rail,
    .teacher-topic-page-grid:has(.topic-video-player-view) #topic-right-section,
    .topic-detail-grid:has(.topic-video-player-view) .student-topic-progress-rail,
    .topic-detail-grid:has(.topic-video-player-view) #topic-right-section,
    .topic-video-player-view ~ #topic-right-section,
    .topic-video-player-view ~ .teacher-topic-progress-rail,
    .topic-video-player-view ~ .student-topic-progress-rail,
    #topic-right-section:has(.topic-tasks-panel),
    .teacher-topic-progress-rail:has(.topic-tasks-panel),
    .student-topic-progress-rail:has(.topic-tasks-panel) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Inside Material Page: Hide selection panel header completely */
    .teacher-topic-page-shell:has(.topic-video-player-view) .topic-page-tabs-header,
    .student-topic-page-shell:has(.topic-video-player-view) .topic-page-tabs-header,
    .topic-page-shell:has(.topic-video-player-view) .topic-page-tabs-header,
    .teacher-topic-page-shell:has(.topic-detail-card) .topic-page-tabs-header,
    .student-topic-page-shell:has(.topic-detail-card) .topic-page-tabs-header,
    .topic-page-shell:has(.topic-detail-card) .topic-page-tabs-header,
    .teacher-topic-page-shell:has(.assessment-detail-container) .topic-page-tabs-header,
    .student-topic-page-shell:has(.assessment-detail-container) .topic-page-tabs-header {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Videos Tab Display Mode (1st Image): White panel sticks to selection panel (0 gap), video player edge-to-edge inside */
    .topic-page-tabs-header + .topic-detail-grid,
    .topic-page-tabs-header + .teacher-topic-page-grid,
    .topic-detail-grid,
    .teacher-topic-page-grid {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #section-topic-content .topic-videos-list-container,
    #topic-content-main .topic-videos-list-container,
    .topic-videos-list-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        background: #ffffff !important;
    }

    #section-topic-content .topic-videos-list-card,
    #topic-content-main .topic-videos-list-card,
    .topic-videos-list-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .topic-videos-list-card .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        row-gap: 0 !important;
        column-gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Each video player white panel: sticks flush to header/previous card with closed gap (0 gap) */
    #section-topic-content .topic-videos-list-card .video-selection-card,
    #topic-content-main .topic-videos-list-card .video-selection-card,
    #section-topic-content .video-selection-card,
    #topic-content-main .video-selection-card,
    .topic-videos-list-card .video-selection-card,
    .video-selection-card {
        width: 100% !important;
        max-width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-top: 14px !important; /* Only white panel sticks; video inside has top padding */
        padding-bottom: 20px !important;
        padding-left: 0 !important;   /* No padding left & right inside the white panel */
        padding-right: 0 !important;  /* No padding left & right inside the white panel */
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
    }

    .topic-videos-list-card .video-selection-card:first-child,
    .video-selection-card:first-child {
        margin-top: 0 !important;
        border-top: none !important;
    }

    #section-topic-content .topic-videos-list-card .video-selection-card .video-thumbnail-panel,
    #topic-content-main .topic-videos-list-card .video-selection-card .video-thumbnail-panel,
    #section-topic-content .topic-videos-list-card .video-thumbnail-panel,
    #topic-content-main .topic-videos-list-card .video-thumbnail-panel,
    .topic-videos-list-card .video-selection-card .video-thumbnail-panel,
    .topic-videos-list-card .video-thumbnail-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 0 12px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
    }

    .topic-videos-list-card .video-selection-card .video-card-text-container,
    .video-selection-card .video-card-text-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    .topic-videos-list-card .video-selection-card h4,
    .topic-videos-list-card .video-selection-card p,
    .video-selection-card .video-card-text-container h4,
    .video-selection-card .video-card-text-container p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .topic-videos-list-card .video-selection-card h4,
    .video-selection-card .video-card-text-container h4 {
        margin-bottom: 4px !important;
    }

    /* Student page: Task Progress panel is positioned BELOW the videos/content list */
    .student-topic-page-shell .topic-detail-grid:has(.topic-videos-list-container) #topic-right-section,
    .student-topic-page-shell .topic-detail-grid:has(.topic-videos-list-container) .student-topic-progress-rail,
    .student-topic-page-shell .topic-videos-list-container ~ #topic-right-section,
    .student-topic-page-shell .topic-videos-list-container ~ .student-topic-progress-rail,
    .topic-detail-grid #topic-right-section,
    .topic-detail-grid .student-topic-progress-rail {
        order: 2 !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 16px 16px 28px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Material Panels to Task Progress Rail Gap (Matches Topic Panel Gap) */
    .student-topic-page-shell #topic-content-main > .animate-in,
    .student-topic-page-shell #topic-content-main > div,
    .student-topic-page-shell #topic-content-main .pb-12,
    .topic-detail-grid #topic-content-main > .animate-in,
    .topic-detail-grid #topic-content-main > div,
    .topic-detail-grid #topic-content-main .pb-12 {
        padding-bottom: 0 !important;
    }

    #assessment-list,
    #handout-list {
        padding-bottom: 0 !important;
    }

    #assessment-list > :last-child,
    #assessment-list > :last-child .assessment-card-panel,
    #assessment-list > :last-child .sigma-black-fade-panel,
    .student-assessment-list-item:last-child,
    .student-assessment-list-item:last-child .assessment-card-panel,
    .teacher-assessment-list-item:last-child,
    .teacher-assessment-list-item:last-child .assessment-card-panel,
    #handout-list > :last-child,
    #handout-list > :last-child.sigma-black-fade-panel {
        margin-bottom: 0 !important;
    }

    .student-topic-page-shell .topic-detail-grid #topic-right-section,
    .student-topic-page-shell .student-topic-progress-rail,
    .topic-detail-grid #topic-right-section,
    .topic-detail-grid .student-topic-progress-rail {
        padding: 16px 16px 28px 16px !important;
    }

    /* Teacher topic page: hide empty / unneeded desktop rails */
    .teacher-topic-page-grid:has(.topic-videos-list-container) .teacher-topic-progress-rail,
    .teacher-topic-page-grid:has(.topic-videos-list-container) #topic-right-section,
    .topic-videos-list-container ~ .teacher-topic-progress-rail {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Video Player View: White panel closed gap to top header, no radius, full width edge-to-edge on mobile */
    .topic-video-player-view {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .topic-video-player-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Video Player Element: Fitted edge-to-edge full width with synchronized 16/9 aspect ratio */
    .video-cinema-player,
    .topic-video-player-panel .video-thumbnail-panel {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 !important;
    }

    .topic-video-player-panel > div:last-child {
        padding: 12px 14px 16px 14px !important;
    }

    .topic-video-player-more-videos {
        margin: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 16px 14px 24px 14px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .topic-video-player-more-videos .video-selection-card {
        border-radius: 14px !important;
        border: 1px solid #e2e8f0 !important;
        background: #f8fafc !important;
        padding: 10px 12px 14px 12px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }

    #section-topic-content .topic-video-player-more-videos .video-thumbnail-panel,
    #topic-content-main .topic-video-player-more-videos .video-thumbnail-panel,
    #section-topic-content .topic-video-player-more-videos .video-selection-card .video-thumbnail-panel,
    #topic-content-main .topic-video-player-more-videos .video-selection-card .video-thumbnail-panel,
    .topic-video-player-more-videos .video-selection-card .video-thumbnail-panel,
    .topic-video-player-more-videos .video-thumbnail-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
        transform: translateZ(0) !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 0 10px 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-sizing: border-box !important;
    }

    #section-topic-content .topic-video-player-more-videos .video-thumbnail-panel img,
    #topic-content-main .topic-video-player-more-videos .video-thumbnail-panel img,
    .topic-video-player-more-videos .video-thumbnail-panel img,
    .topic-video-player-more-videos .video-thumbnail-panel div {
        border-radius: 12px !important;
    }

    .topic-video-player-more-videos .video-selection-card h4 {
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin-bottom: 4px !important;
    }

    .topic-video-player-more-videos .video-selection-card p {
        padding: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* ─── Mobile Assessment Material Detail View: Full Width Edge-to-Edge Main Card & Closed Gap to Icon Panels ─── */
    .student-topic-page-shell:has(.assessment-material-detail-view),
    .teacher-topic-page-shell:has(.assessment-material-detail-view),
    .topic-page-shell:has(.assessment-material-detail-view),
    #main-content:has(.assessment-material-detail-view) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .topic-detail-grid:has(.assessment-material-detail-view),
    .teacher-topic-page-grid:has(.assessment-material-detail-view),
    .teacher-topic-page-grid.has-topic-rail-score-follow,
    .teacher-topic-page-grid.is-detail-view {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 0 !important;
    }

    #topic-content-main:has(.assessment-material-detail-view),
    .topic-detail-grid:has(.assessment-material-detail-view) #topic-content-main,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) #topic-content-main,
    .teacher-topic-page-grid.has-topic-rail-score-follow #topic-content-main,
    .teacher-topic-page-grid.is-detail-view #topic-content-main {
        display: contents !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .assessment-material-detail-view,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) .assessment-material-detail-view,
    .teacher-topic-page-grid.has-topic-rail-score-follow .assessment-material-detail-view {
        display: contents !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
    }

    /* 1. Main Assessment Panel: Full width, no radius, positioned FIRST (on top) */
    .assessment-material-main-card,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) .assessment-material-main-card,
    .teacher-topic-page-shell:has(.assessment-material-detail-view) .assessment-material-main-card,
    .topic-detail-grid:has(.assessment-material-detail-view) .assessment-material-main-card {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 16px 14px 20px 14px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    /* 2. Panels below main panel: Padded and not full width, retain radius */
    .assessment-material-detail-view > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
    }

    .assessment-material-details-grid,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) .assessment-material-details-grid,
    .teacher-topic-page-shell:has(.assessment-material-detail-view) .assessment-material-details-grid,
    .topic-detail-grid:has(.assessment-material-detail-view) .assessment-material-details-grid {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 14px 24px 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* 2b. SIGMA AI Assistance Panel on Mobile: Full Width, No Radius, Order 4 (Directly below Grading and Submission Details Panel) */
    #teacher-ai-assistance-panel,
    #student-ai-assistance-panel,
    .sigma-ai-assistance-panel,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) #teacher-ai-assistance-panel,
    .teacher-topic-page-shell:has(.assessment-material-detail-view) #teacher-ai-assistance-panel,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) .sigma-ai-assistance-panel,
    .teacher-topic-page-shell:has(.assessment-material-detail-view) .sigma-ai-assistance-panel {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 18px 14px 28px 14px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    /* 2c. Mobile Submission View: Score Panel at the BOTTOM of the screen, follows the screen, full width, collapsible & expandable */
    .teacher-topic-page-grid:has(.assessment-material-detail-view) #topic-right-section,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) .teacher-topic-progress-rail,
    .teacher-topic-page-shell:has(.assessment-material-detail-view) #topic-right-section,
    .teacher-topic-page-shell:has(.assessment-material-detail-view) .teacher-topic-progress-rail,
    .teacher-topic-page-grid #topic-right-section.topic-rail-score-follow,
    .teacher-topic-page-grid .teacher-topic-progress-rail.topic-rail-score-follow,
    .teacher-topic-page-grid.has-topic-rail-score-follow #topic-right-section,
    .teacher-topic-page-grid.has-topic-rail-score-follow .teacher-topic-progress-rail,
    .teacher-topic-page-shell.has-topic-rail-score-follow #topic-right-section,
    .teacher-topic-page-shell.has-topic-rail-score-follow .teacher-topic-progress-rail,
    .teacher-topic-page-grid.is-detail-view #topic-right-section.topic-rail-score-follow,
    .teacher-topic-page-grid.is-detail-view .teacher-topic-progress-rail.topic-rail-score-follow,
    #topic-right-section.topic-rail-score-follow,
    #topic-right-section:has(.topic-score-sticky) {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 85 !important;
        pointer-events: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        transform: translateZ(0) !important;
    }

    #topic-right-section.topic-rail-score-follow > .space-y-6,
    #topic-right-section:has(.topic-score-sticky) > .space-y-6,
    .teacher-topic-page-grid:has(.assessment-material-detail-view) #topic-right-section > .space-y-6 {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        height: auto !important;
        pointer-events: none !important;
    }

    /* Score Panel Card inside the fixed bottom rail */
    .teacher-topic-page-grid:has(.assessment-material-detail-view) #topic-right-section [id$="-class-panel-card"],
    .teacher-topic-page-shell:has(.assessment-material-detail-view) #topic-right-section [id$="-class-panel-card"],
    #topic-right-section.topic-rail-score-follow [id$="-class-panel-card"],
    #topic-right-section.topic-rail-score-follow [id$="-class-panel-card"],
    #topic-right-section.topic-rail-score-follow .topic-score-sticky,
    #topic-right-section:has(.topic-score-sticky) .topic-score-sticky,
    .topic-score-sticky {
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border-top: 1.5px solid #cbd5e1 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18), 0 -2px 6px rgba(0, 0, 0, 0.08) !important;
        transition: max-height 0.32s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease !important;
        overflow: hidden !important;
    }

    /* Collapsed State: retain the student switcher for quick grading navigation. */
    #topic-right-section [id$="-class-panel-card"].is-collapsed,
    #topic-right-section.topic-rail-score-follow [id$="-class-panel-card"].is-collapsed,
    #topic-right-section:has(.topic-score-sticky) .topic-score-sticky.is-collapsed,
    .topic-score-sticky.is-collapsed {
        height: auto !important;
        max-height: none !important;
        padding: 5px 12px calc(6px + env(safe-area-inset-bottom, 0px)) 12px !important;
        border-radius: 0 !important;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12), 0 -1px 3px rgba(0, 0, 0, 0.06) !important;
        overflow: visible !important;
    }

    .topic-score-sticky.is-collapsed .desktop-grading-collapsible-controls {
        display: none !important;
    }

    /* Expanded State: Full grading sheet */
    #topic-right-section [id$="-class-panel-card"].is-expanded,
    #topic-right-section.topic-rail-score-follow [id$="-class-panel-card"].is-expanded,
    #topic-right-section:has(.topic-score-sticky) .topic-score-sticky.is-expanded,
    .topic-score-sticky.is-expanded {
        max-height: min(85dvh, 520px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 5px 12px calc(14px + env(safe-area-inset-bottom, 0px)) 12px !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18), 0 -2px 6px rgba(0, 0, 0, 0.08) !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .mobile-score-sheet-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        width: 100% !important;
    }

    .desktop-grading-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding-bottom: 3px !important;
        cursor: default !important;
    }

    .desktop-grading-toggle-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #15803d !important;
        cursor: pointer !important;
    }

    .desktop-grading-toggle-btn i,
    #desktop-grading-panel-chevron {
        color: #15803d !important;
        font-size: 11px !important;
    }

    .mobile-score-sheet-handle-pill,
    .mobile-score-sheet-toggle {
        display: none !important;
    }

    #topic-right-section [id$="-class-panel-card"].is-expanded .desktop-grading-collapsible-section,
    #topic-right-section.topic-rail-score-follow [id$="-class-panel-card"].is-expanded .desktop-grading-collapsible-section,
    #topic-right-section:has(.topic-score-sticky) .topic-score-sticky.is-expanded .desktop-grading-collapsible-section,
    .topic-score-sticky.is-expanded .desktop-grading-collapsible-section,
    #topic-right-section [id$="-class-panel-card"].is-expanded .desktop-grading-collapsible-controls,
    #topic-right-section.topic-rail-score-follow [id$="-class-panel-card"].is-expanded .desktop-grading-collapsible-controls,
    #topic-right-section:has(.topic-score-sticky) .topic-score-sticky.is-expanded .desktop-grading-collapsible-controls,
    .topic-score-sticky.is-expanded .desktop-grading-collapsible-controls {
        display: flex !important;
    }

    /* Hide right rail tasks panel when fixed score panel is active */
    #topic-right-section.topic-rail-score-follow .topic-tasks-panel,
    #topic-right-section:has(.topic-score-sticky) .topic-tasks-panel {
        display: none !important;
    }

    .mobile-score-sheet-backdrop {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* Reserve toolbar clearance once, on the material grid rather than its shell. */
    .teacher-topic-page-shell:has(.assessment-material-detail-view),
    .teacher-topic-page-shell.has-topic-rail-score-follow,
    .teacher-topic-page-shell:has(#topic-right-section.topic-rail-score-follow) {
        padding-bottom: 0 !important;
    }

    body #section-topic-content .teacher-topic-page-grid:has(.assessment-material-detail-view),
    body #section-topic-detail .topic-detail-grid:has(.assessment-material-detail-view),
    body .teacher-topic-page-grid.has-topic-rail-score-follow,
    body .teacher-topic-page-grid:has(#topic-right-section.topic-rail-score-follow) {
        padding-bottom: calc(var(--material-mobile-dock-height, 0px) + var(--mobile-browser-safe-bottom)) !important;
        scroll-padding-bottom: calc(var(--material-mobile-dock-height, 0px) + var(--mobile-browser-safe-bottom));
    }

    body #section-topic-content .teacher-topic-page-grid #topic-right-section.topic-rail-score-follow,
    body #section-topic-content .teacher-topic-page-grid:has(.assessment-material-detail-view) #topic-right-section {
        bottom: var(--material-mobile-viewport-bottom, 0px) !important;
    }

    .assessment-mobile-score-panel-slot {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Keep the teacher score sheet attached to the viewport instead of the
       desktop-sized topic rail. These selectors deliberately outrank the
       shared rail rules that cap a rail at 300px. */
    #section-topic-content .teacher-topic-page-grid #topic-right-section.topic-rail-score-follow,
    #section-topic-content .teacher-topic-page-grid:has(.topic-score-sticky) #topic-right-section,
    #section-topic-content .teacher-topic-page-shell:has(.topic-score-sticky) #topic-right-section {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        z-index: 300 !important;
    }

    #section-topic-content #topic-right-section.topic-rail-score-follow > .space-y-6,
    #section-topic-content #topic-right-section:has(.topic-score-sticky) > .space-y-6 {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #section-topic-content #topic-right-section.topic-rail-score-follow .topic-score-sticky,
    #section-topic-content #topic-right-section:has(.topic-score-sticky) .topic-score-sticky {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #section-topic-content #topic-right-section .topic-score-sticky.is-collapsed {
        height: auto !important;
        max-height: none !important;
        padding: 5px 12px calc(6px + env(safe-area-inset-bottom, 0px)) 12px !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    #section-topic-content #topic-right-section .topic-score-sticky.is-expanded {
        max-height: min(85dvh, 520px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 5px 12px calc(14px + env(safe-area-inset-bottom, 0px)) 12px !important;
        overscroll-behavior: contain;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .assessment-mobile-score-panel-slot .topic-progress-card,
    .assessment-mobile-score-panel-slot .assessment-score-panel-card,
    .assessment-material-details-grid .topic-progress-card,
    .assessment-material-details-grid .assessment-score-panel-card,
    .assessment-material-details-grid .assessment-grading-details-card,
    .assessment-material-details-grid .assessment-submission-details-card,
    .assessment-grading-details-card,
    .assessment-submission-details-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px !important;
        padding: 16px 16px !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    .topic-score-sticky,
    .topic-progress-card.topic-score-sticky,
    [id$="-class-panel-card"].topic-score-sticky,
    #topic-right-section .topic-progress-card.topic-score-sticky {
        border-radius: 0 !important;
    }

    /* On mobile, student score panel is displayed in main column; hide student right rail to prevent duplication */
    .topic-detail-grid:has(.assessment-material-detail-view) #topic-right-section,
    .student-topic-page-shell:has(.assessment-material-detail-view) #topic-right-section {
        display: none !important;
    }

    /* 3. Scaled-down Typography, Badges, Icons, and Buttons (Aligned with Lesson Scale) */
    .assessment-material-main-card h2 {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: -0.01em !important;
        color: #000000 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        word-break: break-word !important;
    }

    .assessment-material-main-card button[title*="Back"],
    .assessment-material-main-card button[aria-label*="Back"],
    .assessment-material-detail-view .material-detail-back-btn,
    .material-detail-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin-left: -4px !important;
        margin-top: 1px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
        color: #000000 !important;
        cursor: pointer !important;
    }

    .material-detail-back-btn i.fa-chevron-left,
    .material-detail-back-btn i[class*="fa-chevron"] {
        display: inline-block !important;
        font-size: 13.5px !important;
        color: #000000 !important;
    }

    .material-detail-back-btn i.fa-arrow-left,
    .material-detail-back-btn i[class*="fa-arrow"] {
        display: none !important;
    }

    .assessment-material-main-card span.capitalize,
    .assessment-material-main-card span[class*="badge"] {
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 1.5px 6.5px !important;
        border-radius: 5px !important;
    }

    .assessment-material-main-card span.capitalize i,
    .assessment-material-main-card span[class*="badge"] i {
        font-size: 9px !important;
    }

    .assessment-material-main-card h3,
    .assessment-material-main-card .material-detail-section-title,
    .material-detail-section-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        text-align: left !important;
        color: #000000 !important;
    }

    .assessment-material-main-card p.text-sm,
    .assessment-material-main-card p.text-xs,
    .assessment-material-main-card .sigma-collapsible-desc-text {
        font-size: 12px !important;
        line-height: 1.5 !important;
        color: #334155 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Scale down Attached Document & Rubric panels in main card on mobile */
    .assessment-material-main-card .sigma-black-fade-panel,
    .assessment-material-main-card .material-detail-attached-file {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    .assessment-material-main-card .sigma-file-panel-title,
    .assessment-material-main-card .sigma-black-fade-panel .sigma-file-panel-title,
    .assessment-material-main-card .sigma-black-fade-panel h4.sigma-file-panel-title,
    #topic-content-main .sigma-file-panel-title,
    #topic-content-main .sigma-black-fade-panel .sigma-file-panel-title,
    #topic-content-main .sigma-black-fade-panel h4.sigma-file-panel-title,
    .sigma-black-fade-panel .sigma-file-panel-title,
    .sigma-file-panel-title {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }

    .assessment-material-main-card .sigma-file-panel-meta,
    .sigma-black-fade-panel .sigma-file-panel-meta,
    .sigma-file-panel-meta {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .assessment-material-main-card .sigma-black-fade-panel .w-16,
    .assessment-material-main-card .sigma-black-fade-panel .sm\:w-20 {
        width: 38px !important;
        min-width: 38px !important;
    }

    .assessment-material-main-card .sigma-black-fade-panel .w-12.h-12 {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 9px !important;
    }

    .assessment-material-main-card .sigma-black-fade-panel .w-12.h-12 i {
        font-size: 14px !important;
    }

    .assessment-material-main-card .sigma-black-fade-panel span.text-\[10px\] {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }

    /* Scale down Score Panel on mobile */
    .assessment-mobile-score-panel-slot .topic-progress-title {
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }

    .assessment-mobile-score-panel-slot .topic-progress-title i {
        font-size: 11px !important;
    }

    .assessment-mobile-score-panel-slot .text-4xl,
    .assessment-mobile-score-panel-slot .text-3xl {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .assessment-mobile-score-panel-slot span.text-xs {
        font-size: 11px !important;
    }

    /* Scale down Grading & Submission Details on mobile */
    .assessment-grading-details-card p,
    .assessment-submission-details-card p {
        font-size: 11.5px !important;
    }

    .assessment-grading-details-card .space-y-1\.5 > div,
    .assessment-submission-details-card .space-y-1\.5 > div {
        font-size: 11.5px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .assessment-grading-details-card i,
    .assessment-submission-details-card i {
        font-size: 11.5px !important;
    }

    /* Scale down buttons on mobile */
    .assessment-submission-details-card .sigma-btn,
    .assessment-submission-details-card button {
        font-size: 11.5px !important;
        padding: 7px 12px !important;
        border-radius: 10px !important;
    }

    .assessment-submission-details-card .sigma-btn i,
    .assessment-submission-details-card button i {
        font-size: 11px !important;
    }

    /* Scale down Submit Answer / primary action buttons in coursework detail view (Mobile) */
    .assessment-primary-action-slot {
        margin-top: 14px !important;
    }

    .assessment-primary-action-slot .assessment-relocated-primary-action,
    .assessment-primary-action-slot #student-assessment-submit-btn,
    .assessment-primary-action-slot button,
    .assessment-material-main-card #student-assessment-submit-btn,
    .assessment-material-main-card #student-submit-answer-btn,
    .assessment-material-main-card .assessment-primary-action-slot .sigma-btn {
        width: 100% !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 14px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .assessment-primary-action-slot .assessment-relocated-primary-action i,
    .assessment-primary-action-slot #student-assessment-submit-btn i,
    .assessment-primary-action-slot button i,
    .assessment-material-main-card #student-assessment-submit-btn i,
    .assessment-material-main-card #student-submit-answer-btn i,
    .assessment-material-main-card .assessment-primary-action-slot .sigma-btn i {
        font-size: 11px !important;
    }

    /* Cut / remove empty spaces at the bottom in mobile */
    .teacher-topic-page-shell,
    .student-topic-page-shell,
    .topic-page-shell,
    #section-topic-content,
    #section-topic-detail,
    .teacher-topic-page-grid,
    .topic-detail-grid,
    #topic-content-main {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Mobile Full-Width Manage Topics & Materials Panel */
    .room-embedded-topics .teacher-topic-page-grid,
    .room-embedded-topics .topic-detail-grid,
    .room-embedded-topics > .room-topics-body,
    .teacher-topic-page-grid,
    .topic-detail-grid {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
    }

    .room-embedded-topics .teacher-topic-progress-rail,
    .teacher-topic-page-grid .teacher-topic-progress-rail,
    #section-topic-content .teacher-topic-progress-rail,
    .teacher-topic-progress-rail {
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* Note: In assessment detail & submission views, score rail is fixed at the bottom as a collapsible sheet */

    .room-embedded-topics .student-topic-progress-rail {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 4px 16px 24px 16px !important;
        box-sizing: border-box !important;
    }

    .room-embedded-topics .teacher-topic-progress-rail .topic-progress-card,
    .teacher-topic-page-grid .teacher-topic-progress-rail .topic-progress-card,
    #section-topic-content .teacher-topic-progress-rail .topic-progress-card,
    .room-embedded-topics [id$="-class-panel-card"],
    .teacher-topic-page-grid [id$="-class-panel-card"],
    #section-topic-content [id$="-class-panel-card"],
    #topic-detail-class-panel-card,
    #topic-content-class-panel-card,
    #assessments-class-panel-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
        padding: 9px 14px 10px 14px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        gap: 4px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    #topic-task-progress-card,
    .student-topic-progress-rail #topic-task-progress-card,
    .student-topic-progress-rail .topic-progress-card,
    #topic-right-section #topic-task-progress-card,
    .topic-detail-grid #topic-task-progress-card,
    .teacher-topic-page-grid .student-topic-progress-rail .topic-progress-card,
    .room-embedded-topics .student-topic-progress-rail .topic-progress-card,
    .room-embedded-topics #topic-task-progress-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 20px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
        padding: 14px 16px !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 6px !important;
    }

    .room-embedded-topics .topic-progress-vertical-bar {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 68px !important;
        min-height: 68px !important;
        border-radius: 9999px !important;
    }

    .room-embedded-topics .topic-progress-card .topic-section-selector-title,
    .teacher-topic-progress-rail .topic-progress-card .topic-section-selector-title,
    [id$="-class-panel-card"] .topic-section-selector-title,
    #topic-detail-class-panel-card .topic-section-selector-title,
    #topic-content-class-panel-card .topic-section-selector-title,
    #assessments-class-panel-card .topic-section-selector-title {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
        color: #15803d !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        margin: 0 0 1px 0 !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .room-embedded-topics .topic-progress-card .topic-section-selector-title span,
    .teacher-topic-progress-rail .topic-progress-card .topic-section-selector-title span,
    [id$="-class-panel-card"] .topic-section-selector-title span {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
        color: #15803d !important;
        line-height: 1.25 !important;
    }

    .room-embedded-topics .topic-progress-card .topic-section-selector-title i,
    .teacher-topic-progress-rail .topic-progress-card .topic-section-selector-title i,
    [id$="-class-panel-card"] .topic-section-selector-title i {
        font-size: 11px !important;
        color: #15803d !important;
        width: 14px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    .room-embedded-topics .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):not(.teacher-save-grade-btn):not(#teacher-grading-score-edit),
    .teacher-topic-progress-rail .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):not(.teacher-save-grade-btn):not(#teacher-grading-score-edit),
    [id$="-class-panel-card"] button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):not(.teacher-save-grade-btn):not(#teacher-grading-score-edit),
    #topic-detail-class-panel-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):not(.teacher-save-grade-btn):not(#teacher-grading-score-edit),
    #topic-content-class-panel-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):not(.teacher-save-grade-btn):not(#teacher-grading-score-edit),
    #assessments-class-panel-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):not(.teacher-save-grade-btn):not(#teacher-grading-score-edit) {
        width: 100% !important;
        height: auto !important;
        min-height: 32px !important;
        padding: 5px 8px !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #0f172a !important;
        border: none !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        background: transparent !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .room-embedded-topics .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):hover,
    .teacher-topic-progress-rail .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):hover,
    [id$="-class-panel-card"] button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):not(.teacher-view-gradebook-btn):hover {
        background: #f1f5f9 !important;
        border-color: transparent !important;
    }

    .room-embedded-topics .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):active,
    .teacher-topic-progress-rail .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):active,
    [id$="-class-panel-card"] button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn):active {
        background: #e2e8f0 !important;
    }

    .room-embedded-topics .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn) span.truncate,
    .room-embedded-topics .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn) span:last-child,
    .teacher-topic-progress-rail .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn) span.truncate,
    .teacher-topic-progress-rail .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn) span:last-child,
    [id$="-class-panel-card"] button:not(.sigma-btn):not(.grading-nav-btn) span.truncate,
    [id$="-class-panel-card"] button:not(.sigma-btn):not(.grading-nav-btn) span:last-child {
        font-size: 11.5px !important;
        font-weight: 500 !important;
        color: #0f172a !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
    }

    .room-embedded-topics .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn) i,
    .teacher-topic-progress-rail .topic-progress-card button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn) i,
    [id$="-class-panel-card"] button:not(.sigma-btn):not(.grading-nav-btn):not(.desktop-grading-toggle-btn):not(.mobile-grade-minimize-btn):not(.mobile-grade-maximize-btn) i {
        font-size: 11.5px !important;
        color: #15803d !important;
        width: 14px !important;
        text-align: center !important;
        flex-shrink: 0 !important;
    }

    /* ─── Mobile Grading Panel Controls Overrides ─── */
    [id$="-class-panel-card"] .desktop-grading-toggle-btn,
    .topic-score-sticky .desktop-grading-toggle-btn {
        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 !important;
        margin-left: auto !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: #15803d !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
    }

    [id$="-class-panel-card"] .desktop-grading-toggle-btn i,
    .topic-score-sticky .desktop-grading-toggle-btn i,
    #desktop-grading-panel-chevron {
        color: #15803d !important;
        font-size: 11px !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Compact Student Card on Mobile */
    [id$="-class-panel-card"] .grading-student-card,
    .topic-score-sticky .grading-student-card,
    .grading-student-card {
        padding: 4px 6px !important;
        gap: 3px !important;
        border-radius: 8px !important;
    }

    /* Centered Student Picker Button */
    [id$="-class-panel-card"] .grading-student-picker-btn,
    .topic-score-sticky .grading-student-picker-btn {
        width: 100% !important;
        min-height: 28px !important;
        padding: 3px 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        gap: 6px !important;
    }

    [id$="-class-panel-card"] .grading-student-picker-btn .grading-student-identity-wrap,
    .topic-score-sticky .grading-student-picker-btn .grading-student-identity-wrap {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        gap: 6px !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    [id$="-class-panel-card"] .grading-student-picker-btn .grading-student-avatar-wrap,
    .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    [id$="-class-panel-card"] .grading-student-picker-btn .grading-student-avatar-wrap .sigma-user-avatar,
    .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap .sigma-user-avatar,
    [id$="-class-panel-card"] .grading-student-picker-btn .grading-student-avatar-wrap img,
    .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap img,
    [id$="-class-panel-card"] .grading-student-picker-btn .grading-student-avatar-wrap span,
    .topic-score-sticky .grading-student-picker-btn .grading-student-avatar-wrap span {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        font-size: 9.5px !important;
        margin: 0 !important;
    }

    [id$="-class-panel-card"] .grading-student-picker-btn span.grading-student-name,
    .topic-score-sticky .grading-student-picker-btn span.grading-student-name {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        text-align: left !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline-block !important;
    }

    /* Prev & Next Navigation: Aligned, Non-overlapping, Scaled down */
    .grading-nav-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 1px 2px !important;
    }

    #topic-content-class-panel-card .grading-nav-btn,
    #topic-detail-class-panel-card .grading-nav-btn,
    #assessments-class-panel-card .grading-nav-btn,
    [id$="-class-panel-card"] .grading-nav-btn,
    .topic-score-sticky .grading-nav-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 1px 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 6px !important;
        color: #000000 !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
        box-shadow: none !important;
    }

    #topic-content-class-panel-card .grading-nav-btn span,
    #topic-detail-class-panel-card .grading-nav-btn span,
    #assessments-class-panel-card .grading-nav-btn span,
    [id$="-class-panel-card"] .grading-nav-btn span,
    .topic-score-sticky .grading-nav-btn span {
        flex: 0 0 auto !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    #topic-content-class-panel-card .grading-nav-btn i,
    #topic-detail-class-panel-card .grading-nav-btn i,
    #assessments-class-panel-card .grading-nav-btn i,
    [id$="-class-panel-card"] .grading-nav-btn i,
    .topic-score-sticky .grading-nav-btn i {
        flex-shrink: 0 !important;
        width: auto !important;
        font-size: 9px !important;
        color: #000000 !important;
        margin: 0 !important;
        line-height: 1 !important;
    }

    [id$="-class-panel-card"] .grading-nav-btn:hover,
    .topic-score-sticky .grading-nav-btn:hover {
        background: #f1f5f9 !important;
    }

    [id$="-class-panel-card"] .grading-nav-btn:active,
    .topic-score-sticky .grading-nav-btn:active {
        background: #e2e8f0 !important;
    }

    .grading-nav-counter {
        flex: 0 0 auto !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    /* Collapsible Section Header (Section Name & Label) */
    .desktop-grading-collapsible-section {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0 !important;
    }

    [id$="-class-panel-card"] .desktop-grading-collapsible-section i,
    .topic-score-sticky .desktop-grading-collapsible-section i {
        font-size: 11px !important;
        color: #15803d !important;
        flex-shrink: 0 !important;
    }

    [id$="-class-panel-card"] .desktop-grading-collapsible-section .desktop-grading-section-label,
    .topic-score-sticky .desktop-grading-collapsible-section .desktop-grading-section-label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #15803d !important;
        line-height: 1.2 !important;
        flex-shrink: 0 !important;
    }

    [id$="-class-panel-card"] .desktop-grading-collapsible-section .desktop-grading-section-name,
    .topic-score-sticky .desktop-grading-collapsible-section .desktop-grading-section-name {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Score Editor Button Override */
    [id$="-class-panel-card"] #teacher-grading-score-edit,
    .topic-score-sticky #teacher-grading-score-edit {
        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    [id$="-class-panel-card"] #teacher-grading-score-edit i,
    .topic-score-sticky #teacher-grading-score-edit i {
        width: auto !important;
        font-size: 10px !important;
        color: #000000 !important;
    }

    /* Save Grade Button */
    [id$="-class-panel-card"] .teacher-save-grade-btn,
    .topic-score-sticky .teacher-save-grade-btn {
        width: 100% !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        margin-top: 3px !important;
        margin-bottom: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [id$="-class-panel-card"] .teacher-save-grade-btn span,
    .topic-score-sticky .teacher-save-grade-btn span {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    [id$="-class-panel-card"] button.teacher-save-grade-btn:not(:disabled),
    .topic-score-sticky button.teacher-save-grade-btn:not(:disabled) {
        background: #15803d !important;
        background-color: #15803d !important;
        color: #ffffff !important;
        border: 1px solid #15803d !important;
        opacity: 1 !important;
    }

    [id$="-class-panel-card"] button.teacher-save-grade-btn:not(:disabled) span,
    .topic-score-sticky button.teacher-save-grade-btn:not(:disabled) span {
        color: #ffffff !important;
    }

    [id$="-class-panel-card"] button.teacher-save-grade-btn:disabled,
    .topic-score-sticky button.teacher-save-grade-btn:disabled {
        background: #f1f5f9 !important;
        background-color: #f1f5f9 !important;
        color: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid #e2e8f0 !important;
        opacity: 1 !important;
    }

    /* Mobile status control mirrors desktop and keeps its options inside the sheet. */
    #teacher-grading-status-dropdown-wrapper {
        position: relative !important;
        width: 112px !important;
        z-index: 100 !important;
    }

    #teacher-grading-status-trigger-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        background-color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 4px !important;
        transition: background-color 0.15s ease, border-color 0.15s ease !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
        appearance: none !important;
    }

    #teacher-grading-status-trigger-btn:focus,
    #teacher-grading-status-trigger-btn:focus-visible,
    #teacher-grading-status-trigger-btn:active {
        outline: none !important;
        box-shadow: none !important;
        border-color: #cbd5e1 !important;
    }

    #teacher-grading-status-trigger-btn:hover {
        background-color: #f1f5f9 !important;
        border-color: #94a3b8 !important;
    }

    #teacher-grading-status-trigger-btn:active {
        background-color: #e2e8f0 !important;
    }

    #teacher-grading-status-trigger-btn span {
        flex: 1 1 auto !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    #teacher-grading-status-trigger-btn i {
        font-size: 8.5px !important;
        color: #64748b !important;
        flex: 0 0 auto !important;
    }

    #teacher-grading-status-menu:not(.hidden) {
        position: absolute !important;
        right: 0 !important;
        top: auto !important;
        bottom: calc(100% + 4px) !important;
        width: 112px !important;
        min-width: 112px !important;
        max-width: 112px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
        padding: 3px !important;
        z-index: 150 !important;
    }

    #teacher-grading-status-menu.hidden {
        display: none !important;
    }

    /* While open, the list is moved to <body> so the grading sheet cannot clip it. */
    #teacher-grading-status-menu.mobile-status-menu-portal:not(.hidden) {
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10050 !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
    }

    #teacher-grading-status-menu button {
        width: 100% !important;
        min-height: 28px !important;
        height: 28px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        border-radius: 5px !important;
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.2 !important;
    }

    #teacher-grading-status-menu button:last-child {
        grid-column: auto !important;
    }

    #teacher-grading-status-menu button:hover {
        background: #f1f5f9 !important;
        color: #000000 !important;
    }

    /* Mobile Full-Screen Students List Panel */
    .topic-student-cover:not(.is-open),
    [id$="-grading-student-list-tray"]:not(.is-open) {
        display: none !important;
    }

    .topic-student-cover.is-open,
    [id$="-grading-student-list-tray"].is-open {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        z-index: 10000 !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-shadow: none !important;
    }

    .topic-student-cover.is-open .topic-student-cover__bar,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__bar {
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 16px !important;
        border-bottom: 1.5px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }

    .topic-student-cover.is-open .topic-student-cover__title,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #15803d !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .topic-student-cover.is-open .topic-student-cover__close,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__close {
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        border: none !important;
        background: transparent !important;
        color: #0f172a !important;
        font-size: 18px !important;
        cursor: pointer !important;
    }

    .topic-student-cover.is-open .topic-student-cover__list,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__list {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        padding: 6px 0 24px 0 !important;
        background: #ffffff !important;
    }

    .topic-student-cover.is-open .topic-student-cover__row,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__row {
        width: 100% !important;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border: none !important;
        background: transparent !important;
        cursor: pointer !important;
        text-align: left !important;
        border-bottom: 1px solid #f1f5f9 !important;
        transition: background-color 0.15s ease !important;
    }

    .topic-student-cover.is-open .topic-student-cover__row:hover,
    .topic-student-cover.is-open .topic-student-cover__row:active,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__row:hover,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__row:active {
        background-color: #f1f5f9 !important;
    }

    .topic-student-cover.is-open .topic-student-cover__row.is-active,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__row.is-active {
        background-color: #dcfce7 !important;
    }

    .topic-student-cover.is-open .topic-student-cover__name,
    [id$="-grading-student-list-tray"].is-open .topic-student-cover__name {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        line-height: 1.35 !important;
    }

    /* Mobile Manage Topics Green Dropdown Button Override */
    .room-embedded-topics .teacher-topic-progress-rail .manage-curriculum-dropdown-container,
    .teacher-topic-page-grid .teacher-topic-progress-rail .manage-curriculum-dropdown-container,
    #section-topic-content .teacher-topic-progress-rail .manage-curriculum-dropdown-container,
    .manage-curriculum-dropdown-container {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        width: auto !important;
        max-width: fit-content !important;
        display: inline-flex !important;
        box-sizing: border-box !important;
    }

    .teacher-topic-toolbar {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 8px 4px 8px 4px !important;
        margin: 0 !important;
    }

    .manage-curriculum-dropdown-btn {
        background-color: #15803d !important;
        color: #ffffff !important;
        height: 29px !important;
        min-height: 29px !important;
        padding: 0 10px !important;
        border-radius: 9px !important;
        display: inline-flex !important;
        width: auto !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: space-between !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
        border: none !important;
        gap: 6px !important;
    }

    .manage-curriculum-dropdown-btn span {
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: -0.01em !important;
        line-height: 1 !important;
    }

    .manage-curriculum-dropdown-btn i {
        color: #ffffff !important;
        font-size: 9.5px !important;
    }

    .manage-curriculum-dropdown-btn .manage-dropdown-icon-spin-box {
        width: 11px !important;
        height: 11px !important;
    }

    .manage-curriculum-dropdown-btn .manage-dropdown-icon-spin-box i {
        font-size: 9px !important;
    }

    .shared-manage-curriculum-menu {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.12) !important;
        z-index: 100 !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 100% !important;
        width: auto !important;
        min-width: 155px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 4px !important;
    }

    .shared-manage-curriculum-menu button {
        background-color: transparent !important;
        color: #0f172a !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        gap: 6px !important;
    }

    .shared-manage-curriculum-menu button div {
        width: 20px !important;
        height: 20px !important;
        border-radius: 6px !important;
    }

    .shared-manage-curriculum-menu button div i {
        font-size: 10px !important;
    }

    .shared-manage-curriculum-menu button span {
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .teacher-topic-page-full {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .teacher-topic-page-full .teacher-topic-main-shell,
    .teacher-topic-page-full .teacher-topic-list {
        width: 100% !important;
        max-width: 100% !important;
    }


    .room-embedded-topics .topic-main-shell,
    .room-embedded-topics .student-topic-main-shell,
    .room-embedded-topics .teacher-topic-main-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .room-embedded-topics .topic-list,
    .room-embedded-topics .student-topic-list,
    .room-embedded-topics .teacher-topic-list {
        padding: 0 !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .topic-card,
    .student-topic-card,
    .teacher-topic-card,
    .room-embedded-topics .topic-card,
    .room-embedded-topics .student-topic-card,
    .room-embedded-topics .teacher-topic-card {
        display: grid !important;
        grid-template-columns: clamp(115px, 28vw, 150px) minmax(0, 1fr) !important;
        align-items: stretch !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 140px !important;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 18px !important;
        border: 1px solid #e5e7eb !important;
        border-left: 6px solid #15803d !important;
        background-color: #ffffff !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .topic-card__image-container,
    .student-topic-card__image-container,
    .teacher-topic-card__image-container,
    .room-embedded-topics .topic-card__image-container,
    .room-embedded-topics .student-topic-card__image-container,
    .room-embedded-topics .teacher-topic-card__image-container {
        float: none !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-right: 1px solid #e5e7eb !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        align-self: stretch !important;
        background-color: #f8fafc !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .topic-card__image,
    .student-topic-card__image,
    .teacher-topic-card__image,
    .room-embedded-topics .topic-card__image,
    .room-embedded-topics .student-topic-card__image,
    .room-embedded-topics .teacher-topic-card__image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        background-color: #f8fafc !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .topic-card__body,
    .student-topic-card__body,
    .teacher-topic-card__body,
    .room-embedded-topics .topic-card__body,
    .room-embedded-topics .student-topic-card__body,
    .room-embedded-topics .teacher-topic-card__body {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 12px 14px 14px 14px !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .topic-card__meta,
    .student-topic-card__meta,
    .teacher-topic-card__meta,
    .room-embedded-topics .topic-card__meta,
    .room-embedded-topics .student-topic-card__meta,
    .room-embedded-topics .teacher-topic-card__meta {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 6px !important;
        margin-bottom: 4px !important;
        width: 100% !important;
    }

    .topic-card__badge,
    .room-embedded-topics .topic-card__badge {
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        padding: 2px 7px !important;
        gap: 4px !important;
        border-radius: 9999px !important;
    }

    .topic-card__badge i,
    .room-embedded-topics .topic-card__badge i {
        font-size: 9px !important;
    }

    .topic-card__schedule,
    .room-embedded-topics .topic-card__schedule {
        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        padding: 2px 7px !important;
        gap: 4px !important;
        border-radius: 9999px !important;
    }

    .topic-card__schedule i,
    .room-embedded-topics .topic-card__schedule i {
        font-size: 9px !important;
    }

    .topic-card__schedule-time,
    .room-embedded-topics .topic-card__schedule-time {
        font-size: 9.5px !important;
    }

    .topic-card__meta > i.ml-auto,
    .topic-card__meta > i:last-child,
    .room-embedded-topics .topic-card__meta > i.ml-auto,
    .room-embedded-topics .topic-card__meta > i:last-child {
        font-size: 14px !important;
    }

    .topic-card__body h3,
    .student-topic-card__body h3,
    .teacher-topic-card__body h3,
    .room-embedded-topics .topic-card__body h3,
    .room-embedded-topics .student-topic-card__body h3,
    .room-embedded-topics .teacher-topic-card__body h3 {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        margin: 0 0 4px 0 !important;
        color: #0f172a !important;
        display: block !important;
        width: 100% !important;
        word-break: break-word !important;
    }

    .topic-card__body p,
    .student-topic-card__body p,
    .teacher-topic-card__body p,
    .room-embedded-topics .topic-card__body p,
    .room-embedded-topics .student-topic-card__body p,
    .room-embedded-topics .teacher-topic-card__body p {
        display: block !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        line-clamp: 2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        word-break: break-word !important;
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        color: #000 !important;
        width: 100% !important;
    }

    /* Classroom room announcement composer card on mobile */
    .classroom-room-main > .announcement-composer-trigger-card,
    #detail-section-room .classroom-room-main > .announcement-composer-trigger-card {
        margin-top: 0 !important;
        margin-bottom: 0.875rem !important;
        border-radius: 22px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: var(--sigma-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
        background: #ffffff !important;
    }

    /* Standard card spacing in room feed */
    #detail-section-room .classroom-room-main > :not([hidden]) ~ :not([hidden]),
    .classroom-room-main > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.875rem !important;
    }

    /* Student room layout alignment matching teacher/admin */
    #student-room-feed,
    .student-room-feed,
    .student-room-main,
    .student-room-panel .room-announcements-feed,
    #detail-section-room .classroom-room-main {
        margin-top: 0 !important;
    }

    .room-announcements-feed > article,
    .room-announcements-feed > .announcement-card,
    .room-announcements-feed > .sigma-announcement-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* Auto-sized text inside feed post panels */
    .room-announcements-feed article h3,
    .room-announcements-feed article .announcement-author-name,
    .announcement-card h3 {
        font-size: clamp(13px, 3.4vw, 13.5px) !important;
        font-weight: 600 !important;
    }

    .room-announcements-feed article p,
    .announcement-card p {
        font-size: clamp(12px, 3.2vw, 13px) !important;
        line-height: 1.45 !important;
    }

    .room-announcements-feed article button,
    .announcement-card button {
        font-size: clamp(11px, 2.9vw, 12px) !important;
    }

    /* Attendance Tab & Card (Mobile Edge-to-Edge Full Width, No Radius) */
    #detail-section-attendance,
    #detail-section-attendance > div,
    #detail-section-attendance .attendance-monthly-card,
    .attendance-monthly-card,
    .student-room-attendance,
    .student-attendance-split-layout,
    .student-attendance-split-layout__table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .student-attendance-split-layout {
        gap: 0.75rem !important;
    }

    .student-attendance-split-layout__stats {
        padding: 0.5rem 0.85rem 1.5rem 0.85rem !important;
        gap: 0.5rem !important;
        background: transparent !important;
        border: none !important;
    }

    .attendance-monthly-header {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        padding: 0.5rem 0.75rem !important;
    }

    .attendance-month-display {
        font-size: 13px !important;
        font-weight: 700 !important;
    }

    .teacher-attendance-month-picker-btn,
    .student-attendance-month-picker-btn {
        width: 1.75rem !important;
        height: 1.75rem !important;
        padding: 0 !important;
        font-size: 12px !important;
    }

    .teacher-attendance-month-picker-btn i,
    .student-attendance-month-picker-btn i {
        font-size: 12px !important;
    }

    /* Attendance Calendar Popup: Scaled down on Mobile */
    .student-attendance-calendar-popup,
    .teacher-attendance-calendar-popup {
        width: 220px !important;
        max-width: calc(100vw - 28px) !important;
        padding: 10px 10px 8px 10px !important;
        border-radius: 16px !important;
        top: calc(100% + 6px) !important;
        box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.16), 0 3px 8px -2px rgba(0, 0, 0, 0.08) !important;
    }

    .student-attendance-calendar-popup .calendar-weekday-header,
    .teacher-attendance-calendar-popup .calendar-weekday-header {
        font-size: 9px !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        padding-bottom: 2px !important;
    }

    .student-attendance-calendar-popup .calendar-day-cell,
    .teacher-attendance-calendar-popup .calendar-day-cell {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
    }

    .student-attendance-calendar-popup .grid.grid-cols-7,
    .teacher-attendance-calendar-popup .grid.grid-cols-7 {
        gap: 2px !important;
    }

    .student-attendance-calendar-popup .cal-picker-header,
    .teacher-attendance-calendar-popup .cal-picker-header {
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
    }

    .student-attendance-calendar-popup .cal-picker-year-label,
    .teacher-attendance-calendar-popup .cal-picker-year-label {
        font-size: 13px !important;
    }

    .student-attendance-calendar-popup .cal-picker-year-btn,
    .teacher-attendance-calendar-popup .cal-picker-year-btn {
        width: 24px !important;
        height: 24px !important;
    }

    .student-attendance-calendar-popup .cal-picker-year-btn i,
    .teacher-attendance-calendar-popup .cal-picker-year-btn i {
        font-size: 10px !important;
    }

    .student-attendance-calendar-popup .cal-picker-months-grid,
    .teacher-attendance-calendar-popup .cal-picker-months-grid {
        gap: 4px !important;
        margin-bottom: 4px !important;
    }

    .student-attendance-calendar-popup .cal-picker-month-btn,
    .teacher-attendance-calendar-popup .cal-picker-month-btn {
        font-size: 10.5px !important;
        padding: 5px 2px !important;
        border-radius: 8px !important;
    }

    .student-attendance-calendar-popup .cal-picker-footer,
    .student-attendance-calendar-popup .border-t,
    .teacher-attendance-calendar-popup .cal-picker-footer,
    .teacher-attendance-calendar-popup .border-t {
        padding-top: 6px !important;
        margin-top: 2px !important;
    }

    .student-attendance-calendar-popup .cal-picker-footer-today,
    .student-attendance-calendar-popup .cal-picker-footer-mode,
    .student-attendance-calendar-popup .border-t button,
    .teacher-attendance-calendar-popup .cal-picker-footer-today,
    .teacher-attendance-calendar-popup .cal-picker-footer-mode,
    .teacher-attendance-calendar-popup .border-t button {
        font-size: 10.5px !important;
        padding: 3px 6px !important;
    }

    /* Scale down the whole attendance table card on mobile so more dates are visible */
    .attendance-monthly-card {
        zoom: 0.80 !important;
        -webkit-zoom: 0.80 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .attendance-grid-container {
        border-radius: 0 !important;
        width: 100% !important;
    }

    .attendance-month-table,
    #classroom-attendance-empty-state {
        border-radius: 0 !important;
    }

    /* Teacher Attendance: Mobile Student Column & Single-Row Name */
    .attendance-month-table .student-name-col,
    .attendance-month-table tbody td.student-name-col,
    .attendance-month-table th.student-name-col {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        padding: 0 0.6rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        transition: none !important;
    }

    .attendance-month-table .student-name-col.is-students-expanded,
    .attendance-month-table tbody td.student-name-col.is-students-expanded,
    .attendance-month-table th.student-name-col.is-students-expanded {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        padding: 0 0.6rem !important;
    }

    /* Expanded mobile summaries fill the remaining table width. */
    .attendance-month-table th.attendance-summary-th,
    .attendance-month-table td.attendance-summary-td {
        width: var(--attendance-mobile-summary-col-width, calc((100vw - 220px) / 3)) !important;
        min-width: var(--attendance-mobile-summary-col-width, calc((100vw - 220px) / 3)) !important;
        max-width: var(--attendance-mobile-summary-col-width, calc((100vw - 220px) / 3)) !important;
        height: 2.65rem !important;
        min-height: 2.65rem !important;
        max-height: 2.65rem !important;
        box-sizing: border-box !important;
        padding: 0 1px !important;
        font-size: 11px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .attendance-month-table th.attendance-summary-th {
        line-height: 2.65rem !important;
    }

    .attendance-month-table th.attendance-summary-th--p,
    .attendance-month-table td.attendance-summary-td--p {
        left: 220px !important;
    }

    .attendance-month-table th.attendance-summary-th--a,
    .attendance-month-table td.attendance-summary-td--a {
        left: calc(220px + var(--attendance-mobile-summary-col-width, calc((100vw - 220px) / 3))) !important;
    }

    .attendance-month-table th.attendance-summary-th--l,
    .attendance-month-table td.attendance-summary-td--l {
        left: calc(220px + 2 * var(--attendance-mobile-summary-col-width, calc((100vw - 220px) / 3))) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 2px 0 5px -1px rgba(0, 0, 0, 0.08) !important;
    }

    .attendance-count-num {
        font-size: 11.5px !important;
    }

    /* Compact Student Profile Avatars on Mobile in Attendance Grid */
    .attendance-month-table .student-name-col :is(.attendance-student-avatar, .sigma-user-avatar, [class*="sigma-user-avatar"], .rounded-full, img) {
        display: inline-flex !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        flex: 0 0 24px !important;
        flex-shrink: 0 !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
        font-size: 10px !important;
    }

    .attendance-month-table tbody td.student-name-col > div {
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }

    .attendance-month-table th.student-name-col .attendance-th-students-inner {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
        gap: 4px !important;
    }

    .attendance-month-table th.student-name-col .attendance-students-expand-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        border-radius: 9999px !important;
        background: transparent !important;
        color: #ffffff !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .attendance-month-table th.student-name-col .attendance-students-expand-btn i {
        font-size: 10px !important;
        color: #ffffff !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    /* Strict 1-Row Truncated Student Name on Mobile */
    .attendance-month-table tbody td.student-name-col span,
    .attendance-month-table tbody td.student-name-col .truncate,
    .attendance-month-table .attendance-student-name,
    .attendance-student-name {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        line-height: 1.15 !important;
    }

    /* Keep the name rendering identical in both column-width states. */
    .attendance-month-table tbody td.student-name-col .attendance-student-name {
        font-family: 'Inter', sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #000000 !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
    }

    .attendance-month-table th.student-name-col,
    .attendance-month-table th.student-name-col .attendance-th-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        white-space: nowrap !important;
    }

    .attendance-month-table tbody td {
        height: 2.35rem !important;
    }

    /* Day Columns Scaling on Mobile */
    .attendance-month-table .day-col {
        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        transition: none !important;
    }

    .attendance-month-table th.day-col {
        padding: 0 !important;
        text-align: center !important;
        border-right: 1px solid #137638 !important;
    }

    .attendance-month-table th.day-col .attendance-th-date {
        font-size: clamp(10.5px, 2.8vw, 12px) !important;
        font-weight: 700 !important;
    }

    .attendance-month-table td.day-col {
        height: 2.65rem !important;
        padding: 0 !important;
    }

    .attendance-day-cell {
        font-size: clamp(11.5px, 3.1vw, 13px) !important;
        font-weight: 700 !important;
    }

    .attendance-month-table .day-col.is-expanded {
        width: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        transition: none !important;
    }

    .attendance-month-table th.day-col.is-selected:not(.is-today):not(.is-expanded) {
        background: #15803d !important;
        border-bottom: 2px solid #166534 !important;
    }

    .attendance-month-table th.day-col.is-selected:not(.is-today):not(.is-expanded) .attendance-th-date {
        color: #ffffff !important;
        font-weight: 800 !important;
    }


    .attendance-opt-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 2px !important;
    }

    .attendance-opt-btn {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        flex: 0 0 26px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
    }

    /* Student Attendance Table (Student View) Scaling */
    #classroom-attendance-history-body tr td {
        padding: 0.65rem 0.75rem !important;
    }
    #classroom-attendance-history-body p {
        font-size: clamp(11.5px, 3.1vw, 13px) !important;
    }
    #classroom-attendance-history-body span {
        font-size: clamp(11.5px, 3.1vw, 12.5px) !important;
    }

    /* Composer trigger bar (Dashboard Feed only) - Full width, zero radius, seamless flow */
    .main-dashboard-column > .announcement-composer-trigger-card,
    .main-dashboard-column > div:has(> #trigger-announcement-composer),
    .main-dashboard-column > div:has(> button[onclick*="openComposerModal"]) {
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: clamp(8px, 2.2vw, 12px) clamp(18px, 5.2vw, 24px) !important;
        background: #ffffff !important;
    }

    /* Classroom Room announcement composer trigger card on mobile */
    .classroom-room-main > .announcement-composer-trigger-card,
    .classroom-room-main .announcement-composer-trigger-card,
    #detail-section-room .announcement-composer-trigger-card,
    .classroom-room-main > div:first-child:has(button[onclick*="openClassroomComposer"]),
    .classroom-room-main > div:first-child:has(button[onclick*="openAdminClassroomComposer"]) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0.875rem !important;
        box-sizing: border-box !important;
        border-radius: 22px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: var(--sigma-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
        padding: clamp(8px, 2.2vw, 12px) clamp(12px, 3.2vw, 16px) !important;
        background: #ffffff !important;
    }

    #trigger-announcement-composer,
    button[onclick*="openComposerModal"],
    button[onclick*="openClassroomComposer"],
    button[onclick*="openAdminClassroomComposer"],
    .announcement-composer-trigger-card button,
    .announcement-composer-trigger-card #trigger-announcement-composer,
    .announcement-composer-trigger-card .announcement-trigger-input-btn {
        width: 100% !important;
        height: clamp(38px, 9.6vw, 42px) !important;
        min-height: clamp(38px, 9.6vw, 42px) !important;
        background-color: #f1f5f9 !important;
        border-radius: 9999px !important;
        padding: 0 clamp(14px, 3.6vw, 20px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.625rem !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        border: none !important;
        transition: background-color 0.15s ease !important;
    }

    #trigger-announcement-composer:hover,
    button[onclick*="openComposerModal"]:hover,
    button[onclick*="openClassroomComposer"]:hover,
    button[onclick*="openAdminClassroomComposer"]:hover,
    .announcement-composer-trigger-card button:hover {
        background-color: #e2e8f0 !important;
    }

    #trigger-announcement-composer:active,
    button[onclick*="openComposerModal"]:active,
    button[onclick*="openClassroomComposer"]:active,
    button[onclick*="openAdminClassroomComposer"]:active,
    .announcement-composer-trigger-card button:active {
        background-color: #cbd5e1 !important;
    }

    #trigger-announcement-composer i,
    button[onclick*="openComposerModal"] i,
    button[onclick*="openClassroomComposer"] i,
    .announcement-composer-trigger-card i {
        font-size: clamp(12.5px, 3.2vw, 14px) !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: color 0.15s ease !important;
    }

    #trigger-announcement-composer span,
    button[onclick*="openComposerModal"] span,
    button[onclick*="openClassroomComposer"] span,
    .announcement-composer-trigger-card span {
        font-size: clamp(13px, 3.4vw, 14px) !important;
        font-weight: 500 !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1.25 !important;
        text-align: left !important;
        transition: color 0.15s ease !important;
    }

    #trigger-announcement-composer:hover span,
    button[onclick*="openComposerModal"]:hover span,
    button[onclick*="openClassroomComposer"]:hover span,
    button[onclick*="openAdminClassroomComposer"]:hover span,
    .announcement-composer-trigger-card button:hover span {
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    }

    #trigger-announcement-composer:hover i,
    button[onclick*="openComposerModal"]:hover i,
    button[onclick*="openClassroomComposer"]:hover i,
    button[onclick*="openAdminClassroomComposer"]:hover i,
    .announcement-composer-trigger-card button:hover i {
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    }

    /* Announcement filter tabs container */
    .sigma-feed-tabs-container,
    .main-dashboard-column > .sigma-feed-tabs-container,
    #section-home .main-dashboard-column > .sigma-feed-tabs-container,
    #section-dashboard .main-dashboard-column > .sigma-feed-tabs-container,
    #dashboard-view .main-dashboard-column > .sigma-feed-tabs-container {
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 8px clamp(18px, 5.2vw, 24px) !important;
        background: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .sigma-feed-tab-btn,
    .sigma-feed-tabs-container button {
        flex: 1 1 0px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 clamp(6px, 1.8vw, 12px) !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        border-radius: 9999px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #334155 !important;
        background: transparent !important;
        transition: all 0.15s ease !important;
    }

    .sigma-feed-tab-btn:not(.active),
    .sigma-feed-tabs-container button:not(.active) {
        color: #334155 !important;
        font-weight: 500 !important;
        background: transparent !important;
    }

    .sigma-feed-tab-btn:hover:not(.active),
    .sigma-feed-tabs-container button:hover:not(.active) {
        background-color: #f1f5f9 !important;
        color: #0f172a !important;
    }

    .sigma-feed-tab-btn.active,
    .sigma-feed-tabs-container button.active {
        background: #15803d !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 2px rgba(21, 128, 61, 0.20) !important;
    }

    /* Feed stream containers (Student, Teacher, Admin, Room) */
    #admin-announcements-feed,
    #student-announcements-feed,
    .room-announcements-feed {
        padding: 0 !important;
        padding-bottom: 0 !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        gap: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Post Panel Cards (Feed Announcements & Room Posts) */
    .sigma-announcement-card,
    .announcement-card,
    #admin-announcements-feed > article,
    #student-announcements-feed > article,
    .room-announcements-feed > article {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        background: #ffffff !important;
        position: relative !important;
        --sigma-card-pad-x: clamp(18px, 5.2vw, 24px);
        padding: clamp(16px, 4vw, 22px) clamp(18px, 5.2vw, 24px) !important;
        padding-left: clamp(18px, 5.2vw, 24px) !important;
        padding-right: clamp(18px, 5.2vw, 24px) !important;
        overflow: hidden !important;
    }

    /* Fallback if card is placed directly in main column */
    .main-dashboard-column > .sigma-announcement-card,
    .main-dashboard-column > .announcement-card,
    .main-dashboard-column > article {
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        background: #ffffff !important;
        position: relative !important;
        --sigma-card-pad-x: clamp(18px, 5.2vw, 24px);
        padding: clamp(16px, 4vw, 22px) clamp(18px, 5.2vw, 24px) !important;
        padding-left: clamp(18px, 5.2vw, 24px) !important;
        padding-right: clamp(18px, 5.2vw, 24px) !important;
        overflow: hidden !important;
    }

    /* Reset legacy div:first-child padding so the entire card uses unified padding */
    #admin-announcements-feed > article > div:first-child,
    #student-announcements-feed > article > div:first-child,
    .room-announcements-feed > article > div:first-child,
    .announcement-card > div:first-child,
    .sigma-announcement-card > div:first-child {
        padding: 0 !important;
    }

    .sigma-feed-sentinel {
        width: 100% !important;
        margin: 12px 0 16px 0 !important;
        padding: 8px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sigma-announcement-card .sigma-card-header-row,
    .announcement-card .sigma-card-header-row,
    #admin-announcements-feed > article .sigma-card-header-row,
    #student-announcements-feed > article .sigma-card-header-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        position: relative !important;
        gap: 8px !important;
        margin-bottom: 0.625rem !important;
        padding: 0 !important;
    }

    .sigma-announcement-card .sigma-card-author-meta,
    .announcement-card .sigma-card-author-meta {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.625rem !important;
    }

    .sigma-announcement-card .sigma-card-author-text-col,
    .announcement-card .sigma-card-author-text-col {
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .sigma-announcement-card .sigma-card-author-fullname,
    .announcement-card .sigma-card-author-fullname {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: calc(100% - 130px) !important;
        font-size: 14.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    .sigma-announcement-card .sigma-card-header-right,
    .announcement-card .sigma-card-header-right {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: clamp(4px, 1.5vw, 8px) !important;
        margin-top: 0 !important;
        height: 22px !important;
        z-index: 2 !important;
    }

    .sigma-announcement-card .sigma-card-timestamp-text,
    .announcement-card .sigma-card-timestamp-text {
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
        white-space: nowrap !important;
        letter-spacing: 0.01em !important;
        display: inline-block !important;
    }

    .sigma-announcement-card .sigma-card-options-wrapper,
    .announcement-card .sigma-card-options-wrapper {
        display: inline-flex !important;
        align-items: center !important;
    }

    .sigma-announcement-card .sigma-card-options-btn,
    .announcement-card .sigma-card-options-btn {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sigma-announcement-card .sigma-card-post-title,
    .sigma-announcement-card .sigma-card-post-body,
    .announcement-card .sigma-card-post-title,
    .announcement-card .sigma-card-post-body {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .sigma-announcement-card .sigma-card-post-title,
    .announcement-card .sigma-card-post-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin: 0 0 6px 0 !important;
    }

    .sigma-announcement-card .sigma-card-post-body,
    .announcement-card .sigma-card-post-body {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #000000 !important;
        margin: 0 0 8px 0 !important;
    }

    .sigma-announcement-card .sigma-card-footer-row,
    .announcement-card .sigma-card-footer-row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-top: 8px !important;
        padding: 0 !important;
    }

    .sigma-announcement-card .sigma-card-like-btn,
    .sigma-announcement-card .sigma-card-comment-btn,
    .announcement-card .sigma-card-like-btn,
    .announcement-card .sigma-card-comment-btn {
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    #student-announcements-feed-empty,
    #admin-announcements-feed-empty,
    .sigma-announcements-empty-state {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        background: #ffffff !important;
        position: relative !important;
        padding: 2rem 1.25rem 2.5rem 1.25rem !important;
        height: auto !important;
        min-height: calc(100dvh - var(--shell-offset, 105px) - 210px) !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    #section-home:not(.hidden):has(.sigma-announcements-empty-state),
    #section-dashboard:not(.hidden):has(.sigma-announcements-empty-state) {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: calc(100dvh - var(--shell-offset, 105px)) !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #section-home:has(.sigma-announcements-empty-state) .dashboard-grid,
    #section-dashboard:has(.sigma-announcements-empty-state) .dashboard-grid,
    #section-home:has(.sigma-announcements-empty-state) .main-dashboard-column,
    #section-dashboard:has(.sigma-announcements-empty-state) .main-dashboard-column,
    #section-home:has(.sigma-announcements-empty-state) #student-announcements-feed,
    #section-dashboard:has(.sigma-announcements-empty-state) #admin-announcements-feed,
    .room-announcements-feed:has(.sigma-announcements-empty-state) {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 100% !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        background-color: #ffffff !important;
    }

    .sigma-announcements-empty-state .sigma-empty-icon-circle {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 1.25rem !important;
    }

    .sigma-announcements-empty-state .sigma-empty-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 0 !important;
    }

    .sigma-announcements-empty-state .sigma-empty-subtitle {
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: rgba(0, 0, 0, 0.45) !important;
        margin-top: 6px !important;
        max-width: 300px !important;
        line-height: 1.45 !important;
    }

    /* Distinct Noticeable Sharp Edge Shadow Between Adjacent Closed-Gap Panels (Black Fade, Not Too Much) */
    .sigma-announcement-card + .sigma-announcement-card,
    .announcement-card + .announcement-card,
    #admin-announcements-feed > article + article,
    #student-announcements-feed > article + article,
    .room-announcements-feed > article + article {
        border-top: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    .sigma-announcement-card:last-child,
    .announcement-card:last-child,
    #admin-announcements-feed > article:last-child,
    #student-announcements-feed > article:last-child,
    .room-announcements-feed > article:last-child {
        margin-bottom: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }

    /* Media Panels & Grids (Images & Video Full Width, Proportional Aspect Ratios, Balanced Spacing) */
    .sigma-announcement-card .sigma-card-media-picture-container,
    .sigma-announcement-card .sigma-card-photo-grid,
    .sigma-announcement-card .sigma-card-media-video-container,
    .announcement-card .sigma-card-media-picture-container,
    .announcement-card .sigma-card-photo-grid,
    .announcement-card .sigma-card-media-video-container {
        width: calc(100% + (var(--sigma-card-pad-x, clamp(18px, 5.2vw, 24px)) * 2)) !important;
        max-width: calc(100% + (var(--sigma-card-pad-x, clamp(18px, 5.2vw, 24px)) * 2)) !important;
        margin-left: calc(var(--sigma-card-pad-x, clamp(18px, 5.2vw, 24px)) * -1) !important;
        margin-right: calc(var(--sigma-card-pad-x, clamp(18px, 5.2vw, 24px)) * -1) !important;
        margin-top: 0.625rem !important;
        margin-bottom: 0.625rem !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-left: none !important;
        border-right: none !important;
        background: #000000 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .sigma-announcement-card .sigma-card-media-picture-container img {
        width: 100% !important;
        height: auto !important;
        max-height: 520px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
        background: #000000 !important;
    }

    /* 2 Images: 2 equal side-by-side square columns, zero black void below */
    .sigma-announcement-card .sigma-card-photo-grid.count-2,
    .sigma-card-photo-grid.count-2 {
        grid-template-columns: 1fr 1fr !important;
        aspect-ratio: 2 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 480px !important;
        gap: 3px !important;
    }

    /* 3 Images: 1 large left, 2 stacked right */
    .sigma-announcement-card .sigma-card-photo-grid.count-3,
    .sigma-card-photo-grid.count-3 {
        grid-template-columns: 1.6fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        aspect-ratio: 16 / 10 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 480px !important;
        gap: 3px !important;
    }

    /* 4+ Images: 2x2 grid */
    .sigma-announcement-card .sigma-card-photo-grid.count-4,
    .sigma-card-photo-grid.count-4 {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 480px !important;
        gap: 3px !important;
    }

    .sigma-announcement-card .sigma-grid-img-cell,
    .sigma-grid-img-cell {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .sigma-announcement-card .sigma-grid-img-cell img,
    .sigma-announcement-card .sigma-card-photo-grid img,
    .sigma-grid-img-cell img {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: unset !important;
        object-fit: cover !important;
        display: block !important;
    }

    .sigma-announcement-card .sigma-card-media-video-container {
        height: auto !important;
        min-height: 0 !important;
        max-height: 520px !important;
    }

    .sigma-announcement-card .sigma-card-media-video-container video {
        width: 100% !important;
        height: auto !important;
        max-height: 520px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Hide redundant top-right fullscreen button (Native video controls provide fullscreen) */
    .sigma-card-video-expand-btn,
    button.sigma-card-video-expand-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 767px) {
    #section-topic-content .topic-score-sticky button.teacher-save-grade-btn,
    #section-topic-content .topic-score-sticky button.teacher-view-gradebook-btn {
        width: 100% !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    #section-topic-content .topic-score-sticky button.teacher-save-grade-btn span,
    #section-topic-content .topic-score-sticky button.teacher-view-gradebook-btn span,
    #section-topic-content .topic-score-sticky button.teacher-view-gradebook-btn i {
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
    }
}

/* ==========================================================================
   8. MOBILE & TABLET ANNOUNCEMENT POST CARD SYSTEM (< 1024px)
   Aligns date, author name, profile avatar, role subtitle, badges, and post text.
   Eliminates vertical misalignments, oversize timestamps, and horizontal overlaps.
   ========================================================================== */
@media (max-width: 1023px) {
    /* 1. Header Row Alignment & Spacing */
    .sigma-card-header-row {
        position: relative !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.625rem !important;
        width: 100% !important;
    }

    /* 2. Author Meta & Column */
    .sigma-card-author-meta {
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.625rem !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        overflow: visible !important;
    }

    /* 3. Author Avatar / Profile Icon */
    .sigma-announcement-card .sigma-card-author-avatar-img,
    .sigma-announcement-card .sigma-user-avatar,
    .sigma-card-author-meta .sigma-card-author-avatar-img,
    .sigma-card-author-meta .sigma-user-avatar,
    .sigma-card-author-meta > div:first-child,
    .sigma-card-author-meta > div:first-child .sigma-user-avatar,
    .sigma-announcement-card .w-10.h-10 {
        width: clamp(34px, 8.8vw, 38px) !important;
        height: clamp(34px, 8.8vw, 38px) !important;
        min-width: clamp(34px, 8.8vw, 38px) !important;
        min-height: clamp(34px, 8.8vw, 38px) !important;
        max-width: clamp(34px, 8.8vw, 38px) !important;
        max-height: clamp(34px, 8.8vw, 38px) !important;
        border-radius: 9999px !important;
        flex-shrink: 0 !important;
    }

    .sigma-card-author-meta .sigma-user-avatar i,
    .sigma-announcement-card .sigma-user-avatar i,
    .sigma-card-author-meta > div:first-child i,
    .sigma-announcement-card .w-10.h-10 i {
        font-size: 13.5px !important;
    }

    /* 4. Author Text Column */
    .sigma-card-author-text-col {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        gap: 2px !important;
        padding-top: 0 !important;
        overflow: visible !important;
    }

    /* 5. Author Full Name */
    .sigma-card-author-fullname,
    .sigma-card-author-fullname span,
    .sigma-announcement-card .sigma-card-author-name,
    .sigma-announcement-card h4 {
        font-size: clamp(13px, 3.4vw, 14.5px) !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .sigma-card-author-fullname {
        min-height: 22px !important;
        display: flex !important;
        align-items: center !important;
        max-width: calc(100% - 130px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Important Star Icon next to Name */
    .sigma-card-important-star-icon {
        font-size: 11px !important;
        margin-left: 3px !important;
        flex-shrink: 0 !important;
    }

    /* 6. Author Role Subtitle & Badges (Badge panel continues horizontally on one line, never cuts off text) */
    .sigma-card-author-text-col .sigma-card-author-subrow {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 1px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .sigma-card-author-text-col .sigma-card-author-subrow::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .sigma-card-author-role-subtitle {
        font-size: clamp(10px, 2.5vw, 11px) !important;
        font-weight: 500 !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
        line-height: 1.25 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-top: 0 !important;
    }

    /* Audience & Scope Badges - Badge panel continues horizontally on one line, never gets cut when overlapping */
    .sigma-card-author-text-col .sigma-card-section-badge,
    .sigma-card-author-text-col .sigma-card-audience-badge {
        font-size: 10px !important;
        font-weight: 500 !important;
        padding: 2px 7.5px !important;
        line-height: 1.25 !important;
        width: max-content !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    .sigma-card-author-text-col .sigma-card-section-badge i,
    .sigma-card-author-text-col .sigma-card-audience-badge i {
        margin-top: 0 !important;
        flex-shrink: 0 !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .sigma-card-author-text-col .sigma-card-section-badge .sigma-card-badge-label-text,
    .sigma-card-author-text-col .sigma-card-audience-badge .sigma-card-badge-label-text,
    .sigma-card-author-text-col .sigma-badge-sec-name,
    .sigma-card-author-text-col .sigma-badge-bullet,
    .sigma-card-author-text-col .sigma-badge-subj-name {
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }

    /* 7. Header Right (Date & Options Menu) - Absolute pinned top-right */
    .sigma-card-header-right {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        height: 22px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        z-index: 2 !important;
    }

    /* 8. Timestamp Text - Compact Secondary Typography */
    .sigma-card-timestamp-text {
        font-size: clamp(10px, 2.4vw, 11px) !important;
        font-weight: 500 !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
        white-space: nowrap !important;
        line-height: 20px !important;
        height: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        letter-spacing: 0.01em !important;
    }

    /* 9. Ellipsis Options Button */
    .sigma-card-options-wrapper {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 22px !important;
    }

    .sigma-card-options-btn {
        width: 22px !important;
        height: 22px !important;
        font-size: 12px !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #64748b !important;
        line-height: 1 !important;
    }

    /* 10. Post Title & Post Body Spacing & Sizing */
    .sigma-card-post-title {
        font-size: clamp(14.5px, 3.8vw, 16px) !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        margin-top: 0 !important;
        margin-bottom: 0.35rem !important;
        color: #0f172a !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .sigma-card-post-body,
    .sigma-announcement-card .sigma-card-body p,
    .sigma-announcement-card p {
        font-size: clamp(12.5px, 3.2vw, 13.5px) !important;
        line-height: 1.55 !important;
        color: #000000 !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .sigma-card-see-more-btn {
        font-size: clamp(12px, 3vw, 13px) !important;
        font-weight: 700 !important;
        color: #15803d !important;
    }

    /* 11. Actions Bar (Likes and Comments) */
    .sigma-card-footer-row,
    .sigma-card-actions-bar {
        border-top: none !important;
        padding: 0 !important;
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

    .sigma-card-like-btn,
    .sigma-card-comment-btn {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 11px !important;
        font-size: 11px !important;
        gap: 5.5px !important;
        border-radius: 9999px !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .sigma-card-like-btn i,
    .sigma-card-comment-btn i {
        font-size: 10.5px !important;
        width: 11px !important;
    }

    .sigma-card-like-btn span,
    .sigma-card-comment-btn span {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   8. TABLET ADAPTATIONS (640px - 1023px) & DESKTOP CONTAINER REFINEMENTS
   ========================================================================== */
@media (min-width: 640px) and (max-width: 1023px) {
    .welcome-panel {
        border-radius: 20px !important;
        height: 200px !important;
    }

    /* Tablet in Mobile View: Constrain content width so cards do NOT stretch edge-to-edge across the screen */
    .classroom-room-container,
    .room-embedded-topics,
    .room-embedded-topics > .room-topics-body,
    .topic-page-shell,
    .student-room-main,
    .student-room-feed {
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }

    .classroom-room-hero-banner,
    .classroom-room-hero-banner.rounded-\[24px\],
    .classroom-room-hero-banner[class*="rounded"] {
        max-width: 680px !important;
        margin: 12px auto !important;
    }

    .room-embedded-topics .student-topic-progress-rail,
    .room-embedded-topics .teacher-topic-progress-rail,
    .room-embedded-topics .topic-main-shell,
    .room-embedded-topics .student-topic-main-shell,
    .room-embedded-topics .teacher-topic-main-shell {
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Scale up Topic Card for Tablets */
    .topic-card,
    .student-topic-card,
    .teacher-topic-card {
        padding: 14px 18px !important;
        gap: 16px !important;
        border-radius: 20px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .topic-card__image-container,
    .student-topic-card__image-container,
    .teacher-topic-card__image-container {
        width: 88px !important;
        height: 88px !important;
        min-width: 88px !important;
        min-height: 88px !important;
        max-width: 88px !important;
        max-height: 88px !important;
        border-radius: 14px !important;
    }

    .topic-card__badge {
        font-size: 11.5px !important;
        padding: 3px 9px !important;
    }

    .topic-card__body h3,
    .student-topic-card__body h3,
    .teacher-topic-card__body h3 {
        font-size: 1.05rem !important;
        line-height: 1.35 !important;
    }

    .topic-card__body p,
    .student-topic-card__body p,
    .teacher-topic-card__body p {
        font-size: 13px !important;
        line-height: 1.45 !important;
        -webkit-line-clamp: 2 !important;
        color: #000 !important;
    }

    /* Scale up Task Progress Card for Tablets */
    .room-embedded-topics .student-topic-progress-rail .topic-progress-card,
    .room-embedded-topics .teacher-topic-progress-rail .topic-progress-card,
    .topic-progress-card {
        padding: 16px 20px !important;
        border-radius: 20px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
        max-width: 680px !important;
        margin: 0 auto !important;
    }

    .topic-progress-card .topic-section-selector-title {
        font-size: 13px !important;
    }

    .topic-progress-card .topic-task-percent-big {
        font-size: 1.75rem !important;
    }

    .topic-progress-card .topic-circle-stat-label {
        font-size: 12px !important;
    }
}

/* Tablet & Desktop View (>= 1024px): Prevent content from going full-bleed edge-to-edge */
@media (min-width: 1024px) {
    .classroom-room-container {
        width: 100% !important;
        max-width: 1040px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 1.25rem clamp(20px, 3.5vw, 36px) 2rem clamp(20px, 3.5vw, 36px) !important;
        box-sizing: border-box !important;
    }

    .classroom-room-hero-banner,
    .classroom-room-hero-banner.rounded-\[24px\],
    .classroom-room-hero-banner[class*="rounded"] {
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    .room-embedded-topics .teacher-topic-page-grid,
    .room-embedded-topics .topic-detail-grid {
        max-width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 16px !important;
    }

    .room-embedded-topics .topic-main-shell,
    .room-embedded-topics .student-topic-main-shell,
    .room-embedded-topics .teacher-topic-main-shell {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   9. MOBILE LOGIN & AUTHENTICATION PAGE ENHANCEMENTS (index.html)
   ========================================================================== */
@media (max-width: 768px) {
    #mainNav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        z-index: 9999 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background-color: #ffffff !important;
        height: clamp(56px, 14vw, 64px) !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        border-bottom: 2px solid var(--primary, #006738) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        transform: none !important;
    }

    #backToLoginLogo img,
    #mainNav img {
        width: 38px !important;
        height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
        display: block !important;
    }

    #helpCenterNavMenuBtn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        background: transparent !important;
        align-self: center !important;
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        border-radius: 8px !important;
    }

    #entryHelpCenterBtn {
        display: none !important;
    }

    body.help-center-active #helpCenterNavMenuBtn {
        display: flex !important;
    }

    #helpCenterNavMenuBtn:hover,
    #helpCenterNavMenuBtn:active {
        background: rgba(0, 0, 0, 0.05) !important;
    }

    #landingMain,
    body:has(#landingMain) main {
        margin-top: clamp(56px, 14vw, 64px) !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: #ffffff !important;
    }

    /* Mobile Help Center — Flush with green border, full width panels, no radius, no gaps */
    body.help-center-active main {
        margin-top: clamp(56px, 14vw, 64px) !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    #helpCenterView {
        margin-top: 0 !important;
        padding-top: 0 !important;
        background: #ffffff !important;
        min-height: calc(100vh - clamp(56px, 14vw, 64px)) !important;
        min-height: calc(100dvh - clamp(56px, 14vw, 64px)) !important;
        overflow: visible !important;
    }

    #helpCenterContentScroll {
        overflow: visible !important;
        height: auto !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #helpCenterContentScroll > div {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #helpCenterContentScroll > div > * + * {
        margin-top: 0 !important;
    }

    #faq-help,
    #contact-support {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        box-shadow: none !important;
        padding: 1.25rem 1.25rem !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    #faq-help {
        border-top: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }

    #contact-support {
        border-top: none !important;
        border-bottom: none !important;
    }

    body.help-center-active footer {
        margin-top: 0 !important;
    }

    /* Scale down text size in mobile Help Center */
    #helpCenterContentScroll h2 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }

    #helpCenterContentScroll h2 + p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    #helpCenterContentScroll .border-b.pb-5.mb-8 {
        padding-bottom: 0.65rem !important;
        margin-bottom: 1rem !important;
    }

    #helpCenterContentScroll h3 {
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
        margin-bottom: 0.35rem !important;
    }

    #helpCenterContentScroll p.leading-relaxed {
        font-size: 0.825rem !important;
        line-height: 1.5 !important;
    }

    #helpCenterContentScroll .space-y-6 > * + * {
        margin-top: 1rem !important;
    }

    #helpCenterContentScroll .pb-6 {
        padding-bottom: 1rem !important;
    }

    /* Inner cards in Contact Support */
    #contact-support .grid {
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    #contact-support .grid > div {
        padding: 0.9rem !important;
        border-radius: 0.85rem !important;
    }

    #contact-support .grid h3 {
        font-size: 0.875rem !important;
    }

    #contact-support .grid p {
        font-size: 0.75rem !important;
        line-height: 1.45 !important;
    }

    /* Green banner card */
    #contact-support .bg-\[\#15803d\] {
        padding: 1rem 1.15rem !important;
        border-radius: 0.85rem !important;
        gap: 0.75rem !important;
    }

    #contact-support .bg-\[\#15803d\] h3 {
        font-size: 0.925rem !important;
    }

    #contact-support .bg-\[\#15803d\] p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* Mobile landing page: hide slider, dots and campus banner border */
    #landingSliderPanel,
    #dotsContainer {
        display: none !important;
    }

    #landingMain {
        min-height: calc(100vh - clamp(56px, 14vw, 64px)) !important;
        min-height: calc(100dvh - clamp(56px, 14vw, 64px)) !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    /* Clean vertically centered login card occupying space below navbar */
    .login-panel {
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - clamp(56px, 14vw, 64px)) !important;
        min-height: calc(100dvh - clamp(56px, 14vw, 64px)) !important;
        border: none !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 1rem 1.25rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: #ffffff !important;
    }

    .login-panel .login-form-stack {
        width: 100% !important;
        max-width: clamp(340px, 88vw, 580px) !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .login-panel .login-form-shell,
    .login-panel .floating-input-group,
    .login-panel input,
    .login-panel .sign-in-btn {
        width: 100% !important;
    }

    .login-panel .login-form-logo-wrap:not(.hidden) {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: clamp(1rem, 2.5vh, 1.75rem) !important;
    }

    .login-panel .login-form-logo-wrap.hidden,
    #landingLoginLogoWrap.hidden {
        display: none !important;
    }

    .login-panel .login-form-logo {
        width: clamp(140px, min(48vw, 24vh), 220px) !important;
        height: clamp(140px, min(48vw, 24vh), 220px) !important;
        max-width: 70vw !important;
        display: block !important;
        object-fit: contain !important;
    }

    .login-panel .login-form-shell {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Footer on mobile landing page: below the fold, only visible on scroll */
    #landingFooter {
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ==========================================================================
   DESKTOP HELP CENTER (>= 768px): Strict enforcement (No burger, white sidebar, grey content)
   ========================================================================== */
@media (min-width: 768px) {
    #helpCenterNavMenuBtn,
    body.help-center-active #helpCenterNavMenuBtn {
        display: none !important;
    }

    #helpCategoriesSidebar {
        display: block !important;
        width: 320px !important;
        flex-shrink: 0 !important;
        background-color: #ffffff !important;
        border-right: 1px solid #e5e7eb !important;
    }

    #helpCenterView {
        display: flex !important;
        flex-direction: row !important;
        background-color: #f1f5f9 !important;
        min-height: calc(100vh - 82px) !important;
    }

    #helpCenterView.hidden {
        display: none !important;
    }

    #helpCenterContentScroll {
        display: block !important;
        flex: 1 1 0% !important;
        background-color: #f1f5f9 !important;
        overflow-y: auto !important;
    }

    #faq-help,
    #contact-support {
        border-radius: 24px !important;
        border: 1px solid #f1f5f9 !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
        background-color: #ffffff !important;
        padding: 2.5rem !important;
        max-width: 896px !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   10. MOBILE LIGHTBOX OVERLAY & CONTROLS (Portrait & Landscape)
   ========================================================================== */
@media (max-width: 768px) {
    .sigma-image-lightbox-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    .sigma-image-lightbox-img {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        object-fit: contain !important;
    }

    .sigma-image-lightbox-video {
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        object-fit: contain !important;
    }

    .sigma-image-lightbox-close {
        top: max(14px, env(safe-area-inset-top, 14px)) !important;
        right: max(14px, env(safe-area-inset-right, 14px)) !important;
        width: auto !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        padding: 8px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

    .sigma-image-lightbox-close i {
        font-size: 26px !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .sigma-image-lightbox-close:hover,
    .sigma-image-lightbox-close:active,
    .sigma-image-lightbox-close:focus {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .sigma-lightbox-nav-btn {
        width: auto !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        padding: 8px !important;
        line-height: 1 !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

    .sigma-lightbox-nav-btn i {
        font-size: 26px !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .sigma-lightbox-nav-btn:hover,
    .sigma-lightbox-nav-btn:active,
    .sigma-lightbox-nav-btn:focus {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        transform: translateY(-50%) !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .sigma-lightbox-nav-prev {
        left: max(10px, env(safe-area-inset-left, 10px)) !important;
    }

    .sigma-lightbox-nav-next {
        right: max(10px, env(safe-area-inset-right, 10px)) !important;
    }

    .sigma-lightbox-counter {
        bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
        height: 28px !important;
        line-height: 26px !important;
        padding: 0 12px !important;
        font-size: 11.5px !important;
        border-radius: 9999px !important;
    }

    .sigma-lightbox-actions-bar {
        bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
        right: max(14px, env(safe-area-inset-right, 14px)) !important;
        display: inline-flex !important;
    }

    .sigma-lightbox-like-btn {
        flex-direction: row !important;
        height: 34px !important;
        width: auto !important;
        min-width: 58px !important;
        padding: 0 13px !important;
        border-radius: 9999px !important;
        gap: 6px !important;
    }

    .sigma-lightbox-like-btn i {
        font-size: 13.5px !important;
    }

    .sigma-lightbox-like-btn span {
        font-size: 12px !important;
    }
}

@media (orientation: landscape) and (max-height: 520px), (max-height: 520px) {
    .sigma-image-lightbox-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
    }

    .sigma-image-lightbox-img {
        width: auto !important;
        height: 100vh !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        object-fit: contain !important;
    }

    .sigma-image-lightbox-video {
        width: auto !important;
        height: 100vh !important;
        max-height: 100vh !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        object-fit: contain !important;
    }

    .sigma-image-lightbox-close {
        top: max(8px, env(safe-area-inset-top, 8px)) !important;
        right: max(12px, env(safe-area-inset-right, 12px)) !important;
        width: auto !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        padding: 6px !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

    .sigma-image-lightbox-close i {
        font-size: 22px !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .sigma-image-lightbox-close:hover,
    .sigma-image-lightbox-close:active,
    .sigma-image-lightbox-close:focus {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        transform: none !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .sigma-lightbox-nav-btn {
        width: auto !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: #ffffff !important;
        padding: 6px !important;
        line-height: 1 !important;
        transform: translateY(-50%) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }

    .sigma-lightbox-nav-btn i {
        font-size: 22px !important;
        line-height: 1 !important;
        color: #ffffff !important;
    }

    .sigma-lightbox-nav-btn:hover,
    .sigma-lightbox-nav-btn:active,
    .sigma-lightbox-nav-btn:focus {
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        transform: translateY(-50%) !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .sigma-lightbox-nav-prev {
        left: max(10px, env(safe-area-inset-left, 10px)) !important;
    }

    .sigma-lightbox-nav-next {
        right: max(10px, env(safe-area-inset-right, 10px)) !important;
    }

    .sigma-lightbox-counter {
        bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
        height: 26px !important;
        line-height: 24px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
        border-radius: 9999px !important;
    }

    .sigma-lightbox-actions-bar {
        bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
        right: max(12px, env(safe-area-inset-right, 12px)) !important;
        display: inline-flex !important;
    }

    .sigma-lightbox-like-btn {
        flex-direction: row !important;
        height: 30px !important;
        width: auto !important;
        min-width: 52px !important;
        padding: 0 10px !important;
        border-radius: 9999px !important;
        gap: 5px !important;
    }

    .sigma-lightbox-like-btn i {
        font-size: 12.5px !important;
    }

    .sigma-lightbox-like-btn span {
        font-size: 11px !important;
    }
}

@media (max-width: 768px) {
    /* 15. Mobile Full-Screen Post & Comments Dialog */
    .sigma-post-dialog-backdrop {
        padding: 0 !important;
        background: #ffffff !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        backdrop-filter: none !important;
    }

    .sigma-post-dialog-backdrop.active {
        animation: none !important;
    }

    .sigma-post-dialog-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .sigma-post-dialog-header {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
    }

    .sigma-post-dialog-back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #000000 !important;
        font-size: 15px !important;
        padding: 0 !important;
    }

    .sigma-post-dialog-header .sigma-composer-close-btn {
        display: none !important;
    }

    .sigma-post-dialog-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        text-align: center !important;
    }

    .sigma-post-dialog-body {
        padding: 12px 16px !important;
        flex: 1 1 auto !important;
    }

    .sigma-post-dialog-footer {
        padding: 8px 12px !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
    }

    /* 16. Mobile Full-Screen Create Post / Composer Modal */
    .sigma-composer-backdrop {
        padding: 0 !important;
        background: #ffffff !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .sigma-composer-backdrop.active .sigma-composer-modal,
    .sigma-composer-modal {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        inset: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .sigma-composer-header {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        border-radius: 0 !important;
    }

    .sigma-composer-back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #000000 !important;
        font-size: 16px !important;
        padding: 0 !important;
        z-index: 10 !important;
    }

    .sigma-composer-back-btn i {
        color: #000000 !important;
        font-size: 16px !important;
    }

    .sigma-composer-close-btn {
        display: none !important;
    }

    .sigma-composer-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        text-align: center !important;
    }

    .sigma-composer-body {
        padding: 12px 16px !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
    }

    .sigma-composer-body .sigma-composer-author-row {
        align-items: flex-start !important;
        gap: 10px !important;
        margin-bottom: 2px !important;
    }

    .sigma-composer-body #sigma-composer-author-avatar-wrap,
    .sigma-composer-body .sigma-composer-author-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 9999px !important;
        margin-top: 1px !important;
        flex-shrink: 0 !important;
    }

    .sigma-composer-body .sigma-composer-author-details {
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .sigma-composer-body .sigma-composer-author-name {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.25 !important;
    }

    .sigma-composer-body .sigma-composer-pills-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
    }

    .sigma-composer-body .sigma-composer-pill-btn {
        height: auto !important;
        min-height: 24px !important;
        padding: 2px 8px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    .sigma-composer-body .sigma-composer-pill-btn span,
    .sigma-composer-body #sigma-composer-audience-label,
    .sigma-composer-body #sigma-composer-students-label,
    .sigma-composer-body #sigma-composer-priority-label {
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }

    .sigma-composer-body #sigma-composer-students-label {
        max-width: none !important;
    }

    .sigma-composer-body #sigma-composer-priority-label {
        max-width: none !important;
    }

    .sigma-composer-body .sigma-composer-pill-btn i {
        font-size: 10px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    .sigma-composer-body .sigma-composer-pill-btn i.fa-chevron-down {
        font-size: 8px !important;
        margin-left: 1px !important;
    }

    .sigma-composer-dropdown-menu {
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
    }

    .sigma-dropdown-group-title {
        font-size: 10px !important;
        padding: 0.15rem 0.4rem 0.2rem !important;
    }

    .sigma-dropdown-item {
        padding: 0.32rem 0.45rem !important;
        font-size: 11px !important;
        gap: 0.45rem !important;
    }

    .sigma-dropdown-item span,
    .sigma-dropdown-item .sigma-dropdown-item-text {
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
    }

    .sigma-dropdown-item i {
        font-size: 10.5px !important;
        width: 15px !important;
    }


    /* Mobile Full-Width Attach to Announcement Panel */
    .sigma-composer-add-to-post-card {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e2e8f0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 0.6rem 0.85rem !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    .sigma-add-to-post-label {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }

    .sigma-composer-footer {
        padding: 10px 14px 16px 14px !important;
        padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
    }

    /* Mobile Attendance Export Modal: Hide exit icon, full-width, clean sizing & no overlap */
    #attendance-export-modal .attendance-export-exit-btn,
    #attendance-export-modal button[title="Exit"],
    #attendance-export-modal button:has(i.fa-xmark) {
        display: none !important;
    }

    #attendance-export-modal {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #attendance-export-modal .sigma-modal-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
    }

    #attendance-export-modal .sigma-modal-panel {
        width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        flex: 1 1 auto !important;
    }

    #attendance-export-modal .sigma-modal-header {
        position: sticky !important;
        top: 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        z-index: 20 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
        flex-shrink: 0 !important;
    }

    #attendance-export-modal .sigma-modal-header-top {
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
    }

    #attendance-export-modal .attendance-export-mobile-return-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 9999px !important;
        background: transparent !important;
        border: none !important;
        color: #000000 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
        outline: none !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease !important;
    }

    #attendance-export-modal .attendance-export-mobile-return-btn:hover,
    #attendance-export-modal .attendance-export-mobile-return-btn:active {
        background-color: #f1f5f9 !important;
    }

    #attendance-export-modal .attendance-export-mobile-return-btn i {
        color: #000000 !important;
        font-size: 14px !important;
    }

    #attendance-export-modal .sigma-modal-title {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #000000 !important;
        letter-spacing: -0.01em !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }

    #attendance-export-modal .sigma-modal-body,
    #attendance-export-modal .sigma-modal-panel > .flex-1 {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 0.85rem 1rem !important;
        box-sizing: border-box !important;
    }

    #attendance-export-modal .sigma-modal-body p,
    #attendance-export-modal .flex-1 > p {
        font-size: 11.5px !important;
        font-weight: 400 !important;
        color: #000000 !important;
        line-height: 1.4 !important;
        margin-bottom: 0.35rem !important;
    }

    #attendance-export-modal .export-scope-option {
        padding: 0.6rem 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 8px !important;
    }

    #attendance-export-modal .export-scope-option input[type="radio"] {
        width: 15px !important;
        height: 15px !important;
        margin-top: 2px !important;
    }

    #attendance-export-modal .export-scope-option span.export-scope-title,
    #attendance-export-modal .export-scope-option span:not(.export-scope-badge):not(.bg-amber-100) {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    #attendance-export-modal .export-scope-option span.export-scope-badge,
    #attendance-export-modal .export-scope-option span.bg-amber-100 {
        font-size: 8.5px !important;
        font-weight: 600 !important;
        padding: 1px 5px !important;
        border-radius: 4px !important;
    }

    #attendance-export-modal .export-scope-option p {
        font-size: 10.5px !important;
        font-weight: 400 !important;
        color: rgba(0, 0, 0, 0.6) !important;
        line-height: 1.35 !important;
        margin-top: 0.15rem !important;
    }

    #attendance-export-modal .attendance-export-cancel-btn {
        display: none !important;
    }

    #attendance-export-modal .sigma-modal-footer,
    #attendance-export-modal .border-t {
        padding: 0.65rem 1rem !important;
        border-top: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 30 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
        box-shadow: none !important;
    }

    #attendance-export-modal .sigma-modal-footer button,
    #attendance-export-modal .border-t button {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
        padding: 0 0.85rem !important;
        border-radius: 6px !important;
    }

    /* ─── Teacher Portal Only: Mobile Add/Edit Topics & Materials ─── */
    .teacher-portal #subject-modal-exit-btn,
    body:has(#teacher-header) #subject-modal-exit-btn,
    #subject-edit-overlay.teacher-mode #subject-modal-exit-btn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .teacher-portal #subject-mobile-return-btn,
    body:has(#teacher-header) #subject-mobile-return-btn,
    #subject-edit-overlay.teacher-mode #subject-mobile-return-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 9999px !important;
        background: transparent !important;
        border: none !important;
        color: #000000 !important;
        font-size: 14px !important;
        cursor: pointer !important;
        margin: 0 !important;
        padding: 0 !important;
        outline: none !important;
        flex-shrink: 0 !important;
        transition: background-color 0.15s ease !important;
    }

    .teacher-portal #subject-mobile-return-btn:hover,
    .teacher-portal #subject-mobile-return-btn:active,
    body:has(#teacher-header) #subject-mobile-return-btn:hover,
    body:has(#teacher-header) #subject-mobile-return-btn:active,
    #subject-edit-overlay.teacher-mode #subject-mobile-return-btn:hover,
    #subject-edit-overlay.teacher-mode #subject-mobile-return-btn:active {
        background-color: #f1f5f9 !important;
    }

    .teacher-portal #subject-mobile-return-btn i,
    body:has(#teacher-header) #subject-mobile-return-btn i,
    #subject-edit-overlay.teacher-mode #subject-mobile-return-btn i {
        color: #000000 !important;
        font-size: 14px !important;
    }

    .teacher-portal #subject-back-btn,
    body:has(#teacher-header) #subject-back-btn,
    #subject-edit-overlay.teacher-mode #subject-back-btn {
        display: none !important;
    }

    .teacher-portal #subject-modal-header > div,
    body:has(#teacher-header) #subject-modal-header > div,
    #subject-edit-overlay.teacher-mode #subject-modal-header > div {
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 48px !important;
        height: auto !important;
        align-items: center !important;
    }

    .teacher-portal #subject-editor-title,
    body:has(#teacher-header) #subject-editor-title,
    #subject-edit-overlay.teacher-mode #subject-editor-title {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #000000 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        word-break: break-word !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    #quiz-storage-header-actions {
        gap: 6px !important;
    }

    #quiz-storage-header-actions button {
        height: 30px !important;
        padding-left: 9px !important;
        padding-right: 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }

    .teacher-portal #subject-edit-form-body,
    body:has(#teacher-header) #subject-edit-form-body,
    #subject-edit-overlay.teacher-mode #subject-edit-form-body {
        padding: 12px 14px 28px !important;
        gap: 14px !important;
    }

    .teacher-portal #subject-materials-quarter-bar,
    .teacher-portal #subject-topics-quarter-bar,
    body:has(#teacher-header) #subject-materials-quarter-bar,
    body:has(#teacher-header) #subject-topics-quarter-bar,
    #subject-edit-overlay.teacher-mode #subject-materials-quarter-bar,
    #subject-edit-overlay.teacher-mode #subject-topics-quarter-bar {
        gap: 8px !important;
        padding-bottom: 8px !important;
    }

    #subject-materials-quarter-pills,
    #subject-topics-quarter-pills,
    .teacher-portal #subject-materials-quarter-pills,
    .teacher-portal #subject-topics-quarter-pills,
    body:has(#teacher-header) #subject-materials-quarter-pills,
    body:has(#teacher-header) #subject-topics-quarter-pills,
    #subject-edit-overlay.teacher-mode #subject-materials-quarter-pills,
    #subject-edit-overlay.teacher-mode #subject-topics-quarter-pills {
        padding: 3px !important;
        border-radius: 9px !important;
        background-color: #f1f5f9 !important;
        gap: 2px !important;
    }

    html body #subject-edit-overlay :is(#subject-materials-quarter-pills, #subject-topics-quarter-pills):has(> .sigma-quarter-dropdown) {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #subject-materials-quarter-pills button,
    #subject-topics-quarter-pills button,
    .teacher-portal #subject-materials-quarter-pills button,
    .teacher-portal #subject-topics-quarter-pills button,
    body:has(#teacher-header) #subject-materials-quarter-pills button,
    body:has(#teacher-header) #subject-topics-quarter-pills button,
    #subject-edit-overlay.teacher-mode #subject-materials-quarter-pills button,
    #subject-edit-overlay.teacher-mode #subject-topics-quarter-pills button {
        padding: 4px 9px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        line-height: 1.2 !important;
    }

    .teacher-portal #subject-content-reorder-btn,
    .teacher-portal #subject-content-add-topic-btn,
    .teacher-portal #add-material-trigger,
    .teacher-portal #subject-add-topic-header-btn,
    .teacher-portal #subject-material-scope-container button,
    .teacher-portal #subject-topic-scope-container button,
    body:has(#teacher-header) #subject-content-reorder-btn,
    body:has(#teacher-header) #subject-content-add-topic-btn,
    body:has(#teacher-header) #add-material-trigger,
    body:has(#teacher-header) #subject-add-topic-header-btn,
    body:has(#teacher-header) #subject-material-scope-container button,
    body:has(#teacher-header) #subject-topic-scope-container button,
    #subject-edit-overlay.teacher-mode #subject-content-reorder-btn,
    #subject-edit-overlay.teacher-mode #subject-content-add-topic-btn,
    #subject-edit-overlay.teacher-mode #add-material-trigger,
    #subject-edit-overlay.teacher-mode #subject-add-topic-header-btn,
    #subject-edit-overlay.teacher-mode #subject-material-scope-container button,
    #subject-edit-overlay.teacher-mode #subject-topic-scope-container button {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        border-radius: 7px !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .teacher-portal #subject-content-reorder-btn i,
    .teacher-portal #subject-content-add-topic-btn i,
    .teacher-portal #add-material-trigger i,
    .teacher-portal #subject-add-topic-header-btn i,
    .teacher-portal #subject-material-scope-container button i,
    .teacher-portal #subject-topic-scope-container button i,
    body:has(#teacher-header) #subject-content-reorder-btn i,
    body:has(#teacher-header) #subject-content-add-topic-btn i,
    body:has(#teacher-header) #add-material-trigger i,
    body:has(#teacher-header) #subject-add-topic-header-btn i,
    body:has(#teacher-header) #subject-material-scope-container button i,
    body:has(#teacher-header) #subject-topic-scope-container button i,
    #subject-edit-overlay.teacher-mode #subject-content-reorder-btn i,
    #subject-edit-overlay.teacher-mode #subject-content-add-topic-btn i,
    #subject-edit-overlay.teacher-mode #add-material-trigger i,
    #subject-edit-overlay.teacher-mode #subject-add-topic-header-btn i,
    #subject-edit-overlay.teacher-mode #subject-material-scope-container button i,
    #subject-edit-overlay.teacher-mode #subject-topic-scope-container button i {
        font-size: 9.5px !important;
        color: #000000 !important;
    }

    /* ─── Subject Modal Shell: grows with content on Mobile ─── */
    #subject-edit-overlay .sigma-modal-shell,
    .teacher-portal #subject-edit-overlay .sigma-modal-shell,
    body:has(#teacher-header) #subject-edit-overlay .sigma-modal-shell,
    #subject-edit-overlay.teacher-mode .sigma-modal-shell {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    /* ─── Subject Modal Panel: grows with content on Mobile ─── */
    #subject-edit-overlay .sigma-modal-panel,
    .teacher-portal #subject-edit-overlay .sigma-modal-panel,
    body:has(#teacher-header) #subject-edit-overlay .sigma-modal-panel,
    #subject-edit-overlay.teacher-mode .sigma-modal-panel {
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ─── Add Material Dropdown Menu (Scaled Down & No Screen Overlap) ─── */
    #add-material-dropdown,
    .teacher-portal #add-material-dropdown,
    body:has(#teacher-header) #add-material-dropdown,
    #subject-edit-overlay #add-material-dropdown {
        width: clamp(210px, 68vw, 240px) !important;
        max-width: calc(100vw - 20px) !important;
        border-radius: 12px !important;
        padding: 5px !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    }

    #add-material-dropdown button,
    .teacher-portal #add-material-dropdown button,
    body:has(#teacher-header) #add-material-dropdown button,
    #subject-edit-overlay #add-material-dropdown button {
        padding: 5px 7px !important;
        border-radius: 8px !important;
        gap: 8px !important;
    }

    #add-material-dropdown button > div:first-child,
    .teacher-portal #add-material-dropdown button > div:first-child,
    body:has(#teacher-header) #add-material-dropdown button > div:first-child,
    #subject-edit-overlay #add-material-dropdown button > div:first-child {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        min-height: 26px !important;
        border-radius: 6px !important;
    }

    #add-material-dropdown button > div:first-child i,
    .teacher-portal #add-material-dropdown button > div:first-child i,
    body:has(#teacher-header) #add-material-dropdown button > div:first-child i,
    #subject-edit-overlay #add-material-dropdown button > div:first-child i {
        font-size: 11px !important;
    }

    #add-material-dropdown button span.text-xs,
    .teacher-portal #add-material-dropdown button span.text-xs,
    body:has(#teacher-header) #add-material-dropdown button span.text-xs,
    #subject-edit-overlay #add-material-dropdown button span.text-xs {
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #add-material-dropdown button span.text-black-fade,
    .teacher-portal #add-material-dropdown button span.text-black-fade,
    body:has(#teacher-header) #add-material-dropdown button span.text-black-fade,
    #subject-edit-overlay #add-material-dropdown button span.text-black-fade {
        font-size: 9.5px !important;
        line-height: 1.15 !important;
    }

    /* ─── Mobile View Material Detail: Full-Width Video (No Horizontal Padding) & Synced Height ─── */
    #subject-material-detail-view .material-detail-video-wrapper,
    .teacher-portal #subject-material-detail-view .material-detail-video-wrapper,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-video-wrapper,
    #subject-edit-overlay #subject-material-detail-view .material-detail-video-wrapper,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-video-wrapper {
        margin-left: -16px !important;
        margin-right: -16px !important;
        margin-top: -16px !important;
        width: calc(100% + 32px) !important;
        max-width: calc(100% + 32px) !important;
        padding: 0 !important;
    }

    .teacher-portal #subject-material-detail-view .material-detail-video-wrapper,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-video-wrapper,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-video-wrapper {
        margin-left: -14px !important;
        margin-right: -14px !important;
        margin-top: -12px !important;
        width: calc(100% + 28px) !important;
        max-width: calc(100% + 28px) !important;
        padding: 0 !important;
    }

    #subject-material-detail-view .material-detail-video-player,
    .teacher-portal #subject-material-detail-view .material-detail-video-player,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-video-player,
    #subject-edit-overlay #subject-material-detail-view .material-detail-video-player,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-video-player {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border: none !important;
        overflow: hidden !important;
    }

    #subject-material-detail-view .material-detail-video-player video,
    #subject-material-detail-view .material-detail-video-player iframe,
    .teacher-portal #subject-material-detail-view .material-detail-video-player video,
    .teacher-portal #subject-material-detail-view .material-detail-video-player iframe,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-video-player video,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-video-player iframe,
    #subject-edit-overlay #subject-material-detail-view .material-detail-video-player video,
    #subject-edit-overlay #subject-material-detail-view .material-detail-video-player iframe,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-video-player video,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-video-player iframe {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 16 / 9 !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        object-fit: contain !important;
        display: block !important;
    }

    #subject-material-detail-view .material-detail-title,
    .teacher-portal #subject-material-detail-view .material-detail-title,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-title,
    #subject-edit-overlay #subject-material-detail-view .material-detail-title,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-title {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        letter-spacing: -0.01em !important;
        color: #000000 !important;
        margin-top: 2px !important;
        word-break: break-word !important;
    }

    #subject-material-detail-view .material-detail-badge,
    #subject-material-detail-view .material-detail-type-badge,
    .teacher-portal #subject-material-detail-view .material-detail-badge,
    .teacher-portal #subject-material-detail-view .material-detail-type-badge,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-badge,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-type-badge,
    #subject-edit-overlay #subject-material-detail-view .material-detail-badge,
    #subject-edit-overlay #subject-material-detail-view .material-detail-type-badge,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-badge,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-type-badge {
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 1.5px 6.5px !important;
        border-radius: 5px !important;
        line-height: 1.2 !important;
        gap: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #subject-material-detail-view .material-detail-badge i,
    #subject-material-detail-view .material-detail-type-badge i,
    .teacher-portal #subject-material-detail-view .material-detail-badge i,
    .teacher-portal #subject-material-detail-view .material-detail-type-badge i,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-badge i,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-type-badge i,
    #subject-edit-overlay #subject-material-detail-view .material-detail-badge i,
    #subject-edit-overlay #subject-material-detail-view .material-detail-type-badge i,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-badge i,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-type-badge i {
        font-size: 9px !important;
        margin: 0 !important;
    }

    #subject-material-detail-view .material-detail-desc,
    .teacher-portal #subject-material-detail-view .material-detail-desc,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-desc,
    #subject-edit-overlay #subject-material-detail-view .material-detail-desc,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-desc {
        padding-top: 12px !important;
        margin-top: 12px !important;
    }

    #subject-material-detail-view .material-detail-desc p,
    .teacher-portal #subject-material-detail-view .material-detail-desc p,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-desc p,
    #subject-edit-overlay #subject-material-detail-view .material-detail-desc p,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-desc p {
        font-size: 13px !important;
        line-height: 1.55 !important;
        color: #475569 !important;
        word-break: break-word !important;
    }

    #subject-material-detail-view .material-detail-attached-file,
    #subject-material-detail-view .material-detail-rubric-section,
    .teacher-portal #subject-material-detail-view .material-detail-attached-file,
    .teacher-portal #subject-material-detail-view .material-detail-rubric-section,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-attached-file,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-rubric-section,
    #subject-edit-overlay #subject-material-detail-view .material-detail-attached-file,
    #subject-edit-overlay #subject-material-detail-view .material-detail-rubric-section,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-attached-file,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-rubric-section {
        padding-top: 14px !important;
        margin-top: 14px !important;
    }

    .teacher-portal #subject-material-detail-view .material-detail-section-title,
    body:has(#teacher-header) #subject-material-detail-view .material-detail-section-title,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .material-detail-section-title {
        font-size: 12px !important;
        font-weight: 700 !important;
        margin-bottom: 6px !important;
        letter-spacing: -0.01em !important;
        color: #000000 !important;
    }

    /* Scaled-down File, Quiz & Rubric Cards across all materials */
    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }

    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel > div:first-child,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel > div:first-child,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel > div:first-child {
        gap: 10px !important;
    }

    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel .w-16,
    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel .sm\:w-20,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel .w-16,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel .sm\:w-20,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel .w-16,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel .sm\:w-20 {
        width: 42px !important;
        min-width: 42px !important;
        gap: 4px !important;
    }

    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel .w-12.h-12,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel .w-12.h-12,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel .w-12.h-12 {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 10px !important;
    }

    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel .w-12.h-12 i,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel .w-12.h-12 i,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel .w-12.h-12 i {
        font-size: 15px !important;
    }

    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel span.text-\[10px\],
    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel .w-16 span,
    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel .sm\:w-20 span,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel span.text-\[10px\],
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel .w-16 span,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel .sm\:w-20 span,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel span.text-\[10px\],
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel .w-16 span,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel .sm\:w-20 span {
        font-size: 9px !important;
        padding: 1px 5px !important;
        border-radius: 4px !important;
        line-height: 1.2 !important;
    }

    .teacher-portal #subject-material-detail-view .sigma-black-fade-panel p.text-xs,
    body:has(#teacher-header) #subject-material-detail-view .sigma-black-fade-panel p.text-xs,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .sigma-black-fade-panel p.text-xs {
        font-size: 11px !important;
        margin-top: 2px !important;
    }

    .teacher-portal #subject-material-detail-view .mat-kebab-btn,
    body:has(#teacher-header) #subject-material-detail-view .mat-kebab-btn,
    #subject-edit-overlay.teacher-mode #subject-material-detail-view .mat-kebab-btn {
        width: 28px !important;
        height: 28px !important;
    }

    /* ─── Topic Editor & Design Templates Modal Mobile Scaling ─── */
    #subject-topic-editor-view .w-40,
    #subject-topic-editor-view .aspect-\[3\/4\] {
        max-width: 170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #subject-topic-editor-view img#topic-editor-image-preview {
        max-width: 170px !important;
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
    }

    #topic-image-picker-modal > div {
        max-width: min(94vw, 420px) !important;
        max-height: 88vh !important;
        border-radius: 18px !important;
    }

    #topic-image-picker-modal > div > div:first-child {
        padding: 10px 14px !important;
    }

    #topic-image-picker-modal h3 {
        font-size: 14.5px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #topic-image-picker-modal h3 + p {
        font-size: 10.5px !important;
    }

    /* Trash Bin button in header */
    #topic-image-picker-modal button[onclick*="switchTopicPickerView('trash')"],
    #topic-image-picker-modal .sigma-btn-white.h-7 {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        gap: 5px !important;
    }

    #topic-image-picker-modal #topic-trash-badge {
        font-size: 9px !important;
        padding: 1px 5px !important;
    }

    #topic-image-picker-modal > div > .overflow-y-auto {
        padding: 12px 14px !important;
        gap: 10px !important;
    }

    /* Top Selected / Upload Template Card: scaled down on mobile */
    #topic-image-picker-modal .topic-template-upload {
        width: 88px !important;
        max-width: 88px !important;
        height: 117px !important;
        aspect-ratio: 3 / 4 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 10px !important;
        padding: 4px !important;
    }

    #topic-image-picker-modal #topic-picker-active-preview,
    #topic-image-picker-modal .w-40 {
        max-width: 88px !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    #topic-image-picker-modal .topic-template-upload .absolute.top-2.left-2,
    #topic-image-picker-modal .topic-template-upload [class*="bg-[#15803d]"] {
        top: 4px !important;
        left: 4px !important;
        padding: 2px 6px !important;
        font-size: 8px !important;
        border-radius: 9999px !important;
        gap: 3px !important;
    }

    #topic-image-picker-modal .topic-template-upload .w-8.h-8 {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 2px !important;
        border-radius: 6px !important;
    }

    #topic-image-picker-modal .topic-template-upload i.fa-arrow-up-from-bracket {
        font-size: 11px !important;
    }

    #topic-image-picker-modal .topic-template-upload span.font-bold {
        font-size: 9px !important;
    }

    #topic-image-picker-modal .topic-template-upload span.font-medium,
    #topic-image-picker-modal .topic-template-upload span.font-normal {
        font-size: 7.5px !important;
    }

    #topic-image-picker-modal h4 {
        font-size: 11.5px !important;
        margin-bottom: 2px !important;
    }

    #topic-image-picker-modal h4 + p {
        font-size: 9.5px !important;
    }

    /* Template Image Grids: 3 columns, scaled down on mobile */
    #topic-image-picker-modal .topic-template-recent-grid,
    #topic-image-picker-modal .grid.grid-cols-2 {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    #topic-image-picker-modal .topic-template-card {
        border-radius: 9px !important;
        aspect-ratio: 3 / 4 !important;
        min-width: 0 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    #topic-image-picker-modal .topic-template-card img {
        border-radius: 8px !important;
        object-fit: cover !important;
    }

    #topic-image-picker-modal button.topic-options-trigger {
        width: 20px !important;
        height: 20px !important;
        top: 4px !important;
        right: 4px !important;
        font-size: 9px !important;
    }

    #topic-image-picker-modal button.topic-options-trigger i {
        font-size: 9px !important;
    }

    #topic-image-picker-modal .topic-template-card .absolute.top-1\.5.left-1\.5 {
        width: 17px !important;
        height: 17px !important;
        top: 4px !important;
        left: 4px !important;
        font-size: 8px !important;
    }

    #topic-image-picker-modal .topic-template-card .absolute.top-1\.5.left-1\.5 i {
        font-size: 8px !important;
    }

    /* Three Dots Options Menu Dropdown: in front, unclipped and scaled down (MOBILE ONLY) */
    #topic-image-picker-modal .topic-template-card {
        overflow: visible !important;
        position: relative !important;
    }

    #topic-image-picker-modal .topic-template-card.menu-open,
    #topic-image-picker-modal .topic-template-card:has(.topic-options-menu:not(.hidden)) {
        z-index: 10080 !important;
        overflow: visible !important;
    }

    #topic-image-picker-modal .topic-options-menu {
        position: absolute !important;
        top: 24px !important;
        right: 0 !important;
        min-width: 140px !important;
        max-width: 165px !important;
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.15) !important;
        z-index: 10090 !important;
        padding: 4px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    #topic-image-picker-modal .topic-options-menu.hidden {
        display: none !important;
    }

    #topic-image-picker-modal .topic-options-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 6px 9px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        border-radius: 7px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        text-align: left !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
    }

    #topic-image-picker-modal .topic-options-item:hover {
        background-color: #f1f5f9 !important;
    }

    #topic-image-picker-modal .topic-options-item.danger {
        color: #dc2626 !important;
    }

    #topic-image-picker-modal .topic-options-item i {
        font-size: 10.5px !important;
        width: 14px !important;
        flex-shrink: 0 !important;
        text-align: center !important;
    }

    /* Footer & Action Buttons: scaled down and cleanly fixed on mobile */
    #topic-image-picker-modal > div > div:last-child {
        padding: 8px 14px !important;
        background-color: #f8fafc !important;
        border-top: 1px solid #e2e8f0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    #topic-image-picker-modal button[onclick*="closeTopicEditorImagePicker"],
    #topic-image-picker-modal button[onclick*="switchTopicPickerView('active')"] {
        height: 31px !important;
        min-height: 31px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #334155 !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
        cursor: pointer !important;
    }

    #topic-image-picker-modal button[onclick*="applyTopicTemplateSelection"] {
        height: 31px !important;
        min-height: 31px !important;
        min-width: 110px !important;
        padding: 0 16px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        background-color: #15803d !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
        cursor: pointer !important;
    }

    #topic-image-picker-modal button[onclick*="applyTopicTemplateSelection"]:active {
        background-color: #166534 !important;
        transform: scale(0.97) !important;
    }

    #topic-image-picker-modal button[onclick*="closeTopicEditorImagePicker"]:active {
        background-color: #f1f5f9 !important;
        transform: scale(0.97) !important;
    }

    #topic-image-picker-modal #topic-trash-restore-bulk-btn,
    #topic-image-picker-modal #topic-trash-delete-bulk-btn {
        height: 27px !important;
        min-height: 27px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        border-radius: 7px !important;
        gap: 4px !important;
    }

    /* ─── Quiz Storage: Filter Chips, Search, Folder & Card Panels Mobile Scaling ─── */
    #quiz-storage-filter-chips,
    #library-modal-filter-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 5px !important;
        padding-top: 4px !important;
        padding-bottom: 2px !important;
        margin-top: 2px !important;
    }

    .quiz-storage-filter-chip {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1.25 !important;
        padding: 3px 8.5px !important;
        font-size: 10.5px !important;
        gap: 4px !important;
    }

    .quiz-storage-filter-chip i {
        font-size: 9.5px !important;
    }

    /* Unselected filter chip icons: black fade (not colored) */
    .quiz-storage-filter-chip:not(.bg-\[\#15803d\]) i,
    .quiz-storage-filter-chip.bg-slate-100 i {
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    }

    /* Selected filter chip icons: white */
    .quiz-storage-filter-chip.bg-\[\#15803d\] i {
        color: #ffffff !important;
    }

    #storage-filter-my-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
    }

    #subject-material-storage-view .quiz-storage-card {
        padding: 10px 12px !important;
        border-radius: 12px !important;
    }

    /* ─── Quiz Creator Mobile Responsive: 3-Line Header, Scaled Buttons & Panels, No Squeezing, Visible Dragger ─── */
    header#admin-header {
        height: auto !important;
        min-height: 0 !important;
        border-bottom: 2px solid #15803d !important;
    }

    header#admin-header nav.top-nav {
        height: 24px !important;
        min-height: 24px !important;
        padding: 0 12px !important;
    }

    header#admin-header .admin-topbar__inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 12px !important;
        border-bottom: none !important;
    }

    header#admin-header .admin-topbar__brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
        height: 100% !important;
        padding: 0 !important;
        border-bottom: none !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    header#admin-header .admin-topbar__brand #logo-container img {
        width: 24px !important;
        height: 24px !important;
    }

    header#admin-header #header-brand-title {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        max-width: none !important;
        overflow: visible !important;
        white-space: nowrap !important;
    }

    header#admin-header #header-actions-mobile-wrap,
    header#admin-header .admin-topbar__inner > .flex.items-center.ml-auto {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        height: 100% !important;
        padding: 0 !important;
        margin-left: auto !important;
        gap: 6px !important;
        background-color: transparent !important;
        border-bottom: none !important;
        flex-shrink: 0 !important;
    }

    header#admin-header button[onclick*="openStudentQuizPreviewModal"] {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        color: #0f172a !important;
        gap: 4.5px !important;
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    header#admin-header button[onclick*="openStudentQuizPreviewModal"] i {
        font-size: 10.5px !important;
        color: #0f172a !important;
    }

    header#admin-header #export-quiz-dropdown-wrap {
        height: 28px !important;
        min-height: 28px !important;
        border-radius: 8px !important;
        overflow: visible !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    header#admin-header #save-quiz-main-btn {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        background-color: #15803d !important;
        color: #ffffff !important;
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        border-radius: 8px 0 0 8px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
        gap: 4px !important;
        display: inline-flex !important;
        align-items: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    header#admin-header #save-quiz-main-btn i {
        font-size: 10px !important;
        color: #ffffff !important;
    }

    header#admin-header #save-quiz-dropdown-trigger {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 7px !important;
        background-color: #15803d !important;
        color: #ffffff !important;
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
        border-radius: 0 8px 8px 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    header#admin-header #save-quiz-dropdown-trigger i {
        font-size: 9px !important;
        color: #ffffff !important;
    }

    /* Scaled Down Chevron Dropdown Menu (Mobile Only) */
    #export-quiz-dropdown-menu {
        width: 175px !important;
        min-width: 175px !important;
        max-width: calc(100vw - 20px) !important;
        padding: 4px !important;
        border-radius: 12px !important;
        margin-top: 5px !important;
        right: 0 !important;
        top: 100% !important;
        z-index: 300 !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    }

    #export-quiz-dropdown-menu button {
        padding: 5px 8px !important;
        min-height: 26px !important;
        border-radius: 7px !important;
        gap: 6px !important;
    }

    #export-quiz-dropdown-menu button i {
        font-size: 10px !important;
        width: 13px !important;
        text-align: center !important;
    }

    #export-quiz-dropdown-menu button span {
        font-size: 10.5px !important;
        font-weight: 600 !important;
    }

    #export-quiz-dropdown-menu div[id$="-divider"] {
        margin: 2px 0 !important;
    }

    /* Only the standalone quiz editor needs clearance for its fixed header. */
    body:has(#quiz-action-bar) main,
    body:has(#quiz-action-bar) main.flex-1 {
        margin-top: 0 !important;
        padding-top: 70px !important;
    }

    body:has(#admin-header) main > div,
    body:has(#admin-header) main.flex-1 > div,
    body:has(#quiz-action-bar) main > div,
    body:has(#quiz-action-bar) main.flex-1 > div,
    body:has(#admin-header) main .space-y-3\.5,
    body:has(#admin-header) main.flex-1 .space-y-3\.5,
    body:has(#quiz-action-bar) main .space-y-3\.5,
    body:has(#quiz-action-bar) main.flex-1 .space-y-3\.5 {
        gap: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body:has(#quiz-action-bar) main .space-y-3\.5 > *,
    body:has(#quiz-action-bar) main .space-y-3\.5 > :not([hidden]) ~ :not([hidden]),
    main .space-y-3\.5 > *,
    main .space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Hide empty banner images list so it leaves zero gap between selection panel and question panels */
    #quiz-banner-images-list:empty {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        border: none !important;
    }

    /* Selection Panel: Sticking to Nav Bar (0 Gap), Full Width, Scaled Down */
    #quiz-action-bar {
        width: calc(100% + 3rem) !important;
        max-width: calc(100% + 3rem) !important;
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
        min-height: auto !important;
        padding: 6px 12px 8px 12px !important;
        overflow: visible !important;
        overflow-x: visible !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px 6px !important;
        position: sticky !important;
        top: 70px !important;
        z-index: 240 !important;
        background-color: #ffffff !important;
    }

    #quiz-action-bar::-webkit-scrollbar {
        display: none !important;
    }

    /* Action buttons: 2-column grid layout on mobile */
    #quiz-action-bar > div:first-child {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
        gap: 5px 10px !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        flex-shrink: 1 !important;
    }

    #quiz-action-bar > div:first-child > div.shrink-0 {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Buttons inside selection pane: No highlight / box, 2 columns, cleanly scaled */
    #quiz-action-bar button,
    #quiz-action-bar .shrink-0 button,
    #quiz-action-bar > div:first-child button {
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 2px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 0 !important;
        gap: 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        color: rgba(0, 0, 0, 0.65) !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    #quiz-action-bar button:hover,
    #quiz-action-bar button:active,
    #quiz-action-bar button:focus,
    #quiz-action-bar .shrink-0 button:hover,
    #quiz-action-bar > div:first-child button:hover {
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        color: #000000 !important;
    }

    #quiz-action-bar button i,
    #quiz-action-bar .shrink-0 button i,
    #quiz-action-bar > div:first-child button i {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }

    #quiz-action-bar button i.fa-bolt {
        color: #FFD000 !important;
    }

    #quiz-action-bar button i:not(.fa-bolt) {
        color: rgba(0, 0, 0, 0.55) !important;
    }

    #quiz-action-bar button:hover i:not(.fa-bolt) {
        color: #000000 !important;
    }

    #quiz-action-bar span,
    #quiz-action-bar button span {
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #quiz-action-bar > div:last-child {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100% !important;
        flex: 1 1 100% !important;
        padding: 4px 2px 2px 2px !important;
        gap: 8px !important;
        border-top: 1px dashed #e2e8f0 !important;
        margin-top: 2px !important;
    }

    #quiz-action-bar #quiz-stat-questions,
    #quiz-action-bar #quiz-stat-points,
    #quiz-action-bar > div:last-child span {
        font-size: 11px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        color: #000000 !important;
    }

    #quiz-action-bar #quiz-stat-questions i {
        color: #000000 !important;
        font-size: 11px !important;
    }

    #quiz-action-bar #quiz-stat-points i.fa-star {
        color: #FFD000 !important;
        font-size: 11px !important;
    }

    #quiz-action-bar > div:last-child span.opacity-40 {
        opacity: 0.4 !important;
        color: #000000 !important;
    }

    /* Question & Add Image Panels Full Width & No Radius, Closed Gap (Mobile Only) */
    #quiz-banner-images-list,
    #active-question-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #quiz-banner-images-list > div,
    .quiz-general-image-panel,
    #active-question-card-inner,
    .active-question-card,
    #active-question-container > div,
    .quiz-empty-question-state {
        width: calc(100% + 3rem) !important;
        max-width: calc(100% + 3rem) !important;
        margin-left: -1.5rem !important;
        margin-right: -1.5rem !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        padding: 14px 12px !important;
    }

    /* Add Image Panel Mobile Constraints */
    #quiz-banner-images-list > div > div,
    .quiz-general-image-panel > div,
    #quiz-banner-images-list .quiz-general-image-box,
    .quiz-general-image-panel .quiz-general-image-box {
        max-width: 100% !important;
        width: 100% !important;
    }

    #quiz-banner-images-list .quiz-general-image-box,
    .quiz-general-image-panel .quiz-general-image-box {
        height: 240px !important;
        border-radius: 8px !important;
    }

    #quiz-banner-images-list input[type="text"],
    .quiz-general-image-panel input[type="text"] {
        font-size: 13px !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        width: 100% !important;
    }

    #quiz-banner-images-list .group\/bannerimg > div,
    .quiz-general-image-panel .group\/bannerimg > div {
        opacity: 1 !important;
    }

    /* Empty Question State Panel: Closed Gap, full width, borderless top */
    #active-question-container .quiz-empty-question-state,
    #active-question-container > .active-question-card:not(#active-question-card-inner),
    .quiz-empty-question-state {
        flex: 1 1 auto !important;
        min-height: clamp(230px, 38vh, 480px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 28px 16px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    #active-question-container .quiz-empty-question-state i.fa-list-check,
    #active-question-container > .active-question-card:not(#active-question-card-inner) i.fa-list-check {
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }

    #active-question-container .quiz-empty-question-state p.text-sm,
    #active-question-container > .active-question-card:not(#active-question-card-inner) p.text-sm {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #000000 !important;
    }

    #active-question-container .quiz-empty-question-state p.text-xs,
    #active-question-container > .active-question-card:not(#active-question-card-inner) p.text-xs {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    /* Active Question Card (Main Panel): Closed Gap to selection panel */
    #active-question-card-inner {
        flex: 0 0 auto !important;
        height: auto !important;
        margin-top: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
    }

    #active-question-card-inner .border-b.border-slate-200.pb-3 {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding-bottom: 8px !important;
    }

    #active-question-card-inner span.bg-\[\#15803d\] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
    }

    #active-question-card-inner .sigma-select-wrapper {
        min-width: 0 !important;
        max-width: calc(100vw - 80px) !important;
        flex: 1 1 auto !important;
    }

    #active-question-card-inner .sigma-select {
        height: 32px !important;
        min-height: 32px !important;
        font-size: 11.5px !important;
        padding-left: 8px !important;
        padding-right: 24px !important;
        border-radius: 8px !important;
    }

    #active-question-card-inner .sigma-select-icon {
        font-size: 10px !important;
        right: 8px !important;
    }

    #active-question-card-inner button[onclick*="toggleAnswerKey"] {
        height: 28px !important;
        min-height: 28px !important;
        min-width: 0 !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        border-radius: 7px !important;
        gap: 4px !important;
    }

    #active-question-card-inner button[onclick*="toggleAnswerKey"] i {
        font-size: 10px !important;
    }

    #active-question-card-inner [id^="active-question-points-badge-"],
    #active-question-card-inner [id^="question-pts-input-"] {
        font-size: 11px !important;
    }

    #active-question-card-inner div:has(> [id^="active-question-points-badge-"]),
    #active-question-card-inner div:has(> [id^="question-pts-input-"]) {
        height: 28px !important;
        width: auto !important;
        padding: 0 6px !important;
    }

    #active-question-card-inner button[onclick*="toggleQuestionShuffleChoices"],
    #active-question-card-inner button[onclick*="duplicateQuestion"],
    #active-question-card-inner button[onclick*="removeQuestion"],
    #active-question-card-inner button[onclick*="question-image-file"] {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
    }

    #active-question-card-inner .sigma-one-border-textarea {
        font-size: 13.5px !important;
        padding: 6px 8px !important;
        min-height: 34px !important;
    }

    #active-question-card-inner .sigma-underline-item-textarea {
        font-size: 12.5px !important;
        min-height: 22px !important;
    }

    /* Matching Type & Enumeration Answer Key Mobile Full-Width Textboxes */
    #active-question-card-inner .group\/pair,
    #active-question-card-inner .group\/enum-row {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #active-question-card-inner .group\/pair > .order-3,
    #active-question-card-inner .group\/enum-row > .order-2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    #active-question-card-inner .group\/pair textarea,
    #active-question-card-inner .group\/enum-row textarea {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
    }

    #active-question-card-inner button[onclick*="addChoice"] {
        min-height: 36px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* Question Deck: Scaled Down Cards & Visible Dragger Handle on Mobile */
    #questions-sidebar-wrap {
        min-width: 0 !important;
        max-width: 100% !important;
        position: static !important;
        height: auto !important;
        margin-top: 14px !important;
    }

    #questions-sidebar-wrap h3 {
        font-size: 11.5px !important;
    }

    #questions-sidebar-wrap #deck-shuffle-btn {
        height: 26px !important;
        padding: 0 8px !important;
        font-size: 10.5px !important;
        border-radius: 7px !important;
    }

    #questions-sidebar-wrap #sidebar-question-count-badge {
        font-size: 11px !important;
    }

    .deck-thumbnail-card {
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

    .deck-thumbnail-card .deck-drag-handle {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        background-color: #f1f5f9 !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        border-radius: 6px !important;
        margin-left: 0 !important;
        margin-right: 3px !important;
        touch-action: none !important;
    }

    .deck-thumbnail-card .deck-drag-handle i {
        font-size: 11px !important;
        color: #475569 !important;
        opacity: 1 !important;
    }

    .deck-thumbnail-card span.bg-\[\#15803d\],
    .deck-thumbnail-card span.bg-\[\#FFD000\] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        font-size: 9.5px !important;
        border-radius: 4px !important;
    }

    .deck-thumbnail-card [id^="thumb-type-"] {
        font-size: 11px !important;
    }

    .deck-thumbnail-card [id^="thumb-points-wrap-"] {
        font-size: 10px !important;
    }

    .deck-thumbnail-card p {
        font-size: 10px !important;
    }

    .deck-editing-card {
        padding: 6px 10px !important;
        border-radius: 10px !important;
    }

    .deck-editing-card span {
        font-size: 11px !important;
    }

    #questions-thumbnails-container > .h-64 {
        height: 120px !important;
        min-height: 120px !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }

    #questions-thumbnails-container > .h-64 .w-12.h-12 {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }

    #questions-thumbnails-container > .h-64 i {
        font-size: 13px !important;
    }

    #questions-thumbnails-container > .h-64 p.text-xs {
        font-size: 11.5px !important;
        margin-bottom: 2px !important;
    }

    #questions-thumbnails-container > .h-64 p.text-\[11px\] {
        font-size: 10px !important;
    }

    /* ─── Mobile Quiz Workstations (Preview Mode, View Mode, Actual Student Quiz) ─── */
    /* 1. Hide Fixed Exit Button (✕) on Mobile */
    #student-preview-modal > button[title*="Exit"],
    #universal-quiz-preview-modal > button[title*="Exit"],
    #sigma-quiz-form-modal > #sigma-quiz-exit-btn,
    #sigma-quiz-form-modal > button[title*="Exit"] {
        display: none !important;
    }

    /* 2. Show Back Button Chevron in Header (Mobile Only) */
    #student-preview-modal .quiz-preview-mobile-back-btn,
    #universal-quiz-preview-modal .quiz-preview-mobile-back-btn,
    #sigma-quiz-form-modal .quiz-preview-mobile-back-btn {
        display: inline-flex !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        margin-right: 2px !important;
    }

    #student-preview-modal .quiz-preview-mobile-back-btn i,
    #universal-quiz-preview-modal .quiz-preview-mobile-back-btn i,
    #sigma-quiz-form-modal .quiz-preview-mobile-back-btn i {
        font-size: 13px !important;
        color: #0f172a !important;
    }

    /* 3. Modal Shell & Panel Full Screen on Mobile */
    #student-preview-modal .sigma-modal-shell,
    #universal-quiz-preview-modal .sigma-modal-shell,
    #sigma-quiz-form-modal .sigma-modal-shell {
        padding: 0 !important;
        max-width: 100vw !important;
        width: 100vw !important;
    }

    #student-preview-modal .sigma-modal-panel,
    #universal-quiz-preview-modal .sigma-modal-panel,
    #sigma-quiz-form-modal .sigma-modal-panel {
        border-radius: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100vh !important;
        height: 100vh !important;
    }

    /* 4. Scaled Header */
    #student-preview-modal .border-b.sticky.top-0 > div:first-child,
    #universal-quiz-preview-modal .border-b.border-slate-100:first-child,
    #sigma-quiz-form-modal .border-b.sticky.top-0 > div:first-child {
        padding: 10px 12px !important;
        gap: 6px 8px !important;
        align-items: center !important;
    }

    #student-preview-quiz-title,
    #uqp-title,
    #sigma-quiz-form-modal .border-b.sticky.top-0 h1 {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* Scaled Badges (Preview Mode, Timer) */
    #student-preview-modal .rounded-full.bg-slate-100,
    #universal-quiz-preview-modal #uqp-mode-badge,
    #sigma-quiz-form-modal #sigma-quiz-timer-badge,
    #sigma-quiz-form-modal .rounded-full.bg-slate-100 {
        padding: 2.5px 7px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        gap: 3.5px !important;
        border-radius: 9999px !important;
    }

    #student-preview-modal .rounded-full.bg-slate-100 i,
    #universal-quiz-preview-modal #uqp-mode-badge i,
    #sigma-quiz-form-modal #sigma-quiz-timer-badge i,
    #sigma-quiz-form-modal .rounded-full.bg-slate-100 i {
        font-size: 9px !important;
    }

    /* 5. Scaled Subheader (Points counter & Question Pills) */
    #student-preview-modal .border-b.bg-white.z-10,
    #universal-quiz-preview-modal .border-b.bg-white:not(:first-child),
    #sigma-quiz-form-modal .border-b.bg-white.z-10 {
        padding: 6px 12px !important;
        gap: 6px !important;
    }

    #student-preview-counter,
    #uqp-counter,
    #sigma-quiz-form-modal .border-b.bg-white.z-10 > div:first-child {
        font-size: 10.5px !important;
        font-weight: 600 !important;
    }

    #preview-question-pills-strip,
    #uqp-pills-strip,
    #sigma-quiz-form-modal .border-b.bg-white.z-10 .flex.items-center.gap-1\.5 {
        gap: 3px !important;
    }

    #preview-question-pills-strip button,
    #uqp-pills-strip button,
    #sigma-quiz-form-modal .border-b.bg-white.z-10 button {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        padding: 0 !important;
    }

    /* 6. Assessment Body & Question Content Scaling */
    #student-preview-modal .sigma-modal-panel > .flex-1,
    #universal-quiz-preview-modal #uqp-scroll,
    #sigma-quiz-form-modal .sigma-modal-panel > .flex-1 {
        padding: 10px 12px !important;
    }

    #student-preview-questions-list,
    #uqp-body,
    #sigma-quiz-form-modal .sigma-modal-panel > .flex-1 > div {
        max-width: 100% !important;
        width: 100% !important;
    }

    #student-preview-questions-list .space-y-6,
    #uqp-body .space-y-6,
    #sigma-quiz-form-modal .space-y-6 {
        gap: 8px !important;
    }

    /* Question Number Circle & Prompt */
    #student-preview-questions-list .w-8.h-8.rounded-full,
    #uqp-body .w-8.h-8.rounded-full,
    #sigma-quiz-form-modal .w-8.h-8.rounded-full {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
    }

    #student-preview-questions-list h3,
    #uqp-body h3,
    #sigma-quiz-form-modal h3 {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
    }

    /* Choices Grid & Cards */
    #student-preview-questions-list .grid,
    #uqp-body .grid,
    #sigma-quiz-form-modal .grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding-top: 4px !important;
    }

    #student-preview-questions-list .grid > div,
    #uqp-body .grid > div,
    #sigma-quiz-form-modal .grid > div {
        padding: 8px 10px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
        gap: 8px !important;
    }

    #student-preview-questions-list .grid > div span:first-child,
    #uqp-body .grid > div span:first-child,
    #sigma-quiz-form-modal .grid > div span:first-child {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        border-radius: 6px !important;
    }

    #student-preview-questions-list .grid > div span.text-sm,
    #uqp-body .grid > div span.text-sm,
    #sigma-quiz-form-modal .grid > div span.text-sm {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* Identification input */
    #student-preview-questions-list input[type="text"],
    #uqp-body input[type="text"],
    #sigma-quiz-form-modal input[type="text"] {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    /* Textarea / Essay */
    #student-preview-questions-list textarea,
    #uqp-body textarea,
    #sigma-quiz-form-modal textarea {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        min-height: 80px !important;
    }

    /* 7. Sticky Footer Navigation */
    #student-preview-modal-footer,
    #universal-quiz-preview-modal .sigma-modal-footer,
    #sigma-quiz-form-modal .sigma-modal-footer {
        padding: 8px 12px !important;
        min-height: 48px !important;
    }

    #preview-footer-prev-btn,
    #preview-footer-next-btn,
    #uqp-prev-btn,
    #uqp-next-btn,
    #sigma-quiz-prev-btn,
    #sigma-quiz-next-btn,
    #sigma-quiz-submit-btn,
    #sigma-quiz-done-btn,
    #student-preview-modal-footer button,
    #universal-quiz-preview-modal .sigma-modal-footer button,
    #sigma-quiz-form-modal .sigma-modal-footer button {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        gap: 5px !important;
    }

    #preview-footer-prev-btn i,
    #preview-footer-next-btn i,
    #uqp-prev-btn i,
    #uqp-next-btn i,
    #student-preview-modal-footer button i,
    #universal-quiz-preview-modal .sigma-modal-footer button i,
    #sigma-quiz-form-modal .sigma-modal-footer button i {
        font-size: 9.5px !important;
    }

    #preview-footer-question-counter,
    #universal-quiz-preview-modal .sigma-modal-footer .text-sm,
    #sigma-quiz-form-modal .sigma-modal-footer .text-sm {
        font-size: 11px !important;
        font-weight: 600 !important;
    }
}

/* ==========================================================================
   IMPORT QUESTIONS MODAL MOBILE FULL SCREEN & SMALL SCALE (ONLY IN MOBILE)
   ========================================================================== */
@media (max-width: 639.98px) {
    #import-questions-modal {
        padding: 0 !important;
        margin: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    #import-questions-modal .curriculum-release-panel-fixed,
    #import-questions-modal > div {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Delete exit icon button on mobile */
    #import-questions-modal .fa-xmark,
    #import-questions-modal button:has(.fa-xmark) {
        display: none !important;
    }

    /* Small Scale Modal Header */
    #import-questions-modal .border-b:first-child {
        padding: 10px 14px !important;
    }
    #import-questions-modal .border-b:first-child .w-10,
    #import-questions-modal .border-b:first-child .w-8 {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }
    #import-questions-modal .border-b:first-child i {
        font-size: 13px !important;
    }
    #import-questions-modal .border-b:first-child h2 {
        font-size: 15px !important;
    }
    #import-questions-modal .border-b:first-child p,
    #ai-generator-modal .border-b:first-child p,
    #ai-generator-borrow-view .border-b:first-child p,
    #universal-quiz-library-modal .border-b:first-child p {
        font-size: 10px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        display: none !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Small Scale Modal Body */
    #import-questions-modal .overflow-y-auto.flex-1 {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    /* Small Scale Starter Templates Panel */
    #import-starter-templates-panel {
        padding: 8px 10px !important;
        border-radius: 12px !important;
        gap: 6px !important;
        margin-bottom: 6px !important;
    }
    #import-starter-templates-panel span.uppercase {
        font-size: 9.5px !important;
    }
    #import-starter-templates-panel button {
        padding: 3px 7px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
        height: 26px !important;
    }

    /* Shared question upload surface for Generate and Import. */
    .sigma-question-upload {
        padding: 12px 8px !important;
        border-radius: 8px !important;
        min-height: 104px;
        gap: 6px !important;
    }
    .sigma-question-upload .sigma-question-upload-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
    }
    .sigma-question-upload-icon i { font-size: 14px !important; }
    .sigma-question-upload-title { font-size: 11.5px !important; line-height: 16px !important; }
    .sigma-question-upload-meta { font-size: 9.5px !important; line-height: 14px !important; }
    .sigma-question-file { padding: 8px 10px !important; }
    .sigma-question-file > div:first-child > div:first-child { width: 36px !important; }
    .sigma-question-file [id$="-file-icon-wrap"] { width: 28px !important; height: 28px !important; }
    .sigma-question-file [id$="-file-icon"] { font-size: 12px !important; }
    .sigma-question-file [id$="-file-badge"] { font-size: 8px !important; }
    .sigma-question-file .sigma-file-panel-title { font-size: 12px !important; line-height: 16px !important; }
    .sigma-question-file .sigma-file-panel-meta { font-size: 9.5px !important; line-height: 14px !important; }

    /* Small Scale Paste Textarea (Stretch above footer buttons) */
    #import-paste-section {
        flex: 1 1 0% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    #import-paste-section span.font-semibold {
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }
    #import-paste-section p {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        flex-shrink: 0 !important;
    }
    #import-paste-textarea {
        flex: 1 1 0% !important;
        width: 100% !important;
        padding: 8px 10px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        font-family: 'Inter', sans-serif !important;
        border-radius: 10px !important;
        min-height: 120px !important;
        max-height: none !important;
        resize: none !important;
    }
    #import-paste-textarea[readonly],
    #import-paste-textarea.is-locked {
        background-color: #f1f5f9 !important;
        color: #334155 !important;
        cursor: not-allowed !important;
        border-color: #cbd5e1 !important;
    }
    #import-paste-textarea::placeholder,
    #import-paste-textarea::-webkit-input-placeholder,
    #import-paste-textarea::-moz-placeholder,
    #import-paste-textarea:-ms-input-placeholder {
        font-size: 9.5px !important;
        line-height: 1.4 !important;
        font-family: 'Inter', sans-serif !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
        opacity: 1 !important;
    }

    /* Small Scale Footer */
    #import-questions-modal .border-t {
        padding: 10px 14px !important;
    }
    #import-questions-modal .border-t button {
        height: 38px !important;
        font-size: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        border-radius: 10px !important;
    }

    /* AI Generator & Material Search Bar Mobile Optimization */
    #ai-material-search-input {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding-right: 8px !important;
        font-size: 11.5px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    #ai-material-search-input::placeholder {
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    #ai-material-search-btn {
        height: 32px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
    }

    /* Quiz Storage & Library Search Containers and Inputs Mobile Sizing & Anti-Overlap */
    #storage-picker-search-container,
    #library-modal-search-container {
        gap: 6px !important;
        padding-left: 8px !important;
        padding-right: 6px !important;
    }

    #storage-picker-search-input,
    #library-modal-search-input {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding-left: 4px !important;
        padding-right: 12px !important;
        margin-right: 4px !important;
        font-size: 11px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    #storage-picker-search-input::placeholder,
    #library-modal-search-input::placeholder {
        font-size: 10.5px !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        color: var(--sigma-black-fade, rgba(0, 0, 0, 0.45)) !important;
    }

    #storage-picker-search-btn,
    #library-modal-search-btn {
        height: 28px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
        box-shadow: none !important;
        margin-left: 2px !important;
    }

    /* AI Generator Counter Box - Compact width */
    #ai-gen-count-wrapper {
        width: 135px !important;
        max-width: 145px !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
    }

    /* ==========================================================================
       AI GENERATOR MODAL MOBILE FULL SCREEN & SMALL SCALE (ONLY IN MOBILE)
       ========================================================================== */
    #ai-generator-modal {
        padding: 0 !important;
        margin: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    #ai-generator-modal .curriculum-release-panel-fixed,
    #ai-generator-modal > div {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
    }

    /* Delete exit icon button on mobile */
    #ai-generator-modal .fa-xmark,
    #ai-generator-modal button:has(.fa-xmark) {
        display: none !important;
    }

    /* Small Scale Modal Header */
    #ai-generator-modal .border-b:first-child {
        padding: 10px 14px !important;
    }
    #ai-generator-modal .border-b:first-child .w-10,
    #ai-generator-modal .border-b:first-child .w-8 {
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
    }
    #ai-generator-modal .border-b:first-child i {
        font-size: 13px !important;
    }
    #ai-generator-modal .border-b:first-child h2 {
        font-size: 15px !important;
    }
    #ai-generator-modal .border-b:first-child p {
        font-size: 10px !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
    }

    /* Small Scale Modal Body */
    #ai-generator-modal .overflow-y-auto.flex-1 {
        padding: 10px 12px !important;
        gap: 8px !important;
    }


    /* Small Scale Borrow Panel */
    #ai-borrow-trigger-btn {
        padding: 8px 10px !important;
        border-radius: 12px !important;
    }
    #ai-borrow-trigger-btn .w-8,
    #ai-borrow-trigger-btn .w-10 {
        width: 28px !important;
        height: 28px !important;
        border-radius: 8px !important;
    }
    #ai-borrow-btn-label {
        font-size: 11px !important;
    }
    #ai-borrow-btn-sublabel {
        font-size: 9.5px !important;
    }

    /* Small Scale Description Textarea */
    #ai-gen-topic {
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        min-height: 70px !important;
        max-height: 90px !important;
        resize: none !important;
    }
    #ai-gen-topic[readonly],
    #ai-gen-topic.is-locked {
        background-color: #f1f5f9 !important;
        color: #334155 !important;
        cursor: not-allowed !important;
        border-color: #cbd5e1 !important;
    }

    /* Engine & Type Dropdowns Mobile Size */
    #ai-gen-engine-btn,
    #ai-gen-type-btn {
        height: 38px !important;
        border-radius: 10px !important;
        font-size: 11px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Difficulty level buttons */
    #ai-generator-modal input[name="ai-difficulty"] + span,
    #ai-generator-modal label:has(input[name="ai-difficulty"]) {
        font-size: 11px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        border-radius: 10px !important;
    }

    /* Small Scale Footer */
    #ai-generator-modal .border-t {
        padding: 10px 14px !important;
    }
    #ai-generator-modal .border-t button {
        height: 38px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }

    /* ==========================================================================
       RELEASE TOPICS & MATERIALS MODAL FULL SCREEN & SCALED MOBILE STYLING (ONLY IN MOBILE)
       ========================================================================== */
    #teacher-release-assessments-overlay,
    #teacher-topics-materials-picker-overlay,
    #teacher-assessments-picker-overlay,
    #teacher-release-learning-materials-overlay,
    #teacher-release-topics-overlay,
    #teacher-release-category-overlay,
    #teacher-topic-picker-overlay,
    #teacher-learning-picker-overlay,
    #teacher-topic-schedule-overlay {
        padding: 0 !important;
        margin: 0 !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        box-sizing: border-box !important;
    }

    #teacher-release-assessments-overlay .curriculum-release-panel-fixed,
    #teacher-release-assessments-overlay .curriculum-hub-panel,
    #teacher-topics-materials-picker-overlay .curriculum-release-panel-fixed,
    #teacher-topics-materials-picker-overlay .curriculum-hub-panel,
    #teacher-topics-materials-picker-overlay .curriculum-picker-panel-fixed,
    #teacher-assessments-picker-overlay .curriculum-release-panel-fixed,
    #teacher-assessments-picker-overlay .curriculum-hub-panel,
    #teacher-assessments-picker-overlay .curriculum-picker-panel-fixed,
    #teacher-release-learning-materials-overlay .curriculum-release-panel-fixed,
    #teacher-release-learning-materials-overlay .curriculum-hub-panel,
    #teacher-release-topics-overlay .curriculum-release-panel-fixed,
    #teacher-release-topics-overlay .curriculum-hub-panel,
    #teacher-release-category-overlay .curriculum-release-panel-fixed,
    #teacher-release-category-overlay .curriculum-hub-panel,
    #teacher-topic-picker-overlay .curriculum-release-panel-fixed,
    #teacher-topic-picker-overlay .curriculum-hub-panel,
    #teacher-learning-picker-overlay .curriculum-release-panel-fixed,
    #teacher-learning-picker-overlay .curriculum-hub-panel,
    #teacher-topic-schedule-overlay .curriculum-release-panel-fixed,
    #teacher-topic-schedule-overlay .curriculum-hub-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Small Scale Modal Header */
    #teacher-topics-materials-picker-overlay .border-b:first-child,
    #teacher-assessments-picker-overlay .border-b:first-child,
    #teacher-topic-picker-overlay .border-b:first-child,
    #teacher-learning-picker-overlay .border-b:first-child,
    #teacher-release-assessments-overlay .border-b:first-child,
    #teacher-release-topics-overlay .border-b:first-child,
    #teacher-release-learning-materials-overlay .border-b:first-child,
    #teacher-topic-schedule-overlay .border-b:first-child {
        padding: 10px 14px !important;
    }

    /* Header Back Button: Clean Chevron Icon, No Square Panel Button */
    #teacher-topics-materials-picker-overlay .border-b:first-child button[title="Back"],
    #teacher-assessments-picker-overlay .border-b:first-child button[title="Back"],
    #teacher-topic-picker-overlay .border-b:first-child button[title="Back"],
    #teacher-learning-picker-overlay .border-b:first-child button[title="Back"],
    #teacher-topic-schedule-overlay .border-b:first-child button[title="Back"],
    .picker-header-back-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px 0 0 !important;
        color: #000000 !important;
        cursor: pointer !important;
    }
    .picker-header-back-btn:hover,
    .picker-header-back-btn:active,
    button[title="Back"]:hover,
    button[title="Back"]:active {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    .picker-header-back-btn i,
    button[title="Back"] i {
        font-size: 15px !important;
        color: #000000 !important;
    }

    .picker-footer-back-btn {
        display: none !important;
    }

    #teacher-topics-materials-picker-overlay h2,
    #teacher-assessments-picker-overlay h2,
    #teacher-topic-picker-overlay h2,
    #teacher-learning-picker-overlay h2,
    #teacher-release-assessments-overlay h2,
    #teacher-release-topics-overlay h2,
    #teacher-release-learning-materials-overlay h2,
    #teacher-topic-schedule-overlay h2 {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    #teacher-topics-materials-picker-overlay h2 + p,
    #teacher-assessments-picker-overlay h2 + p,
    #teacher-topic-picker-overlay h2 + p,
    #teacher-learning-picker-overlay h2 + p,
    #teacher-release-assessments-overlay h2 + p,
    #teacher-release-topics-overlay h2 + p,
    #teacher-release-learning-materials-overlay h2 + p,
    #teacher-topic-schedule-overlay h2 + p {
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin-top: 1px !important;
    }

    /* Small Scale Modal Body */
    #teacher-topics-materials-picker-overlay .overflow-y-auto.flex-1,
    #teacher-assessments-picker-overlay .overflow-y-auto.flex-1,
    #teacher-topic-picker-overlay .overflow-y-auto.flex-1,
    #teacher-learning-picker-overlay .overflow-y-auto.flex-1,
    #teacher-release-assessments-overlay .overflow-y-auto.flex-1,
    #teacher-release-topics-overlay .overflow-y-auto.flex-1,
    #teacher-release-learning-materials-overlay .overflow-y-auto.flex-1,
    #teacher-topic-schedule-overlay .overflow-y-auto.flex-1,
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    /* Small Scale Context Strip */
    #teacher-topics-materials-picker-overlay .release-context-strip,
    #teacher-assessments-picker-overlay .release-context-strip,
    #teacher-topic-picker-overlay .release-context-strip,
    #teacher-learning-picker-overlay .release-context-strip,
    #teacher-release-assessments-overlay .release-context-strip,
    #teacher-release-topics-overlay .release-context-strip,
    #teacher-release-learning-materials-overlay .release-context-strip,
    #teacher-topic-schedule-overlay .release-context-strip {
        padding: 5px 8px !important;
        font-size: 10px !important;
        gap: 3px 6px !important;
        border-radius: 8px !important;
    }

    /* Small Scale Quarter Filter Toggle */
    [data-release-quarter-toggle],
    #teacher-topics-materials-picker-overlay [data-release-quarter-toggle],
    #teacher-assessments-picker-overlay [data-release-quarter-toggle],
    #teacher-topic-picker-overlay [data-release-quarter-toggle],
    #teacher-learning-picker-overlay [data-release-quarter-toggle],
    #teacher-release-assessments-overlay [data-release-quarter-toggle],
    #teacher-release-topics-overlay [data-release-quarter-toggle],
    #teacher-release-learning-materials-overlay [data-release-quarter-toggle],
    #teacher-topic-schedule-overlay [data-release-quarter-toggle] {
        padding: 2px !important;
        border-radius: 8px !important;
        gap: 2px !important;
    }

    [data-release-quarter-toggle] button,
    #teacher-topics-materials-picker-overlay [data-release-quarter-toggle] button,
    #teacher-assessments-picker-overlay [data-release-quarter-toggle] button,
    #teacher-topic-picker-overlay [data-release-quarter-toggle] button,
    #teacher-learning-picker-overlay [data-release-quarter-toggle] button,
    #teacher-release-assessments-overlay [data-release-quarter-toggle] button,
    #teacher-release-topics-overlay [data-release-quarter-toggle] button,
    #teacher-release-learning-materials-overlay [data-release-quarter-toggle] button,
    #teacher-topic-schedule-overlay [data-release-quarter-toggle] button,
    button[onclick*="switchReleaseQuarter"] {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
        height: 22px !important;
        min-height: 22px !important;
        border-radius: 6px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    /* Category Filter Chips Horizontal Flow & Small Scale (No Overlapping) */
    #teacher-topics-materials-picker-overlay .border-b.border-black\/10,
    #teacher-assessments-picker-overlay .border-b.border-black\/10,
    #teacher-learning-picker-overlay .border-b.border-black\/10,
    #teacher-topics-materials-picker-overlay .flex.flex-wrap.items-center.justify-between.border-b,
    #teacher-assessments-picker-overlay .flex.flex-wrap.items-center.justify-between.border-b,
    #teacher-learning-picker-overlay .flex.flex-wrap.items-center.justify-between.border-b {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;
        padding-top: 1px !important;
        padding-bottom: 6px !important;
        margin-bottom: 2px !important;
    }

    #unified-picker-filter-chips,
    #assess-picker-filter-chips,
    #learning-picker-filter-chips {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 3px !important;
        padding: 1px 0 4px 0 !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }
    #unified-picker-filter-chips::-webkit-scrollbar,
    #assess-picker-filter-chips::-webkit-scrollbar,
    #learning-picker-filter-chips::-webkit-scrollbar {
        display: none !important;
    }

    #unified-picker-filter-chips .quiz-storage-filter-chip,
    #assess-picker-filter-chips .quiz-storage-filter-chip,
    #learning-picker-filter-chips .quiz-storage-filter-chip,
    #teacher-topics-materials-picker-overlay .quiz-storage-filter-chip,
    #teacher-assessments-picker-overlay .quiz-storage-filter-chip,
    #teacher-learning-picker-overlay .quiz-storage-filter-chip {
        padding: 2px 5.5px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        height: 22px !important;
        min-height: 22px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 9999px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 2.5px !important;
        line-height: 1.2 !important;
    }
    #unified-picker-filter-chips .quiz-storage-filter-chip i,
    #assess-picker-filter-chips .quiz-storage-filter-chip i,
    #learning-picker-filter-chips .quiz-storage-filter-chip i,
    #teacher-topics-materials-picker-overlay .quiz-storage-filter-chip i,
    #teacher-assessments-picker-overlay .quiz-storage-filter-chip i,
    #teacher-learning-picker-overlay .quiz-storage-filter-chip i {
        font-size: 9px !important;
    }

    /* Small Scale Select All / Deselect All Bar */
    #teacher-topics-materials-picker-overlay .border-b > .flex:last-child,
    #teacher-assessments-picker-overlay .border-b > .flex:last-child,
    #teacher-learning-picker-overlay .border-b > .flex:last-child,
    #teacher-topics-materials-picker-overlay .flex.items-center.gap-2.text-xs.font-semibold.shrink-0,
    #teacher-assessments-picker-overlay .flex.items-center.gap-1.text-xs.font-semibold.shrink-0,
    #teacher-learning-picker-overlay .flex.items-center.gap-1.text-xs.font-semibold.shrink-0 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-size: 10px !important;
        gap: 4px !important;
        margin-top: 3px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #teacher-topics-materials-picker-overlay button[onclick*="AllTopicsAndMaterialsPickerItems"],
    #teacher-topic-picker-overlay button[onclick*="toggleAllPickerTopics"],
    #teacher-topic-picker-overlay button[onclick*="AllPickerTopics"],
    #teacher-learning-picker-overlay button[onclick*="toggleAllPickerLearningMaterials"],
    #teacher-learning-picker-overlay button[onclick*="AllLearningMaterialsPickerItems"],
    #teacher-assessments-picker-overlay button[onclick*="toggleAllPickerAssessments"],
    #teacher-assessments-picker-overlay button[onclick*="AllAssessmentsPickerItems"] {
        font-size: 10px !important;
        padding: 1.5px 5px !important;
        line-height: 1.2 !important;
        border-radius: 6px !important;
    }

    /* Small Scale Topic Cards */
    #teacher-topics-materials-picker-overlay .topic-picker-card,
    #teacher-topic-picker-overlay .topic-picker-card,
    #teacher-assessments-picker-overlay .topic-picker-card {
        border-radius: 10px !important;
        margin-bottom: 6px !important;
    }

    #teacher-topics-materials-picker-overlay .topic-picker-header,
    #teacher-topic-picker-overlay .topic-picker-header {
        padding: 7px 9px !important;
        min-height: 32px !important;
    }

    #teacher-topics-materials-picker-overlay .topic-picker-header span.w-5,
    #teacher-topics-materials-picker-overlay .topic-picker-header span.h-5 {
        width: 18px !important;
        height: 18px !important;
        border-radius: 5px !important;
    }

    #teacher-topics-materials-picker-overlay .topic-picker-header i {
        font-size: 9px !important;
    }

    #teacher-topics-materials-picker-overlay .topic-picker-header span.text-xs,
    #teacher-topic-picker-overlay .topic-picker-header span.text-xs {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    #teacher-topics-materials-picker-overlay .topic-release-row span,
    #teacher-topic-picker-overlay .topic-release-row span {
        font-size: 10px !important;
    }

    #teacher-topics-materials-picker-overlay input[type="checkbox"],
    #teacher-topic-picker-overlay input[type="checkbox"],
    #teacher-learning-picker-overlay input[type="checkbox"],
    #teacher-assessments-picker-overlay input[type="checkbox"] {
        width: 15px !important;
        height: 15px !important;
    }

    /* Small Scale Sub-Item Rows */
    #teacher-topics-materials-picker-overlay .picker-item-row,
    #teacher-learning-picker-overlay .picker-item-row,
    #teacher-assessments-picker-overlay .picker-item-row {
        padding: 6px 9px !important;
        gap: 8px !important;
    }

    #teacher-topics-materials-picker-overlay .picker-item-row .w-7,
    #teacher-topics-materials-picker-overlay .picker-item-row .h-7,
    #teacher-learning-picker-overlay .picker-item-row .w-7,
    #teacher-learning-picker-overlay .picker-item-row .h-7,
    #teacher-assessments-picker-overlay .picker-item-row .w-7,
    #teacher-assessments-picker-overlay .picker-item-row .h-7 {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
    }

    #teacher-topics-materials-picker-overlay .picker-item-row i,
    #teacher-learning-picker-overlay .picker-item-row i,
    #teacher-assessments-picker-overlay .picker-item-row i {
        font-size: 10px !important;
    }

    #teacher-topics-materials-picker-overlay .picker-item-row h4,
    #teacher-learning-picker-overlay .picker-item-row h4,
    #teacher-assessments-picker-overlay .picker-item-row h4 {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    #teacher-topics-materials-picker-overlay .picker-item-row p,
    #teacher-learning-picker-overlay .picker-item-row p,
    #teacher-assessments-picker-overlay .picker-item-row p {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        margin-top: 1px !important;
    }

    /* Small Scale Modal Footer */
    #teacher-topics-materials-picker-overlay .curriculum-hub-panel > div:last-child,
    #teacher-assessments-picker-overlay .curriculum-hub-panel > div:last-child,
    #teacher-topic-picker-overlay .curriculum-hub-panel > div:last-child,
    #teacher-learning-picker-overlay .curriculum-hub-panel > div:last-child,
    #teacher-release-assessments-overlay .curriculum-hub-panel > div:last-child,
    #teacher-release-topics-overlay .curriculum-hub-panel > div:last-child,
    #teacher-release-learning-materials-overlay .curriculum-hub-panel > div:last-child,
    #teacher-topic-schedule-overlay .curriculum-hub-panel > div:last-child {
        padding: 10px 14px !important;
        background: #ffffff !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    #teacher-topics-materials-picker-overlay #topics-materials-picker-submit-btn,
    #teacher-assessments-picker-overlay #assessments-picker-submit-btn,
    #teacher-topic-picker-overlay #topic-picker-submit-btn,
    #teacher-learning-picker-overlay #learning-picker-submit-btn,
    #teacher-topics-materials-picker-overlay .sigma-btn,
    #teacher-assessments-picker-overlay .sigma-btn,
    #teacher-topic-picker-overlay .sigma-btn,
    #teacher-learning-picker-overlay .sigma-btn,
    #teacher-release-assessments-overlay .sigma-btn,
    #teacher-release-topics-overlay .sigma-btn,
    #teacher-release-learning-materials-overlay .sigma-btn,
    #teacher-topic-schedule-overlay .sigma-btn {
        height: 38px !important;
        min-height: 38px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
    }

    /* Release Topics & Materials Titles - No Ellipsis & Clean 3-Line Mobile Flow */
    #teacher-release-assessments-overlay .release-item-title-box p,
    #teacher-release-assessments-overlay .release-item-title-box span,
    #teacher-release-topics-overlay .topic-group-block span.text-sm,
    #teacher-release-topics-overlay .topic-group-block span.text-xs,
    #teacher-release-assessments-overlay .topic-group-block span.text-sm,
    #teacher-release-assessments-overlay .topic-group-block span.text-xs,
    #teacher-release-learning-materials-overlay .release-item-title-box p,
    #teacher-topics-materials-picker-overlay .topic-picker-card h4,
    #teacher-topics-materials-picker-overlay .topic-picker-card span,
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body span.truncate,
    #teacher-topic-schedule-overlay #teacher-schedule-dropdown-btn-label {
        text-overflow: clip !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Select Topics and Materials Header Button Mobile Alignment */
    #teacher-release-assessments-overlay button[onclick*="PickerModal"],
    #teacher-release-topics-overlay button[onclick*="PickerModal"],
    #teacher-release-learning-materials-overlay button[onclick*="PickerModal"] {
        text-align: left !important;
        white-space: nowrap !important;
    }

    /* Scaled Down Buttons & Rows for Mobile Screens */
    #teacher-release-assessments-overlay .release-item-row,
    #teacher-release-topics-overlay .release-item-row,
    #teacher-release-learning-materials-overlay .release-item-row {
        padding: 8px 10px !important;
    }

    .release-section-header-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .release-section-header-bar .release-section-subtitle {
        margin-left: 0 !important;
        text-align: left !important;
    }

    /* ==========================================================================
       SET SCHEDULE & SET DETAILS MODAL SCALED MOBILE STYLING (ONLY IN MOBILE)
       ========================================================================== */
    #teacher-topic-schedule-overlay .curriculum-hub-panel > div:last-child {
        justify-content: flex-end !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-modal-body > * + * {
        margin-top: 8px !important;
    }

    /* Context Strip Students Button */
    #teacher-topic-schedule-overlay .release-context-strip button {
        font-size: 9.5px !important;
        padding: 1px 5px !important;
    }

    /* Single / Selected Items Row */
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body > .bg-slate-50,
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body .p-3\.5 {
        padding: 7px 10px !important;
        border-radius: 10px !important;
        gap: 6px !important;
    }
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body > .bg-slate-50 span,
    #teacher-topic-schedule-overlay #teacher-schedule-modal-body .p-3\.5 span {
        font-size: 11px !important;
    }

    /* Multi-Item Selector Dropdown */
    #teacher-topic-schedule-overlay #teacher-schedule-dropdown-btn {
        height: 34px !important;
        min-height: 34px !important;
        padding: 5px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }
    #teacher-topic-schedule-overlay #teacher-schedule-dropdown-menu {
        max-height: 180px !important;
        border-radius: 10px !important;
    }
    #teacher-topic-schedule-overlay #teacher-schedule-dropdown-menu > div {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* Schedule Step Cards (Release Date, Due Date, Single Column Box) */
    #teacher-topic-schedule-overlay .space-y-4 > .grid,
    #teacher-topic-schedule-overlay .grid.grid-cols-1.sm\:grid-cols-2 {
        gap: 8px !important;
    }

    #teacher-topic-schedule-overlay .space-y-3.p-4.rounded-xl,
    #teacher-topic-schedule-overlay .space-y-4.p-5.rounded-2xl {
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }
    #teacher-topic-schedule-overlay .space-y-3.p-4.rounded-xl > * + *,
    #teacher-topic-schedule-overlay .space-y-4.p-5.rounded-2xl > * + * {
        margin-top: 6px !important;
    }

    #teacher-topic-schedule-overlay h3.text-xs {
        font-size: 11.5px !important;
    }
    #teacher-topic-schedule-overlay h3.text-xs + p {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-release-datetime-box,
    #teacher-topic-schedule-overlay #teacher-schedule-due-datetime-box {
        gap: 6px !important;
    }
    #teacher-topic-schedule-overlay #teacher-schedule-release-datetime-box > * + *,
    #teacher-topic-schedule-overlay #teacher-schedule-due-datetime-box > * + * {
        margin-top: 6px !important;
    }

    #teacher-topic-schedule-overlay #teacher-release-date-box,
    #teacher-topic-schedule-overlay #teacher-time-panel-box,
    #teacher-topic-schedule-overlay #teacher-due-date-box,
    #teacher-topic-schedule-overlay #teacher-end-time-panel-box {
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 8px !important;
        padding: 0 8px !important;
    }

    #teacher-topic-schedule-overlay input[type="date"],
    #teacher-topic-schedule-overlay input[type="time"] {
        font-size: 11px !important;
    }

    /* Mobile Time Inputs: Prevent native browser time panel from expanding and overflowing */
    #teacher-topic-schedule-overlay input[type="time"]::-webkit-calendar-picker-indicator,
    #teacher-topic-schedule-overlay #teacher-time-panel-box input[type="time"]::-webkit-calendar-picker-indicator,
    #teacher-topic-schedule-overlay #teacher-end-time-panel-box input[type="time"]::-webkit-calendar-picker-indicator {
        display: none !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #teacher-topic-schedule-overlay label.cursor-pointer span.text-xs {
        font-size: 11px !important;
    }

    #teacher-topic-schedule-overlay input[type="checkbox"] {
        width: 15px !important;
        height: 15px !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-helper-text {
        font-size: 10px !important;
        line-height: 1.3 !important;
        margin-top: 4px !important;
    }

    /* Set Details / Grading Details Card */
    #teacher-topic-schedule-overlay #teacher-grading-configuration-card {
        padding: 9px 10px !important;
        border-radius: 10px !important;
    }
    #teacher-topic-schedule-overlay #teacher-grading-configuration-card > * + * {
        margin-top: 8px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-configuration-card label.text-xs {
        font-size: 11px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-configuration-card .h-11 {
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-configuration-card input[type="number"],
    #teacher-topic-schedule-overlay #teacher-grading-configuration-card span.text-xs {
        font-size: 11px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-mode-manual,
    #teacher-topic-schedule-overlay #teacher-grading-mode-auto,
    #teacher-topic-schedule-overlay #teacher-essay-mode-manual,
    #teacher-topic-schedule-overlay #teacher-essay-mode-auto,
    #teacher-topic-schedule-overlay #teacher-manual-review-types label {
        padding: 7px 9px !important;
        border-radius: 8px !important;
        gap: 7px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-mode-manual .w-5,
    #teacher-topic-schedule-overlay #teacher-grading-mode-auto .w-5,
    #teacher-topic-schedule-overlay #teacher-essay-mode-manual .w-5,
    #teacher-topic-schedule-overlay #teacher-essay-mode-auto .w-5 {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-mode-manual .text-xs,
    #teacher-topic-schedule-overlay #teacher-grading-mode-auto .text-xs,
    #teacher-topic-schedule-overlay #teacher-essay-mode-manual .text-xs,
    #teacher-topic-schedule-overlay #teacher-essay-mode-auto .text-xs,
    #teacher-topic-schedule-overlay #teacher-manual-review-types .text-xs {
        font-size: 11px !important;
    }

    #teacher-topic-schedule-overlay #teacher-manual-review-types .text-\[11px\] {
        font-size: 10px !important;
    }

    #teacher-topic-schedule-overlay #teacher-grading-mode-manual p,
    #teacher-topic-schedule-overlay #teacher-grading-mode-auto p,
    #teacher-topic-schedule-overlay #teacher-essay-mode-manual p,
    #teacher-topic-schedule-overlay #teacher-essay-mode-auto p {
        font-size: 9px !important;
        line-height: 1.2 !important;
        margin-top: 1px !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-ai-assisted-container,
    #teacher-topic-schedule-overlay #teacher-schedule-rubric-box,
    #teacher-topic-schedule-overlay .teacher-criteria-category-item {
        padding: 7px 9px !important;
        border-radius: 8px !important;
        gap: 6px !important;
    }

    #teacher-topic-schedule-overlay #teacher-schedule-ai-assisted-container .text-xs,
    #teacher-topic-schedule-overlay .teacher-criteria-category-item .text-xs {
        font-size: 10.5px !important;
    }

    #teacher-topic-schedule-overlay #teacher-ai-assist-subtext,
    #teacher-topic-schedule-overlay .teacher-criteria-category-item p {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* Assigned Students Step */
    #teacher-topic-schedule-overlay #teacher-student-schedule-search {
        height: 32px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
    }

    #teacher-topic-schedule-overlay .teacher-schedule-student-row {
        padding: 6px 8px !important;
        border-radius: 8px !important;
        gap: 6px !important;
    }

    #teacher-topic-schedule-overlay .teacher-schedule-student-row p.font-bold {
        font-size: 11px !important;
    }

    #teacher-topic-schedule-overlay .teacher-schedule-student-row p.text-black-fade {
        font-size: 9px !important;
    }
}

/* ==========================================================================
   RELEASE SECTION HEADER BAR (DESKTOP FAR RIGHT SUBTITLE & MOBILE CLEAN STACK)
   ========================================================================== */
.release-section-header-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.release-section-header-bar .release-section-subtitle {
    margin-left: auto;
    text-align: right;
}

/* ==========================================================================
   PICKER & SCHEDULE MODAL BACK BUTTON RESPONSIVE BEHAVIOR (DESKTOP)
   ========================================================================== */
@media (min-width: 640px) {
    .picker-header-back-btn {
        display: none !important;
    }
    .picker-footer-back-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: auto !important;
        margin-left: 0 !important;
        order: 1 !important;
    }
    #teacher-topic-schedule-overlay .teacher-schedule-modal-footer,
    #teacher-topic-schedule-overlay .curriculum-hub-panel > div:last-child,
    #teacher-topic-schedule-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-topics-materials-picker-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-assessments-picker-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-learning-picker-overlay .curriculum-release-panel-fixed > div:last-child,
    #teacher-topic-picker-overlay .curriculum-release-panel-fixed > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #teacher-topic-schedule-overlay #teacher-save-schedule-btn,
    #teacher-topic-schedule-overlay #teacher-set-grading-btn,
    #teacher-topic-schedule-overlay #teacher-students-done-btn,
    #teacher-topic-schedule-overlay .sigma-btn-primary,
    #teacher-topics-materials-picker-overlay #topics-materials-picker-submit-btn,
    #teacher-topics-materials-picker-overlay .sigma-btn-primary,
    #teacher-assessments-picker-overlay #assessments-picker-submit-btn,
    #teacher-assessments-picker-overlay .sigma-btn-primary,
    #teacher-learning-picker-overlay #learning-picker-submit-btn,
    #teacher-learning-picker-overlay .sigma-btn-primary,
    #teacher-topic-picker-overlay #topic-picker-submit-btn,
    #teacher-topic-picker-overlay .sigma-btn-primary,
    .picker-footer-back-btn ~ .sigma-btn-primary,
    .picker-footer-back-btn ~ button:last-child {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        order: 2 !important;
    }
}

/* ==========================================================================
   SHARED ASKING PANEL & CONFIRMATION MODALS (RESPONSIVE AUTO-SIZING)
   Scales down panel, buttons, icon, and typography to fit right into screen
   ========================================================================== */
#sigma-universal-ask-overlay,
#sigma-global-dialog,
.sigma-dialog-overlay,
#sy-confirm-overlay,
#profile-confirm-overlay,
#section-confirm-overlay {
    padding: 12px !important;
    box-sizing: border-box !important;
}

#sigma-universal-ask-card,
.sigma-universal-ask-card,
#sigma-universal-ask-overlay > div,
#sigma-global-dialog .sigma-dialog-card,
.sigma-dialog-overlay .sigma-dialog-card,
#sy-confirm-overlay > div,
#profile-confirm-overlay > div,
#section-confirm-overlay > div {
    width: min(calc(100vw - 28px), 330px) !important;
    max-width: 330px !important;
    max-height: min(88vh, calc(100dvh - 28px)) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
    padding: 16px 14px 14px !important;
    margin: auto !important;
    box-sizing: border-box !important;
    text-align: center !important;
    overscroll-behavior: contain !important;
}

#sigma-ask-icon-wrap,
.sigma-dialog-icon-wrap,
#sy-confirm-overlay .rounded-2xl,
#sy-confirm-overlay .rounded-full,
#profile-confirm-overlay .rounded-full,
#section-confirm-overlay .rounded-full {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 9999px !important;
    margin: 0 auto 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#sigma-ask-icon-wrap i,
#sigma-ask-icon,
.sigma-dialog-icon-wrap i,
#sigma-dialog-icon,
#sy-confirm-overlay i,
#profile-confirm-overlay i,
#section-confirm-overlay i {
    font-size: 16.5px !important;
}

#sigma-ask-title,
.sigma-dialog-title,
#sy-confirm-title,
#profile-confirm-title,
#section-confirm-title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #000000 !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    letter-spacing: -0.01em !important;
}

#sigma-ask-desc,
.sigma-dialog-desc,
#sigma-dialog-desc,
#sy-confirm-desc,
#profile-confirm-desc,
#section-confirm-desc {
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 450 !important;
    line-height: 1.48 !important;
    color: #475569 !important;
    margin: 0 0 13px !important;
    padding: 0 4px !important;
}

#sigma-ask-actions,
.sigma-dialog-actions,
#sy-confirm-overlay .grid,
#profile-confirm-overlay .grid,
#section-confirm-overlay .grid {
    margin-top: 13px !important;
    gap: 7px !important;
    width: 100% !important;
}

#sigma-ask-cancel-btn,
#sigma-ask-proceed-btn,
.sigma-dialog-btn-cancel,
.sigma-dialog-btn-confirm,
#sy-confirm-cancel,
#sy-confirm-proceed,
#profile-confirm-cancel,
#profile-confirm-proceed,
#section-confirm-cancel,
#section-confirm-proceed {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 36px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 640px) {
    #sigma-universal-ask-overlay,
    #sigma-global-dialog,
    .sigma-dialog-overlay,
    #sy-confirm-overlay,
    #profile-confirm-overlay,
    #section-confirm-overlay {
        padding: 16px !important;
    }

    #sigma-universal-ask-card,
    .sigma-universal-ask-card,
    #sigma-universal-ask-overlay > div,
    #sigma-global-dialog .sigma-dialog-card,
    .sigma-dialog-overlay .sigma-dialog-card,
    #sy-confirm-overlay > div,
    #profile-confirm-overlay > div,
    #section-confirm-overlay > div {
        width: min(calc(100vw - 48px), 360px) !important;
        max-width: 360px !important;
        max-height: min(90vh, calc(100dvh - 36px)) !important;
        border-radius: 22px !important;
        padding: 22px 20px 18px !important;
    }

    #sigma-ask-icon-wrap,
    .sigma-dialog-icon-wrap,
    #sy-confirm-overlay .rounded-2xl,
    #sy-confirm-overlay .rounded-full,
    #profile-confirm-overlay .rounded-full,
    #section-confirm-overlay .rounded-full {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 auto 11px !important;
    }

    #sigma-ask-icon-wrap i,
    #sigma-ask-icon,
    .sigma-dialog-icon-wrap i,
    #sigma-dialog-icon,
    #sy-confirm-overlay i,
    #profile-confirm-overlay i,
    #section-confirm-overlay i {
        font-size: 19px !important;
    }

    #sigma-ask-title,
    .sigma-dialog-title,
    #sy-confirm-title,
    #profile-confirm-title,
    #section-confirm-title {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px !important;
    }

    #sigma-ask-desc,
    .sigma-dialog-desc,
    #sigma-dialog-desc,
    #sy-confirm-desc,
    #profile-confirm-desc,
    #section-confirm-desc {
        font-size: 12.5px !important;
        line-height: 1.52 !important;
        margin: 0 0 15px !important;
        padding: 0 6px !important;
    }

    #sigma-ask-actions,
    .sigma-dialog-actions,
    #sy-confirm-overlay .grid,
    #profile-confirm-overlay .grid,
    #section-confirm-overlay .grid {
        margin-top: 15px !important;
        gap: 9px !important;
    }

    #sigma-ask-cancel-btn,
    #sigma-ask-proceed-btn,
    .sigma-dialog-btn-cancel,
    .sigma-dialog-btn-confirm,
    #sy-confirm-cancel,
    #sy-confirm-proceed,
    #profile-confirm-cancel,
    #profile-confirm-proceed,
    #section-confirm-cancel,
    #section-confirm-proceed {
        height: 39px !important;
        min-height: 39px !important;
        max-height: 39px !important;
        line-height: 39px !important;
        font-size: 12.5px !important;
        border-radius: 11px !important;
        padding: 0 12px !important;
    }
}

/* ─── Mobile Assessment Card Titles & Facts Panel (Center & Scaled Down) ─── */
@media (max-width: 768px) {
    #topic-content-main h4:not(.sigma-file-panel-title),
    #handout-list h4,
    #assessment-list h4,
    .assessment-card-panel h4,
    .student-assessment-list-item h4,
    .teacher-assessment-list-item h4 {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .assessment-desktop-facts-table {
        display: none !important;
    }

    .assessment-mobile-facts-panel {
        display: block !important;
    }

    .assessment-mobile-facts-table th.mobile-fact-label {
        text-align: center !important;
        border-bottom: 1px solid #166534 !important;
    }

    .assessment-mobile-facts-table td.mobile-fact-value {
        text-align: center !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .assessment-mobile-facts-table tr:last-child th.mobile-fact-label,
    .assessment-mobile-facts-table tr:last-child td.mobile-fact-value {
        border-bottom: none !important;
    }

    /* ─── SIGMA AI Assistance Header Layout & Scaled Controls (Mobile) ─── */
    .ai-panel-header-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "title badge"
            "desc desc"
            "btn btn" !important;
        row-gap: 8px !important;
        column-gap: 8px !important;
        align-items: center !important;
    }

    .ai-header-score-area > div {
        padding: 2px 7px !important;
        border-radius: 7px !important;
        gap: 4px !important;
    }

    .ai-header-score-area span:first-child {
        font-size: 10px !important;
    }

    .ai-header-score-area span:last-child {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    #ai-review-action-btn {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        padding: 3.5px 9px !important;
        height: 25px !important;
        min-height: 25px !important;
        border-radius: 7px !important;
        gap: 5px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    #ai-review-action-btn i {
        font-size: 9.5px !important;
    }

    /* Final mobile Save Grade state: match the desktop primary button. */
    button#teacher-grading-save-btn.teacher-save-grade-btn:not(:disabled) {
        display: inline-flex !important;
        background: #15803d !important;
        background-color: #15803d !important;
        color: #ffffff !important;
        border: 1px solid #15803d !important;
        opacity: 1 !important;
        cursor: pointer !important;
    }

    button#teacher-grading-save-btn.teacher-save-grade-btn:not(:disabled) span,
    button#teacher-grading-save-btn.teacher-save-grade-btn:not(:disabled) i {
        color: #ffffff !important;
    }

    button#teacher-grading-save-btn.teacher-save-grade-btn:disabled {
        display: inline-flex !important;
        background: #f1f5f9 !important;
        background-color: #f1f5f9 !important;
        color: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid #e2e8f0 !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

    /* Keep clearance on the scroll surface, not every nested page wrapper. */
    #main-content,
    #content-sections,
    #user-settings-view,
    .home-center-column {
        padding-bottom: 0 !important;
    }

    .sigma-modal-overlay,
    #pw-modal {
        height: 100dvh !important;
        max-height: 100dvh !important;
        box-sizing: border-box !important;
        overflow-y: auto;
    }

    .sigma-modal-overlay .sigma-modal-shell,
    .sigma-modal-overlay .sigma-modal-panel {
        max-height: calc(100dvh - 2 * var(--mobile-browser-safe-bottom)) !important;
        min-height: 0 !important;
    }

    #pw-modal > div {
        max-height: calc(100dvh - 2 * var(--mobile-browser-safe-bottom)) !important;
        overflow-y: auto !important;
    }

    .sigma-modal-body,
    .sigma-post-dialog-body,
    .sigma-composer-body {
        min-height: 0 !important;
        overflow-y: auto;
    }

    /* Browser-toolbar safe area for fullscreen panels, forms, dialogs and sticky footers. */
    .sigma-post-dialog-modal,
    .sigma-composer-modal,
    .topic-student-cover.is-open,
    [id$="-grading-student-list-tray"].is-open {
        max-height: 100dvh !important;
        box-sizing: border-box !important;
    }

    /* Topbar Icon Panels: Never overlap or extend below 100% viewport; clear of mobile browser toolbars */
    body.mobile-panel-open #noti-dropdown:not(.hidden),
    body.mobile-panel-open #calendar-dropdown:not(.hidden),
    body.mobile-panel-open #analytics-dropdown:not(.hidden),
    body.mobile-panel-open #schedule-dropdown:not(.hidden) {
        top: calc(clamp(17px, 4.2vw, 21px) + clamp(40px, 10.5vw, 46px)) !important;
        bottom: 0 !important;
        height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        animation: none !important;
        transition: none !important;
    }

    /* Mobile SIGMA AI Chat Panel: Column flexbox with scrollable messages and pinned composer at bottom */
    body.mobile-panel-open #sigmaAiPanel:not(.hidden) {
        top: calc(clamp(17px, 4.2vw, 21px) + clamp(40px, 10.5vw, 46px)) !important;
        bottom: 0 !important;
        height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100vh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        max-height: calc(100dvh - clamp(17px, 4.2vw, 21px) - clamp(40px, 10.5vw, 46px)) !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        animation: none !important;
        transition: none !important;
    }

    body.mobile-panel-open #sigmaAiPanel #sigmaAiMessages {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    body.mobile-panel-open #sigmaAiPanel > div:last-child {
        flex-shrink: 0 !important;
        display: block !important;
        background: #ffffff !important;
        border-top: 1px solid #f1f5f9 !important;
        padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 12px)) !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 60 !important;
    }

    body.mobile-panel-open #sigmaAiPanel .sigma-ai-composer {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        background: transparent !important;
    }

    body.mobile-panel-open #sigmaAiPanel .sigma-ai-composer__field {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: #f8fafc !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 9999px !important;
        min-height: 42px !important;
        padding: 6px 14px !important;
        box-sizing: border-box !important;
    }

    body.mobile-panel-open #sigmaAiPanel .sigma-ai-composer__field:focus-within {
        border-color: #FFD000 !important;
        background: #ffffff !important;
    }

    body.mobile-panel-open #sigmaAiPanel #sigmaAiInput {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
        border: none !important;
        outline: none !important;
        background: transparent !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        height: 24px !important;
        min-height: 24px !important;
        color: #0f172a !important;
        resize: none !important;
        padding: 2px 0 !important;
        box-shadow: none !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        cursor: text !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body.mobile-panel-open #sigmaAiPanel #sigmaAiSendBtn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 9999px !important;
        background-color: #15803d !important;
        color: #ffffff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
        border: none !important;
        outline: none !important;
    }

    /* Prevent mobile browser toolbars from blocking the bottom of panel scroll areas */
    body.mobile-panel-open #noti-dropdown .notif-scroll-area,
    body.mobile-panel-open #calendar-dropdown .calendar-content,
    body.mobile-panel-open #calendar-dropdown #mobile-calendar-container,
    body.mobile-panel-open #calendar-dropdown > div.overflow-y-auto,
    body.mobile-panel-open #analytics-dropdown-cards,
    body.mobile-panel-open #schedule-dropdown-cards,
    body.mobile-panel-open #profileDropdownMenu,
    body.mobile-account-fullscreen #profileDropdownMenu {
        padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 16px))) !important;
        scroll-padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 16px))) !important;
        box-sizing: border-box !important;
    }

    .sigma-post-dialog-body,
    .sigma-composer-body,
    .sigma-modal-body,
    [role="dialog"] .overflow-y-auto,
    [class*="modal"] .overflow-y-auto,
    [class*="overlay"] .overflow-y-auto,
    form[class*="overflow-y-auto"] {
        scroll-padding-bottom: var(--mobile-page-bottom-space) !important;
    }

    .sigma-post-dialog-footer,
    .sigma-composer-footer,
    .sigma-modal-footer,
    [role="dialog"] footer,
    [class*="modal"] footer,
    [class*="overlay"] footer {
        padding-bottom: var(--mobile-browser-safe-bottom) !important;
    }

    #topic-right-section.topic-rail-score-follow .topic-score-sticky,
    #topic-right-section:has(.topic-score-sticky) .topic-score-sticky {
        scroll-padding-bottom: var(--mobile-browser-safe-bottom) !important;
    }
}

@media (max-width: 768px) {
    body :is(.sigma-modal-overlay, #pw-modal, [id$="-modal-overlay"],
        [id$="-overlay"]:has(.curriculum-hub-panel),
        .sigma-post-dialog-overlay, .sigma-composer-overlay) {
        top: var(--sigma-visible-viewport-top, 0px) !important;
        bottom: auto !important;
        height: var(--sigma-visible-viewport-height, 100dvh) !important;
        max-height: var(--sigma-visible-viewport-height, 100dvh) !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    body :is([id$="-overlay"], .sigma-modal-overlay, #pw-modal)
        :is(.curriculum-hub-panel, .sigma-modal-shell, .sigma-modal-panel,
            .sigma-post-dialog-modal, .sigma-composer-modal) {
        max-height: 100% !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    body [id$="-overlay"] .curriculum-hub-panel {
        height: 100% !important;
    }

    body [id$="-overlay"] .curriculum-hub-panel > .overflow-y-auto {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }

    body [id$="-overlay"] .curriculum-hub-panel > div:first-child,
    body [id$="-overlay"] .curriculum-hub-panel > div:last-child {
        flex-shrink: 0 !important;
    }

    body [id$="-overlay"] .curriculum-hub-panel > div:last-child {
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    }

    :is([id^="released-topic-btn-"], [id^="released-learning-btn-"],
        [id^="released-assessment-btn-"]) > .fa-ellipsis-vertical {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    #teacher-topic-schedule-overlay .border-b:first-child > .flex,
    #teacher-topic-schedule-overlay .picker-header-back-btn + div {
        min-width: 0;
    }

    #teacher-topic-schedule-overlay h2 {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE USER PROFILE VIEW (<= 1023px)
   - Full-width hero banner touching icon panel with closed gap (0 gap)
   - Preserved rounded bottom corners (rounded-b-[28px])
   - Scaled-down avatar circle (86px), placeholder icon, and proportional negative margin
   - Scaled-down user name typography, role badge, and user ID
   - Full-width divider borders (top and bottom of tabs header) spanning edge-to-edge
   ========================================================================== */
@media (max-width: 1023px) {
    /* 1. Flush layout & zero gap between mobile sub-bar and green banner */
    #user-profile-view {
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #main-content:has(#user-profile-view:not(.hidden)),
    #content-sections:has(#user-profile-view:not(.hidden)) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 2. Top Enclosing Header Panel - Full Width Edge-to-Edge */
    #user-profile-header-panel,
    #user-profile-view > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        background-color: #ffffff !important;
    }

    /* Outer banner wrapper: Remove side padding and max-width on mobile so banner stretches full width */
    #user-profile-banner-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }

    /* 3. Hero Banner - Full Width, Closed Gap to Sub-Bar, Bottom Radius Preserved */
    #user-profile-hero-banner {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 168px !important;
        height: auto !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* Hero Banner Background: Preserved bottom radius, zero top radius */
    #user-profile-hero-bg {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 28px !important;
        border-bottom-right-radius: 28px !important;
    }

    /* Content inside Hero Banner */
    #user-profile-banner-content {
        min-height: 168px !important;
        padding-left: clamp(14px, 4vw, 20px) !important;
        padding-right: clamp(14px, 4vw, 20px) !important;
        padding-top: 14px !important;
        padding-bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Scaled-Down Profile Avatar Circle */
    #user-profile-picture-trigger {
        width: clamp(80px, 20vw, 90px) !important;
        height: clamp(80px, 20vw, 90px) !important;
        min-width: clamp(80px, 20vw, 90px) !important;
        min-height: clamp(80px, 20vw, 90px) !important;
        margin-bottom: -36px !important;
        border-width: 3.5px !important;
        border-color: #ffffff !important;
        box-shadow: 0 0 0 3px #ffffff, 0 4px 14px rgba(0, 0, 0, 0.14) !important;
        border-radius: 9999px !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    #user-profile-picture-trigger #user-avatar-placeholder {
        font-size: clamp(30px, 7.5vw, 36px) !important;
    }

    /* 5. Scaled-Down Typography & Meta Info */
    #user-profile-identity-wrap {
        align-self: flex-end !important;
        margin-bottom: 8px !important;
        padding-bottom: 0 !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    #view-user-name-banner-heading {
        font-size: clamp(1.15rem, 4.2vw, 1.4rem) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.015em !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #view-user-name-banner {
        font-size: clamp(1.15rem, 4.2vw, 1.4rem) !important;
        line-height: 1.22 !important;
        font-weight: 800 !important;
    }

    #view-user-badges-wrap {
        display: none !important;
    }

    /* Action Buttons on Banner */
    #user-profile-action-btn-wrap {
        margin-bottom: 8px !important;
        align-self: flex-end !important;
        flex-shrink: 0 !important;
    }

    #user-profile-action-btn-wrap #profile-settings-btn,
    #user-profile-action-btn-wrap #profile-actions-dots-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }

    #user-profile-action-btn-wrap #profile-settings-btn i,
    #user-profile-action-btn-wrap #profile-actions-dots-btn i {
        font-size: 13px !important;
    }

    /* 6. Clearance Area Below Avatar & Account Status Badge */
    #user-profile-clearance-tabs-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        width: 100% !important;
    }

    #user-profile-status-wrap {
        min-height: 52px !important;
        padding: 6px clamp(12px, 3.5vw, 16px) 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    /* 7. Full-Width Divider Border Above Tabs & Unified Mobile Tabs */
    #user-profile-tabs-header-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 clamp(12px, 3.5vw, 16px) !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 0 !important;
    }

    #user-profile-about-title-col {
        display: none !important;
    }

    #user-profile-tabs-container {
        display: flex !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #user-profile-tabs-container::-webkit-scrollbar {
        display: none !important;
    }

    #user-profile-tabs-container > p:not(.hidden),
    #user-profile-tabs-container > a:not(.hidden),
    #profile-tab-subjects:not(.hidden),
    #profile-tab-sections:not(.hidden) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    body.student-portal #profile-tab-achievements:not(.hidden) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 9px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        cursor: pointer !important;
    }

    /* Achievements tab must remain hidden for teacher & whenever marked hidden */
    body.teacher-portal #profile-tab-achievements,
    body:not(.student-portal) #profile-tab-achievements,
    #user-profile-tabs-container .hidden,
    #user-profile-tabs-container [style*="display: none"] {
        display: none !important;
    }

    /* 8. Profile Panels Below Header: Right panel (Subjects & Sections) on top, Left panel (Email, ID, Gender, Role) below */
    #user-profile-panels-grid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px clamp(12px, 3.5vw, 16px) 24px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Move Subjects & Sections panel to the top on mobile */
    #user-profile-right-panel {
        order: 1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Move Email, ID, Gender, Role & Bio panel below the Subjects & Sections panel */
    #user-profile-left-column {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 14px !important;
    }

    /* Scale down Basic Details panel (Email, ID, Gender, Role) */
    #user-profile-basic-details-card {
        padding: 1.15rem 1rem !important;
        border-radius: 20px !important;
    }

    #user-profile-basic-details-card > div {
        padding-top: 0.65rem !important;
        margin-top: 0 !important;
    }

    #user-profile-basic-details-card > div:first-child {
        padding-top: 0 !important;
    }

    /* Scale down icons */
    #user-profile-basic-details-card i,
    #user-profile-basic-details-card .fa-solid {
        font-size: 13px !important;
        width: 16px !important;
        min-width: 16px !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    /* Scale down labels */
    #user-profile-basic-details-card p.font-semibold,
    #user-profile-basic-details-card .font-semibold {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em !important;
    }

    /* Scale down values */
    #user-profile-basic-details-card #view-user-email,
    #user-profile-basic-details-card #view-user-sidebar-id,
    #user-profile-basic-details-card #view-user-gender,
    #user-profile-basic-details-card #view-user-sidebar-role,
    #user-profile-basic-details-card > div > p:not(.font-semibold) {
        font-size: 13.5px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        word-break: break-word !important;
    }

    /* Scale down tab panel container (Subjects / Sections / Achievements) */
    #user-profile-tab-panel-container {
        padding: 1.15rem 1rem !important;
        border-radius: 20px !important;
        min-height: auto !important;
    }

    /* Scale down Subjects / Sections / Tab Header */
    #user-profile-tab-panel h3,
    #user-profile-tab-panel-container h3 {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* Scale down Empty State inside Subjects / Sections */
    #user-profile-tab-panel .py-16 {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
        gap: 0.5rem !important;
    }

    #user-profile-tab-panel .py-16 i,
    #user-profile-tab-panel i.text-4xl,
    #user-profile-tab-panel i.fa-book,
    #user-profile-tab-panel i.fa-users,
    #user-profile-tab-panel i.fa-folder,
    #user-profile-tab-panel i.fa-chalkboard {
        font-size: 26px !important;
    }

    #user-profile-tab-panel .py-16 p,
    #user-profile-tab-panel p.text-sm {
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* Scale down Bio Containers & Cards */
    #user-profile-bio-card-left-container > div,
    #user-profile-bio-card-right-container > div,
    #user-profile-bio-card-container > div {
        padding: 1.15rem 1rem !important;
        border-radius: 20px !important;
        min-height: auto !important;
    }

    /* Scale down Bio Header & Add Bio button */
    #user-profile-bio-card-left-container h4,
    #user-profile-bio-card-right-container h4,
    #user-profile-bio-card-container h4,
    #edit-user-bio-form h4 {
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    #user-profile-bio-card-left-container button,
    #user-profile-bio-card-right-container button,
    #user-profile-bio-card-container button {
        font-size: 11.5px !important;
    }

    /* Scale down Bio empty state ("Tell me about yourself") */
    #user-profile-bio-content .py-8 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        gap: 0.45rem !important;
    }

    #user-profile-bio-content i.fa-note-sticky,
    #user-profile-bio-content i.text-3xl {
        font-size: 22px !important;
    }

    #user-profile-bio-content p.text-black-fade {
        font-size: 12px !important;
        font-weight: 500 !important;
    }

    /* Scale down saved bio items */
    #user-profile-bio-content h5 {
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    #user-profile-bio-content p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    /* Scale down Add/Edit Bio Form */
    #edit-user-bio-form label {
        font-size: 11.5px !important;
        font-weight: 600 !important;
    }

    #edit-user-bio-form #user-bio-char-counter {
        font-size: 10.5px !important;
    }

    #edit-user-bio-form input,
    #edit-user-bio-form textarea {
        font-size: 12.5px !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 10px !important;
    }

    #edit-user-bio-form button {
        font-size: 11.5px !important;
        padding: 0.45rem 0.85rem !important;
        border-radius: 10px !important;
}

/* ─── Universal Topic Card / Topic Panel Body Text (Desktop & Mobile) ─── */
.topic-card__body p,
.student-topic-card__body p,
.teacher-topic-card__body p,
.room-embedded-topics .topic-card__body p,
.room-embedded-topics .student-topic-card__body p,
.room-embedded-topics .teacher-topic-card__body p,
.topic-card p,
.student-topic-card p,
.teacher-topic-card p {
    color: #000 !important;
}

/* Shared editor material shapes retain their desktop appearance. */
/* Every custom calendar popup uses the same compact mobile surface. */
@media (max-width: 768px) {
    :is(#calendar-custom-month-picker, #attendance-page-month-picker, #teacher-attendance-calendar-popup, #student-attendance-calendar-popup, #sigma-field-picker.sigma-field-picker--calendar) {
        width: 220px !important;
        max-width: calc(100vw - 28px) !important;
        padding: 10px 10px 8px !important;
        border-radius: 16px !important;
        top: calc(100% + 6px) !important;
        box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.16), 0 3px 8px -2px rgba(0, 0, 0, 0.08) !important;
    }
    :is(#calendar-custom-month-picker, #attendance-page-month-picker, #teacher-attendance-calendar-popup, #student-attendance-calendar-popup, #sigma-field-picker.sigma-field-picker--calendar) .cal-picker-month-btn {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
    :is(#calendar-custom-month-picker, #attendance-page-month-picker, #teacher-attendance-calendar-popup, #student-attendance-calendar-popup, #sigma-field-picker.sigma-field-picker--calendar) .cal-picker-year-label {
        font-size: 14px !important;
    }
}

[id^="topic-dropdown-"] .material-panel-icon-group,
[id^="topic-dropdown-"] .mat-icon-col {
    width: 60px !important;
    min-width: 60px !important;
    gap: 4px !important;
}

[id^="topic-dropdown-"] .material-panel-icon-group > div,
[id^="topic-dropdown-"] .mat-icon-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 8px !important;
}

[id^="topic-dropdown-"] .material-panel-icon-group > div > i,
[id^="topic-dropdown-"] .mat-icon-box i {
    font-size: 22px !important;
    font-weight: 900 !important;
}

[id^="topic-dropdown-"] .mat-icon-box i::before { font-weight: 900 !important; }
[id^="topic-dropdown-"] .mat-type-badge.text-red-600 { color: #dc2626 !important; }
[id^="topic-dropdown-"] .mat-type-badge.text-blue-600 { color: #2563eb !important; }
[id^="topic-dropdown-"] .mat-type-badge.text-amber-700 { color: #b45309 !important; }
[id^="topic-dropdown-"] .mat-type-badge.text-emerald-700 { color: #047857 !important; }

@media (max-width: 768px) {
    [id^="topic-dropdown-"] .material-panel-icon-group,
    body [id^="topic-dropdown-"] .sigma-black-fade-panel.sigma-black-fade-panel .material-panel-icon-group.mat-icon-col { width: 48px !important; min-width: 48px !important; gap: 4px !important; }
    [id^="topic-dropdown-"] .material-panel-icon-group > div,
    body [id^="topic-dropdown-"] .sigma-black-fade-panel.sigma-black-fade-panel .material-panel-icon-group.mat-icon-col > .mat-icon-box { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 8px !important; }
    [id^="topic-dropdown-"] .material-panel-icon-group > div > i,
    body [id^="topic-dropdown-"] .sigma-black-fade-panel.sigma-black-fade-panel .material-panel-icon-group.mat-icon-col > .mat-icon-box i { font-size: 18px !important; }
}

/* Shared mobile text actions; icon tools and pagination retain their own sizing. */
@media (max-width: 768px) {
    body button.sigma-btn:not(.btn-icon-only):not(.sigma-pagination-btn),
    body a.sigma-btn:not(.btn-icon-only),
    body .sigma-modal-footer button.sigma-modal-btn {
        height: 36px !important;
        min-height: 36px !important;
        max-width: 100%;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
    }
    body button.sigma-btn:not(.btn-icon-only) span,
    body a.sigma-btn:not(.btn-icon-only) span {
        font-size: inherit !important;
        line-height: inherit !important;
    }
    body button.sigma-btn:not(.btn-icon-only) i,
    body a.sigma-btn:not(.btn-icon-only) i {
        font-size: 12px !important;
    }
}

[id^="topic-dropdown-"] .material-panel-icon-group > span,
[id^="topic-dropdown-"] .mat-type-badge {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}
@media (max-width: 768px) {
    [id^="topic-dropdown-"] .material-panel-icon-group > span,
    body [id^="topic-dropdown-"] .sigma-black-fade-panel .material-panel-icon-group.mat-icon-col > .mat-type-badge { font-size: 10px !important; line-height: 14px !important; padding: 1px 4px !important; border-radius: 4px !important; }
}

@media (max-width: 767px) {
    html body :is(#classes-detail-tabs, #student-classroom-tabs-wrapper):has(:is(#classroom-quick-settings-btn, #student-room-menu-btn)) :is(#classroom-quick-settings-btn, #student-room-menu-btn) > i {
        display: flex !important;
        width: 20px !important;
        height: 20px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        line-height: 20px !important;
        transform: rotate(90deg) !important;
    }
}

/* ─── Search Results Filter Styles ─── */
.search-filter-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    box-sizing: border-box;
    outline: none;
}

.search-filter-item:hover {
    background-color: #f1f5f9;
    color: #000000;
}

.search-filter-item.active,
button.search-filter-item.active {
    background-color: #FFD000 !important;
    border: 1px solid #FFD000 !important;
    border-color: #FFD000 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

.search-filter-item.active *,
button.search-filter-item.active * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.search-filter-count {
    display: none !important;
}

@media (max-width: 1023px) {
    .search-filter-container {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 5px !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .search-filter-container::-webkit-scrollbar {
        display: none !important;
    }
    .search-filter-item,
    button.search-filter-item {
        width: auto !important;
        white-space: nowrap !important;
        padding: 3px 8px !important;
        height: 24px !important;
        min-height: 24px !important;
        border-radius: 9999px !important;
        border: 1px solid #e2e8f0 !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        background-color: transparent !important;
        color: #000000 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .search-filter-item i,
    .search-filter-item .search-filter-icon {
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
        height: 12px !important;
        font-size: 10px !important;
        color: #000000 !important;
    }
    .search-filter-item span {
        font-size: 10.5px !important;
        color: #000000 !important;
    }
    .search-filter-item.active,
    button.search-filter-item.active {
        background-color: #FFD000 !important;
        border: 1px solid #FFD000 !important;
        border-color: #FFD000 !important;
        color: #ffffff !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .search-filter-item.active *,
    button.search-filter-item.active *,
    .search-filter-item.active i,
    button.search-filter-item.active i,
    .search-filter-item.active span,
    button.search-filter-item.active span {
        color: #ffffff !important;
        fill: #ffffff !important;
    }

    /* Scaled down subject and section text in mobile search results */
    .search-category-panel {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
        overflow: hidden !important;
        margin-bottom: 12px !important;
        width: 100% !important;
    }
    .search-category-panel:last-child {
        margin-bottom: 0 !important;
    }
    .search-category-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        background-color: #f8fafc !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .search-category-panel-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .search-category-panel-header-title {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: rgba(0, 0, 0, 0.45) !important;
        letter-spacing: 0.02em !important;
    }
    .search-category-panel-header-left i,
    .search-category-panel-header i,
    .search-category-panel-header-icon {
        color: rgba(0, 0, 0, 0.45) !important;
    }
    .search-category-panel-header-count {
        display: none !important;
    }
    .search-category-panel-body {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .search-result-card {
        padding: 0.65rem 0.85rem !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        background-color: #ffffff !important;
        transition: background-color 0.15s ease !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .search-result-card:last-child {
        border-bottom: none !important;
    }
    .search-result-card:hover {
        background-color: #f8fafc !important;
    }
    .search-result-card-info {
        gap: 0.65rem !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .search-result-avatar,
    .search-result-card img,
    .search-result-card .search-result-avatar,
    #search-results-cards-container img,
    #search-results-cards-container .search-result-avatar,
    .search-result-card .w-11.h-11 {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        max-width: 34px !important;
        max-height: 34px !important;
        border-radius: 9999px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    .search-result-avatar i,
    .search-result-card .search-result-avatar i {
        font-size: 14px !important;
    }

    .search-result-avatar--class,
    .search-result-avatar--page {
        border-radius: 10px !important;
    }

    .search-result-card-title-row,
    #search-results-cards-container > div > div:first-child > div:last-child > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    .search-result-title,
    #search-results-cards-container h3,
    .search-result-card h3 {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    .search-role-badge,
    .search-result-card span.search-role-badge,
    .search-result-card span.rounded-full,
    #search-results-cards-container span.rounded-full {
        font-size: 10px !important;
        padding: 2px 7px !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
        border-radius: 9999px !important;
    }

    .search-result-subtitle,
    .search-result-card .search-result-subtitle,
    .search-result-card .search-result-subtitle.text-black-fade,
    #search-results-cards-container .search-result-subtitle {
        font-size: 10px !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }

    .search-result-subtitle *,
    .search-result-card .search-result-subtitle.text-black-fade *,
    .search-result-card .search-result-subtitle.text-black-fade div,
    .search-result-card .search-result-subtitle.text-black-fade span {
        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .search-result-actions,
    #search-results-cards-container > div > div.search-result-actions,
    #search-results-cards-container > div > div:last-child:not(:first-child) {
        margin-top: 0 !important;
        flex-shrink: 0 !important;
        gap: 6px !important;
    }

    .search-action-btn {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 11px !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        gap: 5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .search-action-btn i {
        font-size: 11px !important;
    }

    #search-results-empty-state {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 2rem 1rem !important;
        border-radius: 16px !important;
    }
    #search-results-empty-state .search-empty-icon-wrap,
    #search-results-empty-state .w-16.h-16 {
        width: 2.75rem !important;
        height: 2.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    #search-results-empty-state .search-empty-icon-wrap i,
    #search-results-empty-state i {
        font-size: 1.1rem !important;
        color: rgba(0, 0, 0, 0.45) !important;
    }
    #search-results-empty-title {
        font-size: 13.5px !important;
        text-align: center !important;
    }
    #search-results-empty-state p {
        font-size: 11px !important;
        text-align: center !important;
        color: rgba(0, 0, 0, 0.45) !important;
        margin: 0 auto !important;
        max-width: 280px !important;
    }
    #search-results-empty-return-btn,
    .search-results-empty-return-btn,
    #search-results-empty-state button {
        display: none !important;
    }
}

/* Mobile classroom topics form one continuous, full-width list. */
@media (max-width: 767px) {
    html body .teacher-quarter-grade-table.teacher-mobile-grade-cards .teacher-quarter-student-name > .teacher-quarter-student-avatar {
        display: none !important;
    }
    html body #subject-edit-overlay #subject-edit-form-body :is(#subject-materials-grid, #subject-topics-list) {
        display: flex !important;
        flex-direction: column !important;
        width: calc(100% + 28px) !important;
        max-width: none !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    html body #subject-edit-overlay :is(#subject-materials-grid, #subject-topics-list) > [id^="subject-topic-panel-"] {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html body #subject-edit-overlay [id^="subject-topic-panel-"] > div:first-child,
    html body #subject-edit-overlay [id^="subject-topic-panel-"] > [id^="topic-dropdown-"] {
        border-radius: 0 !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="subject-topic-panel-"] > div:first-child {
        min-height: 56px !important;
        padding: 10px 12px !important;
        align-items: flex-start !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="subject-topic-panel-"] > div:first-child > div:first-child {
        align-items: flex-start !important;
        gap: 10px !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="subject-topic-panel-"] > div:first-child > div:first-child > div:first-child {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        margin-top: 0 !important;
        font-size: 10px !important;
        line-height: 20px !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="subject-topic-panel-"] > div:first-child h4 {
        font-size: 12px !important;
        line-height: 20px !important;
        font-weight: 400 !important;
        margin: 0 !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="subject-topic-panel-"] > div:first-child h4 + span,
    html body #subject-edit-overlay #subject-materials-grid [id^="subject-topic-panel-"] > div:first-child > div:first-child > div:last-child > span {
        font-size: 10px !important;
        line-height: 14px !important;
        margin-top: 0 !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="topic-dropdown-"] {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="topic-dropdown-"] > div:has(> .sigma-attached-file-panel) {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="topic-dropdown-"] .sigma-attached-file-panel.sigma-black-fade-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background-color: #fff !important;
    }
    html body #subject-edit-overlay #subject-materials-grid [id^="topic-dropdown-"] .sigma-attached-file-panel:last-child {
        border-bottom: 0 !important;
    }
    html body #section-topic-content #topic-content-main:has(.topic-material-list-shell),
    html body #section-topic-content .topic-material-list-shell {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html body #section-topic-content :is(#handout-list, #assessment-list) {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }
    html body #section-topic-content :is(#handout-list, #assessment-list) > .sigma-black-fade-panel {
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 12px 16px !important;
    }
    html body .classroom-detail-shell #room-topics-mount .room-embedded-topics :is(.topic-main-shell, .student-topic-main-shell, .teacher-topic-main-shell) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }
    html body .room-embedded-topics :is(.topic-list, .student-topic-list, .teacher-topic-list) {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    html body .room-embedded-topics :is(.topic-card, .student-topic-card, .teacher-topic-card) {
        grid-template-columns: 80px minmax(0, 1fr) !important;
        min-height: 120px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        gap: 12px !important;
        border: 0 !important;
        border-left: 6px solid var(--icc-green, #15803d) !important;
        border-bottom: 1px solid rgba(0, 0, 0, .12) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    html body .room-embedded-topics :is(.topic-card__image-container, .student-topic-card__image-container, .teacher-topic-card__image-container) {
        width: 80px !important;
        min-width: 80px !important;
        border: 0 !important;
    }
    html body .room-embedded-topics :is(.topic-card__body, .student-topic-card__body, .teacher-topic-card__body) {
        padding: 4px 0 !important;
    }
}

.subject-quarter-context-label{font-size:14px;font-weight:600;color:#000;background:transparent}
@media(max-width:767px){
 html body #subject-edit-overlay :is(#subject-topics-quarter-pills,#subject-materials-quarter-pills):has(>.subject-quarter-context-label){background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 html body #subject-edit-overlay .subject-quarter-context-label{font-size:12px!important;line-height:18px!important;font-weight:600!important;background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
}

/* Mobile Task Progress sits in a padded card on topic and material pages. */
@media(max-width:767px){
 html body .room-embedded-topics :is(.student-topic-progress-rail,.teacher-topic-progress-rail),
 html body #section-topic-content :is(#topic-right-section,.student-topic-progress-rail,.teacher-topic-progress-rail):has(#topic-task-progress-card){
  width:100%!important;max-width:100%!important;margin:0!important;padding:20px 16px!important;box-sizing:border-box;gap:16px!important;
 }
 html body .room-embedded-topics #topic-task-progress-card,
 html body #section-topic-content :is(#topic-right-section,.student-topic-progress-rail,.teacher-topic-progress-rail) #topic-task-progress-card{
  width:100%!important;max-width:100%!important;margin:0!important;padding:16px!important;
  border:1px solid #e2e8f0!important;border-radius:20px!important;
  background:#fff!important;box-shadow:0 4px 16px rgba(0,0,0,.04)!important;box-sizing:border-box;
 }
}

/* Use the same 16px mobile gutter as the Score and Submission Details cards. */
@media(max-width:767px){
 html body .room-embedded-topics :is(.student-topic-progress-rail,.teacher-topic-progress-rail):has(#topic-task-progress-card),
 html body #section-topic-content :is(#topic-right-section,.student-topic-progress-rail,.teacher-topic-progress-rail):has(#topic-task-progress-card){
  padding-left:0!important;padding-right:0!important;
 }
 html body .room-embedded-topics #topic-task-progress-card,
 html body #section-topic-content :is(#topic-right-section,.student-topic-progress-rail,.teacher-topic-progress-rail) #topic-task-progress-card{
  width:calc(100% - 32px)!important;max-width:calc(100% - 32px)!important;
  margin-left:16px!important;margin-right:16px!important;align-self:center;
 }
}

/* Lesson details share the assessment main panel's mobile layout. */
@media(max-width:767px){
 html body #section-topic-content :is(.topic-detail-grid,.teacher-topic-page-grid):has(.lesson-material-main-card){
  margin-top:0!important;padding-top:0!important;gap:0!important;
 }
 html body #section-topic-content #topic-content-main:has(.lesson-material-main-card){
  width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;
 }
 html body #section-topic-content .lesson-material-main-card{
  width:100%!important;max-width:100%!important;margin:0!important;
  border-radius:0!important;border:0!important;border-bottom:1px solid #e2e8f0!important;
  box-shadow:none!important;padding:16px 14px 20px!important;box-sizing:border-box;
 }
 html body #section-topic-content .lesson-material-main-card h2{
  font-size:16px!important;line-height:1.35!important;
 }
}