/* Apex Scholar Core Style Sheet - Modern Premium Academic Theme */

:root {
    --bg-dark: #F3F8FF;               /* soft premium sky-blue main background */
    --bg-dark-card: #FFFFFF;          /* premium white cards background */
    --bg-darker: #F4F6F9;             /* secondary background/panels soft ash tint */
    --bg-question-card: #FFFFFF;      /* pure white question card surface */
    --bg-answer-card: #F8FAFC;        /* extremely light grey for answer card */
    --border-color: rgba(226, 232, 240, 0.8); /* elegant light grey border */
    
    --primary-accent: #2563EB;        /* Primary Blue */
    --primary-accent-hover: #1D4ED8;  /* Royal Blue Hover */
    --accent-blue: #3B82F6;           /* Accent Blue */
    
    --accent-glow: rgba(37, 99, 235, 0.05); 
    --secondary-accent: #3B82F6;      /* Sky Blue Accent */
    --warning-accent: #D97706;        /* High-contrast amber */
    --danger-accent: #DC2626;         /* Clear Wrong red */
    --correct-accent: #16A34A;        /* Success green */
    --text-primary: #1F2937;          /* Primary dark slate text (#1F2937) */
    --text-muted: #4B5563;            /* Secondary text (#4B5563) */
    --text-secondary: #6B7280;        /* Muted text (#6B7280) */
}

/* Base resets and defaults */
* {
    -webkit-tap-highlight-color: rgba(56, 189, 248, 0.25) !important; /* Sky Blue touch tap highlight */
}

body, html, body.bg-dark, .bg-dark {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;        /* Crisp Dark Slate text */
}

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

/* Globally polish borders and outlines across the platform */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end,
.border-secondary,
.border-primary,
.border-warning,
.border-success,
.border-danger,
.border-light,
.border-dark,
.border-info {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    outline: none !important;
}

/* Neutralize list group and card standard border classes to premium soft border */
.card, .list-group-item, .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.modal-content {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body {
    font-family: 'Inter', --font-sans, system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Typography styles */
.font-sans {
    font-family: 'Inter', sans-serif !important;
}

/* Base overrides for modern light typography */
.text-light {
    color: var(--text-primary) !important;        /* Dark Slate primary text */
}

.text-secondary {
    color: var(--text-muted) !important;        /* Modern clean eye-safe slate gray */
}

.text-muted {
    color: var(--text-muted) !important;        /* Slate gray for readability */
}

.font-display {
    font-family: 'Space Grotesk', sans-serif !important;
}

.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;        /* Soft Dark Slate headings */
}

/* Nav & Container tweaks */
.navbar {
    background: #FFFFFF !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
}

.bg-dark-card {
    background-color: var(--bg-dark-card) !important;
}

.bg-darker {
    background-color: var(--bg-darker) !important;
}

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

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

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

/* Custom cards styling - RECENT COHESIVE COMPACT DESIGN (15-30% more compact) */
.card {
    background: var(--bg-dark-card) !important;
    border: none !important;
    border-radius: 16px !important; /* Sleeker rounded corners */
    color: var(--text-primary) !important;
    padding: 16px !important;       /* Shrunk padding for high density */
    box-shadow: 
        0 2px 4px -1px rgba(0, 0, 0, 0.01),
        0 6px 14px -3px rgba(37, 99, 235, 0.03),
        0 12px 28px -4px rgba(37, 99, 235, 0.02),
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-3px) scale(1.005) !important;
    border: none !important;
    box-shadow: 
        0 8px 18px -5px rgba(37, 99, 235, 0.06),
        0 20px 40px -8px rgba(37, 99, 235, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* Compact heading overrides to fit more above the fold */
h1, .h1 {
    font-size: 1.45rem !important;
    letter-spacing: -0.015em !important;
}
h2, .h2 {
    font-size: 1.28rem !important;
}
h3, .h3 {
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
}
h4, .h4 {
    font-size: 1.0rem !important;
}
h5, .h5 {
    font-size: 0.9rem !important;
}
p, .small, .text-secondary {
    margin-bottom: 4px !important;
}
.mb-5 {
    margin-bottom: 1.25rem !important;
}
.mb-4 {
    margin-bottom: 0.85rem !important;
}
.py-4 {
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
}
.g-4 {
    --bs-gutter-x: 0.85rem !important;
    --bs-gutter-y: 0.85rem !important;
}

/* Style overrides to make text extremely readable and beautiful inside cards/sidebars/tabs */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card-3d h1, .card-3d h2, .card-3d h3, .card-3d h4, .card-3d h5, .card-3d h6,
.card-obsidian h1, .card-obsidian h2, .card-obsidian h3, .card-obsidian h4, .card-obsidian h5, .card-obsidian h6,
.sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5, .sidebar h6,
.navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6 {
    color: var(--text-primary) !important;
}

.card .text-light, .card-3d .text-light, .card-obsidian .text-light,
.sidebar .text-light, .navbar .text-light, .modal-content .text-light {
    color: var(--text-primary) !important;
}

.card .text-secondary, .card-3d .text-secondary, .card-obsidian .text-secondary,
.sidebar .text-secondary, .navbar .text-secondary, .modal-content .text-secondary {
    color: var(--text-muted) !important;        /* Slate gray text on light cards */
}

.card .text-muted, .card-3d .text-muted, .card-obsidian .text-muted,
.sidebar .text-muted, .navbar .text-muted, .modal-content .text-muted {
    color: var(--text-muted) !important;
}

.card-glowing {
    border-color: var(--primary-accent) !important;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.15) !important;
}

/* Inputs & Actions with Soft 3D Shadow and Rounded Elements */
.form-control, .form-select {
    background: var(--bg-dark-card) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 12px 20px !important;
    color: var(--text-primary) !important;
    box-shadow: 
        0 2px 4px rgba(37, 99, 235, 0.01),
        0 4px 12px rgba(37, 99, 235, 0.02),
        inset 0 1.5px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.form-control:focus, .form-select:focus {
    box-shadow: 
        0 12px 25px rgba(37, 99, 235, 0.06),
        0 0 0 4px rgba(37, 99, 235, 0.1) !important;
    background-color: var(--bg-dark-card) !important;
    transform: translateY(-2px) !important;
}

/* Ensure high-contrast and readability on explicitly dark containers */
.bg-darker .text-light, 
.student-card-mobile .text-light, 
.bg-dark-card .text-light, 
.modal-content .text-light, 
#student-slide-right-panel .text-light,
[style*="background-color: #111318"] .text-light, 
[style*="background-color: #0b0d13"] .text-light,
.bg-dark-card .text-white,
.modal-content .text-white {
    color: var(--text-primary) !important;
}

/* Ensure inputs inside the admin forms and modals maintain clear text colors */
.form-control.bg-dark, .form-select.bg-dark {
    background-color: var(--bg-dark-card) !important;
    color: var(--text-primary) !important;
}
.modal-content .form-control, .modal-content .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}
.modal-content .form-control:focus, .modal-content .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Premium Floating Interactive Buttons with 3D Depth */
.btn-primary-accent, .btn-primary, .btn-warning, .btn-danger, .btn-success, .btn-outline-light, .btn-3d, .btn-outline-secondary {
    position: relative;
    border: none !important;
    border-radius: 9999px !important; /* Elegant rounded-pill style universally */
    font-weight: 600 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary-accent, .btn-primary, .btn-3d {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--accent-blue) 100%) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 6px -1px rgba(37, 99, 235, 0.08),
        0 10px 20px -3px rgba(37, 99, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.btn-primary-accent:hover, .btn-primary:hover, .btn-3d:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--primary-accent-hover) 0%, var(--primary-accent) 100%) !important;
    box-shadow: 
        0 8px 12px -2px rgba(37, 99, 235, 0.12),
        0 16px 30px -4px rgba(37, 99, 235, 0.2),
        0 0 15px rgba(37, 99, 235, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.btn-primary-accent:active, .btn-primary:active, .btn-3d:active {
    transform: translateY(1px) !important;
    box-shadow: 
        0 2px 4px rgba(37, 99, 235, 0.08),
        0 4px 8px rgba(37, 99, 235, 0.06) !important;
}

.btn-outline-secondary {
    background: var(--bg-dark-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 10px 15px -3px rgba(37, 99, 235, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.btn-outline-secondary:hover {
    transform: translateY(-2px);
    color: var(--primary-accent) !important;
    background: #FFFFFF !important;
    box-shadow: 
        0 8px 15px -3px rgba(37, 99, 235, 0.06),
        0 0 12px rgba(37, 99, 235, 0.04),
        inset 0 1px 1px #ffffff !important;
}

.btn-outline-secondary:active {
    transform: translateY(1px) !important;
    box-shadow: 
        0 2px 4px rgba(37, 99, 235, 0.03) !important;
}

.btn-outline-light {
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: var(--text-primary) !important;
    background: var(--bg-dark-card) !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 10px 15px -3px rgba(37, 99, 235, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

.btn-outline-light:hover {
    transform: translateY(-2px);
    color: var(--primary-accent) !important;
    background: #FFFFFF !important;
    border-color: var(--primary-accent) !important;
    box-shadow: 
        0 8px 15px -3px rgba(37, 99, 235, 0.06),
        0 0 12px rgba(37, 99, 235, 0.04),
        inset 0 1px 1px #ffffff !important;
}

.btn-outline-light:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.03) !important;
}

/* Custom premium background gradients */
.bg-gradient-premium {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15) !important;
}

.bg-gradient-srs {
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    color: var(--text-primary) !important;
}

/* Active practice flashcard styles - Visual Highlights of the Platform */
.flashcard-box {
    perspective: 2000px;
    height: clamp(280px, 45vh, 320px) !important;
    cursor: pointer;
    margin-bottom: 2rem;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.flashcard-box.flipped .flashcard-inner {
    transform: rotateY(180deg) translateZ(10px);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(1.5rem, 4vw, 3rem) !important;
    border: none !important;
    border-radius: 32px !important; /* Elegant large rounded corners */
    box-shadow: 
        0 10px 20px -5px rgba(37, 99, 235, 0.04),
        0 25px 50px -12px rgba(37, 99, 235, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.flashcard-front {
    background: linear-gradient(135deg, #F6FAFF 0%, #E7F2FF 100%) !important;
    color: var(--text-primary) !important;
}

.flashcard-back {
    background: linear-gradient(135deg, #E7F2FF 0%, #DCEEFF 100%) !important;
    color: var(--text-primary) !important;
    transform: rotateY(180deg);
}

.flashcard-box:hover .flashcard-front,
.flashcard-box:hover .flashcard-back {
    box-shadow: 
        0 15px 30px -5px rgba(37, 99, 235, 0.08),
        0 40px 80px -15px rgba(37, 99, 235, 0.12),
        0 0 25px rgba(37, 99, 235, 0.04),
        inset 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

/* Progress bar, XP pill, levels styling */
.progress-bar-xp {
    background-color: var(--secondary-accent) !important;
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent) !important;
    background-size: 1rem 1rem !important;
    animation: progress-bar-stripes 1s linear infinite;
}

/* Ad specific styles */
.object-cover-ad-banner {
    object-fit: cover !important;
}

.hover-underline:hover {
    text-decoration: underline;
}

.xsmall {
    font-size: 0.75rem !important;
}

/* Scrollbars styling */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #343f56;
}

/* Sidebar and Application Layout Structures */
.app-layout {
    min-height: 100vh;
    display: flex;
    position: relative;
    width: 100%;
}

.app-content-wrapper {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Sidebar structure */
.sidebar {
    width: 260px;
    height: 100vh;
    position: sticky;
    top: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow-x: hidden;
    background-color: var(--bg-dark-card) !important;
    border-right: 1px solid var(--border-color) !important;
}

/* Sidebar Brand adjustment */
.sidebar-brand-box {
    height: 64px;
    min-height: 64px;
    overflow: hidden;
}
.sidebar-brand-text {
    transition: opacity 0.2s ease, width 0.2s ease;
}

/* Base list navigation inside sidebar */
.sidebar-nav {
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar for layout purity */
}
.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar .nav-link {
    color: #94a3b8 !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(212, 175, 55, 0.15) !important;
}

.sidebar .nav-link.active {
    background-color: var(--primary-accent) !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35);
}

.sidebar-label {
    transition: opacity 0.25s ease, width 0.25s ease;
    opacity: 1;
    display: inline-block;
}

.sidebar-logout-text {
    transition: opacity 0.25s ease, width 0.25s ease;
}

/* Sidebar Collapsed State (Desktop Toggle) */
.sidebar.sidebar-collapsed {
    width: 72px;
}

.sidebar.sidebar-collapsed .sidebar-label,
.sidebar.sidebar-collapsed .sidebar-brand-text,
.sidebar.sidebar-collapsed .avatar-meta,
.sidebar.sidebar-collapsed .sidebar-logout-text,
.sidebar.sidebar-collapsed .sidebar-category-text {
    opacity: 0 !important;
    width: 0 !important;
    pointer-events: none;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar.sidebar-collapsed .sidebar-brand-box {
    justify-content: center !important;
}
.sidebar.sidebar-collapsed .sidebar-brand-icon {
    margin-right: 0 !important;
}

.sidebar.sidebar-collapsed .sidebar-nav .nav-link {
    justify-content: center;
    padding-left: 12px !important;
    padding-right: 12px !important;
}
.sidebar.sidebar-collapsed .sidebar-nav .sidebar-icon {
    margin-right: 0 !important;
    font-size: 1.2rem;
}

.sidebar.sidebar-collapsed .sidebar-footer {
    padding: 12px 8px !important;
}
.sidebar.sidebar-collapsed .user-info-box {
    justify-content: center !important;
}
.sidebar.sidebar-collapsed .avatar {
    margin-right: 0 !important;
}

/* Mobile responsive drawer overlay and structure */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 260px;
        transform: translateX(-100%);
        z-index: 1050;
        height: 100vh;
        box-shadow: none;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0) !important;
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.6) !important;
    }
}

/* Backdrop Overlay styling */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(6, 9, 16, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1045;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.active {
    display: block !important;
}

/* Ergononmic Mobile Bottom Menu Navigation Bar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(19, 26, 38, 0.95) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--border-color) !important;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    text-decoration: none !important;
    font-size: 0.68rem;
    font-family: 'Space Grotesk', sans-serif;
    gap: 2px;
    flex: 1;
    height: 100%;
    transition: color 0.15s ease;
}

.mobile-nav-item i {
    font-size: 1.2rem;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mobile-nav-item:hover, .mobile-nav-item.active {
    color: var(--primary-accent) !important;
}

.mobile-nav-item.active i {
    transform: translateY(-2px) scale(1.08);
}

/* Safe Padding margins for content above bars */
@media (max-width: 767.98px) {
    main {
        padding-bottom: 84px !important;
    }
}
sidebar-toggle-btn {
    transition: background-color 0.15s ease;
}
.sidebar-toggle-btn:hover {
    background-color: var(--border-color) !important;
}

/* HIGH-END PREMIUM ACADEMIC DESIGN SYSTEMS - INTEGRATED & BULLET-PROOF DECORATIONS */
.shadow-3d {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 10px 20px -3px rgba(37, 99, 235, 0.03),
        0 20px 40px -4px rgba(37, 99, 235, 0.02) !important;
}

.card-3d {
    background: var(--bg-dark-card) !important;
    border: none !important;
    border-radius: 24px !important; /* Large rounded corners */
    color: var(--text-primary) !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 10px 20px -3px rgba(37, 99, 235, 0.04),
        0 20px 40px -4px rgba(37, 99, 235, 0.03),
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.card-3d:hover {
    transform: translateY(-6px) scale(1.01) !important;
    border: none !important;
    box-shadow: 
        0 12px 25px -5px rgba(37, 99, 235, 0.08),
        0 30px 60px -10px rgba(37, 99, 235, 0.06),
        0 0 20px rgba(37, 99, 235, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.9) !important;
}

/* Badge/capsule layers */
.user-badge {
    background: linear-gradient(145deg, #131a26, #060910) !important;
    border: 2px solid var(--border-color) !important;
    border-bottom: 3.5px solid #826310 !important;
    box-shadow: inset 0 1px 1.5px rgba(255,255,255,0.05),
                0 4px 8px rgba(0, 0, 0, 0.4);
}

.progress {
    background-color: #131a26 !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

/* WIDESCREEN HORIZONTAL NAVIGATION LUXURY OVERRIDES */
@media (min-width: 768px) {
    #app-sidebar {
        display: none !important;
    }
    .app-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .app-content-wrapper {
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 100vh !important;
    }
    #desktop-sidebar-trigger {
        display: none !important;
    }
    .navbar {
        height: auto !important;
        min-height: 72px !important;
        padding: 0.5rem 2rem !important;
    }
}

/* Custom Nav Links Override for Light Academic Aesthetics */
.nav-gold-link {
    color: var(--text-muted) !important;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.5rem 1rem !important;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.nav-gold-link:hover {
    color: var(--primary-accent) !important;
    background: rgba(37, 99, 235, 0.05) !important;
}

.nav-gold-link.active {
    color: #FFFFFF !important;
    background: var(--primary-accent) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

/* Premium Header Elements */
.logo-gold {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
}

.user-badge-gold {
    background: #FFFFFF !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.2s ease;
}

.user-badge-gold:hover {
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
}

.badge-lvl-gold {
    background: var(--primary-accent) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem !important;
}

/* Hide scrollbars for modern minimalist look */
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}
.no-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Gilded Gamified Tables styling - Modern Gold/Dark Obsidian 3D Design */
.table-gilded {
    --bs-table-bg: transparent !important;
    --bs-table-color: #ffffff !important;
    --bs-table-bg-state: transparent !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important; /* space between rows for floating card appearance */
    width: 100%;
}
.table-gilded thead tr {
    background: transparent !important;
}
.table-gilded thead th {
    color: var(--primary-accent) !important;
    text-shadow: none;
    font-size: 0.85rem;
    font-family: 'Space Grotesk', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 14px 20px !important;
    border: none !important;
    background: transparent !important;
}
.table-gilded tbody tr {
    background: transparent !important;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.table-gilded tbody tr:hover {
    transform: translateY(-4px) !important;
}

/* Base table cells - Styled with premium clean academia design */
.table-gilded tbody td, .table-gilded tbody th {
    background: #FFFFFF !important;
    border: none !important;
    color: var(--text-primary) !important;
    padding: 16px 20px !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Global definitions for deluxe cards & clean headings */
.card-obsidian {
    background: #FFFFFF !important;
    border: none !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    border-radius: 16px !important;
    color: var(--text-primary) !important;
}
.text-gilded {
    color: var(--primary-accent) !important;
    text-shadow: none;
}

/* Left-most cell rounded corners and depth */
.table-gilded tbody td:first-child, .table-gilded tbody th:first-child {
    border-left: none !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

/* Right-most cell rounded corners and depth */
.table-gilded tbody td:last-child {
    border-right: none !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Hover effects for row cells */
.table-gilded tbody tr:hover td, .table-gilded tbody tr:hover th {
    background: #FFFFFF !important;
    color: var(--primary-accent) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.08) !important;
}
.table-gilded tbody tr:hover td:first-child, .table-gilded tbody tr:hover th:first-child {
    border-left-color: transparent !important;
}
.table-gilded tbody tr:hover td:last-child {
    border-right-color: transparent !important;
}

/* Specific highlights for active row */
.table-gilded tbody tr.leaderboard-row-me td,
.table-gilded tbody tr.leaderboard-row-me th {
    background: rgba(37, 99, 235, 0.05) !important;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08) !important;
    color: var(--primary-accent) !important;
}
.table-gilded tbody tr.leaderboard-row-me td:first-child,
.table-gilded tbody tr.leaderboard-row-me th:first-child {
    border-left: none !important;
}
.table-gilded tbody tr.leaderboard-row-me td:last-child {
    border-right: none !important;
}

/* Hover highlights for active user's row */
.table-gilded tbody tr.leaderboard-row-me:hover td,
.table-gilded tbody tr.leaderboard-row-me:hover th {
    background: rgba(37, 99, 235, 0.08) !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.12) !important;
}

/* Float-Blue animation */
@keyframes float-blue {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.animate-float-gold {
    animation: float-blue 4s ease-in-out infinite;
}

/* Pulsing premium live glow */
@keyframes blue-pulse-glow {
    0% { box-shadow: 0 0 5px rgba(37, 99, 235, 0.1); }
    50% { box-shadow: 0 0 25px rgba(37, 99, 235, 0.2); }
    100% { box-shadow: 0 0 5px rgba(37, 99, 235, 0.1); }
}
.animate-pulse-gold-glow {
    animation: blue-pulse-glow 3s infinite ease-in-out;
}

/* Base Responsive Alignment Stabilizer */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Core Calendar Spaced Planner Grid Module */
.calendar-grid-wrapper {
    width: 100% !important;
    overflow-x: hidden !important; /* completely avoid horizontal overflow */
}
.calendar-header-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    text-align: center;
    font-family: var(--font-mono, monospace);
    font-size: 0.75rem;
}
.calendar-days-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
}
.calendar-day, .calendar-day-node {
    min-height: 10px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}
.calendar-day:hover {
    background-color: rgba(212, 175, 55, 0.12) !important;
}

/* HIGH-END ERGONOMIC MOBILE APP TOUCH OPTIMIZATIONS */
@media (max-width: 767.98px) {
    /* Compress container spacing to look like a tight, sleek native mobile app layout */
    body {
        font-size: 0.88rem !important;
        line-height: 1.4 !important;
    }
    
    .container-fluid, .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    main {
        padding-top: 12px !important;
        padding-bottom: 96px !important; /* Elegant breather space for bottom mobile menu */
    }
    
    /* Make cards extremely elegant, compact and non-obtrusive */
    .card {
        padding: 14px !important;
        border-radius: 12px !important;
        border: 1px solid var(--border-color) !important;
        border-bottom: 3.5px solid #826310 !important;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
        margin-bottom: 12px !important;
    }
    .card:hover {
        transform: none !important; /* Disable hover jumps on touch screens */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    }
    
    /* Dynamic grid systems optimized for mobile density */
    .row {
        --bs-gutter-x: 10px !important;
        --bs-gutter-y: 10px !important;
    }
    
    /* Clean displays and typography spacing */
    h1, .h1 {
        font-size: 1.35rem !important;
        letter-spacing: -0.015em !important;
        margin-bottom: 4px !important;
    }
    h2, .h2 {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
    }
    h3, .h3 {
        font-size: 1.15rem !important;
        margin-bottom: 4px !important;
    }
    h4, .h4 {
        font-size: 1.05rem !important;
    }
    
    /* Extremely tactile, beautifully sized action button nodes */
    .btn {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        border-radius: 30px !important; /* Circular premium pills */
        min-height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }
    .btn-sm {
        padding: 6px 12px !important;
        font-size: 0.76rem !important;
        min-height: 32px !important;
    }
    
    /* Premium text fields and selector tags */
    .form-control, .form-select {
        padding: 8px 14px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        min-height: 38px !important;
    }
    
    /* Mobile-optimized responsive tables */
    .table-responsive {
        border-radius: 12px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-responsive::-webkit-scrollbar {
        height: 4px !important;
    }
    
    /* Hide non-critical badges or elements inside lists */
    .d-mobile-none {
        display: none !important;
    }
    
    /* Segmented Navigation adjustments */
    .admin-segmented-nav {
        border-radius: 12px !important;
        padding: 4px !important;
    }
    .admin-tab-btn {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        min-width: 85px !important;
    }

    /* Calendar Spaced Planner Mobile Optimizations */
    .calendar-grid-wrapper .d-grid, .calendar-header-grid, .calendar-days-grid {
        grid-template-columns: repeat(7, 1fr) !important;
        gap: 3px !important;
    }
    .calendar-day, .calendar-day-node {
        min-height: 10px !important;
        padding: 4px 1.5px !important;
        border-radius: 4px !important;
    }
    .calendar-day .badge {
        display: none !important; /* Hide Today badge on tiny screens to avoid breaking layout */
    }
    .calendar-day .d-flex.flex-column.gap-1.mt-1 {
        margin-top: 1px !important;
        gap: 1px !important;
    }
    .calendar-day .d-flex.flex-column.gap-1.mt-1 span {
        font-size: 0.50rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        line-height: 1 !important;
    }
    .calendar-day .d-flex.flex-column.gap-1.mt-1 span i {
        font-size: 0.42rem !important;
        margin-right: 1px !important;
    }

    /* Gilded Tables & Leaderboard Mobile Optimizations */
    .table-gilded {
        border-spacing: 0 4px !important;
    }
    .table-gilded thead th {
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.04em !important;
        width: auto !important;
    }
    .table-gilded tbody td, .table-gilded tbody th {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        width: auto !important;
    }
    .table-gilded tbody tr:hover td, .table-gilded tbody tr:hover th {
        border-bottom-width: 3px !important;
    }
    .avatar-indicator {
        width: 28px !important;
        height: 28px !important;
        margin-right: 6px !important;
        font-size: 0.8rem !important;
    }
    .table-gilded td span[style*="font-size: 0.72rem;"] {
        font-size: 0.62rem !important;
    }
    .table-gilded span.badge {
        padding: 2px 4px !important;
        font-size: 0.6rem !important;
    }

    /* Flashcard Practice Arena Mobile Optimizations */
    .flashcard-box {
        height: 160px !important;
        margin-bottom: 8px !important;
    }
    .flashcard-front, .flashcard-back {
        padding: 8px !important;
        border-radius: 12px !important;
        border-width: 2px !important;
        border-bottom-width: 5px !important;
    }
    #card-question-field, #card-answer-field {
        font-size: 0.92rem !important;
        margin-top: 1.4rem !important;
        margin-bottom: 0.8rem !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        line-height: 1.3 !important;
    }
    .flashcard-front p, .flashcard-back p {
        padding: 4px 8px !important;
        font-size: 0.55rem !important;
    }
    .flashcard-front .d-flex, .flashcard-back .d-flex {
        padding: 4px 8px !important;
        font-size: 0.65rem !important;
    }

    #user-input-form-block, #srs-evaluation-block {
        padding: 10px !important;
        margin-bottom: 6px !important;
    }
    #user-input-form-block h5 {
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
    }
    #question-timer-container {
        padding: 6px !important;
        margin-bottom: 8px !important;
        border-width: 1px !important;
        border-bottom-width: 3px !important;
    }
    #question-timer-container span {
        font-size: 0.72rem !important;
    }
    #question-timer-countdown {
        font-size: 0.95rem !important;
    }

    /* Target the big Bootstrap/Tailwind margins specifically for active practice elements on mobile */
    .progress.mb-4, .flashcard-box.mb-4 {
        margin-bottom: 8px !important;
    }

    /* Answer input, speaker icons & micro button container sizes */
    #answer-input-val {
        padding: 6px 10px !important;
        font-size: 16px !important;
        min-height: 34px !important;
    }
    #mic-trigger-btn {
        padding: 6px 10px !important;
        min-height: 34px !important;
    }
    #mic-icon-element {
        font-size: 0.82rem !important;
    }

    /* Submitting button scale optimization */
    #user-input-form-block .btn-primary-accent, #user-input-form-block .btn-lg {
        padding: 6px 12px !important;
        font-size: 0.82rem !important;
        min-height: 34px !important;
        font-weight: 500 !important;
    }

    /* SRS Grading evaluation block scale downs */
    #srs-evaluation-block .p-3 {
        padding: 6px 12px !important;
        margin-bottom: 6px !important;
    }
    #srs-evaluation-block .p-3 p {
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
    }
    #countdown-timer-text {
        font-size: 1.15rem !important;
        margin-bottom: 2px !important;
    }
    #countdown-progress {
        height: 3px !important;
    }
    #srs-evaluation-block h4 {
        font-size: 0.95rem !important;
        margin-bottom: 4px !important;
    }
    #srs-evaluation-block .badge {
        padding: 3px 6px !important;
        font-size: 0.65rem !important;
    }

    /* Active practice header layouts */
    .row.align-items-center.mb-3 {
        margin-bottom: 6px !important;
    }
    .row.align-items-center.mb-3 h2 {
        font-size: 1.1rem !important;
    }
    .row.align-items-center.mb-3 .btn {
        padding: 4px 10px !important;
        font-size: 0.72rem !important;
        min-height: 28px !important;
    }

    /* Input group alignment fix */
    .input-group .btn {
        border-top-right-radius: 10px !important;
        border-bottom-right-radius: 10px !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}

/* ==========================================
   WHO WANTS TO BE A MILLIONAIRE PREMIUM MCQ MODULE - ACADEMIC SAAS EDIT
   ========================================== */
.wwtbam-arena {
    background: #F8FAFC !important;
    border: none !important;
    padding: clamp(14px, 3.5vh, 44px) clamp(16px, 3vw, 48px) !important; /* Premium responsive padding */
    box-shadow: none !important;
    position: relative;
    border-radius: clamp(14px, 2vh, 28px) !important;
    overflow: visible !important;
    margin: clamp(8px, 1.8vh, 32px) auto !important;
    width: 100% !important;
    max-width: 1400px !important; /* Significantly increased for a premium widescreen feel */
}

/* Premium Header and Lifelines */
.wwtbam-header-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(0.72rem, 1.8vw, 0.95rem) !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0.08em !important;
    text-shadow: none !important;
}

.wwtbam-lifelines {
    display: flex;
    gap: clamp(4px, 1.2vw, 8px) !important;
}

.btn-wwtbam-lifeline {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: clamp(0.64rem, 1.5vw, 0.85rem) !important;
    font-weight: 600 !important;
    color: var(--primary-accent) !important; /* Royal Blue */
    background: rgba(37, 99, 235, 0.06) !important;
    border: none !important;
    border-radius: 30px !important;
    padding: clamp(3px, 0.8vh, 6px) clamp(8px, 1.8vw, 16px) !important;
    display: inline-flex;
    align-items: center;
    gap: clamp(3px, 1vw, 8px);
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
    text-decoration: none !important;
}
.btn-wwtbam-lifeline i {
    font-size: clamp(0.7rem, 1.6vw, 0.95rem) !important;
}
.btn-wwtbam-lifeline:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--primary-accent-hover) !important;
    transform: translateY(-1px);
}
.btn-wwtbam-lifeline:disabled {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: #888888 !important;
}

.wwtbam-question-container {
    width: 100%;
    position: relative;
    margin-bottom: clamp(14px, 4vh, 48px) !important; /* Generous on desktop, compact on mobile */
    text-align: center;
    padding: 0 clamp(4px, 2vw, 20px) !important;
    z-index: 5;
}

.wwtbam-question-box {
    background: var(--bg-question-card) !important;
    border: none !important;
    border-radius: clamp(10px, 1.5vh, 20px) !important;
    padding: clamp(10px, 2.5vh, 28px) clamp(14px, 3vw, 36px) !important;
    color: var(--text-primary) !important;
    font-size: clamp(1.0rem, 3.2vw, 1.65rem) !important; /* Scaling font size */
    font-weight: 700 !important; /* Extra focus */
    line-height: 1.35 !important;
    letter-spacing: 0.02em;
    position: relative;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.01) !important;
    display: flex; /* Perfect flex alignment */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(68px, 18vh, 130px) !important; /* Capped target height */
    overflow: hidden !important;
    z-index: 2;
    text-shadow: none !important;
}

/* Connectors are disabled for the borderless look */
.wwtbam-question-container::before {
    content: none !important;
}

/* Diamonds on Left & Right are disabled for the clean SaaS design */
.wwtbam-question-box::before, .wwtbam-question-box::after {
    content: none !important;
}

.wwtbam-options-grid, #sim-mcq-options-block {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    margin-top: clamp(8px, 2vh, 20px) !important;
    position: relative;
    z-index: 5;
    gap: 12px 8px !important;
}

.wwtbam-options-grid > .col, #sim-mcq-options-block > .col {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    padding: 0 !important;
}

.btn-wwtbam-option {
    background: var(--bg-answer-card) !important;
    border: none !important;
    border-radius: clamp(14px, 3vh, 24px) !important;
    color: var(--text-primary) !important;
    padding: clamp(8px, 1.5vh, 16px) clamp(10px, 2vw, 20px) !important;
    font-weight: 600 !important;
    position: relative;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(52px, 7.5vh, 72px) !important; /* Constrained min-height range with auto-expansion */
    height: auto !important;
    overflow: visible !important;
}

/* Option inner text styling */
.wwtbam-option-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important; /* Dark Slate Title */
    text-align: left !important;
    text-shadow: none !important;
    display: inline-block !important;
    word-break: break-word !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    width: 100%;
}

/* Diamonds are disabled for MCQ Option Buttons */
.btn-wwtbam-option::before, .btn-wwtbam-option::after {
    content: none !important;
}

.btn-wwtbam-option:hover:not(:disabled) {
    background: #EFF6FF !important; /* Sky blue Tint */
    color: var(--primary-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12), 0 0 12px rgba(37, 99, 235, 0.08) !important;
}
.btn-wwtbam-option:hover:not(:disabled) .wwtbam-option-text {
    color: var(--primary-accent) !important;
}

.btn-wwtbam-option.selected {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--accent-blue) 100%) !important; /* Blue gradient */
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.2) !important;
}
.btn-wwtbam-option.selected .wwtbam-option-text {
    color: #ffffff !important;
}

@keyframes wwtbamSuccess {
    0% { transform: scale(1); box-shadow: 0 0 0px rgba(16, 185, 129, 0); }
    50% { transform: scale(1.02); box-shadow: 0 0 25px rgba(16, 185, 129, 0.3); }
    100% { transform: scale(1.01); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2); }
}

@keyframes wwtbamError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.btn-wwtbam-option.correct {
    background: #10B981 !important; /* Emerald Green */
    color: #ffffff !important;
    animation: wwtbamSuccess 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
}
.btn-wwtbam-option.correct .wwtbam-option-text {
    color: #ffffff !important;
}

.btn-wwtbam-option.wrong {
    background: #EF4444 !important; /* Soft Red */
    color: #ffffff !important;
    animation: wwtbamError 0.4s ease-in-out forwards !important;
}
.btn-wwtbam-option.wrong .wwtbam-option-text {
    color: #ffffff !important;
}

/* Light Academic circle letter indicator */
.btn-wwtbam-option .letter {
    color: #64748B !important; /* Slate Gray */
    border: 1px solid #E2E8F0 !important;
    border-radius: 50%;
    width: clamp(20px, 4.5vh, 32px) !important;
    height: clamp(20px, 4.5vh, 32px) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: clamp(0.68rem, 1.5vw, 0.95rem) !important;
    font-family: 'Space Grotesk', sans-serif;
    margin-right: clamp(6px, 1.5vw, 14px) !important;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
    background: #F8FAFC;
    box-shadow: none !important;
}

.btn-wwtbam-option:hover:not(:disabled) .letter {
    color: #2563EB !important;
    border-color: #BFDBFE !important;
    background: #EFF6FF;
}

.btn-wwtbam-option.selected .letter {
    color: #1E40AF !important;
    border-color: #93C5FD !important;
    background: #DBEAFE;
}

.btn-wwtbam-option.correct .letter,
.btn-wwtbam-option.wrong .letter {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: rgba(255,255,255,0.2) !important;
}

/* Media guidelines to guarantee ultimate density on ultra compact mobile views */
@media (max-width: 576px) {
    .wwtbam-arena {
        padding: 12px 10px !important;
        margin: 6px auto !important;
    }
}

/* Phone a Friend dialog styling */
.wwtbam-hint-bubble {
    background: #FFFFFF !important;
    border: 1px solid rgba(37, 99, 235, 0.15) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    animation: fadeIn 0.3s ease-out;
}

.wwtbam-hint-bubble h5 {
    color: #2563EB !important;
    font-family: 'Space Grotesk', sans-serif !important;
    margin-bottom: 8px !important;
}

.wwtbam-hint-bubble p {
    color: #0F172A !important;
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}

/* --- Strict Desktop Typography Minimum 14px Rule --- */
@media (min-width: 768px) {
    body, h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, select, textarea, label, table, td, th, .small, .xsmall, .badge, [style*="font-size"] {
        font-size: inherit; /* inherit structure unless safety-clamped */
    }
    
    .small, .xsmall, .badge, .font-mono, td, th, select, option, input, textarea, .btn-sm, .avatar-meta, .user-badge-gold span, .nav-gold-link, .mobile-nav-item span {
        font-size: 14px !important;
    }
    
    h1, .h1 { font-size: 1.85rem !important; }
    h2, .h2 { font-size: 1.55rem !important; }
    h3, .h3 { font-size: 1.35rem !important; }
    h4, .h4 { font-size: 1.20rem !important; }
    h5, .h5 { font-size: 1.05rem !important; }
    h6, .h6 { font-size: 14px !important; font-weight: 700 !important; }
    
    body, p, label, .form-control, .form-select, .btn {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   APEX SCHOLAR REUSABLE DESIGN SYSTEM (PREMIUM SAAS LIGHT THEME)
   ========================================================================== */

/* Universal light mode overrides for any old dark utilities */
body, html, body.bg-dark, .bg-dark {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

.bg-darker, .bg-dark-card, .bg-black, [style*="background-color: #111318"], [style*="background-color: #0b0d13"] {
    background-color: var(--bg-dark-card) !important;
}

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

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

/* 1. White Glass Cards & Unified Cards */
.dashboard-card, .surface-card, .glass-card, .card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    border: 1px solid rgba(37, 99, 235, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.01),
        0 10px 20px -3px rgba(37, 99, 235, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: var(--text-primary) !important;
    padding: 18px !important;
}

.dashboard-card:hover, .surface-card:hover, .glass-card:hover, .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 
        0 12px 24px -5px rgba(37, 99, 235, 0.08),
        0 24px 38px -8px rgba(37, 99, 235, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(37, 99, 235, 0.16) !important;
}

/* 2. Soft Ash Secondary Panel Base */
.light-panel {
    background-color: var(--bg-darker) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    padding: 18px !important;
}

/* 3. High-Contrast Premium Metrics Counters */
.metric-card {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 1px solid rgba(37, 99, 235, 0.06) !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    box-shadow: 
        0 4px 12px rgba(15, 23, 42, 0.01),
        inset 0 1px 0 #ffffff !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.metric-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 10px 20px rgba(37, 99, 235, 0.04) !important;
}

/* 4. Modern Gilded & SaaS Data Tables */
.data-table, .table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
}

.data-table thead tr, .table thead tr {
    background-color: #EEF4FF !important;
}

.data-table thead th, .table thead th {
    color: var(--primary-accent) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.06em !important;
    padding: 12px 18px !important;
    border: none !important;
    background-color: #EEF4FF !important;
}

.data-table tbody tr, .table tbody tr {
    background-color: #FFFFFF !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border-radius: 8px !important;
}

.data-table tbody tr:nth-child(even), .table tbody tr:nth-child(even) {
    background-color: #F8FAFC !important;
}

.data-table tbody tr:hover, .table tbody tr:hover,
.table-gilded tbody tr:hover td, .table-gilded tbody tr:hover th {
    background-color: #EAF3FF !important;
    color: var(--primary-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.06) !important;
}

.data-table td, .table td, .data-table th, .table th,
.table-gilded tbody td, .table-gilded tbody th {
    padding: 14px 18px !important;
    vertical-align: middle !important;
    color: var(--text-primary) !important;
    border: none !important;
    background-color: #FFFFFF !important;
}

.data-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) th,
.table tbody tr:nth-child(even) td, .table tbody tr:nth-child(even) th {
    background-color: #F8FAFC !important;
}

.table-gilded tbody td:first-child, .table-gilded tbody th:first-child,
.data-table td:first-child, .table td:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.table-gilded tbody td:last-child, .table-gilded tbody th:last-child,
.data-table td:last-child, .table td:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

/* Global automatic legacy table-dark to Premium SaaS Light Conversion */
.table-dark, .table.table-dark {
    background-color: transparent !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    border: none !important;
}
.table-dark th, .table-dark td, .table-dark thead th, .table-dark tbody td {
    background-color: #FFFFFF !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    padding: 12px 16px !important;
}
.table-dark thead, .table-dark thead tr, .table-dark thead tr th {
    background-color: #EEF4FF !important;
    color: var(--primary-accent) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
    border: none !important;
}
.table-dark thead th {
    background-color: #EEF4FF !important;
    color: var(--primary-accent) !important;
}
.table-dark tbody tr {
    background-color: #FFFFFF !important;
    transition: all 0.2s ease-in-out !important;
}
.table-dark tbody tr:nth-child(even) td, .table-dark tbody tr:nth-child(even) th {
    background-color: #F8FAFC !important;
}
.table-dark tbody tr:hover td, .table-dark tbody tr:hover th {
    background-color: #EAF3FF !important;
    color: var(--primary-accent) !important;
}
.table-dark select, .table-dark input {
    background-color: #FFFFFF !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* Modernize rounded containers wrapping responsive tables */
.table-responsive.bg-darker, .table-responsive[class*="bg-darker"] {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(37, 99, 235, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
    padding: 12px !important;
    border-radius: 16px !important;
}

/* 5. Gold, Silver, Bronze Leaderboard Podium System */
.leaderboard-rank-1-badge {
    background: linear-gradient(135deg, #FFF6E0 0%, #FFF0C2 100%) !important;
    border: 1.5px solid #F59E0B !important;
    color: #B45309 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
}
.leaderboard-rank-2-badge {
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%) !important;
    border: 1.5px solid #94A3B8 !important;
    color: #475569 !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(148, 163, 184, 0.15) !important;
}
.leaderboard-rank-3-badge {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    border: 1.5px solid #F87171 !important;
    color: #991B1B !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15) !important;
}

/* High-Contrast Student Names */
.student-name-premium {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* XP badges with amber, green, or blue layouts */
.xp-badge-amber {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    color: #B45309 !important;
}
.xp-badge-green {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #047857 !important;
}
.xp-badge-blue {
    background-color: rgba(37, 99, 235, 0.1) !important;
    border: 1px solid rgba(37, 99, 235, 0.25) !important;
    color: #1D4ED8 !important;
}

/* 6. Form Inputs & Actions Premium Styling */
.form-control, .form-select, select, input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="number"] {
    background-color: #FFFFFF !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
    font-size: 14.5px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.form-control:focus, .form-select:focus, select:focus, input:focus {
    background-color: #FFFFFF !important;
    border-color: var(--primary-accent) !important;
    outline: none !important;
    box-shadow: 
        0 1px 3px rgba(37, 99, 235, 0.1),
        0 0 0 4px rgba(37, 99, 235, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* 7. Buttons with smooth transitions and subtle hover lifts */
.btn-primary, .btn-primary-accent {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--accent-blue) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 9999px !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-primary:hover, .btn-primary-accent:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 6px 14px rgba(37, 99, 235, 0.2),
        0 2px 5px rgba(37, 99, 235, 0.1) !important;
}

.btn-secondary, .btn-outline-secondary {
    background-color: #F8FAFC !important;
    color: var(--text-primary) !important;
    border: 1.5px solid #E2E8F0 !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
    transform: translateY(-2px) !important;
}

/* Modals Modern Clean Header */
.modal-content {
    background-color: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.modal-header {
    border-bottom: 1px solid #F1F5F9 !important;
    background-color: #F8FAFC !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

.modal-footer {
    border-top: 1px solid #F1F5F9 !important;
    background-color: #F8FAFC !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}

/* ==========================================================================
   HIGH-CONTRAST OVAL BACKING FOR INLINE BLACK & BLUE TEXTS
   ========================================================================== */
span.text-dark, span.text-primary, span.text-blue, span.text-accent-blue,
strong.text-dark, strong.text-primary, strong.text-blue,
small.text-dark, small.text-primary, small.text-blue,
.font-mono.text-dark, .font-mono.text-primary, .font-mono.text-blue,
.badge.bg-dark, .badge.bg-primary {
    background-color: #FFFFFF !important;
    padding: 2px 10px !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid rgba(37, 99, 235, 0.08) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02) !important;
    color: inherit;
}

/* ==========================================================================
   APEX SCHOLAR MOBILE REDESIGN - HIGH-FIDELITY 3D NATIVE EXPERIENCES
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 1. Root & Backdrop styling: soft premium sky blue gradient tint, no default flat white */
    body, html, body.bg-dark, .bg-dark, .bg-darker, .app-layout {
        background: radial-gradient(circle at top, #E2EDFD 0%, #EFF5FC 100%) !important;
        background-color: #EFF5FC !important;
        color: #1E293B !important;
    }

    /* Avoid pure harsh paper-white for container overlays */
    .bg-white, .modal-content, .offcanvas, .dropdown-menu {
        background: linear-gradient(135deg, #FCFDFF 0%, #F5F9FD 100%) !important;
        background-color: #F5F9FD !important;
    }

    /* Keep header top bar elegantly floating and simple */
    .navbar {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px);
        border: none !important;
        border-bottom: 2px solid rgba(191, 219, 254, 0.6) !important;
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.04) !important;
        border-radius: 0 0 16px 16px !important;
    }

    /* 2. Premium 3D Soft Cards with inset lighting bevels and drop shadows */
    .card, .list-group-item, .custom-card, #dashboard-bento-grid > .col > .card {
        background: linear-gradient(135deg, #FFFFFF 0%, #F1F6FC 100%) !important;
        border: 1.5px solid rgba(191, 219, 254, 0.7) !important;
        border-radius: 20px !important;
        box-shadow: 
            0 8px 24px rgba(37, 99, 235, 0.06), 
            0 2px 4px rgba(37, 99, 235, 0.03),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -3px 0 rgba(191, 219, 254, 0.35) !important; /* Elegant bottom shadow edge for 3D look */
        transform: translateY(0);
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
        margin-bottom: 4px;
    }

    /* Active touch tactile press compression for cards */
    .card:active, .list-group-item:active {
        transform: translateY(1.5px) scale(0.982) !important;
        box-shadow: 
            0 4px 12px rgba(37, 99, 235, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -1px 0 rgba(191, 219, 254, 0.2) !important;
    }

    /* Glow highlights for due learning queues */
    .border-primary, .card-glowing {
        border-color: #3B82F6 !important;
        box-shadow: 
            0 12px 28px rgba(37, 99, 235, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -3px 0 rgba(59, 130, 246, 0.25) !important;
    }

    /* 3. Floating 3D buttons (primary, secondary, danger, outline) */
    .btn, .btn-primary, .btn-primary-accent, .btn-accent, .btn-success, .btn-danger {
        border-radius: 9999px !important; /* Gorgeous floating pill buttons */
        font-weight: 700 !important;
        letter-spacing: 0.015em !important;
        padding: 10px 22px !important;
        border: none !important;
        box-shadow: 
            0 6px 14px rgba(37, 99, 235, 0.15),
            inset 0 2px 0 rgba(255, 255, 255, 0.2),
            inset 0 -3px 0 rgba(0, 0, 0, 0.15) !important; /* Bottom offset edge */
        transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease !important;
    }

    /* Pill-designed outline & secondary buttons */
    .btn-secondary, .btn-outline-secondary, .btn-outline-primary {
        background: linear-gradient(135deg, #FFFFFF 0%, #EEF2F6 100%) !important;
        border: 1.5px solid rgba(191, 219, 254, 0.8) !important;
        color: #1D4ED8 !important;
        box-shadow: 
            0 4px 10px rgba(37, 99, 235, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -2px 0 rgba(191, 219, 254, 0.2) !important;
    }

    /* Smooth scale-down press compression feedback for all inputs and buttons */
    .btn:active, .btn-primary:active, .btn-primary-accent:active, .btn-accent:active, .btn-success:active, .btn-danger:active {
        transform: translateY(2px) scale(0.96) !important;
        box-shadow: 
            0 2px 6px rgba(37, 99, 235, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.1),
            inset 0 -1px 0 rgba(0, 0, 0, 0.08) !important;
    }

    /* 4. Elegant typography colors and strong readable contrast in blue tint space */
    .text-light, h1, h2, h3, h4, h5, h6, .card-title, .modal-title, .fw-bold {
        color: #0F172A !important; /* Pure Slate Charcoal */
        font-weight: 700 !important;
    }

    .text-secondary, .text-muted, p, td, span:not(.badge) {
        color: #475569 !important; /* Contrastful slate gray */
    }

    /* Royal Blue branding accents */
    .text-accent, .text-primary-accent, .text-accent-secondary, .logo-gold {
        color: #1D4ED8 !important; /* Royal Blue */
        text-shadow: none !important;
    }

    /* Emerald Green for success alerts and tags */
    .bg-success, .badge.bg-success, .border-success, .alert-success {
        color: #FFFFFF !important;
        background-color: #10B981 !important; /* Emerald success */
        background: linear-gradient(135deg, #34D399 0%, #10B981 100%) !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
    }

    .text-success {
        color: #10B981 !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* Soft Red for error codes and alerts */
    .bg-danger, .badge.bg-danger, .border-danger, .alert-danger {
        color: #FFFFFF !important;
        background-color: #EF4444 !important; /* Soft Red error */
        background: linear-gradient(135deg, #F87171 0%, #EF4444 100%) !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
    }

    .text-danger {
        color: #EF4444 !important;
        background: none !important;
        box-shadow: none !important;
    }

    /* 5. Statistics Floating Mini Cards */
    /* Transforms columns in stats container into independent floating 3D widgets */
    .bg-darker.p-2.rounded.border.border-secondary\/20,
    .bg-darker.p-1.rounded.border.border-secondary\/15,
    .stat-widget {
        background: linear-gradient(135deg, #FCFDFF 0%, #EEF4FC 100%) !important;
        border: 1.5px solid rgba(191, 219, 254, 0.8) !important;
        border-radius: 16px !important;
        box-shadow: 
            0 6px 14px rgba(37, 99, 235, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.95),
            inset 0 -2px 0 rgba(191, 219, 254, 0.2) !important;
        padding: 14px !important;
        margin-bottom: 8px;
        transition: transform 0.2s ease !important;
    }

    /* Today's study progress layout */
    .row.g-2:not(.wwtbam-options-grid):not(#sim-mcq-options-block):not(.row-cols-2):not(.row-cols-sm-2):not(.keep-grid) {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* 6. High-contrast gradient badges (White-blue gradients) */
    .badge, .bg-gradient-premium, .user-badge-gold {
        background: linear-gradient(135deg, #FFFFFF 0%, #DBEAFE 100%) !important;
        border: 1px solid rgba(191, 219, 254, 0.8) !important;
        color: #1D4ED8 !important;
        font-family: 'JetBrains Mono', monospace !important;
        padding: 5px 12px !important;
        border-radius: 100px !important;
        text-shadow: none !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.03) !important;
    }

    /* 7. Input styling: pill-shaped, tactile 3D deep hollow containers */
    .form-control, .form-select {
        border-radius: 9999px !important; /* Perfect sleek pill */
        background-color: #FFFFFF !important;
        border: 1.5px solid rgba(191, 219, 254, 0.8) !important;
        color: #1E293B !important;
        padding: 10px 20px !important;
        box-shadow: 
            inset 0 2px 4px rgba(37, 99, 235, 0.03),
            0 2px 6px rgba(37, 99, 235, 0.02) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    .form-control:focus, .form-select:focus {
        border-color: #2563EB !important;
        box-shadow: 
            0 0 0 3px rgba(37, 99, 235, 0.15),
            0 4px 12px rgba(37, 99, 235, 0.06) !important;
    }

    /* 8. Slide-out Mobile Sidebar Drawer custom dimensions/physics */
    #app-sidebar {
        background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #172554 100%) !important;
        box-shadow: 20px 0 50px rgba(15, 23, 42, 0.45) !important;
        border-right: 3px solid rgba(255, 255, 255, 0.25) !important;
        width: 290px !important;
        color: #FFFFFF !important;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1100;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    #app-sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    #app-sidebar .logo-gold, 
    #app-sidebar .text-light, 
    #app-sidebar h1, 
    #app-sidebar h2, 
    #app-sidebar h3, 
    #app-sidebar h4, 
    #app-sidebar h5, 
    #app-sidebar h6, 
    #app-sidebar .fw-bold {
        color: #FFFFFF !important;
        font-weight: 700 !important;
    }

    #app-sidebar .text-secondary, 
    #app-sidebar p, 
    #app-sidebar span:not(.badge), 
    #app-sidebar .nav-link {
        color: #E0F2FE !important; /* Sky light blue text, highly readable */
    }

    #app-sidebar .nav-link {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 
            0 4px 10px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
        margin-bottom: 8px !important;
        color: #FFFFFF !important;
        border-radius: 14px !important;
        font-weight: 600 !important;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    }

    #app-sidebar .nav-link:hover, 
    #app-sidebar .nav-link:active {
        background: rgba(255, 255, 255, 0.18) !important;
        transform: scale(0.97) !important;
        color: #FFFFFF !important;
    }

    #app-sidebar .nav-link.active {
        background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important; /* Elegant Emerald Active badge */
        color: #FFFFFF !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        box-shadow: 
            0 8px 18px rgba(16, 185, 129, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    /* 9. Ergononmic 3D Bottom Menu Bar */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        height: 72px !important;
        border-radius: 24px !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 246, 255, 0.98) 100%) !important;
        backdrop-filter: blur(15px) !important;
        border: 2px solid rgba(191, 219, 254, 0.9) !important;
        box-shadow: 
            0 12px 35px rgba(29, 78, 216, 0.18),
            inset 0 1.5px 0 #FFFFFF,
            inset 0 -3.5px 0 rgba(191, 219, 254, 0.5) !important;
        z-index: 1040 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
    }

    body {
        padding-bottom: 110px !important; /* Prevent page bottom elements from being hidden by floating navbar */
    }

    .mobile-bottom-nav .mobile-nav-item {
        color: #475569 !important;
        font-weight: 700 !important;
        font-size: 0.65rem !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease !important;
        text-align: center;
        text-decoration: none !important;
    }

    .mobile-bottom-nav .mobile-nav-item i {
        font-size: 1.35rem !important;
        margin-bottom: 4px;
        display: block;
    }

    .mobile-bottom-nav .mobile-nav-item.active {
        color: #1D4ED8 !important;
        transform: translateY(-5px) scale(1.1) !important;
    }

    .mobile-bottom-nav .mobile-nav-item.text-danger {
        color: #EF4444 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* 10. Floating container charts styling and sizing */
    #analytics-d3-chart-mini {
        background: linear-gradient(135deg, #FFFFFF 0%, #F5F9FE 100%) !important;
        border: 1px solid rgba(191, 219, 254, 0.6) !important;
        box-shadow: inset 0 2px 4px rgba(37, 99, 235, 0.02) !important;
        padding: 6px !important;
    }

    /* Mobile Redesign - Premium White and Royal Blue Law-Themed style additions */
    
    .mobile-redesign-root {
        background-color: #f8fafc !important;
        color: #0f172a !important;
        font-family: 'Space Grotesk', 'Inter', sans-serif;
        min-height: 100vh;
        padding-bottom: 95px !important;
    }
    
    .mobile-hero-container {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 24px;
        box-shadow: 0 15px 35px rgba(29, 78, 216, 0.15) !important;
        background: radial-gradient(circle at top right, #1d4ed8, #0f172a);
        height: 180px;
        border: 1px solid rgba(255,255,255,0.05);
    }
    
    .mobile-hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.65;
        mix-blend-mode: overlay;
        filter: brightness(0.9);
    }
    
    .mobile-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0) 10%, rgba(15, 23, 42, 0.8) 100%) !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 18px 20px;
    }
    
    .mobile-hero-title {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 1.45rem !important;
        color: #ffffff !important;
        margin-bottom: 2px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    
    .mobile-hero-subtitle {
        font-size: 0.82rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
        margin-bottom: 0;
        text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }

    .mobile-3d-card {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        border-radius: 18px !important;
        padding: 20px 16px !important;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
        cursor: pointer;
        min-height: 120px;
        text-decoration: none !important;
    }

    .mobile-3d-card:active {
        transform: scale(0.94) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
    }

    .mobile-3d-card .icon-wrapper {
        width: 54px !important;
        height: 54px !important;
        border-radius: 14px !important;
        background: rgba(29, 78, 216, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 12px !important;
        font-size: 1.6rem !important;
        color: #1d4ed8 !important;
        box-shadow: inset 0 2px 6px rgba(29, 78, 216, 0.05) !important;
    }

    .mobile-3d-card .card-title {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 0.95rem !important;
        color: #1e293b !important;
        margin: 0;
        text-align: center;
    }
    
    .mobile-deck-card {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.03) !important;
        margin-bottom: 12px;
        display: flex;
        flex-direction: column;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }
    
    .mobile-deck-card:active {
        transform: scale(0.97) !important;
        background: #fafbfc !important;
    }
    
    .mobile-indicator-pill {
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        padding: 4px 10px !important;
        border-radius: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        font-family: 'Space Grotesk', sans-serif !important;
    }
    
    .mobile-indicator-blue {
        background: rgba(29, 78, 216, 0.08) !important;
        color: #1d4ed8 !important;
    }

    .mobile-indicator-red {
        background: rgba(239, 68, 68, 0.08) !important;
        color: #dc2626 !important;
    }

    .mobile-indicator-green {
        background: rgba(34, 197, 94, 0.08) !important;
        color: #16a34a !important;
    }

    .mobile-nav-title-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mobile-back-circle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: #ffffff !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #111827 !important;
        border: 1px solid rgba(0,0,0,0.03) !important;
        cursor: pointer;
    }

    .mobile-study-view {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 160px);
        justify-content: space-between;
        position: relative;
    }

    .mobile-card-container {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        padding-bottom: 20px;
    }

    .mobile-study-card {
        background: #ffffff !important;
        border-radius: 24px !important;
        box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08) !important;
        border: 1px solid rgba(15, 23, 42, 0.03) !important;
        width: 100%;
        min-height: 280px;
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative;
        cursor: pointer;
    }

    .mobile-fixed-bottom-controls {
        position: fixed !important;
        bottom: 95px !important; /* above the mobile navigation footer (which is at bottom: 16px, height: 72px) */
        left: 16px !important;
        right: 16px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 20px !important;
        padding: 12px 16px !important;
        z-index: 9999 !important;
        box-shadow: 0 -8px 25px rgba(15, 23, 42, 0.08) !important;
    }

    .modal-glass {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        background: rgba(15, 23, 42, 0.5) !important;
    }

    /* Distraction-Free fit-to-screen active practicing rules */
    .mobile-practice-active-body {
        overflow: hidden !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .mobile-study-container {
        height: calc(100vh - 165px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding-bottom: 12px !important;
    }

    /* Compact Question Card */
    .mobile-compact-q-card {
        min-height: 115px !important;
        height: 115px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-bottom: 10px !important;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        border: 1px solid rgba(0,0,0,0.04) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
    }

    /* MCQ Option grids - keeping current grid style but scaling heights */
    .mobile-compact-options-block {
        margin-bottom: 8px !important;
    }

    .mobile-compact-options-block .btn-wwtbam-option {
        min-height: 52px !important;
        height: 52px !important;
        padding: 6px 12px !important;
        border-radius: 14px !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.03) !important;
        background: #f8fafc !important;
        border: 1.5px solid rgba(0,0,0,0.06) !important;
    }

    .mobile-compact-options-block .btn-wwtbam-option:active {
        transform: scale(0.97) !important;
    }

    .mobile-compact-options-block .letter {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: 0.72rem !important;
        line-height: 24px !important;
        margin-right: 8px !important;
        background: rgba(30, 41, 59, 11%) !important;
        color: #1e293b !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
    }

    .mobile-compact-options-block .wwtbam-option-text {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
        color: #334155 !important;
    }

    /* Flashcard Box */
    .mobile-compact-fc-box {
        height: 180px !important;
        min-height: 180px !important;
        margin-bottom: 10px !important;
        perspective: 1000px !important;
    }

    .mobile-compact-fc-box .flashcard-inner {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        transform-style: preserve-3d !important;
    }

    .mobile-compact-fc-box .flashcard-front,
    .mobile-compact-fc-box .flashcard-back {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        backface-visibility: hidden !important;
        border-radius: 20px !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.04) !important;
        padding: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .mobile-compact-fc-box .flashcard-back {
        transform: rotateY(180deg) !important;
        background: #f8fafc !important;
    }

    /* Compact Guess Input Panel */
    .mobile-compact-input-panel {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 16px !important;
        border: 1px solid rgba(0,0,0,0.04) !important;
        background: #ffffff !important;
    }

    /* Compact Grading Overlay */
    .mobile-compact-grade-block {
        padding: 10px 12px !important;
        border-radius: 16px !important;
        margin-bottom: 8px !important;
        border: 1px solid rgba(0,0,0,0.04) !important;
        background: #ffffff !important;
    }

    /* 3D Floating Scholar buttons for minimal dashboard */
    .mobile-3d-card {
        background: #ffffff !important;
        border: 1px solid rgba(0,0,0,0.06) !important;
        border-radius: 14px !important;
        padding: 8px 6px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 72px !important;
        height: 72px !important;
        box-shadow: 0 3px 0px rgba(0, 0, 0, 0.05), 0 5px 12px rgba(0, 0, 0, 0.02) !important;
        transition: transform 0.1s, box-shadow 0.1s !important;
        cursor: pointer;
    }

    .mobile-3d-card:active {
        transform: translateY(2px) !important;
        box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    }

    .mobile-3d-card .icon-wrapper {
        font-size: 1.25rem !important;
        margin-bottom: 2px !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .mobile-3d-card .card-title {
        font-family: inherit;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        margin-bottom: 0;
    }

    /* Shrunk Slim Hero Container for maximum above-the-fold content visibility */
    .mobile-hero-container {
        height: 85px !important;
        margin-bottom: 12px !important;
        border-radius: 14px !important;
    }

    .mobile-hero-overlay {
        padding: 10px 14px !important;
    }

    .mobile-hero-title {
        font-size: 1.05rem !important;
    }

    .mobile-hero-subtitle {
        font-size: 0.72rem !important;
    }

    /* Ultra-Compact Mini Subject Card Grid Layout */
    .mobile-mini-subject-card {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        border-radius: 8px !important;
        padding: 4px 6px !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 48px !important;
        height: 48px !important;
        transition: transform 0.1s, background 0.1s !important;
        cursor: pointer;
        text-decoration: none !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-mini-subject-card:active {
        transform: scale(0.96) !important;
        background: #f1f5f9 !important;
    }
    
    .mobile-mini-subject-card .subject-title-row {
        display: d-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        margin-bottom: 0px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .mobile-mini-subject-card .subject-emoji {
        font-size: 0.95rem !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    .mobile-mini-subject-card .subject-title {
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .mobile-mini-subject-card .subject-meta {
        font-size: 0.52rem !important;
        color: #64748b !important;
        font-weight: 500 !important;
        font-family: inherit !important;
        padding-left: 0px !important;
        margin-top: 1px !important;
    }

    /* Ultra-Compact Mini Deck Card Grid Layout */
    .mobile-mini-deck-card {
        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.05) !important;
        border-radius: 8px !important;
        padding: 4px 6px !important;
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-height: 48px !important;
        height: 48px !important;
        transition: transform 0.1s, background 0.1s !important;
        cursor: pointer;
        text-decoration: none !important;
        margin-bottom: 4px !important;
    }
    
    .mobile-mini-deck-card:active {
        transform: scale(0.96) !important;
        background: #f1f5f9 !important;
    }
    
    .mobile-mini-deck-card .deck-title {
        font-size: 0.62rem !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        line-height: 1.1 !important;
        margin-bottom: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .mobile-mini-deck-card .deck-pills {
        display: flex !important;
        gap: 2px !important;
        font-size: 0.52rem !important;
        font-weight: 600 !important;
        color: #64748b !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
}