/* PDF Text Layer for Citations */
        .textLayer {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            opacity: 1;
            line-height: 1.0;
            pointer-events: none;
            /* Let clicks pass to canvas if needed, but text selection needs events. */
        }

        .textLayer.absolute {
            pointer-events: auto;
        }

        /* Re-enable for the layer */

        .textLayer>span {
            color: transparent;
            position: absolute;
            white-space: pre;
            cursor: text;
            transform-origin: 0% 0%;
        }

        /* --- 🏛️ PREMIUM LECTURE HALL STYLES --- */
        #lectureOverlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: #ffffff;
            /* Crisp Light Slate */
            display: flex;
            flex-direction: column;
            font-family: 'Inter', sans-serif;
            color: #1e293b;
            overflow: hidden;
        }

        /* 1. TOP NAV BAR */
        .lecture-nav-top {
            height: 72px;
            background: white;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            flex-shrink: 0;
            z-index: 10;
        }

        .lecture-logo {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 2px;
            color: #0f172a;
            text-transform: uppercase;
        }

        .lecture-nav-links {
            display: flex;
            gap: 30px;
            font-size: 13px;
            font-weight: 600;
            color: #64748b;
        }

        .toolbar-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            color: #64748b;
            transition: all 0.2s;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .toolbar-btn:hover {
            background: white;
            border-color: #e2e8f0;
            color: #0f172a;
        }

        .lecture-nav-links a {
            padding: 10px 0;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            cursor: pointer;
        }

        .lecture-nav-links a.active {
            color: #0f172a;
            border-bottom-color: #0f172a;
        }

        .lecture-nav-actions {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .lecture-search-bar {
            background: #f1f5f9;
            border-radius: 10px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 240px;
        }

        .lecture-search-bar input {
            background: transparent;
            border: none;
            outline: none;
            font-size: 12px;
            color: #64748b;
            width: 100%;
        }

        /* 2. MAIN WORKSPACE */
        .lecture-workspace {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        .lecture-content-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px 60px 120px 60px;
            /* Increased bottom padding to clear floating bar */
            overflow-y: auto;
            background: #ffffff;
            position: relative;
        }

        .notebook-editor-area {
            flex: 1;
            padding: 80px 120px;
            overflow-y: auto;
            outline: none;
            font-size: 18px;
            line-height: 1.8;
            color: #1e293b;
            background: white;
        }

        /* BREADCRUMBS */
        .lecture-breadcrumbs {
            font-size: 20px;
            /* Requested size for full breadcrumb */
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: -0.5px;
            color: #94a3b8;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .lecture-breadcrumbs span.topic {
            color: #3d485a;
            font-size: 20px;
            font-weight: 900;
            text-transform: none;
        }

        /* SLIDE CARD OVERHAUL */
        .premium-slide-container {
            background: white;
            border-radius: 24px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
            display: flex;
            min-height: calc(100vh - 300px);
            width: 100%;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            margin-bottom: 60px;
            margin-top: 0px;
            /* Reduced gap */
            position: relative;
        }

        .slide-progress-dot {
            position: absolute;
            top: 24px;
            left: 24px;
            background: rgba(15, 23, 42, 0.05);
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 800;
            color: #475569;
            letter-spacing: 0.1em;
            border: 1px solid rgba(15, 23, 42, 0.1);
            z-index: 10;
            text-transform: uppercase;
        }

        .slide-left {
            flex: 1;
            padding: 80px 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .chapter-badge {
            background: #0f172a;
            color: white;
            padding: 6px 14px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            width: fit-content;
            margin-bottom: 24px;
        }

        .premium-slide-title {
            font-family: 'Playfair Display', serif;
            font-size: 56px;
            /* Increased for better visibility */
            font-weight: 900;
            color: #0f172a;
            line-height: 1.1;
            margin-bottom: 40px;
        }

        .premium-slide-title span.accent {
            color: #0e7490;
            /* Teal/Blue accent */
        }

        .premium-bullets {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .premium-bullet {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 18px;
            font-weight: 600;
            color: #334155;
            opacity: 0;
            transform: translateY(10px);
            animation: slideInUp 0.6s forwards;
        }

        .bullet-number {
            width: 36px;
            height: 36px;
            background: #f1f5f9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
            color: #64748b;
            flex-shrink: 0;
        }

        /* SECTION INTRODUCTION SLIDE */
        .intro-section-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #ede9fe, #ddd6fe);
            color: #4c1d95;
            border: 1px solid #c4b5fd;
            padding: 5px 14px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 14px;
            width: fit-content;
        }

        .intro-slide-container {
            background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 60%);
            border-color: #c4b5fd;
            box-shadow: 0 10px 40px rgba(139, 92, 246, 0.10);
        }

        .intro-slide-title {
            color: #4c1d95 !important;
            font-size: 48px !important;
        }

        .intro-bullet .bullet-number {
            background: #ede9fe;
            color: #6d28d9;
        }

        .intro-bullet {
            color: #3b0764;
        }

        /* SECTION SUMMARY BADGE */
        .summary-section-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #92400e;
            border: 1px solid #fcd34d;
            padding: 5px 14px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 14px;
            width: fit-content;
        }

        /* SUMMARY SLIDE CONTAINER */
        .summary-slide-container {
            background: linear-gradient(160deg, #fffbeb 0%, #ffffff 60%);
            border-color: #fcd34d;
            box-shadow: 0 10px 40px rgba(251, 191, 36, 0.10);
        }

        /* SUMMARY SLIDE TITLE */
        .summary-slide-title {
            color: #92400e !important;
            font-size: 44px !important;
        }

        /* SUMMARY BULLET styling */
        .summary-bullet .bullet-number {
            background: #fef3c7;
            color: #b45309;
        }

        .summary-bullet {
            color: #44403c;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-6px);
            }

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

        .slide-right {
            flex: 1;
            background: #f8fafc;
            border-left: 1px solid #e2e8f0;
            position: relative;
        }


        .slide-decoration {
            position: absolute;
            inset: 0;
            opacity: 0.4;
            pointer-events: none;
            background: url('https://www.transparenttextures.com/patterns/natural-paper.png');
        }

        /* SIDEBAR OVERHAUL */
        .premium-lecture-sidebar {
            width: 380px;
            background: white;
            border-left: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            padding: 32px 24px;
            /* Reduced padding to give more room */
            flex-shrink: 0;
            overflow: hidden;
        }

        .professor-profile {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .professor-avatar {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            background: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid #e2e8f0;
        }

        .professor-info h4 {
            font-size: 16px;
            font-weight: 800;
            color: #0f172a;
        }

        .professor-info p {
            font-size: 10px;
            font-weight: 700;
            color: #0e7490;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .professor-quote {
            background: #ffffff;
            border: 1px solid #f1f5f9;
            padding: 12px 15px;
            border-radius: 12px;
            font-size: 13.5px !important;
            color: #475569;
            line-height: 1.5 !important;
            margin: 10px;
            position: relative;

            height: auto;
            max-height: none;
            overflow: visible;
        }

        .professor-quote::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }

        .progress-label {
            font-size: 10px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
            display: block;
        }

        .progress-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
            padding-right: 8px;
            margin-bottom: 20px;
        }

        .progress-list::-webkit-scrollbar {
            width: 4px;
        }

        .progress-list::-webkit-scrollbar-thumb {
            background: #e2e8f0;
            border-radius: 10px;
        }

        .progress-list::-webkit-scrollbar-track {
            background: transparent;
        }

        .progress-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 16px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            color: #64748b;
        }

        .progress-item.active {
            background: #0f172a;
            color: white;
        }

        .progress-item.completed {
            color: #0f172a;
        }

        .progress-item-title {
            font-size: 12.5px !important;
            color: inherit;
        }

        /* TRANSCRIPT SECTION */
        .transcript-section {
            display: none;
            /* Removed as requested */
        }

        .transcript-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .transcript-title {
            font-size: 18px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .transcript-body {
            display: flex;
            gap: 40px;
        }

        .transcript-text {
            flex: 2;
            font-family: 'Playfair Display', serif;
            font-size: 22px;
            line-height: 1.8;
            color: #1e293b;
        }

        .transcript-text::first-letter {
            font-size: 48px;
            font-weight: 900;
            float: left;
            margin-right: 10px;
            line-height: 1;
            color: #0f172a;
        }

        .academic-context-box {
            flex: 1;
            background: #f8fafc;
            border-radius: 12px;
            padding: 24px;
            border: 1px solid #e2e8f0;
        }

        .context-title {
            font-size: 10px;
            font-weight: 800;
            color: #0e7490;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        .context-body {
            font-size: 13px;
            line-height: 1.6;
            color: #64748b;
        }

        /* FLOATING CONTROLS */
        .lecture-floating-bar {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border: 1px solid #e2e8f0;
            padding: 8px 20px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .lecture-floating-bar.collapsed {
            transform: translate(-50%, calc(100% + 40px));
        }

        .bar-toggle-btn {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border: 1px solid #e2e8f0;
            border-bottom: none;
            padding: 4px 12px;
            border-radius: 8px 8px 0 0;
            cursor: pointer;
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .bar-toggle-btn:hover {
            color: #6366f1;
            height: 35px;
            top: -35px;
        }

        .lecture-seek-container {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 200px;
        }

        .lecture-seek-bar {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            outline: none;
            cursor: pointer;
        }

        .lecture-seek-bar::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 12px;
            height: 12px;
            background: #6366f1;
            border-radius: 50%;
            transition: transform 0.2s;
        }

        .lecture-seek-bar::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        .lecture-time-display {
            font-family: 'JetBrains Mono', monospace;
            font-size: 11px;
            color: #64748b;
            font-weight: 700;
            white-space: nowrap;
        }

        .floating-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            color: #64748b;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s;
            padding: 8px 12px;
            border-radius: 8px;
            min-width: 80px;
        }

        .floating-btn:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

        .floating-btn i {
            color: #475569;
        }

        .floating-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* ANIMATIONS */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        /* QUIZ MODE PREMIUM */
        .premium-quiz-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .quiz-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .quiz-badge {
            background: #cffafe;
            color: #0e7490;
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 15px;
            display: inline-block;
        }

        .quiz-question-card {
            background: white;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            padding: 60px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
            margin-bottom: 40px;
        }

        .quiz-q-num {
            font-size: 12px;
            font-weight: 800;
            color: #64748b;
            margin-bottom: 20px;
        }

        .quiz-q-text {
            font-size: 28px;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.3;
            margin-bottom: 40px;
        }

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

        .premium-opt-btn {
            background: #f8fafc;
            border: 2px solid #f1f5f9;
            border-radius: 16px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 16px;
            font-weight: 700;
            color: #334155;
            width: 100%;
            text-align: left;
        }

        .premium-opt-btn:hover {
            border-color: #cbd5e1;
            background: white;
        }

        .premium-opt-btn.selected {
            border-color: #0e7490;
            background: #ecfeff;
            color: #0e7490;
        }

        .premium-opt-btn.correct {
            border-color: #10b981 !important;
            background: #f0fdf4 !important;
            color: #10b981 !important;
        }

        .premium-opt-btn.wrong {
            border-color: #ef4444 !important;
            background: #fef2f2 !important;
            color: #ef4444 !important;
        }

        .opt-radio {
            width: 20px;
            height: 20px;
            border: 2px solid #cbd5e1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .premium-opt-btn.selected .opt-radio {
            border-color: #0e7490;
            background: #0e7490;
        }

        .premium-opt-btn.selected .opt-radio::after {
            content: '✓';
            color: white;
            font-size: 12px;
        }

        .quiz-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* PROFESSOR CHAT OVERLAY */
        .ask-professor-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 255, 255, 0.98);
            z-index: 150;
            display: none;
            flex-direction: column;
            padding: 60px;
            backdrop-filter: blur(10px);
        }

        .ask-professor-overlay h2 {
            font-size: 16px;
            font-weight: 900;
            color: #0f172a;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .close-qa-btn {
            padding: 8px;
            cursor: pointer;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            border: none;
            background: transparent;
            color: #64748b;
        }

        .close-qa-btn:hover {
            background: #f1f5f9;
        }

        .close-qa-btn i {
            width: 20px;
            height: 20px;
        }

        .chat-history-premium {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-right: 20px;
        }

        .chat-bubble {
            max-width: 80%;
            padding: 16px 20px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.6;
        }

        .chat-bubble.ai {
            background: #f1f5f9;
            color: #1e293b;
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }

        .chat-bubble.user {
            background: #0f172a;
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }

        .chat-input-area {
            display: flex;
            gap: 15px;
            background: white;
            border: 1px solid #e2e8f0;
            padding: 8px;
            border-radius: 100px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        .chat-input-area input {
            flex: 1;
            border: none;
            outline: none;
            padding-left: 20px;
            font-size: 14px;
        }

        .chat-send-btn {
            width: 48px;
            height: 48px;
            background: #0f172a;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .chat-send-btn:hover {
            transform: scale(1.05);
            background: #1e293b;
        }

        .submit-q-btn {
            background: #0f172a;
            color: white;
            padding: 16px 32px;
            border-radius: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.2s;
        }

        .submit-q-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
        }

        /* --- 🎤 SPEECH-TO-TEXT MIC BUTTON --- */
        .stt-mic-btn {
            background: rgba(51, 65, 85, 0.8);
            border: 1px solid rgba(100, 116, 139, 0.5);
            color: #94a3b8;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            flex-shrink: 0;
        }

        .stt-mic-btn:hover {
            background: rgba(99, 102, 241, 0.2);
            border-color: #6366f1;
            color: #a5b4fc;
            transform: scale(1.05);
        }

        .stt-mic-btn.recording {
            background: rgba(239, 68, 68, 0.2) !important;
            border-color: #ef4444 !important;
            color: #ef4444 !important;
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), inset 0 0 15px rgba(239, 68, 68, 0.1);
            animation: sttPulse 1.5s ease-in-out infinite;
        }

        @keyframes sttPulse {

            0%,
            100% {
                box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
                transform: scale(1.08);
            }
        }

        /* Quiz Mode */
        .quiz-overlay-card {
            position: absolute;
            inset: 0;
            background: #f8fafc;
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Centered */
            justify-content: center;
            /* Centered */
            padding: 40px;
            text-align: center;
        }

        .quiz-opt-btn {
            width: 100%;
            text-align: left;
            padding: 15px;
            margin-bottom: 10px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            background: white;
            color: #334155;
            font-weight: 600;
            transition: all 0.2s;
        }

        .quiz-opt-btn:hover {
            border-color: #cbd5e1;
            background: #f1f5f9;
        }

        .quiz-opt-btn.correct {
            border-color: #10b981;
            background: #d1fae5;
            color: #065f46;
        }

        .quiz-opt-btn.wrong {
            border-color: #ef4444;
            background: #fef2f2;
            color: #991b1b;
        }

        /* Score Card */
        .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 8px solid #6366f1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            font-weight: 900;
            color: #1e293b;
            margin: 0 auto 20px auto;
        }

        /* ACADEMIC NOTEBOOK MODAL */
        .notebook-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(12px);
            z-index: 2000;
            display: none;
            padding: 24px;
            align-items: center;
            justify-content: center;
        }

        .notebook-container {
            width: 100%;
            max-width: 1500px;
            height: 94vh;
            background: #fff;
            border-radius: 20px;
            display: flex;
            overflow: hidden;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .notebook-sidebar {
            width: 360px;
            background: #fdfdfd;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: column;
            padding: 40px 24px;
        }

        .notebook-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #fafafa;
            position: relative;
        }

        .notebook-toolbar {
            padding: 12px 30px;
            background: white;
            border-bottom: 1px solid #eee;
            display: flex;
            gap: 12px;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
            z-index: 10;
        }

        .toolbar-group {
            display: flex;
            gap: 4px;
            background: #f5f5f5;
            padding: 4px;
            border-radius: 8px;
        }

        .toolbar-btn {
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            color: #666;
            transition: all 0.2s;
            cursor: pointer;
            border: none;
            background: transparent;
        }

        .toolbar-btn:hover {
            background: white;
            color: #000;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .toolbar-btn.active {
            background: white;
            color: #6366f1;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .notebook-editor-container {
            flex: 1;
            padding: 40px;
            overflow: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #e2e8f0;
            --notebook-zoom: 1;
        }

        .manuscript-pages {
            zoom: var(--notebook-zoom);
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-bottom: 24px;
        }

        .manuscript-page {
            width: 842px;
            /* A4 Width at 96 DPI */
            min-height: 1191px;
            /* A4 Height at 96 DPI */
            background: white;
            padding: 80px 100px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            outline: none;
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            line-height: 1.8;
            color: #2c3e50;
            position: relative;
        }

        .manuscript-page::after {
            content: attr(data-page-number);
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 11px;
            font-weight: 900;
            color: #cbd5e1;
            font-family: 'Inter', sans-serif;
        }

        .manuscript-paper h1,
        .manuscript-paper h2 {
            font-family: 'Playfair Display', serif;
            color: #1a1a1a;
            margin-bottom: 1em;
            font-weight: 900;
        }

        .manuscript-paper blockquote {
            border-left: 4px solid #6366f1;
            padding-left: 24px;
            margin: 30px 0;
            color: #666;
            font-style: italic;
            font-size: 0.95em;
        }

        .note-chapter-header {
            font-size: 10px;
            font-weight: 900;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .note-chapter-header::after {
            content: '';
            flex: 1;
            height: 1px;
            background: #eee;
        }

        .note-slide-row {
            padding: 12px 16px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s;
            margin-bottom: 4px;
            border: 1px solid transparent;
        }

        .note-slide-row:hover {
            background: #f5f5f5;
        }

        .note-slide-row.active-slide-row {
            background: #eef2ff !important;
            border-color: rgba(99, 102, 241, 0.2) !important;
        }

        .note-slide-row.active-slide-row .note-slide-title {
            color: #6366f1 !important;
        }

        .note-slide-title {
            font-size: 13px;
            font-weight: 700;
            color: #444;
        }

        /* --- Academic Document Styling --- */
        .manuscript-page.cover-page {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            min-height: 1191px;
            padding: 120px 80px;
        }

        .manuscript-running-header {
            font-family: 'Inter', sans-serif;
            color: #94a3b8;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            border-bottom: 1px solid #f1f5f9;
            padding-bottom: 12px;
            margin-bottom: 30px;
        }

        .manuscript-slide-view {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 30px;
        }

        .manuscript-slide-view h3 {
            font-family: 'Inter', sans-serif;
            font-size: 22px;
            font-weight: 800;
            color: #1e293b;
            margin-top: 0;
            margin-bottom: 15px;
        }

        .manuscript-transcript {
            margin-top: 20px;
        }

        .manuscript-transcript p {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            line-height: 1.85;
            color: #334155;
            text-align: justify;
        }

        .notebook-footer {
            padding: 20px 40px;
            background: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .export-btn {
            padding: 10px 20px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
            cursor: pointer;
            border: 1px solid #eee;
        }

        .export-btn.primary {
            background: #0f172a;
            color: white;
            border-color: #0f172a;
        }

        .export-btn.primary:hover {
            background: #1e293b;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
        }

        .export-btn.secondary {
            background: #f8fafc;
            color: #475569;
            border-color: #e2e8f0;
        }

        .export-btn.secondary:hover {
            background: #f1f5f9;
            color: #0f172a;
            transform: translateY(-2px);
        }

        /* --- 🛠️ UI LAYOUT FIXES: REACTIVE ZONES --- */
        /* 1. MAP CONTROLS (Zoom, Sidebar Toggle, & "Return to Exam" Button) */
        /* Moving the container moves all buttons inside it automatically */
        #mapControls {
            position: absolute;
            bottom: 20px;
            right: 20px;
            /* Default: Bottom Right of Screen */
            transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 500;
            /* Above Map, Below Sidebar */
        }

        /* ACTION: Slide to the edge of the Map Zone (50%) */
        body:has(#rightSidebar.open) #mapControls {
            right: calc(50% + 20px) !important;
        }

        /* 2. START BUTTON (Phase Control) */
        #phaseControl {
            position: absolute;
            bottom: 40px;
            left: 50%;
            /* Default: Center of Screen */
            transform: translateX(-50%);
            transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 500;
        }

        /* ACTION: Slide to Center of the Map Zone (25%) */
        body:has(#rightSidebar.open) #phaseControl {
            left: 25% !important;
        }

        /* 3. INVENTORY PANEL (Smart Shrink) */
        #inventoryPanel {
            width: 100%;
            /* Default: Full Width */
            left: 0;
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ACTION: Shrink to fit ONLY the Map Zone */
        body:has(#rightSidebar.open) #inventoryPanel {
            width: 50% !important;
            /* Stop at the halfway mark */
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            /* Visual Divider */
        }

        /* 4. FULLSCREEN SAFETY MODE */
        /* If the sidebar goes Fullscreen (Maximized), HIDE these controls */
        /* This prevents them from accidentally floating on top of your reading material */
        body:has(#rightSidebar.fullscreen) #mapControls,
        body:has(#rightSidebar.fullscreen) #phaseControl,
        body:has(#rightSidebar.fullscreen) #inventoryPanel {
            display: none !important;
        }

        /* --- 🛠️ MANUAL LAYOUT OVERRIDES (The Nuclear Option) --- */

        /* 1. Map Controls: Force them to the middle of the screen */
        #mapControls.shift-left {
            right: 50vw !important;
            /* Pin to the vertical center line */
            margin-right: 20px !important;
            /* Add breathing room from the sidebar */
            transition: right 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 2. Inventory Panel: Force it to fit the left half */
        #inventoryPanel.shrink-panel {
            width: 50vw !important;
            /* Force exact half width */
            min-width: 0 !important;
            /* CRITICAL: Overrides any "minimum size" rules blocking the shrink */
            left: 0 !important;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 3. Hide Phase Control/Start Button when sidebar is open to prevent clutter */
        /* (Since you said this one works, we leave it, but this ensures it stays centered relative to map) */
        #phaseControl.shift-left {
            left: 25% !important;
            transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* --- 🖥️ FULLSCREEN SIDEBAR MODE --- */
        #rightSidebar.fullscreen {
            width: 100vw !important;
            max-width: none !important;
            border-left: none;
            z-index: 9999;
            /* Sit on top of everything */
        }

        /* Hide controls when fullscreen to prevent accidental clicks behind the paper */
        body:has(#rightSidebar.fullscreen) #mapControls,
        body:has(#rightSidebar.fullscreen) #inventoryPanel {
            display: none !important;
        }

        /* --- 📚 READER MODE LAYOUT (KEEP THIS) --- */

        /* 1. WIDER SIDEBAR */
        #rightSidebar.open {
            width: 50vw !important;
            min-width: 500px;
            background: #f8fafc;
            /* Crisp Light Slate */
            border-left: 1px solid #e2e8f0;
            box-shadow: -10px 0 30px rgba(0, 0, 0, 0.02);
        }

        /* 2. TAB HEADER (Modern Academic Style) */
        .sidebar-tabs {
            display: flex;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            padding: 0 16px;
            height: 56px;
            align-items: flex-end;
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .tab-btn {
            padding: 12px 24px;
            background: transparent;
            color: #64748b;
            margin-right: 4px;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 3px solid transparent;
        }

        .tab-btn:hover {
            color: #0f172a;
            background: #f1f5f9;
        }

        .tab-btn.active {
            color: #6366f1;
            border-bottom-color: #6366f1;
            background: transparent;
        }

        /* 🟢 SEGMENTED CONTROL (For Internal Study Tabs) */
        .segmented-control {
            display: inline-flex;
            background: #f1f5f9;
            padding: 4px;
            border-radius: 12px;
            margin: 0 auto;
            border: 1px solid #e2e8f0;
        }

        .segment-btn {
            padding: 8px 24px;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #64748b;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .segment-btn:hover {
            color: #0f172a;
        }

        .segment-btn.active {
            background: #ffffff;
            color: #6366f1;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* 3. CONTENT AREAS */
        .sidebar-view {
            display: none;
            height: calc(100% - 56px);
            overflow-y: auto;
            position: relative;
        }

        .sidebar-view.active {
            display: block;
        }

        /* 4. PDF RENDERER STYLES */
        #tab-pdf-view {
            background-color: #f8fafc;
            padding: 20px;
            text-align: center;
        }

        .pdf-page-canvas {
            background: white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            max-width: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- 📄 NEW: ACADEMIC TEXTBOOK STYLES (REPLACES THE BOXES) --- */

        /* 1. The Paper Container (Academic Daylight Desk Vibe) */
        #tab-smart-view {
            background: #f1f5f9 !important;
            /* Soft Desk Gray for contrast against paper cards */
            padding: 60px !important;
            font-family: Georgia, 'Times New Roman', Times, serif !important;
            color: #1e293b !important;
            line-height: 1.6;
            overflow-y: auto;
        }

        /* Force headings to look like a document, not a game */
        #tab-smart-view h1,
        #tab-smart-view h2,
        #tab-smart-view h3 {
            color: #1a202c !important;
            text-shadow: none !important;
            font-weight: bold !important;
            margin-bottom: 15px !important;
        }

        /* Root Header and Abstract - Constrained Width */
        .academic-root-header,
        .lexicon-abstract {
            width: 100%;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        /* 2. Level 1: Table of Contents (Premium Syllabus Style) */
        .syllabus-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-top: 10px;
            width: 100%;
        }

        /* [NEW] GRID LAYOUT CONTROLLER: Premium Segmented */
        .grid-layout-controller {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            margin-bottom: 25px;
            padding: 4px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            width: fit-content;
            margin-left: auto;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .grid-layout-label {
            font-size: 8px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin: 0 12px;
        }

        .grid-layout-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid transparent;
            background: transparent;
            color: #64748b;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .grid-layout-btn:hover {
            background: #f1f5f9;
            color: #0f172a;
        }

        .grid-layout-btn.active {
            background: #6366f1;
            color: #fff;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }

        .grid-layout-btn svg {
            width: 18px;
            height: 18px;
        }

        /* [NEW] ACADEMIC GRID: Multi-Column Support */
        .academic-grid {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            --grid-scale: 1.0;
        }

        .academic-card,
        .lexicon-card,
        .lexicon-abstract,
        .academic-root-header {
            flex: 1 1 100%;
            min-width: 300px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: calc(40px * var(--grid-scale)) !important;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            position: relative;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
        }

        /* [NEW] TITLE CARD DESIGN (Abstract/Header) - STATIC SIZE */
        .lexicon-abstract,
        .academic-root-header {
            flex: 0 0 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 30px;
            padding: 35px 40px !important;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            text-align: center;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
            border-radius: 24px;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        /* The Institutional Frame (Double Stroke) */
        .academic-root-header::before {
            content: "";
            position: absolute;
            inset: 15px;
            border: 1px solid #f1f5f9;
            border-radius: 12px;
            pointer-events: none;
        }

        /* [NEW] The Stacked Card Effect (Second layer behind) */
        .academic-root-header::after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: -15px;
            bottom: -15px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            z-index: -1;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
            pointer-events: none;
        }

        /* Blue line removed as per user request */

        @keyframes gradientMove {
            0% {
                background-position: 0% center;
            }

            100% {
                background-position: 200% center;
            }
        }

        /* Background Emblem (The Watermark) */
        .academic-header-emblem {
            position: absolute;
            font-size: 200px;
            color: rgba(99, 102, 241, 0.03);
            pointer-events: none;
            z-index: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Structured Metadata Badges */
        .academic-metadata-bar {
            position: absolute;
            top: 35px;
            display: flex;
            gap: 20px;
            z-index: 10;
        }

        .meta-badge {
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #94a3b8;
            padding: 6px 14px;
            background: #f8fafc;
            border: 1px solid #f1f5f9;
            border-radius: 20px;
        }

        .lexicon-abstract-title,
        .academic-root-title {
            font-size: 32px !important;
            font-weight: 900;
            color: #0f172a !important;
            text-transform: none;
            letter-spacing: -1.5px;
            margin-bottom: 20px !important;
            font-family: 'Playfair Display', serif;
            line-height: 1;
            z-index: 10;
        }

        .academic-root-subtitle {
            font-size: 16px !important;
            font-weight: 800;
            color: #64748b !important;
            text-transform: uppercase;
            letter-spacing: 6px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 10;
        }

        .academic-root-subtitle::before,
        .academic-root-subtitle::after {
            content: "";
            width: 40px;
            height: 1px;
            background: #e2e8f0;
        }

        .lexicon-abstract-text,
        .academic-root-subtitle {
            font-size: 20px !important;
            color: #475569 !important;
            line-height: 1.7;
            text-align: center;
            font-family: Georgia, serif;
            max-width: 800px;
            margin: 0 auto;
        }

        /* [UNIFIED] NORMAL CARD TITLES (Scale with grid) */
        .academic-card-title,
        .lexicon-card-header,
        .quiz-question {
            font-size: calc(15px * var(--grid-scale)) !important;
            font-weight: 800;
            color: #0f172a !important;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f1f5f9;
            font-family: 'Inter', sans-serif;
            text-align: left;
            transition: all 0.4s ease;
        }

        /* Scaling Logic Classes */
        .grid-cols-2 {
            --grid-scale: 0.92;
        }

        .grid-cols-3 {
            --grid-scale: 0.85;
        }

        .grid-cols-4 {
            --grid-scale: 0.78;
        }

        .grid-cols-2 .academic-card,
        .grid-cols-2 .lexicon-card,
        .grid-cols-2 .quiz-item {
            flex: 0 0 calc(50% - 15px);
            min-width: 200px;
        }

        .grid-cols-3 .academic-card,
        .grid-cols-3 .lexicon-card,
        .grid-cols-3 .quiz-item {
            flex: 0 0 calc(33.33% - 20px);
            min-width: 150px;
        }

        .grid-cols-4 .academic-card,
        .grid-cols-4 .lexicon-card,
        .grid-cols-4 .quiz-item {
            flex: 0 0 calc(25% - 22.5px);
            min-width: 120px;
        }

        /* [ADAPTIVE CONSTRAINTS] */
        #rightSidebar:not(.fullscreen) .academic-grid {
            max-width: 1200px;
        }

        #rightSidebar.fullscreen .academic-grid {
            max-width: 100% !important;
            padding: 0 50px;
        }

        /* Hide 3/4 buttons in half-sidebar */
        #rightSidebar:not(.fullscreen) #grid-btn-3,
        #rightSidebar:not(.fullscreen) #grid-btn-4 {
            display: none !important;
        }

        /* Hide 1/2 buttons in Fullscreen */
        #rightSidebar.fullscreen #grid-btn-1,
        #rightSidebar.fullscreen #grid-btn-2 {
            display: none !important;
        }

        /* Font Scaling for Internal Elements */
        .grid-cols-2 .academic-item,
        .grid-cols-2 .lexicon-term,
        .grid-cols-2 .lexicon-definition {
            font-size: calc(18px * 0.92) !important;
        }

        .grid-cols-3 .academic-item,
        .grid-cols-3 .lexicon-term,
        .grid-cols-3 .lexicon-definition {
            font-size: calc(18px * 0.85) !important;
        }

        .grid-cols-4 .academic-item,
        .grid-cols-4 .lexicon-term,
        .grid-cols-4 .lexicon-definition {
            font-size: calc(18px * 0.78) !important;
        }




        /* [NEW] ACADEMIC CARD: Premium Paper Aesthetic */
        .academic-card,
        .lexicon-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            padding: 40px;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            display: flex;
            flex-direction: column;
        }

        .academic-card:hover,
        .lexicon-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.06);
            border-color: #6366f1;
        }

        /* Double Border Effect */
        .academic-card::before,
        .lexicon-card::before,
        .lexicon-abstract::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.03), transparent);
            pointer-events: none;
        }

        /* Individual Lexicon Entries with Separators */
        .lexicon-entry {
            margin-bottom: 2px;
            padding: 8px 15px;
            border-radius: 4px;
            transition: all 0.2s ease;
            border-bottom: 1px solid rgba(212, 196, 168, 0.3);
        }

        .lexicon-entry:last-child {
            border-bottom: none;
        }

        .lexicon-entry:hover {
            background: rgba(192, 178, 131, 0.05);
        }

        .lexicon-term {
            font-size: 18px;
            font-weight: 800;
            color: #1a1a1a;
            margin-bottom: 6px;
            font-family: Georgia, serif;
        }

        .lexicon-definition {
            font-size: 17px;
            color: #475569;
            line-height: 1.5;
            text-align: left;
            font-family: Georgia, serif;
        }

        /* 4. Hierarchical Items (Level 1) */
        .academic-item {
            margin-bottom: 12px;
            font-size: 18px;
            color: #1e293b;
            display: flex;
            align-items: flex-start;
            transition: all 0.2s ease;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .academic-item:hover {
            background: rgba(192, 178, 131, 0.1);
            transform: translateX(4px);
        }

        /* Hierarchical Indentation */
        .academic-l1 {
            padding-left: 8px;
            font-weight: 700;
        }

        .academic-l2 {
            padding-left: 35px;
            font-size: 17px;
            opacity: 0.9;
        }

        .academic-l3 {
            padding-left: 65px;
            font-size: 16px;
            opacity: 0.85;
        }

        .academic-l4 {
            padding-left: 95px;
            font-size: 15px;
            opacity: 0.8;
        }

        .academic-num {
            color: #786b59;
            font-weight: 900;
            margin-right: 12px;
            min-width: 30px;
            display: inline-block;
        }

        .academic-label {
            flex: 1;
        }

        .syllabus-footer {
            margin-top: 60px;
            padding: 40px;
            border-top: 1px double #d4c4a8;
            color: #786b59;
            font-size: 11px;
            text-align: center;
            font-style: italic;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

        /* 3. Level 2: Glossary (The "Redacted" Effect) */
        .glossary-item {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .glossary-term {
            font-weight: bold;
            font-size: 16px;
            display: block;
            margin-bottom: 4px;
        }

        .glossary-def {
            font-size: 16px;
            color: #333;
            transition: all 0.5s ease;
        }

        .glossary-def.redacted {
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
            background: #f3f4f6;
            user-select: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .glossary-def.revealed {
            color: #000;
            text-shadow: none;
            background: transparent;
            animation: highlighter 1s ease-out;
        }

        @keyframes highlighter {
            0% {
                background: #fef08a;
            }

            100% {
                background: transparent;
            }
        }

        /* --- 🏛️ ACADEMIC LEXICON (Level 2) --- */

        /* 1. The Primary Abstract (Root Node) */
        .lexicon-abstract {
            margin-bottom: 50px;
            font-family: 'Times New Roman', Times, serif;
            position: relative;
        }

        .lexicon-abstract::after {
            content: "PRIMARY ABSTRACT";
            position: absolute;
            /* Reset the inset:12px that bleeds in from the combined rule above */
            inset: auto;
            top: -10px;
            right: 20px;
            left: auto;
            bottom: auto;
            border: none;
            /* Reset border from combined rule */
            background: #fdfbf7;
            padding: 0 10px;
            font-size: 10px;
            font-weight: 900;
            color: #c0b283;
            letter-spacing: 2px;
        }

        /* 2. Lexicon Group Card (Branches) */
        .lexicon-card {
            font-family: 'Times New Roman', Times, serif;
        }

        /* 3. Individual Lexicon Entries */
        .lexicon-entry {
            margin-bottom: 2px;
            padding: 8px 15px;
            border-radius: 6px;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .lexicon-entry:hover {
            background: rgba(99, 102, 241, 0.03);
            border-color: rgba(99, 102, 241, 0.1);
        }

        .lexicon-entry.active-highlight {
            background: #fffbeb;
            border-color: #fbbf24;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
            transform: scale(1.02);
            z-index: 10;
        }

        .lexicon-term {
            font-size: 18px;
            font-weight: 800;
            color: #1a1a1a;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .lexicon-term::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #d4c4a8;
            border-radius: 50%;
        }

        .lexicon-definition {
            font-size: 16px;
            color: #333;
            line-height: 1.5;
            text-align: justify;
            padding-left: 23px;
        }

        /* Override level 2 styling */
        .glossary-card {
            background: #fdfbf7;
            border: 1px solid #d4c4a8;
            border-radius: 4px;
            padding: 30px;
            margin-bottom: 20px;
            border-left: 6px solid #6366f1;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        /* Sidebar Polish */
        #smart-notes-header {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: #64748b;
            font-weight: 700;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        #smart-notes-header::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(to right, rgba(148, 163, 184, 0.3), transparent);
        }

        /* 4. Level 3: Workbook (Inline Gaps) */
        .workbook-article {
            max-width: 100%;
            font-size: 17px;
        }

        .workbook-header {
            font-size: 20px;
            font-weight: bold;
            margin-top: 30px;
            margin-bottom: 15px;
            color: #000;
            border-bottom: 1px solid #ddd;
        }

        .workbook-paragraph {
            margin-bottom: 20px;
            text-align: justify;
        }

        .workbook-gap {
            border: none;
            border-bottom: 1px solid #000;
            background: #f0f9ff;
            padding: 0 5px;
            font-family: 'Courier New', monospace;
            font-weight: bold;
            color: #2563eb;
            text-align: center;
            min-width: 100px;
            outline: none;
            transition: background 0.2s;
        }

        .workbook-gap:focus {
            background: #dbeafe;
        }

        .workbook-gap.correct {
            color: #059669;
            border-bottom: 2px solid #059669;
            background: transparent;
        }

        .workbook-gap.wrong {
            color: #dc2626;
            border-bottom: 2px solid #dc2626;
        }

        /* --- 📖 STUDY BLOCK STRUCTURED CONTENT --- */
        .textbook-section {
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 1px solid #e2e8f0;
        }

        .textbook-section:last-of-type {
            border-bottom: none;
        }

        .textbook-header {
            font-size: 22px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #6366f1;
            font-family: 'Inter', 'Times New Roman', serif;
        }

        .textbook-para {
            font-size: 16px;
            color: #1e293b;
            line-height: 1.8;
        }

        /* Study block paragraphs */
        .study-paragraph {
            margin-bottom: 14px;
            text-align: justify;
            line-height: 1.8;
            font-size: 16px;
            color: #1e293b;
        }

        /* Level 1 bullets (main children) - dash style */
        .study-list-l1 {
            list-style: none;
            padding-left: 0;
            margin: 12px 0;
        }

        .study-list-l1>li {
            position: relative;
            padding-left: 24px;
            margin-bottom: 12px;
            font-size: 16px;
            line-height: 1.7;
            color: #1e293b;
            font-weight: 500;
        }

        .study-list-l1>li::before {
            content: "•";
            position: absolute;
            left: 0;
            top: 2px;
            /* Slight manual adjustment for the dot character's natural baseline */
            color: #6366f1;
            font-weight: 900;
            font-size: 18px;
        }

        /* Level 2 bullets (grandchildren) - dot style */
        .study-list-l2 {
            list-style: none;
            padding-left: 20px;
            margin: 8px 0 4px 0;
        }

        .study-list-l2>li {
            position: relative;
            padding-left: 22px;
            margin-bottom: 8px;
            font-size: 15px;
            line-height: 1.6;
            color: #334155;
            font-weight: 400;
        }

        .study-list-l2>li::before {
            content: "•";
            position: absolute;
            left: 4px;
            top: 1px;
            /* Slight manual adjustment for the dot character's natural baseline */
            color: #f59e0b;
            font-weight: 900;
            font-size: 18px;
        }

        /* Level 3 bullets (great-grandchildren) - triangle style */
        .study-list-l3 {
            list-style: none;
            padding-left: 20px;
            margin: 6px 0 4px 0;
        }

        .study-list-l3>li {
            position: relative;
            padding-left: 22px;
            margin-bottom: 6px;
            font-size: 14px;
            line-height: 1.6;
            color: #475569;
            font-style: italic;
        }

        .study-list-l3>li::before {
            content: "▸";
            position: absolute;
            left: 4px;
            color: #10b981;
            font-weight: 900;
            font-style: normal;
        }

        /* Workbook Input styling within study blocks (Compact Academic Design) */
        .textbook-para .workbook-input,
        .study-paragraph .workbook-input,
        .study-list-l1 .workbook-input,
        .study-list-l2 .workbook-input,
        .study-list-l3 .workbook-input {
            border: none;
            border-bottom: 1px solid #94a3b8;
            background: transparent;
            padding: 0;
            margin: 0 4px;
            font-family: inherit;
            font-size: inherit;
            font-weight: 600;
            color: #4f46e5;
            min-width: 40px;
            /* Minimal starting size */
            width: 40px;
            /* Force a small initial width */
            display: inline-block;
            vertical-align: baseline;
            outline: none;
            text-align: center;
            transition: border-color 0.2s, background-color 0.2s;
        }

        .textbook-para .workbook-input:focus,
        .study-paragraph .workbook-input:focus,
        .study-list-l1 .workbook-input:focus,
        .study-list-l2 .workbook-input:focus,
        .study-list-l3 .workbook-input:focus {
            border-bottom: 2px solid #6366f1;
            background: rgba(99, 102, 241, 0.02);
        }

        .workbook-input::placeholder {
            color: #cbd5e1;
            font-weight: 300;
        }

        /* --- 🧊 FREEZE & BLUR EFFECT (Anti-Cheat) --- */
        .game-frozen {
            filter: blur(8px) grayscale(80%);
            /* Make map blurry and gray */
            pointer-events: none !important;
            /* Stop ALL clicks on the map */
            transition: all 0.3s ease;
        }

        /* Sidebar List Styling */
        .sidebar-tree-list {
            list-style-type: disc;
            padding-left: 20px;
            color: #cbd5e1;
            /* Slate 300 */
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            line-height: 1.6;
        }

        .sidebar-tree-list li {
            margin-bottom: 6px;
        }

        .sidebar-tree-list strong {
            color: #fbbf24;
            /* Amber text for emphasis */
        }

        /* --- FIX FOR LEVEL 1 INVENTORY ITEMS --- */
        .inventory-item {
            position: relative !important;
            /* Stop floating! */
            top: auto !important;
            left: auto !important;
            transform: none !important;
            margin: 0 !important;
            flex-shrink: 0;
            /* Don't let them get squished */
            cursor: grab !important;
            z-index: 100 !important;
        }

        /* 1. The Panel Container (Force Row Layout & Visibility) */
        #inventoryPanel.inventory-mode {
            display: flex !important;
            flex-direction: row !important;
            justify-content: flex-start !important;
            /* Start from left */
            align-items: center !important;
            gap: 20px !important;
            /* Space between items */
            overflow-x: auto !important;
            /* Allow scrolling */
            padding: 0 40px !important;
            white-space: nowrap !important;
            height: 180px !important;

            /* 🟢 THE FIX: Force panel to slide up on screen */
            transform: translateY(0) !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* 2. The Items Inside (Force them to sit side-by-side) */
        #inventoryPanel.inventory-mode .node-bubble {
            position: relative !important;
            /* STOP FLOATING */
            top: auto !important;
            left: auto !important;
            transform: none !important;
            /* Remove the centering shift */
            margin: 0 !important;
            flex-shrink: 0 !important;
            /* Don't get squished */
            opacity: 1 !important;
            filter: none !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            height: 46px !important;
            box-sizing: border-box !important;
        }

        /* --- 💎 UNIFIED INVENTORY SYSTEM (LEVEL 1 + 2 + 3) --- */

        /* 1. THE SHELL: Force Level 1 to match the "Command Deck" look */
        #inventoryPanel {
            background: rgba(15, 23, 42, 0.98) !important;
            /* Solid Dark Navy */
            border-top: 4px solid #fbbf24 !important;
            /* The Signature Gold Bar */
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
            /* Ensure flex column for stacking Filter Bar + Scroll Area */
            flex-direction: column !important;
            justify-content: center !important;
        }

        /* 2. THE SCROLL WINDOW: A clean horizontal track */
        .inventory-scroll-area {
            width: 100%;
            overflow-x: auto;
            /* Allow scrolling if wide */
            display: flex;
            /* We remove 'gap' here because the wrapper handles it */
            padding: 10px 0;

            /* Scrollbar styling for a premium feel */
            scrollbar-width: thin;
            scrollbar-color: rgba(251, 191, 36, 0.3) transparent;
        }

        /* 3. THE WRAPPER: The "Smart Center" Logic */
        /* This div wraps all items. */
        /* If items < screen width -> 'margin: auto' centers them. */
        /* If items > screen width -> It expands and allows scrolling. */
        .inventory-track-wrapper {
            display: flex;
            gap: 12px;
            /* Consistent spacing */
            margin: auto;
            /* MAGIC: This centers the group */
            min-width: min-content;
            /* Prevents squishing */
            padding: 0 40px;
            /* Breathing room on sides */
        }

        /* 4. THE ITEMS: Rectangular "Tech Tiles" (Not Round Bubbles) */
        .inventory-item {
            border-radius: 8px !important;
            /* Square corners (Matches Level 2 Buttons) */
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #94a3b8 !important;
            padding: 12px 24px !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            letter-spacing: 1px !important;
            text-transform: uppercase;
            box-shadow: none !important;
            /* Remove the glowing orb effect */

            /* Interactive feel */
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* Hover State */
        .inventory-item:hover {
            background: rgba(251, 191, 36, 0.1) !important;
            /* Amber Tint */
            border-color: #fbbf24 !important;
            color: #fbbf24 !important;
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        }

        /* Dragging State */
        .inventory-item:active {
            cursor: grabbing !important;
            transform: scale(0.95) !important;
        }

        /* --- 🛠️ FIX: CENTER THE TABS & SEARCH --- */

        /* 1. The Container: Force elements to cluster in the center */
        .inventory-filter-bar {
            justify-content: center !important;
            /* Force center alignment */
            gap: 15px !important;
            /* Consistent spacing between tabs and search */
            width: 100% !important;
            padding: 0 !important;
            /* Remove side padding that might offset it */
        }

        /* 2. The Search Input: Stop it from floating right */
        .inv-search-input {
            margin-left: 0 !important;
            /* CRITICAL: Disables the "push to right" behavior */
            width: 140px !important;
            /* Fixed width for neatness */
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
            caret-color: #ffffff !important;
            padding: 6px 16px !important;
            border-radius: 99px !important;
            font-size: 10px !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            height: auto !important;
            transition: all 0.2s !important;
        }

        /* Optional: Add a nice focus state for the search */
        .inv-search-input:focus {
            width: 180px !important;
            /* Smooth expand on click */
            border-color: #6366f1 !important;
            background: rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.2) !important;
        }

        /* --- 🗂️ SMART INVENTORY TABS --- */

        /* 1. Update the Panel to be a Column (So Tabs sit above items) */
        #inventoryPanel.inventory-mode {
            flex-direction: column !important;
            /* Stack vertically */
            justify-content: flex-start !important;
            padding: 10px 0 0 0 !important;
            /* Remove side padding, keep top */
            gap: 0 !important;
            overflow: hidden !important;
            /* Handle scrolling internally */
        }

        /* 2. The Filter Bar Container */
        .inventory-filter-bar {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
            z-index: 20;
        }

        /* 3. The Filter Buttons */
        .inv-filter-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #94a3b8;
            padding: 6px 16px;
            border-radius: 99px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .inv-filter-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .inv-filter-btn.active {
            background: #6366f1;
            /* Indigo */
            color: white;
            border-color: #6366f1;
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
        }

        /* 4. The Scrollable Card Area */
        .inventory-scroll-area {
            width: 100%;
            flex: 1;
            /* Fill remaining height */
            display: flex;
            gap: 15px;
            overflow-x: auto;
            /* Scroll horizontally */
            padding: 10px 40px;
            /* Add breathing room for cards */
            align-items: center;
            /* Center cards vertically */
        }

        /* Hide scrollbar for clean look */
        .inventory-scroll-area::-webkit-scrollbar {
            height: 6px;
        }

        .inventory-scroll-area::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
        }

        /* --- 🛠️ UPDATED BOTTOM PANEL (PERFECT CENTER) --- */
        #inventoryPanel.detail-mode {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            height: 180px !important;
            padding: 0 20px !important;
            /* Reduced padding to prevent cut-off */
            background: rgba(15, 23, 42, 0.98) !important;
            border-top: 4px solid #fbbf24 !important;
            box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
            transform: translateY(0) !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 1000;
            /* Ensure it sits above everything */
        }

        .bottom-detail-content {
            width: 100%;
            max-width: 900px;
            display: flex;
            /* Flexbox for internal centering */
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .bottom-options-grid {
            display: flex;
            gap: 12px;
            justify-content: center;
            /* Center buttons horizontally */
            flex-wrap: wrap;
            /* Allow wrapping if screen is small */
            width: 100%;
            margin-top: 10px;
        }

        .bottom-option-btn {
            flex: 0 1 auto;
            /* Allow buttons to shrink/grow */
            min-width: 120px;
            max-width: 250px;
            padding: 10px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 8px;
            font-size: 13px;
            /* Slightly larger text */
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
            white-space: normal;
            /* Allow text inside button to wrap */
            line-height: 1.2;
        }

        .bottom-option-btn:hover {
            background: #fbbf24;
            color: #0f172a;
            border-color: #fbbf24;
            transform: translateY(-2px);
            font-weight: bold;
        }

        /* --- 🔴 CRITICAL INTERACTION FIXES --- */

        /* 1. Force Nodes to be Clickable & On Top */
        .node-bubble {
            pointer-events: auto !important;
            /* Force clicks */
            z-index: 9999 !important;
            /* Sit on top of everything */
            cursor: pointer !important;
            /* Show hand cursor */
            position: absolute !important;
            /* Maintain positioning */
        }

        /* 2. Make Layers Pass-Through */
        #gameCanvas,
        #world,
        #connectionLayer,
        #nodeLayer {
            pointer-events: none !important;
            /* Let clicks pass through these wrappers */
        }

        /* 3. Re-enable Dragging ONLY on the Canvas Background */
        #gameCanvas {
            pointer-events: auto !important;
        }

        .animate-shake {
            animation: shake 0.3s ease-in-out;
        }

        .ghost-slot {
            /* Styles for the empty outlines */
            border: 2px dashed rgba(255, 255, 255, 0.2) !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        /* Update .connection-line to be robust and visible */
        .connection-line {
            stroke: #6366f1;
            /* Solid Indigo Fallback */
            stroke: rgba(99, 102, 241, 0.6);
            stroke-width: 2.5px;
            fill: none;
            stroke-dasharray: none;
            filter: drop-shadow(0 0 5px rgba(99, 102, 241, 0.4));
            transition: stroke 0.3s, opacity 0.3s;
            stroke-linecap: round;
        }

        /* --- GAME STYLES --- */
        .node-bubble {
            position: absolute;
            padding: 10px 20px;
            width: max-content;
            max-width: 380px;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9));
            border: 1px solid rgba(129, 140, 248, 0.4);
            border-radius: 12px;
            color: #e2e8f0;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.3px;
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 12px rgba(99, 102, 241, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
            backdrop-filter: blur(12px);
            white-space: normal;
            z-index: 20;
        }

        .node-bubble:hover {
            transform: scale(1.06) translateY(-2px);
            background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.95));
            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(99, 102, 241, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border-color: rgba(165, 180, 252, 0.7);
            color: #ffffff;
        }

        .node-bubble.root-node {
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 100%);
            font-size: 16px;
            font-weight: 700;
            padding: 14px 28px;
            border: 2px solid rgba(165, 180, 252, 0.6);
            border-radius: 16px;
            color: #ffffff;
            letter-spacing: 0.5px;
            box-shadow:
                0 8px 32px rgba(79, 70, 229, 0.5),
                0 0 60px rgba(99, 102, 241, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.15);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .node-bubble.root-node:hover {
            box-shadow:
                0 12px 40px rgba(79, 70, 229, 0.6),
                0 0 80px rgba(99, 102, 241, 0.3),
                inset 0 2px 0 rgba(255, 255, 255, 0.2);
            transform: scale(1.08) translateY(-3px);
        }

        /* Parent nodes (nodes with children) get a subtle accent */
        .node-bubble.has-children {
            border-color: rgba(251, 191, 36, 0.4);
            box-shadow:
                0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 15px rgba(251, 191, 36, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .node-bubble.has-children:hover {
            border-color: rgba(251, 191, 36, 0.7);
            box-shadow:
                0 8px 25px rgba(0, 0, 0, 0.4),
                0 0 25px rgba(251, 191, 36, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .connection-line {
            stroke: #6366f1;
            stroke-width: 2.5px;
            fill: none;
            opacity: 0.45;
            filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.3));
        }

        /* --- 🎨 SIDEBAR CUSTOM SCROLLBAR --- */
        #rightSidebar *::-webkit-scrollbar {
            width: 8px;
        }

        #rightSidebar *::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }

        #rightSidebar *::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, 0.4);
            border-radius: 10px;
            border: 2px solid transparent;
            background-clip: content-box;
        }

        #rightSidebar *::-webkit-scrollbar-thumb:hover {
            background: rgba(100, 116, 139, 0.6);
            background-clip: content-box;
        }

        .sidebar-view {
            background: #ffffff;
            color: #0f172a;
            padding: 40px;
            font-family: 'Inter', sans-serif;
            min-height: 100%;
        }

        #tab-pdf-view {
            background: #f1f5f9;
            /* Soft Slate for contrast */
            padding: 40px;
        }

        .sidebar-view:not(.active) {
            display: none;
        }

        /* --- GLOBAL RESET --- */
        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html {
            background-color: #020617;
            overscroll-behavior-y: none;
        }

        body {
            background-color: transparent !important;
            min-height: 100vh;
        }

        /* --- DESKTOP DEFAULTS --- */
        @media (min-width: 769px) and (min-height: 601px) {
            body {
                overflow: hidden;
                height: 100vh;
            }

            #mainDashboard {
                overflow-y: auto;
            }

            .mobile-header {
                display: none !important;
            }
        }

        /* --- 🖥️ DESKTOP REPAIR BLOCK --- */
        @media (min-width: 769px) and (min-height: 601px) {
            button#convertBtn {
                width: auto !important;
                min-width: auto !important;
                padding: 12px 32px !important;
                border-radius: 9999px !important;
            }

            .printer-container {
                transform: scale(1) !important;
                height: 220px !important;
                margin-bottom: 0 !important;
            }

            #printer-panel {
                padding: 3rem !important;
                height: auto !important;
            }

            #printer-panel>div.mt-16 {
                margin-top: 4rem !important;
            }
        }

        /* --- 🛠️ UI FIXES --- */


        /* 2. Locked Node Style (For Sequential Logic) */
        .node-locked {
            opacity: 0.15;
            pointer-events: none;
            /* Cannot interact with locked nodes */
            filter: grayscale(100%);
            border-style: dotted !important;
            border-color: #334155 !important;
        }

        .node-active-target {
            border-color: #fbbf24 !important;
            /* Amber border for "Do This Next" */
            box-shadow: 0 0 15px rgba(251, 191, 36, 0.3) !important;
            animation: pulseBorder 2s infinite;
        }

        @keyframes pulseBorder {
            0% {
                border-color: #fbbf24;
            }

            50% {
                border-color: #f59e0b;
                box-shadow: 0 0 25px rgba(251, 191, 36, 0.6);
            }

            100% {
                border-color: #fbbf24;
            }
        }

        /* 3. NEW: Custom Glass Modal (Replaces ugly prompt) */
        .custom-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 200;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .custom-modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .custom-modal-box {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            padding: 2rem;
            border-radius: 1.5rem;
            max-width: 500px;
            width: 90%;
            transform: scale(0.9);
            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .custom-modal-overlay.active .custom-modal-box {
            transform: scale(1);
        }

        /* 4. Study Card (Pre-Level Screen) */
        .study-card {
            background: rgba(255, 255, 255, 0.05);
            border-left: 4px solid #6366f1;
            padding: 1rem;
            margin-bottom: 0.5rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }

        /* --- 🆕 RIGHT SIDEBAR UI (Layout Push Mode) --- */
        #rightSidebar {
            /* Remove 'position: absolute' to let it push the canvas */
            position: relative;
            width: 0;
            /* Start closed (width 0) */
            min-width: 0;
            height: 100%;

            background: rgba(15, 23, 42, 0.95);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);

            /* Transition Width instead of Transform */
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);

            overflow-y: auto;
            overflow-x: hidden;
            z-index: 90;

            /* Flex layout for internal content */
            display: flex;
            flex-direction: column;
        }

        #rightSidebar.open {
            width: 400px;
            /* Expands to push the map */
            min-width: 400px;
        }

        /* Hide content when closed to prevent ugly text wrapping */
        #rightSidebar>* {
            opacity: 0;
            transition: opacity 0.2s ease;
            white-space: nowrap;
        }

        #rightSidebar.open>* {
            opacity: 1;
            transition-delay: 0.2s;
            /* Fade in after width expands */
            white-space: normal;
        }

        #sidebarTitle {
            padding: 20px 20px 10px 20px;
            background: rgba(15, 23, 42, 0.95);
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* --- 📄 ACADEMIC DOCUMENT STYLES (Replaces Cards) --- */

        /* 1. The Container (Paper View) */
        #sidebarContent {
            font-family: 'Times New Roman', Times, serif;
            /* Academic Font */
            color: #1e293b;
            line-height: 1.6;
            padding: 40px !important;
            background: #ffffff;
            /* White Paper */
        }

        /* 2. Level 2 Study: Dictionary Style */
        .academic-dict {
            margin-bottom: 20px;
        }

        .academic-term {
            font-size: 18px;
            font-weight: bold;
            color: #000;
            margin-bottom: 4px;
            border-bottom: 1px solid #e2e8f0;
            padding-bottom: 2px;
            cursor: pointer;
        }

        .academic-def {
            font-size: 16px;
            color: #334155;
            margin-left: 20px;
            /* Indent like a dictionary */
            margin-bottom: 15px;
        }

        .academic-term:hover {
            color: #2563eb;
        }

        /* Blue highlight on hover */

        /* 3. Level 2 Exam: MCQ Quiz Sheet (Academic Upgrade) */
        .quiz-exam-header {
            flex: 0 0 100% !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 60px;
            padding: 80px 60px !important;
            border: 1px solid #e2e8f0;
            text-align: center;
            background: #ffffff;
            border-radius: 24px;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .quiz-exam-title {
            font-size: 56px !important;
            font-weight: 900;
            color: #0f172a !important;
            text-transform: none;
            letter-spacing: -1.5px;
            margin-bottom: 20px !important;
            font-family: 'Playfair Display', serif;
            line-height: 1.1;
            z-index: 10;
        }

        .quiz-exam-subtitle {
            font-size: 16px !important;
            font-weight: 800;
            color: #64748b !important;
            text-transform: uppercase;
            letter-spacing: 6px;
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 10;
        }

        .quiz-exam-subtitle::before,
        .quiz-exam-subtitle::after {
            content: "";
            width: 40px;
            height: 1px;
            background: #e2e8f0;
        }

        .quiz-item {
            flex: 1 1 100%;
            min-width: 300px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: calc(40px * var(--grid-scale)) !important;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
        }

        .quiz-question {
            /* Inherits from [UNIFIED] at line 1688 */
            text-align: left;
        }

        .quiz-options {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .quiz-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 18px;
            background: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.2s;
            font-size: calc(15px * var(--grid-scale));
            color: #475569;
            font-family: 'Inter', sans-serif;
            font-weight: 500;
        }

        .quiz-option:hover {
            border-color: #6366f1;
            background: #ffffff;
            color: #0f172a;
        }

        .quiz-option:hover {
            background: rgba(212, 196, 168, 0.15);
            border-color: #c0b283;
        }

        .quiz-option.selected {
            background: #f8fafc;
            border-color: #6366f1;
            font-weight: bold;
        }

        .quiz-radio {
            accent-color: #6366f1;
        }

        /* 4. Level 3: Textbook Article */
        .textbook-section {
            margin-bottom: 30px;
        }

        .textbook-header {
            font-size: 20px;
            font-weight: bold;
            color: #0f172a;
            margin-bottom: 10px;
        }

        .textbook-para {
            font-size: 17px;
            text-align: justify;
            margin-bottom: 15px;
        }

        /* 5. Workbook Inputs (The "Blanks") */
        .workbook-input {
            border: none;
            border-bottom: 1px solid #000;
            background: #f8fafc;
            color: #2563eb;
            font-weight: bold;
            font-family: 'Courier New', monospace;
            text-align: center;
            padding: 0 5px;
            min-width: 80px;
            outline: none;
        }

        .workbook-input:focus {
            background: #eff6ff;
            border-bottom: 2px solid #2563eb;
        }

        /* --- ☀️ LIGHT MODE: GOLDEN SUN & CRYSTAL UI --- */

        /* 1. BACKGROUND */
        body.light-mode .ocean-bg {
            background: radial-gradient(circle at 50% -25%,
                    #fffbeb 0%,
                    /* Golden Sun Core */
                    #fef3c7 20%,
                    /* Amber Glow */
                    #67e8f9 45%,
                    /* Aqua Transition */
                    #0ea5e9 70%,
                    /* Ocean Blue */
                    #0284c7 100%
                    /* Deep Blue */
                ) !important;
            opacity: 1 !important;
        }

        /* 2. SUN RAYS */
        body.light-mode .sun-rays {
            display: block !important;
        }

        body.light-mode .sun-rays::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: repeating-conic-gradient(from 0deg at 50% 0%,
                    transparent 0deg,
                    rgba(255, 250, 230, 0.6) 8deg,
                    transparent 15deg);
            animation: sunRays 60s linear infinite;
            mix-blend-mode: overlay;
        }

        /* 3. CRYSTAL PANELS (Global Base) */
        body.light-mode .glass-panel,
        body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) {
            background: rgba(255, 255, 255, 0.6) !important;
            /* Increased transparency */
            backdrop-filter: blur(20px) saturate(120%) !important;
            border: 1px solid rgba(255, 255, 255, 0.8) !important;
            box-shadow: 0 20px 60px rgba(0, 70, 100, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
        }

        /* 4. TEXT COLORS */
        body.light-mode h1,
        body.light-mode h2,
        body.light-mode h3,
        body.light-mode p,
        body.light-mode span:not(button *):not(.btn *),
        body.light-mode div:not(button *):not(.btn *),
        body.light-mode :not(button):not(.btn):not(a).font-bold.text-white {
            color: #0f172a !important;
            text-shadow: none !important;
        }

        /* Prevent text/icon overrides inside buttons & badges */
        body.light-mode button,
        body.light-mode button *,
        body.light-mode .btn,
        body.light-mode .btn * {
            color: inherit !important;
        }

        body.light-mode .text-slate-400,
        body.light-mode .text-slate-500 {
            color: #475569 !important;
            font-weight: 600 !important;
        }

        /* 5. BUTTONS */
        body.light-mode #convertBtn {
            background: #0f172a !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.3) !important;
        }

        body.light-mode #convertBtn:hover {
            transform: scale(1.05);
            background: #1e293b !important;
        }

        /* 6. INPUTS */
        body.light-mode .tech-input,
        body.light-mode #printer-panel {
            background: rgba(255, 255, 255, 0.5) !important;
            border: 1px solid #bae6fd !important;
            color: #0f172a !important;
        }

        body.light-mode select#modelSelect {
            background: rgba(236, 253, 245, 0.8) !important;
            color: #059669 !important;
            border: 1px solid #6ee7b7 !important;
            font-weight: 800 !important;
        }

        /* 7. WATER LAYERS */
        body.light-mode .deep-overlay {
            display: block !important;
            opacity: 1 !important;
            background: radial-gradient(circle, rgba(207, 250, 254, 0.1) 0%, rgba(34, 211, 238, 0.4) 100%) !important;
            backdrop-filter: blur(5px) !important;
            z-index: -40 !important;
        }

        body.light-mode i:not(button *):not(.btn *),
        body.light-mode .lucide:not(button *):not(.btn *) {
            color: #0284c7 !important;
        }

        /* --- ☀️ LIGHT MODE: UI FIXES --- */
        body.light-mode #fuelContainer>div {
            background-color: rgba(255, 255, 255, 0.95) !important;
            border: 1px solid rgba(15, 23, 42, 0.08) !important;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        body.light-mode #fuelContainer span {
            color: #334155 !important;
            font-weight: 800 !important;
        }

        body.light-mode #userDisplay {
            background: rgba(255, 255, 255, 0.95) !important;
            border: 1px solid rgba(15, 23, 42, 0.08) !important;
        }

        /* Color-invert dark PWA navigation boxes in light mode */
        body.light-mode .bg-slate-900\/80,
        body.light-mode .bg-slate-950\/80 {
            background-color: rgba(241, 245, 249, 0.9) !important;
            border-color: rgba(15, 23, 42, 0.15) !important;
        }

        /* Fix dynamic text visibility in lists */
        body.light-mode .text-slate-300 {
            color: #334155 !important;
        }

        /* Restore light text/icon rendering inside overlays that remain dark */
        body.light-mode #trashOverlay *,
        body.light-mode #videoOverlay *,
        body.light-mode #previewModal *,
        body.light-mode #arcadeSidebarLockOverlay * {
            color: inherit !important;
        }

        body.light-mode #trashOverlay i,
        body.light-mode #videoOverlay i,
        body.light-mode #previewModal i,
        body.light-mode #arcadeSidebarLockOverlay i {
            color: inherit !important;
        }

        body.light-mode #userEmail {
            color: #059669 !important;
        }

        body.light-mode thead {
            background: rgba(255, 255, 255, 0.9) !important;
            border-bottom: 2px solid #cbd5e1 !important;
        }

        body.light-mode thead th {
            color: #0f172a !important;
            font-weight: 900 !important;
            letter-spacing: 1px !important;
        }

        body.light-mode tbody tr {
            border-bottom: 1px solid #e2e8f0 !important;
        }

        body.light-mode tbody td {
            color: #334155 !important;
        }

        body.light-mode span.border-emerald-500\/30 {
            background: #ecfdf5 !important;
            border-color: #34d399 !important;
            color: #047857 !important;
            font-weight: bold !important;
        }

        body.light-mode a[download] {
            color: #0ea5e9 !important;
        }

        /* --- 🔧 NEW: VAULT & SIDEBAR COMPONENT FIXES --- */

        /* 1. VAULT BODY (The container behind the door) */
        body.light-mode .vault-body {
            background: rgba(241, 245, 249, 0.9) !important;
            /* Light Slate */
            border-color: #cbd5e1 !important;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05) !important;
        }

        /* 2. VAULT DOOR (The Metallic Gradient) */
        /* WE KEEP THE GRADIENT HERE for 3D effect, just change colors to Silver/Platinum */
        body.light-mode .vault-door {
            background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%) !important;
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1), inset 1px 1px 0 rgba(255, 255, 255, 0.8) !important;
        }

        /* 3. VAULT WHEEL */
        body.light-mode .vault-wheel {
            background: conic-gradient(from 0deg, #e2e8f0, #f8fafc, #e2e8f0) !important;
            border-color: #94a3b8 !important;
        }

        body.light-mode .vault-keypad {
            background: rgba(255, 255, 255, 0.6) !important;
            border-color: #e2e8f0 !important;
        }

        body.light-mode #lockerPin {
            background: #ffffff !important;
            color: #0f172a !important;
            border: 1px solid #cbd5e1 !important;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode .server-blade {
            background: linear-gradient(90deg, #f1f5f9, #e2e8f0) !important;
            border-color: #cbd5e1 !important;
        }

        /* Invert low opacity white borders in sidebar to dark opacity */
        body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) div,
        body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) button {
            border-color: rgba(15, 23, 42, 0.1) !important;
        }

        /* Fix specific white border classes */
        body.light-mode .border-white\/5,
        body.light-mode .border-white\/10 {
            border-color: rgba(15, 23, 42, 0.1) !important;
        }

        /* Optimize Quest & Game Overlay (keep dark aesthetic but restore text colors) */
        body.light-mode #gameOverlay *,
        body.light-mode #gameOverlay h1,
        body.light-mode #gameOverlay h2,
        body.light-mode #gameOverlay h3,
        body.light-mode #gameOverlay h4,
        body.light-mode #gameOverlay h5,
        body.light-mode #gameOverlay p,
        body.light-mode #gameOverlay span,
        body.light-mode #gameOverlay div,
        body.light-mode #gameOverlay i,
        body.light-mode #gameOverlay button {
            color: inherit !important;
            text-shadow: none !important;
        }

        /* Fix mind-map node bubbles text and border in light mode */
        body.light-mode .node-bubble {
            color: #e2e8f0 !important;
            border-color: rgba(129, 140, 248, 0.4) !important;
        }

        /* Restore text colors in arcade top header and sidebar tabs container */
        body.light-mode #arcadeOverlay header *,
        body.light-mode #arcadeOverlay .sidebar-tabs * {
            color: inherit !important;
        }

        /* Invert mobile sidebar tab bar to light background in light mode */
        body.light-mode .sidebar-tabs {
            background: #f1f5f9 !important;
            border-bottom: 1px solid #cbd5e1 !important;
        }

        body.light-mode .tab-btn {
            color: #475569 !important;
        }

        body.light-mode .tab-btn.active {
            color: #6366f1 !important;
            border-bottom-color: #6366f1 !important;
        }

        /* Fix classroom slide badges and active progress item in light mode */
        body.light-mode #lectureOverlay .chapter-badge {
            background: #0f172a !important;
            /* Keep original professional dark tag appearance */
            color: #ffffff !important;
            /* FORCE clean white text using specific selector to win specificity */
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        body.light-mode #lectureOverlay .intro-section-badge {
            color: #4c1d95 !important;
        }

        body.light-mode #lectureOverlay .summary-section-badge {
            color: #92400e !important;
        }

        body.light-mode .progress-item.active {
            background: #e0e7ff !important;
            /* light indigo background */
            color: #4338ca !important;
            /* indigo text */
        }

        body.light-mode .progress-item.active span {
            color: #4338ca !important;
            /* ensure span is also indigo */
        }

        body.light-mode .progress-item.completed {
            color: #059669 !important;
            /* professional emerald green for completed items */
        }

        body.light-mode .progress-item.completed span {
            color: #475569 !important;
            /* slate grey for completed text */
        }

        body.light-mode .progress-item span {
            color: inherit !important;
            /* inherit parent hover/active colors */
        }

        /* Quest Mode / gameOverlay overrides to keep it dark but readable in light mode */
        body.light-mode #gameOverlayHeader h2,
        body.light-mode #gameOverlayHeader p,
        body.light-mode #gameOverlayHeader span:not(button *),
        body.light-mode #gameOverlayHeader div:not(button *),
        body.light-mode #gameCanvas h1,
        body.light-mode #gameCanvas h2,
        body.light-mode #gameCanvas h3,
        body.light-mode #gameCanvas p,
        body.light-mode #gameCanvas span:not(.node-bubble),
        body.light-mode #gameCanvas div:not(.node-bubble) {
            color: #f8fafc !important;
            /* Clean light slate text */
            text-shadow: none !important;
        }

        body.light-mode #gameOverlay .text-indigo-300 {
            color: #a5b4fc !important;
            /* brighter blue-indigo for contrast */
        }

        body.light-mode #gameOverlay .text-slate-400 {
            color: #94a3b8 !important;
        }

        /* Quest buttons & map nodes contrast fixes */
        body.light-mode #gameOverlay button.bg-indigo-600,
        body.light-mode #gameOverlay #studyNavControls button.bg-indigo-600 {
            color: #ffffff !important;
            /* Force white text on active blue buttons */
            background-color: #4f46e5 !important;
        }

        body.light-mode #gameOverlay button.text-slate-400,
        body.light-mode #gameOverlay #studyNavControls button.text-slate-400 {
            color: #94a3b8 !important;
        }

        body.light-mode #gameOverlay button.text-amber-400,
        body.light-mode #gameOverlay #studyNavControls button.text-amber-400 {
            color: #fbbf24 !important;
        }

        body.light-mode #gameOverlay .node-bubble {
            color: #ffffff !important;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9)) !important;
            border-color: rgba(129, 140, 248, 0.6) !important;
        }

        body.light-mode #gameOverlay .node-bubble:hover {
            color: #ffffff !important;
            background: linear-gradient(135deg, rgba(49, 46, 129, 0.9), rgba(30, 27, 75, 0.95)) !important;
            border-color: rgba(165, 180, 252, 0.9) !important;
        }

        body.light-mode #gameOverlay .node-bubble.root-node {
            color: #ffffff !important;
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #7c3aed 100%) !important;
            border-color: rgba(165, 180, 252, 0.8) !important;
        }

        body.light-mode #gameOverlay .node-bubble.node-locked {
            color: #64748b !important;
            background: rgba(15, 23, 42, 0.8) !important;
            border-color: #334155 !important;
        }

        /* Quest Bottom/Inventory panel overrides */
        body.light-mode #inventoryPanel {
            background: rgba(15, 23, 42, 0.98) !important;
            border-top: 4px solid #fbbf24 !important;
        }

        body.light-mode #inventoryPanel .bottom-detail-text,
        body.light-mode #inventoryPanel .bottom-detail-content {
            color: #e2e8f0 !important;
        }

        body.light-mode #inventoryPanel .bottom-option-btn {
            color: #ffffff !important;
            /* Force white text for buttons in bottom panel */
        }

        body.light-mode .inv-search-input {
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }

        body.light-mode .inv-search-input::placeholder {
            color: rgba(255, 255, 255, 0.4) !important;
        }

        body.light-mode .inv-filter-btn {
            color: #94a3b8 !important;
        }

        body.light-mode .inv-filter-btn:hover {
            color: #ffffff !important;
        }

        body.light-mode .inv-filter-btn.active {
            color: #ffffff !important;
            background-color: #6366f1 !important;
            border-color: #6366f1 !important;
        }

        body.light-mode .node-bubble.inventory-item {
            color: #ffffff !important;
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9)) !important;
            border-color: rgba(129, 140, 248, 0.4) !important;
        }

        /* Arcade Mode header, tabs, and buttons overrides */
        body.light-mode #arcadeOverlay header,
        body.light-mode #arcadeOverlay header * {
            color: #ffffff !important;
            /* Ensure white text in the dark header */
        }

        body.light-mode #arcadeOverlay header button,
        body.light-mode #arcadeOverlay header button * {
            color: #94a3b8 !important;
            /* Grey color for close and exit buttons in header */
        }

        body.light-mode #arcadeOverlay header button:hover,
        body.light-mode #arcadeOverlay header button:hover * {
            color: #ffffff !important;
        }

        body.light-mode #arcadeOverlay .sidebar-tabs {
            background: #1e293b !important;
            /* Dark background to match the dark aesthetic */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        body.light-mode #arcadeOverlay .sidebar-tabs .tab-btn {
            color: #94a3b8 !important;
            /* Clean light grey tab labels */
        }

        body.light-mode #arcadeOverlay .sidebar-tabs .tab-btn.active {
            color: #818cf8 !important;
            /* Indigo text color for active tab */
            border-bottom-color: #818cf8 !important;
        }

        body.light-mode #arcadeOverlay .sidebar-tabs .tab-btn i {
            color: inherit !important;
            /* ensure tab icons inherit tab colors */
        }

        /* High contrast button text colors inside dark theme overlays (Quest/Arcade) */
        body.light-mode #arcadeOverlay button.bg-indigo-600,
        body.light-mode #arcadeOverlay button.bg-indigo-500,
        body.light-mode #arcadeOverlay button.bg-blue-600,
        body.light-mode #arcadeOverlay button.bg-violet-600,
        body.light-mode #gameOverlay button.bg-indigo-600,
        body.light-mode #gameOverlay button.bg-indigo-500,
        body.light-mode #gameOverlay button.bg-blue-600,
        body.light-mode #gameOverlay button.bg-violet-600 {
            color: #ffffff !important;
        }

        body.light-mode #arcadeOverlay button.bg-indigo-600 *,
        body.light-mode #arcadeOverlay button.bg-indigo-500 *,
        body.light-mode #arcadeOverlay button.bg-blue-600 *,
        body.light-mode #arcadeOverlay button.bg-violet-600 *,
        body.light-mode #gameOverlay button.bg-indigo-600 *,
        body.light-mode #gameOverlay button.bg-indigo-500 *,
        body.light-mode #gameOverlay button.bg-blue-600 *,
        body.light-mode #gameOverlay button.bg-violet-600 * {
            color: inherit !important;
        }

        /* --- ANIMATIONS & COMPONENTS --- */
        .ocean-bg {
            position: fixed;
            inset: 0;
            z-index: -50;
            background: radial-gradient(circle at center, #1e3a8a 0%, #020617 80%);
        }

        .fog {
            position: absolute;
            width: 200%;
            height: 100%;
            background: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png') repeat-x;
            background-size: contain;
            opacity: 0.2;
            animation: fogMove 60s linear infinite;
        }

        .deep-overlay {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, transparent 20%, rgba(2, 6, 23, 0.8) 100%);
            backdrop-filter: blur(5px) brightness(0.8);
            z-index: -40;
            pointer-events: none;
        }

        @keyframes fogMove {
            0% {
                transform: translate3d(0, 0, 0);
            }

            100% {
                transform: translate3d(-50%, 0, 0);
            }
        }

        .aquarium-container {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden;
            z-index: -45;
        }

        .fish-wrapper {
            position: absolute;
            offset-rotate: auto;
            animation: swimCurve linear infinite;
            top: 0;
            left: 0;
            will-change: transform, offset-path;
            mix-blend-mode: hard-light;
        }

        .fish-wrapper.jellyfish-move {
            offset-rotate: 0deg;
            animation: floatUp linear infinite;
            mix-blend-mode: screen;
        }

        @keyframes swimCurve {
            from {
                offset-distance: -10%;
                opacity: 0;
            }

            10% {
                opacity: 0.8;
            }

            90% {
                opacity: 0.8;
            }

            to {
                offset-distance: 110%;
                opacity: 0;
            }
        }

        .glass-panel {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .printer-container {
            perspective: 1000px;
            width: 300px;
            height: 120px;
            position: relative;
            transition: transform 0.3s ease;
        }

        .paper-input {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            width: 100px;
            height: 140px;
            background: white;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            transition: all 0.6s;
            opacity: 0;
            z-index: 5;
            pointer-events: none;
        }

        .printer-container.loaded .paper-input {
            opacity: 1;
            top: 20px;
            transform: translateX(-50%) scale(1) rotate(-2deg);
            z-index: 15;
            pointer-events: auto;
        }

        .printer-container.scanning .paper-input {
            top: 150px;
            opacity: 0;
            transform: translateX(-50%) scale(0.8);
            transition: top 1.5s ease-in, opacity 1s ease-in;
            z-index: 15;
        }

        .paper-output {
            position: absolute;
            top: 170px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 0px;
            background: white;
            z-index: 40;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            border-radius: 0 0 4px 4px;
        }

        .printer-lid {
            position: absolute;
            bottom: 100px;
            left: 0;
            width: 100%;
            height: 15px;
            background: linear-gradient(to right, #e2e8f0, #f1f5f9);
            border-radius: 20px 20px 0 0;
            transform-origin: back;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
            z-index: 30;
        }

        .output-slot {
            position: absolute;
            top: 164px;
            left: 50%;
            transform: translateX(-50%);
            width: 70%;
            height: 12px;
            background: #1e293b;
            border-radius: 10px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
            z-index: 50;
        }

        .printer-body {
            width: 100%;
            height: 100px;
            position: absolute;
            bottom: 0;
            background: linear-gradient(to bottom, #f8fafc, #cbd5e1);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.8);
            z-index: 20;
        }

        .printer-glass {
            position: absolute;
            top: -4px;
            left: 10px;
            right: 10px;
            height: 10px;
            background: linear-gradient(120deg, #1e293b, #0f172a);
            border-radius: 10px 10px 0 0;
            overflow: hidden;
            border: 1px solid #334155;
        }

        .printer-glass::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
            animation: scanLight 3s infinite;
        }

        @keyframes scanLight {
            0% {
                left: -100%;
            }

            100% {
                left: 200%;
            }
        }

        .printer-container.loaded .printer-lid {
            transform: rotateX(35deg) translateY(-10px);
        }

        .printer-container.scanning .printer-lid {
            transform: rotateX(0deg) translateY(0);
        }

        .status-light {
            position: absolute;
            right: 20px;
            top: -8px;
            width: 20px;
            height: 4px;
            background: #cbd5e1;
            border-radius: 4px;
            overflow: hidden;
        }

        .status-light::after {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            background: #10b981;
            box-shadow: 0 0 10px #10b981;
            animation: blink 2s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.3;
            }
        }

        .vault-container {
            perspective: 1200px;
            width: 100%;
            height: 320px;
            position: relative;
        }

        .vault-body {
            position: absolute;
            inset: 0;
            background: #0f172a;
            border: 4px solid #334155;
            border-radius: 16px;
            box-shadow: inset 0 0 30px #000;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }

        .vault-door {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, #cbd5e1 0%, #64748b 100%);
            border-radius: 12px;
            transform-origin: left;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
            z-index: 50;
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5), inset 1px 1px 0 rgba(255, 255, 255, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .vault-door.open {
            transform: rotateY(-105deg);
        }

        .vault-wheel {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, #94a3b8, #e2e8f0, #94a3b8);
            border: 4px solid #475569;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
            transition: transform 0.8s;
        }

        .vault-door.open .vault-wheel {
            transform: rotate(-180deg);
        }

        .vault-wheel::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 12px;
            background: #64748b;
            transform: translate(-50%, -50%);
        }

        .vault-keypad {
            margin-top: 20px;
            background: #1e293b;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #334155;
        }

        .server-blade {
            background: linear-gradient(90deg, #1e3a8a, #0f172a);
            border: 1px solid #334155;
            border-left: 4px solid #10b981;
            padding: 8px;
            margin-bottom: 6px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.5s ease;
        }

        .server-blade.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .tech-input {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #10b981;
            font-family: monospace;
        }

        .tech-input:focus {
            border-color: #10b981;
            outline: none;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
        }

        /*HISTORY PANEL FIX*/
        /* --- 🛠️ FINAL HISTORY BOX REPAIR --- */
        #history-container,
        #mainDashboard>div.w-full.mt-12.glass-panel {
            display: block !important;
            width: 100% !important;
            max-width: none !important;
            margin: 40px 0 100px 0 !important;
            /* Remove auto margin to respect grid alignment */
            min-height: 200px !important;
            clear: both !important;
            overflow-x: auto !important;
        }

        #history-container table,
        #history-container tbody,
        #history-container thead {
            display: block !important;
            width: 100% !important;
        }

        #history-container tr {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            width: 100% !important;
        }

        #history-container th,
        #history-container td {
            display: block !important;
        }

        .filename-column {
            flex: 1 1 auto !important;
            min-width: 0 !important;
        }

        .actions-column {
            flex: 0 0 auto !important;
            width: auto !important;
        }

        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {
            #history-container thead {
                display: none !important;
            }
        }

        /* --- 📱 MOBILE OPTIMIZATION --- */
        .mobile-header {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: #0f172a;
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        /* OVERSCROLL FIX */
        html.light-mode-active {
            background-color: #fffbeb !important;
        }

        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {
            .mobile-header {
                display: flex !important;
            }

            body {
                flex-direction: column !important;
                height: auto !important;
                min-height: 100vh;
                overflow-x: hidden !important;
            }

            #mainDashboard {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                width: 100% !important;
                margin: 0 !important;
                padding: 90px 15px 40px 15px !important;
            }

            #mainDashboard>div.grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 0px !important;
                width: 100% !important;
                margin-bottom: 0 !important;
            }

            #mainDashboard .glass-panel {
                width: 100% !important;
            }

            aside:not(#customLectureSidebar):not(#customArcadeSidebar) {
                position: fixed !important;
                left: -100% !important;
                top: 0;
                height: 100dvh !important;
                width: 100% !important;
                max-width: none !important;
                z-index: 9999 !important;
                background: #0f172a !important;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                display: flex !important;
                flex-direction: column !important;
            }

            aside:not(#customLectureSidebar):not(#customArcadeSidebar).open {
                transform: translateX(100%) !important;
                left: -100% !important;
            }

            aside:not(#customLectureSidebar):not(#customArcadeSidebar)>div.overflow-y-auto {
                flex: 1;
                overflow-y: auto;
                padding-bottom: 40px !important;
            }

            h2 {
                font-size: 2rem !important;
                text-align: center;
                line-height: 1.1;
                overflow-wrap: break-word;
            }

            p {
                font-size: 0.9rem !important;
                text-align: center;
                padding: 0 10px;
            }

            .max-w-4xl {
                margin-bottom: 20px !important;
                width: 100%;
            }

            #printer-panel {
                order: -1 !important;
                width: 100% !important;
                padding: 10px 0 20px 0 !important;
                margin-bottom: 12px !important;
                background: rgba(15, 23, 42, 0.4) !important;
                min-height: auto !important;
            }

            .printer-container {
                transform: scale(0.8) !important;
                transform-origin: center top !important;
                left: 0 !important;
                margin: 0 auto !important;
                height: 140px !important;
                width: 300px !important;
                display: block !important;
            }

            .output-slot {
                top: 85px !important;
                height: 8px !important;
                width: 180px !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                z-index: 45 !important;
            }

            .paper-output {
                top: 90px !important;
            }

            .printer-body {
                height: 80px !important;
                bottom: 0 !important;
            }

            .printer-lid {
                bottom: 80px !important;
            }

            #printer-panel>div.mt-16 {
                margin-top: 0px !important;
                position: relative;
                z-index: 50;
            }

            #dragLabel {
                font-size: 0.7rem !important;
                margin-bottom: 8px !important;
            }

            button#convertBtn {
                width: auto !important;
                min-width: 180px;
                padding: 10px 24px !important;
                font-size: 0.9rem !important;
            }

            th:nth-child(2),
            td:nth-child(2),
            th:nth-child(3),
            td:nth-child(3) {
                display: none;
            }

            #settings-panel {
                order: 2 !important;
                margin-bottom: 12px !important;
                overflow: hidden;
            }

            #voiceSelect {
                width: 0;
                min-width: 0;
                flex: 1 1 0%;
                text-overflow: ellipsis;
            }

            button#convertBtn {
                width: 100%;
                padding: 15px !important;
                font-size: 1rem !important;
            }
        }

        /* --- 🩸 REPLACEMENT MOBILE FIX --- */
        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {

            /* 1. MAKE SIDEBAR CLEAR (0.1 Opacity) */
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) {
                background: linear-gradient(180deg, #b0defd 0%, #adf8ff 40%, #afedf5 100%) !important;
                border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
                box-shadow: none !important;
            }

            /* 2. ENSURE TEXT IS DARK (Since background is now transparent) */
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) h1,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) h3,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) p,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) span,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) div,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) i,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) button {
                color: #0f172a !important;
                /* Dark Navy Text */
                text-shadow: none !important;
            }

            /* 3. EXCEPTION: KEEP VAULT SOLID (So you can read the pin pad) */
            body.light-mode .vault-body {
                background: rgba(241, 245, 249, 0.95) !important;
                /* Keep this solid grey */
            }

            /* 4. EXCEPTION: RESOURCE BARS */
            body.light-mode #fuelContainer>div,
            body.light-mode #userDisplay {
                background: rgba(255, 255, 255, 0.4) !important;
                border: 1px solid rgba(255, 255, 255, 0.5) !important;
            }
        }

        /* --- 🩸 FINAL COMPLETE MOBILE FIX (HEADER + SIDEBAR) --- */
        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {

            /* --- PART 1: THE SIDEBAR (Keep the Cyan Ocean look) --- */
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) {
                background: linear-gradient(180deg, #b0defd 0%, #adf8ff 40%, #afedf5 100%) !important;
                border-right: 1px solid rgba(255, 255, 255, 0.6) !important;
                box-shadow: none !important;
            }

            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar)>div,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) .overflow-y-auto {
                background: transparent !important;
                box-shadow: none !important;
                border: none !important;
            }

            /* Dark Text for Sidebar */
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) h1,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) h2,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) h3,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) p,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) span,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) i,
            body.light-mode aside:not(#customLectureSidebar):not(#customArcadeSidebar) button {
                color: #0c4a6e !important;
                /* Dark Navy */
                text-shadow: none !important;
            }

            /* Sidebar Components */
            body.light-mode #fuelContainer>div,
            body.light-mode #userDisplay {
                background: rgba(255, 255, 255, 0.5) !important;
                border: 1px solid rgba(255, 255, 255, 0.8) !important;
            }

            body.light-mode .vault-body {
                background: rgba(255, 255, 255, 0.9) !important;
                border: 1px solid #e2e8f0 !important;
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
            }

            /* --- PART 2: THE TOP HEADER (New Fix) --- */
            body.light-mode .mobile-header {
                /* Match the Sidebar Gradient */
                background: linear-gradient(to right, #c1eff5, #cbf8fc) !important;
                border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
            }

            /* Change Header Icons (Menu, Sun) & Text to Dark Navy */
            body.light-mode .mobile-header button,
            body.light-mode .mobile-header i,
            body.light-mode .mobile-header span {
                color: #0c4a6e !important;
            }

            /* Make the 'MOBILE LINK ACTIVE' text a darker green so it's readable */
            body.light-mode .mobile-header span.text-emerald-400 {
                color: #059669 !important;
            }
        }

        /* --- 🛠️ INVENTORY PANEL FIX --- */

        /* --- UPDATED: Inventory & Detail Panel --- */
        #inventoryPanel {
            /* Fixed positioning at bottom */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 180px;
            /* Fixed height */

            /* Centering Layout */
            display: flex;
            justify-content: center;
            align-items: center;

            /* Visuals */
            background: rgba(15, 23, 42, 0.95);
            border-top: 1px solid rgba(99, 102, 241, 0.3);
            /* Indigo Top Border */
            backdrop-filter: blur(12px);
            z-index: 100;

            /* Transition for showing/hiding */
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s;
        }

        /* Force Hide State */
        #inventoryPanel.force-hidden {
            transform: translateY(100%) !important;
            opacity: 0 !important;
            pointer-events: none;
        }

        /* The Centered Content Box */
        .detail-view-box {
            width: 100%;
            max-width: 800px;
            /* Readability limit */
            text-align: center;
            padding: 0 20px;

            /* Flex column to stack Title -> Content */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        /* 1. The Title (e.g., "ALU") */
        #detail-title {
            font-size: 24px;
            /* Larger */
            font-weight: 800;
            /* Extra Bold */
            letter-spacing: 4px;
            /* Wide spacing */
            color: #fbbf24;
            /* Amber Gold */
            text-transform: uppercase;
            text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
            /* Glow effect */
            margin: 0;
            padding-bottom: 8px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
            display: inline-block;
        }

        /* 2. The Definition / Content Text */
        .cool-text-content {
            font-family: 'Inter', sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #e2e8f0;
            /* Light Slate */
            max-width: 650px;
        }

        /* Label tags (DEFINITION: / CONTEXT:) */
        .info-label {
            font-size: 10px;
            font-weight: bold;
            color: #94a3b8;
            background: rgba(255, 255, 255, 0.05);
            padding: 2px 6px;
            border-radius: 4px;
            margin-right: 8px;
            vertical-align: middle;
            letter-spacing: 1px;
        }

        /* Animation for text updates */
        @keyframes slideUpFade {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

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

        .animate-update {
            animation: slideUpFade 0.3s ease-out forwards;
        }

        /* Big Title text */
        .bottom-detail-title {
            font-size: 14px;
            font-weight: 800;
            color: #fbbf24;
            /* Amber */
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }

        /* The Question/Definition text */
        .bottom-detail-text {
            font-size: 16px;
            color: #e2e8f0;
            margin-bottom: 12px;
            font-family: 'Inter', sans-serif;
        }

        /* Container for the buttons at the bottom */
        .bottom-options-grid {
            display: flex;
            gap: 12px;
            justify-content: center;
            width: 100%;
        }

        /* Large clickable buttons */
        .bottom-option-btn {
            flex: 1;
            max-width: 250px;
            padding: 10px 16px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 8px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .bottom-option-btn:hover {
            background: #fbbf24;
            color: #0f172a;
            border-color: #fbbf24;
            transform: translateY(-2px);
            font-weight: bold;
        }


        /* Ensure the panel animates smoothly when shrinking */
        #inventoryPanel {
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s;
        }

        /* --- 🕹️ REACTIVE MAP CONTROLS (Google Maps Style) --- */

        #mapControls {
            /* 1. Smooth Movement */
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

            /* 2. Fix "Not Clicking" Issue: Boost Z-Index above everything */
            z-index: 2000 !important;
        }

        /* CASE 2: Inventory Panel is OPEN -> Move Buttons Up */
        /* 180px (Panel) + 24px (Original Padding) = 204px */
        /* We check if panel is NOT hidden */
        body:has(#inventoryPanel:not(.force-hidden):not(.hidden)) #mapControls {
            bottom: 204px !important;
        }

        /* --- 🎛️ SIDEBAR CONTROLS (Min/Max) --- */

        /* 1. The Header Container (Title + Buttons) */
        .sidebar-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px 15px 20px;
            background: rgba(15, 23, 42, 0.98);
            /* Slightly darker for contrast */
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }

        /* 2. Reset the old Title style (Since it's inside the bar now) */
        #sidebarTitle {
            padding: 0 !important;
            background: transparent !important;
            border: none !important;
            position: static !important;
            margin: 0;
        }

        /* 3. The Control Buttons */
        .sidebar-ctrl-btn {
            color: #94a3b8;
            padding: 6px;
            border-radius: 6px;
            transition: all 0.2s;
            background: rgba(255, 255, 255, 0.05);
        }

        .sidebar-ctrl-btn:hover {
            color: white;
            background: rgba(255, 255, 255, 0.15);
            transform: scale(1.1);
        }

        /* 4. FULL SCREEN MODE */
        #rightSidebar.fullscreen {
            width: 100% !important;
            /* Cover everything */
            max-width: 100% !important;
            border-left: none;
            z-index: 9000;
            /* Sit above the Map but below popups */
        }

        /* 5. FULL SCREEN CONTENT ADJUSTMENT */
        /* When fullscreen, center the content for better reading */
        /* When fullscreen, use the entire screen for multi-column layouts */
        #rightSidebar.fullscreen #sidebarContent {
            max-width: 100% !important;
            margin: 0;
            width: 100%;
            padding: 40px;
        }

        @keyframes vivaPulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        @keyframes vivaBounce {

            0%,
            100% {
                transform: scaleY(0.3);
            }

            50% {
                transform: scaleY(1);
            }
        }

        .viva-bars-active .viva-bar {
            animation: vivaBounce 0.4s ease-in-out infinite;
        }

        .viva-bars-active .viva-bar:nth-child(1) {
            animation-delay: 0s;
        }

        .viva-bars-active .viva-bar:nth-child(2) {
            animation-delay: 0.08s;
        }

        .viva-bars-active .viva-bar:nth-child(3) {
            animation-delay: 0.16s;
        }

        .viva-bars-active .viva-bar:nth-child(4) {
            animation-delay: 0.24s;
        }

        .viva-bars-active .viva-bar:nth-child(5) {
            animation-delay: 0.32s;
        }

        /* ========================================================================= */
        /*  PDF-TO-VIDEO MODE STYLES                                               */
        /* ========================================================================= */

        #videoOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #0f172a;
            z-index: 1000;
            display: none;
            flex-direction: column;
        }

        #videoOverlay .video-header {
            height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            z-index: 10;
        }

        /* Setup Panel */
        #videoSetupPanel {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;
            background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
        }

        .setup-card {
            background: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border-radius: 24px;
            padding: 40px;
            width: 100%;
            max-width: 500px;
            text-align: center;
        }

        .setup-input-group {
            margin-bottom: 24px;
            text-align: left;
        }

        .setup-input-group label {
            display: block;
            color: #94a3b8;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .setup-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 12px 16px;
            color: white;
            font-size: 16px;
            outline: none;
            transition: all 0.2s;
        }

        .setup-input:focus {
            border-color: #8b5cf6;
            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
        }

        /* Video Player Workspace */
        #videoWorkspace {
            flex: 1;
            display: none;
            flex-direction: column;
            background: #000;
            position: relative;
            overflow: hidden;
        }

        .video-canvas-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: relative;
        }

        #videoCanvas {
            width: 896px;
            /* 16:9 aspect ratio */
            height: 504px;
            background: #1e293b;
            position: relative;
            overflow: hidden;
            transform-origin: center center;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
            transition: background-color 0.5s ease;
            /* Enable container queries so child fonts scale to canvas, not viewport */
            container-type: inline-size;
            container-name: videocanvas;
        }

        /* Player Controls */
        .video-controls {
            height: 80px;
            background: #0f172a;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
        }

        .video-progress-bar {
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            width: 100%;
            cursor: pointer;
            position: relative;
        }

        #videoProgressFill {
            height: 100%;
            background: #8b5cf6;
            width: 0%;
            transition: width 0.1s linear;
        }

        .video-controls-inner {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
        }

        .vid-btn {
            background: none;
            border: none;
            color: #cbd5e1;
            cursor: pointer;
            padding: 8px;
            border-radius: 8px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .vid-btn:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
        }

        .vid-btn.active {
            color: #8b5cf6;
        }

        /* Scene Animations */
        /* SplitType requires words/chars to be inline-block to animate transforms */
        .word,
        .char {
            display: inline-block;
            will-change: transform, opacity, color;
        }

        /* Parallax wrapper */
        #videoCanvas {
            overflow: hidden;
            transform-origin: center center;
            will-change: transform;
        }

        .vid-glass-panel {
            will-change: transform, opacity;
        }

        /* Global Utilities for Layouts */
        .vid-glass-panel {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            border-radius: 24px;
        }

        .vid-glass-panel.dark {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Layout: HeroTitle */
        .layout-herotitle {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            text-align: center;
            padding: 60px;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
        }

        .layout-herotitle .text-container {
            max-width: 90%;
            max-height: 85%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
        }

        .layout-herotitle h1 {
            font-size: clamp(1.8rem, 5cqw, 4rem);
            font-weight: 900;
            line-height: 1.25;
            margin: 0;
            word-wrap: break-word;
            word-break: break-word;
            overflow-wrap: break-word;
            max-width: 100%;
            text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            letter-spacing: -0.5px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            -webkit-box-orient: vertical;
        }

        .layout-herotitle p {
            font-size: clamp(1rem, 2.5cqw, 1.6rem) !important;
            line-height: 1.4 !important;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            -webkit-box-orient: vertical;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .layout-herotitle .accent-line {
            height: 6px;
            width: 100px;
            border-radius: 3px;
            box-shadow: 0 0 20px currentColor;
            flex-shrink: 0;
        }

        .layout-herotitle .media-icon {
            font-size: clamp(2rem, 5cqw, 4rem);
            text-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
            flex-shrink: 0;
        }

        /* Layout: DataGrid */
        .layout-datagrid {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            text-align: center;
            padding: 40px;
        }

        .layout-datagrid .glass-box {
            padding: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            min-width: 50%;
        }

        .layout-datagrid .label {
            font-size: clamp(0.8rem, 1.5cqw, 1.2rem);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            opacity: 0.7;
        }

        .layout-datagrid .value {
            font-size: clamp(4rem, 8cqw, 7rem);
            font-weight: 900;
            line-height: 1;
            text-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #fff, currentColor);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .layout-datagrid .description {
            font-size: clamp(0.9rem, 2cqw, 1.4rem);
            opacity: 0.9;
            max-width: 90%;
            line-height: 1.5;
            margin-top: 10px;
            word-wrap: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        /* Layout: SplitScreen */
        .layout-splitscreen {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .layout-splitscreen .left {
            flex: 5;
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            z-index: 10;
        }

        .layout-splitscreen .right {
            flex: 4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 60px;
            position: relative;
            overflow: hidden;
        }

        .layout-splitscreen .right::before {
            content: '';
            position: absolute;
            inset: -50%;
            background: conic-gradient(from 90deg at 50% 50%, var(--accent), transparent 50%);
            opacity: 0.15;
            animation: floatGradient 20s linear infinite;
            filter: blur(40px);
        }

        .layout-splitscreen h2 {
            font-size: clamp(1.5rem, 3.5cqw, 3rem);
            font-weight: 900;
            margin-bottom: 16px;
            line-height: 1.2;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        .layout-splitscreen p {
            font-size: clamp(0.85rem, 1.8cqw, 1.3rem);
            opacity: 0.85;
            line-height: 1.6;
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-width: 95%;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 6;
            line-clamp: 6;
            -webkit-box-orient: vertical;
        }

        .layout-splitscreen .right-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        /* Layout: QuoteBox */
        .layout-quotebox {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 60px;
            text-align: center;
            position: relative;
        }

        .layout-quotebox .quote-mark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30rem;
            line-height: 1;
            opacity: 0.05;
            font-family: Georgia, serif;
            z-index: 0;
        }

        .layout-quotebox .glass-quote {
            padding: 50px 80px;
            z-index: 10;
            max-width: 85%;
        }

        .layout-quotebox p.quote {
            font-size: clamp(1.2rem, 2.8cqw, 2.4rem);
            font-weight: 700;
            font-style: italic;
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 6;
            line-clamp: 6;
            -webkit-box-orient: vertical;
        }

        .layout-quotebox p.author {
            font-size: 1.2rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .layout-quotebox p.author::before {
            content: '';
            width: 30px;
            height: 2px;
            background: var(--accent);
        }

        /* Layout: ListReveal */
        .layout-listreveal {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding: 60px 80px;
            width: 100%;
        }

        .layout-listreveal h2 {
            font-size: clamp(1.5rem, 3.5cqw, 2.8rem);
            font-weight: 900;
            margin-bottom: 24px;
            word-wrap: break-word;
            flex-shrink: 0;
        }

        .layout-listreveal ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-width: 90%;
            overflow: hidden;
        }

        .layout-listreveal li {
            font-size: clamp(0.8rem, 1.8cqw, 1.3rem);
            font-weight: 600;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 12px 20px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.05);
            line-height: 1.4;
        }

        .layout-listreveal li .bullet {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 900;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* Timeline Components */
        .layout-definitioncard,
        .layout-timeline,
        .layout-infographicbar,
        .layout-proscons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding: 60px;
            width: 100%;
        }

        .layout-definitioncard {
            align-items: center;
        }

        .layout-definitioncard .card {
            padding: 40px 60px;
            width: 85%;
            max-width: 800px;
            max-height: 85%;
            overflow: hidden;
        }

        .layout-definitioncard .term {
            font-size: clamp(1.8rem, 4cqw, 3.2rem);
            font-weight: 900;
            margin-bottom: 20px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .layout-definitioncard .def {
            font-size: clamp(0.9rem, 1.8cqw, 1.4rem);
            opacity: 0.85;
            line-height: 1.6;
            word-wrap: break-word;
            overflow-wrap: break-word;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            line-clamp: 5;
            -webkit-box-orient: vertical;
        }

        .layout-proscons {
            flex-direction: row;
            gap: 40px;
            padding: 60px 80px;
        }

        .layout-proscons .pros,
        .layout-proscons .cons {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            border-radius: 24px;
        }

        .layout-proscons h3 {
            font-size: clamp(1rem, 2.2cqw, 1.8rem);
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
        }

        .layout-proscons ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
        }

        .layout-proscons li {
            font-size: clamp(0.75rem, 1.5cqw, 1.2rem);
            padding-left: 20px;
            position: relative;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.4;
            opacity: 0.9;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layout-proscons li::before {
            content: '•';
            position: absolute;
            left: 0;
            font-weight: 900;
            font-size: 1.5rem;
        }

        .layout-proscons.dark .pros h3 {
            color: #4ade80;
        }

        .layout-proscons.dark .cons h3 {
            color: #f87171;
        }

        .layout-proscons.dark .pros li::before {
            color: #4ade80;
        }

        .layout-proscons.dark .cons li::before {
            color: #f87171;
        }

        .layout-proscons.light .pros h3 {
            color: #16a34a;
        }

        .layout-proscons.light .cons h3 {
            color: #dc2626;
        }

        .layout-timeline {
            position: relative;
            padding: 60px 100px;
            align-items: center;
        }

        .layout-timeline .line {
            position: absolute;
            left: 50px;
            top: 100px;
            bottom: 80px;
            width: 4px;
            border-radius: 2px;
            opacity: 0.2;
        }

        .layout-timeline .event {
            padding-left: 50px;
            position: relative;
            margin-bottom: 40px;
            width: 100%;
            max-width: 800px;
        }

        .layout-timeline .dot {
            position: absolute;
            left: -19px;
            top: 12px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 4px solid;
            background: #0f172a;
            box-shadow: 0 0 15px currentColor;
        }

        .layout-timeline .date {
            font-size: clamp(0.7rem, 1.2cqw, 1rem);
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .layout-timeline .title {
            font-size: clamp(1rem, 2.2cqw, 1.8rem);
            font-weight: 800;
            word-wrap: break-word;
            overflow-wrap: break-word;
            line-height: 1.3;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layout-infographicbar {
            gap: 30px;
        }

        .layout-infographicbar .bar-row {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .layout-infographicbar .bar-label {
            font-size: clamp(0.75rem, 1.5cqw, 1.2rem);
            font-weight: 700;
            display: flex;
            justify-content: space-between;
        }

        .layout-infographicbar .bar-track {
            height: 32px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .layout-infographicbar .bar-fill {
            height: 100%;
            width: 0;
            border-radius: 16px;
            transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: drop-shadow(0 0 10px currentColor);
        }

        /* -------------------------------------------------------------------------- */
        /* 🎤 VIVA LOBBY & TRANSCRIPT SYSTEM (Level 5)                                */
        /* -------------------------------------------------------------------------- */

        .viva-lobby-container {
            display: grid;
            grid-template-columns: 350px 1fr 300px;
            gap: 24px;
            padding: 40px;
            min-height: 100%;
            background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.05), transparent),
                radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.05), transparent);
            font-family: 'Inter', sans-serif;
            color: #0f172a;
        }

        /* [ADAPTIVE] VIVA LOBBY: Half-Screen Support */
        #rightSidebar:not(.fullscreen) .viva-lobby-container {
            grid-template-columns: 1fr;
            padding: 20px;
            gap: 20px;
            overflow-y: auto;
        }

        #rightSidebar:not(.fullscreen) .viva-central-hub {
            order: -1;
            /* Move title to top in vertical stack */
            padding: 40px 0;
            gap: 24px;
        }

        #rightSidebar:not(.fullscreen) .viva-main-title {
            font-size: 28px !important;
        }

        #rightSidebar:not(.fullscreen) .viva-main-btn {
            padding: 18px 40px;
            font-size: 14px;
            width: 100%;
            letter-spacing: 2px;
        }

        #rightSidebar:not(.fullscreen) .candidate-avatar-frame {
            width: 100px;
            height: 100px;
        }

        /* Lobby Cards */
        .viva-lobby-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 20px;
            padding: 28px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .viva-lobby-card:hover {
            transform: translateY(-8px);
            border-color: rgba(245, 158, 11, 0.5);
            box-shadow: 0 20px 50px rgba(245, 158, 11, 0.12);
        }

        /* Candidate Profile */
        .candidate-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .candidate-avatar-frame {
            width: 130px;
            height: 130px;
            margin: 0 auto 18px;
            border-radius: 50%;
            border: 4px solid #f59e0b;
            padding: 5px;
            background: white;
            position: relative;
            box-shadow: 0 10px 25px rgba(245, 158, 11, 0.2);
        }

        .candidate-avatar-frame::after {
            content: 'VERIFIED CANDIDATE';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            background: #0f172a;
            color: #f59e0b;
            font-size: 8px;
            font-weight: 900;
            padding: 3px 12px;
            border-radius: 12px;
            letter-spacing: 1.5px;
            white-space: nowrap;
            border: 1px solid #f59e0b;
        }

        .candidate-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            background: #f1f5f9;
        }

        .candidate-name {
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 4px;
        }

        .candidate-tag {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #64748b;
            font-weight: 700;
        }

        /* Stats Grid */
        .viva-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 24px;
        }

        .viva-stat-box {
            background: #f8fafc;
            border-radius: 14px;
            padding: 16px;
            text-align: center;
            border: 1px solid #e2e8f0;
            transition: all 0.2s;
        }

        .viva-stat-box:hover {
            background: white;
            border-color: #f59e0b;
        }

        .viva-stat-val {
            font-size: 20px;
            font-weight: 800;
            color: #0f172a;
        }

        .viva-stat-lbl {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: #94a3b8;
            margin-top: 4px;
        }

        /* Tribunal Section */
        .tribunal-title {
            font-size: 11px;
            font-weight: 900;
            color: #0f172a;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .tribunal-member {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 14px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 14px;
            margin-bottom: 12px;
            border: 1px solid transparent;
            transition: all 0.2s;
        }

        .tribunal-member:hover {
            background: white;
            border-color: #f59e0b;
            transform: scale(1.02);
        }

        .member-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #0f172a;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f59e0b;
            font-size: 20px;
        }

        .member-info {
            flex: 1;
        }

        .member-name {
            font-size: 14px;
            font-weight: 700;
            color: #1e293b;
        }

        .member-role {
            font-size: 10px;
            color: #64748b;
            font-weight: 500;
        }

        /* Resource Grid */
        .resource-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .resource-btn {
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 24px 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .resource-btn:hover {
            border-color: #f59e0b;
            box-shadow: 0 12px 25px rgba(245, 158, 11, 0.15);
            transform: translateY(-4px);
        }

        .resource-btn i {
            width: 28px;
            height: 28px;
            color: #f59e0b;
        }

        .resource-btn span {
            font-size: 10px;
            font-weight: 800;
            color: #1e293b;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        /* Central Action */
        .viva-central-hub {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 40px;
        }

        .viva-status-badge {
            background: rgba(34, 197, 94, 0.08);
            color: #16a34a;
            padding: 10px 20px;
            border-radius: 40px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 2px;
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(34, 197, 94, 0.2);
            text-transform: uppercase;
        }

        .viva-pulse {
            width: 10px;
            height: 10px;
            background: #22c55e;
            border-radius: 50%;
            animation: pulse 1.8s infinite;
            box-shadow: 0 0 10px #22c55e;
        }

        .viva-main-title {
            font-family: 'Playfair Display', serif;
            font-size: clamp(32px, 5vw, 64px);
            font-weight: 900;
            color: #0f172a;
            text-align: center;
            line-height: 1;
            letter-spacing: -1px;
        }

        .viva-main-btn {
            background: #0f172a;
            color: white;
            padding: 24px 80px;
            border-radius: 18px;
            font-size: 18px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 4px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 25px 50px rgba(15, 23, 42, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .viva-main-btn:hover {
            background: #f59e0b;
            transform: scale(1.05) translateY(-5px);
            box-shadow: 0 30px 60px rgba(245, 158, 11, 0.5);
            color: #0f172a;
        }

        /* --- 📝 VIVA TRANSCRIPT (The Exam Screen) --- */
        .viva-transcript-root {
            max-width: 850px;
            margin: 0 auto;
            padding: 60px 20px;
            font-family: 'Inter', sans-serif;
            background: white;
            min-height: 100%;
            box-shadow: 0 0 100px rgba(0, 0, 0, 0.03);
            border-left: 1px solid #f1f5f9;
            border-right: 1px solid #f1f5f9;
        }

        .transcript-entry {
            margin-bottom: 40px;
            animation: fadeInSlide 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        .entry-label {
            font-size: 10px;
            font-weight: 900;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .examiner-entry .entry-label {
            color: #f59e0b;
        }

        .candidate-entry .entry-label {
            color: #6366f1;
            justify-content: flex-end;
        }

        .entry-bubble {
            padding: 24px 30px;
            border-radius: 16px;
            line-height: 1.8;
            font-size: 17px;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
        }

        .examiner-entry .entry-bubble {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-left: 6px solid #f59e0b;
            color: #0f172a;
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            background: white;
            border-color: #f59e0b;
            transform: scale(1.02);
        }

        /* --- 📄 REFERENCE PDF STYLES (PROFESSIONAL LIGHT THEME) --- */
        #pdf-view-header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid #e2e8f0;
            z-index: 10;
        }

        #pdf-view-header .text-white {
            color: #0f172a !important;
        }

        #pdf-view-header .text-indigo-400 {
            color: #6366f1 !important;
        }

        #pdf-view-header .bg-slate-950\/50 {
            background: #f1f5f9;
            border-color: #e2e8f0;
        }

        .pdf-page-canvas {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            border-radius: 4px;
            margin: 30px auto !important;
            background: white;
            display: block;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            border: 1px solid #e2e8f0;
            /* ?? VERTICAL PROTECTION: Ensure 1 page fits in screen by default */
            max-height: 85vh;
            width: auto !important;
            max-width: 95%;
        }

        #pdf-render-container {
            background: #f8fafc;
            /* Light off-white background */
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0 !important;
            scroll-behavior: smooth;
        }

        #pdf-mini-dropzone:hover {
            border-color: #6366f1;
            background: #f5f3ff;
            transform: scale(1.02);
        }

        /* --- 📱 MOBILE ORIENTATION LOCK OVERLAY (DEFAULT HIDDEN) --- */
        .orientation-lock-screen {
            display: none;
        }

        /* --- 📱 FINAL MOBILE OVERRIDES & ARCADE FIXES --- */
        #mainSidebar.open {
            left: 0 !important;
        }

        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {

            /* 1. Layout Reset (Force Overlay Mode) */
            body {
                display: block !important;
                overflow-x: hidden !important;
                position: relative !important;
                height: 100vh !important;
                width: 100vw !important;
            }

            /* 2. Left Sidebar (Infinity Logo Sidebar) */
            #mainSidebar {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                bottom: 0 !important;
                width: 280px !important;
                z-index: 10000 !important;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                display: flex !important;
                background: #0f172a !important;
            }

            #mainSidebar.open {
                transform: translateX(0) !important;
            }

            /* 3. Right Sidebar (AI/Robot Sidebar) */
            #rightSidebar {
                position: fixed !important;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                max-width: 100vw !important;
                z-index: 10001 !important;
                transform: translateX(100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                display: flex !important;
                background: #0f172a !important;
                visibility: visible !important;
                border-left: none !important;
                pointer-events: none !important;
            }

            #rightSidebar.open {
                transform: translateX(0) !important;
                pointer-events: auto !important;
            }

            /* 4. Center Content (Scanner/Printer) */
            #mainDashboard {
                width: 100vw !important;
                height: 100vh !important;
                padding: 90px 10px 10px 10px !important;
                margin: 0 !important;
                overflow-y: auto !important;
                position: relative !important;
            }

            /* 5. Mode Switcher & Tabs Fix */
            .mode-switch-container {
                width: 100% !important;
                margin-bottom: 2rem !important;
            }

            .mode-switch-container>div {
                min-width: 0 !important;
                width: 100% !important;
                flex-wrap: wrap !important;
                border-radius: 20px !important;
                padding: 8px !important;
                gap: 4px !important;
                height: auto !important;
            }

            .mode-switch-container button {
                width: 31% !important;
                flex: 1 1 30% !important;
                padding: 12px 4px !important;
                font-size: 8px !important;
            }

            #modeGlider {
                display: none !important;
            }

            .sidebar-tabs {
                background: #1e293b !important;
                padding: 10px !important;
                height: auto !important;
            }

            .tab-btn {
                padding: 8px 12px !important;
                font-size: 9px !important;
            }

            .tab-btn.active {
                color: #6366f1 !important;
                border-bottom-width: 2px !important;
            }

            /* 6. Dashboard Reordering & Gaps */
            #main-grid {
                gap: 16px !important;
            }

            #printer-panel,
            #settings-panel,
            #history-container {
                order: unset !important;
                margin-top: 0 !important;
                margin-bottom: 16px !important;
                width: 100% !important;
            }

            #printer-panel {
                order: 1 !important;
            }

            #settings-panel {
                order: 2 !important;
            }

            #history-container {
                order: 3 !important;
            }

            /* 7. History & Mode Mobile Optimization */
            .history-nav-container,
            #printer-panel>.w-full {
                width: 100% !important;
                margin-bottom: 0 !important;
            }

            .hist-tab-btn.active,
            #printer-panel button.active {
                background: rgba(99, 102, 241, 0.2) !important;
                border: 1px solid rgba(99, 102, 241, 0.4) !important;
                border-radius: 10px !important;
                color: white !important;
                box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
            }

            #printer-panel button.active {
                background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)) !important;
            }

            #history-container .px-6 {
                padding: 8px 4px !important;
            }

            #history-container td {
                padding: 12px 4px !important;
            }

            .filename-cell {
                max-width: 100% !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 10px;
                display: block;
                width: 100% !important;

            }

            #history-container td .flex.gap-2 {
                gap: 2px !important;
            }

            .actions-column button {
                white-space: nowrap !important;
                font-size: 10px !important;
                padding: 6px 10px !important;
                flex-shrink: 0 !important;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 6px;
            }

            /* 8. Arcade Mode Layout (Stacked) */
            #arcadeOverlay .flex-1.flex.overflow-hidden {
                flex-direction: column !important;
                overflow-y: auto !important;
            }

            #arcadeOverlay .w-80.flex-none,
            #arcadeOverlay #arcadeChallenges {
                width: 100% !important;
                flex: none !important;
                border-right: none !important;
                border-left: none !important;
                height: auto !important;
                max-height: 400px;
            }

            #arcadeOverlay #arcadeReader {
                padding: 20px 10px !important;
                min-height: 500px;
            }

            #arcadeOverlay #arcadeDocument {
                padding: 20px !important;
                font-size: 16px !important;
            }


            /* 9. General Refinements */
            #sidebarOverlay {
                transition: opacity 0.3s ease;
                opacity: 0;
            }

            .mobile-header span.text-emerald-400 {
                font-size: 8px;
            }

            .fixed.bottom-4.right-4 {
                bottom: 80px !important;
            }

            /* --- 📱 MOBILE ORIENTATION LOCK OVERLAY --- */
            .orientation-lock-screen {
                display: none;
            }

            @media (max-height: 600px) and (orientation: landscape) {
                body:not(.lecture-active) .orientation-lock-screen {
                    display: flex !important;
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100vw !important;
                    height: 100vh !important;
                    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%) !important;
                    z-index: 9999999 !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    align-items: center !important;
                    color: white !important;
                    font-family: 'Inter', sans-serif !important;
                }

                body:not(.lecture-active) .orientation-lock-card {
                    background: rgba(255, 255, 255, 0.03) !important;
                    backdrop-filter: blur(20px) !important;
                    border: 1px solid rgba(255, 255, 255, 0.08) !important;
                    padding: 40px 30px !important;
                    border-radius: 24px !important;
                    max-width: 320px !important;
                    text-align: center !important;
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
                    display: flex !important;
                    flex-direction: column !important;
                    align-items: center !important;
                    gap: 20px !important;
                    animation: lockFadeIn 0.5s ease-out forwards !important;
                }

                body:not(.lecture-active) .phone-rotation-wrapper {
                    position: relative !important;
                    width: 80px !important;
                    height: 80px !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    background: rgba(99, 102, 241, 0.1) !important;
                    border-radius: 50% !important;
                    border: 1px solid rgba(99, 102, 241, 0.2) !important;
                }

                body:not(.lecture-active) .phone-icon-anim {
                    color: #6366f1 !important;
                    font-size: 32px !important;
                    animation: phoneRotate 2.5s infinite ease-in-out !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                }

                body:not(.lecture-active) .phone-icon-anim i {
                    width: 36px !important;
                    height: 36px !important;
                }

                body:not(.lecture-active) .lock-title {
                    font-size: 16px !important;
                    font-weight: 800 !important;
                    letter-spacing: 1.5px !important;
                    text-transform: uppercase !important;
                    color: #ffffff !important;
                    margin: 0 !important;
                }

                body:not(.lecture-active) .lock-text {
                    font-size: 11px !important;
                    color: #94a3b8 !important;
                    line-height: 1.6 !important;
                    margin: 0 !important;
                }

                body:not(.lecture-active) .lock-badge {
                    display: flex !important;
                    align-items: center !important;
                    gap: 6px !important;
                    background: rgba(245, 158, 11, 0.1) !important;
                    border: 1px solid rgba(245, 158, 11, 0.2) !important;
                    color: #f59e0b !important;
                    padding: 6px 12px !important;
                    border-radius: 12px !important;
                    font-size: 9px !important;
                    font-weight: 700 !important;
                    text-transform: uppercase !important;
                    letter-spacing: 0.5px !important;
                }
            }

            @keyframes lockFadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.95);
                }

                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

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

                50% {
                    transform: rotate(0deg);
                }

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

            /* --- 🏛️ LECTURE MOBILE OVERRIDES (Forced Landscape Experience) --- */
            #lectureOverlay {
                position: fixed !important;
                top: 50% !important;
                left: 50% !important;
                width: 100vw !important;
                height: 100vh !important;
                transform: translate(-50%, -50%) rotate(0deg) !important;
                transform-origin: center center !important;
                background: white !important;
                z-index: 99999 !important;
                transition: none !important;
            }



            .lecture-nav-top {
                height: 40px !important;
                padding: 0 10px !important;
            }

            .lecture-logo {
                font-size: 11px !important;
                letter-spacing: 0px !important;
            }

            .lecture-workspace {
                flex-direction: row !important;
                height: calc(100% - 40px) !important;
                overflow: hidden !important;
            }

            .lecture-content-area {
                padding: 10px 10px 100px 10px !important;
                flex: 1 !important;
                height: 100% !important;
                overflow-y: auto !important;
            }

            .lecture-breadcrumbs {
                font-size: 9px !important;
                margin-bottom: 6px !important;
            }

            .premium-slide-container {
                flex-direction: row !important;
                height: auto !important;
                min-height: 80% !important;
                margin-bottom: 20px !important;
                border-radius: 10px !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
                overflow: hidden !important;
            }

            .slide-left {
                padding: 30px 20px !important;
                flex: 1 !important;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .chapter-badge,
            .intro-section-badge {
                font-size: 8px !important;
                padding: 4px 8px !important;
                margin-bottom: 12px !important;
                letter-spacing: 0.5px !important;
            }

            .premium-slide-title {
                font-size: 18px !important;
                line-height: 1.2 !important;
                margin-bottom: 15px !important;
            }

            .premium-bullets {
                gap: 10px !important;
            }

            .premium-bullet {
                font-size: 12px !important;
                gap: 8px !important;
            }

            .bullet-number {
                width: 24px !important;
                height: 24px !important;
                font-size: 9px !important;
            }

            .premium-lecture-sidebar {
                width: 220px !important;
                height: 100% !important;
                border-left: 1px solid #eee !important;
                border-top: none !important;
                padding: 10px !important;
                display: flex !important;
                flex-direction: column !important;
                background: #fff !important;
                flex-shrink: 0 !important;
            }

            .tab-btn.active {
                color: #6366f1 !important;
                border-bottom-width: 2px !important;
            }

            /* 6. Dashboard Reordering & Gaps */
            #main-grid {
                gap: 16px !important;
            }

            #printer-panel,
            #settings-panel,
            #history-container {
                order: unset !important;
                margin-top: 0 !important;
                margin-bottom: 16px !important;
                width: 100% !important;
            }

            #printer-panel {
                order: 1 !important;
            }

            #settings-panel {
                order: 2 !important;
            }

            #history-container {
                order: 3 !important;
            }

            /* 7. History & Mode Mobile Optimization */
            .history-nav-container,
            #printer-panel>.w-full {
                width: 100% !important;
                margin-bottom: 0 !important;
            }

            .hist-tab-btn.active,
            #printer-panel button.active {
                background: rgba(99, 102, 241, 0.2) !important;
                border: 1px solid rgba(99, 102, 241, 0.4) !important;
                border-radius: 10px !important;
                color: white !important;
                box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
            }

            #printer-panel button.active {
                background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)) !important;
            }

            #history-container .px-6 {
                padding: 8px 4px !important;
            }

            #history-container td {
                padding: 12px 4px !important;
            }

            .filename-cell {
                max-width: 100% !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 10px;
                display: block;
                width: 100% !important;

            }

            #history-container td .flex.gap-2 {
                gap: 2px !important;
            }

            .actions-column button {
                white-space: nowrap !important;
                font-size: 10px !important;
                padding: 6px 10px !important;
                flex-shrink: 0 !important;
                background: rgba(255, 255, 255, 0.05);
                border-radius: 6px;
            }

            /* 8. Arcade Mode Layout (Stacked) */
            #arcadeOverlay .flex-1.flex.overflow-hidden {
                flex-direction: column !important;
                overflow-y: auto !important;
            }

            #arcadeOverlay .w-80.flex-none,
            #arcadeOverlay #arcadeChallenges {
                width: 100% !important;
                flex: none !important;
                border-right: none !important;
                border-left: none !important;
                height: auto !important;
                max-height: 400px;
            }

            #arcadeOverlay #arcadeReader {
                padding: 20px 10px !important;
                min-height: 500px;
            }

            #arcadeOverlay #arcadeDocument {
                padding: 20px !important;
                font-size: 16px !important;
            }

            /* 9. General Refinements */
            #sidebarOverlay {
                transition: opacity 0.3s ease;
                opacity: 0;
            }

            .mobile-header span.text-emerald-400 {
                font-size: 8px;
            }

            .fixed.bottom-4.right-4 {
                bottom: 80px !important;
            }

            /* 10. Mobile Sidebar Card Grid & Fullscreen Toggles */
            .grid-layout-controller {
                display: none !important;
            }

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

            .academic-grid {
                display: flex !important;
                flex-direction: column !important;
            }

            .academic-grid>.academic-card,
            .academic-grid>.lexicon-card,
            .academic-grid>.quiz-item {
                flex: 1 1 100% !important;
                width: 100% !important;
            }

            /* 11. Mobile Inventory Footer Panel Optimization */
            #inventoryPanel.inventory-mode {
                height: 175px !important;
                padding: 8px 0 0 0 !important;
                background: rgba(15, 23, 42, 0.95) !important;
            }

            .inventory-filter-bar {
                display: flex !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                justify-content: flex-start !important;
                padding: 0 16px 6px 16px !important;
                gap: 8px !important;
                width: 100% !important;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                margin-bottom: 4px !important;
            }

            .inventory-filter-bar::-webkit-scrollbar {
                display: none;
            }

            .inv-filter-btn {
                flex-shrink: 0 !important;
            }

            .inv-search-input {
                flex-shrink: 0 !important;
                width: 120px !important;
            }

            .inventory-scroll-area {
                display: flex !important;
                flex-direction: column !important;
                gap: 4px !important;
                flex: 1 !important;
                width: 100% !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
            }

            .inventory-track-wrapper {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 4px !important;
                padding: 0 16px !important;
                width: max-content !important;
            }

            #inventoryPanel.inventory-mode .node-bubble {
                padding: 0 12px !important;
                font-size: 11px !important;
                border-radius: 8px !important;
                height: 38px !important;
            }



            /* --- 🏛️ LECTURE MOBILE OVERRIDES (Forced Landscape Experience) --- */
            #lectureOverlay {
                position: fixed !important;
                top: 50% !important;
                left: 50% !important;
                width: 100vw !important;
                height: 100vh !important;
                transform: translate(-50%, -50%) rotate(0deg) !important;
                transform-origin: center center !important;
                background: white !important;
                z-index: 99999 !important;
                transition: none !important;
            }

            @media (orientation: portrait) {
                #lectureOverlay {
                    position: fixed !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100vw !important;
                    height: 100vh !important;
                    transform: none !important;
                    display: flex !important;
                    flex-direction: column !important;
                    z-index: 99999 !important;
                }

                .lecture-workspace {
                    flex-direction: column !important;
                    height: calc(100% - 52px) !important;
                    /* Adjusted for larger header */
                }

                .lecture-main-grid {
                    flex-direction: column !important;
                    width: 100% !important;
                    height: 100% !important;
                }

                #box-slide {
                    width: 100% !important;
                    flex: 1.8 !important;
                    min-width: 0 !important;
                    height: 0 !important;
                    border-bottom: 1px solid #e2e8f0 !important;
                }

                #box-script {
                    width: 100% !important;
                    flex: 1.2 !important;
                    min-width: 0 !important;
                    height: 0 !important;
                    border-left: none !important;
                    border-top: 1px solid #e2e8f0 !important;
                    border-bottom: 1px solid #e2e8f0 !important;
                }

                #box-progress {
                    width: 100% !important;
                    flex: 1 !important;
                    min-width: 0 !important;
                    height: 0 !important;
                    border-left: none !important;
                    border-top: none !important;
                }

                /* Collapse hidden boxes vertically so visible ones fill empty space */
                .lecture-box.hidden-box {
                    height: 0 !important;
                    min-height: 0 !important;
                    flex: 0 !important;
                    padding: 0 !important;
                    margin: 0 !important;
                    border: none !important;
                }

                /* Make resizers horizontal drag handles in portrait */
                .box-resizer {
                    display: block !important;
                    width: 100% !important;
                    height: 12px !important;
                    cursor: row-resize !important;
                    border-left: none !important;
                    border-top: 1px solid #f1f5f9 !important;
                    border-bottom: 1px solid #f1f5f9 !important;
                    background: #ffffff !important;
                    position: relative;
                }

                .box-resizer::after {
                    content: '' !important;
                    position: absolute !important;
                    top: 50% !important;
                    left: 50% !important;
                    transform: translate(-50%, -50%) !important;
                    width: 30px !important;
                    height: 2px !important;
                    background: #cbd5e1 !important;
                    border-radius: 2px !important;
                }

                .premium-slide-container {
                    flex-direction: column !important;
                    min-height: 0 !important;
                    height: 100% !important;
                    margin-bottom: 0 !important;
                    border-radius: 8px !important;
                }

                .slide-left {
                    padding: 16px !important;
                    overflow-y: auto !important;
                }

                .premium-slide-title {
                    font-size: 16px !important;
                    margin-bottom: 10px !important;
                }

                .premium-bullets {
                    gap: 6px !important;
                }

                .premium-bullet {
                    font-size: 11px !important;
                    gap: 6px !important;
                }

                .lecture-floating-bar {
                    position: absolute !important;
                    bottom: 10px !important;
                    left: 10px !important;
                    right: 10px !important;
                    width: auto !important;
                    transform: none !important;
                    z-index: 1000 !important;
                }

                /* Header layout optimization */
                .lecture-nav-top {
                    height: auto !important;
                    min-height: 52px !important;
                    padding: 8px 12px !important;
                    gap: 10px !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: space-between !important;
                }

                .lecture-logo {
                    font-size: 12px !important;
                    line-height: 1.3 !important;
                    font-weight: 800 !important;
                    max-width: 65% !important;
                    white-space: normal !important;
                    letter-spacing: 0px !important;
                }

                .lecture-nav-links button {
                    padding: 6px 12px !important;
                    font-size: 9px !important;
                    font-weight: 800 !important;
                    border-radius: 6px !important;
                }

                #lectureHeaderRestores button {
                    padding: 4px 10px !important;
                    font-size: 9px !important;
                    border-radius: 6px !important;
                }

                /* Optimize Notebook for Portrait */
                .manuscript-page {
                    padding: 16px 12px !important;
                    font-size: 13px !important;
                }

                .notebook-toolbar {
                    padding: 6px 8px !important;
                    gap: 6px !important;
                }

                .notebook-toolbar h2 {
                    display: none !important;
                }

                .notebook-toolbar .toolbar-group:first-of-type {
                    display: none !important;
                }

                .notebook-toolbar .toolbar-btn {
                    padding: 4px 6px !important;
                    height: auto !important;
                    width: auto !important;
                }

                /* Optimize Ask Professor Overlay for Portrait */
                .ask-professor-overlay {
                    padding: 12px !important;
                }

                .ask-professor-overlay h2 {
                    font-size: 12px !important;
                }

                .chat-bubble {
                    font-size: 12px !important;
                    line-height: 1.5 !important;
                    max-width: 90% !important;
                    padding: 10px 14px !important;
                }

                .ask-professor-overlay .chat-input-area {
                    padding: 6px 12px !important;
                    border-radius: 24px !important;
                }

                .ask-professor-overlay .chat-input-area input {
                    font-size: 12px !important;
                }

                .ask-professor-overlay .chat-send-btn {
                    width: 36px !important;
                    height: 36px !important;
                }
            }

            .lecture-nav-top {
                height: 40px !important;
                padding: 0 10px !important;
            }

            .lecture-logo {
                font-size: 11px !important;
                letter-spacing: 0px !important;
            }

            .lecture-workspace {
                flex-direction: row !important;
                height: calc(100% - 40px) !important;
                overflow: hidden !important;
            }

            .lecture-content-area {
                padding: 10px 10px 100px 10px !important;
                flex: 1 !important;
                height: 100% !important;
                overflow-y: auto !important;
            }

            .lecture-breadcrumbs {
                font-size: 9px !important;
                margin-bottom: 6px !important;
            }

            .premium-slide-container {
                flex-direction: row !important;
                height: auto !important;
                min-height: 80% !important;
                margin-bottom: 20px !important;
                border-radius: 10px !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
                overflow: hidden !important;
            }

            .slide-left {
                padding: 30px 20px !important;
                flex: 1 !important;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .chapter-badge,
            .intro-section-badge {
                font-size: 8px !important;
                padding: 4px 8px !important;
                margin-bottom: 12px !important;
                letter-spacing: 0.5px !important;
            }

            .premium-slide-title {
                font-size: 18px !important;
                line-height: 1.2 !important;
                margin-bottom: 15px !important;
            }

            .premium-bullets {
                gap: 10px !important;
            }

            .premium-bullet {
                font-size: 12px !important;
                gap: 8px !important;
            }

            .bullet-number {
                width: 24px !important;
                height: 24px !important;
                font-size: 9px !important;
            }

            .premium-lecture-sidebar {
                width: 220px !important;
                height: 100% !important;
                border-left: 1px solid #eee !important;
                border-top: none !important;
                padding: 10px !important;
                display: flex !important;
                flex-direction: column !important;
                background: #fff !important;
                flex-shrink: 0 !important;
            }

            .progress-list {
                max-height: none !important;
                flex: 1 !important;
                overflow-y: auto !important;
            }

            .lecture-floating-bar {
                left: 10px !important;
                right: 10px !important;
                width: auto !important;
                transform: none !important;
                bottom: 15px !important;
                padding: 6px 12px !important;
                gap: 5px !important;
                border-radius: 12px !important;
                justify-content: center !important;
                z-index: 100 !important;
            }

            .bar-toggle-btn {
                display: flex !important;
            }

            .floating-btn {
                padding: 6px 10px !important;
                font-size: 9px !important;
            }

            /* --- 🧠 PREMIUM QUIZ MOBILE OVERRIDES --- */
            #slideStage {
                padding: 15px !important;
            }

            .premium-quiz-container {
                max-width: 100% !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            .quiz-header {
                margin-bottom: 24px !important;
            }

            .quiz-header h2 {
                font-size: 18px !important;
                line-height: 1.2 !important;
                margin-top: 8px !important;
            }

            .quiz-badge {
                font-size: 8px !important;
                padding: 4px 8px !important;
                margin-bottom: 8px !important;
            }

            .quiz-question-card {
                padding: 20px !important;
                border-radius: 14px !important;
                margin-bottom: 16px !important;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
            }

            .quiz-q-num {
                font-size: 9px !important;
                margin-bottom: 10px !important;
            }

            .quiz-q-text {
                font-size: 14px !important;
                line-height: 1.4 !important;
                margin-bottom: 16px !important;
            }

            .quiz-options-list {
                gap: 8px !important;
            }

            .premium-opt-btn {
                padding: 12px 16px !important;
                font-size: 11px !important;
                border-radius: 10px !important;
            }

            .opt-radio {
                width: 14px !important;
                height: 14px !important;
            }

            .premium-opt-btn.selected .opt-radio::after {
                font-size: 9px !important;
            }

            .quiz-footer {
                margin-top: 20px !important;
            }

            .submit-q-btn {
                padding: 10px 24px !important;
                font-size: 10px !important;
                border-radius: 50px !important;
            }

            /* --- 🏆 QUIZ RESULT CARD MOBILE OVERRIDES --- */
            .quiz-result-card {
                padding: 20px !important;
                min-height: 0 !important;
                border-radius: 16px !important;
                max-width: 100% !important;
            }

            .result-percent-circle {
                width: 60px !important;
                height: 60px !important;
                border-width: 4px !important;
                font-size: 14px !important;
                margin-bottom: 12px !important;
            }

            .result-title {
                font-size: 16px !important;
                margin-bottom: 8px !important;
            }

            .result-desc {
                font-size: 10px !important;
                margin-bottom: 16px !important;
                max-width: 90% !important;
            }

            .result-continue-btn {
                padding: 10px 20px !important;
                font-size: 10px !important;
                border-radius: 10px !important;
            }

            /* --- 🎓 COURSE REPORT CARD MOBILE OVERRIDES --- */
            .course-report-card {
                padding: 20px !important;
                border-radius: 16px !important;
                max-width: 100% !important;
            }

            .report-title {
                font-size: 18px !important;
                margin-bottom: 12px !important;
            }

            .report-grid {
                grid-template-columns: 1fr !important;
                /* Stack columns on mobile */
                gap: 10px !important;
                margin-bottom: 16px !important;
            }

            .report-area-card {
                padding: 12px 16px !important;
                border-radius: 12px !important;
            }

            .report-area-card .text-emerald-700,
            .report-area-card .text-amber-700 {
                font-size: 8px !important;
                margin-bottom: 6px !important;
            }

            .report-area-card .space-y-2 {
                font-size: 10px !important;
            }

            .report-area-card .space-y-2 i {
                width: 12px !important;
                height: 12px !important;
            }

            .report-return-btn {
                padding: 10px 20px !important;
                font-size: 10px !important;
                border-radius: 10px !important;
            }

            /* --- 📝 SCHOLARLY NOTEBOOK MOBILE (Landscape / Portrait Drawer Layout) --- */
            .notebook-sidebar-backdrop {
                position: fixed;
                inset: 0;
                background: rgba(15, 23, 42, 0.6);
                backdrop-filter: blur(4px);
                z-index: 2010;
                transition: opacity 0.3s ease;
            }

            .notebook-sidebar-backdrop.hidden {
                display: none;
            }

            .notebook-overlay {
                z-index: 10000 !important;
                padding: 0 !important;
                overflow: hidden !important;
            }

            .notebook-container {
                height: 100% !important;
                width: 100% !important;
                max-width: none !important;
                border-radius: 0 !important;
                position: relative !important;
                display: flex !important;
            }

            .notebook-sidebar {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                bottom: 0 !important;
                width: 280px !important;
                height: 100% !important;
                max-height: none !important;
                border-right: 1px solid #e2e8f0 !important;
                border-bottom: none !important;
                padding: 24px 16px !important;
                overflow-y: auto !important;
                flex-shrink: 0 !important;
                background: #fff !important;
                z-index: 2020 !important;
                transform: translateX(-100%) !important;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
                box-shadow: 20px 0 50px rgba(0, 0, 0, 0.15) !important;
            }

            .notebook-container.sidebar-open .notebook-sidebar {
                transform: translateX(0) !important;
            }

            .notebook-sidebar h3 {
                font-size: 18px !important;
                margin-bottom: 20px !important;
                text-align: center !important;
            }

            #notebookContents {
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
                height: auto !important;
            }

            .note-slide-row {
                border: 1px solid transparent !important;
            }

            .note-slide-row.active-slide-row {
                background: #eef2ff !important;
                border-color: rgba(99, 102, 241, 0.2) !important;
            }

            .note-slide-row.active-slide-row .note-slide-title {
                color: #6366f1 !important;
            }

            .note-slide-title {
                font-size: 11px !important;
            }

            .note-chapter-header {
                font-size: 9px !important;
                margin-bottom: 10px !important;
            }

            .notebook-sidebar button {
                padding: 10px !important;
                font-size: 9px !important;
                margin-top: 15px !important;
            }

            .notebook-main {
                flex: 1 !important;
                height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                background: #fafafa !important;
            }

            .notebook-toolbar {
                padding: 10px 16px !important;
                gap: 12px !important;
                justify-content: space-between !important;
                border-bottom: 1px solid #e2e8f0 !important;
            }

            .notebook-toolbar h2 {
                font-size: 0.75rem !important;
                font-family: 'Inter', sans-serif !important;
                font-weight: 700 !important;
                color: #64748b !important;
                letter-spacing: 0.1em !important;
                text-transform: uppercase !important;
                margin: 0 !important;
                text-align: left !important;
            }

            .notebook-editor-container {
                flex: 1 !important;
                height: 0 !important;
                min-height: 0 !important;
                overflow-y: scroll !important;
                padding: 20px 10px !important;
                display: block !important;
                touch-action: auto !important;
                -webkit-overflow-scrolling: touch !important;
                background: #f1f5f9 !important;
            }

            .notebook-editor-container::-webkit-scrollbar {
                width: 6px !important;
                height: 6px !important;
                display: block !important;
            }

            .notebook-editor-container::-webkit-scrollbar-track {
                background: rgba(226, 232, 240, 0.4) !important;
                border-radius: 4px !important;
            }

            .notebook-editor-container::-webkit-scrollbar-thumb {
                background: rgba(99, 102, 241, 0.4) !important;
                border-radius: 4px !important;
            }

            .notebook-editor-container::-webkit-scrollbar-thumb:hover {
                background: rgba(99, 102, 241, 0.8) !important;
            }

            .manuscript-pages {
                width: 100% !important;
                padding: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
                margin: 0 auto !important;
                max-width: 840px !important;
                touch-action: auto !important;
            }

            .manuscript-page {
                width: 100% !important;
                max-width: 800px !important;
                padding: 30px 20px !important;
                font-size: 14px !important;
                min-height: auto !important;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
                margin: 0 auto !important;
                user-select: text !important;
                -webkit-user-select: text !important;
                touch-action: auto !important;
                border-radius: 12px !important;
                border: 1px solid #e2e8f0 !important;
            }

            .manuscript-page.cover-page {
                min-height: 500px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                align-items: center !important;
                padding: 60px 20px !important;
            }

            .manuscript-page .manuscript-running-header {
                font-size: 9px !important;
                padding-bottom: 8px !important;
                margin-bottom: 20px !important;
            }

            .manuscript-page .manuscript-slide-view {
                padding: 16px !important;
                margin-bottom: 20px !important;
                border-radius: 10px !important;
            }

            .manuscript-page .manuscript-slide-view h3 {
                font-size: 16px !important;
                margin-bottom: 10px !important;
            }

            .manuscript-page .manuscript-transcript p {
                font-size: 15px !important;
                line-height: 1.7 !important;
            }

            .notebook-footer {
                padding: 10px !important;
                background: white !important;
                border-top: 1px solid #eee !important;
            }

            /* Quest mode sidebar fullscreen fix */
            #rightSidebar.open {
                transform: translateX(0) !important;
                pointer-events: auto !important;
                width: 100vw !important;
                min-width: 0 !important;
                max-width: 100vw !important;
            }

            /* Level 5 Viva Mode Lobby vertical layout fix */
            .viva-lobby-container {
                grid-template-columns: 1fr !important;
                padding: 20px !important;
                gap: 20px !important;
                overflow-y: auto !important;
            }
            .viva-central-hub {
                order: -1 !important;
                padding: 20px 0 !important;
                gap: 24px !important;
            }
            .viva-main-title {
                font-size: 28px !important;
            }
            .viva-main-btn {
                padding: 18px 40px !important;
                font-size: 14px !important;
                width: 100% !important;
                letter-spacing: 2px !important;
            }
            .candidate-avatar-frame {
                width: 100px !important;
                height: 100px !important;
            }
        }

        /* --- CLASSROOM RESIZABLE BOXES & MOBILE POLISH --- */
        .lecture-box.hidden-box {
            width: 0 !important;
            min-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            visibility: hidden;
        }

        .box-resizer {
            width: 10px;
            /* Wider for touch */
            height: 100%;
            background: #ffffff;
            cursor: col-resize;
            flex-shrink: 0;
            transition: background 0.2s;
            z-index: 50;
            border-left: 1px solid #f1f5f9;
            position: relative;
        }

        #lectureOverlay ::-webkit-scrollbar-track {
            background: transparent !important;
        }

        .box-resizer::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 2px;
            height: 30px;
            background: #cbd5e1;
            border-radius: 2px;
        }

        .box-resizer:hover,
        .box-resizer:active {
            background: #e2e8f0;
        }

        .box-header {
            height: 32px;
            /* Fixed height for consistency */
            padding: 0 12px;
            background: #ffffff;
            border-bottom: 1px solid #f1f5f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .box-header span {
            font-size: 8px;
            font-weight: 800;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .box-close-btn {
            color: #94a3b8;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .box-close-btn:hover {
            background: #fee2e2;
            color: #ef4444;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(20px);
            }

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

        .restore-box-btn:hover {
            background: #f8fafc;
            border-color: #6366f1;
            color: #6366f1;
            transform: translateY(-2px);
        }

        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {
            .lecture-floating-bar {
                padding: 4px 8px !important;
                gap: 6px !important;
                bottom: 8px !important;
                border-radius: 12px !important;
            }

            .bar-toggle-btn {
                top: -24px !important;
                padding: 4px 16px !important;
                font-size: 12px !important;
            }

            .floating-btn {
                min-width: 32px !important;
                padding: 4px 6px !important;
                font-size: 0 !important;
                /* Hide any lingering text */
            }

            .floating-btn i {
                width: 14px !important;
                height: 14px !important;
            }

            .lecture-box .box-header span {
                font-size: 8px !important;
            }

            .manuscript-page {
                padding: 15px !important;
                font-size: 11px !important;
            }

            .professor-quote {
                font-size: 10px !important;
                padding: 10px !important;
                line-height: 1.4 !important;
            }

            .progress-item-title {
                font-size: 10px !important;
            }

            .progress-item i {
                width: 12px !important;
                height: 12px !important;
            }

            .box-resizer {
                width: 24px !important;
                margin-left: -7px;
                margin-right: -7px;
                background: transparent !important;
                z-index: 9999 !important;
            }

            .box-resizer::after {
                width: 4px !important;
                height: 40px !important;
                background: #cbd5e1 !important;
            }

            .slide-progress-dot {
                top: 10px !important;
                left: 10px !important;
                right: auto !important;
                font-size: 8px !important;
                padding: 3px 8px !important;
                background: rgba(255, 255, 255, 0.9) !important;
                border: 1px solid rgba(0, 0, 0, 0.1) !important;
                z-index: 100 !important;
            }

            .chapter-badge {
                margin-top: 20px !important;
            }
        }

        .lecture-workspace {
            display: flex !important;
            flex-direction: row !important;
            height: calc(100% - 40px) !important;
            /* Adjust for top nav */
            width: 100% !important;
            overflow: hidden !important;
        }

        .lecture-box,
        .lecture-box *,
        .professor-quote,
        .professor-quote * {
            box-sizing: border-box !important;
        }

        .lecture-box {
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden !important;
            /* Parent shouldn't scroll, children should */
            background: white !important;
            transition: width 0.1s ease;
            position: relative;
        }

        body.resizing .lecture-box {
            transition: none !important;
        }

        /* --- Mobile Specific Overrides --- */
        @media (max-width: 768px),
        (orientation: portrait),
        (max-height: 600px) and (orientation: landscape) {
            .lecture-floating-bar.collapsed {
                bottom: -50px !important;
                transform: none !important;
                left: 10px !important;
                right: 10px !important;
                width: auto !important;
                opacity: 1;
                transition: all 0.4s ease-in-out;
            }

            .ask-professor-overlay {
                width: 100% !important;
                height: 100% !important;
                max-height: none !important;
                border-radius: 0 !important;
                padding: 10px !important;
                flex-direction: column !important;
                z-index: 10000 !important;
            }

            .ask-professor-overlay h2 {
                font-size: 10px !important;
                margin-bottom: 5px !important;
            }

            .ask-professor-overlay h2 {
                font-size: 10px !important;
                margin-bottom: 5px !important;
            }

            .ask-professor-overlay .chat-input-area {
                padding: 4px !important;
                gap: 5px !important;
                border-radius: 50px !important;
            }

            .ask-professor-overlay .chat-input-area input {
                font-size: 10px !important;
                padding-left: 10px !important;
            }

            .ask-professor-overlay .chat-send-btn {
                width: 32px !important;
                height: 32px !important;
            }

            .ask-professor-overlay .chat-send-btn i {
                width: 12px !important;
                height: 12px !important;
            }

            .ask-professor-overlay .close-qa-btn {
                width: 44px !important;
                /* Premium touch target size */
                height: 44px !important;
                padding: 0 !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                z-index: 250 !important;
                position: relative !important;
            }

            .ask-professor-overlay .close-qa-btn i {
                width: 18px !important;
                height: 18px !important;
                pointer-events: none;
            }

            .box-close-btn {
                width: 32px !important;
                height: 32px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .chat-history-premium {
                flex: 1 !important;
                margin: 5px 0 !important;
                overflow-y: auto !important;
                padding: 5px !important;
                gap: 10px !important;
            }

            .chat-bubble {
                padding: 8px 12px !important;
                font-size: 10px !important;
            }
        }




        /* --- Script Box Mobile Fix --- */
        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {
            #box-script {
                height: 0 !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow-y: visible !important;
            }

            .professor-quote {
                overflow-y: auto !important;
                height: auto !important;
                max-height: 100% !important;
                margin: 10px !important;
                display: block !important;
                width: calc(100% - 20px) !important;
                border-radius: 12px !important;
                word-wrap: break-word !important;
                white-space: normal !important;
                box-sizing: border-box !important;
            }

            /* 1. Header Responsive Grid */
            #gameOverlayHeader {
                display: grid !important;
                grid-template-columns: 1fr auto !important;
                grid-template-rows: auto auto !important;
                grid-template-areas:
                    "title actions"
                    "nav nav" !important;
                align-items: center !important;
                gap: 12px !important;
                padding: 12px 16px !important;
            }

            #gameOverlayHeader>.flex:first-child {
                grid-area: title;
                gap: 8px !important;
            }

            #gameOverlayHeader>.flex:first-child .w-12 {
                width: 36px !important;
                height: 36px !important;
            }

            #gameOverlayHeader>.flex:first-child i {
                width: 18px !important;
                height: 18px !important;
            }

            #levelTitle {
                font-size: 13px !important;
                letter-spacing: 0.5px !important;
                line-height: 1.2 !important;
            }

            #levelTitle+p {
                font-size: 8px !important;
                letter-spacing: 0.5px !important;
            }

            #gameOverlayHeader>.flex:last-child {
                grid-area: actions;
                gap: 12px !important;
            }

            #cgpaDisplay {
                font-size: 14px !important;
                line-height: 1.2 !important;
            }

            #gameOverlayHeader .text-right div:first-child {
                font-size: 8px !important;
            }

            #gameOverlayHeader>.flex:last-child .p-3 {
                padding: 6px !important;
            }

            #gameOverlayHeader>.flex:last-child i {
                width: 24px !important;
                height: 24px !important;
            }

            /* 2. Navigation Horizontal Scrollable list */
            #studyNavControls {
                grid-area: nav;
                display: flex !important;
                /* Force flex display when it is not hidden */
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch;
                gap: 8px !important;
                padding: 6px 4px !important;
                margin: 0 !important;
                width: 100% !important;
                justify-content: flex-start !important;
                scrollbar-width: none !important;
                /* Hide scrollbar Firefox */
            }

            #studyNavControls::-webkit-scrollbar {
                display: none !important;
                /* Hide scrollbar Chrome/Safari */
            }

            #studyNavControls button {
                flex-shrink: 0 !important;
                font-size: 10px !important;
                padding: 6px 12px !important;
                border-radius: 8px !important;
            }

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

            /* 3. Node Bubble Mobile Scale */
            .node-bubble {
                padding: 8px 14px !important;
                max-width: 220px !important;
                font-size: 11px !important;
                border-radius: 10px !important;
            }

            .node-bubble.root-node {
                font-size: 13px !important;
                padding: 10px 18px !important;
                border-radius: 12px !important;
                max-width: 260px !important;
            }

            /* 4. Academic Sidebar Overflows & Fonts */
            .academic-root-title,
            .lexicon-abstract-title,
            .quiz-exam-title {
                font-size: 26px !important;
                letter-spacing: -0.5px !important;
                margin-bottom: 12px !important;
                line-height: 1.1 !important;
            }

            .academic-root-subtitle {
                font-size: 13px !important;
                letter-spacing: 2px !important;
                line-height: 1.4 !important;
            }

            .academic-grid {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 12px !important;
                padding: 0 !important;
            }

            .academic-card,
            .lexicon-card,
            .lexicon-abstract,
            .academic-root-header,
            .quiz-exam-header,
            .grid-cols-2 .academic-card,
            .grid-cols-2 .lexicon-card,
            .grid-cols-2 .quiz-item,
            .grid-cols-3 .academic-card,
            .grid-cols-3 .lexicon-card,
            .grid-cols-3 .quiz-item,
            .grid-cols-4 .academic-card,
            .grid-cols-4 .lexicon-card,
            .grid-cols-4 .quiz-item {
                flex: 1 1 100% !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 20px 16px !important;
                border-radius: 14px !important;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
                margin: 0 !important;
            }

            .academic-root-header,
            .lexicon-abstract,
            .quiz-exam-header {
                padding: 32px 16px !important;
                margin-bottom: 16px !important;
                align-items: center !important;
                text-align: center !important;
            }

            .sidebar-view {
                padding: 0 !important;
                background: #f8fafc !important;
            }

            #tab-pdf-view {
                padding: 8px !important;
            }

            #tab-smart-view {
                padding: 8px !important;
            }

            #sidebarContent {
                padding: 12px !important;
                background: #f8fafc !important;
            }

            .quiz-exam-header {
                padding: 30px 15px !important;
                margin-bottom: 30px !important;
            }

            .quiz-exam-title {
                font-size: 28px !important;
            }

            .quiz-item {
                padding: 16px !important;
                border-radius: 16px !important;
                margin-bottom: 16px !important;
            }

            .quiz-option {
                padding: 10px 14px !important;
                font-size: 13px !important;
            }

            /* 5. Level 5 Professor Viva Overlay mobile optimization */
            #vivaOverlay>div:first-child {
                padding: 12px 16px !important;
            }

            #vivaOverlay h2 {
                font-size: 14px !important;
            }

            #vivaOverlay p {
                font-size: 8px !important;
            }

            .viva-transcript-root {
                padding: 20px 12px !important;
            }

            .entry-bubble {
                padding: 12px 16px !important;
                font-size: 13px !important;
                line-height: 1.5 !important;
            }

            .entry-label {
                font-size: 9px !important;
                margin-bottom: 6px !important;
            }

            #vivaInput {
                padding: 12px !important;
                font-size: 13px !important;
                border-radius: 12px !important;
            }

            #vivaRecIndicator {
                top: 60px !important;
                padding: 8px 16px !important;
            }

            /* 6. Fullscreen mobile overrides to prevent desktop specificity layout squeeze */
            #rightSidebar.fullscreen #sidebarContent {
                padding: 12px !important;
                background: #f8fafc !important;
                max-width: 100% !important;
                width: 100% !important;
            }

            #rightSidebar.fullscreen .academic-grid {
                padding: 0 !important;
                flex-direction: column !important;
                align-items: stretch !important;
            }
        }

        /* --- 📄 ARCADE HIGH FIDELITY PAPER PAGES (REAL PDF EXPERIENCE) --- */
        #arcadeReader {
            background-color: #cbd5e1 !important;
            /* Elegant gray PDF viewer background */
        }

        .arcade-page {
            box-sizing: border-box !important;
            width: 100% !important;
            max-width: 850px !important;
            background: #ffffff !important;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15), 0 4px 10px rgba(15, 23, 42, 0.06) !important;
            border-radius: 4px !important;
            border: 1px solid rgba(15, 23, 42, 0.15) !important;
            margin: 40px auto !important;
            padding: 60px 50px !important;
            /* Unified padding for all pages to ensure left and right margins */
            position: relative !important;
            transition: transform 0.2s ease-out, box-shadow 0.3s ease !important;
            user-select: text !important;
            -webkit-user-select: text !important;
            font-family: 'Inter', 'SolaimanLipi', 'Kalpurush', 'Vrinda', 'Shonar Bangla', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        }

        /* Precise layout preservation to prevent browser text inflation and overlapping lines in PDF rendering */
        .arcade-layout-page,
        .arcade-layout-page * {
            -webkit-text-size-adjust: none !important;
            text-size-adjust: none !important;
        }

        .arcade-layout-page {
            font-size: 12px !important;
            line-height: normal !important;
            padding: 0 !important;
        }

        .arcade-layout-page .arcade-line {
            line-height: normal !important;
        }

        /* Paragraph blocks for layout preservation selection optimization */
        .arcade-paragraph-block {
            position: absolute !important;
            overflow: visible !important;
            box-sizing: border-box !important;
            display: block !important;
        }

        .arcade-paragraph-block .arcade-line {
            position: relative !important;
            display: block !important;
            box-sizing: border-box !important;
            top: auto !important;
            left: auto !important;
        }


        /* Default styling ONLY for unstructured non-layout document pages */
        .arcade-page:not(.arcade-layout-page) {
            max-width: 850px !important;
            min-height: 1100px !important;
            text-align: justify !important;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
        }

        .arcade-page:hover {
            box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2), 0 8px 20px rgba(15, 23, 42, 0.08) !important;
        }

        .arcade-p {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
            font-size: 1.05rem !important;
            line-height: 1.65 !important;
            color: #334155 !important;
            /* Professional soft dark slate */
            margin-bottom: 1.25rem !important;
        }

        .arcade-p.arcade-heading {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
            color: #0f172a !important;
            font-weight: 700 !important;
            letter-spacing: -0.01em !important;
            border-bottom: none !important;
            padding-bottom: 0 !important;
        }

        .arcade-p.arcade-bullet {
            position: relative !important;
            padding-left: 1.25rem !important;
            text-indent: -1.25rem !important;
            margin-bottom: 0.75rem !important;
        }

        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {
            .arcade-page {
                margin: 20px 10px !important;
                padding: 30px 20px !important;
                min-height: auto !important;
            }
        }

        #arcadeReader,
        #arcadeDocument,
        .arcade-page-scale-wrapper {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        .arcade-line {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        .arcade-sentence {
            display: inline !important;
            background-color: transparent;
            cursor: pointer;
            transition: background-color 0.2s ease, box-shadow 0.2s ease;
            border-radius: 2px;
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        .arcade-block .arcade-sentence,
        .arcade-line .arcade-sentence {
            display: inline !important;
        }

        .arcade-sentence:hover {
            background-color: rgba(99, 102, 241, 0.15) !important;
            box-shadow: 0 0 4px rgba(99, 102, 241, 0.3) !important;
        }

        .arcade-sentence.active {
            background-color: rgba(253, 224, 71, 0.35) !important;
            /* Yellow highlighter */
            border-bottom: 2px dashed #eab308 !important;
        }

        /* --- 🛠️ ARCADE EDITOR TOOLBAR BUTTONS --- */
        .arcade-tool-btn {
            padding: 0.5rem 0.75rem !important;
            color: #cbd5e1 !important;
            /* text-slate-300 */
            border-radius: 0.375rem !important;
            /* rounded-md */
            transition: all 0.2s !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 11px !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
        }

        .arcade-tool-btn:hover {
            color: #ffffff !important;
            background-color: #334155 !important;
            /* bg-slate-700 */
        }

        /* --- 📝 WORKBOOK INPUTS & SOLVED GAPS --- */
        .workbook-input {
            background-color: #ffffff !important;
            border: 1px solid #c7d2fe !important;
            border-bottom: 2px solid #4f46e5 !important;
            color: #4f46e5 !important;
            font-weight: 800 !important;
            text-align: center !important;
            border-radius: 4px !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
            transition: all 0.2s ease !important;
        }

        .workbook-input:focus {
            border-color: #4f46e5 !important;
            background-color: #f5f7ff !important;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3) !important;
        }

        .arcade-solved-gap {
            background-color: #10b981 !important;
            /* Emerald green background to completely mask */
            color: #ffffff !important;
            font-weight: 800 !important;
            border-radius: 4px !important;
            border: 1px solid #059669 !important;
            text-align: center !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            box-sizing: border-box !important;
            box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2) !important;
        }

        /* Ensure scaled PDF pages inside the arcade overlay center correctly */
        .arcade-page-scale-wrapper {
            display: block !important;
            position: relative !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .arcade-page-scale-wrapper .arcade-page {
            margin: 0 !important;
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
        }

        /* --- 📱 MOBILE TEXT SELECTION OPTIMIZATION FOR ARCADE MODE --- */

        /*
 * CRITICAL FIX: body has Tailwind's select-none which sets -webkit-user-select: none.
 * On mobile WebKit (iOS Safari / Chrome on iOS), this CANNOT be overridden by a child
 * element alone. We must patch body itself when arcade is active.
 */
        body.arcade-active {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Explicit text-select scope for the entire arcade overlay */
        #arcadeOverlay {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Disable text selection for interactive UI components in Arcade overlay only */
        #arcadeOverlay header,
        #arcadeOverlay header *,
        #arcadeNav,
        #arcadeNav *,
        #arcadeChallenges,
        #arcadeChallenges *,
        #arcadeLexicon,
        #arcadeLexicon *,
        .arcade-tool-btn,
        .arcade-tab {
            user-select: none !important;
            -webkit-user-select: none !important;
        }

        /* touch-action: auto lets the browser decide all gestures natively.
 * pan-y was blocking long-press text selection on some mobile browsers. */
        #arcadeDocument,
        .arcade-page,
        .arcade-page-scale-wrapper,
        .arcade-line,
        .arcade-sentence,
        .arcade-p {
            touch-action: auto !important;
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Mobile Exam Overlay Styles for Arcade Mode */
        @media (max-width: 1279px) {
            #arcadeOverlay #arcadeChallenges.show-exam-mobile {
                display: flex !important;
                position: fixed !important;
                inset: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                max-height: none !important;
                z-index: 1000000 !important;
                background-color: #f8fafc !important;
            }
        }

        /* --- 🎯 ARCADE MODE LEVEL-3 STYLE OVERRIDES --- */
        .arcade-reader .workbook-input {
            border: none !important;
            border-bottom: 1.5px solid #94a3b8 !important;
            background: transparent !important;
            background-color: transparent !important;
            padding: 0 !important;
            margin: 0 4px !important;
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: 600 !important;
            color: #4f46e5 !important;
            text-align: center !important;
            display: inline-block !important;
            vertical-align: baseline !important;
            outline: none !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            transition: border-color 0.2s, background-color 0.2s !important;
        }

        .arcade-reader .workbook-input:focus {
            border-bottom: 2px solid #6366f1 !important;
            background: rgba(99, 102, 241, 0.02) !important;
            box-shadow: none !important;
        }

        /* Solved span style to match Quest Mode Level 3 solved blanks */
        .arcade-reader .arcade-solved-span {
            border: none !important;
            border-bottom: 2px solid #059669 !important;
            background: #d1fae5 !important;
            background-color: #d1fae5 !important;
            color: #059669 !important;
            padding: 0 4px !important;
            margin: 0 4px !important;
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: 600 !important;
            text-align: center !important;
            display: inline-block !important;
            vertical-align: baseline !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            transition: transform 0.2s ease !important;
        }


        /* ═══════════════════════════════════════════════════════════════════
   🌐 TRANSLATION SYSTEM — Bergamot Offline Translation UI
   ═══════════════════════════════════════════════════════════════════ */

        /* ── Floating Translate Bubble ──────────────────────────────────── */
        .translate-bubble {
            position: fixed;
            z-index: 2147483647 !important;
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(15, 23, 42, 0.92);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(99, 102, 241, 0.4);
            border-radius: 50px;
            padding: 4px 6px 4px 4px;
            box-shadow:
                0 4px 24px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(99, 102, 241, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transform: translate(-50%, 0) scale(1);
            opacity: 1;
            transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.2s, border-color 0.2s;
            user-select: none;
            -webkit-user-select: none;
        }

        .translate-bubble:hover {
            border-color: rgba(99, 102, 241, 0.7);
            box-shadow:
                0 6px 30px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(99, 102, 241, 0.25);
        }

        .translate-bubble.hidden {
            display: none !important;
        }

        .translate-bubble .tb-translate-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.15s, background 0.2s;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
        }

        .translate-bubble .tb-translate-btn:hover {
            transform: scale(1.08);
            background: linear-gradient(135deg, #818cf8, #a78bfa);
        }

        .translate-bubble .tb-translate-btn:active {
            transform: scale(0.95);
        }

        .translate-bubble .tb-lang-label {
            font-size: 9px;
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0 6px;
            white-space: nowrap;
        }

        @keyframes bubbleAppear {
            from {
                opacity: 0;
                transform: translate(-50%, 0) scale(0.7);
            }

            to {
                opacity: 1;
                transform: translate(-50%, 0) scale(1);
            }
        }


        /* ── Translation Tooltip ────────────────────────────────────────── */
        .translate-tooltip {
            position: fixed;
            z-index: 2147483647 !important;
            width: 480px;
            max-width: calc(100vw - 32px);
            background: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            overflow: hidden;
            box-shadow:
                0 8px 40px rgba(0, 0, 0, 0.5),
                0 0 1px rgba(255, 255, 255, 0.1);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .translate-tooltip.tt-visible {
            opacity: 1;
            pointer-events: auto;
        }

        .translate-tooltip.hidden {
            display: none !important;
        }

        .tt-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.03);
        }

        .tt-lang-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 10px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
            border: 1px solid rgba(99, 102, 241, 0.3);
            border-radius: 50px;
            font-size: 9px;
            font-weight: 800;
            color: #a5b4fc;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .tt-header-actions {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .tt-action-btn,
        .tt-close-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 6px;
            border: none;
            background: rgba(255, 255, 255, 0.05);
            color: #64748b;
            cursor: pointer;
            transition: all 0.15s;
        }

        .tt-action-btn:hover {
            background: rgba(99, 102, 241, 0.2);
            color: #a5b4fc;
        }

        .tt-close-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
        }

        .tt-body {
            padding: 14px 16px;
            max-height: 280px;
            overflow-y: auto;
        }

        .tt-translated-text {
            font-size: 14px;
            font-weight: 500;
            color: #e2e8f0;
            line-height: 1.6;
            margin: 0;
            word-wrap: break-word;
        }

        .tt-footer {
            padding: 8px 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            background: rgba(0, 0, 0, 0.15);
        }

        .tt-footer-label {
            font-size: 8px;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        /* Loading dots animation */
        .tt-loading {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
        }

        .tt-loading-dots {
            display: flex;
            gap: 4px;
        }

        .tt-loading-dots span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #6366f1;
            animation: ttDotPulse 1s ease-in-out infinite;
        }

        .tt-loading-dots span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .tt-loading-dots span:nth-child(3) {
            animation-delay: 0.3s;
        }

        @keyframes ttDotPulse {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(0.8);
            }

            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }

        .tt-loading-text {
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        /* Download prompt in tooltip */
        .tt-download-prompt {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 8px;
            padding: 10px 0;
        }

        .tt-download-icon {
            color: #6366f1;
            opacity: 0.8;
        }

        .tt-download-title {
            font-size: 13px;
            font-weight: 700;
            color: #e2e8f0;
            margin: 0;
        }

        .tt-download-desc {
            font-size: 10px;
            color: #64748b;
            margin: 0;
            max-width: 240px;
            line-height: 1.5;
        }

        .tt-download-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 11px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 4px;
        }

        .tt-download-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
        }

        .tt-download-btn:active {
            transform: scale(0.97);
        }

        /* Progress bar in tooltip */
        .tt-progress-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 10px 0;
        }

        .tt-progress-bar {
            width: 100%;
            height: 6px;
            background: rgba(255, 255, 255, 0.06);
            border-radius: 50px;
            overflow: hidden;
        }

        .tt-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #a78bfa);
            border-radius: 50px;
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
        }

        .tt-progress-text {
            font-size: 10px;
            font-weight: 600;
            color: #94a3b8;
            text-align: center;
            margin: 0;
            letter-spacing: 0.5px;
        }


        /* ── Language Manager Overlay ───────────────────────────────────── */
        .language-manager-overlay {
            position: fixed;
            inset: 0;
            z-index: 100000;
            display: none;
            flex-direction: column;
            background: rgba(15, 23, 42, 0.97);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            overflow: hidden;
            color: #e2e8f0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .language-manager-overlay.lm-visible {
            opacity: 1;
        }

        /* LM Header */
        .lm-header {
            flex-shrink: 0;
            height: 64px;
            background: rgba(15, 23, 42, 1);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

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

        .lm-header-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
            border: 1px solid rgba(99, 102, 241, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #818cf8;
        }

        .lm-header h1 {
            font-size: 16px;
            font-weight: 900;
            color: white;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin: 0;
        }

        .lm-header-subtitle {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .lm-header-subtitle span:first-child {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #6366f1;
        }

        .lm-header-subtitle span:last-child {
            font-size: 9px;
            color: #64748b;
            font-family: monospace;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .lm-close-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: rgba(255, 255, 255, 0.05);
            color: #94a3b8;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
        }

        .lm-close-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            color: #fca5a5;
        }

        /* LM Toolbar */
        .lm-toolbar {
            flex-shrink: 0;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }

        .lm-search-box {
            flex: 1;
            max-width: 400px;
            position: relative;
        }

        .lm-search-box input {
            width: 100%;
            padding: 10px 14px 10px 38px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            color: #e2e8f0;
            font-size: 13px;
            font-weight: 500;
            outline: none;
            transition: border-color 0.2s, background 0.2s;
        }

        .lm-search-box input:focus {
            border-color: rgba(99, 102, 241, 0.4);
            background: rgba(255, 255, 255, 0.06);
        }

        .lm-search-box input::placeholder {
            color: #475569;
        }

        .lm-search-box .lm-search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #475569;
            pointer-events: none;
        }

        .lm-storage-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .lm-storage-badge i {
            color: #6366f1;
        }

        .lm-download-status {
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            padding: 8px 14px;
            background: rgba(99, 102, 241, 0.08);
            border: 1px solid rgba(99, 102, 241, 0.15);
            border-radius: 10px;
            transition: opacity 0.3s;
            white-space: nowrap;
        }

        .lm-download-status.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* RAM Warning Banner */
        .lm-ram-warning {
            flex-shrink: 0;
            margin: 0 24px;
            padding: 10px 16px;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 10px;
            color: #fbbf24;
            line-height: 1.5;
        }

        .lm-ram-warning i {
            flex-shrink: 0;
            color: #f59e0b;
        }

        /* LM Language Grid */
        .lm-language-grid {
            flex: 1;
            overflow-y: auto;
            padding: 20px 24px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
            align-content: start;
        }

        /* Language Card */
        .lm-lang-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 14px;
            padding: 14px;
            transition: all 0.2s;
        }

        .lm-lang-card:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.1);
        }

        .lm-lang-card.lm-installed {
            border-color: rgba(99, 102, 241, 0.2);
            background: rgba(99, 102, 241, 0.03);
        }

        .lm-lang-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .lm-lang-flag {
            font-size: 24px;
            line-height: 1;
        }

        .lm-lang-info {
            display: flex;
            flex-direction: column;
        }

        .lm-lang-name {
            font-size: 13px;
            font-weight: 700;
            color: #e2e8f0;
        }

        .lm-lang-native {
            font-size: 11px;
            color: #64748b;
            font-weight: 500;
        }

        .lm-lang-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .lm-pair-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.04);
        }

        .lm-pair-label {
            font-size: 10px;
            font-weight: 800;
            color: #94a3b8;
            letter-spacing: 1px;
            font-family: monospace;
        }

        .lm-download-btn {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid rgba(99, 102, 241, 0.3);
            background: rgba(99, 102, 241, 0.1);
            color: #818cf8;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
        }

        .lm-download-btn:hover {
            background: rgba(99, 102, 241, 0.25);
            border-color: rgba(99, 102, 241, 0.5);
            transform: scale(1.05);
        }

        .lm-delete-btn {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            border: 1px solid rgba(239, 68, 68, 0.2);
            background: rgba(239, 68, 68, 0.08);
            color: #f87171;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s;
        }

        .lm-delete-btn:hover {
            background: rgba(239, 68, 68, 0.2);
            border-color: rgba(239, 68, 68, 0.4);
        }

        .lm-downloading {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            color: #6366f1;
        }

        /* LM Scrollbar */
        .lm-language-grid::-webkit-scrollbar {
            width: 6px;
        }

        .lm-language-grid::-webkit-scrollbar-track {
            background: transparent;
        }

        .lm-language-grid::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.08);
            border-radius: 3px;
        }

        .lm-language-grid::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        /* ── Mobile Responsive ──────────────────────────────────────────── */
        @media (max-width: 768px),
        (max-height: 600px) and (orientation: landscape) {
            .translate-bubble {
                padding: 3px 5px 3px 3px;
            }

            .translate-bubble .tb-translate-btn {
                width: 36px;
                height: 36px;
            }

            .translate-tooltip {
                width: calc(100vw - 32px);
                border-radius: 14px;
            }

            .lm-header {
                padding: 0 16px;
            }

            .lm-header h1 {
                font-size: 13px;
                letter-spacing: 1px;
            }

            .lm-toolbar {
                flex-wrap: wrap;
                padding: 12px 16px;
                gap: 10px;
            }

            .lm-search-box {
                max-width: none;
            }

            .lm-language-grid {
                padding: 16px;
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .lm-ram-warning {
                margin: 0 16px;
            }
        }

        /* --- 📱 TEXT SELECTION OPTIMIZATION FOR QUEST, VIVA & LECTURE MODES --- */

        body.quest-active,
        body.lecture-active,
        body.viva-active {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Enable selection for academic content in Quest Mode: Level 1 (Sidebar list) */
        .academic-grid,
        .academic-card,
        .academic-item,
        .academic-label,
        .academic-num,
        .academic-card-title,
        .academic-root-title,
        .academic-root-subtitle {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Enable selection for Quest Mode: Level 2 (MCQ question and options) */
        .quiz-item,
        .quiz-question,
        .quiz-options,
        .quiz-option,
        .quiz-option *,
        .bottom-detail-text,
        .bottom-detail-content,
        .bottom-option-btn {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Enable selection for Quest Mode: Level 3 (Workbook assignment & study paragraphs) */
        .academic-card-text,
        .study-paragraph,
        .study-list-l1,
        .study-list-l2,
        .study-list-l3,
        .academic-card-text *,
        .workbook-input,
        .teacher-correction {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Enable selection for Quest Mode: Level 5 (Viva conversation text) */
        .viva-transcript-root,
        .transcript-entry,
        .entry-bubble,
        .entry-label {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* Enable selection for Class Lecture components */
        .chat-bubble,
        .chat-bubble.user,
        .chat-bubble.ai,
        .chat-bubble *,
        .notebook-container,
        .notebook-container *,
        #notebookContents,
        #notebookContents *,
        #notebookEditor,
        .manuscript-page,
        .manuscript-page *,
        #profQuote,
        .professor-quote,
        #slideStage,
        .premium-slide-container,
        .premium-slide-container *,
        .premium-bullet,
        .premium-bullet * {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        /* ========================================================================= */
        /*  💎 PREMIUM CLASSROOM BORDERS, RESIZERS & MULTI-SCREEN FILL SYSTEM        */
        /* ========================================================================= */

        /* Force reliable overlay hide/show */
        #lectureOverlay.hidden {
            display: none !important;
        }

        /* Bulletproof hidden box behavior to collapse and let others take space */
        #box-slide.hidden-box,
        #box-script.hidden-box,
        #box-progress.hidden-box {
            display: none !important;
        }

        /* Remove legact conflicting box borders */
        #box-slide,
        #box-script,
        #box-progress {
            border: none !important;
        }

        /* Clean, premium divider base style */
        .box-resizer {
            background: #f1f5f9 !important;
            flex-shrink: 0 !important;
            z-index: 50 !important;
            display: block !important;
            position: relative !important;
            transition: background-color 0.2s !important;
        }

        .box-resizer:hover,
        .box-resizer:active {
            background: #6366f1 !important;
            /* Indigo accent on drag */
        }

        /* 📱 PORTRAIT LAYOUT SYSTEM (Vertical Stack / Horizontal Dividers) */
        @media (orientation: portrait) {
            .lecture-workspace {
                flex-direction: column !important;
            }

            .lecture-main-grid {
                flex-direction: column !important;
                display: flex !important;
            }

            #box-slide {
                height: 0 !important;
                flex: 1.8 !important;
                width: 100% !important;
            }

            #box-script {
                height: 0 !important;
                flex: 1.2 !important;
                width: 100% !important;
            }

            #box-progress {
                height: 0 !important;
                flex: 1 !important;
                width: 100% !important;
            }

            .box-resizer {
                width: 100% !important;
                height: 10px !important;
                cursor: row-resize !important;
                border-top: 1px solid #e2e8f0 !important;
                border-bottom: 1px solid #e2e8f0 !important;
                border-left: none !important;
                border-right: none !important;
                margin: 0 !important;
            }

            .box-resizer::after {
                content: '' !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                width: 36px !important;
                height: 4px !important;
                background: #cbd5e1 !important;
                border-radius: 99px !important;
            }
        }

        /* 💻 LANDSCAPE LAYOUT SYSTEM (Horizontal Row / Vertical Dividers) */
        @media (orientation: landscape) {
            .lecture-workspace {
                flex-direction: row !important;
            }

            .lecture-main-grid {
                flex-direction: row !important;
                display: flex !important;
            }

            #box-slide {
                height: 100% !important;
                flex: 1 !important;
                width: auto !important;
            }

            #box-script {
                height: 100% !important;
                width: 280px !important;
                flex: none !important;
            }

            #box-progress {
                height: 100% !important;
                width: 220px !important;
                flex: none !important;
            }

            .box-resizer {
                width: 10px !important;
                height: 100% !important;
                cursor: col-resize !important;
                border-left: 1px solid #e2e8f0 !important;
                border-right: 1px solid #e2e8f0 !important;
                border-top: none !important;
                border-bottom: none !important;
                margin: 0 !important;
            }

            .box-resizer::after {
                content: '' !important;
                position: absolute !important;
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                width: 4px !important;
                height: 36px !important;
                background: #cbd5e1 !important;
                border-radius: 99px !important;
            }
        }

        /* --- 📱 TOUCH SCROLL & MOBILE KEYBOARD CHAT FIXES --- */
        .chat-history-premium,
        .professor-quote,
        .progress-list,
        .lecture-content-area {
            touch-action: pan-y !important;
            -webkit-overflow-scrolling: touch !important;
        }

        @media (orientation: portrait) {
            .ask-professor-overlay {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                z-index: 100000 !important;
            }
        }

        /* --- ☀️ LIGHT MODE: GLOBAL AND MOBILE OVERRIDES FOR CLASS & ARCADE --- */

        /* Force chapter badge white text and dark background in light mode (desktop & mobile) */
        body.light-mode .chapter-badge {
            background: #0f172a !important;
            color: #ffffff !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Light mode overrides for Custom Class Creator and Custom Arcade Creator sidebars (desktop & mobile) */
        body.light-mode #customLectureSidebar,
        body.light-mode #customArcadeSidebar {
            background: #ffffff !important;
            border-color: #cbd5e1 !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
        }

        body.light-mode #customLectureSidebar *,
        body.light-mode #customArcadeSidebar * {
            color: #475569 !important;
            /* Professional slate text color */
        }

        /* Force dark text for titles, headers, and labels */
        body.light-mode #customLectureSidebar h1,
        body.light-mode #customLectureSidebar h2,
        body.light-mode #customLectureSidebar h3,
        body.light-mode #customLectureSidebar h4,
        body.light-mode #customLectureSidebar span,
        body.light-mode #customLectureSidebar label,
        body.light-mode #customArcadeSidebar h1,
        body.light-mode #customArcadeSidebar h2,
        body.light-mode #customArcadeSidebar h3,
        body.light-mode #customArcadeSidebar h4,
        body.light-mode #customArcadeSidebar span,
        body.light-mode #customArcadeSidebar label {
            color: #0f172a !important;
            /* Bold Slate/Black text */
        }

        /* Style inputs and textareas in creator sidebars */
        body.light-mode #customLectureSidebar input,
        body.light-mode #customLectureSidebar textarea,
        body.light-mode #customLectureSidebar select,
        body.light-mode #customArcadeSidebar input,
        body.light-mode #customArcadeSidebar textarea,
        body.light-mode #customArcadeSidebar select {
            background: #ffffff !important;
            border: 1px solid #cbd5e1 !important;
            color: #0f172a !important;
        }

        body.light-mode #customLectureSidebar input:focus,
        body.light-mode #customLectureSidebar textarea:focus,
        body.light-mode #customArcadeSidebar input:focus,
        body.light-mode #customArcadeSidebar textarea:focus {
            border-color: #6366f1 !important;
            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
        }

        /* Creator sidebar action buttons */
        body.light-mode #customLectureSidebar button,
        body.light-mode #customArcadeSidebar button {
            background: #f1f5f9 !important;
            border: 1px solid #cbd5e1 !important;
            color: #334155 !important;
        }

        body.light-mode #customLectureSidebar button:hover,
        body.light-mode #customArcadeSidebar button:hover {
            background: #e2e8f0 !important;
            color: #0f172a !important;
        }

        /* Ensure Lucide icons inside custom sidebars are visible and colored */
        body.light-mode #customLectureSidebar i,
        body.light-mode #customLectureSidebar .lucide,
        body.light-mode #customArcadeSidebar i,
        body.light-mode #customArcadeSidebar .lucide {
            color: #4f46e5 !important;
            /* Indigo icons */
        }

        /* Specific buttons with distinct text colors (like plus/add buttons) */
        body.light-mode #customLectureSidebar button.text-emerald-600 i,
        body.light-mode #customLectureSidebar button.text-emerald-600 {
            color: #059669 !important;
        }

        body.light-mode #customArcadeSidebar button.text-indigo-600 i,
        body.light-mode #customArcadeSidebar button.text-indigo-600 {
            color: #4f46e5 !important;
        }

        /* Style the sections/slides list items container inside the sidebars in light mode */
        body.light-mode #customSectionsList div,
        body.light-mode #customArcadeSectionsList div {
            background: #f8fafc !important;
            border: 1px solid #e2e8f0 !important;
            color: #334155 !important;
        }

        body.light-mode #customSectionsList div:hover,
        body.light-mode #customArcadeSectionsList div:hover {
            background: #f1f5f9 !important;
            border-color: #cbd5e1 !important;
            color: #0f172a !important;
        }

        body.light-mode #customSectionsList div *,
        body.light-mode #customArcadeSectionsList div * {
            color: inherit !important;
        }

        /* Active/Selected Section list item */
        body.light-mode #customSectionsList div.bg-emerald-50,
        body.light-mode #customArcadeSectionsList div.bg-indigo-50 {
            background: #eff6ff !important;
            border-color: #bfdbfe !important;
            color: #1d4ed8 !important;
        }

        /* Force Game Overlay Sidebar (#rightSidebar) to remain dark and readable on mobile and desktop */
        body.light-mode #gameOverlay #rightSidebar,
        body.light-mode #gameOverlay #rightSidebar * {
            color: #1e293b !important;
            background-color: transparent;
        }

        body.light-mode #gameOverlay #rightSidebar {
            background: #f8fafc !important;
            border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        body.light-mode #gameOverlay #rightSidebar h1,
        body.light-mode #gameOverlay #rightSidebar h2,
        body.light-mode #gameOverlay #rightSidebar h3,
        body.light-mode #gameOverlay #rightSidebar h4,
        body.light-mode #gameOverlay #rightSidebar span,
        body.light-mode #gameOverlay #rightSidebar label {
            color: #0f172a !important;
        }

        body.light-mode #gameOverlay #rightSidebar .sidebar-tabs {
            background: #1e293b !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        }

        /* Forces the inactive tab buttons AND their inner text to be white */
        body.light-mode #gameOverlay #rightSidebar .sidebar-tabs .tab-btn,
        body.light-mode #gameOverlay #rightSidebar .sidebar-tabs .tab-btn * {
            color: #ffffff !important;
        }

        /* Forces the active tab (the one you are currently on) to be white. 
   Note: Change the color back to #818cf8 if you want to keep the purple line! */
        body.light-mode #gameOverlay #rightSidebar .sidebar-tabs .tab-btn.active,
        body.light-mode #gameOverlay #rightSidebar .sidebar-tabs .tab-btn.active * {
            color: #ffffff !important;
            border-bottom-color: #ffffff !important;
        }

        /* Force all icons in the right sidebar to be dark in light mode */
        body.light-mode #gameOverlay #rightSidebar i,
        body.light-mode #gameOverlay #rightSidebar svg,
        body.light-mode #gameOverlay #rightSidebar svg path,
        body.light-mode #gameOverlay #rightSidebar .sidebar-tabs .tab-btn i {
            color: inherit !important;
        }

        body.light-mode #gameOverlay #rightSidebar input,
        body.light-mode #gameOverlay #rightSidebar textarea,
        body.light-mode #gameOverlay #rightSidebar select {
            background: #1e293b !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
        }