:root {
            /* Premium Dark Theme */
            --bg-main: #0F0F0F;
            --bg-pattern: none;
            /* Removed custom honeycomb overlay based on feedback */
            --bg-card: #1A1A1A;
            --bg-nav: rgba(10, 10, 10, 0.98);
            --bg-input: #262626;
            --bg-header: #141414;
            --text-main: #F5F5F5;
            --text-muted: #A3A3A3;
            --text-nav: #FFFFFF;
            --border-subtle: #333333;
            --brand-warning: #FFC107;
            --brand-warning-hover: #e0a800;
            --brand-text: #212529;
            --c-new: #00E5FF;
            --c-learn: #FF5252;
            --c-due: #69F0AE;
            /* Chief Systems Architect: Founder-tier prestige badge */
            --badge-csa-bg: linear-gradient(135deg, rgba(15, 20, 40, 0.95) 0%, rgba(30, 25, 60, 0.95) 50%, rgba(15, 20, 40, 0.95) 100%);
            --badge-csa-color: #E8D5A3;
            --badge-csa-border: rgba(212, 175, 55, 0.7);
            --badge-csa-glow: rgba(212, 175, 55, 0.4);
            --badge-csa-shimmer: linear-gradient(105deg, transparent 20%, rgba(212, 175, 55, 0.18) 40%, rgba(255, 220, 100, 0.32) 50%, rgba(212, 175, 55, 0.18) 60%, transparent 80%);
            /* AKU'30: Ambassador-tier prestige badge */
            --badge-aku30-bg: linear-gradient(135deg, rgba(5, 30, 25, 0.95) 0%, rgba(10, 45, 40, 0.95) 50%, rgba(5, 30, 25, 0.95) 100%);
            --badge-aku30-color: #6EE7B7;
            --badge-aku30-border: rgba(16, 185, 129, 0.7);
            --badge-aku30-glow: rgba(16, 185, 129, 0.4);
            --badge-aku30-shimmer: linear-gradient(105deg, transparent 20%, rgba(16, 185, 129, 0.18) 40%, rgba(52, 211, 153, 0.32) 50%, rgba(16, 185, 129, 0.18) 60%, transparent 80%);
        }

        [data-theme="light"] {
            --bg-main: #FFFDF7;
            --bg-card: #FFFFFF;
            --bg-nav: rgba(255, 253, 247, 0.95);
            --bg-input: #FFFFFF;
            --bg-header: #FFFBEB;
            --text-main: #2C1E16;
            --text-muted: #6B5B4C;
            --text-nav: #2C1E16;
            --border-subtle: #FDE68A;
            --brand-warning: #F59E0B;
            --brand-warning-hover: #D97706;
            --brand-text: #FFFFFF;
            --c-new: #0284C7;
            --c-learn: #DC2626;
            --c-due: #16A34A;
            /* Chief Systems Architect: light mode */
            --badge-csa-bg: linear-gradient(135deg, rgba(30, 25, 60, 0.06) 0%, rgba(212, 175, 55, 0.08) 100%);
            --badge-csa-color: #7C5C00;
            --badge-csa-border: rgba(180, 140, 20, 0.45);
            --badge-csa-glow: transparent;
            --badge-csa-shimmer: linear-gradient(105deg, transparent 20%, rgba(212, 175, 55, 0.08) 50%, transparent 80%);
            /* AKU'30: light mode */
            --badge-aku30-bg: linear-gradient(135deg, rgba(5, 30, 25, 0.06) 0%, rgba(16, 185, 129, 0.08) 100%);
            --badge-aku30-color: #065F46;
            --badge-aku30-border: rgba(5, 150, 105, 0.45);
            --badge-aku30-glow: transparent;
            --badge-aku30-shimmer: linear-gradient(105deg, transparent 20%, rgba(16, 185, 129, 0.08) 50%, transparent 80%);
        }

        /* Responsive Width Utilities (Bootstrap Extensions) */
        @media (min-width: 576px) {
            .w-sm-auto { width: auto !important; }
        }
        @media (min-width: 768px) {
            .w-md-auto { width: auto !important; }
        }
        @media (min-width: 992px) {
            .w-lg-auto { width: auto !important; }
        }

        .katex-nowrap-glue {
            white-space: nowrap !important;
            display: inline;
        }

        /* KaTeX Crawler De-duplication Protection: prevent crawlers ingesting duplicate MathML strings */
        .katex-mathml {
            display: none !important;
            visibility: hidden !important;
        }

        /* High-Contrast Guard: prevent accidental dark-on-dark invisible text on dark theme */
        :root:not([data-theme="light"]) .text-dark {
            color: #F5F5F5 !important;
        }
        /* High-Contrast Secondary Text: elevate Bootstrap's murky #6c757d on dark surfaces */
        :root:not([data-theme="light"]) .text-secondary {
            color: #D4D4D8 !important;
        }
        :root:not([data-theme="light"]) .text-muted {
            color: #A3A3A3 !important;
        }
        :root:not([data-theme="light"]) .bg-warning .text-dark,
        :root:not([data-theme="light"]) .bg-warning.text-dark,
        :root:not([data-theme="light"]) .btn-warning .text-dark,
        :root:not([data-theme="light"]) .btn-warning.text-dark,
        :root:not([data-theme="light"]) .badge-warning .text-dark,
        :root:not([data-theme="light"]) .badge-warning.text-dark,
        :root:not([data-theme="light"]) .bg-success .text-dark,
        :root:not([data-theme="light"]) .bg-success.text-dark,
        :root:not([data-theme="light"]) .btn-success .text-dark,
        :root:not([data-theme="light"]) .btn-success.text-dark,
        :root:not([data-theme="light"]) .badge-success .text-dark,
        :root:not([data-theme="light"]) .badge-success.text-dark,
        :root:not([data-theme="light"]) .bg-info .text-dark,
        :root:not([data-theme="light"]) .bg-info.text-dark,
        :root:not([data-theme="light"]) .btn-info .text-dark,
        :root:not([data-theme="light"]) .btn-info.text-dark,
        :root:not([data-theme="light"]) .badge-info .text-dark,
        :root:not([data-theme="light"]) .badge-info.text-dark,
        :root:not([data-theme="light"]) .bg-light .text-dark,
        :root:not([data-theme="light"]) .bg-light.text-dark,
        :root:not([data-theme="light"]) .bg-white .text-dark,
        :root:not([data-theme="light"]) .bg-white.text-dark,
        :root:not([data-theme="light"]) .btn-light .text-dark,
        :root:not([data-theme="light"]) .btn-light.text-dark,
        :root:not([data-theme="light"]) .btn-white .text-dark,
        :root:not([data-theme="light"]) .btn-white.text-dark,
        :root:not([data-theme="light"]) [class*="bg-warning"] .text-dark,
        :root:not([data-theme="light"]) [class*="bg-warning"].text-dark,
        :root:not([data-theme="light"]) [class*="btn-warning"] .text-dark,
        :root:not([data-theme="light"]) [class*="btn-warning"].text-dark,
        :root:not([data-theme="light"]) [class*="bg-success"] .text-dark,
        :root:not([data-theme="light"]) [class*="bg-success"].text-dark,
        :root:not([data-theme="light"]) [class*="bg-warning-subtle"],
        :root:not([data-theme="light"]) [class*="bg-warning-subtle"] *,
        :root:not([data-theme="light"]) [class*="bg-success-subtle"],
        :root:not([data-theme="light"]) [class*="bg-success-subtle"] *,
        :root:not([data-theme="light"]) [class*="bg-info-subtle"],
        :root:not([data-theme="light"]) [class*="bg-info-subtle"] *,
        :root:not([data-theme="light"]) [class*="bg-light-subtle"],
        :root:not([data-theme="light"]) [class*="bg-light-subtle"] *,
        :root:not([data-theme="light"]) .btn-warning,
        :root:not([data-theme="light"]) .badge.bg-warning,
        :root:not([data-theme="light"]) .badge.bg-warning-subtle,
        :root:not([data-theme="light"]) .badge.bg-success,
        :root:not([data-theme="light"]) .badge.bg-success-subtle,
        :root:not([data-theme="light"]) .badge.bg-info,
        :root:not([data-theme="light"]) .badge.bg-info-subtle,
        :root:not([data-theme="light"]) [style*="#F97316"].text-dark,
        :root:not([data-theme="light"]) [style*="#F97316"] .text-dark {
            color: #121212 !important;
        }

        /* Flexbox Min-Width Zero Utility Law (Directive EC) */
        .min-w-0 {
            min-width: 0 !important;
        }

        /* Precision Navigation Radar Vector Icon (Masked SVG) */
        .bi-radar {
            display: inline-block;
            width: 1.15em;
            height: 1.15em;
            vertical-align: -0.15em;
            background-color: currentColor;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Cpath d='M12 3v9l6 6'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Cpath d='M12 3v9l6 6'/%3E%3C/svg%3E") no-repeat center / contain;
        }

        /* Inline SVG Mask Polyfills for Science & Telemetry Icons (Zero-Cache-Latency Guarantee) */
        .bi-dna::before,
        .bi-flask::before,
        .bi-crosshair::before,
        .bi-crosshair2::before,
        .bi-crosshairs::before,
        .fa-crosshairs::before,
        .fas.fa-crosshairs::before,
        .bi-twitter-x::before {
            content: "" !important;
            display: inline-block;
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            background-color: currentColor;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
        }
        .bi-dna::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15c6.667-6 13.333 0 20-6'/%3E%3Cpath d='M9 22c1.798-1.998 2.518-3.995 2.807-5.993'/%3E%3Cpath d='M15 2c-1.798 1.998-2.518 3.995-2.807 5.993'/%3E%3Cpath d='m17 6-2.5-2.5'/%3E%3Cpath d='m14 8-1-1'/%3E%3Cpath d='m7 18 2.5 2.5'/%3E%3Cpath d='m3.5 14.5.5.5'/%3E%3Cpath d='m20 9 .5.5'/%3E%3Cpath d='m6.5 12.5 1 1'/%3E%3Cpath d='m16.5 10.5 1 1'/%3E%3Cpath d='m10 16 1.5 1.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15c6.667-6 13.333 0 20-6'/%3E%3Cpath d='M9 22c1.798-1.998 2.518-3.995 2.807-5.993'/%3E%3Cpath d='M15 2c-1.798 1.998-2.518 3.995-2.807 5.993'/%3E%3Cpath d='m17 6-2.5-2.5'/%3E%3Cpath d='m14 8-1-1'/%3E%3Cpath d='m7 18 2.5 2.5'/%3E%3Cpath d='m3.5 14.5.5.5'/%3E%3Cpath d='m20 9 .5.5'/%3E%3Cpath d='m6.5 12.5 1 1'/%3E%3Cpath d='m16.5 10.5 1 1'/%3E%3Cpath d='m10 16 1.5 1.5'/%3E%3C/svg%3E");
        }
        .bi-flask::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.527a2 2 0 0 1-.211.896L4.72 20.55a1 1 0 0 0 .9 1.45h12.76a1 1 0 0 0 .9-1.45l-5.069-10.127A2 2 0 0 1 14 9.527V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M7 16h10'/%3E%3C/svg%3E");
        }
        .bi-crosshair::before,
        .bi-crosshair2::before,
        .bi-crosshairs::before,
        .fa-crosshairs::before,
        .fas.fa-crosshairs::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3C/svg%3E");
        }
        .bi-twitter-x::before {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath d='M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z'/%3E%3C/svg%3E");
        }

        @keyframes csa-shimmer {
            0%   { background-position: -200% center; }
            100% { background-position:  200% center; }
        }

        .badge-chief-systems-architect {
            position: relative;
            background: var(--badge-csa-bg) !important;
            color: var(--badge-csa-color) !important;
            border: 1px solid var(--badge-csa-border) !important;
            box-shadow: 0 0 10px var(--badge-csa-glow), 0 0 22px var(--badge-csa-glow), inset 0 1px 0 rgba(255,255,255,0.07);
            font-size: 0.62rem;
            padding: 4px 10px;
            font-weight: 900;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            overflow: hidden;
            border-radius: 50px;
        }

        .badge-chief-systems-architect::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--badge-csa-shimmer);
            background-size: 200% 100%;
            animation: csa-shimmer 3s linear infinite;
            border-radius: inherit;
            pointer-events: none;
        }

        .badge-aku30 {
            position: relative;
            background: var(--badge-aku30-bg) !important;
            color: var(--badge-aku30-color) !important;
            border: 1px solid var(--badge-aku30-border) !important;
            box-shadow: 0 0 10px var(--badge-aku30-glow), 0 0 22px var(--badge-aku30-glow), inset 0 1px 0 rgba(255,255,255,0.07);
            font-size: 0.62rem;
            padding: 4px 10px;
            font-weight: 900;
            letter-spacing: 1px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            overflow: hidden;
            border-radius: 50px;
        }

        .badge-aku30::after {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--badge-aku30-shimmer);
            background-size: 200% 100%;
            animation: csa-shimmer 3s linear infinite;
            border-radius: inherit;
            pointer-events: none;
        }

        /* =========================================
           GLOBAL MEDIA RESPONSIVENESS
           Ensures images, videos, audio, and iframes flex seamlessly
        ========================================= */
        img,
        video,
        iframe {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
        }

        .io-optimized {
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-height: 50vh;
            object-fit: contain;
        }

        audio {
            max-width: 100%;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
            outline: none;
        }

        /* =========================================
           ANKI PARITY: IMAGE OCCLUSION CSS HOOKS 
           Ensures imported IO Enhanced SVGs render natively
        ========================================= */
        #io-wrapper {
            position: relative;
            display: inline-block;
            max-width: 100%;
            overflow: hidden;
        }

        #io-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            pointer-events: none;
        }

        .qshape {
            fill: rgba(255, 193, 7, 0.9) !important;
            opacity: 1 !important;
            stroke: #333 !important;
            stroke-width: 2px !important;
            pointer-events: auto;
            cursor: pointer;
            transition: opacity 0.25s;
        }

        .qshape:hover {
            opacity: 0.6 !important;
        }

        .ashape {
            fill: transparent !important;
            stroke: #25D366 !important;
            stroke-width: 3px !important;
            opacity: 1 !important;
        }

        .qshape.revealed {
            opacity: 0 !important;
            pointer-events: none;
        }

        body {
            background-color: var(--bg-main) !important;
            background-image: var(--bg-pattern);
            background-attachment: fixed;
            color: var(--text-main) !important;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        @media (max-width: 991.98px) {
            body {
                background-attachment: scroll !important;
            }
        }

        .bg-dark {
            background-color: var(--bg-header) !important;
            color: var(--text-main) !important;
        }

        .text-white,
        .text-light {
            color: var(--text-nav) !important;
        }

        .border-dark,
        .border-secondary {
            border-color: var(--border-subtle) !important;
        }

        .card,
        .bg-card,
        .bg-white,
        .bg-light {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--border-subtle) !important;
            color: var(--text-main) !important;
            border-radius: 12px;
        }

        .card-header,
        .card-footer {
            background-color: var(--bg-header) !important;
            border-color: var(--border-subtle) !important;
            color: var(--text-main) !important;
        }

        .text-muted {
            color: var(--text-muted) !important;
        }

        .modal-content {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--border-subtle) !important;
        }

        .modal-header {
            border-bottom: 1px solid var(--border-subtle) !important;
        }

        .modal-footer {
            border-top: 1px solid var(--border-subtle) !important;
        }

        .form-control,
        .form-select {
            background-color: var(--bg-input) !important;
            border: 1px solid var(--border-subtle) !important;
            color: var(--text-main) !important;
        }

        .form-control::placeholder {
            color: var(--text-muted) !important;
        }

        .form-control:focus,
        .form-select:focus {
            background-color: var(--bg-card) !important;
            border-color: var(--brand-warning) !important;
            color: var(--text-main) !important;
            box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.25) !important;
        }

        .btn-warning { background-color: var(--brand-warning) !important; border-color: var(--brand-warning) !important; color: var(--brand-text) !important; }
        .btn-warning:hover { background-color: var(--brand-warning-hover) !important; }
        .text-warning { color: var(--brand-warning) !important; }
        .text-violet, .text-violet i { color: #B388FF !important; }
        .text-orange, .text-orange i { color: #FF8A65 !important; }
        .hover-yellow:hover { color: var(--brand-warning) !important; }

        html,
        body {
            max-width: 100vw;
            overflow-x: hidden;
        }

        /* The Safe Image Rules */
        .navbar-brand img {
            height: 34px !important;
            width: 34px !important;
            border-radius: 8px !important;
            object-fit: contain !important;
        }

        .card-body img,
        #question-text img,
        #explanation-content img,
        #preview-front img,
        #preview-back img {
            max-width: 100%;
            height: auto !important;
            border-radius: 8px;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        [data-theme="light"][style*="#181818"],
        [data-theme="light"] [style*="#2A2A2A"],
        [data-theme="light"][style*="#1E1E1E"] {
            background-color: var(--bg-card) !important;
            color: var(--text-main) !important;
            border-color: var(--border-subtle) !important;
        }

        [data-theme="light"] [style*="color: #FFF"],
        [data-theme="light"] [style*="color: #FFFFFF"] {
            color: var(--text-main) !important;
        }

        [data-theme="light"] table,
        [data-theme="light"] th,
        [data-theme="light"] td {
            background-color: var(--bg-card) !important;
            color: var(--text-main) !important;
            border-color: var(--border-subtle) !important;
        }

        [data-theme="light"] .btn-close-white,
        [data-theme="light"] .navbar-toggler-icon {
            filter: invert(1) grayscale(100%) brightness(0);
        }

        .navbar-custom {
            background-color: var(--bg-nav) !important;
            backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border-subtle);
        }

        .brand-text {
            font-size: 1.6rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: var(--text-nav);
        }

        .brand-text span {
            color: var(--brand-warning);
        }

        .nav-item .nav-link {
            font-size: 0.84rem;
            font-weight: 700;
            color: var(--text-main) !important;
            padding: 0.28rem 0.45rem !important;
            border-radius: 8px;
            transition: all 0.2s;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .nav-item .nav-link i {
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .navbar-nav .nav-link.border .nav-label-responsive {
            position: relative;
            top: -1px;
        }

        .nav-item .nav-link:hover,
        .nav-item .nav-link:focus {
            color: var(--brand-warning) !important;
            background-color: rgba(255, 255, 255, 0.08);
        }

        .stat-badge { font-size: 0.65rem; padding: 0.1rem 0.32rem; border-radius: 50px; font-weight: 800; margin-left: 1px; min-width: 16px; text-align: center; white-space: nowrap; }
        .nav-stat-new { background-color: var(--c-new); color: #000 !important; }
        .nav-stat-learn { background-color: var(--c-learn); color: #FFF !important; }
        .nav-stat-due { background-color: var(--c-due); color: #000 !important; }

        .custom-dropdown {
            background-color: var(--bg-card) !important;
            border: 1px solid var(--border-subtle) !important;
            border-radius: 12px;
        }

        .custom-dropdown .dropdown-item {
            color: var(--text-main) !important;
            font-weight: 500;
            padding: 0.5rem 1.2rem;
            transition: all 0.2s;
        }

        .custom-dropdown .dropdown-item:hover {
            background-color: var(--bg-header) !important;
            color: var(--brand-warning) !important;
        }

        .custom-dropdown .dropdown-divider {
            border-color: var(--border-subtle) !important;
        }

        .nav-avatar {
            width: 32px;
            height: 32px;
            background-color: var(--brand-warning);
            color: var(--brand-text);
            font-weight: 800;
            font-size: 0.95rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: 2px solid var(--border-subtle);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: transform 0.2s;
        }

        .nav-avatar:hover {
            transform: scale(1.05);
        }

        .badge-status {
            font-size: 0.68rem;
            letter-spacing: 0.5px;
            padding: 0.25rem 0.55rem;
            text-transform: uppercase;
        }

        .user-divider {
            height: 20px;
            width: 1px;
            background-color: var(--border-subtle);
            display: none;
            margin: 0 1px;
        }

        @media (min-width: 992px) {
            .user-divider {
                display: block;
            }
        }

        .theme-toggle-btn {
            background-color: var(--bg-input);
            color: var(--brand-warning);
            border: 1px solid var(--border-subtle);
            border-radius: 50px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
            cursor: pointer;
            font-size: 0.85rem;
        }

        .theme-toggle-btn:hover {
            background-color: var(--bg-header);
            transform: translateY(-2px);
        }

        /* ========================================================= */
        /* BULLETPROOF RESPONSIVE NAVBAR SYSTEM (MOBILE TO 4K)       */
        /* ========================================================= */
        .navbar-brand {
            flex-shrink: 0;
        }

        .nav-right-container {
            flex-shrink: 0;
        }

        /* Large Desktops & 4K Displays (>= 1280px) */
        @media (min-width: 1280px) {
            .navbar-nav {
                gap: 0.18rem !important;
            }
            .nav-item .nav-link {
                padding: 0.28rem 0.45rem !important;
                font-size: 0.84rem !important;
            }
        }

        /* Intermediate Tablets in Landscape & Compact Laptops (992px to 1279.98px)
           Specifically calibrated for 1024px-1200px viewports (Honor MagicPad 2, iPad Pro, Surface) */
        @media (min-width: 992px) and (max-width: 1279.98px) {
            .navbar-custom .container-fluid {
                padding-left: 0.35rem !important;
                padding-right: 0.35rem !important;
            }
            .navbar-brand {
                margin-right: 0.25rem !important;
                gap: 0.25rem !important;
            }
            .navbar-brand img {
                height: 34px !important;
                width: 34px !important;
            }
            .brand-text {
                font-size: 1.05rem !important;
            }
            .navbar-nav {
                gap: 1px !important;
            }
            .nav-item .nav-link {
                padding: 0.18rem 0.24rem !important;
                font-size: 0.74rem !important;
                gap: 2px !important;
            }
            .nav-item .nav-link i {
                font-size: 0.78rem !important;
            }
            /* Pulse & Q-Bank link compact padding */
            .navbar-nav .nav-link.border {
                padding-left: 0.35rem !important;
                padding-right: 0.35rem !important;
            }
            .stat-badge {
                font-size: 0.58rem !important;
                padding: 0.05rem 0.2rem !important;
                min-width: 12px !important;
            }
            .nav-right-container {
                gap: 3px !important;
            }
            .nav-right-container a[href*="dashboard"] {
                padding: 0.16rem 0.38rem !important;
                gap: 3px !important;
                font-size: 0.74rem !important;
            }
            .nav-right-container a[href*="dashboard"] i {
                font-size: 0.9rem !important;
            }
            .badge-label-responsive {
                display: none !important;
            }
            .badge-status {
                padding: 0.2rem 0.35rem !important;
                font-size: 0.7rem !important;
            }
            .theme-toggle-btn {
                width: 28px !important;
                height: 28px !important;
                font-size: 0.75rem !important;
            }
            .nav-avatar {
                width: 28px !important;
                height: 28px !important;
                font-size: 0.78rem !important;
            }
            .user-divider {
                display: none !important;
            }
        }

        /* Mobile Phones Collapsed Drawer (< 992px) */
        @media (max-width: 991.98px) {
            .navbar-brand {
                margin-right: 0.5rem !important;
            }
            .brand-text {
                font-size: 1.2rem !important;
            }
            .navbar-brand img {
                height: 34px !important;
                width: 34px !important;
            }
            .navbar-collapse {
                background-color: var(--bg-card);
                border: 1px solid var(--border-subtle);
                border-radius: 16px;
                padding: 1rem 1.25rem;
                margin-top: 0.75rem;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            }
            .navbar-nav {
                margin-left: 0 !important;
                gap: 0.35rem !important;
            }
            .nav-item .nav-link {
                padding: 0.65rem 0.9rem !important;
                font-size: 0.95rem !important;
                border-radius: 10px;
            }
            .nav-right-container {
                width: 100%;
                border-top: 1px solid var(--border-subtle);
                padding-top: 1rem;
                margin-top: 0.75rem;
                display: flex;
                flex-direction: row !important;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 0.75rem;
                position: relative;
            }
            .nav-right-container .dropdown {
                position: relative;
            }
            .nav-right-container .dropdown-menu {
                right: 0 !important;
                left: auto !important;
                min-width: 210px;
                max-width: calc(100vw - 2.5rem);
            }
            .user-divider {
                display: none !important;
            }
        }

        #icon-sun { display: none; }
        [data-theme="light"] #icon-moon { display: none !important; }
        [data-theme="light"] #icon-sun { display: inline-block !important; }

        /* Heart Pumping Pulse (Lub-Dub Rhythmic Pulse) */
        @keyframes pulseHeart {
            0% { transform: scale(1); }
            10% { transform: scale(1.18); }
            20% { transform: scale(1); }
            35% { transform: scale(1.12); }
            50% { transform: scale(1); }
            100% { transform: scale(1); }
        }

        .pulse-heart {
            display: inline-block;
            animation: pulseHeart 2s infinite ease-in-out;
        }
/* FontAwesome to Bootstrap Icons Compatibility Layer */
.fa, .fas, .far, .fab {
    display: inline-block;
    font-family: "bootstrap-icons" !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-spin {
    animation: bi-spin 1.2s infinite linear;
}
@keyframes bi-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* .fa-crosshairs::before rendered via vector SVG crosshair mask above */
.fa-spinner::before { content: "\F130"; }
.fa-chevron-left::before { content: "\F284"; }
.fa-chevron-right::before { content: "\F285"; }
.fa-user-shield::before { content: "\F53F"; }
.fa-chart-line::before { content: "\F3E7"; }
.fa-bullseye::before { content: "\F225"; }
.fa-check::before { content: "\F272"; }
.fa-times::before { content: "\F62A"; }
.fa-info-circle::before { content: "\F431"; }
.fa-exclamation-triangle::before { content: "\F33B"; }
.fa-bug::before { content: "\F1DB"; }

/* ========================================================= */
/* Course Header Workstation: Responsive Breadcrumb & Nav Dock */
/* ========================================================= */
.course-topbar-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.course-breadcrumb-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0.15rem 0 !important;
}

.course-breadcrumb-bar::-webkit-scrollbar {
    display: none !important;
}

.course-breadcrumb-bar .breadcrumb-crumb {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
}

.course-breadcrumb-bar .breadcrumb-separator {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    opacity: 0.6 !important;
}

.course-breadcrumb-bar .breadcrumb-course-title {
    max-width: 140px;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
    vertical-align: bottom !important;
}

@media (min-width: 576px) {
    .course-breadcrumb-bar .breadcrumb-course-title {
        max-width: 260px;
    }
}

@media (min-width: 768px) {
    .course-breadcrumb-bar .breadcrumb-course-title {
        max-width: 380px;
    }
}

@media (min-width: 1200px) {
    .course-breadcrumb-bar .breadcrumb-course-title {
        max-width: none;
    }
}

.course-nav-dock {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    gap: 0.5rem !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    align-items: center !important;
    padding: 0.25rem 0 !important;
    min-width: 0 !important;
}

.course-nav-dock::-webkit-scrollbar {
    display: none !important;
}

.course-nav-dock .btn,
.course-nav-dock .staff-control-pill,
.course-nav-dock .btn-tactile-outline,
.btn.rounded-pill,
.rounded-pill.btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.4 !important;
}

@media (max-width: 767.98px) {
    .course-topbar-wrapper {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }
    .course-breadcrumb-bar {
        width: 100% !important;
    }
    .course-nav-dock {
        width: 100% !important;
        padding-bottom: 0.35rem !important;
    }
}