/* --- GLOBAL RESET & BOX SIZING FIX --- */
* {
    box-sizing: border-box; /* CRITICAL: Prevents padding from breaking width */
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--bg-page);
}

:root {
    /* DARK MODE (DEFAULT) VARIABLES */
    --bg-page: #121212;
    --bg-card: #1e1e1e;
    --bg-problem: #37474f;
    --bg-icon-strip: #181818;
    
    --text-primary: #e0e0e0;
    --text-muted: #a0a0a0;
    --text-hint: #e1bee7;
    
    --accent-blue: #64b5f6;
    --border-tryit: #00bfa5;
    --state-success: #66bb6a;
    --state-error: #ef5350;
    --highlight-math: #ff4081; 
    --text-annotation: #ffcc80; 
    --border-hint: #ba68c8;
    --video-accent: #ff5252; 
    
    --scrollbar-thumb: #333;
    --scrollbar-hover: #555;
}

/* LIGHT MODE OVERRIDES */
body.light-mode {
    --bg-page: #f0f0f0; 
    --bg-card: #f9f9f9; 
    --bg-problem: #e3f2fd; 
    --bg-icon-strip: #f0f0f0;
    
    --text-primary: #212121;
    --text-muted: #616161;
    --text-hint: #6a1b9a;
    
    --accent-blue: #1565c0; 
    --border-tryit: #00695c;
    --state-success: #2e7d32;
    --state-error: #c62828;
    --highlight-math: #c2185b; 
    --text-annotation: #e65100; 
    --border-hint: #7b1fa2;
    --video-accent: #c62828;
    
    /* Light mode specific feedback backgrounds */
    --correct-bg: rgba(46, 125, 50, 0.15);
    --wrong-bg: rgba(198, 40, 40, 0.15);
    --hint-bg: rgba(123, 31, 162, 0.12);
    --solution-bg: rgba(46, 125, 50, 0.12);

    --scrollbar-thumb: #bbb;
    --scrollbar-hover: #999;
}

/* RESET & LAYOUT STRUCTURE */
body {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    height: 100vh;
    width: 100vw;
    transition: background-color 0.3s, color 0.3s;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-hover);
}

/* --- NEW: LEFT SIDEBAR (HAMBURGER MENU) --- */
.left-sidebar {
    position: relative;
    top: 0;
    left: 0;
    width: 12vw;
    min-width: 144px;
    max-width: 210px;
    height: 100%;
    background-color: var(--bg-card);
    border-right: 1px solid #444;
    z-index: 100;
    transition: margin-left 0.3s ease, width 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    flex-shrink: 0;
}

.left-sidebar.hidden {
    margin-left: -210px;
    width: 0;
    min-width: 0;
}

.left-sidebar.open {
    left: 0; /* Slide in */
}
body.light-mode .left-sidebar {
    border-right-color: #ddd;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
}

.ls-header {
    padding: 0;
    background: var(--bg-icon-strip);
    font-weight: bold;
    font-size: 1.05rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-blue);
    overflow: hidden;
}

.sidebar-logo {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    padding: 0;
    object-position: center;
}

body.light-mode .sidebar-logo {
}

/* --- Search Bar Styles --- */
.ls-search-container {
    padding: 10px 15px;
    background: var(--bg-icon-strip);
    border-bottom: 1px solid #444;
}
body.light-mode .ls-search-container { border-bottom-color: #ddd; }

#ls-search-input {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #555;
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
    font-size: 0.75rem;
    transition: all 0.2s;
}

#ls-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: rgba(255,255,255,0.15);
}

body.light-mode #ls-search-input {
    background: #fff;
    border-color: #ccc;
    color: #000;
}

.ls-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    display: none;
}
.ls-close-btn:hover { color: var(--state-error); }

.ls-close-btn.mobile-close-btn {
    display: none;
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 1rem;
}

/* --- NEW SIDEBAR USER SECTION --- */
.sidebar-user-section {
    padding: 10px 15px;
    border-bottom: 1px solid #333;
}
body.light-mode .sidebar-user-section {
    border-bottom-color: #ddd;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.85rem;
    padding: 8px 0;
}

.sidebar-username {
    color: var(--accent-blue);
    font-weight: bold;
    text-align: center;
    font-size: 1.225rem;
}

.sidebar-sparkles-divider {
    color: var(--text-muted);
}

.sidebar-sparkles {
    color: #ffffff;
    font-size: 1.175rem;
    text-align: center;
}

body.light-mode .sidebar-sparkles {
    color: #000000;
}

/* --- SIDEBAR NAVIGATION --- */
.sidebar-nav {
    display: block;
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
    position: static;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
}

.sidebar-section-header {
    padding: 15px 15px 8px 15px;
    color: var(--text-muted);
    font-weight: bold;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 15px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s;
}

.sidebar-nav-item:hover {
    background: rgba(100, 181, 246, 0.1);
    color: var(--accent-blue);
}

.sidebar-nav-item.active {
    background: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
    border-left: 3px solid var(--accent-blue);
}

.sidebar-nav-item svg {
    flex-shrink: 0;
}

/* Last Lesson button with split class/topic */
.sidebar-nav-item.sidebar-last-lesson {
    flex-wrap: nowrap;
}

.sidebar-nav-item.sidebar-last-lesson #sidebar-last-lesson-class {
    flex: 1;
    text-align: left;
}

.sidebar-nav-item.sidebar-last-lesson #sidebar-last-lesson-topic {
    text-align: right;
    margin-left: auto;
}

/* --- SIDEBAR FOOTER --- */
.sidebar-footer {
    margin-top: auto;
    padding-top: 10px;
    padding-bottom: 0;
    border-top: 1px solid #333;
}
body.light-mode .sidebar-footer {
    border-top-color: #ddd;
}

.sidebar-footer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 15px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    transition: all 0.2s;
}

.sidebar-footer-item:hover {
    background: rgba(100, 181, 246, 0.1);
    color: var(--accent-blue);
}

.sidebar-footer-item svg {
    flex-shrink: 0;
}

/* Theme and Font Size Row */
.sidebar-appearance {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.sidebar-theme-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.sidebar-theme-toggle:hover {
    color: var(--accent-blue);
}

.sidebar-appearance-divider {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.sidebar-font-controls {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.sidebar-font-row {
    cursor: default;
}

.sidebar-font-row:hover {
    background: transparent;
    color: var(--text-primary);
}

.font-size-btn {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.font-size-btn:hover {
    color: var(--accent-blue);
}

body.light-mode .font-size-btn {
    color: var(--text-primary);
}

.ls-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

/* --- Sidebar Footer --- */
.ls-footer {
    margin-top: auto;
    padding: 10px 8px;
    background: transparent;
}
body.light-mode .ls-footer {
    background: transparent;
}

.reset-progress-btn {
    width: 100%;
    padding: 10px;
    background: rgba(239, 83, 80, 0.1);
    color: var(--state-error);
    border: 1px solid var(--state-error);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.7rem;
}
.reset-progress-btn:hover {
    background: var(--state-error);
    color: #fff;
}

/* Developer Menu Dropdown Styles */
.dev-menu-header {
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    transition: all 0.2s;
}

.dev-menu-header:hover {
    color: var(--accent-blue);
    opacity: 0.8;
}

.dev-menu-toggle {
    width: 14px;
    height: 14px;
    display: inline-block;
    transition: transform 0.2s;
}

.dev-menu-toggle.open {
    transform: rotate(180deg);
}

.dev-menu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.dev-menu-content.open {
    max-height: 200px;
}

.dev-menu-content button {
    margin-bottom: 8px;
}

/* --- Sidebar Categories --- */
.ls-category-header {
    padding: 10px 8px 3px 8px;
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 0.65rem;
    text-transform: uppercase;
    border-bottom: 2px solid #444;
    margin-top: 3px;
    background: var(--bg-card);
    position: sticky;
    top: 0;
}

/* Updated Item (With Indentation) */
.ls-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    gap: 6px;
}

.ls-item-name {
    flex: 1;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ls-item-topic {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}
body.light-mode .ls-item { border-bottom-color: #ddd; }

.ls-item:hover {
    background: rgba(100, 181, 246, 0.1);
    padding-left: 10px;
    color: var(--accent-blue);
}

.ls-item.active {
    background: rgba(100, 181, 246, 0.2);
    color: var(--accent-blue);
    border-left: 3px solid var(--accent-blue);
    padding-left: 5px;
    box-shadow: inset 0 0 15px rgba(100, 181, 246, 0.15);
    font-weight: 500;
}

/* Hamburger Button */
.hamburger-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid #444;
    color: var(--text-primary);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.hamburger-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.layout-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
}

/* --- COLUMN 1: MAIN CONTENT PANE --- */
.main-content-pane {
    flex: 1; 
    height: 100%;
    display: flex;
    flex-direction: column; 
    position: relative;
    background-color: var(--bg-page);
    min-width: 300px;
    overflow: visible;
}

.scroll-area {
    flex: 1; 
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    position: relative;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

/* --- RESIZER HANDLE --- */
.resizer {
    width: 5px;
    height: 100%;
    background: #444;
    cursor: col-resize;
    z-index: 150;
    transition: background 0.2s;
    display: none; 
}
.resizer:hover, .resizer.active {
    background: var(--accent-blue);
}

/* --- COLUMN 2: SIDE PANEL (COLLAPSIBLE) --- */
/* Phase 12: Updated to match MUI Paper style */
.side-panel-pane {
    width: 0; 
    height: 100%;
    background-color: var(--bg-card); 
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
}
body.light-mode .side-panel-pane {
    border-left-color: rgba(0, 0, 0, 0.08);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
}

/* Side Panel Toggle Button */
.side-panel-toggle-btn {
    position: fixed;
    top: 50%;
    right: calc(var(--side-panel-width, 30vw) + 39px);
    transform: translateY(-50%);
    width: 28px;
    height: 52px;
    background-color: var(--bg-card);
    border: 1px solid #444;
    border-right: none;
    border-radius: 6px 0 0 6px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 250;
    transition: background-color 0.2s, right 0.3s;
    padding: 0;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
}

.side-panel-pane.open .side-panel-toggle-btn {
    display: flex;
}

.side-panel-toggle-btn:hover {
    background-color: var(--accent-blue);
}

.side-panel-toggle-btn svg {
    stroke: var(--text-primary);
    transition: stroke 0.2s;
}

.side-panel-toggle-btn:hover svg {
    stroke: white;
}

body.light-mode .side-panel-toggle-btn {
    border-color: #ddd;
}

.side-panel-pane.animated {
    transition: width 0.3s ease;
}

/* Panel Content Containers */
.panel-content {
    width: 100%;
    height: 100%;
    display: none; 
    overflow-y: auto;
    min-width: 0; 
}
.panel-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.desmos-frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Book & Answer Key Specifics */
#panel-concepts-sidebar, #panel-answers-content {
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: var(--text-primary);
    width: 100%;
    max-width: 100%;
}

/* AGGRESSIVE TEXT WRAPPING FOR SIDEBAR CONCEPTS */
/* Phase 12: Updated to match MUI Card style */
.side-concept-item {
    background: rgba(255, 255, 255, 0.03);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 3px solid var(--accent-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    
    overflow-wrap: anywhere;
    word-break: break-word; 
    white-space: normal;
    max-width: 100%;
}
.side-concept-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
body.light-mode .side-concept-item {
    background: rgba(0, 0, 0, 0.02);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
body.light-mode .side-concept-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* --- BOOK TAB FEATURES (Search & Pin) --- */

/* 1. Sticky Header Container */
/* Phase 12: Updated to match MUI AppBar style */
.book-sticky-header {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 10;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
}
body.light-mode .book-sticky-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* 2. Search Bar */
/* Phase 12: Updated to match MUI TextField outlined style */
.book-search-input {
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.23);
    color: var(--text-primary);
    border-radius: 4px;
    margin-top: 12px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-search-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}
.book-search-input:hover {
    border-color: var(--text-primary);
}
.book-search-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    border-width: 2px;
    padding: 11px 13px;
}
body.light-mode .book-search-input {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.23);
}
body.light-mode .book-search-input:hover {
    border-color: var(--text-primary);
}

/* 3. Pinned Section */
#book-pinned-container {
    display: none;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid #ffd700;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 10px;
    max-height: 200px;
    overflow-y: auto;
}

/* 4. Pin Button Styling */
.pin-btn {
    float: right;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.3;
    transition: all 0.2s;
    margin-left: 10px;
    filter: grayscale(100%);
}
.pin-btn:hover { opacity: 1; transform: scale(1.1); filter: grayscale(0%); }
.pin-btn.active { opacity: 1; filter: grayscale(0%); text-shadow: 0 0 5px gold; }

/* Adjust card styling to fit the pin button in the header */
.side-concept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.side-concept-header {
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.95rem;
    /* Removed text-transform: uppercase to allow LaTeX math to render correctly */
    overflow-wrap: anywhere;
    white-space: normal;
}

.answer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.answer-list li {
    padding: 8px 0;
    border-bottom: 1px solid #444;
    display: flex;
    gap: 10px;
    font-size: 0.95rem;
}
body.light-mode .answer-list li { border-bottom-color: #ddd; }

.answer-list li strong {
    color: var(--state-success);
    min-width: 30px;
}

/* SCRATCHPAD STYLES */
#panel-scratch {
    display: none;
    flex-direction: column;
    background: #121212 !important; 
    height: 100%;
}

.scratch-toolbar {
    height: 56px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    padding: 0 16px;
}
body.light-mode .scratch-toolbar {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.tool-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}
.tool-btn:active { transform: scale(0.95); }

.tool-btn.active-tool {
    background: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}
body.light-mode .tool-btn {
    border-color: rgba(0, 0, 0, 0.15);
}
body.light-mode .tool-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.25);
}
body.light-mode .tool-btn.active-tool {
    background: rgba(21, 101, 192, 0.12);
    border-color: var(--accent-blue);
}
.tool-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

#scratch-canvas {
    flex-grow: 1;
    cursor: crosshair;
    touch-action: none;
    display: block;
}

/* --- SCRATCHPAD BACKGROUNDS --- */

/* Mode 1: Large Grid (Notebook) */
#scratch-canvas.bg-grid {
    background-image: 
        linear-gradient(#333 1px, transparent 1px),
        linear-gradient(90deg, #333 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: -1px -1px;
}

/* Mode 2: Fine Graph Paper */
#scratch-canvas.bg-graph {
    background-image: 
        linear-gradient(#333 1px, transparent 1px),
        linear-gradient(90deg, #333 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
}

/* --- COLUMN 3: ICON STRIP (FIXED) --- */
/* Phase 12: Updated to match MUI visual style */
.icon-strip-pane {
    width: 48px;
    height: 100%;
    background-color: var(--bg-card);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 0px;
    z-index: 200;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: margin-right 0.3s ease, width 0.3s ease;
    position: relative;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}
body.light-mode .icon-strip-pane {
    border-left-color: rgba(0, 0, 0, 0.08);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
}

.icon-strip-pane.hidden {
    margin-right: -48px;
    width: 0;
}

.icon-group-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.icon-group-bottom {
    margin-top: auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Sidebar Toggle Buttons */
.sidebar-toggle-btn {
    position: fixed;
    top: 50vh;
    transform: translateY(-50%);
    width: 13px;
    height: 26px;
    background-color: var(--bg-card);
    border: 1px solid #444;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 250;
    transition: background-color 0.2s;
    padding: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-toggle-btn.left-toggle {
    border-left: none;
    border-radius: 0 4px 4px 0;
    left: var(--left-sidebar-width, clamp(144px, 12vw, 210px));
}

.sidebar-toggle-btn.left-toggle.hidden {
    left: 0;
}

.sidebar-toggle-btn.right-toggle {
    border-right: none;
    border-radius: 4px 0 0 4px;
    right: var(--icon-strip-width, 48px);
}

.sidebar-toggle-btn.right-toggle.hidden {
    right: 0;
}

.sidebar-toggle-btn:hover {
    background-color: var(--accent-blue);
}

.sidebar-toggle-btn svg {
    stroke: var(--text-primary);
    transition: stroke 0.2s, transform 0.3s;
}

.sidebar-toggle-btn:hover svg {
    stroke: white;
}

body.light-mode .sidebar-toggle-btn {
    border-color: #ddd;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
    color: var(--text-muted);
    width: 40px;
    height: 40px;
}
.icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.icon-btn.active {
    background-color: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
}
.icon-btn:active {
    background-color: rgba(100, 181, 246, 0.25);
}
body.light-mode .icon-btn {
    color: var(--text-muted);
}
body.light-mode .icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}
body.light-mode .icon-btn.active {
    background-color: rgba(21, 101, 192, 0.12);
    color: var(--accent-blue);
}
.icon-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Container & Layout */
.app-container {
    max-width: 960px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 20px 60px 20px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Header */
header {
    display: none;
    text-align: center;
    background: transparent;
    padding: 20px 0 10px 0;
    border-radius: 0;
    box-sizing: border-box;
    width: 100%;
}
body.light-mode header {
    background: transparent;
}
h1 {
    color: #ffffff;
    font-size: 2rem;
    margin: 0;
}
body.light-mode h1 {
    color: #212121;
}
.subtitle {
    color: var(--accent-blue);
    font-weight: bold;
    font-size: 0.65rem;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    letter-spacing: 0.5px;
}

.subtitle-class {
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
    display: none;
}

.subtitle-topic {
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex: 0 0 auto;
    display: none;
}

/* Navigation */
nav {
    display: none;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(8px);
    padding: 15px 20px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.light-mode nav {
    background: rgba(255, 255, 255, 0.85);
    border-color: #ddd;
}

/* Position subtitles outside the centered buttons */
nav > .subtitle-class {
    position: absolute;
    left: 20px;
}

nav > .subtitle-topic {
    position: absolute;
    right: 20px;
}

.nav-btn {
    background: transparent;
    border: 1px solid var(--accent-blue);
    color: var(--text-primary);
    padding: 8px 24px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

/* Bookmarks icon button in nav */
.bookmark-nav-btn {
    padding: 0;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    border-color: #60bd79;
    color: #60bd79;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(96, 189, 121, 0.5);
    transition: all 0.2s ease;
}

.bookmark-nav-btn:hover {
    background: #60bd79;
    color: #fff;
    box-shadow: 0 0 16px rgba(96, 189, 121, 0.8);
}

.bookmark-nav-btn.active {
    background: #60bd79;
    color: #fff;
    border-color: #60bd79;
}

.bookmark-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.bookmark-nav-btn.active svg {
    fill: currentColor;
}

@media (max-width: 768px) {
    /* Ensure bookmarks icon is visible on mobile */
    .bookmark-nav-btn svg {
        width: 20px;
        height: 20px;
        stroke-width: 2.5;
    }
}
.nav-btn:hover {
    background: rgba(100, 181, 246, 0.1);
}
.nav-btn.active {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 0 15px rgba(100, 181, 246, 0.3);
    font-weight: 600;
}

/* Bookmarks nav button active state with green fill */
.bookmark-nav-btn.active {
    background: #60bd79;
    color: #fff;
    border-color: #60bd79;
    box-shadow: 0 0 15px rgba(96, 189, 121, 0.3);
}

/* Views */
.view-section {
    display: none;
    animation: fadeIn 0.4s ease;
    width: 100%;
}
.view-section.active {
    display: block;
}

#home-view.active {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

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

/* ============================================
   MUI MIGRATED - CONTENT CARD CSS
   Phase 14B: January 23, 2026
   
   The following CSS sections have been migrated to MUI
   components and are commented out. To re-enable for
   fallback/vanilla mode, uncomment the relevant sections.
   
   Sections:
   - Key Concepts (concept-box, concept-grid, concept-item)
   - Example Cards (example-card, example-header, problem-box)
   - Steps (step, step-math, step-annotation, step-controls)
   ============================================ */

/* --- MUI MIGRATED: Key Concepts ---
/* Concept Box */
.concept-box {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    border-left: 5px solid var(--accent-blue);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 40px;
    color: #fff; 
}
body.light-mode .concept-box {
    background: linear-gradient(135deg, #A8DADC, #85B8D0);
    color: #fff;
}
.concept-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.concept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.concept-item {
    background: rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 8px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.concept-item .MathJax {
    text-align: center;
}

.concept-item strong {
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: block;
    color: #ffffff;
}
/* --- END MUI MIGRATED: Key Concepts --- */

/* --- MUI MIGRATED: Example Cards --- */
/* Worked Example Card */
.example-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    margin-bottom: 40px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #444;
}
body.light-mode .example-card { border-color: #ddd; }

.example-header {
    padding: 15px 25px;
    border-bottom: none;
    color: var(--accent-blue);
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.example-header .example-label {
    text-transform: uppercase;
}
.example-header .example-name {
    text-transform: none;
}
body.light-mode .example-header { border-bottom-color: #ddd; }

.problem-box {
    background-color: var(--bg-problem);
    padding: 20px 25px;
    font-size: 1.1rem;
    border-bottom: 1px solid #444;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* Sticky problem box - sticks right below nav */
.example-card .problem-box {
    position: sticky;
    top: 67px; /* Exact nav height */
    z-index: 5;
    background-color: var(--bg-problem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-ex-card .problem-box {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--bg-problem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.light-mode .example-card .problem-box,
body.light-mode .sidebar-ex-card .problem-box {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Dynamic Image Styling */
.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 6px;
    border: 1px solid #444;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
body.light-mode .content-image {
    border-color: #ccc;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

body.light-mode .problem-box { border-bottom-color: #ddd; }

.step-container {
    padding: 10px 12px;
}
.step {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    margin-bottom: 10px;
    padding: 0;
    background: rgba(100, 181, 246, 0.05);
    border-radius: 8px;
    border-left: 3px solid var(--accent-blue);
    overflow: hidden;
}

.step:last-child { margin-bottom: 0; }

/* Hidden step (progressive reveal) */
.step.step-hidden {
    display: none;
}

/* Vertical layout for steps with long math content */
.step.step-vertical {
    flex-direction: column;
}

.step.step-vertical .step-math {
    border-right: none;
    border-bottom: 1px solid rgba(100, 181, 246, 0.2);
}

.step-annotation {
    flex: 1 1 50%;
    color: var(--text-annotation);
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
    padding: 12px 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Inner wrapper for annotation text to allow proper wrapping */
.step-annotation > * {
    max-width: 100%;
    white-space: normal;
}

.step-annotation .annotation-text {
    display: inline;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Ensure LaTeX content wraps properly in steps */
.step-annotation .mjx-chtml,
.step-annotation .katex,
.step-annotation mjx-container {
    display: inline !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin: 0 0.2em;
}

/* Ensure step-math also handles overflow */
.step-math {
    flex: 1 1 50%;
    font-size: 1.1rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
    border-right: 1px solid rgba(100, 181, 246, 0.2);
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.step-math .mjx-chtml,
.step-math .katex,
.step-math mjx-container {
    display: inline-block !important;
    margin: 0 0.2em;
}

/* Responsive: stack vertically on smaller screens */
@media (max-width: 600px) {
    .step {
        flex-direction: column;
    }
    .step-math {
        border-right: none;
        border-bottom: 1px solid rgba(100, 181, 246, 0.2);
    }
}

/* Step Control Buttons */
.step-controls {
    display: flex;
    align-items: center;
    padding: 15px 25px;
    border-top: 1px solid #333;
    position: relative;
}

.step-next-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.step-all-btn, .step-reset-btn {
    margin-left: auto;
}

body.light-mode .step-controls {
    border-top-color: #ddd;
}

.step-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--accent-blue);
    background: transparent;
    color: var(--accent-blue);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.step-btn:hover {
    background: var(--accent-blue);
    color: #fff;
}

.step-next-btn {
    min-width: 140px;
}

.step-all-btn {
    border-color: #888;
    color: #888;
}

.step-all-btn:hover {
    background: #888;
    color: #fff;
}

.step-reset-btn {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.step-reset-btn:hover {
    background: var(--accent-orange);
    color: #fff;
}
/* --- END MUI MIGRATED: Example Cards --- */

.alg-move {
    color: var(--highlight-math);
    font-weight: bold;
}

/* Try It Section */
.try-it-container {
    border: 2px solid var(--border-tryit);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 50px;
    position: relative;
}
.try-it-label {
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--bg-page);
    color: var(--border-tryit);
    padding: 0 10px;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Interactive Question Card */
.question-card {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 30px;
    border: 2px solid #444;
    transition: border-color 0.3s ease, background 0.3s ease;
}
body.light-mode .question-card { border-color: #ddd; }

/* Answered state highlighting for question cards */
.question-card.answered-correct {
    border-color: rgba(102, 187, 106, 0.6);
    background: linear-gradient(135deg, var(--bg-card), rgba(102, 187, 106, 0.08));
}
body.light-mode .question-card.answered-correct {
    border-color: rgba(46, 125, 50, 0.7);
    background: linear-gradient(135deg, var(--bg-card), rgba(46, 125, 50, 0.08));
}

.question-card.answered-wrong {
    border-color: rgba(239, 83, 80, 0.6);
    background: linear-gradient(135deg, var(--bg-card), rgba(239, 83, 80, 0.08));
}
body.light-mode .question-card.answered-wrong {
    border-color: rgba(198, 40, 40, 0.7);
    background: linear-gradient(135deg, var(--bg-card), rgba(198, 40, 40, 0.08));
}

/* ============================================
   REACT QUESTION CARD ENHANCEMENTS
   ============================================ */

/* React Question Card Base */
.react-question-card {
    position: relative;
}

/* React Debug Badge */
.react-debug-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.55rem;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 215, 0, 0.8);
    color: #1a1a1a;
    z-index: 10;
    pointer-events: none;
    opacity: 0.7;
}

/* Debug Mode Corner Accent */
.react-question-card.react-debug-mode {
    border-color: rgba(255, 215, 0, 0.4);
}

/* Light mode adjustments */
body.light-mode .react-debug-badge {
    background: rgba(255, 152, 0, 0.8);
    color: #fff;
}

/* MUI Question Card Container */
.mui-question-container {
    margin-bottom: 24px;
}


/* ============================================
   END REACT ENHANCEMENTS
   ============================================ */

/* ============================================
   MUI MIGRATED - QUESTION CARD CSS
   Phase 14A: January 23, 2026
   
   The following CSS sections have been migrated to MUI
   components and are commented out. To re-enable for
   fallback/vanilla mode, uncomment the relevant sections.
   
   Sections:
   - Card Structure (q-header, q-num, q-tag, q-body)
   - Bookmark/Hint buttons
   - Options (opt-btn, options-grid)
   - TF/ASN buttons
   - SORT question styles
   - MATCH question styles
   - FRQ question styles
   - FIB question styles
   - Check button and feedback panels
   ============================================ */

/* --- MUI MIGRATED: Card Structure --- 
.q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
    position: relative;
}
body.light-mode .q-header { border-bottom-color: #ddd; }

.q-num {
    font-weight: bold;
    color: var(--text-muted);
}
.q-tag {
    font-size: 0.8rem;
    border: 1px solid var(--accent-blue);
    color: var(--accent-blue);
    padding: 2px 8px;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
/* Practice Mode Type Badge */
.practice-type-badge {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
}
.practice-type-badge.foundation,
.practice-type-badge.mastery,
.practice-type-badge.trynow {
    background: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
}
/* Practice Mode Header - center the badge */
.practice-q-header {
    display: flex;
    align-items: center;
    position: relative;
}
.practice-q-header .q-num {
    flex-shrink: 0;
}
.practice-q-header .practice-type-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.practice-q-header .q-header-right {
    margin-left: auto;
}
/* --- NEW: Clickable Tag Styles --- */
.q-tag.clickable {
    cursor: pointer;
    background: rgba(100, 181, 246, 0.1);
    transition: all 0.2s ease;
}
.q-tag.clickable:hover {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 0 10px rgba(100, 181, 246, 0.4);
}
/* --- END MUI MIGRATED: Card Structure (Header/Tag section) --- */

/* --- MUI MIGRATED: Sidebar Example Styling ---
.sidebar-ex-card {
    border: 1px solid #444;
    border-radius: 6px;
    margin-bottom: 20px;
    background: rgba(0,0,0,0.2);
}
body.light-mode .sidebar-ex-card {
    border-color: #ccc;
    background: rgba(255,255,255,0.5);
}

/* Sidebar step controls - smaller buttons */
.sidebar-ex-card .step-controls {
    padding: 8px;
}
.sidebar-ex-card .step-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
}
.sidebar-ex-card .step-next-btn {
    min-width: 110px;
}

/* Sidebar steps - slightly smaller */
.sidebar-ex-card .step {
    padding: 5px;
    margin-bottom: 8px;
}
.sidebar-ex-card .step-math {
    font-size: 1rem;
}
.sidebar-ex-card .step-annotation {
    font-size: 0.85rem;
}

.sidebar-ex-header {
    background: #2a2a2a;
    padding: 10px;
    font-weight: bold;
    color: var(--accent-blue);
    font-size: 0.9rem;
    border-bottom: 1px solid #444;
}
body.light-mode .sidebar-ex-header {
    background: #e0e0e0;
    border-bottom-color: #ccc;
}
/* --- END MUI MIGRATED: Sidebar Example Styling --- */

/* --- MUI MIGRATED: Question Card Header Controls ---
.q-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BOOKMARK BUTTON STYLES */
.bookmark-btn {
    background: transparent;
    border: 1px solid #60bd79;
    cursor: pointer;
    color: #60bd79;
    padding: 0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.bookmark-btn:hover {
    background: #60bd79;
    color: #fff;
    box-shadow: 0 0 8px #60bd79;
}
.bookmark-btn.active {
    background: #60bd79;
    color: #fff;
    border-color: #60bd79;
}
.bookmark-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
.bookmark-btn.active svg {
    fill: currentColor;
}
/* --- END MUI MIGRATED: Bookmark Button --- */

/* VIDEO FEATURES */
.video-toggle-btn {
    background: transparent;
    border: 1px solid var(--video-accent);
    color: var(--video-accent);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.video-toggle-btn:hover {
    background: var(--video-accent);
    color: #fff;
    box-shadow: 0 0 8px var(--video-accent);
}
.video-toggle-btn svg { width: 14px; height: 14px; fill: currentColor; }

.video-panel {
    display: none;
    margin-top: 15px;
    margin-bottom: 15px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    animation: fadeIn 0.3s ease;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.video-fallback-link {
    display: block;
    text-align: center;
    color: var(--video-accent);
    padding: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid #333;
}
.video-fallback-link:hover {
    text-decoration: underline;
    background: rgba(255, 255, 255, 0.1);
}

/* --- MUI MIGRATED: Hint Toggle Button ---
.hint-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-hint);
    color: var(--text-hint);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.hint-toggle-btn:hover {
    background: var(--border-hint);
    color: #fff;
    box-shadow: 0 0 8px var(--border-hint);
}
.hint-toggle-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
/* --- END MUI MIGRATED: Hint Toggle Button --- */

/* --- MUI MIGRATED: Question Body ---
.q-body {
    font-size: 1.1rem;
    margin-bottom: 20px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* Side-by-side layout for questions with images */
.q-body-with-image {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
}

.q-body-with-image .q-body-text {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.q-body-with-image .q-body-image {
    flex: 0 0 auto;
    max-width: 50%;
}

.q-body-with-image .q-body-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .q-body-with-image {
        flex-direction: column;
    }
    
    .q-body-with-image .q-body-image {
        max-width: 100%;
        order: -1; /* Image on top when stacked */
    }
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}
/* --- END MUI MIGRATED: Question Body & Options Grid --- */

@media (max-width: 900px) {
    /* Adjust nav for smaller screens to prevent pill overflow */
    nav {
        padding: 15px 10px;
        gap: 10px;
    }
    
    /* Hide or reposition subtitles on small screens to avoid overlap */
    nav > .subtitle-class,
    nav > .subtitle-topic {
        position: static;
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    
    .nav-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ============================================
   MOBILE LAYOUT (PHONE & TABLET)
   ============================================ */

/* Mobile Top Bar */
.mobile-top-bar {
    display: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: var(--bg-card);
    border-bottom: 1px solid #444;
    align-items: center;
    padding: 0 12px;
    gap: 12px;
    z-index: 150;
}

.mobile-menu-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.mobile-menu-btn svg {
    stroke: var(--text-primary);
}

.mobile-lesson-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-theme-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-theme-btn svg {
    stroke: var(--text-primary);
}

body.light-mode .mobile-top-bar {
    border-bottom-color: #ddd;
}

/* Mobile Bottom Toolbar */
/* Phase 12: Updated to match MUI BottomNavigation style */
.mobile-bottom-toolbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: var(--bg-card);
    border-top: none;
    align-items: center;
    justify-content: space-around;
    padding: 0;
    z-index: 200;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
}

.mobile-tool-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 6px 0;
    color: var(--text-muted);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 100%;
    min-width: 80px;
    max-width: 168px;
}

.mobile-tool-btn:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-tool-btn svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.mobile-tool-btn span {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.mobile-tool-btn:hover,
.mobile-tool-btn.active {
    color: var(--accent-blue);
}

body.light-mode .mobile-bottom-toolbar {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}
body.light-mode .mobile-tool-btn:active {
    background: rgba(0, 0, 0, 0.04);
}

/* Mobile Bottom Sheet */
.mobile-bottom-sheet {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    pointer-events: none;
}

.mobile-bottom-sheet.active {
    pointer-events: auto;
}

.bottom-sheet-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.mobile-bottom-sheet.active .bottom-sheet-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.bottom-sheet-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80vh;
    max-height: 80vh;
    background-color: var(--bg-card);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-bottom-sheet.active .bottom-sheet-content {
    transform: translateY(0);
}

.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--text-muted);
    border-radius: 2px;
    margin: 12px auto 8px;
    opacity: 0.5;
}

.bottom-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid #444;
}

.bottom-sheet-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.bottom-sheet-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bottom-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Mobile Pomodoro Panel - Center buttons properly */
.bottom-sheet-body #panel-pomo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure flex containers with buttons are properly centered */
.bottom-sheet-body #panel-pomo > div[style*="display: flex"] {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Override inline styles on Pomodoro buttons in mobile */
.bottom-sheet-body #panel-pomo button {
    pointer-events: auto;
}

.bottom-sheet-body #panel-pomo .check-btn {
    width: auto;
    padding: 10px 20px;
    min-width: 80px;
}

.bottom-sheet-body #panel-pomo .opt-btn {
    width: auto;
    padding: 8px 12px;
}

body.light-mode .bottom-sheet-header {
    border-bottom-color: #ddd;
}

/* Mobile More Menu */
.mobile-more-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    pointer-events: none;
}

.mobile-more-menu.active {
    pointer-events: auto;
}

.more-menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.mobile-more-menu.active .more-menu-backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.more-menu-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    max-height: 40vh;
    background-color: var(--bg-card);
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-more-menu.active .more-menu-content {
    transform: translateY(0);
}

.more-menu-header {
    display: none;
}

.more-menu-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.more-menu-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    color: var(--text-muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.more-menu-body {
    padding: 12px 0;
}

.more-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.more-menu-item:active {
    background: rgba(128, 128, 128, 0.1);
}

.more-menu-item svg {
    stroke: var(--text-primary);
    flex-shrink: 0;
}

.more-menu-item span {
    font-size: 1rem;
}

body.light-mode .more-menu-header {
    border-bottom-color: #ddd;
}

/* ============================================
   MOBILE BREAKPOINTS
   ============================================ */

@media (max-width: 768px) {
    /* Show mobile UI elements */
    .mobile-top-bar {
        display: flex;
    }
    
    /* Hide vanilla mobile top bar when MUI is active */
    .mui-mode .mobile-top-bar,
    .mui-hybrid-mode .mobile-top-bar {
        display: none !important;
    }
    
    .mobile-bottom-toolbar {
        display: flex;
    }
    
    .mobile-bottom-sheet {
        display: block;
    }
    
    .mobile-more-menu {
        display: none !important;
    }
    
    /* Hide desktop elements */
    .hamburger-btn {
        display: none !important;
    }
    
    .icon-strip-pane {
        display: none !important;
    }
    
    .sidebar-toggle-btn {
        display: none !important;
    }
    
    .side-panel-pane {
        display: none !important;
    }
    
    .resizer {
        display: none !important;
    }
    
    /* Make left sidebar full-screen overlay on mobile */
    .left-sidebar {
        position: fixed;
        left: -100%;
        top: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        z-index: 250;
        transition: left 0.3s ease;
        box-shadow: none;
    }
    
    .left-sidebar.open {
        left: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }
    
    .left-sidebar .mobile-close-btn {
        display: flex;
    }
    
    .left-sidebar .ls-close-btn:not(.mobile-close-btn) {
        display: none;
    }
    
    /* Shrink logo on mobile */
    .sidebar-logo {
        height: 80px;
        object-fit: contain;
        padding: 8px 0;
    }
    
    /* Larger text for lesson menu on mobile */
    .ls-item {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        padding: 16px 14px;
    }
    
    .ls-category-header {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
    }
    
    /* Hide desktop auth buttons on mobile */
    .desktop-auth-buttons {
        display: none !important;
    }
    
    /* Show mobile auth buttons on mobile */
    .mobile-auth-buttons {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        margin-bottom: 2px;
    }
    
    /* Hide mobile auth buttons when logged in */
    .mobile-auth-buttons.logged-in-hidden {
        display: none !important;
    }
    
    /* Mobile-specific login/register buttons with larger font */
    .login-btn-mobile,
    .register-btn-mobile {
        text-align: center;
        padding: 8px 0;
        border: none;
        border-radius: 0;
        cursor: pointer;
        font-weight: bold;
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        background: transparent;
        color: var(--accent-blue);
        transition: all 0.2s;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex: 1;
    }
    
    /* Mobile responsive font sizes for user info, settings, and search */
    .user-info p {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }
    
    .settings-btn {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        padding: 12px 8px;
    }
    
    #ls-search-input {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
        padding: 12px 14px;
    }
    
    .login-btn-mobile {
        text-align: left;
    }
    
    .register-btn-mobile {
        text-align: right;
    }
    
    .login-btn-mobile:hover,
    .register-btn-mobile:hover {
        background: transparent;
        color: var(--accent-blue);
        opacity: 0.8;
    }

    /* Hide developer menu footer on mobile */
    .left-sidebar .ls-footer {
        display: none;
    }
    
    /* Adjust main content for mobile */
    .main-content-pane {
        padding-bottom: 120px; /* Space for bottom toolbar + progress bar */
    }
    
    /* Center welcome blurb on mobile */
    #home-view.active {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 200px);
    }
    
    /* Show progress bar on mobile and position it above the toolbar */
    #global-progress {
        display: block !important;
        position: fixed;
        bottom: 48px; /* Above the 48px bottom toolbar */
        left: 0;
        right: 0;
        width: 100%;
        z-index: 199;
    }
}

@media (max-width: 600px) {
    /* --- MUI MIGRATED: Options Grid Mobile ---
    .options-grid { grid-template-columns: 1fr; }
    --- END MUI MIGRATED --- */
    
    nav {
        padding: 12px 8px;
        gap: 8px;
    }
    
    .nav-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* --- MUI MIGRATED: Option Buttons ---
.opt-btn {
    background: transparent;
    border: 1px solid #666;
    color: var(--text-primary);
    padding: 15px;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-size: 1rem;
}
body.light-mode .opt-btn { border-color: #ccc; }

.opt-btn:hover:not(:disabled) {
    background: rgba(128,128,128,0.1);
    border-color: var(--text-primary);
}
.opt-btn.selected {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.1);
}
.opt-btn.correct {
    background: rgba(102, 187, 106, 0.2) !important;
    border-color: var(--state-success) !important;
}
.opt-btn.wrong {
    background: rgba(239, 83, 80, 0.2) !important;
    border-color: var(--state-error) !important;
    opacity: 0.7;
}

/* Light mode option button states */
body.light-mode .opt-btn.selected {
    border-color: #1565c0;
    background: rgba(21, 101, 192, 0.12);
}
body.light-mode .opt-btn.correct {
    background: rgba(46, 125, 50, 0.2) !important;
    border-color: #2e7d32 !important;
}
body.light-mode .opt-btn.wrong {
    background: rgba(198, 40, 40, 0.2) !important;
    border-color: #c62828 !important;
}
/* MSQ-specific styling */
.msq-card {
    /* Additional styling for MSQ cards if needed */
}

.msq-instruction {
    background: rgba(100, 181, 246, 0.08);
    border-left: 3px solid var(--accent-blue);
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
}

body.light-mode .msq-instruction {
    background: rgba(25, 118, 210, 0.06);
    border-left-color: #1976d2;
}
/* --- END MUI MIGRATED: Option Buttons & MSQ Styles --- */

/* ========== TF (True/False) Styles ========== */
/* --- MUI MIGRATED: TF/TF-R Styles --- */
.tf-card {
    /* Additional styling for TF cards if needed */
}

.tf-options-container {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.tf-opt-btn {
    flex: 1;
    padding: 18px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid #666;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 60px;
}

.tf-opt-btn:hover:not(:disabled) {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.1);
    transform: translateY(-2px);
}

.tf-opt-btn.selected {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.15);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

.tf-opt-btn.correct {
    border-color: var(--correct-color) !important;
    background: rgba(102, 187, 106, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.3) !important;
}

.tf-opt-btn.wrong {
    border-color: var(--wrong-color) !important;
    background: rgba(239, 83, 80, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.3) !important;
}

.tf-opt-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

body.light-mode .tf-opt-btn {
    background: transparent;
    border-color: #ccc;
}

body.light-mode .tf-opt-btn:hover:not(:disabled) {
    background: rgba(21, 101, 192, 0.1);
    border-color: #1565c0;
}

body.light-mode .tf-opt-btn.selected {
    background: rgba(21, 101, 192, 0.15);
    border-color: #1565c0;
}

body.light-mode .tf-opt-btn.correct {
    border-color: #2e7d32 !important;
    background: rgba(46, 125, 50, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.25) !important;
}

body.light-mode .tf-opt-btn.wrong {
    border-color: #c62828 !important;
    background: rgba(198, 40, 40, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25) !important;
}

/* ========== ASN (Always/Sometimes/Never) Styles ========== */
.asn-card {
    /* Additional styling for ASN cards if needed */
}

.asn-options-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.asn-opt-btn {
    flex: 1;
    padding: 16px 12px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid #666;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 55px;
}

.asn-opt-btn:hover:not(:disabled) {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.1);
    transform: translateY(-2px);
}

.asn-opt-btn.selected {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.15);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

.asn-opt-btn.correct {
    border-color: var(--correct-color) !important;
    background: rgba(102, 187, 106, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.3) !important;
}

.asn-opt-btn.wrong {
    border-color: var(--wrong-color) !important;
    background: rgba(239, 83, 80, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.3) !important;
}

.asn-opt-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

body.light-mode .asn-opt-btn {
    background: transparent;
    border-color: #ccc;
}

body.light-mode .asn-opt-btn:hover:not(:disabled) {
    background: rgba(21, 101, 192, 0.1);
    border-color: #1565c0;
}

body.light-mode .asn-opt-btn.selected {
    background: rgba(21, 101, 192, 0.15);
    border-color: #1565c0;
}

body.light-mode .asn-opt-btn.correct {
    border-color: #2e7d32 !important;
    background: rgba(46, 125, 50, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.25) !important;
}

body.light-mode .asn-opt-btn.wrong {
    border-color: #c62828 !important;
    background: rgba(198, 40, 40, 0.2) !important;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.25) !important;
}

/* ========== ASN-R (ASN with Reasoning) Styles ========== */
.asnr-card {
    /* Additional styling for ASN-R cards if needed */
}

.asnr-container {
    margin-bottom: 15px;
}

.asn-reason-container {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.asn-reason-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.95rem;
    white-space: nowrap;
}

.asn-reason-dropdown {
    flex: 1;
    padding: 12px 15px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

.asn-reason-dropdown:hover:not(:disabled) {
    border-color: var(--accent-blue);
}

.asn-reason-dropdown:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
    outline: none;
}

.asn-reason-dropdown.asn-reason-correct {
    border-color: var(--correct-color) !important;
    background-color: rgba(102, 187, 106, 0.1);
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

.asn-reason-dropdown.asn-reason-wrong {
    border-color: var(--wrong-color) !important;
    background-color: rgba(239, 83, 80, 0.1);
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

.asn-reason-dropdown:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Dark mode dropdown options need explicit styling */
.asn-reason-dropdown option {
    background: #2a2a2a;
    color: #e0e0e0;
}

body.light-mode .asn-reason-dropdown {
    background-color: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .asn-reason-dropdown:hover:not(:disabled) {
    border-color: #1565c0;
}

body.light-mode .asn-reason-dropdown option {
    background: #fff;
    color: #333;
}

body.light-mode .asn-reason-dropdown.asn-reason-correct {
    border-color: #2e7d32 !important;
    background-color: rgba(46, 125, 50, 0.18);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}

body.light-mode .asn-reason-dropdown.asn-reason-wrong {
    border-color: #c62828 !important;
    background-color: rgba(198, 40, 40, 0.18);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2);
}

/* Mobile responsive for TF/ASN/ASN-R */
@media (max-width: 480px) {
    .tf-opt-btn,
    .asn-opt-btn {
        padding: 14px 10px;
        font-size: 0.95rem;
        min-height: 50px;
    }
    
    .asn-reason-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .asn-reason-label {
        text-align: left;
    }
}

/* ========== TF-R (True/False with Reasoning) Styles ========== */
.tfr-container {
    margin-bottom: 15px;
}

.tf-reason-container {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tf-reason-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.95rem;
    white-space: nowrap;
}

.tf-reason-dropdown {
    flex: 1;
    padding: 12px 15px;
    font-size: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

.tf-reason-dropdown:hover:not(:disabled) {
    border-color: var(--accent-blue);
}

.tf-reason-dropdown:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
    outline: none;
}

.tf-reason-dropdown.tf-reason-correct {
    border-color: var(--correct-color) !important;
    background-color: rgba(102, 187, 106, 0.1);
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

.tf-reason-dropdown.tf-reason-wrong {
    border-color: var(--wrong-color) !important;
    background-color: rgba(239, 83, 80, 0.1);
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

.tf-reason-dropdown:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Dark mode dropdown options need explicit styling */
.tf-reason-dropdown option {
    background: #2a2a2a;
    color: #e0e0e0;
}

body.light-mode .tf-reason-dropdown {
    background-color: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .tf-reason-dropdown:hover:not(:disabled) {
    border-color: #1565c0;
}

body.light-mode .tf-reason-dropdown option {
    background: #fff;
    color: #333;
}

body.light-mode .tf-reason-dropdown.tf-reason-correct {
    border-color: #2e7d32 !important;
    background-color: rgba(46, 125, 50, 0.18);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2);
}

body.light-mode .tf-reason-dropdown.tf-reason-wrong {
    border-color: #c62828 !important;
    background-color: rgba(198, 40, 40, 0.18);
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.2);
}

/* Mobile responsive for TF-R */
@media (max-width: 480px) {
    .tf-reason-container {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .tf-reason-label {
        text-align: left;
    }
}
/* --- END MUI MIGRATED: TF/TF-R Styles --- */

/* ========== SORT (Ordering/Sorting) Styles ========== */
/* --- MUI MIGRATED: SORT Styles ---
.sort-card {
    /* Additional styling for SORT cards if needed */
}

.sort-container {
    margin-bottom: 15px;
}

.sort-labels-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 0 10px;
}

.sort-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sort-label-start {
    text-align: left;
}

.sort-label-end {
    text-align: right;
}

/* Vertical orientation: labels on top (end) and bottom (start) */
.sort-container.vertical .sort-labels-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
}

.sort-container.vertical .sort-label {
    width: 100%;
    text-align: center;
    padding: 6px;
    background: rgba(100, 181, 246, 0.15);
    border-radius: 4px;
    border: 1px solid rgba(100, 181, 246, 0.3);
}

.sort-container.vertical .sort-label-start {
    order: 0; /* Top for vertical - First */
    border-radius: 8px 8px 0 0;
    margin-bottom: 4px;
}

.sort-container.vertical .sort-label-end {
    order: 2; /* Bottom for vertical - Last */
    border-radius: 0 0 8px 8px;
    margin-top: 4px;
}

/* Horizontal orientation: labels on left (start) and right (end) */
.sort-container.horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.sort-container.horizontal .sort-label {
    padding: 8px 12px;
    background: rgba(100, 181, 246, 0.15);
    border: 1px solid rgba(100, 181, 246, 0.3);
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sort-container.horizontal .sort-label-start {
    order: 0; /* Left */
}

.sort-container.horizontal .sort-label-end {
    order: 2; /* Right */
}

.sort-container.horizontal .sort-items-wrapper {
    order: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex: 1;
}

.sort-container.horizontal .sort-item {
    flex: 1;
    min-width: 80px;
}

.sort-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sort-container.vertical .sort-items-wrapper {
    order: 1;
}

.sort-container.horizontal .sort-label-inline {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 8px;
    white-space: nowrap;
}

.sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 2px solid #444;
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    user-select: none;
    touch-action: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sort-item:active {
    cursor: grabbing;
}

.sort-item:hover:not(.sort-disabled) {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sort-item.dragging {
    opacity: 0.7;
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 100;
}

.sort-item.drag-over {
    border-color: var(--accent-blue);
    border-style: dashed;
    background: rgba(100, 181, 246, 0.1);
}

.sort-drag-handle {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
    color: var(--text-muted);
    opacity: 0.6;
    flex-shrink: 0;
}

.sort-drag-handle:hover {
    opacity: 1;
    color: var(--accent-blue);
}

.sort-drag-handle span {
    display: block;
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}

.sort-item-content {
    flex: 1;
    font-size: 1rem;
    line-height: 1.4;
}

.sort-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}

.sort-container.horizontal .sort-arrows {
    flex-direction: row;
}

/* Hide drag handle in horizontal mode - too cluttered */
.sort-container.horizontal .sort-drag-handle {
    display: none;
}

.sort-arrow-btn {
    width: 28px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    font-size: 12px;
}

.sort-arrow-btn:hover:not(:disabled) {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
}

.sort-arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Correct/Wrong states for SORT items */
.sort-item.sort-correct {
    border-color: var(--correct-color) !important;
    background: rgba(102, 187, 106, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.2);
}

.sort-item.sort-wrong {
    border-color: var(--wrong-color) !important;
    background: rgba(239, 83, 80, 0.15) !important;
    box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.2);
}

.sort-item.sort-disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.sort-item.sort-disabled .sort-drag-handle {
    opacity: 0.3;
}

/* Position indicators for SORT items */
.sort-position-indicator {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.sort-item.sort-correct .sort-position-indicator {
    color: var(--correct-color);
}

.sort-item.sort-wrong .sort-position-indicator {
    color: var(--wrong-color);
}

/* Light mode adjustments */
body.light-mode .sort-item {
    background: #f8f9fa;
    border-color: #bbb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.light-mode .sort-item:hover:not(.sort-disabled) {
    border-color: #1565c0;
    background: rgba(21, 101, 192, 0.08);
}

body.light-mode .sort-item.sort-correct {
    border-color: #2e7d32 !important;
    background: rgba(46, 125, 50, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.25);
}

body.light-mode .sort-item.sort-wrong {
    border-color: #c62828 !important;
    background: rgba(198, 40, 40, 0.18) !important;
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.25);
}

body.light-mode .sort-label {
    color: #666;
}

body.light-mode .sort-container.vertical .sort-label {
    background: rgba(21, 101, 192, 0.1);
}

/* Mobile responsive for SORT */
@media (max-width: 480px) {
    .sort-item {
        padding: 10px 12px;
    }
    
    .sort-container.horizontal {
        flex-direction: column;
    }
    
    .sort-container.horizontal .sort-items-wrapper {
        flex-direction: column;
        width: 100%;
    }
    
    .sort-container.horizontal .sort-label {
        width: 100%;
        text-align: center;
    }
    
    .sort-container.horizontal .sort-label-start {
        order: 0;
    }
    
    .sort-container.horizontal .sort-label-end {
        order: 2;
    }
    
    .sort-arrow-btn {
        width: 32px;
        height: 28px;
    }
}
/* --- END MUI MIGRATED: SORT Styles --- */

/* ========== MATCH (Matching) Styles ========== */
/* --- MUI MIGRATED: MATCH Styles ---
.match-card {
    /* Additional styling for MATCH cards if needed */
}

.match-container {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    align-items: flex-start;
}

.match-prompts {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.match-prompt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.match-prompt-row:hover {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.05);
}

.match-prompt-num {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-blue);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.match-prompt-text {
    flex: 1;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.4;
}

.match-dropdown {
    min-width: 70px;
    padding: 10px 30px 10px 12px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    flex-shrink: 0;
}

.match-dropdown:hover:not(:disabled) {
    border-color: var(--accent-blue);
}

.match-dropdown:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
    outline: none;
}

.match-dropdown.match-correct {
    border-color: var(--correct-color) !important;
    background-color: rgba(102, 187, 106, 0.15);
    box-shadow: 0 0 0 2px rgba(102, 187, 106, 0.2);
}

.match-dropdown.match-wrong {
    border-color: var(--wrong-color) !important;
    background-color: rgba(239, 83, 80, 0.15);
    box-shadow: 0 0 0 2px rgba(239, 83, 80, 0.2);
}

.match-dropdown:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Dark mode dropdown options need explicit styling */
.match-dropdown option {
    background: #2a2a2a;
    color: #e0e0e0;
}

.match-targets-panel {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(100, 181, 246, 0.08);
    border: 1px solid rgba(100, 181, 246, 0.2);
    border-radius: 10px;
}

.match-targets-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.match-target-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.match-target-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent-blue);
    min-width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.match-target-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.4;
}

/* Correct/Wrong states for match prompt rows */
.match-prompt-row.match-row-correct {
    border-color: var(--correct-color) !important;
    background: rgba(102, 187, 106, 0.12) !important;
}

.match-prompt-row.match-row-wrong {
    border-color: var(--wrong-color) !important;
    background: rgba(239, 83, 80, 0.12) !important;
}

.match-disabled .match-dropdown {
    cursor: not-allowed;
    opacity: 0.7;
}

/* Light mode adjustments for MATCH */
body.light-mode .match-prompt-row {
    background: #f8f9fa;
    border-color: #ccc;
}

body.light-mode .match-prompt-row:hover {
    border-color: #1565c0;
    background: rgba(21, 101, 192, 0.06);
}

body.light-mode .match-dropdown {
    background-color: #f5f5f5;
    border-color: #ccc;
}

body.light-mode .match-dropdown:hover:not(:disabled) {
    border-color: #1565c0;
}

body.light-mode .match-dropdown option {
    background: #fff;
    color: #333;
}

body.light-mode .match-dropdown.match-correct {
    border-color: #2e7d32 !important;
    background-color: rgba(46, 125, 50, 0.2);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
}

body.light-mode .match-dropdown.match-wrong {
    border-color: #c62828 !important;
    background-color: rgba(198, 40, 40, 0.2);
    box-shadow: 0 0 0 2px rgba(198, 40, 40, 0.2);
}

body.light-mode .match-prompt-row.match-row-correct {
    border-color: #2e7d32 !important;
    background: rgba(46, 125, 50, 0.15) !important;
}

body.light-mode .match-prompt-row.match-row-wrong {
    border-color: #c62828 !important;
    background: rgba(198, 40, 40, 0.15) !important;
}

body.light-mode .match-targets-panel {
    background: rgba(21, 101, 192, 0.08);
    border-color: rgba(21, 101, 192, 0.2);
}

body.light-mode .match-target-row {
    background: #fff;
    border-color: #ddd;
}

/* Mobile responsive for MATCH */
@media (max-width: 768px) {
    .match-container {
        flex-direction: column;
    }
    
    .match-targets-panel {
        width: 100%;
        order: -1; /* Show targets first on mobile */
        margin-bottom: 12px;
    }
    
    .match-prompt-row {
        padding: 12px 14px;
    }
    
    .match-dropdown {
        min-width: 60px;
        padding: 8px 26px 8px 10px;
    }
}

@media (max-width: 480px) {
    .match-prompt-text {
        font-size: 0.95rem;
    }
    
    .match-target-text {
        font-size: 0.9rem;
    }
}
/* --- END MUI MIGRATED: MATCH Styles --- */

/* ========== FRQ (Free Response Question) Styles ========== */
/* --- MUI MIGRATED: FRQ Styles ---
.frq-instruction {
    background: rgba(100, 181, 246, 0.08);
    border-left: 3px solid var(--accent-blue);
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
}

body.light-mode .frq-instruction {
    background: rgba(25, 118, 210, 0.06);
    border-left-color: #1976d2;
}

.frq-input-container {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    min-height: 60px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.frq-input-container:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

.frq-input-container.frq-correct {
    border-color: var(--correct-color);
    background: rgba(102, 187, 106, 0.1);
    box-shadow: 0 0 0 3px rgba(102, 187, 106, 0.2);
}

.frq-input-container.frq-wrong {
    border-color: var(--wrong-color);
    background: rgba(239, 83, 80, 0.1);
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

/* MathQuill Field Styling */
.frq-mathquill-field {
    display: block;
    width: 100%;
    min-height: 40px;
    font-size: 1.2rem;
}

.frq-mathquill-field .mq-editable-field {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* MathQuill cursor (blinking insertion point) */
.frq-mathquill-field .mq-cursor {
    border-left-color: #fff !important;
}

body.light-mode .frq-mathquill-field .mq-cursor {
    border-left-color: #000 !important;
}

.frq-mathquill-field.mq-disabled {
    pointer-events: none;
    opacity: 0.8;
}

/* MathQuill overrides for dark mode */
.mq-editable-field {
    color: var(--text-primary) !important;
    caret-color: #fff !important;
}

.mq-math-mode .mq-root-block {
    color: var(--text-primary);
}

/* Light mode overrides */
body.light-mode .frq-input-container {
    background: #fafafa;
    border-color: #e0e0e0;
}

body.light-mode .frq-input-container:focus-within {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

body.light-mode .frq-input-container.frq-correct {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.08);
}

body.light-mode .frq-input-container.frq-wrong {
    border-color: #f44336;
    background: rgba(244, 67, 54, 0.08);
}

/* Fallback text input (when MathQuill doesn't load) */
.frq-fallback-input {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    outline: none;
}

.frq-fallback-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

body.light-mode .frq-fallback-input {
    color: #333;
}

/* ========== FRQ Math Toolbar ========== */
.frq-input-wrapper {
    position: relative;
}

.frq-input-container {
    position: relative;
    padding-right: 50px;
}

.frq-toolbar-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent-blue);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1;
}

.frq-toolbar-toggle:hover {
    background: var(--accent-blue);
    color: #fff;
}

body.light-mode .frq-toolbar-toggle {
    background: #f0f0f0;
    border-color: #1976d2;
    color: #1976d2;
}

body.light-mode .frq-toolbar-toggle:hover {
    background: #1976d2;
    color: #fff;
}

.frq-math-toolbar {
    display: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.frq-math-toolbar.open {
    display: block;
}

body.light-mode .frq-math-toolbar {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.frq-toolbar-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 2;
}

.frq-toolbar-close:hover {
    background: var(--wrong-color);
    color: #fff;
}

/* 3-Column Layout Container */
.frq-toolbar-content {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: stretch;
}

.frq-toolbar-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: space-between;
}

.frq-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow: visible;
    padding: 4px;
}

.frq-toolbar-row button {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 44px;
    font-size: 0.95rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    /* Mobile-friendly: prevent text selection and improve touch handling */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

.frq-toolbar-row button:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    transform: translateY(-1px);
}

.frq-toolbar-row button:active {
    transform: translateY(0);
}

body.light-mode .frq-toolbar-row button {
    background: #f5f5f5;
    border-color: #ddd;
    color: #333;
}

body.light-mode .frq-toolbar-row button:hover {
    background: #1976d2;
    color: #fff;
    border-color: #1976d2;
}

/* Numpad specific styling */
.frq-toolbar-numpad {
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: visible;
}

.frq-toolbar-numpad .frq-toolbar-row {
    justify-content: center;
}

.frq-toolbar-numpad button {
    min-width: 48px;
    font-size: 1.1rem;
    font-weight: 600;
}

body.light-mode .frq-toolbar-numpad {
    background: #f0f0f0;
}

/* Navigation buttons - larger with blue outline */
.frq-nav-btn {
    min-width: 52px !important;
    padding: 10px 14px !important;
    font-size: 1.2rem !important;
    border: 2px solid var(--accent-blue) !important;
}

.frq-nav-btn:hover {
    background: var(--accent-blue) !important;
    color: #fff !important;
}

/* Backspace button - red border */
.frq-toolbar-backspace {
    background: transparent !important;
    color: #fff !important;
    border: 2px solid #f44336 !important;
}

.frq-toolbar-backspace:hover {
    background: #f44336 !important;
    color: #fff !important;
}

/* Advanced toggle button - hidden on desktop */
.frq-toolbar-advanced-toggle {
    display: none;
}

/* Mobile nav buttons in numpad - hidden on desktop */
.frq-nav-mobile {
    display: none !important;
}

/* Mobile: Stack vertically, always show toolbar */
@media (max-width: 768px) {
    .frq-toolbar-toggle {
        display: none;
    }
    
    /* Hide close button on mobile since toolbar is always visible */
    .frq-toolbar-close {
        display: none;
    }
    
    .frq-math-toolbar {
        display: block;
        margin-top: 12px;
    }
    
    .frq-toolbar-content {
        flex-direction: column;
        align-items: center;
    }
    
    .frq-toolbar-panel {
        width: 100%;
    }
    
    .frq-toolbar-row {
        justify-content: center;
    }
    
    .frq-toolbar-row button {
        padding: 10px 14px;
        min-width: 48px;
        font-size: 1rem;
    }
    
    .frq-toolbar-numpad {
        order: -1; /* Move numpad to top on mobile */
        width: auto;
    }
    
    /* Position toggle button right after numpad */
    .frq-toolbar-advanced-toggle {
        order: 0;
    }
    
    /* Collapsible panels come after toggle */
    .frq-toolbar-collapsible {
        order: 1;
    }
    
    /* Show mobile nav buttons in numpad row */
    .frq-nav-mobile {
        display: inline-flex !important;
    }
    
    /* Hide collapsible panels by default on mobile */
    .frq-toolbar-collapsible {
        display: none;
        width: 100%;
    }
    
    /* Show collapsible panels when advanced is open */
    .frq-math-toolbar.advanced-open .frq-toolbar-collapsible {
        display: flex;
    }
    
    /* Hide desktop nav row on mobile (it's now in numpad) */
    .frq-toolbar-nav-row {
        display: none !important;
    }
    
    /* Mobile backspace button - red border */
    .frq-toolbar-backspace {
        background: transparent !important;
        color: #fff !important;
        border: 2px solid #f44336 !important;
    }
    
    .frq-toolbar-backspace:hover {
        background: #f44336 !important;
        color: #fff !important;
    }
    
    /* Show advanced toggle button on mobile */
    .frq-toolbar-advanced-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 12px;
        padding: 10px 16px;
        background: var(--bg-tertiary);
        border: 2px solid var(--border-color);
        border-radius: 8px;
        color: var(--text-secondary);
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s ease;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
        outline: 2px solid var(--accent-blue);
        outline-offset: 2px;
    }
    
    .frq-toolbar-advanced-toggle:hover {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
    
    .frq-toolbar-advanced-toggle .toggle-icon {
        transition: transform 0.2s ease;
    }
    
    .frq-math-toolbar.advanced-open .frq-toolbar-advanced-toggle .toggle-icon {
        transform: rotate(180deg);
    }
    
    .frq-math-toolbar.advanced-open .frq-toolbar-advanced-toggle .toggle-text::after {
        content: ' (Hide)';
    }
    
    body.light-mode .frq-toolbar-advanced-toggle {
        background: #f5f5f5;
        border-color: #ddd;
        color: #666;
    }
    
    body.light-mode .frq-toolbar-advanced-toggle:hover {
        background: #eee;
        color: #333;
    }
    
    /* MathQuill mobile input fix - ensure hidden textarea can receive input */
    .mq-editable-field textarea,
    .mq-editable-field .mq-textarea textarea {
        /* Ensure the textarea is visible enough to be focused */
        position: absolute !important;
        opacity: 0.01 !important;
        width: 1px !important;
        height: 1px !important;
        z-index: -1;
    }
    
    /* Make the input container relative for textarea positioning */
    .frq-input-container .mq-editable-field {
        position: relative;
    }
}
/* --- END MUI MIGRATED: FRQ Styles --- */

/* ========== FIB (Fill in the Blank) Styles ========== */
/* --- MUI MIGRATED: FIB Styles ---

/* FIB question card */
.fib-card .q-body {
    line-height: 2.2;
}

/* FIB-T Text Input */
.fib-blank-input {
    display: inline-block;
    padding: 4px 10px;
    margin: 0 4px;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    border: 2px solid #555;
    border-radius: 6px;
    color: var(--text-primary);
    outline: none;
    vertical-align: middle;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fib-blank-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

.fib-blank-input.fib-correct {
    border-color: var(--state-success);
    background: rgba(102, 187, 106, 0.15);
}

.fib-blank-input.fib-wrong {
    border-color: var(--state-error);
    background: rgba(239, 83, 80, 0.15);
}

.fib-blank-input:disabled,
.fib-blank-input.fib-disabled {
    opacity: 0.8;
    cursor: not-allowed;
    background: rgba(102, 187, 106, 0.05);
}

/* FIB-M MathQuill Blank */
.fib-mathquill-blank {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 4px;
    border: 2px solid #555;
    border-radius: 6px;
    background: transparent;
    vertical-align: middle;
    min-height: 28px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fib-mathquill-blank:focus-within {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
}

.fib-mathquill-blank.fib-correct {
    border-color: var(--state-success);
    background: rgba(102, 187, 106, 0.15);
}

.fib-mathquill-blank.fib-wrong {
    border-color: var(--state-error);
    background: rgba(239, 83, 80, 0.15);
}

.fib-mathquill-blank.fib-disabled,
.fib-mathquill-blank.mq-disabled {
    pointer-events: none;
    opacity: 0.8;
    background: rgba(102, 187, 106, 0.05);
}

/* FIB Error Message */
.fib-error-message {
    display: none;
    background: rgba(239, 83, 80, 0.15);
    border: 1px solid var(--state-error);
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 12px;
    color: var(--state-error);
    font-size: 0.95rem;
    text-align: center;
}

body.light-mode .fib-error-message {
    background: rgba(244, 67, 54, 0.1);
    border-color: #f44336;
    color: #d32f2f;
}

/* FIB MathQuill cursor */
.fib-mathquill-blank .mq-cursor {
    border-left-color: #fff !important;
}

body.light-mode .fib-mathquill-blank .mq-cursor {
    border-left-color: #000 !important;
}

/* FIB MathQuill internal styling */
.fib-mathquill-blank .mq-editable-field {
    border: none !important;
    box-shadow: none !important;
}

.fib-mathquill-blank .mq-root-block {
    padding: 2px 4px;
}

/* Light mode FIB adjustments */
body.light-mode .fib-blank-input {
    background: #fafafa;
    border-color: #e0e0e0;
    color: #333;
}

body.light-mode .fib-blank-input:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

body.light-mode .fib-blank-input.fib-correct {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.15);
}

body.light-mode .fib-blank-input.fib-wrong {
    border-color: #c62828;
    background: rgba(198, 40, 40, 0.15);
}

body.light-mode .fib-mathquill-blank {
    background: #fafafa;
    border-color: #e0e0e0;
}

body.light-mode .fib-mathquill-blank:focus-within {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.15);
}

body.light-mode .fib-mathquill-blank.fib-correct {
    border-color: #2e7d32;
    background: rgba(46, 125, 50, 0.15);
}

body.light-mode .fib-mathquill-blank.fib-wrong {
    border-color: #c62828;
    background: rgba(198, 40, 40, 0.15);
}
/* --- END MUI MIGRATED: FIB Styles --- */

/* --- MUI MIGRATED: Check Button ---
.check-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
}
.check-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* --- END MUI MIGRATED: Check Button --- */

/* --- Return to Top Button --- */
.return-to-top-btn {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    margin-top: 40px;
}

.return-to-top-btn button {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.return-to-top-btn button:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.5);
    transform: translateY(-2px);
}

.return-to-top-btn button:active {
    transform: translateY(0);
}

/* --- Lock Screen Input Styles --- */
/* Phase 12: Updated to match MUI TextField outlined style */
.lock-input {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.23);
    color: var(--text-primary);
    padding: 14px 16px;
    border-radius: 4px;
    width: 100%;
    max-width: 220px;
    margin-bottom: 12px;
    text-align: center;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.lock-input:hover {
    border-color: var(--text-primary);
}
.lock-input:focus {
    border-color: var(--accent-blue);
    border-width: 2px;
    padding: 13px 15px;
    outline: none;
    box-shadow: none;
}
.lock-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}
body.light-mode .lock-input {
    background: transparent;
    border-color: rgba(0, 0, 0, 0.23);
    color: var(--text-primary);
}
body.light-mode .lock-input:hover {
    border-color: var(--text-primary);
}
body.light-mode .lock-input:focus {
    border-color: var(--accent-blue);
}

/* --- MUI MIGRATED: Feedback & Solution Panels ---
.feedback-panel {
    margin-top: 20px;
    padding: 15px;
    border-radius: 6px;
    display: none;
    animation: fadeIn 0.3s ease;
}
.hint-panel {
    background: rgba(225, 190, 231, 0.1);
    border: 1px solid var(--border-hint);
    color: var(--text-hint);
}
.hint-text-item { margin-bottom: 8px; font-size: 0.95rem; }
.hint-more-btn {
    background: none;
    border: none;
    color: var(--accent-blue);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.9rem;
    padding: 0;
    margin-top: 5px;
    font-family: inherit;
}
.hint-more-btn:hover { color: var(--text-primary); }

.solution-panel {
    background: rgba(102, 187, 106, 0.1);
    border: 1px solid var(--state-success);
    color: var(--text-primary);
}
.sol-header {
    color: var(--state-success);
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}
/* --- END MUI MIGRATED: Feedback & Solution Panels --- */

/* COMPACT PROGRESS BAR FOOTER */
#global-progress {
    display: none;
    background: var(--bg-icon-strip);
    border-top: 1px solid #444;
    padding: 6px 15px;
    box-sizing: border-box;
    width: 100%;
}

/* Row 1: Progress Track (no percentage) */
.progress-top-row {
    text-align: center;
    margin-bottom: 6px;
}
.percent-text {
    color: var(--text-muted);
    font-weight: bold;
    font-size: 0.8125rem;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.progress-track {
    height: 4px;
    background: #444;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}
body.light-mode .progress-track { background: #ccc; }
.progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-blue), #ba68c8);
    transition: width 0.5s ease;
}

/* Row 2: Emojis (left) | Percentage (center) | Stats (right) */
.progress-bottom-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: bold;
    gap: 10px;
    position: relative;
}

.rewards-container {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.stats-column {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    margin-left: auto;
}

.stat-box { 
    min-width: auto;
    text-align: left;
}

/* Compact Rewards */
.reward-item {
    opacity: 0.3; 
    filter: grayscale(100%);
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-primary);
    font-size: 0.75rem;
}
.reward-item span { font-size: 1.2rem; }

.reward-item.revealed {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-1px);
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.reward-item.reveal-animation {
    animation: rewardBlink 0.6s ease-in-out 3;
}

@keyframes rewardBlink {
    0% { opacity: 0.2; filter: drop-shadow(0 0 0px rgba(255, 215, 0, 0)); }
    50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8)); transform: scale(1.15); }
    100% { opacity: 0.2; filter: drop-shadow(0 0 0px rgba(255, 215, 0, 0)); }
}

/* Data Loader Overlay */
#data-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-page);
    z-index: 5000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
}
.loader-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--accent-blue);
    text-align: center;
    max-width: 500px;
    width: 90%;
}
.loader-title { font-size: 1.5rem; color: var(--accent-blue); margin-bottom: 20px; }
.file-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-top: 20px;
}
.btn-upload {
    border: 2px solid var(--text-muted);
    color: var(--text-muted);
    background-color: transparent;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    font-size: 0.9rem;
}
.btn-upload:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

select.lesson-select {
    background: var(--bg-page);
    color: var(--text-primary);
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--accent-blue);
    font-size: 1rem;
    width: 100%;
    margin-bottom: 15px;
}
.btn-load-selected {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.1rem;
    width: 100%;
}
.btn-load-selected:hover { filter: brightness(1.1); }

.divider {
    margin: 25px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #666;
}

#xml-file-input {
    position: absolute;
    font-size: 100px;
    opacity: 0;
    right: 0;
    top: 0;
    cursor: pointer;
}

/* --- LOGIN/REGISTER UI --- */
.login-section {
    padding: 2px 15px;
    margin: 10px 0;
}

.login-button-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 2px;
}

/* Hide mobile auth buttons on desktop */
.mobile-auth-buttons {
    display: none;
}

.login-btn {
    text-align: left;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.6rem;
    background: transparent;
    color: var(--accent-blue);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.register-btn {
    text-align: right;
    padding: 4px 0;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.6rem;
    background: transparent;
    color: var(--accent-blue);
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-btn:hover, .register-btn:hover {
    background: transparent;
    color: var(--accent-blue);
    opacity: 0.8;
    transform: none;
}

.user-info {
    background: rgba(100, 181, 246, 0.1);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    text-align: center;
    transition: all 0.2s;
}

.user-info:hover {
    background: rgba(100, 181, 246, 0.2);
}

.user-info p {
    margin: 5px 0;
    font-size: 0.85rem;
    color: var(--accent-blue);
}

.settings-btn {
    width: 100%;
    padding: 8px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.2s;
}

.settings-btn:hover {
    background: #42a5f5;
}

/* Login/Register Modal */
.auth-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.auth-modal.active {
    display: flex;
}

.auth-modal-content {
    background: var(--bg-card);
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid #444;
}

.auth-modal-content h2 {
    color: var(--accent-blue);
    margin-bottom: 20px;
    text-align: center;
}

.auth-modal-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
}

.auth-modal-tab {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.auth-modal-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.auth-form-group {
    display: none;
}

.auth-form-group.active {
    display: block;
}

.auth-form-group input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
}

.auth-form-group input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(100, 181, 246, 0.3);
}

.password-strength {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.8rem;
}

.password-strength label {
    flex-shrink: 0;
}

.strength-bar {
    flex: 1;
    height: 4px;
    background: #444;
    border-radius: 2px;
    overflow: hidden;
}

.strength-meter {
    height: 100%;
    width: 0%;
    transition: all 0.3s;
}

.strength-weak { background: #ef5350; width: 33%; }
.strength-fair { background: #ffa726; width: 66%; }
.strength-strong { background: #66bb6a; width: 100%; }

.strength-text {
    flex-shrink: 0;
    color: #999;
}

.auth-submit-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-blue);
    color: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.2s;
}

.auth-submit-btn:hover {
    background: #42a5f5;
    transform: scale(1.02);
}

.auth-submit-btn:disabled {
    background: #666;
    cursor: not-allowed;
    transform: none;
}

.auth-error {
    color: #ef5350;
    font-size: 0.85rem;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(239, 83, 80, 0.1);
    border-radius: 4px;
    display: none;
}

.auth-error.active {
    display: block;
}

/* Google Sign-In Button */
.google-signin-btn {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.google-signin-btn:hover {
    background: var(--hover-bg);
    border-color: var(--accent-blue);
}

.google-signin-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.google-signin-btn svg {
    flex-shrink: 0;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    padding: 0 15px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* =============================================================================
   USER PROFILE MODAL
   ============================================================================= */

.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.profile-header h2 {
    margin: 0;
    color: var(--text-color);
}

.profile-close-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.profile-close-btn:hover {
    color: var(--text-color);
}

.profile-section {
    margin-bottom: 25px;
}

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

.avatar-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-circle span {
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.profile-info-main {
    display: flex;
    flex-direction: column;
}

.profile-display-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

.profile-account-id {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.profile-sparkles {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg);
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.profile-sparkles svg {
    flex-shrink: 0;
}

.profile-sparkles span:first-of-type {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-yellow);
}

.sparkles-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.profile-form-section {
    margin-bottom: 25px;
}

.profile-field {
    margin-bottom: 15px;
    flex: 1;
}

.profile-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.profile-field input,
.profile-field select {
    width: 100%;
    padding: 10px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-color);
    font-size: 1rem;
    box-sizing: border-box;
}

.profile-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-field select {
    cursor: pointer;
}

.field-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.profile-row {
    display: flex;
    gap: 15px;
}

.profile-row .profile-field {
    flex: 1;
}

.auth-success {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #66bb6a;
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    display: none;
}

.auth-success.show {
    display: block;
}

.profile-progress-section h3 {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 15px;
}

.progress-list {
    max-height: 200px;
    overflow-y: auto;
    background: var(--card-bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.progress-loading {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

.progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
}

.progress-item:last-child {
    border-bottom: none;
}

.progress-item-name {
    font-size: 0.9rem;
    color: var(--text-color);
    flex: 1;
}

.progress-item-percent {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--accent-blue);
    color: white;
}

.progress-item-percent.complete {
    background: var(--accent-green);
}

.no-progress {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.profile-actions {
    border-top: 1px solid var(--border);
    padding-top: 20px;
}

.profile-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-color);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.profile-action-btn:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.profile-action-btn svg {
    flex-shrink: 0;
}

.google-link-btn,
.google-unlink-btn {
    border-color: #4285f4;
    color: #4285f4;
}

.google-link-btn:hover {
    background: rgba(66, 133, 244, 0.1);
    border-color: #4285f4;
    color: #4285f4;
}

.google-unlink-btn:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.change-password-btn {
    border-color: #17a2b8;
    color: #17a2b8;
}

.change-password-btn:hover {
    background: rgba(23, 162, 184, 0.1);
    border-color: #17a2b8;
    color: #17a2b8;
}

.logout-btn:hover {
    background: rgba(255, 100, 100, 0.1);
    border-color: #ff6b6b;
    color: #ff6b6b;
}

#google-link-section {
    margin-bottom: 12px;
}

/* Set Password Modal */
.set-password-form {
    padding: 0 20px 20px;
}

.set-password-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.password-requirements {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 8px 0 16px;
}

/* Profile Modal Responsive */
@media (max-width: 500px) {
    .profile-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Progress Save Banner */
.progress-banner {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    padding: 6px 8px;
    color: white;
    font-weight: bold;
    border-radius: 0;
    margin: 0;
    font-size: 0.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.progress-banner.saved {
    background: linear-gradient(135deg, #66bb6a, #4caf50);
}

.progress-banner .banner-close-btn {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.progress-banner .banner-close-btn:hover {
    opacity: 0.8;
}

body.light-mode .auth-modal-content {
    background: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .auth-form-group input {
    background: #fff;
    border-color: #ddd;
    color: #000;
}

/* =============================================================================
   CLASSES SYSTEM STYLES
   ============================================================================= */

/* --- Classes Section in Profile --- */
.profile-classes-section {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 10px;
}

.profile-classes-section h3 {
    margin-bottom: 15px;
    color: var(--accent-blue);
}

.classes-list-container {
    max-height: 300px;
    overflow-y: auto;
}

.classes-loading, .classes-error, .no-classes {
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.classes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

/* --- Class Card --- */
.class-card {
    background: var(--bg-card);
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
}

.class-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.class-card-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.student-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(100, 181, 246, 0.15);
    padding: 3px 8px;
    border-radius: 12px;
}

.class-card-code {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.class-card-code strong {
    color: var(--accent-blue);
    font-family: monospace;
}

.class-card-info {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.class-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.class-card-actions button {
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.view-roster-btn {
    background: var(--accent-blue);
    color: white;
}

.view-roster-btn:hover {
    background: #5aa5e6;
}

.delete-class-btn, .leave-class-btn {
    background: transparent;
    border: 1px solid var(--state-error) !important;
    color: var(--state-error);
}

.delete-class-btn:hover, .leave-class-btn:hover {
    background: rgba(239, 83, 80, 0.1);
}

/* --- Create/Join Class Buttons --- */
.create-class-btn, .join-class-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 2px dashed var(--accent-blue);
    color: var(--accent-blue);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.create-class-btn:hover, .join-class-btn:hover {
    background: rgba(100, 181, 246, 0.1);
    border-style: solid;
}

/* --- Copy Button --- */
.copy-btn-small {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.copy-btn-small:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* --- Join Class Modal --- */
.join-class-form {
    padding: 20px;
}

.join-class-instruction {
    color: var(--text-muted);
    margin-bottom: 15px;
    text-align: center;
}

.class-code-input-group input {
    width: 100%;
    padding: 15px;
    font-size: 1.2rem;
    text-align: center;
    font-family: monospace;
    letter-spacing: 1px;
    background: var(--bg-card);
    border: 2px solid #444;
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.class-code-input-group input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.class-code-input-group input::placeholder {
    color: var(--text-muted);
    font-size: 1rem;
}

#join-class-preview {
    margin: 15px 0;
}

.class-preview-card {
    background: rgba(100, 181, 246, 0.1);
    border: 1px solid var(--accent-blue);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}

.class-preview-card h4 {
    margin: 0 0 8px 0;
    color: var(--text-primary);
}

.class-preview-card p {
    margin: 4px 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* --- Create Class Modal --- */
.create-class-form {
    padding: 20px;
}

.class-code-result {
    background: rgba(102, 187, 106, 0.1);
    border: 1px solid var(--state-success);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin: 15px 0;
}

.class-code-result > p:first-child {
    margin: 0 0 10px 0;
    color: var(--text-muted);
}

.class-code-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg-card);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.class-code {
    font-size: 1.5rem;
    font-family: monospace;
    font-weight: bold;
    color: var(--accent-blue);
    letter-spacing: 2px;
}

.copy-code-btn {
    background: transparent;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.copy-code-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.class-code-hint {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 10px 0;
}

.class-invite-link {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.class-invite-link a {
    color: var(--accent-blue);
    word-break: break-all;
}

/* --- Roster Modal --- */
.roster-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid #333;
}

.roster-code-label {
    color: var(--text-muted);
}

.roster-code-label strong {
    color: var(--accent-blue);
    font-family: monospace;
}

.roster-add-section {
    padding: 15px 20px;
    border-bottom: 1px solid #333;
}

.roster-add-section h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.roster-add-row {
    display: flex;
    gap: 10px;
}

.roster-add-row input {
    flex: 1;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid #444;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.roster-add-row input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.roster-add-btn {
    padding: 10px 16px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}

.roster-add-btn:hover {
    background: #5aa5e6;
}

.roster-add-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.roster-list-section {
    padding: 15px 20px;
    max-height: 400px;
    overflow-y: auto;
}

.roster-list-section h4 {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.roster-loading, .roster-error, .no-students {
    color: var(--text-muted);
    text-align: center;
    padding: 30px;
}

/* --- Roster Table --- */
.roster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.roster-table th,
.roster-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #333;
}

.roster-table th {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.roster-table td {
    color: var(--text-primary);
}

.roster-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.roster-student {
    cursor: pointer;
    transition: all 0.2s;
}

.roster-student:hover td {
    background: rgba(74, 144, 226, 0.1);
}

.remove-student-btn {
    padding: 4px 10px;
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid var(--state-error);
    color: var(--state-error);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-student-btn:hover {
    background: rgba(239, 83, 80, 0.1);
}

/* --- Light Mode Overrides for Classes --- */
body.light-mode .class-card {
    background: #fff;
    border-color: #ddd;
}

body.light-mode .class-code-input-group input {
    background: #fff;
    border-color: #ddd;
}

body.light-mode .class-code-box {
    background: #fff;
}

body.light-mode .roster-info {
    background: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .roster-add-row input {
    background: #fff;
    border-color: #ddd;
}

body.light-mode .roster-table th,
body.light-mode .roster-table td {
    border-color: #ddd;
}

body.light-mode .roster-table tr:hover td {
    background: rgba(0, 0, 0, 0.03);
}

/* =============================================================================
   ASSIGNMENTS STYLES
   ============================================================================= */

/* Roster Assignments Section */
.roster-assignments-section {
    padding: 0 20px;
    margin-bottom: 20px;
}

.roster-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.roster-section-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.assign-lesson-btn {
    padding: 6px 12px;
    font-size: 0.8rem;
    background: var(--accent-blue);
    border: none;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.assign-lesson-btn:hover {
    background: #42a5f5;
    transform: translateY(-1px);
}

/* Assignment Items in Roster */
.assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.assignment-item.assignment-overdue {
    border-color: rgba(239, 83, 80, 0.3);
    background: rgba(239, 83, 80, 0.05);
}

.assignment-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assignment-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
}

.assignment-due {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.assignment-due.overdue {
    color: var(--state-error);
    font-weight: 500;
}

.assignment-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.assignment-edit-btn,
.assignment-delete-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    opacity: 0.6;
    transition: all 0.2s;
}

.assignment-edit-btn:hover,
.assignment-delete-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.assignment-edit-btn:hover {
    filter: brightness(1.2);
}

.assignment-delete-btn:hover {
    filter: brightness(1.2);
}

.no-assignments {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 16px;
    font-style: italic;
}

/* Assign Lesson Modal */
.assign-lesson-form {
    padding: 0 20px 20px;
}

.assign-lesson-form select {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.assign-lesson-form select option,
.assign-lesson-form select optgroup {
    background: #2a2a2a;
    color: #e0e0e0;
}

.assign-lesson-form select optgroup {
    font-weight: bold;
    color: var(--accent-blue);
}

body.light-mode .assign-lesson-form select option,
body.light-mode .assign-lesson-form select optgroup {
    background: #fff;
    color: #333;
}

body.light-mode .assign-lesson-form select optgroup {
    color: #1976d2;
}

.assign-lesson-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.assign-lesson-info strong {
    color: var(--accent-blue);
}

/* Student Assignments Section in Profile */
.profile-assignments-section {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
}

.assignments-list-container {
    max-height: 300px;
    overflow-y: auto;
}

.assignments-loading {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 16px;
}

/* Student Assignment Items */
.student-assignment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.student-assignment-item:hover {
    background: rgba(100, 181, 246, 0.1);
    border-color: rgba(100, 181, 246, 0.3);
}

.student-assignment-item.assignment-complete {
    opacity: 0.7;
    background: rgba(76, 175, 80, 0.1);
}

.student-assignment-item.assignment-complete:hover {
    opacity: 1;
}

.student-assignment-item.assignment-overdue {
    border-color: rgba(239, 83, 80, 0.3);
    background: rgba(239, 83, 80, 0.08);
}

.student-assignment-item.assignment-in-progress {
    border-color: rgba(255, 193, 7, 0.3);
}

.assignment-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.assignment-status-icon {
    font-size: 1.2rem;
}

.assignment-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.assignment-details .assignment-name {
    font-size: 0.95rem;
}

.assignment-class {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.assignment-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.assignment-meta .assignment-due {
    font-size: 0.75rem;
}

.assignment-progress {
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-weight: 500;
}

/* Teacher Dashboard Tabs */
.roster-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-subtle);
    margin: 0 20px 16px;
    padding-bottom: 0;
}

.roster-tab {
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.roster-tab:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.roster-tab.active {
    color: var(--accent-blue);
    border-bottom-color: var(--accent-blue);
}

.roster-tab-content {
    display: none;
    padding: 0 20px 20px;
    max-height: 450px;
    overflow-y: auto;
}

.roster-tab-content.active {
    display: block;
}

/* Analytics Section */
.analytics-filters {
    margin-bottom: 16px;
}

.analytics-filters select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.analytics-filters select option {
    background: #2a2a2a;
    color: #e0e0e0;
}

body.light-mode .analytics-filters select option {
    background: #fff;
    color: #333;
}

.analytics-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.analytics-card {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    border: 1px solid var(--border-subtle);
}

.analytics-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-blue);
}

.analytics-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.analytics-student-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analytics-student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s;
}

.analytics-student-row:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.analytics-student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.analytics-student-name {
    font-weight: 500;
}

.analytics-student-stats {
    display: flex;
    gap: 16px;
    align-items: center;
}

.analytics-stat {
    text-align: center;
}

.analytics-stat-value {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

.analytics-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.analytics-stat-value.complete {
    color: var(--state-success);
}

.analytics-stat-value.incomplete {
    color: var(--text-muted);
}

.analytics-stat-value.overdue {
    color: var(--state-error);
}

/* Question Statistics Section */
.question-stats-section {
    margin-bottom: 20px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.question-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.question-stats-header:hover {
    background: var(--bg-hover);
}

.question-stats-header h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
}

.toggle-icon {
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.toggle-icon.collapsed {
    transform: rotate(-90deg);
}

.question-stats-content {
    padding: 0 16px 16px;
    max-height: 300px;
    overflow-y: auto;
}

.question-stats-content.collapsed {
    display: none;
}

.question-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-main);
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid var(--border-subtle);
}

.question-stat-row:last-child {
    margin-bottom: 0;
}

.question-stat-name {
    font-weight: 500;
    font-size: 0.9rem;
    min-width: 80px;
}

.question-stat-bars {
    flex: 1;
    margin: 0 16px;
}

.question-stat-bar {
    height: 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.question-stat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.question-stat-bar.dual-bar {
    display: flex;
}

.question-stat-bar-fill.first-try {
    background: var(--state-success);
}

.question-stat-bar-fill.not-first-try {
    background: var(--state-error);
}

.question-stats-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.question-stat-details {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 150px;
    justify-content: flex-end;
}

.question-stat-detail {
    text-align: center;
}

.question-stat-detail-value {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

.question-stat-detail-label {
    font-size: 0.65rem;
}

.analytics-section-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Student Details Modal */
.student-details-content {
    padding: 0 20px 20px;
}

.student-details-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.student-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    flex-shrink: 0;
}

.student-avatar-large {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
}

.student-info-main h3 {
    margin: 0 0 4px;
    font-size: 1.2rem;
}

.student-detail-email {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.student-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.student-stat-card {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
}

.student-stat-card .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.student-stat-card .stat-value {
    font-size: 1.1rem;
    font-weight: 600;
}

.stat-value-edit {
    display: flex;
    gap: 8px;
    align-items: center;
}

.stat-value-edit input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 1rem;
    width: 80px;
}

.stat-save-btn {
    padding: 6px 12px;
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.stat-save-btn:hover {
    filter: brightness(1.1);
}

.student-actions-section {
    margin-bottom: 20px;
}

.student-actions-section h4 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.student-action-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.student-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
}

.student-progress-section h4 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.student-progress-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    margin-bottom: 8px;
}

.student-progress-info {
    flex: 1;
}

.student-progress-name {
    display: block;
    font-weight: 500;
    font-size: 0.9rem;
}

.student-progress-stats {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.student-progress-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.progress-percent {
    font-weight: 600;
    min-width: 45px;
    text-align: right;
}

.progress-percent.complete {
    color: var(--state-success);
}

.reset-progress-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--state-error);
    color: var(--state-error);
    border-radius: 4px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-progress-btn:hover {
    background: var(--state-error);
    color: white;
}

/* Reset Progress Modal */
.reset-progress-content {
    padding: 0 20px 20px;
}

.reset-warning {
    color: var(--state-error);
    font-weight: 500;
    margin-bottom: 8px;
}

.reset-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.cancel-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
}

.danger-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--state-error);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.danger-btn:hover {
    filter: brightness(1.1);
}

/* Toast Message */
.toast-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(100, 181, 246, 0.3);
}

.toast-message.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Light Mode Overrides for Assignments */
body.light-mode .assignment-item {
    background: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .assignment-item.assignment-overdue {
    background: rgba(239, 83, 80, 0.08);
    border-color: rgba(239, 83, 80, 0.3);
}

body.light-mode .student-assignment-item {
    background: #f5f5f5;
}

body.light-mode .student-assignment-item:hover {
    background: rgba(100, 181, 246, 0.15);
}

body.light-mode .student-assignment-item.assignment-complete {
    background: rgba(76, 175, 80, 0.1);
}

body.light-mode .student-assignment-item.assignment-overdue {
    background: rgba(239, 83, 80, 0.08);
}

body.light-mode .toast-message {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ===========================================
   STUDENT DASHBOARD STYLES - REMOVED (Phase 14E)
   =========================================== */
/* These styles were removed in Phase 14E (January 2026).
   MUI StudentDashboard component now handles all dashboard UI.
   ~730 lines of CSS removed.
   Archived vanilla JS code: chatbot files/archived/VANILLA_JS_DASHBOARD.js */

/* ==========================================================================
   TEACHER DASHBOARD STYLES - REMOVED (Phase 14E)
   ========================================================================== */
/* These styles were removed in Phase 14E (January 2026).
   MUI TeacherDashboard component now handles all teacher UI.
   ~700 lines of teacher-specific CSS removed.
   NOTE: Teacher Modal styles kept below - still used by practice/lessons modals. */

/* Teacher Modals - KEPT (used by practice-mode-modal and lessons-modal) */
.teacher-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.teacher-modal.active {
    display: flex;
    opacity: 1;
}

.teacher-modal-content {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.teacher-modal.active .teacher-modal-content {
    transform: scale(1);
}

.student-modal-content {
    max-width: 600px;
}

.teacher-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-page);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.teacher-modal-close:hover {
    background: var(--state-error);
    color: white;
}

.teacher-modal-content h2 {
    margin: 0 0 20px 0;
    color: var(--text-primary);
}

/* Student Modal Specific */
.student-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.student-modal-avatar {
    width: 60px;
    height: 60px;
    background: var(--bg-page);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.student-modal-info h2 {
    margin: 0 0 8px 0;
    font-size: 1.4rem;
}

.student-modal-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.student-modal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.modal-stat-item {
    background: var(--bg-page);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.modal-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.modal-edit-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    font-size: 0.8rem;
}

.modal-edit-btn:hover {
    opacity: 1;
}

.student-modal-section {
    margin-bottom: 20px;
}

.student-modal-section h3 {
    margin: 0 0 12px 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.modal-assignments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.modal-assignment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-page);
    border-radius: 8px;
}

.modal-assignment-name {
    font-weight: 500;
    color: var(--text-primary);
}

.modal-assignment-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-stars {
    font-size: 0.9rem;
}

.modal-percent {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.modal-assignment-details {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.modal-notes-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: inherit;
    resize: vertical;
}

.modal-save-notes-btn {
    margin-top: 8px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: var(--accent-blue);
    color: white;
    cursor: pointer;
    transition: opacity 0.2s;
}

.modal-save-notes-btn:hover {
    opacity: 0.9;
}

.student-modal-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.modal-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Create Assignment Form */
.teacher-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-group input,
.form-group select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: 1rem;
}

.teacher-submit-btn {
    margin-top: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--accent-blue);
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: opacity 0.2s;
}

.teacher-submit-btn:hover {
    opacity: 0.9;
}

/* Export Options */
.export-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.export-option-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: var(--bg-page);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.export-option-btn:hover {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.1);
}

.export-option-btn span:first-child {
    font-size: 1.5rem;
}

.export-option-btn div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-option-btn strong {
    font-size: 1rem;
}

.export-option-btn small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Leaderboard Modal */
.leaderboard-subtitle {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-page);
    border-radius: 8px;
}

.leaderboard-item.top-three {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), var(--bg-page));
}

.leaderboard-rank {
    min-width: 32px;
    font-size: 1.2rem;
    text-align: center;
}

.leaderboard-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
}

.leaderboard-sparkles {
    color: var(--text-muted);
}

/* Practice Mode Modal */
.practice-modal-content {
    max-width: 500px;
}

.practice-modal-subtitle {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.practice-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 350px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.practice-lesson-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-page);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.practice-lesson-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.practice-lesson-item.selected {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.1);
}

.practice-lesson-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.practice-lesson-info {
    flex: 1;
}

.practice-lesson-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.practice-lesson-class {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.practice-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.practice-select-all-btn {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.practice-select-all-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.practice-start-btn {
    padding: 10px 24px;
    background: var(--accent-blue);
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
}

.practice-start-btn:hover:not(:disabled) {
    background: #42a5f5;
}

.practice-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Practice Hints Toggle */
.practice-hints-toggle-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.practice-hints-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.practice-hints-checkbox {
    display: none;
}

.practice-hints-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    transition: background 0.2s;
}

.practice-hints-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
}

.practice-hints-checkbox:checked + .practice-hints-slider {
    background: var(--accent-blue);
}

.practice-hints-checkbox:checked + .practice-hints-slider::before {
    transform: translateX(16px);
}

.practice-hints-text {
    user-select: none;
}

.practice-hints-warning {
    font-size: 0.8rem;
    color: #ffa726;
    display: none;
}

.practice-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.practice-modal-buttons {
    display: flex;
    gap: 12px;
}

body.light-mode .practice-hints-slider {
    background: rgba(0, 0, 0, 0.15);
}

body.light-mode .practice-hints-warning {
    color: #e65100;
}

/* View All Lessons Modal */
.lessons-modal-content {
    max-width: 500px;
}

.lessons-modal-subtitle {
    color: var(--text-muted);
    margin-bottom: 16px;
    font-size: 0.95rem;
}

.lessons-modal-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.lessons-modal-class {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lessons-modal-class-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lessons-modal-class-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lessons-modal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    background: var(--bg-page);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.lessons-modal-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Practice mode selectable lesson items */
.lessons-modal-item.practice-selectable,
.lessons-modal-item.lesson-selectable {
    border: 2px solid transparent;
    justify-content: flex-start;
}

.lessons-modal-item.practice-selectable .lessons-modal-item-name,
.lessons-modal-item.lesson-selectable .lessons-modal-item-name {
    flex: 1;
}

.lessons-modal-item.practice-selectable .lessons-modal-item-topic,
.lessons-modal-item.lesson-selectable .lessons-modal-item-topic {
    margin-left: auto;
}

.lessons-modal-item.practice-selectable.selected,
.lessons-modal-item.lesson-selectable.selected {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.15);
}

.lessons-modal-item-name {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.lessons-modal-item-topic {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ============================================
   PRACTICE MODE STYLES
   ============================================ */

#practice-mode-view.active {
    overflow: visible;
}

.practice-mode-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Practice Header */
.practice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.practice-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.practice-exit-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.practice-exit-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.practice-title {
    font-size: 1.5rem;
    color: var(--text-primary);
    margin: 0;
}

.practice-header-right {
    display: flex;
    align-items: center;
}

.practice-sparkle-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.practice-sparkle-icon {
    font-size: 1.2rem;
}

.practice-sparkle-text {
    font-size: 0.9rem;
    color: #ffd700;
}

.practice-sparkle-remaining {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Practice Confirmation Modal */
.practice-confirm-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.practice-confirm-overlay.active {
    display: flex;
}

.practice-confirm-dialog {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.practice-confirm-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.practice-confirm-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.practice-confirm-message {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 25px;
}

.practice-confirm-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.practice-confirm-btn {
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.practice-confirm-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.practice-confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.practice-confirm-btn.confirm {
    background: var(--accent-blue);
    color: white;
}

.practice-confirm-btn.confirm:hover {
    background: #1e88e5;
    transform: translateY(-1px);
}

/* Practice mode container - no extra padding needed */
.practice-mode-container {
    padding-bottom: 20px;
}

/* Question Card */
.practice-question-container {
    margin-bottom: 20px;
}

.practice-question-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 30px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.practice-question-card.answered.correct {
    border-color: rgba(102, 187, 106, 0.5);
    background: linear-gradient(135deg, var(--bg-card), rgba(102, 187, 106, 0.05));
}

.practice-question-card.answered.incorrect {
    border-color: rgba(239, 83, 80, 0.5);
    background: linear-gradient(135deg, var(--bg-card), rgba(239, 83, 80, 0.05));
}

.practice-question-type-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.practice-question-type-badge.foundation {
    background: rgba(100, 181, 246, 0.15);
    color: #64b5f6;
}

.practice-question-type-badge.mastery {
    background: rgba(255, 167, 38, 0.15);
    color: #ffa726;
}

.practice-question-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.practice-question-image {
    text-align: center;
    margin-bottom: 24px;
}

.practice-question-image img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
}

/* Multiple Choice */
.practice-choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.practice-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-page);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    color: var(--text-primary);
    font-size: 1rem;
}

.practice-choice:hover:not(:disabled) {
    border-color: var(--accent-blue);
    background: rgba(100, 181, 246, 0.05);
}

.practice-choice:disabled {
    cursor: default;
}

.practice-choice.correct {
    border-color: #66bb6a;
    background: rgba(102, 187, 106, 0.15);
}

.practice-choice.incorrect {
    border-color: #ef5350;
    background: rgba(239, 83, 80, 0.15);
}

.practice-choice.show-correct {
    border-color: #66bb6a;
    background: rgba(102, 187, 106, 0.1);
}

.choice-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.practice-choice.correct .choice-letter {
    background: #66bb6a;
    color: white;
}

.practice-choice.incorrect .choice-letter {
    background: #ef5350;
    color: white;
}

.choice-text {
    flex: 1;
}

/* Free Response */
.practice-frq {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.practice-frq-input-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.practice-frq-label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.practice-mathquill-field {
    flex: 1;
    background: var(--bg-page);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    min-height: 44px;
}

.practice-mathquill-field .mq-editable-field {
    color: var(--text-primary);
}

.practice-submit-btn {
    align-self: flex-start;
    padding: 12px 24px;
    background: var(--accent-blue);
    border: none;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
}

.practice-submit-btn:hover:not(:disabled) {
    background: #42a5f5;
}

.practice-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.practice-frq-result {
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
}

.practice-frq-result.correct {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
}

.practice-frq-result.incorrect {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}

/* Hint Section */
.practice-hint-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.practice-hint-btn {
    background: transparent;
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.practice-hint-btn:hover {
    background: rgba(255, 193, 7, 0.1);
}

.practice-hint-content {
    margin-top: 12px;
    padding: 16px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 8px;
    border-left: 3px solid #ffc107;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.practice-hint-content .hint-item {
    margin-bottom: 8px;
}

.practice-hint-content .hint-item:last-child {
    margin-bottom: 0;
}

/* Explanation after answering */
.practice-explanation {
    margin-top: 20px;
    padding: 16px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* SORT Practice Answer */
.practice-sort-answer {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* MATCH Practice Answer */
.practice-match-answer {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.practice-match-answer ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.practice-match-answer li {
    padding: 4px 0;
}

/* SORT Item Controls in Practice Mode */
.sort-item-controls {
    display: flex;
    gap: 4px;
    margin-right: 8px;
}

.sort-move-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.sort-move-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.sort-item {
    display: flex;
    align-items: center;
    padding: 10px;
    background: var(--bg-card);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.sort-item.correct {
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.1);
}

.sort-item.wrong {
    border-color: rgba(239, 83, 80, 0.5);
    background: rgba(239, 83, 80, 0.1);
}

/* MATCH in Practice Mode - Correct/Wrong Styling */
.match-prompt-row.match-row-correct {
    border-color: rgba(76, 175, 80, 0.5);
    background: rgba(76, 175, 80, 0.1);
}

.match-prompt-row.match-row-wrong {
    border-color: rgba(239, 83, 80, 0.5);
    background: rgba(239, 83, 80, 0.1);
}

.practice-asnr-answer {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.practice-tfr-answer {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 8px;
    border-left: 3px solid #4caf50;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* MSQ (Multiple Select Questions) */
.practice-choices.msq {
    gap: 10px;
}

.practice-choice.msq-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.practice-choice.msq-choice .choice-checkbox {
    font-size: 1.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.practice-choice.msq-choice.selected {
    background: rgba(33, 150, 243, 0.15);
    border-color: var(--accent-blue);
}

/* Navigation */
.practice-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    margin-bottom: 20px;
}

.practice-navigation .practice-progress-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.practice-nav-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.practice-nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

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

.practice-nav-btn.primary {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.practice-nav-btn.primary:hover:not(:disabled) {
    background: #42a5f5;
}

.practice-nav-btn.skip {
    color: var(--text-muted);
    border-color: transparent;
}

.practice-nav-btn.skip:hover {
    color: var(--text-primary);
}

/* Summary Screen */
.practice-summary {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.practice-summary-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    width: 100%;
}

.practice-summary-title {
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0 0 32px 0;
}

.practice-summary-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.practice-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.practice-summary-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-blue);
}

.practice-summary-stat-label {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.practice-summary-breakdown {
    text-align: left;
    background: var(--bg-page);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
}

.practice-summary-breakdown h3 {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.practice-summary-lesson {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.practice-summary-lesson:last-child {
    border-bottom: none;
}

.practice-summary-lesson-name {
    color: var(--text-primary);
    font-weight: 500;
}

.practice-summary-lesson-score {
    color: var(--text-muted);
}

.practice-summary-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.practice-summary-btn {
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.practice-summary-btn.primary {
    background: var(--accent-blue);
    border: none;
    color: white;
}

.practice-summary-btn.primary:hover {
    background: #42a5f5;
}

.practice-summary-btn.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

.practice-summary-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Practice Mode - Question Card Override */
.practice-mode-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 24px;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.practice-mode-card.answered-correct {
    border-color: rgba(102, 187, 106, 0.5);
}

.practice-mode-card.answered-wrong {
    border-color: rgba(239, 83, 80, 0.5);
}

/* --- MUI MIGRATED: Practice Mode Card Overrides ---
.practice-mode-card .q-body {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 16px 0;
}

.practice-mode-card .options-grid {
    margin-bottom: 16px;
}

.practice-mode-card .check-btn {
    margin-top: 8px;
}

.practice-mode-card .feedback-panel {
    margin-top: 16px;
}
/* --- END MUI MIGRATED: Practice Mode Card Overrides --- */

/* FRQ Answer Display */
.practice-frq-answer,
.frq-answer-reveal,
.fib-answer-reveal {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(239, 83, 80, 0.1);
    border-left: 3px solid #ef5350;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.fib-answer-reveal ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.fib-answer-reveal li {
    margin-bottom: 4px;
}

/* FIB Answers Display */
.practice-fib-answers {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(239, 83, 80, 0.1);
    border-left: 3px solid #ef5350;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.practice-fib-answers ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.practice-fib-answers li {
    margin-bottom: 4px;
}

/* Practice FIB Inputs */
.practice-fib-input {
    display: inline-block;
    vertical-align: middle;
}

.practice-fib-input.fib-correct {
    border-color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.1) !important;
}

.practice-fib-input.fib-wrong {
    border-color: #ef5350 !important;
    background: rgba(239, 83, 80, 0.1) !important;
}

/* Practice Mode Responsive */
@media (max-width: 600px) {
    .practice-mode-container {
        padding: 16px;
    }
    
    .practice-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .practice-title {
        font-size: 1.2rem;
    }
    
    .practice-question-card {
        padding: 20px;
    }
    
    .practice-summary-stats {
        gap: 24px;
    }
    
    .practice-summary-actions {
        flex-direction: column;
    }
}

/* Responsive Design for Teacher Dashboard */
@media (max-width: 1100px) {
    .teacher-dashboard-row {
        grid-template-columns: 1fr;
    }
    
    .teacher-sidebar-column {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .teacher-sidebar-column .teacher-section {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 900px) {
    .teacher-analytics-row {
        grid-template-columns: 1fr;
    }
    
    .teacher-section-header {
        flex-wrap: wrap;
    }
    
    .teacher-table-controls {
        width: 100%;
        margin-top: 12px;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .teacher-dashboard-header {
        flex-direction: column;
        text-align: center;
    }
    
    .teacher-header-right {
        width: 100%;
        justify-content: center;
    }
    
    .teacher-class-cards {
        flex-direction: column;
    }
    
    .teacher-class-card {
        max-width: 100%;
    }
    
    .time-filter-buttons {
        margin-left: 0;
        margin-top: 10px;
    }
    
    .student-modal-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Light Mode for Teacher Dashboard */
body.light-mode .teacher-dashboard-header,
body.light-mode .teacher-section {
    background: #ffffff;
    border: 1px solid #e0e0e0;
}

body.light-mode .teacher-class-card,
body.light-mode .teacher-assignment-item,
body.light-mode .teacher-action-btn,
body.light-mode .teacher-notification,
body.light-mode .teacher-search-input,
body.light-mode .teacher-filter-select,
body.light-mode .teacher-class-select,
body.light-mode .missed-question-item,
body.light-mode .activity-item,
body.light-mode .modal-stat-item,
body.light-mode .modal-assignment-item,
body.light-mode .modal-notes-textarea,
body.light-mode .leaderboard-item,
body.light-mode .export-option-btn,
body.light-mode .form-group input,
body.light-mode .form-group select {
    background: #f5f5f5;
    border-color: #e0e0e0;
}

body.light-mode .teacher-modal-content {
    background: #ffffff;
}

body.light-mode .teacher-students-table th {
    background: #f5f5f5;
}

body.light-mode .teacher-create-btn {
    border-color: #ccc;
}

body.light-mode .teacher-refresh-btn {
    border-color: #ccc;
}

body.light-mode .load-more-btn {
    background: #f5f5f5;
}

/* =============================================================================
   STANDALONE VIEW PAGES (Lesson Progress, My Assignments)
   ============================================================================= */

#lesson-progress-view,
#my-assignments-view,
#all-lessons-view,
#practice-select-view {
    padding: 30px 20px;
}

.standalone-view-container {
    max-width: 650px;
    margin: 0 auto;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 16px;
}

body.light-mode .standalone-view-container {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.standalone-view-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.standalone-view-header h1 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.standalone-view-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}

/* Override progress-list max-height for standalone view */
.standalone-view-card .progress-list {
    max-height: none;
    overflow-y: visible;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Progress list styling */
.progress-class-group {
    margin-bottom: 20px;
}

.progress-class-group:last-child {
    margin-bottom: 0;
}

.progress-class-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.standalone-view-card .progress-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 6px;
    background: var(--bg-page);
    border-radius: 8px;
    border: none;
}

.standalone-view-card .progress-item:last-child {
    margin-bottom: 0;
}

.standalone-view-card .progress-item.clickable {
    cursor: pointer;
    transition: background 0.15s ease;
}

.standalone-view-card .progress-item.clickable:hover {
    background: var(--hover-bg);
}

.standalone-view-card .progress-item-name {
    color: var(--text-primary);
    font-weight: 500;
}

.standalone-view-card .progress-item-topic {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.standalone-view-card .progress-item-percent {
    background: var(--text-muted);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    min-width: 45px;
    text-align: center;
}

.standalone-view-card .progress-item-percent.in-progress {
    background: var(--accent-blue);
}

.standalone-view-card .progress-item-percent.complete {
    background: var(--accent-green);
}

.standalone-view-card .no-progress,
.standalone-view-card .progress-loading,
.standalone-view-card .assignments-loading {
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

/* =============================================================================
   SETTINGS VIEW - REMOVED (Phase 14E)
   ============================================================================= */
/* These styles were removed in Phase 14E (January 2026).
   MUI SettingsPage component now handles all settings UI.
   ~170 lines of settings-specific CSS removed.
   NOTE: Developer Menu Modal styles kept below - still used by dev-menu-modal. */

/* Developer Menu Modal (Legacy HTML version - MUI version now primary) */
#dev-menu-modal .auth-modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    min-width: 350px;
    height: auto !important;
    padding: 20px 25px 25px 25px;
    display: flex;
    flex-direction: column;
}

#dev-menu-modal .profile-header {
    margin-bottom: 15px;
    padding-bottom: 15px;
}

#dev-menu-modal .dev-menu-content {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    flex: 1;
}

.profile-dev-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-color);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.profile-dev-btn:hover {
    background: rgba(100, 181, 246, 0.1);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.profile-dev-btn svg {
    flex-shrink: 0;
}

.dev-menu-content .profile-dev-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 10px 12px;
    font-size: 0.85rem;
    gap: 8px;
}

.dev-menu-content .profile-dev-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Debug category toggles */
.debug-cat-row {
    user-select: none;
}

.debug-cat-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.light-mode .debug-cat-row:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.debug-cat-checkbox {
    accent-color: #FFC107;
}

/* Settings button active state in sidebar */
.sidebar-footer-item.active {
    background: rgba(100, 181, 246, 0.15);
    color: var(--accent-blue);
}

.sidebar-footer-item.active svg {
    stroke: var(--accent-blue);
}

/* Light mode settings - REMOVED: Settings view styles removed in Phase 14E */

body.light-mode .sidebar-footer-item.active {
    background: rgba(100, 181, 246, 0.12);
}

/* Mobile responsive for settings - REMOVED: Settings view styles removed in Phase 14E */

/* --- REPORT PROBLEM MODAL STYLES --- */
.report-field {
    margin-bottom: 15px;
}

.report-field label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.report-select,
.report-input,
.report-textarea {
    width: 100%;
    padding: 10px 12px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.report-select:focus,
.report-input:focus,
.report-textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 8px rgba(100, 181, 246, 0.25);
}

.report-textarea {
    resize: vertical;
    min-height: 100px;
}

.report-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 35px;
}

.report-context-info {
    background: #252525;
    border: 1px solid #333;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
}

.report-context-info .context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: background 0.2s;
}

.report-context-info .context-header:hover {
    background: #2a2a2a;
}

.report-context-info .context-toggle {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.report-context-info .context-toggle.open {
    transform: rotate(180deg);
}

.report-context-info .context-details {
    padding: 10px 12px;
    border-top: 1px solid #333;
    font-size: 0.8rem;
}

.report-context-info .context-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: var(--text-muted);
}

.report-context-info .context-item span:first-child {
    color: var(--text-secondary);
}

.report-context-info .context-item span:last-child {
    font-family: monospace;
    color: var(--text-primary);
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-reference {
    background: #252525;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.report-reference span:last-child {
    font-size: 1.2rem;
}

/* Light mode for report modal */
body.light-mode .report-select,
body.light-mode .report-input,
body.light-mode .report-textarea {
    background: #fff;
    border-color: #ccc;
}

body.light-mode .report-context-info {
    background: #f5f5f5;
    border-color: #ddd;
}

body.light-mode .report-context-info .context-header:hover {
    background: #eee;
}

body.light-mode .report-context-info .context-details {
    border-color: #ddd;
}

body.light-mode .report-reference {
    background: #f5f5f5;
    border-color: #ddd;
}


/* ============================================
   REACT COMPONENTS STYLES
   Styles for React-rendered question cards
   ============================================ */

/* Sort Question Type */
.sort-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.sort-label {
    font-size: 0.9rem;
    color: var(--text-secondary, #888);
    font-style: italic;
    padding: 4px 8px;
}

.sort-label-start {
    border-bottom: 1px dashed var(--border-color, #444);
}

.sort-label-end {
    border-top: 1px dashed var(--border-color, #444);
}

.sort-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card-bg, #2a2a2a);
    border: 2px solid var(--border-color, #444);
    border-radius: 8px;
    cursor: grab;
    transition: all 0.15s ease;
    user-select: none;
}

.sort-item:hover:not(.sort-item-disabled) {
    border-color: var(--accent-blue, #64b5f6);
    background: var(--card-hover-bg, #333);
}

.sort-item:active:not(.sort-item-disabled) {
    cursor: grabbing;
}

.sort-item-dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

.sort-item-dragover {
    border-color: var(--accent-blue, #64b5f6);
    border-style: dashed;
}

.sort-item-correct {
    background: var(--success-bg, rgba(46, 204, 113, 0.15));
    border-color: var(--success-color, #2ecc71);
}

.sort-item-wrong {
    background: var(--error-bg, rgba(231, 76, 60, 0.15));
    border-color: var(--error-color, #e74c3c);
}

.sort-item-disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.sort-item-handle {
    color: var(--text-secondary, #888);
    font-size: 1.2rem;
    line-height: 1;
}

.sort-item-content {
    flex: 1;
}

/* --- MUI MIGRATED: React Component Panel Styles ---
/* Hint Panel */
.hint-panel {
    margin-top: 16px;
    padding: 14px;
    background: rgba(225, 190, 231, 0.1);
    border: 1px solid var(--border-hint, rgba(225, 190, 231, 0.4));
    border-radius: 8px;
    color: var(--text-hint, #e1bee7);
}

.hint-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
}

.hint-icon {
    font-size: 1.2rem;
}

.hint-list {
    margin: 0;
    padding-left: 24px;
}

.hint-item {
    margin-bottom: 6px;
    line-height: 1.5;
}

.hint-more-btn {
    margin-top: 10px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--border-hint, rgba(225, 190, 231, 0.5));
    border-radius: 4px;
    color: var(--text-hint, #e1bee7);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.hint-more-btn:hover {
    background: rgba(225, 190, 231, 0.15);
}

/* Solution Panel */
.solution-panel {
    margin-top: 16px;
    padding: 14px;
    background: var(--solution-bg, rgba(46, 204, 113, 0.1));
    border: 1px solid var(--solution-border, rgba(46, 204, 113, 0.3));
    border-radius: 8px;
}

.solution-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-weight: 600;
}

.solution-icon {
    font-size: 1.2rem;
}

.solution-explanation {
    line-height: 1.6;
    margin-bottom: 12px;
}

.solution-steps h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
}

.solution-steps-list {
    margin: 0;
    padding-left: 24px;
}

.solution-step {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* Question Header */
.q-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.q-correct-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--success-color, #2ecc71);
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
}

.q-bookmark-btn {
    margin-left: auto;
    padding: 4px;
    background: transparent;
    border: none;
    color: var(--text-secondary, #888);
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.q-bookmark-btn:hover {
    opacity: 1;
    color: var(--accent-blue, #64b5f6);
}

/* Fallback message */
.question-type-fallback {
    padding: 20px;
    text-align: center;
    background: var(--warning-bg, rgba(241, 196, 15, 0.1));
    border: 1px dashed var(--warning-border, #f1c40f);
    border-radius: 8px;
    color: var(--text-secondary, #888);
}

/* Light mode overrides for React components */
body.light-mode .sort-item {
    background: #fff;
    border-color: #ddd;
}

body.light-mode .sort-item:hover:not(.sort-item-disabled) {
    background: #f8f8f8;
}

body.light-mode .hint-panel {
    background: rgba(123, 31, 162, 0.1);
    border-color: rgba(123, 31, 162, 0.4);
    color: #6a1b9a;
}

body.light-mode .solution-panel {
    background: rgba(46, 125, 50, 0.1);
    border-color: rgba(46, 125, 50, 0.4);
}
/* --- END MUI MIGRATED: React Component Panel Styles --- */

/* ===========================================
   PRACTICE MODE - React Components
   =========================================== */

/* Practice Mode Container */
.practice-mode-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
    /* No special background - inherit from body */
}

body.light-mode .practice-mode-container {
    /* No special background - inherit from body */
}

/* Practice Hints Active Warning Banner */
.practice-hints-active-warning {
    background: rgba(255, 167, 38, 0.15);
    border: 1px solid rgba(255, 167, 38, 0.4);
    color: #ffa726;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.9rem;
    margin: 0 20px;
}

body.light-mode .practice-hints-active-warning {
    background: rgba(230, 81, 0, 0.1);
    border-color: rgba(230, 81, 0, 0.3);
    color: #e65100;
}

/* Practice Header */
.practice-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--bg-primary, #0f0f23);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

body.light-mode .practice-header {
    background: #ffffff;
    border-bottom: 1px solid #ddd;
}

.practice-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.practice-exit-btn {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.practice-exit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

body.light-mode .practice-exit-btn {
    color: #333;
    border-color: #ccc;
}

body.light-mode .practice-exit-btn:hover {
    background: #f0f0f0;
}

.practice-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

body.light-mode .practice-title {
    color: #333;
}

.practice-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Practice Sparkle Display */
.practice-sparkle-display {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.practice-sparkle-earned {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ffd700;
    font-weight: 600;
}

.practice-sparkle-earned .sparkle-icon {
    font-size: 18px;
}

.practice-sparkle-earned .sparkle-value {
    font-size: 16px;
}

.practice-sparkle-remaining {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

body.light-mode .practice-sparkle-remaining {
    color: #666;
    border-left-color: #ccc;
}

/* Practice Question Content */
.practice-question-content {
    flex: 1;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Practice Navigation */
.practice-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    bottom: 0;
}

body.light-mode .practice-navigation {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #ddd;
}

.practice-nav-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.practice-nav-btn.prev {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.practice-nav-btn.prev:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
}

.practice-nav-btn.next {
    background: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%);
    border: none;
    color: #fff;
}

.practice-nav-btn.next:hover:not(:disabled) {
    background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
    transform: translateY(-1px);
}

.practice-nav-btn.submit {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
    border: none;
    color: #fff;
}

.practice-nav-btn.submit:hover:not(:disabled) {
    background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    transform: translateY(-1px);
}

.practice-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

body.light-mode .practice-nav-btn.prev {
    color: #333;
    border-color: #ccc;
}

body.light-mode .practice-nav-btn.prev:hover:not(:disabled) {
    background: #f0f0f0;
}

.practice-progress-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-weight: 500;
}

body.light-mode .practice-progress-text {
    color: #666;
}

/* Practice Confirm Modal */
.practice-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.practice-confirm-content {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .practice-confirm-content {
    background: #fff;
    border: 1px solid #ddd;
}

.practice-confirm-content h3 {
    margin: 0 0 15px;
    font-size: 20px;
    color: #fff;
}

body.light-mode .practice-confirm-content h3 {
    color: #333;
}

.practice-confirm-content p {
    margin: 0 0 25px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

body.light-mode .practice-confirm-content p {
    color: #666;
}

.practice-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.practice-confirm-btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.practice-confirm-btn.cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.practice-confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

.practice-confirm-btn.confirm {
    background: linear-gradient(135deg, #e53935 0%, #f44336 100%);
    border: none;
    color: #fff;
}

.practice-confirm-btn.confirm.submit {
    background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
}

.practice-confirm-btn.confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.light-mode .practice-confirm-btn.cancel {
    color: #333;
    border-color: #ccc;
}

body.light-mode .practice-confirm-btn.cancel:hover {
    background: #f0f0f0;
}

/* Practice Summary */
.practice-summary {
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto;
}

.practice-summary-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

body.light-mode .practice-summary-card {
    background: #fff;
    border: 1px solid #ddd;
}

.practice-summary h2 {
    margin: 0 0 25px;
    font-size: 24px;
    color: #fff;
}

body.light-mode .practice-summary h2 {
    color: #333;
}

.practice-summary-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.practice-stat {
    text-align: center;
}

.practice-stat-value {
    font-size: 36px;
    font-weight: 700;
    color: #7b1fa2;
    display: block;
    margin-bottom: 5px;
}

.practice-stat-value.sparkles {
    color: #ffd700;
}

.practice-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

body.light-mode .practice-stat-label {
    color: #666;
}

/* Practice Lesson Breakdown */
.practice-lesson-breakdown {
    margin-top: 30px;
    text-align: left;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .practice-lesson-breakdown {
    border-top-color: #ddd;
}

.practice-lesson-breakdown h4 {
    margin: 0 0 15px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.light-mode .practice-lesson-breakdown h4 {
    color: #666;
}

.practice-breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.practice-breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.practice-breakdown-item:last-child {
    border-bottom: none;
}

body.light-mode .practice-breakdown-item {
    color: #333;
    border-bottom-color: #eee;
}

.practice-breakdown-score {
    font-weight: 600;
    color: #7b1fa2;
}

.practice-done-btn {
    margin-top: 30px;
    padding: 14px 40px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.practice-done-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.4);
}

/* Practice correct answer reveal styles */
.practice-mcq-answer,
.practice-msq-answer,
.practice-tf-answer,
.practice-asn-answer,
.practice-frq-answer,
.practice-fib-answer,
.practice-sort-answer,
.practice-match-answer {
    margin-top: 15px;
    padding: 12px 15px;
    background: rgba(46, 125, 50, 0.15);
    border: 1px solid rgba(46, 125, 50, 0.3);
    border-radius: 8px;
    color: #66bb6a;
    font-size: 14px;
}

body.light-mode .practice-mcq-answer,
body.light-mode .practice-msq-answer,
body.light-mode .practice-tf-answer,
body.light-mode .practice-asn-answer,
body.light-mode .practice-frq-answer,
body.light-mode .practice-fib-answer,
body.light-mode .practice-sort-answer,
body.light-mode .practice-match-answer {
    background: rgba(46, 125, 50, 0.1);
    color: #2e7d32;
}

.practice-fib-answer-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.practice-fib-answer-list li {
    padding: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.practice-fib-answer-list .blank-label {
    color: rgba(255, 255, 255, 0.6);
    min-width: 70px;
}

body.light-mode .practice-fib-answer-list .blank-label {
    color: #666;
}

.practice-fib-answer-list .check-mark {
    color: #4caf50;
    margin-left: auto;
}

.practice-sort-answer ol,
.practice-match-answer ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

.practice-sort-answer li,
.practice-match-answer li {
    padding: 3px 0;
}

/* Correct option highlighting in practice mode */
.mcq-option.practice-correct,
.msq-option.practice-correct,
.tf-btn.practice-correct,
.asn-choice-item.practice-correct {
    border-color: #4caf50 !important;
    background: rgba(76, 175, 80, 0.2) !important;
}

.mcq-option.practice-correct::before,
.msq-option.practice-correct::before {
    content: '✓';
    position: absolute;
    right: 10px;
    color: #4caf50;
    font-weight: bold;
}