min-width: 220px;
    max-width: 350px;
    flex: 1.2;
}
/**
 * MMLMS Practice Module - Unified Professional Styles
 *
 * Single CSS file for all student-facing practice interfaces.
 * Design tokens from ui-foundation.css (--mmlms-*).
 * Dark mode via [data-mmlms-theme="dark"].
 * Zero !important declarations.
 *
 * @package MMLMS\Practice
 * @since 7.0.0
 */

/* ==========================================================================
   1. SCOPED DESIGN TOKENS
   Extended tokens beyond ui-foundation.css, scoped to practice containers.
   ========================================================================== */

.mmlms-practice-modern,
.mmlms-practice-container,
.mmlms-practice-student-v2 {
    /* Gray scale (extends ui-foundation) */
    --mmlms-gray-50: #f8fafc;
    --mmlms-gray-100: #f1f5f9;
    --mmlms-gray-200: #e2e8f0;
    --mmlms-gray-300: #cbd5e1;
    --mmlms-gray-400: #94a3b8;
    --mmlms-gray-500: #64748b;
    --mmlms-gray-600: #475569;
    --mmlms-gray-700: #334155;
    --mmlms-gray-800: #1e293b;
    --mmlms-gray-900: #0f172a;

    /* Primary extensions */
    --mmlms-primary-subtle: #dbeafe;
    --mmlms-primary-ghost: #eff6ff;
    --mmlms-primary-gradient: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #0ea5a4 100%);

    /* Secondary */
    --mmlms-secondary: #0ea5a4;
    --mmlms-secondary-light: #14b8a6;
    --mmlms-secondary-subtle: #ccfbf1;

    /* Info */
    --mmlms-info: #3b82f6;
    --mmlms-info-light: #dbeafe;

    /* Layout */
    --mmlms-max-width: 1240px;
    --mmlms-container-padding: 40px;

    /* Typography */
    --mmlms-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

    /* Shadows - glow variants */
    --mmlms-shadow-glow: 0 0 20px rgba(37, 99, 235, 0.15);
    --mmlms-shadow-glow-lg: 0 0 40px rgba(37, 99, 235, 0.2);

    /* Transitions - spring variant */
    --mmlms-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

#mmlms-practice-app.mmlms-practice-modern {
    --mmlms-max-width: 100%;
    width: 100%;
    max-width: 100%;
    /* Prevent browser back/forward swipe gestures on mobile/tablet */
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

/* Also lock horizontal overscroll on the active question screen */
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions {
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

.entry-content > #mmlms-practice-app.mmlms-practice-modern:first-child,
.wp-block-post-content > #mmlms-practice-app.mmlms-practice-modern:first-child,
.content-area > #mmlms-practice-app.mmlms-practice-modern:first-child,
.site-content > #mmlms-practice-app.mmlms-practice-modern:first-child,
#main > #mmlms-practice-app.mmlms-practice-modern:first-child,
main > #mmlms-practice-app.mmlms-practice-modern:first-child,
.site-main > #mmlms-practice-app.mmlms-practice-modern:first-child {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   2. DARK MODE TOKENS
   ========================================================================== */

[data-mmlms-theme="dark"] .mmlms-practice-modern,
[data-mmlms-theme="dark"] .mmlms-practice-container,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2,
.mmlms-practice-modern[data-mmlms-theme="dark"],
.mmlms-practice-container[data-mmlms-theme="dark"],
.mmlms-practice-student-v2[data-mmlms-theme="dark"] {
    --mmlms-gray-50: #0f172a;
    --mmlms-gray-100: #1e293b;
    --mmlms-gray-200: #334155;
    --mmlms-gray-300: #475569;
    --mmlms-gray-400: #64748b;
    --mmlms-gray-500: #94a3b8;
    --mmlms-gray-600: #cbd5e1;
    --mmlms-gray-700: #e2e8f0;
    --mmlms-gray-800: #f1f5f9;
    --mmlms-gray-900: #f8fafc;

    --mmlms-primary-subtle: #1e3a5f;
    --mmlms-primary-ghost: #172554;
    --mmlms-primary-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 60%, #14b8a6 100%);

    --mmlms-secondary-subtle: #134e4a;

    --mmlms-info-light: #1e3a5f;

    --mmlms-shadow-glow: 0 0 20px rgba(96, 165, 250, 0.15);
    --mmlms-shadow-glow-lg: 0 0 40px rgba(96, 165, 250, 0.2);
}

/* ==========================================================================
   3. KEYFRAME ANIMATIONS (canonical, defined once)
   ========================================================================== */

@keyframes mmlms-spin {
    to { transform: rotate(360deg); }
}

@keyframes mmlms-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mmlms-fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mmlms-slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mmlms-slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes mmlms-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes mmlms-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes mmlms-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

@keyframes mmlms-pulse-timer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

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

@keyframes mmlms-gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Legacy aliases — old animations reference these names from JS/CSS */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } }
@keyframes pulse-timer { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* ==========================================================================
   4. BASE RESETS
   ========================================================================== */

.mmlms-practice-modern,
.mmlms-practice-container,
.mmlms-practice-student-v2 {
    font-family: var(--mmlms-font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
    color: var(--mmlms-text, #1e293b);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mmlms-practice-modern *,
.mmlms-practice-modern *::before,
.mmlms-practice-modern *::after,
.mmlms-practice-container *,
.mmlms-practice-container *::before,
.mmlms-practice-container *::after,
.mmlms-practice-student-v2 *,
.mmlms-practice-student-v2 *::before,
.mmlms-practice-student-v2 *::after {
    box-sizing: border-box;
}

/* Screen transition base */
.mmlms-practice-modern .mmlms-screen,
.mmlms-practice-container .mmlms-screen {
    animation: mmlms-fadeIn 0.3s ease-in-out;
}

/* ==========================================================================
   5. SKELETON LOADERS
   ========================================================================== */

.mmlms-practice-modern .mmlms-skeleton,
.mmlms-practice-container .mmlms-skeleton,
.mmlms-practice-student-v2 .ps-skeleton {
    background: var(--mmlms-gray-100, #f1f5f9);
    background: linear-gradient(90deg, var(--mmlms-gray-100, #f1f5f9) 25%, var(--mmlms-gray-200, #e2e8f0) 50%, var(--mmlms-gray-100, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: mmlms-shimmer 1.5s infinite;
    border-radius: var(--mmlms-radius-sm, 8px);
    display: block;
}

.mmlms-practice-modern .mmlms-skeleton-text { height: 18px; margin-bottom: 12px; width: 100%; }
.mmlms-practice-modern .mmlms-skeleton-text.short { width: 60%; }
.mmlms-practice-modern .mmlms-skeleton-title { height: 28px; margin-bottom: 24px; width: 40%; }
.mmlms-practice-modern .mmlms-skeleton-option { height: 48px; margin-bottom: 12px; border-radius: var(--mmlms-radius, 12px); }

/* ==========================================================================
   6. LOADING STATES
   ========================================================================== */

.mmlms-practice-modern .mmlms-loading,
.mmlms-practice-container .mmlms-loading,
.mmlms-practice-student-v2 .ps-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
}

.mmlms-practice-modern .mmlms-spinner,
.mmlms-practice-container .mmlms-spinner,
.mmlms-practice-student-v2 .ps-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--mmlms-primary-subtle, #dbeafe);
    border-top-color: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
    animation: mmlms-spin 1s linear infinite;
}

.mmlms-practice-modern .mmlms-loading-text,
.mmlms-practice-student-v2 .ps-loading-text {
    color: var(--mmlms-text-muted, #6b7280);
    font-size: 14px;
}

/* ==========================================================================
   7. BUTTONS (unified system)
   ========================================================================== */

/* Base button - scoped to practice containers for specificity */
.mmlms-practice-modern .mmlms-btn,
.mmlms-practice-container .mmlms-btn,
.mmlms-practice-student-v2 .ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--mmlms-radius, 12px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
    letter-spacing: 0.01em;
    min-height: 42px;
}

.mmlms-practice-modern .mmlms-btn:hover:not(:disabled),
.mmlms-practice-container .mmlms-btn:hover:not(:disabled),
.mmlms-practice-student-v2 .ps-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.mmlms-practice-modern .mmlms-btn:disabled,
.mmlms-practice-container .mmlms-btn:disabled,
.mmlms-practice-student-v2 .ps-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Primary */
.mmlms-practice-modern .mmlms-btn-primary,
.mmlms-practice-container .mmlms-btn-primary,
.mmlms-practice-student-v2 .ps-btn-primary {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-dark, #1d4ed8) 100%);
    color: #fff;
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.mmlms-practice-modern .mmlms-btn-primary:hover:not(:disabled),
.mmlms-practice-container .mmlms-btn-primary:hover:not(:disabled),
.mmlms-practice-student-v2 .ps-btn-primary:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

/* Secondary */
.mmlms-practice-modern .mmlms-btn-secondary,
.mmlms-practice-container .mmlms-btn-secondary,
.mmlms-practice-student-v2 .ps-btn-secondary {
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text, #1e293b);
    border: 1px solid var(--mmlms-border, #dbe4f0);
}

.mmlms-practice-modern .mmlms-btn-secondary:hover:not(:disabled),
.mmlms-practice-container .mmlms-btn-secondary:hover:not(:disabled),
.mmlms-practice-student-v2 .ps-btn-secondary:hover:not(:disabled) {
    background: var(--mmlms-bg-subtle, #eef3f9);
    border-color: var(--mmlms-border, #dbe4f0);
}

/* Danger */
.mmlms-practice-modern .mmlms-btn-danger,
.mmlms-practice-container .mmlms-btn-danger {
    background: var(--mmlms-danger, #ef4444);
    border-color: var(--mmlms-danger, #ef4444);
    color: #fff;
}

/* Success */
.mmlms-practice-modern .mmlms-btn-success,
.mmlms-practice-container .mmlms-btn-success,
.mmlms-practice-student-v2 .ps-btn-success {
    background: linear-gradient(135deg, var(--mmlms-success, #10b981) 0%, #059669 100%);
    color: #fff;
}

/* Start button (CTA) */
.mmlms-practice-modern .mmlms-btn-start {
    background: var(--mmlms-primary-gradient);
    color: #fff;
    padding: 18px 44px;
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--mmlms-radius-lg, 16px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
    border: none;
}

.mmlms-practice-modern .mmlms-btn-start:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 20px 30px rgba(37, 99, 235, 0.3);
}

.mmlms-practice-modern .mmlms-btn-start:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.mmlms-practice-modern .mmlms-btn-start .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease;
}

.mmlms-practice-modern .mmlms-btn-start:hover:not(:disabled) .dashicons {
    transform: translateX(4px);
}

/* End button (circle icon) */
.mmlms-practice-modern .mmlms-btn-end {
    background: var(--mmlms-gray-100, #f1f5f9);
    color: var(--mmlms-danger, #ef4444);
    border: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
}

.mmlms-practice-modern .mmlms-btn-end:hover:not(:disabled) {
    background: var(--mmlms-danger-light, #fee2e2);
    color: #b91c1c;
}

/* Submit button */
.mmlms-practice-modern .mmlms-btn-submit {
    background: var(--mmlms-success, #10b981);
    color: #fff;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
}

.mmlms-practice-modern .mmlms-btn-submit:hover:not(:disabled) {
    background: #059669;
}

.mmlms-practice-modern .mmlms-btn-submit:disabled {
    background: var(--mmlms-gray-300, #cbd5e1);
    box-shadow: none;
}

/* Upgrade button */
.mmlms-practice-modern .mmlms-btn-upgrade,
.mmlms-practice-container .mmlms-btn-upgrade {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 12px 24px;
    font-weight: 600;
    border: none;
    border-radius: var(--mmlms-radius, 12px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.mmlms-practice-modern .mmlms-btn-upgrade:hover:not(:disabled),
.mmlms-practice-container .mmlms-btn-upgrade:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
}

/* Text/icon toggle button */
.mmlms-practice-modern .mmlms-btn-text-icon {
    background: none;
    border: 1px solid var(--mmlms-border, #dbe4f0);
    color: var(--mmlms-text-secondary, #4b5563);
    padding: 8px 16px;
    font-size: 13px;
    border-radius: var(--mmlms-radius-sm, 8px);
}

.mmlms-practice-modern .mmlms-btn-text-icon:hover {
    background: var(--mmlms-bg-subtle, #eef3f9);
    color: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
}

/* Button sizes */
.mmlms-practice-modern .mmlms-btn-lg,
.mmlms-practice-student-v2 .ps-btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.mmlms-practice-student-v2 .ps-btn-xl {
    padding: 20px 40px;
    font-size: 18px;
    border-radius: var(--mmlms-radius, 12px);
}

.mmlms-practice-student-v2 .ps-btn-full {
    width: 100%;
}

/* Glow effect */
.mmlms-practice-student-v2 .ps-btn-glow {
    position: relative;
    overflow: hidden;
}

.mmlms-practice-student-v2 .ps-btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.35s ease;
}

.mmlms-practice-student-v2 .ps-btn-glow:hover::before {
    left: 100%;
}

/* ==========================================================================
   8. BADGES & PILLS
   ========================================================================== */

.mmlms-practice-modern .mmlms-badge,
.mmlms-practice-container .mmlms-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.mmlms-practice-modern .mmlms-badge-difficulty.easy { background: var(--mmlms-success-light, #d1fae5); color: #065f46; }
.mmlms-practice-modern .mmlms-badge-difficulty.medium { background: var(--mmlms-warning-light, #fef3c7); color: #92400e; }
.mmlms-practice-modern .mmlms-badge-difficulty.hard { background: var(--mmlms-danger-light, #fee2e2); color: #991b1b; }
.mmlms-practice-modern .mmlms-badge-difficulty.mixed { background: var(--mmlms-primary-subtle, #dbeafe); color: #1e40af; }

/* Tier badges */
.mmlms-practice-modern .mmlms-tier-badge,
.mmlms-practice-container .mmlms-tier-badge,
.mmlms-practice-student-v2 .mmlms-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-modern .mmlms-tier-badge-plus,
.mmlms-practice-container .mmlms-tier-badge-plus {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
}

.mmlms-practice-modern .mmlms-tier-badge-premium,
.mmlms-practice-container .mmlms-tier-badge-premium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

/* ==========================================================================
   9. FORM INPUTS (scoped)
   ========================================================================== */

.mmlms-practice-modern select,
.mmlms-practice-modern input[type="text"],
.mmlms-practice-modern input[type="number"],
.mmlms-practice-modern textarea,
.mmlms-practice-container select,
.mmlms-practice-container input[type="text"],
.mmlms-practice-container input[type="number"],
.mmlms-practice-container textarea,
.mmlms-practice-student-v2 .ps-input,
.mmlms-practice-student-v2 .ps-select {
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius-sm, 8px);
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text, #1e293b);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mmlms-practice-modern select:focus,
.mmlms-practice-modern input[type="text"]:focus,
.mmlms-practice-modern input[type="number"]:focus,
.mmlms-practice-modern textarea:focus,
.mmlms-practice-container select:focus,
.mmlms-practice-container input[type="text"]:focus,
.mmlms-practice-container input[type="number"]:focus,
.mmlms-practice-container textarea:focus,
.mmlms-practice-student-v2 .ps-input:focus,
.mmlms-practice-student-v2 .ps-select:focus {
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
    outline: none;
}

/* ==========================================================================
   10. FOCUS & ACCESSIBILITY
   ========================================================================== */

.mmlms-practice-modern .mmlms-btn:focus-visible,
.mmlms-practice-modern .mmlms-option:focus-within,
.mmlms-practice-modern .mmlms-palette-btn:focus-visible,
.mmlms-practice-modern .mmlms-arrow:focus-visible,
.mmlms-practice-container .mmlms-btn:focus-visible,
.mmlms-practice-student-v2 .ps-btn:focus-visible {
    outline: 2px solid var(--mmlms-primary, #2563eb);
    outline-offset: 2px;
}

/* Screen reader only */
.mmlms-sr-only,
.ps-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus ring utility */
.ps-focus-ring:focus-visible {
    outline: 2px solid var(--mmlms-primary, #2563eb);
    outline-offset: 2px;
}

/* ==========================================================================
   11. ANIMATION UTILITIES
   ========================================================================== */

.mmlms-practice-modern .mmlms-fade-in,
.mmlms-practice-student-v2 .ps-animate-fade-in {
    animation: mmlms-fadeInUp 0.5s ease-out;
}

.mmlms-practice-student-v2 .ps-animate-slide-in {
    animation: mmlms-slideInRight 0.4s ease-out;
}

.mmlms-practice-student-v2 .ps-animate-scale-in {
    animation: mmlms-scaleIn 0.3s ease-out;
}

/* Stagger animations for lists */
.mmlms-practice-student-v2 .ps-animate-stagger > * {
    opacity: 0;
    animation: mmlms-fadeInUp 0.4s ease-out forwards;
}

.mmlms-practice-student-v2 .ps-animate-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.mmlms-practice-student-v2 .ps-animate-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.mmlms-practice-student-v2 .ps-animate-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.mmlms-practice-student-v2 .ps-animate-stagger > *:nth-child(4) { animation-delay: 0.2s; }
.mmlms-practice-student-v2 .ps-animate-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.mmlms-practice-student-v2 .ps-animate-stagger > *:nth-child(6) { animation-delay: 0.3s; }

/* ==========================================================================
   12. UTILITY CLASSES
   ========================================================================== */

.mmlms-hidden { display: none; }
.mmlms-flex-row { display: flex; gap: 12px; align-items: center; }
.mmlms-text-center { text-align: center; }

.mmlms-practice-modern .mmlms-required { color: var(--mmlms-danger, #ef4444); }
.mmlms-practice-modern .mmlms-optional { color: var(--mmlms-text-muted, #6b7280); font-size: 12px; }

/* Glass card utility */
.mmlms-practice-student-v2 .ps-glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mmlms-radius-lg, 16px);
    box-shadow: var(--mmlms-shadow, 0 4px 6px rgba(0, 0, 0, 0.08));
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-glass-card {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(71, 85, 105, 0.3);
}

/* ==========================================================================
   13. RESPONSIVE FOUNDATION
   ========================================================================== */

@media screen and (max-width: 768px) {
    .mmlms-practice-modern,
    .mmlms-practice-container,
    .mmlms-practice-student-v2 {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-btn,
    .mmlms-practice-container .mmlms-btn,
    .mmlms-practice-student-v2 .ps-btn {
        min-height: 40px;
        padding: 10px 16px;
    }
}

@media screen and (max-width: 480px) {
    .mmlms-practice-modern,
    .mmlms-practice-container,
    .mmlms-practice-student-v2 {
        padding: 8px;
    }
}

/* ==========================================================================
   14. ACCESSIBILITY: REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mmlms-practice-modern *,
    .mmlms-practice-modern *::before,
    .mmlms-practice-modern *::after,
    .mmlms-practice-container *,
    .mmlms-practice-container *::before,
    .mmlms-practice-container *::after,
    .mmlms-practice-student-v2 *,
    .mmlms-practice-student-v2 *::before,
    .mmlms-practice-student-v2 *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   15. ACCESSIBILITY: HIGH CONTRAST
   ========================================================================== */

@media (prefers-contrast: more) {
    .mmlms-practice-modern .mmlms-btn,
    .mmlms-practice-container .mmlms-btn {
        border-width: 2px;
    }

    .mmlms-practice-modern .mmlms-option {
        border-width: 3px;
    }

    .mmlms-practice-modern .mmlms-badge,
    .mmlms-practice-modern .mmlms-tier-badge {
        border: 1px solid currentColor;
    }
}

/* ==========================================================================
   16. PRINT FOUNDATION
   ========================================================================== */

@media print {
    .mmlms-practice-modern,
    .mmlms-practice-container,
    .mmlms-practice-student-v2 {
        background: #fff;
        color: #000;
        padding: 0;
    }

    .mmlms-practice-modern .mmlms-btn,
    .mmlms-practice-modern .mmlms-spinner,
    .mmlms-practice-modern .mmlms-loading,
    .mmlms-practice-modern .mmlms-skeleton {
        display: none;
    }
}

/* ==========================================================================
   STEP 2: INSTRUCTIONS SCREEN
   ========================================================================== */

/* ---------- Instructions screen container ---------- */
.mmlms-practice-modern .mmlms-screen-instructions {
    max-width: var(--mmlms-max-width, 1240px);
    width: 100%;
    margin: 0 auto;
    padding: 60px 20px;
    animation: mmlms-slideInUp 0.4s ease-out;
}

/* ---------- Instructions wrapper (single card layout) ---------- */
.mmlms-practice-modern .mmlms-instructions-wrapper {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-xl, 20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--mmlms-gray-200, #e5e7eb);
}

/* ---------- Header card (gradient banner) ---------- */
.mmlms-practice-modern .mmlms-header-card {
    background: var(--mmlms-primary-gradient);
    color: #fff;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 40px 48px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.mmlms-practice-modern .mmlms-header-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* When NOT inside instructions-wrapper, use card style */
.mmlms-practice-modern .mmlms-screen-instructions > .mmlms-header-card {
    background: linear-gradient(135deg, var(--mmlms-card-bg, #fff) 0%, var(--mmlms-gray-50, #f8fafc) 100%);
    color: var(--mmlms-text, #1e293b);
    border-radius: var(--mmlms-radius-xl, 20px);
    padding: 40px;
    box-shadow: var(--mmlms-shadow-lg);
    border: 1px solid var(--mmlms-gray-100, #f3f4f6);
    animation: mmlms-scaleIn 0.4s ease-out;
}

/* ---------- Header row (grid of meta items) ---------- */
.mmlms-practice-modern .mmlms-header-row {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-bottom: 8px;
}



.mmlms-practice-modern .mmlms-header-row:last-child {
    margin-bottom: 0;
}

/* ---------- Header items ---------- */
.mmlms-practice-modern .mmlms-header-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.mmlms-practice-modern .mmlms-header-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
}

.mmlms-practice-modern .mmlms-header-title .mmlms-header-label {
    font-size: 26px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.3px;
    color: #fff;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    margin-bottom: 12px;
}

.mmlms-practice-modern .mmlms-header-value {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.mmlms-practice-modern .mmlms-screen-instructions > .mmlms-header-card .mmlms-header-value {
    color: var(--mmlms-gray-800, #1e293b);
    font-weight: 600;
}

/* Difficulty badge in header */
.mmlms-practice-modern .mmlms-instructions-wrapper .mmlms-badge-difficulty {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Instructions body ---------- */
.mmlms-practice-modern .mmlms-instructions-body {
    padding: 40px 48px;
}

/* ---------- Instructions card (list container) ---------- */
.mmlms-practice-modern .mmlms-instructions-card {
    background: var(--mmlms-gray-50, #f8fafc);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 32px;
    margin-bottom: 24px;
    border: none;
    box-shadow: none;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions {
    margin-bottom: 24px;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions.mmlms-cbt-instructions {
    background: #fff;
    border: 1px solid var(--mmlms-gray-200, #e2e8f0);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions .mmlms-cbt-instructions-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: visible;
    padding: 16px 20px;
    min-height: 0;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions .mmlms-cbt-instructions-content p,
.mmlms-practice-modern .mmlms-practice-cbt-instructions .mmlms-cbt-instructions-content li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions h4 {
    color: #fff;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #0ea5a4 100%);
    padding: 12px 20px;
    flex-shrink: 0;
    text-align: center;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions h4::before {
    content: '📋';
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions p {
    margin: 0 0 12px 0;
    color: var(--mmlms-gray-800, #1e293b);
    font-size: 13px;
    line-height: 1.6;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.mmlms-practice-modern .mmlms-practice-cbt-instructions ol li {
    margin-bottom: 6px;
    color: var(--mmlms-gray-800, #1e293b);
    font-size: 13px;
    line-height: 1.5;
}

.mmlms-practice-modern .mmlms-instructions-title {
    color: var(--mmlms-gray-900, #0f172a);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mmlms-practice-modern .mmlms-instructions-title .dashicons {
    color: var(--mmlms-primary, #2563eb);
    font-size: 22px;
    width: 22px;
    height: 22px;
}

/* ---------- Instruction list ---------- */
.mmlms-practice-modern .mmlms-instructions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Instruction item ---------- */
.mmlms-practice-modern .mmlms-instruction-item {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-gray-200, #e5e7eb);
    border-left: 4px solid var(--mmlms-primary, #2563eb);
    border-radius: var(--mmlms-radius, 12px);
    padding: 14px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    animation: mmlms-slideInUp 0.4s ease-out;
}

.mmlms-practice-modern .mmlms-instruction-item:nth-child(2) { animation-delay: 0.05s; }
.mmlms-practice-modern .mmlms-instruction-item:nth-child(3) { animation-delay: 0.1s; }
.mmlms-practice-modern .mmlms-instruction-item:nth-child(4) { animation-delay: 0.15s; }
.mmlms-practice-modern .mmlms-instruction-item:nth-child(5) { animation-delay: 0.2s; }
.mmlms-practice-modern .mmlms-instruction-item:nth-child(6) { animation-delay: 0.25s; }

.mmlms-practice-modern .mmlms-instruction-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--mmlms-shadow, 0 4px 6px rgba(0, 0, 0, 0.08));
    border-left-color: var(--mmlms-secondary, #0ea5a4);
}

.mmlms-practice-modern .mmlms-instruction-item:last-child {
    margin-bottom: 0;
}

/* Locked instruction */
.mmlms-practice-modern .mmlms-instruction-item.mmlms-instruction-locked {
    border-left-color: var(--mmlms-warning, #f59e0b);
    background: var(--mmlms-warning-light, #fef3c7);
}

/* ---------- Instruction icon ---------- */
.mmlms-practice-modern .mmlms-instruction-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: var(--mmlms-primary-ghost, #eff6ff);
    color: var(--mmlms-primary, #2563eb);
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.mmlms-practice-modern .mmlms-instruction-item.mmlms-instruction-locked .mmlms-instruction-icon {
    background: var(--mmlms-warning-light, #fef3c7);
    color: #92400e;
}

.mmlms-practice-modern .mmlms-instruction-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Instruction text */
.mmlms-practice-modern .mmlms-instruction-item span:not(.mmlms-instruction-icon) {
    color: var(--mmlms-gray-700, #334155);
    font-size: 14px;
    line-height: 1.5;
}

.mmlms-practice-modern .mmlms-instruction-item strong {
    color: var(--mmlms-gray-900, #0f172a);
    font-weight: 600;
}

/* ---------- Start section ---------- */
.mmlms-practice-modern .mmlms-start-section {
    background: var(--mmlms-gray-50, #f8fafc);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 24px;
    margin-top: 0;
    border-top: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: mmlms-slideInUp 0.4s ease-out;
    animation-delay: 0.3s;
    animation-fill-mode: both;
}

/* When outside wrapper */
.mmlms-practice-modern .mmlms-screen-instructions > .mmlms-start-section {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--mmlms-gray-100, #f3f4f6);
    background: transparent;
    border-radius: 0;
    padding: 32px 0 0;
}

/* ---------- Start confirmation ---------- */
.mmlms-practice-modern .mmlms-start-confirmation {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-gray-200, #e5e7eb);
    border-radius: var(--mmlms-radius, 12px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

/* ---------- Checkbox ---------- */
.mmlms-practice-modern .mmlms-start-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin: 0;
    position: relative; /* Contains the absolutely-positioned hidden input */
}

.mmlms-practice-modern .mmlms-start-checkbox input[type="checkbox"] {
    /* Fully hide the native checkbox - use opacity/position to be safe on all mobile browsers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.mmlms-practice-modern .mmlms-checkbox-custom {
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-primary, #2563eb);
    border-radius: var(--mmlms-radius-sm, 8px);
    transition: var(--mmlms-transition-fast, 150ms ease);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmlms-practice-modern .mmlms-start-checkbox input:checked + .mmlms-checkbox-custom {
    background: var(--mmlms-primary-gradient, linear-gradient(135deg, #1d4ed8 0%, #2563eb 60%, #0ea5a4 100%));
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

.mmlms-practice-modern .mmlms-start-checkbox input:checked + .mmlms-checkbox-custom::after {
    content: '';
    /* Use a CSS-drawn checkmark for maximum compatibility on mobile */
    display: block;
    position: absolute;
    left: 50%;
    top: 45%;
    width: 6px;
    height: 11px;
    border: 2.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -60%) rotate(45deg);
    transform-origin: center;
}

.mmlms-practice-modern .mmlms-checkbox-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--mmlms-gray-700, #334155);
    line-height: 1.6;
}

.mmlms-practice-modern .mmlms-start-checkbox:hover {
    opacity: 0.9;
}

/* ---------- Start note ---------- */
.mmlms-practice-modern .mmlms-start-note {
    margin: 8px 0 0 32px;
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
    font-weight: 500;
}

/* ---------- Session shell ---------- */
.mmlms-practice-modern .mmlms-session-shell {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-xl, 20px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--mmlms-gray-200, #e5e7eb);
}

/* ---------- Fixed Header (Shared) ---------- */
.mmlms-practice-modern .mmlms-practice-header {
    position: sticky;
    top: 32px; /* Account for WordPress admin bar */
    z-index: 100;
    margin-bottom: 8px;
}

/* When admin bar is not present */
@media screen and (max-width: 782px) {
    .mmlms-practice-modern .mmlms-practice-header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .mmlms-practice-modern .mmlms-practice-header {
        top: 0;
    }
}

.mmlms-practice-modern .mmlms-practice-header .mmlms-header-card {
    margin: 0;
    border-radius: 0 0 var(--mmlms-radius-xl, 16px) var(--mmlms-radius-xl, 16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ---------- Instructions Container (New Layout) ---------- */
.mmlms-practice-modern .mmlms-instructions-container {
    max-width: var(--mmlms-max-width, 1240px);
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    animation: mmlms-slideInUp 0.4s ease-out;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions {
    background: #fff;
    border: 1px solid var(--mmlms-gray-200, #e2e8f0);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    margin-bottom: 24px;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions h4 {
    color: #fff;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    padding: 16px 20px;
    flex-shrink: 0;
    text-align: center;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions h4::before {
    content: '📋';
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions-content {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: visible;
    padding: 24px 28px;
    min-height: 0;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions ol {
    margin: 0;
    padding-left: 24px;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions li {
    margin-bottom: 12px;
    color: var(--mmlms-gray-800, #1e293b);
    font-size: 15px;
    line-height: 1.6;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions li:last-child {
    margin-bottom: 0;
}

.mmlms-practice-modern .mmlms-instructions-container .mmlms-start-section {
    background: var(--mmlms-gray-50, #f8fafc);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: mmlms-slideInUp 0.4s ease-out;
    animation-delay: 0.1s;
    animation-fill-mode: both;
}

/* ---------- Instructions: Dark mode (New Layout) ---------- */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions {
    background: var(--mmlms-gray-100);
    border-color: var(--mmlms-gray-200);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-instructions-container .mmlms-start-section {
    background: var(--mmlms-gray-50);
}

/* ---------- Instructions: Dark mode (Legacy) ---------- */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-instructions-wrapper {
    background: var(--mmlms-gray-100);
    border-color: var(--mmlms-gray-200);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-instructions-body {
    background: var(--mmlms-gray-100);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-instructions-card {
    background: var(--mmlms-gray-50);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-instruction-item {
    background: var(--mmlms-gray-100);
    border-color: var(--mmlms-gray-200);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-start-section {
    background: var(--mmlms-gray-50);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-start-confirmation {
    background: var(--mmlms-gray-100);
    border-color: var(--mmlms-gray-200);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-checkbox-custom {
    background: var(--mmlms-gray-100);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-session-shell {
    background: var(--mmlms-gray-100);
    border-color: var(--mmlms-gray-200);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* ---------- Instructions: Responsive ---------- */
@media screen and (max-width: 1024px) {
    .mmlms-practice-modern .mmlms-screen-instructions {
        padding: 40px 16px;
    }
}

@media screen and (max-width: 768px) {
    .mmlms-practice-modern .mmlms-screen-instructions {
        padding: 16px;
    }

    .mmlms-practice-modern .mmlms-instructions-container {
        padding: 16px;
    }

    .mmlms-practice-modern .mmlms-header-card {
        padding: 20px 24px;
    }

    .mmlms-practice-modern .mmlms-instructions-body {
        padding: 24px;
    }

    .mmlms-practice-modern .mmlms-instructions-card,
    .mmlms-practice-modern .mmlms-start-section,
    .mmlms-practice-modern .mmlms-instructions-container .mmlms-start-section {
        padding: 24px;
    }

    .mmlms-practice-modern .mmlms-header-title .mmlms-header-label {
        font-size: 22px;
    }

    .mmlms-practice-modern .mmlms-header-row {
        gap: 6px 20px;
    }

    .mmlms-practice-modern .mmlms-btn-start {
        width: 100%;
        padding: 16px 24px;
        font-size: 16px;
    }

    .mmlms-practice-modern .mmlms-instructions-container .mmlms-cbt-instructions-content {
        padding: 20px 24px;
    }
}

@media screen and (max-width: 480px) {
    .mmlms-practice-modern .mmlms-screen-instructions {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-instructions-container {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-header-card {
        padding: 16px 20px;
    }

    .mmlms-practice-modern .mmlms-instructions-body {
        padding: 20px;
    }

    .mmlms-practice-modern .mmlms-instructions-card,
    .mmlms-practice-modern .mmlms-start-section,
    .mmlms-practice-modern .mmlms-instructions-container .mmlms-start-section {
        padding: 20px;
    }

    .mmlms-practice-modern .mmlms-header-title .mmlms-header-label {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .mmlms-practice-modern .mmlms-header-row {
        gap: 4px 12px;
    }

    .mmlms-practice-modern .mmlms-header-item {
        flex-basis: auto;
    }

    .mmlms-practice-modern .mmlms-instruction-item {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-btn-start {
        align-self: stretch;
        padding: 14px 20px;
    }

    .mmlms-practice-modern .mmlms-start-section {
        margin-top: 24px;
        padding-top: 24px;
    }
}
/**
 * Step 3 -- Questions Screen + Sidebar
 *
 * Migrated from practice-modern-ui.css (lines 619-1344, 3356-3995).
 * Every selector is parent-scoped to `.mmlms-practice-modern`.
 * Uses --mmlms-* design tokens from ui-foundation.css / practice-next.css.
 * Zero !important declarations.
 *
 * @package MMLMS\Practice
 * @since   7.0.0
 */

/* ==========================================================================
   ANIMATIONS (prefixed, Step-3-specific)
   ========================================================================== */

@keyframes mmlms-slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes mmlms-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ---------- Top Nav (sticky, glass-morphism) ---------- */

.mmlms-practice-modern .mmlms-top-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mmlms-border-light, #e9eef6);
    padding: var(--mmlms-space-md) var(--mmlms-space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--mmlms-shadow-sm);
}

.mmlms-practice-modern .mmlms-screen-questions .mmlms-top-nav {
    position: sticky;
    top: 0;
    z-index: 20;
}

.mmlms-practice-modern .mmlms-top-nav-info {
    display: flex;
    flex-direction: column;
    gap: var(--mmlms-space-xs);
}

.mmlms-practice-modern .mmlms-top-nav-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-modern .mmlms-top-nav-meta {
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
    display: flex;
    align-items: center;
    gap: var(--mmlms-space-sm);
}

.mmlms-practice-modern .mmlms-meta-item {
    display: inline-flex;
    align-items: center;
    border-radius: var(--mmlms-radius-full, 9999px);
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    color: var(--mmlms-text-secondary, #4b5563);
    padding: 3px 10px;
    font-weight: 600;
}

.mmlms-practice-modern .mmlms-meta-separator {
    color: var(--mmlms-gray-300, #cbd5e1);
}

/* ---------- Screen Questions Container ---------- */

.mmlms-practice-modern .mmlms-screen-questions {
    background: linear-gradient(180deg, var(--mmlms-bg, #f4f7fb) 0%, var(--mmlms-bg-white, #ffffff) 100%);
    min-height: 100vh;
    max-width: var(--mmlms-max-width, 1240px);
    margin: 0 auto;
}

.mmlms-practice-modern .mmlms-screen-questions .mmlms-session-shell {
    background: var(--mmlms-card-bg, #fff);
}

/* ---------- Main Layout (grid) ---------- */

.mmlms-practice-modern .mmlms-main-layout {
    max-width: var(--mmlms-max-width, 1240px);
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(320px, 35fr);
    gap: var(--mmlms-space-lg);
    padding: var(--mmlms-container-padding, 24px);
    background: var(--mmlms-card-bg, #fff);
    align-items: stretch;
    overflow: hidden;
}

.mmlms-practice-modern .mmlms-palette-card-top {
    margin: 8px 24px 0;
}

/* ---------- Question Panel ---------- */

.mmlms-practice-modern .mmlms-question-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    overflow-y: visible;
}

.mmlms-practice-modern .mmlms-question-box {
    min-height: 200px;
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-radius: 14px;
    padding: 18px;
}

/* ---------- Question Toolbar ---------- */

.mmlms-practice-modern .mmlms-question-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--mmlms-bg-subtle, #eef3f9);
    padding: 18px 22px;
    border-radius: var(--mmlms-radius-lg, 16px);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-bottom: 2px solid var(--mmlms-border, #dbe4f0);
    box-shadow: var(--mmlms-shadow-sm);
    gap: var(--mmlms-space-md);
}

.mmlms-practice-modern .mmlms-question-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mmlms-border-light, #e9eef6);
    flex-wrap: wrap;
}

.mmlms-practice-modern .mmlms-question-meta-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
    flex-shrink: 0;
}

/* ---------- Timer ---------- */

.mmlms-practice-modern .mmlms-question-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mmlms-text-secondary, #4b5563);
    font-size: 14px;
    font-weight: 500;
    background: var(--mmlms-bg-subtle, #f1f5f9);
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--mmlms-border-light, #e2e8f0);
    white-space: nowrap;
}

.mmlms-practice-modern .mmlms-question-timer .dashicons {
    color: var(--mmlms-primary, #2563eb);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mmlms-practice-modern .mmlms-timer-label {
    color: var(--mmlms-text-muted, #6b7280);
    font-size: 13px;
}

.mmlms-practice-modern .mmlms-timer-value {
    font-family: var(--mmlms-font-mono, 'JetBrains Mono', Consolas, monospace);
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
    background: var(--mmlms-bg, #f4f7fb);
    padding: 4px 10px;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.mmlms-practice-modern .mmlms-timer-value.warning {
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-timer-value.danger {
    color: var(--mmlms-danger, #ef4444);
    animation: mmlms-pulse 1s ease-in-out infinite;
}

/* ---------- Doubt Toggle ---------- */

.mmlms-practice-modern .mmlms-doubt-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.mmlms-practice-modern .mmlms-doubt-toggle input[type="checkbox"] {
    display: none;
}

.mmlms-practice-modern .mmlms-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--mmlms-gray-300, #cbd5e1);
    border-radius: 12px;
    transition: background 0.2s ease;
}

.mmlms-practice-modern .mmlms-toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--mmlms-card-bg, #fff);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mmlms-practice-modern .mmlms-doubt-toggle input:checked + .mmlms-toggle-slider {
    background: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-doubt-toggle input:checked + .mmlms-toggle-slider::after {
    left: 22px;
}

.mmlms-practice-modern .mmlms-toggle-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--mmlms-text-secondary, #4b5563);
}

/* ---------- Question Content Wrapper ---------- */

.mmlms-practice-modern .mmlms-question-content-wrapper {
    background: var(--mmlms-bg-subtle, #eef3f9);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 30px 32px;
    border: 1px solid var(--mmlms-border, #dbe4f0);
    box-shadow: var(--mmlms-shadow-sm);
    flex: 1;
    animation: mmlms-slideInUp 0.3s ease-out;
}

/* ---------- Question Number ---------- */

.mmlms-practice-modern .mmlms-question-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

/* ---------- Question Difficulty Badge ---------- */

.mmlms-practice-modern .mmlms-question-difficulty {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mmlms-practice-modern .mmlms-question-difficulty.easy {
    background: rgba(34, 197, 94, 0.15);
    color: var(--mmlms-success, #16a34a);
}

.mmlms-practice-modern .mmlms-question-difficulty.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.mmlms-practice-modern .mmlms-question-difficulty.hard {
    background: rgba(239, 68, 68, 0.15);
    color: var(--mmlms-danger, #dc2626);
}

/* Dark mode for difficulty badge */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-difficulty.easy {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-difficulty.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-difficulty.hard {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* ---------- Question Text ---------- */

.mmlms-practice-modern .mmlms-question-text {
    font-size: 18px;
    line-height: 1.8;
    color: var(--mmlms-text, #1f2937);
    margin-bottom: 20px;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* ---------- Passage Box ---------- */

.mmlms-practice-modern .mmlms-passage-box {
    background: var(--mmlms-bg-subtle, #eef3f9);
    border: 1px dashed var(--mmlms-gray-300, #cbd5e1);
    border-left: 4px solid var(--mmlms-secondary, #0ea5a4);
    border-radius: var(--mmlms-radius, 12px);
    padding: var(--mmlms-space-md);
    margin: var(--mmlms-space-md) 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mmlms-text-secondary, #4b5563);
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Sub-question wrapper (paragraph type) */
.mmlms-practice-modern .mmlms-sub-question {
    background: var(--mmlms-bg-subtle, #eef3f9);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius-md, 12px);
    padding: var(--mmlms-space-md);
    margin: var(--mmlms-space-md) 0;
}

.mmlms-practice-modern .mmlms-sub-question .mmlms-option {
    margin-top: var(--mmlms-space-sm);
}

.mmlms-practice-modern .mmlms-sub-type-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mmlms-text-muted, #64748b);
    background: var(--mmlms-bg, #f1f5f9);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------- Question Image ---------- */

.mmlms-practice-modern .mmlms-question-image {
    width: 100%;
    max-width: 400px;
    margin: var(--mmlms-space-md) 0;
    border-radius: var(--mmlms-radius, 12px);
    box-shadow: var(--mmlms-shadow-sm);
}

/* ---------- Options Container ---------- */

.mmlms-practice-modern .mmlms-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: var(--mmlms-space-lg) 0;
}

/* ---------- Option (default, hover, selected, correct, wrong) ---------- */

.mmlms-practice-modern .mmlms-option {
    padding: var(--mmlms-space-md);
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius, 12px);
    box-shadow: var(--mmlms-shadow-sm);
    cursor: pointer;
    transition: var(--mmlms-transition, 200ms ease);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    touch-action: manipulation;
}

.mmlms-practice-modern .mmlms-option:hover {
    background: var(--mmlms-primary-ghost, #eff6ff);
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: var(--mmlms-shadow);
}

.mmlms-practice-modern .mmlms-option.selected {
    background: var(--mmlms-primary-subtle, #dbeafe);
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #eff6ff);
}

.mmlms-practice-modern .mmlms-option.correct {
    background: var(--mmlms-success-light, #d1fae5);
    border-color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-option.wrong {
    background: var(--mmlms-danger-light, #fee2e2);
    border-color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-option-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
}

.mmlms-practice-modern .mmlms-option-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.mmlms-practice-modern .mmlms-option-badge.correct {
    color: var(--mmlms-success, #10b981);
    background: rgba(16, 185, 129, 0.15);
}

.mmlms-practice-modern .mmlms-option-badge.wrong {
    color: var(--mmlms-danger, #ef4444);
    background: rgba(239, 68, 68, 0.15);
}

.mmlms-practice-modern .mmlms-option[data-result-label]::before,
.mmlms-practice-student-v2 .mmlms-option[data-result-label]::before {
    content: none !important;
}

.mmlms-practice-modern .mmlms-option.correct.selected,
.mmlms-practice-modern .mmlms-option.wrong.selected,
.mmlms-practice-student-v2 .mmlms-option.correct.selected,
.mmlms-practice-student-v2 .mmlms-option.wrong.selected {
    box-shadow: none !important;
}

.mmlms-practice-modern .mmlms-option.correct.selected,
.mmlms-practice-student-v2 .mmlms-option.correct.selected {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
}

.mmlms-practice-modern .mmlms-option.wrong.selected,
.mmlms-practice-student-v2 .mmlms-option.wrong.selected {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
}

/* Adjust layout so badge can sit on the right */
.mmlms-practice-modern .mmlms-option {
    display: flex;
    align-items: center;
}
.mmlms-practice-modern .mmlms-option-text {
    flex-grow: 1;
}

/* Styling for the bottom feedback box */
.mmlms-practice-modern .mmlms-answer-feedback-inline {
    margin-top: 16px;
    padding: 16px;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.mmlms-practice-modern .mmlms-answer-feedback-inline.correct {
    background: var(--mmlms-success-light, #d1fae5);
    border-color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-answer-feedback-inline.incorrect {
    background: var(--mmlms-danger-light, #fee2e2);
    border-color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-feedback-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
}

.mmlms-practice-modern .mmlms-feedback-status.correct {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-feedback-status.incorrect {
    color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-feedback-status .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
}

.mmlms-practice-modern .mmlms-feedback-correct-answer {
    margin-top: 12px;
    font-size: 14px;
    color: #475569;
}


/* ---------- Option Letter ---------- */

.mmlms-practice-modern .mmlms-option-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: var(--mmlms-primary-subtle, #dbeafe);
    color: var(--mmlms-primary-dark, #1d4ed8);
    border-radius: var(--mmlms-radius-sm, 8px);
    font-weight: 700;
    font-size: 15px;
    border: 1px solid var(--mmlms-border, #dbe4f0);
    flex-shrink: 0;
    transition: var(--mmlms-transition-fast, 150ms ease);
}

.mmlms-practice-modern .mmlms-option:hover .mmlms-option-letter,
.mmlms-practice-modern .mmlms-option.selected .mmlms-option-letter {
    transform: scale(1.1);
    background: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-card-bg, #fff);
}

/* ---------- Option Text ---------- */

.mmlms-practice-modern .mmlms-option-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mmlms-text, #1f2937);
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* ---------- Question Actions ---------- */

.mmlms-practice-modern .mmlms-question-actions {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--mmlms-border-light, #e9eef6);
    margin-top: 20px;
}

/* ---------- Arrow Navigation ---------- */

.mmlms-practice-modern .mmlms-arrow-nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding-top: var(--mmlms-space-md);
}

.mmlms-practice-modern .mmlms-arrow {
    width: 48px;
    height: 48px;
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    color: var(--mmlms-text-muted, #6b7280);
    border-radius: var(--mmlms-radius, 12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mmlms-shadow-sm);
    transition: var(--mmlms-transition-fast, 150ms ease);
}

.mmlms-practice-modern .mmlms-arrow:hover:not(:disabled) {
    background: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-card-bg, #fff);
    box-shadow: var(--mmlms-shadow);
    transform: translateY(-2px);
}

.mmlms-practice-modern .mmlms-arrow:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------- Sidebar Panel (flows with content) ---------- */

.mmlms-practice-modern .mmlms-sidebar-panel {
    display: flex;
    flex-direction: column;
    gap: var(--mmlms-space-md);
    overflow-y: visible;
    position: static;
    max-height: none;
    height: 100%;
    align-self: stretch;
}

.mmlms-practice-modern .mmlms-progress-card {
    order: 1;
}

.mmlms-practice-modern .mmlms-solution-card {
    order: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    height: 100%;
}

/* ---------- Palette / Solution / Progress Cards ---------- */

.mmlms-practice-modern .mmlms-palette-card,
.mmlms-practice-modern .mmlms-solution-card,
.mmlms-practice-modern .mmlms-progress-card {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius, 12px);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    animation: mmlms-slideInUp 0.4s ease-out;
}

.mmlms-practice-modern .mmlms-solution-card {
    animation-delay: 0.05s;
}

.mmlms-practice-modern .mmlms-progress-card {
    animation-delay: 0.1s;
}

/* ---------- Card Headers ---------- */

.mmlms-practice-modern .mmlms-palette-header,
.mmlms-practice-modern .mmlms-solution-header,
.mmlms-practice-modern .mmlms-progress-header {
    margin-bottom: var(--mmlms-space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mmlms-practice-modern .mmlms-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-modern .mmlms-btn-toggle {
    border: 1px solid var(--mmlms-border, #dbe4f0);
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text-muted, #6b7280);
    width: 30px;
    height: 30px;
    border-radius: var(--mmlms-radius-sm, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--mmlms-transition-fast, 150ms ease);
}

.mmlms-practice-modern .mmlms-btn-toggle:hover {
    border-color: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-primary, #2563eb);
    background: var(--mmlms-primary-ghost, #eff6ff);
}

.mmlms-practice-modern .mmlms-btn-toggle .dashicons {
    width: 16px;
    height: 16px;
    font-size: 16px;
}

.mmlms-practice-modern .mmlms-palette-header h4,
.mmlms-practice-modern .mmlms-solution-header h4,
.mmlms-practice-modern .mmlms-progress-header h4 {
    color: var(--mmlms-text, #1f2937);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--mmlms-space-sm);
}

.mmlms-practice-modern .mmlms-palette-header h4::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
}

/* ---------- Palette Legend ---------- */

.mmlms-practice-modern .mmlms-palette-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: var(--mmlms-space-md);
    border-bottom: 1px solid var(--mmlms-border, #dbe4f0);
    font-size: 12px;
}

.mmlms-practice-modern .mmlms-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mmlms-text-secondary, #4b5563);
}

.mmlms-practice-modern .mmlms-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.mmlms-practice-modern .mmlms-legend-dot.unsolved {
    background: var(--mmlms-border, #dbe4f0);
    border: 1px solid var(--mmlms-gray-300, #cbd5e1);
}

.mmlms-practice-modern .mmlms-legend-dot.correct {
    background: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-legend-dot.wrong {
    background: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-legend-dot.doubt {
    background: var(--mmlms-warning, #f59e0b);
}

/* ---------- Palette Grid ---------- */

.mmlms-practice-modern .mmlms-palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

/* ---------- Palette Buttons (all states) ---------- */

.mmlms-practice-modern .mmlms-palette-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--mmlms-radius-sm, 8px);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text-secondary, #4b5563);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: var(--mmlms-transition-fast, 150ms ease);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    flex-shrink: 0;
}

.mmlms-practice-modern .mmlms-palette-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8ch;
    line-height: 1;
}

.mmlms-practice-modern .mmlms-palette-btn:hover:not(.active):not(.correct):not(.wrong):not(.doubt) {
    background: var(--mmlms-primary-ghost, #eff6ff);
    border-color: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-primary, #2563eb);
    transform: translateY(-2px);
}

.mmlms-practice-modern .mmlms-palette-btn.active {
    background: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-card-bg, #fff);
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #eff6ff);
}

.mmlms-practice-modern .mmlms-palette-btn.correct {
    background: var(--mmlms-success, #10b981);
    border-color: var(--mmlms-success, #10b981);
    color: var(--mmlms-card-bg, #fff);
}

.mmlms-practice-modern .mmlms-palette-btn.wrong {
    background: var(--mmlms-danger, #ef4444);
    border-color: var(--mmlms-danger, #ef4444);
    color: var(--mmlms-card-bg, #fff);
}

.mmlms-practice-modern .mmlms-palette-btn.doubt {
    background: var(--mmlms-warning, #f59e0b);
    border-color: var(--mmlms-warning, #f59e0b);
    color: var(--mmlms-card-bg, #fff);
}

/* ========================================
   FIX 9: Palette touch targets on mobile/tablet
   ======================================== */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-palette-btn {
        width: 44px;
        height: 44px;
    }
    .mmlms-practice-modern .mmlms-palette-grid {
        gap: 8px;
    }
}
@media (max-width: 480px) {
    .mmlms-practice-modern .mmlms-palette-btn {
        width: 44px;
        height: 44px;
        font-size: 13px;
    }
    .mmlms-practice-modern .mmlms-palette-grid {
        gap: 6px;
    }
    .mmlms-practice-modern .mmlms-palette-card {
        padding: 16px;
    }
    .mmlms-practice-modern .mmlms-palette-card-top {
        margin-left: 16px;
        margin-right: 16px;
    }
    .mmlms-practice-modern .mmlms-palette-legend {
        gap: 8px;
    }
}

/* ---------- Solution Card ---------- */

.mmlms-practice-modern .mmlms-solution-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mmlms-text-secondary, #4b5563);
    max-height: none;
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-x: visible;
    max-width: 100%;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.mmlms-practice-modern .mmlms-solution-placeholder {
    background: var(--mmlms-bg-subtle, #eef3f9);
    border: 1px dashed var(--mmlms-gray-300, #cbd5e1);
    border-radius: var(--mmlms-radius, 12px);
    padding: 40px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmlms-practice-modern .mmlms-solution-placeholder .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
    color: var(--mmlms-gray-300, #cbd5e1);
}

.mmlms-practice-modern .mmlms-solution-locked {
    background: var(--mmlms-danger-light, #fee2e2);
    border: 1px dashed var(--mmlms-danger, #ef4444);
    border-radius: var(--mmlms-radius, 12px);
    padding: 32px 20px;
    text-align: center;
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mmlms-practice-modern .mmlms-solution-locked .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    margin-bottom: var(--mmlms-space-md);
    color: var(--mmlms-gray-300, #cbd5e1);
}

.mmlms-practice-modern .mmlms-solution-locked p {
    color: var(--mmlms-text-muted, #6b7280);
    margin: 0 0 12px;
}

.mmlms-practice-modern .mmlms-tier-badge {
    display: inline-block;
    background: var(--mmlms-danger-light, #fee2e2);
    color: #991b1b;
    padding: 4px 10px;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: var(--mmlms-space-sm);
}

.mmlms-practice-modern .mmlms-solution-wrapper {
    margin-top: 20px;
    border-top: 1px solid var(--mmlms-border-light, #e9eef6);
    padding-top: 20px;
    transition: var(--mmlms-transition, 200ms ease);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------- Progress Card ---------- */

.mmlms-practice-modern .mmlms-progress-header span {
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
    display: block;
    font-size: 13px;
}

.mmlms-practice-modern .mmlms-progress-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-progress-current {
    color: var(--mmlms-primary, #2563eb);
    font-weight: 700;
}

/* ---------- Progress Bar ---------- */

.mmlms-practice-modern .mmlms-progress-bar-container {
    height: 10px;
    border-radius: 5px;
    background: var(--mmlms-border, #dbe4f0);
    overflow: hidden;
    margin: 12px 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mmlms-practice-modern .mmlms-progress-bar {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-secondary, #0ea5a4) 100%);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

/* ---------- Progress Counter ---------- */

.mmlms-practice-modern .mmlms-progress-counter {
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------- Explanation Toggle Button ---------- */

.mmlms-practice-modern .mmlms-btn-text-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--mmlms-space-sm);
    padding: 8px 16px;
    background: var(--mmlms-primary-ghost, #eff6ff);
    color: var(--mmlms-primary, #2563eb);
    border: 1px solid var(--mmlms-primary-subtle, #dbeafe);
    border-radius: var(--mmlms-radius, 12px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--mmlms-transition, 200ms ease);
}

.mmlms-practice-modern .mmlms-btn-text-icon:hover {
    background: var(--mmlms-primary-subtle, #dbeafe);
    box-shadow: var(--mmlms-shadow-sm);
}

.mmlms-practice-modern .mmlms-btn-text-icon.active {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    border-color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-btn-text-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* ---------- Math Overflow Handling ---------- */

.mmlms-practice-modern .mmlms-question-text .mjx-chtml {
    display: inline-block;
    vertical-align: middle;
}

/* Container-level overflow: horizontal scroll ONLY when content overflows */
.mmlms-practice-modern .mmlms-solution-content,
.mmlms-practice-modern .mmlms-question-text,
.mmlms-practice-modern .mmlms-explanation-content {
    overflow-x: auto;
}

/* Math elements must stay within their containers to prevent page-level overflow */
.mmlms-practice-modern mjx-container,
.mmlms-practice-modern .mjx-chtml,
.mmlms-practice-modern .math-content {
    max-width: 100% !important;
}

/* Force block equations to flow inline so punctuation (like periods) stays attached */
.mmlms-practice-modern .mmlms-solution-content mjx-container[display="true"] {
    display: inline-block !important;
    margin: 0 !important;
}

/* ---------- Questions Header (inside session-shell) ---------- */

.mmlms-practice-modern .mmlms-questions-header {
    margin: 0 0 var(--mmlms-space-lg) 0;
    border-radius: var(--mmlms-radius-lg, 16px);
    background: linear-gradient(135deg, #2563eb 0%, #0ea5a4 100%);
    color: var(--mmlms-card-bg, #fff);
    padding: 24px 32px;
    box-shadow: none;
    border: none;
}

.mmlms-practice-modern .mmlms-practice-header .mmlms-questions-header {
    margin-bottom: 0;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-header-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-header-title .mmlms-header-label {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.3px;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    margin-bottom: 12px;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-header-value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-badge-difficulty {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 12px;
    font-weight: 600;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-badge-difficulty.medium {
    background: rgba(245, 158, 11, 0.4);
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-badge-difficulty.hard {
    background: rgba(239, 68, 68, 0.4);
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-btn-end-session {
    background: var(--mmlms-danger, #ef4444);
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--mmlms-transition, 200ms ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    margin-left: 16px;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-btn-end-session:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

/* Fullscreen button */
.mmlms-practice-modern .mmlms-questions-header .mmlms-btn-fullscreen {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--mmlms-transition, 200ms ease);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Header row main layout - title on left, actions on right */
.mmlms-practice-modern .mmlms-questions-header .mmlms-header-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-btn-fullscreen:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-btn-fullscreen .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* ========================================
   FIX 13: Toggle & fullscreen button touch targets
   ======================================== */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-btn-toggle {
        width: 36px;
        height: 36px;
    }
    .mmlms-practice-modern .mmlms-questions-header .mmlms-btn-fullscreen {
        width: 44px;
        height: 44px;
    }
}
@media (max-width: 480px) {
    .mmlms-practice-modern .mmlms-btn-toggle {
        width: 44px;
        height: 44px;
    }
}

/* ---------- Header Layout (rows / items) ---------- */

.mmlms-practice-modern .mmlms-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
    margin-bottom: 8px;
}

.mmlms-practice-modern .mmlms-header-row:last-child {
    margin-bottom: 0;
}

.mmlms-practice-modern .mmlms-header-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
}

.mmlms-practice-modern .mmlms-header-item.mmlms-header-full {
    grid-column: 1 / -1;
    flex-basis: 100%;
}

.mmlms-practice-modern .mmlms-header-card {
    padding: 24px 32px;
}

.mmlms-practice-modern .mmlms-header-title {
    display: block;
    width: 100%;
}

.mmlms-practice-modern .mmlms-questions-header .mmlms-header-title {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.mmlms-practice-modern .mmlms-header-title .mmlms-header-label {
    margin-bottom: 0;
}

.mmlms-practice-modern .mmlms-header-item:not(.mmlms-header-title) .mmlms-header-label,
.mmlms-practice-modern .mmlms-header-item:not(.mmlms-header-title) .mmlms-header-value {
    display: inline;
    margin: 0;
    line-height: 1.45;
}

.mmlms-practice-modern .mmlms-header-item:not(.mmlms-header-title) .mmlms-header-label {
    white-space: nowrap;
}

.mmlms-practice-modern .mmlms-header-item:not(.mmlms-header-title) .mmlms-header-value {
    min-width: 0;
}

.mmlms-practice-modern .mmlms-header-item.mmlms-header-full .mmlms-header-value {
    display: inline;
}

.mmlms-practice-modern .mmlms-instructions-wrapper .mmlms-badge-difficulty,
.mmlms-practice-modern .mmlms-questions-header .mmlms-badge-difficulty {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 999px;
}

/* ---------- Buttons (submit, start, upgrade) ---------- */

.mmlms-practice-modern .mmlms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mmlms-space-sm);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--mmlms-radius, 12px);
    border: none;
    cursor: pointer;
    transition: var(--mmlms-transition, 200ms ease);
}

.mmlms-practice-modern .mmlms-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mmlms-practice-modern .mmlms-btn-submit {
    background: var(--mmlms-success, #10b981);
    color: var(--mmlms-card-bg, #fff);
    padding: 14px 32px;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.mmlms-practice-modern .mmlms-btn-submit:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.mmlms-practice-modern .mmlms-btn-start {
    background: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-card-bg, #fff);
    padding: 16px 32px;
    font-size: 17px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.mmlms-practice-modern .mmlms-btn-start:hover:not(:disabled) {
    background: var(--mmlms-primary-dark, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

.mmlms-practice-modern .mmlms-btn-upgrade {
    background: var(--mmlms-warning, #f59e0b);
    color: var(--mmlms-card-bg, #fff);
    text-decoration: none;
    padding: 10px 20px;
    margin-top: 12px;
    display: inline-block;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

/* ---------- Dark: Top Nav ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-top-nav {
    background: rgba(30, 41, 59, 0.92);
    border-bottom-color: var(--mmlms-border, #334155);
}

/* ---------- Dark: Screen Questions ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-screen-questions {
    background: linear-gradient(180deg, var(--mmlms-bg, #181f2a) 0%, var(--mmlms-bg-white, #232b3a) 100%);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-screen-questions .mmlms-session-shell {
    background: var(--mmlms-card-bg, #232b3a);
}

/* ---------- Dark: Main Layout ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-main-layout {
    background: var(--mmlms-card-bg, #232b3a);
}

/* ---------- Dark: Question Panel + Box ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-panel {
    background: var(--mmlms-card-bg, #232b3a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-box {
    background: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-border, #334155);
}

/* ---------- Dark: Question Toolbar ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-toolbar {
    background: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-border, #334155);
}

/* ---------- Dark: Timer ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-timer-value {
    background: var(--mmlms-bg, #181f2a);
    color: var(--mmlms-text, #f3f4f6);
}

/* ---------- Dark: Toggle Slider ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-toggle-slider {
    background: var(--mmlms-gray-300, #475569);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-toggle-slider::after {
    background: var(--mmlms-gray-100, #1e293b);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-toggle-label {
    color: var(--mmlms-text-secondary, #d1d5db);
}

/* ---------- Dark: Question Content Wrapper ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-content-wrapper {
    background: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-border, #334155);
}

/* ---------- Dark: Question Number + Text ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-number {
    color: var(--mmlms-text-muted, #9ca3af);
    border-bottom-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-text {
    color: var(--mmlms-text, #f3f4f6);
}

/* ---------- Dark: Passage Box ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-passage-box {
    background: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-secondary, #d1d5db);
}

/* ---------- Dark: Options ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option:hover {
    background: var(--mmlms-primary-ghost, #172554);
    border-color: var(--mmlms-primary, #60a5fa);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.selected {
    background: var(--mmlms-primary-subtle, #1e3a5f);
    border-color: var(--mmlms-primary, #60a5fa);
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #172554);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct {
    background: var(--mmlms-success-light, #064e3b);
    border-color: var(--mmlms-success, #34d399);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong {
    background: var(--mmlms-danger-light, #7f1d1d);
    border-color: var(--mmlms-danger, #f87171);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option-letter {
    background: var(--mmlms-primary-subtle, #1e3a5f);
    color: var(--mmlms-primary-light, #93c5fd);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option:hover .mmlms-option-letter,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.selected .mmlms-option-letter {
    background: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-bg, #181f2a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option-text {
    color: var(--mmlms-text, #f3f4f6);
}

/* ---------- Dark: Question Actions ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-actions {
    border-top-color: var(--mmlms-border, #334155);
}

/* ---------- Dark: Arrow Nav ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-arrow {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-muted, #9ca3af);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-arrow:hover:not(:disabled) {
    background: var(--mmlms-primary, #60a5fa);
    border-color: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-bg, #181f2a);
}

/* ---------- Dark: Sidebar Cards ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-card,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-card,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-card {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---------- Dark: Headings + Toggle ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-heading {
    color: var(--mmlms-text, #f3f4f6);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-toggle {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-muted, #9ca3af);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-toggle:hover {
    background: var(--mmlms-primary-ghost, #172554);
    border-color: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-primary, #60a5fa);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-header h4,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-header h4,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-header h4 {
    color: var(--mmlms-text, #f3f4f6);
}

/* ---------- Dark: Palette Legend ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-legend {
    border-bottom-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-legend-item {
    color: var(--mmlms-text-secondary, #d1d5db);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-legend-dot.unsolved {
    background: var(--mmlms-border, #334155);
    border-color: var(--mmlms-gray-400, #64748b);
}

/* ---------- Dark: Palette Buttons ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-btn {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-secondary, #d1d5db);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-btn:hover:not(.active):not(.correct):not(.wrong):not(.doubt) {
    background: var(--mmlms-primary-ghost, #172554);
    border-color: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-primary, #60a5fa);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-btn.active {
    background: var(--mmlms-primary, #60a5fa);
    border-color: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-bg, #181f2a);
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #172554);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-btn.correct {
    background: var(--mmlms-success, #34d399);
    border-color: var(--mmlms-success, #34d399);
    color: var(--mmlms-bg, #181f2a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-btn.wrong {
    background: var(--mmlms-danger, #f87171);
    border-color: var(--mmlms-danger, #f87171);
    color: var(--mmlms-bg, #181f2a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-palette-btn.doubt {
    background: var(--mmlms-warning, #fbbf24);
    border-color: var(--mmlms-warning, #fbbf24);
    color: var(--mmlms-bg, #181f2a);
}

/* ---------- Dark: Solution Card ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-content {
    color: var(--mmlms-text-secondary, #d1d5db);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-placeholder {
    background: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-muted, #9ca3af);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-placeholder .dashicons {
    color: var(--mmlms-gray-400, #64748b);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-locked {
    background: var(--mmlms-danger-light, #7f1d1d);
    border-color: var(--mmlms-danger, #f87171);
    color: var(--mmlms-text-muted, #9ca3af);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-locked .dashicons {
    color: var(--mmlms-gray-400, #64748b);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-locked p {
    color: var(--mmlms-text-muted, #9ca3af);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-tier-badge {
    background: var(--mmlms-danger-light, #7f1d1d);
    color: var(--mmlms-danger, #f87171);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-wrapper {
    border-top-color: var(--mmlms-border, #334155);
}

/* ---------- Dark: Progress Card ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-header span {
    color: var(--mmlms-text, #f3f4f6);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-text {
    color: var(--mmlms-primary, #60a5fa);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-bar-container {
    background: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-bar {
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-progress-counter {
    color: var(--mmlms-text-muted, #9ca3af);
}

/* ---------- Dark: Explanation Toggle ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-text-icon {
    background: var(--mmlms-primary-ghost, #172554);
    color: var(--mmlms-primary, #60a5fa);
    border-color: var(--mmlms-primary-subtle, #1e3a5f);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-text-icon:hover {
    background: var(--mmlms-primary-subtle, #1e3a5f);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-text-icon.active {
    background: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-primary, #60a5fa);
}

/* ---------- Dark: Questions Header ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-questions-header {
    background: linear-gradient(135deg, #4338ca 0%, #5b21b6 100%);
}

/* ---------- Dark: Buttons ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-submit {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-questions-header .mmlms-btn-end-session {
    background: var(--mmlms-danger, #ef4444);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-questions-header .mmlms-btn-end-session:hover {
    background: #dc2626;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-questions-header .mmlms-btn-fullscreen {
    background: rgba(255, 255, 255, 0.15);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-questions-header .mmlms-btn-fullscreen:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Fullscreen mode styles for practice container */
#mmlms-practice-app.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    overflow: auto;
    background: var(--mmlms-bg, #f8fafc);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#mmlms-practice-app.is-fullscreen .mmlms-practice-header {
    position: sticky;
    top: 0;
}

[data-mmlms-theme="dark"] #mmlms-practice-app.is-fullscreen {
    background: var(--mmlms-bg, #0f172a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-start {
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.25);
}

/* ---------- Dark: Meta Item ---------- */

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-meta-item {
    background: var(--mmlms-bg, #181f2a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-secondary, #d1d5db);
}

/* ==========================================================================
   RESPONSIVE -- 1024px (sidebar collapse)
   ========================================================================== */

@media screen and (max-width: 1024px) {
    .mmlms-practice-modern .mmlms-main-layout {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .mmlms-practice-modern .mmlms-sidebar-panel {
        order: 2;
        position: static;
        max-height: none;
    }
}

/* ==========================================================================
   RESPONSIVE -- 768px
   ========================================================================== */

@media screen and (max-width: 768px) {
    .mmlms-practice-modern .mmlms-questions-header {
        padding: 20px 24px;
    }

    .mmlms-practice-modern .mmlms-questions-header .mmlms-header-title .mmlms-header-label {
        font-size: 22px;
    }
    
    .mmlms-practice-modern .mmlms-practice-header {
        top: 46px; /* WordPress admin bar height on mobile */
    }

    .mmlms-practice-modern .mmlms-header-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout {
        padding: 32px;
    }

    .mmlms-practice-modern .mmlms-question-content-wrapper {
        padding: 20px;
    }

    .mmlms-practice-modern .mmlms-palette-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .mmlms-practice-modern .mmlms-top-nav {
        padding: var(--mmlms-space-sm) var(--mmlms-space-md);
        flex-wrap: wrap;
        gap: var(--mmlms-space-sm);
    }

    .mmlms-practice-modern .mmlms-top-nav-title {
        font-size: 14px;
    }

    .mmlms-practice-modern .mmlms-arrow {
        width: 42px;
        height: 42px;
    }

    .mmlms-practice-modern .mmlms-passage-box {
        padding: 12px;
        margin: 12px 0;
    }

    .mmlms-practice-modern .mmlms-sub-question {
        padding: 12px;
        margin: 12px 0;
    }
}

/* ==========================================================================
   RESPONSIVE -- 480px
   ========================================================================== */

@media screen and (max-width: 480px) {
    .mmlms-practice-modern .mmlms-questions-header {
        padding: 16px 20px;
    }

    .mmlms-practice-modern .mmlms-questions-header .mmlms-header-title .mmlms-header-label {
        font-size: 20px;
    }
    
    .mmlms-practice-modern .mmlms-practice-header {
        top: 0; /* No admin bar on small screens */
    }

    .mmlms-practice-modern .mmlms-header-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-questions-header .mmlms-header-row-main {
        flex-wrap: wrap;
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-questions-header .mmlms-header-actions {
        margin-left: 0;
    }

    .mmlms-practice-modern .mmlms-question-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout {
        padding: 16px;
    }

    .mmlms-practice-modern .mmlms-question-content-wrapper {
        padding: 16px;
        border-radius: var(--mmlms-radius, 12px);
    }

    .mmlms-practice-modern .mmlms-option {
        padding: 12px;
        gap: var(--mmlms-space-sm);
    }

    .mmlms-practice-modern .mmlms-option-letter {
        min-width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .mmlms-practice-modern .mmlms-question-text {
        font-size: 16px;
        line-height: 1.7;
    }

    .mmlms-practice-modern .mmlms-question-actions {
        flex-wrap: wrap;
    }

    .mmlms-practice-modern .mmlms-arrow {
        width: 40px;
        height: 40px;
    }

    .mmlms-practice-modern .mmlms-palette-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .mmlms-practice-modern .mmlms-palette-btn {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }

    .mmlms-practice-modern .mmlms-top-nav {
        padding: var(--mmlms-space-sm);
    }

    .mmlms-practice-modern .mmlms-top-nav-meta {
        font-size: 11px;
        gap: 4px;
    }

    .mmlms-practice-modern .mmlms-passage-box {
        padding: 10px;
        margin: 10px 0;
        font-size: 13px;
    }

    .mmlms-practice-modern .mmlms-sub-question {
        padding: 10px;
        margin: 10px 0;
    }

    .mmlms-practice-modern .mmlms-sub-type-label {
        font-size: 11px;
        padding: 2px 6px;
        margin-left: 4px;
        margin-top: 4px;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .mmlms-practice-modern .mmlms-top-nav {
        position: static;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-bottom: 1px solid #ccc;
        background: var(--mmlms-card-bg, #fff);
    }

    .mmlms-practice-modern .mmlms-screen-questions {
        background: var(--mmlms-card-bg, #fff);
        min-height: auto;
    }

    .mmlms-practice-modern .mmlms-main-layout {
        display: block;
        padding: 0;
        max-width: 100%;
    }

    .mmlms-practice-modern .mmlms-sidebar-panel {
        position: static;
        max-height: none;
        page-break-before: always;
    }

    .mmlms-practice-modern .mmlms-palette-card,
    .mmlms-practice-modern .mmlms-solution-card,
    .mmlms-practice-modern .mmlms-progress-card {
        box-shadow: none;
        border: 1px solid #ddd;
        animation: none;
        page-break-inside: avoid;
    }

    .mmlms-practice-modern .mmlms-question-panel {
        box-shadow: none;
        page-break-inside: avoid;
    }

    .mmlms-practice-modern .mmlms-question-content-wrapper {
        box-shadow: none;
        border: 1px solid #ddd;
        animation: none;
    }

    .mmlms-practice-modern .mmlms-option {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .mmlms-practice-modern .mmlms-arrow-nav {
        display: none;
    }

    .mmlms-practice-modern .mmlms-btn-text-icon,
    .mmlms-practice-modern .mmlms-btn-submit,
    .mmlms-practice-modern .mmlms-btn-start,
    .mmlms-practice-modern .mmlms-btn-end,
    .mmlms-practice-modern .mmlms-btn-end-session,
    .mmlms-practice-modern .mmlms-btn-fullscreen,
    .mmlms-practice-modern .mmlms-doubt-toggle {
        display: none;
    }

    .mmlms-practice-modern .mmlms-questions-header {
        background: #333;
        color: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mmlms-practice-modern .mmlms-progress-bar {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .mmlms-practice-modern .mmlms-palette-btn.active,
    .mmlms-practice-modern .mmlms-palette-btn.correct,
    .mmlms-practice-modern .mmlms-palette-btn.wrong,
    .mmlms-practice-modern .mmlms-palette-btn.doubt {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* ==========================================================================
   Step 4 — Analysis / Results + Dashboard
   Migrated from practice-modern-ui.css (lines 1345-2878, 3060-3130)
   Parent-scoped to .mmlms-practice-modern
   Tokens: --mmlms-* only (ui-foundation.css)
   ========================================================================== */

/* ----------------------------------------
   Keyframes (mmlms- prefixed)
   ---------------------------------------- */
@keyframes mmlms-slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mmlms-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mmlms-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   ANALYSIS SCREEN
   ========================================================================== */

.mmlms-practice-modern .mmlms-screen-analysis {
    animation: mmlms-slideInUp 0.4s ease-out;
    min-height: 100vh;
}

.mmlms-practice-modern .mmlms-analysis-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* ----------------------------------------
   Analysis Header
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-analysis-header {
    text-align: center;
    margin-bottom: 48px;
}

.mmlms-practice-modern .mmlms-analysis-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--mmlms-text, #111827);
    margin-bottom: 8px;
}

.mmlms-practice-modern .mmlms-analysis-subtitle {
    font-size: 16px;
    color: var(--mmlms-text-secondary, #4b5563);
}

/* ----------------------------------------
   Score Section + Circle
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-score-section {
    text-align: center;
    margin-bottom: 48px;
}

.mmlms-practice-modern .mmlms-score-circle {
    width: 220px;
    height: 220px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--mmlms-shadow-xl);
    position: relative;
    font-weight: 700;
    animation: mmlms-scaleIn 0.5s ease-out;
}

.mmlms-practice-modern .mmlms-score-circle.excellent {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 3px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-score-circle.good {
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    color: #164e63;
    border: 3px solid var(--mmlms-secondary, #0f766e);
}

.mmlms-practice-modern .mmlms-score-circle.needs-improvement {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border: 3px solid var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-score-value {
    font-size: 56px;
    line-height: 1;
}

.mmlms-practice-modern .mmlms-score-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* ----------------------------------------
   Performance Badge
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-performance-badge {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--mmlms-radius-lg, 16px);
    font-size: 13px;
    font-weight: 700;
    margin-top: 12px;
}

.mmlms-practice-modern .mmlms-performance-badge.excellent {
    background: var(--mmlms-success-light, #d1fae5);
    color: #065f46;
}

.mmlms-practice-modern .mmlms-performance-badge.good {
    background: rgba(14, 165, 164, 0.15);
    color: #164e63;
}

.mmlms-practice-modern .mmlms-performance-badge.needs-improvement {
    background: var(--mmlms-warning-light, #fef3c7);
    color: #78350f;
}

/* ----------------------------------------
   Analysis Stats Grid + Stat Boxes
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-analysis-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.mmlms-practice-modern .mmlms-stat-box {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    padding: 24px;
    box-shadow: var(--mmlms-shadow-sm);
    animation: mmlms-slideInUp 0.4s ease-out;
    text-align: center;
    transition: var(--mmlms-transition, 200ms ease);
}

.mmlms-practice-modern .mmlms-stat-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--mmlms-shadow-md);
}

.mmlms-practice-modern .mmlms-stat-icon {
    font-size: 28px;
    margin-bottom: 12px;
    display: block;
}

.mmlms-practice-modern .mmlms-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mmlms-text-secondary, #4b5563);
    margin-bottom: 8px;
    display: block;
}

.mmlms-practice-modern .mmlms-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--mmlms-text, #111827);
    display: block;
}

/* ----------------------------------------
   Analysis Card
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-analysis-card {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 32px;
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    box-shadow: var(--mmlms-shadow);
    margin-bottom: 24px;
    animation: mmlms-slideInUp 0.4s ease-out;
}

.mmlms-practice-modern .mmlms-analysis-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mmlms-text, #111827);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ----------------------------------------
   Analysis Key Stats Grid (Premium)
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-stat-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.mmlms-practice-modern .mmlms-stat-card-premium {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-md, 12px);
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    box-shadow: var(--mmlms-shadow-sm, 0 1px 4px rgba(0,0,0,.06));
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mmlms-practice-modern .mmlms-stat-card-premium:hover {
    transform: translateY(-2px);
    box-shadow: var(--mmlms-shadow, 0 4px 16px rgba(0,0,0,.1));
}

.mmlms-practice-modern .mmlms-stat-card-premium .mmlms-stat-icon {
    font-size: 28px;
    color: var(--mmlms-primary, #2563eb);
    margin-bottom: 4px;
}

.mmlms-practice-modern .mmlms-stat-card-premium .mmlms-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--mmlms-text, #111827);
    line-height: 1;
}

.mmlms-practice-modern .mmlms-stat-card-premium .mmlms-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mmlms-text-muted, #6b7280);
}

.mmlms-practice-modern .mmlms-stat-card-premium.correct .mmlms-stat-icon,
.mmlms-practice-modern .mmlms-stat-card-premium.correct .mmlms-stat-value {
    color: #16a34a;
}
.mmlms-practice-modern .mmlms-stat-card-premium.correct {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.mmlms-practice-modern .mmlms-stat-card-premium.wrong .mmlms-stat-icon,
.mmlms-practice-modern .mmlms-stat-card-premium.wrong .mmlms-stat-value {
    color: #dc2626;
}
.mmlms-practice-modern .mmlms-stat-card-premium.wrong {
    border-color: #fecaca;
    background: #fff5f5;
}

.mmlms-practice-modern .mmlms-stat-card-premium.skipped .mmlms-stat-icon,
.mmlms-practice-modern .mmlms-stat-card-premium.skipped .mmlms-stat-value {
    color: #d97706;
}
.mmlms-practice-modern .mmlms-stat-card-premium.skipped {
    border-color: #fde68a;
    background: #fffbeb;
}

@media (max-width: 600px) {
    .mmlms-practice-modern .mmlms-stat-grid-premium {
        grid-template-columns: repeat(2, 1fr);
    }
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-card-premium {
    background: #1e293b;
    border-color: #334155;
}
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-card-premium.correct { background: #052e16; border-color: #166534; }
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-card-premium.wrong   { background: #1c0a0a; border-color: #7f1d1d; }
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-card-premium.skipped { background: #1c1003; border-color: #78350f; }

/* ----------------------------------------
   Time Stats
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-time-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.mmlms-practice-modern .mmlms-time-item {
    background: var(--mmlms-bg-subtle, #f8fafc);
    border-radius: var(--mmlms-radius, 12px);
    padding: 16px;
    text-align: center;
}

.mmlms-practice-modern .mmlms-time-item.highlight {
    background: #ecfdf5;
    border: 2px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-time-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mmlms-text-secondary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.mmlms-practice-modern .mmlms-time-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--mmlms-primary, #2563eb);
    font-family: 'Courier New', monospace;
}

/* ----------------------------------------
   Breakdown Section
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-breakdown-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--mmlms-border, #dbe4f0);
}

.mmlms-practice-modern .mmlms-breakdown-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-modern .mmlms-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmlms-practice-modern .mmlms-breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mmlms-practice-modern .mmlms-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.mmlms-practice-modern .mmlms-breakdown-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text, #111827);
}

.mmlms-practice-modern .mmlms-breakdown-score {
    font-size: 12px;
    font-weight: 600;
    color: var(--mmlms-text-secondary, #4b5563);
}

.mmlms-practice-modern .mmlms-breakdown-bar-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mmlms-practice-modern .mmlms-breakdown-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--mmlms-border, #dbe4f0);
    overflow: hidden;
}

.mmlms-practice-modern .mmlms-breakdown-fill {
    height: 100%;
    display: block;
    border-radius: 4px;
    background: var(--mmlms-primary, #2563eb);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mmlms-practice-modern .mmlms-breakdown-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--mmlms-text-secondary, #4b5563);
    min-width: 45px;
    text-align: right;
}

/* ----------------------------------------
   Difficulty Grid + Cards
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-difficulty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.mmlms-practice-modern .mmlms-difficulty-card {
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius, 12px);
    padding: 16px;
    text-align: center;
    transition: var(--mmlms-transition, 200ms ease);
}

.mmlms-practice-modern .mmlms-difficulty-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mmlms-shadow);
}

.mmlms-practice-modern .mmlms-difficulty-card.difficulty-easy {
    border-color: #86efac;
    background: #f0fdf4;
}

.mmlms-practice-modern .mmlms-difficulty-card.difficulty-medium {
    border-color: #fcd34d;
    background: #fffbeb;
}

.mmlms-practice-modern .mmlms-difficulty-card.difficulty-hard {
    border-color: #fca5a5;
    background: #fef2f2;
}

.mmlms-practice-modern .mmlms-difficulty-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mmlms-practice-modern .mmlms-difficulty-icon {
    font-size: 20px;
}

.mmlms-practice-modern .mmlms-difficulty-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mmlms-text-secondary, #4b5563);
}

.mmlms-practice-modern .mmlms-difficulty-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mmlms-practice-modern .mmlms-difficulty-score {
    font-size: 24px;
    font-weight: 800;
    color: var(--mmlms-text, #111827);
}

.mmlms-practice-modern .mmlms-difficulty-count {
    font-size: 11px;
    color: var(--mmlms-text-secondary, #4b5563);
}

/* ----------------------------------------
   Areas for Improvement
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-analysis-card.areas-for-improvement {
    border-left: 4px solid var(--mmlms-warning, #f59e0b);
    background: linear-gradient(to right, rgba(245, 158, 11, 0.03), var(--mmlms-card-bg, #fff));
}

.mmlms-practice-modern .mmlms-improvement-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mmlms-practice-modern .mmlms-improvement-item {
    background: var(--mmlms-bg-subtle, #f8fafc);
    border-radius: var(--mmlms-radius, 12px);
    padding: 16px;
    border-left: 4px solid var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-improvement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.mmlms-practice-modern .mmlms-improvement-title-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    flex: 1;
    min-width: 0;
}

.mmlms-practice-modern .mmlms-improvement-chapter {
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.mmlms-practice-modern .mmlms-improvement-chapter .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.mmlms-practice-modern .mmlms-improvement-arrow {
    font-size: 13px;
    color: var(--mmlms-text-muted, #9ca3af);
    font-weight: 400;
}

.mmlms-practice-modern .mmlms-improvement-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--mmlms-text, #111827);
}

.mmlms-practice-modern .mmlms-improvement-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--mmlms-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--mmlms-bg-subtle, #f1f5f9);
    border-radius: 4px;
}

.mmlms-practice-modern .mmlms-improvement-accuracy {
    font-size: 13px;
    font-weight: 600;
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-improvement-suggestion {
    font-size: 13px;
    color: var(--mmlms-text-secondary, #4b5563);
    line-height: 1.6;
    margin: 0;
}

/* Area Type Labels */
.mmlms-practice-modern .mmlms-area-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--mmlms-success, #10b981);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-modern .mmlms-area-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--mmlms-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    background: var(--mmlms-bg-subtle, #f1f5f9);
    border-radius: 4px;
    margin-left: 8px;
}

.mmlms-practice-modern .mmlms-chapter-link {
    color: var(--mmlms-primary, #2563eb);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.mmlms-practice-modern .mmlms-chapter-link:hover {
    color: var(--mmlms-primary-dark, #1d4ed8);
    text-decoration: underline;
}

/* ----------------------------------------
   Analysis Actions
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-analysis-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 24px;
    flex-wrap: wrap;
}

.mmlms-practice-modern .mmlms-analysis-actions .mmlms-btn {
    padding: 14px 32px;
    font-size: 16px;
}

/* ==========================================================================
   PRACTICE DASHBOARD
   ========================================================================== */

.mmlms-practice-modern .mmlms-practice-dashboard {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* ==========================================================================
   FINAL PRACTICE SCREEN ALIGNMENT — #mmlms-practice-app
   ========================================================================== */

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-instructions,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-analysis {
    max-width: var(--mmlms-max-width, 1240px);
    margin: 0 auto;
    width: 100%;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-instructions-wrapper,
#mmlms-practice-app.mmlms-practice-modern .mmlms-session-shell,
#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-shell {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header {
    margin: 0;
    border-radius: 0;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-row:first-child {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 18px;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-title {
    min-width: 0;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-title .mmlms-header-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
    line-height: 1.2;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-actions {
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-btn-end-session,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-btn-fullscreen,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-question-toolbar,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-btn-toggle,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-arrow,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-palette-btn,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-btn-submit,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions #mark-doubt {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout {
    grid-template-columns: minmax(0, 65fr) minmax(320px, 35fr);
    padding: 40px 48px 48px;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-sidebar-panel {
    position: static;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-wrapper,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-content {
    max-height: calc(100vh - 220px);
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-content {
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain;
    padding-right: 5px;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-content .math-content,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-content mjx-container,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-content .mjx-chtml {
    max-width: 100% !important;
    white-space: normal !important;
}

/* Analysis Shell */
#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-shell {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 28px 36px;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 0;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero .mmlms-header-title .mmlms-header-label {
    margin-bottom: 0;
    color: #ffffff;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero .mmlms-header-value {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-weight: 500;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-container {
    max-width: none;
    padding: 40px 48px 48px;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-actions {
    border-top: 1px solid var(--mmlms-border, #dbe4f0);
}

/* ==========================================================================
   STUDENT DASHBOARD HEADER
   ========================================================================== */

.mmlms-practice-modern .mmlms-student-header {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-secondary, #0f766e) 100%);
    color: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-xl, 20px);
    padding: 34px 26px;
    margin-bottom: 24px;
    box-shadow: var(--mmlms-shadow-lg);
    position: relative;
    overflow: hidden;
}

.mmlms-practice-modern .mmlms-student-header::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -12%;
    width: 240px;
    height: 240px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.mmlms-practice-modern .mmlms-student-header h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}

.mmlms-practice-modern .mmlms-student-header p {
    margin: 0;
    opacity: 0.96;
    font-size: 15px;
    position: relative;
    z-index: 1;
}

/* ----------------------------------------
   Stats Grid + Stat Cards (Dashboard)
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 18px;
    box-shadow: var(--mmlms-shadow-sm);
    transition: var(--mmlms-transition, 200ms ease);
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mmlms-shadow-md);
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-icon {
    margin-bottom: 12px;
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--mmlms-text, #111827);
    margin-bottom: 4px;
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-label {
    font-size: 12px;
    color: var(--mmlms-text-secondary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card.success .mmlms-stat-icon,
.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card.success .mmlms-stat-value {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card.warning .mmlms-stat-icon,
.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card.warning .mmlms-stat-value {
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card.danger .mmlms-stat-icon,
.mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card.danger .mmlms-stat-value {
    color: var(--mmlms-danger, #ef4444);
}

/* ========================================
   FIX 12: Dashboard stats grid responsive
   ======================================== */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .mmlms-practice-modern .mmlms-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   Dashboard Card
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-dashboard-card {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    border-radius: var(--mmlms-radius-xl, 20px);
    padding: 22px;
    box-shadow: var(--mmlms-shadow);
}

.mmlms-practice-modern .mmlms-card-title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mmlms-text, #111827);
}

/* ----------------------------------------
   Session List + Session Cards
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-session-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmlms-practice-modern .mmlms-session-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: var(--mmlms-bg-subtle, #f8fafc);
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 16px;
    transition: var(--mmlms-transition-fast, 150ms ease);
}

.mmlms-practice-modern .mmlms-session-card:hover {
    border-color: var(--mmlms-primary-light, #60a5fa);
    box-shadow: var(--mmlms-shadow-sm);
}

.mmlms-practice-modern .mmlms-session-card.completed {
    border-left: 4px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-session-card.in-progress {
    border-left: 4px solid var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-session-info h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: var(--mmlms-text, #111827);
}

.mmlms-practice-modern .mmlms-session-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.mmlms-practice-modern .mmlms-session-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mmlms-text-secondary, #4b5563);
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-radius: 999px;
    padding: 4px 10px;
}

.mmlms-practice-modern .mmlms-session-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mmlms-practice-modern .mmlms-session-score {
    text-align: center;
    min-width: 82px;
}

.mmlms-practice-modern .mmlms-session-score-value {
    font-size: 26px;
    line-height: 1;
    font-weight: 800;
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-session-score-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mmlms-text-light, #9ca3af);
    margin-top: 6px;
    font-weight: 600;
}

/* ----------------------------------------
   Badge
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.mmlms-practice-modern .mmlms-badge-success {
    color: #065f46;
    background: var(--mmlms-success-light, #d1fae5);
    border: 1px solid #86efac;
}

/* ----------------------------------------
   Empty State
   ---------------------------------------- */
.mmlms-practice-modern .mmlms-empty-state {
    text-align: center;
    background: var(--mmlms-bg-subtle, #f8fafc);
    border: 1px dashed var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 32px 18px;
}

.mmlms-practice-modern .mmlms-empty-title {
    margin: 6px 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--mmlms-text, #111827);
}

.mmlms-practice-modern .mmlms-empty-text {
    margin: 0 0 18px;
    color: var(--mmlms-text-secondary, #4b5563);
}

/* ==========================================================================
   REATTEMPT SESSION STYLES
   ========================================================================== */

.mmlms-practice-modern .mmlms-reattempt-loading {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--mmlms-radius, 12px);
    margin-top: 24px;
}

.mmlms-practice-modern .mmlms-reattempt-loading .mmlms-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--mmlms-border, #dbe4f0);
    border-top-color: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
    animation: mmlms-spin 1s linear infinite;
    margin: 0 auto 16px;
}

.mmlms-practice-modern .mmlms-reattempt-loading p {
    color: var(--mmlms-text-secondary, #4b5563);
    font-size: 16px;
    margin: 0;
}

.mmlms-practice-modern #btn-reattempt-session {
    position: relative;
    transition: all 0.2s ease;
}

.mmlms-practice-modern #btn-reattempt-session:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.mmlms-practice-modern #btn-reattempt-session .dashicons {
    transition: transform 0.3s ease;
}

.mmlms-practice-modern #btn-reattempt-session:hover .dashicons {
    transform: rotate(180deg);
}

/* Attempt counter badge */
.mmlms-practice-modern .mmlms-attempt-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-dark, #1d4ed8) 100%);
    color: var(--mmlms-card-bg, #fff);
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 16px;
}

.mmlms-practice-modern .mmlms-attempt-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   RESPONSIVE — 1024px
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .mmlms-practice-modern .mmlms-analysis-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .mmlms-practice-modern .mmlms-difficulty-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .mmlms-practice-modern .mmlms-analysis-actions {
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout,
    #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-container,
    #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero {
        padding: 32px;
    }

    /* Collapse to single-column on tablet/mobile — overrides the ID-specific 2-col rule at line 4089 */
    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout {
        grid-template-columns: 1fr;
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-sidebar-panel {
        order: 2;
        position: static;
        max-height: none;
    }
}

/* ==========================================================================
   RESPONSIVE — 768px
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Analysis screen */
    .mmlms-practice-modern .mmlms-analysis-container {
        padding: 24px 12px;
    }

    .mmlms-practice-modern .mmlms-analysis-title {
        font-size: 24px;
    }

    .mmlms-practice-modern .mmlms-score-circle {
        width: 180px;
        height: 180px;
    }

    .mmlms-practice-modern .mmlms-score-value {
        font-size: 44px;
    }

    .mmlms-practice-modern .mmlms-analysis-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-stat-box {
        padding: 18px;
    }

    .mmlms-practice-modern .mmlms-stat-value {
        font-size: 24px;
    }

    .mmlms-practice-modern .mmlms-analysis-card {
        padding: 20px;
    }

    .mmlms-practice-modern .mmlms-time-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-difficulty-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-breakdown-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mmlms-practice-modern .mmlms-score-circle {
        width: 160px;
        height: 160px;
    }

    .mmlms-practice-modern .mmlms-difficulty-card {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-difficulty-score {
        font-size: 20px;
    }

    .mmlms-practice-modern .mmlms-improvement-item {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-analysis-actions {
        flex-direction: column;
        gap: 10px;
    }

    .mmlms-practice-modern .mmlms-analysis-actions .mmlms-btn {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    /* Dashboard */
    .mmlms-practice-modern .mmlms-practice-dashboard {
        padding: 16px 10px 28px;
    }

    .mmlms-practice-modern .mmlms-student-header {
        padding: 24px 18px;
        border-radius: var(--mmlms-radius-lg, 16px);
    }

    .mmlms-practice-modern .mmlms-student-header h1 {
        font-size: 24px;
    }

    .mmlms-practice-modern .mmlms-dashboard-card {
        padding: 16px;
    }

    .mmlms-practice-modern .mmlms-session-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .mmlms-practice-modern .mmlms-session-actions {
        width: 100%;
        justify-content: space-between;
    }

    /* #mmlms-practice-app overrides at 768px */
    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-row:first-child {
        grid-template-columns: 1fr;
        row-gap: 14px;
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-title .mmlms-header-label {
        white-space: normal;
        text-overflow: clip;
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-actions {
        justify-content: flex-start;
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout,
    #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-container,
    #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero {
        padding: 24px;
    }
}

/* ==========================================================================
   RESPONSIVE — 480px
   ========================================================================== */
@media screen and (max-width: 480px) {
    /* Analysis screen */
    .mmlms-practice-modern .mmlms-analysis-container {
        padding: 16px 8px;
    }

    .mmlms-practice-modern .mmlms-analysis-header {
        margin-bottom: 32px;
    }

    .mmlms-practice-modern .mmlms-analysis-title {
        font-size: 20px;
    }

    .mmlms-practice-modern .mmlms-analysis-subtitle {
        font-size: 14px;
    }

    .mmlms-practice-modern .mmlms-score-circle {
        width: 140px;
        height: 140px;
    }

    .mmlms-practice-modern .mmlms-score-value {
        font-size: 36px;
    }

    .mmlms-practice-modern .mmlms-score-label {
        font-size: 11px;
    }

    .mmlms-practice-modern .mmlms-analysis-stats {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }

    .mmlms-practice-modern .mmlms-stat-box {
        padding: 14px;
    }

    .mmlms-practice-modern .mmlms-stat-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .mmlms-practice-modern .mmlms-stat-label {
        font-size: 11px;
    }

    .mmlms-practice-modern .mmlms-stat-value {
        font-size: 20px;
    }

    .mmlms-practice-modern .mmlms-analysis-card {
        padding: 16px;
        margin-bottom: 16px;
    }

    .mmlms-practice-modern .mmlms-analysis-card-title {
        font-size: 16px;
    }

    .mmlms-practice-modern .mmlms-time-stats {
        grid-template-columns: 1fr;
    }

    .mmlms-practice-modern .mmlms-time-item {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-time-value {
        font-size: 18px;
    }

    .mmlms-practice-modern .mmlms-breakdown-item {
        gap: 4px;
    }

    .mmlms-practice-modern .mmlms-breakdown-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mmlms-practice-modern .mmlms-difficulty-grid {
        grid-template-columns: 1fr;
    }

    .mmlms-practice-modern .mmlms-improvement-item {
        padding: 12px;
    }

    .mmlms-practice-modern .mmlms-improvement-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mmlms-practice-modern .mmlms-analysis-actions {
        flex-direction: column;
        gap: 8px;
        padding-top: 16px;
    }

    .mmlms-practice-modern .mmlms-analysis-actions .mmlms-btn {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    /* Dashboard */
    .mmlms-practice-modern .mmlms-stats-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mmlms-practice-modern .mmlms-student-header h1 {
        font-size: 20px;
    }

    .mmlms-practice-modern .mmlms-student-header p {
        font-size: 13px;
    }

    .mmlms-practice-modern .mmlms-session-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mmlms-practice-modern .mmlms-session-score {
        text-align: left;
    }

    /* #mmlms-practice-app overrides at 480px */
    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-main-layout,
    #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-container,
    #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-hero {
        padding: 16px;
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header {
        padding: 16px 20px;
    }

    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-questions-header .mmlms-header-row-main {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-analysis-title,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-value,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-analysis-card-title,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-breakdown-name,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-score,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-improvement-name,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-card-title,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-session-info h3,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-empty-title,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-value {
    color: var(--mmlms-text, #f3f4f6);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-analysis-subtitle,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-label,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-time-label,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-breakdown-score,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-breakdown-value,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-name,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-count,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-improvement-suggestion,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-empty-text,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-session-meta span,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-label,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-reattempt-loading p {
    color: var(--mmlms-text-secondary, #d1d5db);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-session-score-label {
    color: var(--mmlms-text-light, #6b7280);
}

/* Dark: Backgrounds */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-box,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-analysis-card,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-dashboard-card,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-card {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-card.difficulty-easy {
    border-color: #065f46;
    background: rgba(16, 185, 129, 0.08);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-card.difficulty-medium {
    border-color: #78350f;
    background: rgba(245, 158, 11, 0.08);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-card.difficulty-hard {
    border-color: #7f1d1d;
    background: rgba(239, 68, 68, 0.08);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-time-item {
    background: var(--mmlms-bg-subtle, #232b3a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-time-item.highlight {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--mmlms-success, #34d399);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-improvement-item {
    background: var(--mmlms-bg-subtle, #232b3a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-improvement-type {
    background: var(--mmlms-bg-light, #1e293b);
    color: var(--mmlms-text-muted, #94a3b8);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-session-card {
    background: var(--mmlms-bg-subtle, #232b3a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-session-meta span {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-empty-state {
    background: var(--mmlms-bg-subtle, #232b3a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-reattempt-loading {
    background: rgba(35, 43, 58, 0.8);
}

/* Dark: Borders */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-breakdown-section {
    border-top-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-breakdown-bar {
    background: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-shell {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

[data-mmlms-theme="dark"] #mmlms-practice-app.mmlms-practice-modern .mmlms-analysis-actions {
    border-top-color: var(--mmlms-border, #334155);
}

/* Dark: Score circle adjustments */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-score-circle.excellent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    color: var(--mmlms-success, #34d399);
    border-color: var(--mmlms-success, #34d399);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-score-circle.good {
    background: linear-gradient(135deg, rgba(14, 165, 164, 0.2) 0%, rgba(14, 165, 164, 0.1) 100%);
    color: var(--mmlms-secondary, #5eead4);
    border-color: var(--mmlms-secondary, #5eead4);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-score-circle.needs-improvement {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: var(--mmlms-warning, #fbbf24);
    border-color: var(--mmlms-warning, #fbbf24);
}

/* Dark: Performance badge */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-performance-badge.excellent {
    background: var(--mmlms-success-light, #064e3b);
    color: var(--mmlms-success, #34d399);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-performance-badge.good {
    background: rgba(14, 165, 164, 0.2);
    color: var(--mmlms-secondary, #5eead4);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-performance-badge.needs-improvement {
    background: var(--mmlms-warning-light, #78350f);
    color: var(--mmlms-warning, #fbbf24);
}

/* Dark: Badge */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-badge-success {
    background: var(--mmlms-success-light, #064e3b);
    color: var(--mmlms-success, #34d399);
    border-color: #065f46;
}

/* Dark: Areas for improvement card */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-analysis-card.areas-for-improvement {
    background: linear-gradient(to right, rgba(245, 158, 11, 0.06), var(--mmlms-card-bg, #232b3a));
}

/* Dark: Breakdown title */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-breakdown-title {
    color: var(--mmlms-text, #f3f4f6);
}

/* Dark: Shadows */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stat-box:hover,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-difficulty-card:hover,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card:hover {
    box-shadow: var(--mmlms-shadow-md);
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    /* Show analysis content */
    .mmlms-practice-modern .mmlms-analysis-container,
    .mmlms-practice-modern .mmlms-analysis-header,
    .mmlms-practice-modern .mmlms-score-section,
    .mmlms-practice-modern .mmlms-analysis-stats,
    .mmlms-practice-modern .mmlms-analysis-card,
    .mmlms-practice-modern .mmlms-breakdown-section,
    .mmlms-practice-modern .mmlms-difficulty-grid,
    .mmlms-practice-modern .mmlms-improvement-list,
    .mmlms-practice-modern .mmlms-practice-dashboard,
    .mmlms-practice-modern .mmlms-stats-grid,
    .mmlms-practice-modern .mmlms-session-list {
        display: block;
        visibility: visible;
    }

    /* Hide nav and interactive elements */
    .mmlms-practice-modern .mmlms-analysis-actions,
    .mmlms-practice-modern .mmlms-session-actions .mmlms-btn,
    .mmlms-practice-modern .mmlms-reattempt-loading,
    .mmlms-practice-modern #btn-reattempt-session,
    .mmlms-practice-modern .mmlms-attempt-badge {
        display: none;
    }

    /* Remove shadows and decorations */
    .mmlms-practice-modern .mmlms-stat-box,
    .mmlms-practice-modern .mmlms-analysis-card,
    .mmlms-practice-modern .mmlms-dashboard-card,
    .mmlms-practice-modern .mmlms-session-card,
    .mmlms-practice-modern .mmlms-difficulty-card,
    .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* Force white backgrounds */
    .mmlms-practice-modern .mmlms-stat-box,
    .mmlms-practice-modern .mmlms-analysis-card,
    .mmlms-practice-modern .mmlms-dashboard-card,
    .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card,
    .mmlms-practice-modern .mmlms-difficulty-card {
        background: #fff;
    }

    /* Disable animations */
    .mmlms-practice-modern .mmlms-screen-analysis,
    .mmlms-practice-modern .mmlms-stat-box,
    .mmlms-practice-modern .mmlms-analysis-card,
    .mmlms-practice-modern .mmlms-score-circle {
        animation: none;
    }

    /* Disable hover transforms */
    .mmlms-practice-modern .mmlms-stat-box:hover,
    .mmlms-practice-modern .mmlms-difficulty-card:hover,
    .mmlms-practice-modern .mmlms-stats-grid .mmlms-stat-card:hover {
        transform: none;
    }

    /* Analysis container full width */
    .mmlms-practice-modern .mmlms-analysis-container {
        max-width: 100%;
        padding: 0;
    }

    .mmlms-practice-modern .mmlms-practice-dashboard {
        max-width: 100%;
        padding: 0;
    }

    /* Student header: flatten gradient for print */
    .mmlms-practice-modern .mmlms-student-header {
        background: #2563eb;
        box-shadow: none;
        border-radius: 0;
    }

    .mmlms-practice-modern .mmlms-student-header::after {
        display: none;
    }

    /* Score circle: remove shadow */
    .mmlms-practice-modern .mmlms-score-circle {
        box-shadow: none;
        border-width: 2px;
    }

    /* Stats grid: force visible layout */
    .mmlms-practice-modern .mmlms-analysis-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .mmlms-practice-modern .mmlms-difficulty-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    /* Breakdown bars: ensure visible */
    .mmlms-practice-modern .mmlms-breakdown-fill {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* Page break control */
    .mmlms-practice-modern .mmlms-analysis-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .mmlms-practice-modern .mmlms-session-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}
/* =====================================================================
   STEP 5 — STUDENT-CREATED SESSION UI
   Migrates: practice-student-v2.css, practice-tutor-style.css, practice.css
   Supports both .ps-* and .mmlms-* selectors for JS compatibility.
   All --ps-*/--pmg-* tokens mapped to --mmlms-* from ui-foundation.css.
   Zero !important. Parent-scoped for specificity.
   ===================================================================== */

/* ========================================
   5.1  HERO / PRACTICE HEADER
   ======================================== */
.mmlms-practice-container .mmlms-practice-header,
.mmlms-practice-student-v2 .ps-hero {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    border-radius: var(--mmlms-radius-xl, 20px);
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
}

.mmlms-practice-container .mmlms-practice-header::before,
.mmlms-practice-student-v2 .ps-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.mmlms-practice-container .mmlms-practice-header h1,
.mmlms-practice-student-v2 .ps-hero h1 {
    margin: 0 0 12px;
    font-size: clamp(24px, 5vw, 42px);
    font-weight: 800;
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}

.mmlms-practice-container .mmlms-practice-header p,
.mmlms-practice-student-v2 .ps-hero p {
    margin: 0;
    font-size: 16px;
    opacity: 0.95;
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero badge */
.mmlms-practice-student-v2 .ps-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.mmlms-practice-student-v2 .ps-hero-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--mmlms-success, #10b981);
    border-radius: 50%;
    animation: mmlms-pulse-dot 2s ease-in-out infinite;
}

.mmlms-practice-student-v2 .ps-hero-content {
    position: relative;
    z-index: 1;
}

/* Hero stats row */
.mmlms-practice-student-v2 .ps-hero-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.mmlms-practice-student-v2 .ps-hero-stat { text-align: center; }

.mmlms-practice-student-v2 .ps-hero-stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.mmlms-practice-student-v2 .ps-hero-stat-label {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 4px;
}

/* ========================================
   5.2  MODE CARDS
   ======================================== */
.mmlms-practice-container .mmlms-practice-modes,
.mmlms-practice-student-v2 .ps-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.mmlms-practice-container .mmlms-practice-mode-card,
.mmlms-practice-student-v2 .ps-mode-card {
    position: relative;
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid transparent;
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.mmlms-practice-container .mmlms-practice-mode-card::before,
.mmlms-practice-student-v2 .ps-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mmlms-practice-container .mmlms-practice-mode-card:hover,
.mmlms-practice-student-v2 .ps-mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    border-color: var(--mmlms-primary-light, #3b82f6);
}

.mmlms-practice-container .mmlms-practice-mode-card:hover::before,
.mmlms-practice-student-v2 .ps-mode-card:hover::before {
    opacity: 1;
}

.mmlms-practice-student-v2 .ps-mode-card.active {
    border-color: var(--mmlms-primary, #2563eb);
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.mmlms-practice-student-v2 .ps-mode-card.active::before { opacity: 1; }

/* Mode icon */
.mmlms-practice-container .mmlms-practice-mode-icon,
.mmlms-practice-student-v2 .ps-mode-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
    border-radius: var(--mmlms-radius-lg, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--mmlms-primary, #2563eb);
    transition: all 0.3s ease;
}

.mmlms-practice-container .mmlms-practice-mode-card:hover .mmlms-practice-mode-icon,
.mmlms-practice-student-v2 .ps-mode-card:hover .ps-mode-icon {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    transform: scale(1.05);
}

/* Mode card text */
.mmlms-practice-container .mmlms-practice-mode-card h3,
.mmlms-practice-student-v2 .ps-mode-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-practice-mode-card p,
.mmlms-practice-student-v2 .ps-mode-card p {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
    line-height: 1.6;
}

/* Mode features pills */
.mmlms-practice-student-v2 .ps-mode-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.mmlms-practice-student-v2 .ps-mode-feature {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: rgba(37, 99, 235, 0.06);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-student-v2 .ps-mode-feature::before {
    content: '\2713';
    font-weight: 700;
}

/* Mode card button */
.mmlms-practice-container .mmlms-practice-mode-card .mmlms-btn {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--mmlms-radius-md, 12px);
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mmlms-practice-container .mmlms-practice-mode-card .mmlms-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* ========================================
   5.3  CONFIG FORM
   ======================================== */
.mmlms-practice-container .mmlms-practice-config,
.mmlms-practice-student-v2 .ps-form-container {
    max-width: 900px;
    margin: 0 auto;
}

.mmlms-practice-container .mmlms-config-header {
    text-align: center;
    margin-bottom: 30px;
}

.mmlms-practice-container .mmlms-config-icon {
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.mmlms-practice-container .mmlms-config-header h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
}

.mmlms-practice-container .mmlms-config-header p {
    color: var(--mmlms-text-muted, #64748b);
    margin: 0;
}

/* Form sections */
.mmlms-practice-container .mmlms-form-section,
.mmlms-practice-student-v2 .ps-form-section {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--mmlms-border, #e2e8f0);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.mmlms-practice-container .mmlms-form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mmlms-primary, #2563eb);
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

.mmlms-practice-student-v2 .ps-form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-student-v2 .ps-form-section-number {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.mmlms-practice-student-v2 .ps-form-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
    margin: 0;
}

/* Form grid */
.mmlms-practice-student-v2 .ps-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.mmlms-practice-student-v2 .ps-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mmlms-practice-student-v2 .ps-form-group:not([style*="display: none"]) {
    display: flex;
}

.mmlms-practice-student-v2 .ps-form-group.full-width {
    grid-column: 1 / -1;
}

/* Labels */
.mmlms-practice-student-v2 .ps-form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mmlms-practice-student-v2 .ps-form-label .required {
    color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-student-v2 .ps-form-label .optional {
    font-size: 12px;
    color: var(--mmlms-text-muted, #64748b);
    font-weight: 500;
}

/* Input wrapper */
.mmlms-practice-student-v2 .ps-input-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.mmlms-practice-student-v2 .ps-input-wrapper i,
.mmlms-practice-student-v2 .ps-input-wrapper .dashicons,
.mmlms-practice-student-v2 .ps-input-wrapper > span {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mmlms-text-muted, #94a3b8);
    font-size: 18px;
    z-index: 10;
    pointer-events: none;
}

/* Inputs and selects */
.mmlms-practice-student-v2 .ps-input,
.mmlms-practice-student-v2 .ps-select {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px 12px 40px;
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    color: var(--mmlms-text, #1e293b);
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.mmlms-practice-student-v2 .ps-input:focus,
.mmlms-practice-student-v2 .ps-select:focus {
    outline: none;
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.mmlms-practice-student-v2 .ps-input:disabled,
.mmlms-practice-student-v2 .ps-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--mmlms-bg, #f8fafc);
}

.mmlms-practice-student-v2 .ps-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.mmlms-practice-student-v2 .ps-select[multiple] {
    height: auto;
    min-height: 120px;
    background-image: none;
    padding-right: 16px;
    overflow-y: auto;
}

.mmlms-practice-student-v2 .ps-select[multiple] option {
    padding: 8px 12px;
    margin: 2px 0;
    border-radius: 6px;
    cursor: pointer;
}

.mmlms-practice-student-v2 .ps-select[multiple] option:checked {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
}

.mmlms-practice-student-v2 .ps-multiselect-wrapper { position: relative; }

.mmlms-practice-student-v2 .ps-multiselect-wrapper::after {
    content: 'Hold Ctrl/Cmd to select multiple';
    position: absolute;
    bottom: -20px;
    left: 0;
    font-size: 11px;
    color: var(--mmlms-text-muted, #64748b);
}

/* Checkbox groups */
.mmlms-practice-student-v2 .ps-checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--mmlms-bg, #f8fafc);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.mmlms-practice-student-v2 .ps-checkbox-group:hover {
    background: rgba(37, 99, 235, 0.04);
    border-color: rgba(37, 99, 235, 0.12);
}

.mmlms-practice-student-v2 .ps-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mmlms-border, #cbd5e1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.mmlms-practice-student-v2 .ps-checkbox input { display: none; }

.mmlms-practice-student-v2 .ps-checkbox-group input:checked + .ps-checkbox {
    background: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-student-v2 .ps-checkbox-group input:checked + .ps-checkbox::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.mmlms-practice-student-v2 .ps-checkbox-label {
    font-size: 14px;
    color: var(--mmlms-text, #1e293b);
}

/* Question type multi-select chips */
.mmlms-practice-student-v2 .ps-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mmlms-practice-student-v2 .ps-checkbox-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--mmlms-bg, #f8fafc);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: 999px;
    font-size: 13px;
    color: var(--mmlms-text, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1.2;
}

.mmlms-practice-student-v2 .ps-checkbox-chip:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.35);
}

.mmlms-practice-student-v2 .ps-checkbox-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.mmlms-practice-student-v2 .ps-checkbox-chip:has(input[type="checkbox"]:checked) {
    background: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
    color: #fff;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}

.mmlms-practice-student-v2 .ps-checkbox-chip input[type="checkbox"]:focus-visible + .ps-checkbox-chip-label {
    outline: 2px solid var(--mmlms-primary, #2563eb);
    outline-offset: 3px;
    border-radius: 4px;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-checkbox-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--mmlms-text, #e2e8f0);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-checkbox-chip:has(input[type="checkbox"]:checked) {
    background: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
    color: #fff;
}

/* Topic chips group */
.mmlms-practice-student-v2 #topics-chip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}

.mmlms-practice-student-v2 .ps-chip-group-title {
    width: 100%;
    font-weight: 600;
    font-size: 13px;
    color: #64748b;
    margin: 8px 0 4px;
    padding-left: 2px;
}

.mmlms-practice-student-v2 .ps-topic-chip {
    font-size: 13px;
    padding: 6px 12px;
    max-width: 100%;
    min-width: 0;
}

.mmlms-practice-student-v2 .ps-topic-chip .ps-checkbox-chip-label {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.mmlms-practice-student-v2 .ps-topic-chip .MathJax,
.mmlms-practice-student-v2 .ps-topic-chip .MathJax_SVG,
.mmlms-practice-student-v2 .ps-topic-chip mjx-container {
    max-width: 100% !important;
    overflow-x: auto;
}

/* Tablet (<= 768px) */
@media screen and (max-width: 768px) {
    .mmlms-practice-student-v2 #topics-chip-container {
        max-height: 240px;
    }
    .mmlms-practice-student-v2 .ps-topic-chip {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* Mobile (<= 480px) */
@media screen and (max-width: 480px) {
    .mmlms-practice-student-v2 #topics-chip-container {
        max-height: 160px;
        gap: 6px;
    }
    .mmlms-practice-student-v2 .ps-topic-chip {
        font-size: 12px;
        padding: 5px 8px;
        border-radius: 6px;
    }
    .mmlms-practice-student-v2 .ps-chip-group-title {
        font-size: 12px;
        margin: 6px 0 2px;
    }
}

/* Tooltip */
.mmlms-practice-container .mmlms-tooltip {
    display: inline-block;
    background: rgba(37, 99, 235, 0.08);
    color: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 0.95em;
    font-weight: 700;
    cursor: help;
    margin-left: 6px;
    line-height: 20px;
    border: 1px solid rgba(37, 99, 235, 0.2);
    transition: background 0.2s;
}

.mmlms-practice-container .mmlms-tooltip:hover {
    background: rgba(37, 99, 235, 0.15);
}

.mmlms-practice-container .mmlms-hint {
    color: var(--mmlms-text-muted, #64748b);
    font-size: 0.95em;
    margin-top: 4px;
    display: block;
}

.mmlms-practice-container .mmlms-checkbox-label {
    margin-left: 8px;
    font-size: 1em;
    color: var(--mmlms-text, #1e293b);
    cursor: pointer;
}

/* Range slider */
.mmlms-practice-student-v2 .ps-range-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mmlms-practice-student-v2 .ps-range {
    flex: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 10px;
    background: var(--mmlms-bg, #e7edf7);
    border-radius: 999px;
    outline: none;
}

.mmlms-practice-student-v2 .ps-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #1d4ed8) 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease;
}

.mmlms-practice-student-v2 .ps-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.mmlms-practice-student-v2 .ps-range-value {
    min-width: 40px;
    text-align: center;
    font-weight: 700;
    color: var(--mmlms-primary, #2563eb);
    font-size: 16px;
}

.mmlms-practice-container #num_questions_slider {
    width: 180px;
    vertical-align: middle;
    margin-right: 8px;
}

.mmlms-practice-container #num_questions_value {
    color: var(--mmlms-primary, #2563eb);
    font-weight: 700;
    font-size: 1.1em;
}

/* ========================================
   5.4  PRESET CARDS
   ======================================== */
.mmlms-practice-container .mmlms-presets-grid,
.mmlms-practice-student-v2 .ps-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.mmlms-practice-container .mmlms-preset-card,
.mmlms-practice-student-v2 .ps-preset-card {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 24px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.mmlms-practice-student-v2 .ps-preset-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mmlms-practice-container .mmlms-preset-card:hover,
.mmlms-practice-student-v2 .ps-preset-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
    border-color: var(--mmlms-primary-light, #3b82f6);
}

.mmlms-practice-student-v2 .ps-preset-card:hover::before { opacity: 1; }

.mmlms-practice-container .mmlms-preset-card.featured,
.mmlms-practice-student-v2 .ps-preset-card.featured {
    border: 2px solid var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.mmlms-practice-container .mmlms-preset-card.featured::before {
    content: 'POPULAR';
    position: absolute;
    top: -1px;
    right: 20px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 0 0 8px 8px;
}

.mmlms-practice-student-v2 .ps-preset-card.selected {
    border-color: var(--mmlms-primary, #2563eb);
    background: rgba(37, 99, 235, 0.03);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.mmlms-practice-student-v2 .ps-preset-card.selected::before { opacity: 1; }

.mmlms-practice-student-v2 .ps-preset-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Preset header and icon */
.mmlms-practice-container .mmlms-preset-header,
.mmlms-practice-student-v2 .ps-preset-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mmlms-practice-container .mmlms-preset-icon,
.mmlms-practice-student-v2 .ps-preset-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
    border-radius: var(--mmlms-radius-md, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--mmlms-primary, #2563eb);
    flex-shrink: 0;
    border: 1px solid var(--mmlms-border, #e2e8f0);
    transition: all 0.25s ease;
}

.mmlms-practice-student-v2 .ps-preset-card:hover .ps-preset-icon {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    transform: scale(1.05);
}

.mmlms-practice-container .mmlms-preset-title h4,
.mmlms-practice-student-v2 .ps-preset-title h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-preset-title span,
.mmlms-practice-student-v2 .ps-preset-title span {
    font-size: 13px;
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-container .mmlms-preset-description,
.mmlms-practice-student-v2 .ps-preset-description {
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* Preset stats */
.mmlms-practice-container .mmlms-preset-stats,
.mmlms-practice-student-v2 .ps-preset-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.mmlms-practice-container .mmlms-preset-stat,
.mmlms-practice-student-v2 .ps-preset-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-student-v2 .ps-preset-stat::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
}

.mmlms-practice-container .mmlms-preset-stat svg,
.mmlms-practice-container .mmlms-preset-stat .dashicons {
    width: 16px;
    height: 16px;
    color: var(--mmlms-primary, #2563eb);
    font-size: 16px;
}

/* Difficulty dots */
.mmlms-practice-container .mmlms-preset-difficulty {
    display: flex;
    gap: 6px;
}

.mmlms-practice-container .mmlms-difficulty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-difficulty-dot.active {
    background: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-container .mmlms-difficulty-dot.active.easy {
    background: var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-difficulty-dot.active.medium {
    background: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-container .mmlms-difficulty-dot.active.hard {
    background: var(--mmlms-danger, #ef4444);
}

/* ========================================
   5.5  SESSION CONTAINER
   ======================================== */
.mmlms-practice-container .mmlms-session-container {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-xl, 20px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
    overflow: hidden;
}

.mmlms-practice-container .mmlms-session-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--mmlms-bg, #f8fafc) 0%, var(--mmlms-bg, #f1f5f9) 100%);
    border-bottom: 1px solid var(--mmlms-border, #e2e8f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.mmlms-practice-container .mmlms-session-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    margin: 0;
}

.mmlms-practice-container .mmlms-session-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-container .mmlms-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* ========================================
   5.6  PRACTICE HEADER BAR (in-session)
   ======================================== */
.mmlms-practice-container .mmlms-practice-header.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-md, 12px);
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    flex-wrap: wrap;
    gap: 15px;
    text-align: left;
    overflow: visible;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-practice-header.session-header::before {
    display: none;
}

.mmlms-practice-container .mmlms-practice-info h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-question-counter {
    font-size: 0.9rem;
    color: var(--mmlms-text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.mmlms-practice-container .mmlms-session-meta-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mmlms-practice-container .mmlms-session-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--mmlms-bg, #f1f5f9);
    color: var(--mmlms-text, #1e293b);
    border: 1px solid var(--mmlms-border, #e2e8f0);
}

/* Timer */
.mmlms-practice-container .mmlms-session-timer,
.mmlms-practice-student-v2 .ps-question-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    border-radius: var(--mmlms-radius-md, 12px);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

.mmlms-practice-container .mmlms-session-timer.warning,
.mmlms-practice-student-v2 .ps-question-timer.warning {
    background: linear-gradient(135deg, var(--mmlms-warning, #f59e0b) 0%, #d97706 100%);
    animation: mmlms-pulse 1s infinite;
}

.mmlms-practice-container .mmlms-session-timer.danger,
.mmlms-practice-student-v2 .ps-question-timer.danger {
    background: linear-gradient(135deg, var(--mmlms-danger, #ef4444) 0%, #dc2626 100%);
    animation: mmlms-pulse 0.5s infinite;
}

.mmlms-practice-container .mmlms-practice-actions {
    display: flex;
    gap: 10px;
}

/* ========================================
   5.7  PROGRESS BAR & MARKERS
   ======================================== */
.mmlms-practice-container .mmlms-progress-wrapper,
.mmlms-practice-student-v2 .ps-progress-wrapper {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-progress-bar-container,
.mmlms-practice-student-v2 .ps-progress-bar-container {
    height: 8px;
    background: var(--mmlms-bg, #f1f5f9);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 12px;
}

.mmlms-practice-container .mmlms-progress-bar,
.mmlms-practice-student-v2 .ps-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.mmlms-practice-student-v2 .ps-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
}

.mmlms-practice-container .mmlms-progress-markers,
.mmlms-practice-student-v2 .ps-progress-markers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.mmlms-practice-container .mmlms-progress-marker,
.mmlms-practice-student-v2 .ps-progress-marker {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--mmlms-border, #e2e8f0);
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-container .mmlms-progress-marker:hover,
.mmlms-practice-student-v2 .ps-progress-marker:hover {
    transform: scale(1.1);
    border-color: var(--mmlms-primary-light, #3b82f6);
}

.mmlms-practice-container .mmlms-progress-marker.active,
.mmlms-practice-student-v2 .ps-progress-marker.active {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.mmlms-practice-container .mmlms-progress-marker.answered,
.mmlms-practice-student-v2 .ps-progress-marker.answered,
.mmlms-practice-container .mmlms-progress-marker.correct,
.mmlms-practice-student-v2 .ps-progress-marker.correct {
    background: var(--mmlms-success, #10b981);
    color: #fff;
    border-color: var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-progress-marker.incorrect,
.mmlms-practice-student-v2 .ps-progress-marker.wrong {
    background: var(--mmlms-danger, #ef4444);
    color: #fff;
    border-color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-container .mmlms-progress-marker.skipped,
.mmlms-practice-student-v2 .ps-progress-marker.doubt {
    background: var(--mmlms-warning, #f59e0b);
    color: #111827;
    border-color: var(--mmlms-warning, #f59e0b);
}

/* ========================================
   5.8  QUESTION CARD
   ======================================== */
.mmlms-practice-container .mmlms-question-card,
.mmlms-practice-student-v2 .ps-question-card {
    position: relative;
    padding: 32px;
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--mmlms-border, #e2e8f0);
}

/* Question badge */
.mmlms-practice-container .mmlms-question-badge,
.mmlms-practice-student-v2 .ps-question-number-badge {
    position: absolute;
    top: 0;
    left: 32px;
    transform: translateY(-50%);
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

/* Question header (tutor style) */
.mmlms-practice-container .mmlms-question-header,
.mmlms-practice-student-v2 .ps-question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
}

.mmlms-practice-container .mmlms-question-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-primary, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    padding: 6px 12px;
    border-radius: var(--mmlms-radius-md, 12px);
}

.mmlms-practice-container .mmlms-question-marks {
    font-size: 13px;
    color: var(--mmlms-text-muted, #64748b);
    background: var(--mmlms-bg, #f8fafc);
    padding: 6px 12px;
    border-radius: var(--mmlms-radius-md, 12px);
}

/* Question header (student-v2 style) */
.mmlms-practice-student-v2 .ps-question-header-info h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}

.mmlms-practice-student-v2 .ps-question-meta {
    display: flex;
    gap: 8px;
}

.mmlms-practice-student-v2 .ps-question-meta-badge {
    padding: 4px 12px;
    background: rgba(37, 99, 235, 0.06);
    color: var(--mmlms-primary, #2563eb);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* Question text */
.mmlms-practice-container .mmlms-question-text,
.mmlms-practice-student-v2 .ps-question-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--mmlms-text, #1e293b);
    margin-bottom: 24px;
}

.mmlms-practice-container .mmlms-question-text p,
.mmlms-practice-student-v2 .ps-question-text p {
    margin: 0 0 12px;
}

.mmlms-practice-container .mmlms-question-text p:last-child,
.mmlms-practice-student-v2 .ps-question-text p:last-child {
    margin-bottom: 0;
}

.mmlms-practice-student-v2 .ps-question-text .math-content {
    display: inline;
}

/* Question image */
.mmlms-practice-container .mmlms-question-image,
.mmlms-practice-student-v2 .ps-question-image {
    margin: 20px 0;
    text-align: center;
}

.mmlms-practice-container .mmlms-question-image img,
.mmlms-practice-student-v2 .ps-question-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mmlms-radius-md, 12px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Passage box */
.mmlms-practice-container .mmlms-passage-box,
.mmlms-practice-student-v2 .ps-passage-box {
    background: var(--mmlms-bg, #f8fafc);
    border-left: 4px solid var(--mmlms-primary, #2563eb);
    padding: 20px;
    border-radius: 0 var(--mmlms-radius-md, 12px) var(--mmlms-radius-md, 12px) 0;
    margin-bottom: 24px;
}

.mmlms-practice-container .mmlms-passage-box h4,
.mmlms-practice-student-v2 .ps-passage-box h4 {
    margin: 0 0 12px;
    color: var(--mmlms-primary, #2563eb);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mmlms-practice-student-v2 .ps-passage-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--mmlms-text-muted, #64748b);
}

/* ========================================
   5.9  ANSWER OPTIONS
   ======================================== */
.mmlms-practice-container .mmlms-options,
.mmlms-practice-container .mmlms-answer-options,
.mmlms-practice-student-v2 .ps-options-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.mmlms-practice-container .mmlms-option,
.mmlms-practice-container .mmlms-option-label,
.mmlms-practice-student-v2 .ps-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--mmlms-bg, #f8fafc);
    border: 2px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-md, 12px);
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 56px;
}

.mmlms-practice-container .mmlms-option:hover,
.mmlms-practice-container .mmlms-option-label:hover,
.mmlms-practice-student-v2 .ps-option:hover {
    border-color: var(--mmlms-primary, #2563eb);
    background: rgba(37, 99, 235, 0.04);
    transform: translateY(-1px);
}

/* Hidden radio */
.mmlms-practice-container .mmlms-option input[type="radio"],
.mmlms-practice-container .mmlms-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--mmlms-primary, #2563eb);
    cursor: pointer;
}

.mmlms-practice-container .mmlms-option-label input[type="radio"],
.mmlms-practice-student-v2 .ps-option input {
    display: none;
}

/* Option letter circle */
.mmlms-practice-container .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option-letter {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #e2e8f0);
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.mmlms-practice-container .mmlms-option:hover .mmlms-option-letter,
.mmlms-practice-container .mmlms-option-label:hover .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option:hover .ps-option-letter {
    border-color: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-primary, #2563eb);
}

/* Selected state */
.mmlms-practice-container .mmlms-option.selected,
.mmlms-practice-container .mmlms-option-label.selected,
.mmlms-practice-student-v2 .ps-option.selected {
    border-color: var(--mmlms-primary, #2563eb);
    background: rgba(37, 99, 235, 0.08);
}

.mmlms-practice-container .mmlms-option.selected .mmlms-option-letter,
.mmlms-practice-container .mmlms-option-label.selected .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option.selected .ps-option-letter {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    border-color: var(--mmlms-primary, #2563eb);
}

/* Correct state */
.mmlms-practice-container .mmlms-option.correct,
.mmlms-practice-container .mmlms-option-label.correct,
.mmlms-practice-student-v2 .ps-option.correct {
    border-color: var(--mmlms-success, #10b981);
    background: rgba(16, 185, 129, 0.08);
}

.mmlms-practice-container .mmlms-option.correct .mmlms-option-letter,
.mmlms-practice-container .mmlms-option-label.correct .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option.correct .ps-option-letter {
    background: var(--mmlms-success, #10b981);
    color: #fff;
    border-color: var(--mmlms-success, #10b981);
}

/* Incorrect state */
.mmlms-practice-container .mmlms-option.incorrect,
.mmlms-practice-container .mmlms-option-label.incorrect,
.mmlms-practice-student-v2 .ps-option.wrong {
    border-color: var(--mmlms-danger, #ef4444);
    background: rgba(239, 68, 68, 0.08);
}

.mmlms-practice-container .mmlms-option.incorrect .mmlms-option-letter,
.mmlms-practice-container .mmlms-option-label.incorrect .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option.wrong .ps-option-letter {
    background: var(--mmlms-danger, #ef4444);
    color: #fff;
    border-color: var(--mmlms-danger, #ef4444);
}

/* Option text */
.mmlms-practice-container .mmlms-option-text,
.mmlms-practice-student-v2 .ps-option-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mmlms-text, #1e293b);
}

/* ========================================
   5.10  NUMERICAL / MATRIX / SUBJECTIVE INPUT
   ======================================== */
.mmlms-practice-container .mmlms-numerical-input,
.mmlms-practice-container .mmlms-matrix-input,
.mmlms-practice-container .mmlms-subjective-input,
.mmlms-practice-container .mmlms-sub-question {
    background: var(--mmlms-bg, #f8fafc);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-md, 12px);
    padding: 14px 16px;
}

.mmlms-practice-container .mmlms-numerical-input input,
.mmlms-practice-container .mmlms-matrix-input input,
.mmlms-practice-container .mmlms-sub-question input,
.mmlms-practice-container .mmlms-subjective-input textarea {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--mmlms-border, #cbd5e1);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.15s ease;
}

.mmlms-practice-container .mmlms-numerical-input input:focus,
.mmlms-practice-container .mmlms-matrix-input input:focus,
.mmlms-practice-container .mmlms-sub-question input:focus,
.mmlms-practice-container .mmlms-subjective-input textarea:focus {
    outline: none;
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* ========================================
   MATRIX MATCH (JEE Book Style)
   ======================================== */
.mmlms-matrix-match {
    margin-top: 16px;
}

/* Column descriptions side by side */
.mmlms-matrix-columns {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.mmlms-matrix-col {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mmlms-matrix-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--mmlms-primary, #2563eb);
}

.mmlms-matrix-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mmlms-matrix-col li {
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mmlms-text, #1e293b);
    border-bottom: 1px solid var(--mmlms-border, #e2e8f0);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mmlms-matrix-col li:last-child {
    border-bottom: none;
}

.mmlms-matrix-col li strong {
    display: inline-block;
    min-width: 24px;
    font-weight: 700;
    color: var(--mmlms-primary, #2563eb);
}

/* Matching grid */
/* Constrain images inside matrix column lists to their container width */
.mmlms-matrix-col li img,
.mmlms-matrix-grid td img {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
    display: block;
    object-fit: contain;
    min-height: 48px;
    max-height: 120px;
    margin: 0 auto;
}

.mmlms-matrix-grid-wrapper {
    background: var(--mmlms-bg, #f8fafc);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-md, 12px);
    padding: 16px;
    overflow-x: auto;
}

.mmlms-matrix-instruction {
    font-size: 13px;
    color: var(--mmlms-text-muted, #64748b);
    margin: 0 0 12px;
    font-style: italic;
}

.mmlms-matrix-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.mmlms-matrix-grid th,
.mmlms-matrix-grid td {
    text-align: center;
    padding: 10px 8px;
    border: 1px solid var(--mmlms-border, #cbd5e1);
}

.mmlms-matrix-grid thead th {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
}

.mmlms-matrix-grid thead th:first-child {
    background: transparent;
    border-top: none;
    border-left: none;
}

.mmlms-matrix-grid tbody th {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    width: 40px;
}

.mmlms-matrix-grid tbody td {
    background: var(--mmlms-card-bg, #fff);
    transition: background 0.2s ease;
}

.mmlms-matrix-grid tbody td:hover {
    background: #eff6ff;
}

/* Custom checkbox cell */
.mmlms-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    min-height: 32px;
}

.mmlms-matrix-cell input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}

.mmlms-matrix-checkmark {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--mmlms-primary, #2563eb);
    border-radius: 6px;
    background: var(--mmlms-card-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 2px #e0e7ef;
    position: relative;
}

.mmlms-matrix-cell:hover .mmlms-matrix-checkmark {
    border-color: var(--mmlms-primary, #2563eb);
}

.mmlms-matrix-cell input[type="checkbox"]:checked + .mmlms-matrix-checkmark {
    background: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px #a5b4fc;
}

.mmlms-matrix-cell input[type="checkbox"]:checked + .mmlms-matrix-checkmark::after {
    content: '';
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
    position: absolute;
    left: 8px;
    top: 4px;
}

.mmlms-matrix-cell input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.mmlms-matrix-cell input[type="checkbox"]:disabled + .mmlms-matrix-checkmark {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Cell-level answer feedback — applied by JS after submission */
.mmlms-matrix-cell-correct {
    background: #dcfce7 !important; /* green-100 */
}
.mmlms-matrix-cell-correct .mmlms-matrix-checkmark {
    border-color: #16a34a !important;
    background: #16a34a !important;
}
.mmlms-matrix-cell-correct .mmlms-matrix-checkmark::after {
    display: block !important;
    border-color: #fff !important;
}

.mmlms-matrix-cell-wrong {
    background: #fee2e2 !important; /* red-100 */
}
.mmlms-matrix-cell-wrong .mmlms-matrix-checkmark {
    border-color: #dc2626 !important;
    background: #dc2626 !important;
}
.mmlms-matrix-cell-wrong .mmlms-matrix-checkmark::after {
    display: block !important;
    border-color: #fff !important;
}

/* Missed: correct answer the student didn't tick — amber outline hint */
.mmlms-matrix-cell-missed {
    background: #fef9c3 !important; /* yellow-100 */
    outline: 2px dashed #ca8a04;
    outline-offset: -2px;
}
.mmlms-matrix-cell-missed .mmlms-matrix-checkmark {
    border-color: #ca8a04 !important;
}

[data-mmlms-theme="dark"] .mmlms-matrix-cell-correct  { background: #14532d !important; }
[data-mmlms-theme="dark"] .mmlms-matrix-cell-wrong    { background: #7f1d1d !important; }
[data-mmlms-theme="dark"] .mmlms-matrix-cell-missed   { background: #422006 !important; outline-color: #fbbf24; }

/* Responsive: tablet (768px and below) */
@media (max-width: 768px) {
    .mmlms-matrix-columns {
        flex-direction: column;
        gap: 20px;
    }

    .mmlms-matrix-grid th,
    .mmlms-matrix-grid td {
        padding: 10px 8px;
        font-size: 13px;
        min-width: 52px;
    }

    .mmlms-matrix-grid thead th,
    .mmlms-matrix-grid tbody th {
        font-size: 14px;
    }

    .mmlms-matrix-checkmark {
        width: 28px;
        height: 28px;
    }

    .mmlms-matrix-cell {
        min-width: 48px;
        min-height: 48px;
    }

    .mmlms-matrix-grid-wrapper {
        -webkit-overflow-scrolling: touch;
        padding: 12px;
    }
}

/* Responsive: mobile (640px and below) */
@media (max-width: 640px) {
    .mmlms-matrix-columns {
        gap: 16px;
    }

    .mmlms-matrix-grid th,
    .mmlms-matrix-grid td {
        padding: 8px 6px;
        font-size: 12px;
        min-width: 44px;
    }

    .mmlms-matrix-grid thead th,
    .mmlms-matrix-grid tbody th {
        font-size: 13px;
    }

    .mmlms-matrix-checkmark {
        width: 24px;
        height: 24px;
    }

    .mmlms-matrix-cell {
        min-width: 44px;
        min-height: 44px;
    }

    .mmlms-matrix-col li img,
    .mmlms-matrix-grid td img {
        max-height: 80px;
        min-height: 32px;
    }
}

/* Dark theme */
[data-mmlms-theme="dark"] .mmlms-matrix-grid-wrapper {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-matrix-col li {
    color: var(--mmlms-text);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-matrix-grid tbody td {
    background: #1e293b;
}

[data-mmlms-theme="dark"] .mmlms-matrix-grid tbody td:hover {
    background: #1e3a5f;
}

[data-mmlms-theme="dark"] .mmlms-matrix-checkmark {
    background: #1e293b;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-matrix-cell:hover .mmlms-matrix-checkmark {
    border-color: var(--mmlms-primary);
}

/* Numeric input (student-v2 / tutor style) */
.mmlms-practice-student-v2 .ps-numerical-input { max-width: 300px; }

.mmlms-practice-student-v2 .ps-numerical-input label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text-muted, #64748b);
    margin-bottom: 8px;
}

.mmlms-practice-student-v2 .ps-numerical-input input,
.mmlms-practice-container .mmlms-numeric-input-wrapper .mmlms-numeric-input {
    width: 100%;
    padding: 16px;
    font-size: 18px;
    border: 2px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-md, 12px);
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text, #1e293b);
    transition: all 0.25s ease;
    text-align: center;
}

.mmlms-practice-student-v2 .ps-numerical-input input:focus,
.mmlms-practice-container .mmlms-numeric-input-wrapper .mmlms-numeric-input:focus {
    outline: none;
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.mmlms-practice-container .mmlms-numeric-input-wrapper .mmlms-numeric-input::placeholder {
    color: var(--mmlms-text-muted, #94a3b8);
}

.mmlms-practice-container .mmlms-numeric-input-wrapper { margin-bottom: 24px; }

/* ========================================
   FIX 7: Subjective textarea & Numerical input mobile sizing
   ======================================== */
@media (max-width: 768px) {
    .mmlms-practice-container .mmlms-numeric-input-wrapper .mmlms-numeric-input,
    .mmlms-practice-student-v2 .ps-numerical-input input {
        padding: 14px;
        font-size: 16px;
    }
    .mmlms-practice-container .mmlms-subjective-input textarea {
        padding: 8px 10px;
        font-size: 15px;
    }
}
@media (max-width: 480px) {
    .mmlms-practice-student-v2 .ps-numerical-input {
        max-width: 100%;
    }
    .mmlms-practice-container .mmlms-subjective-input textarea {
        padding: 6px 8px;
        font-size: 14px;
        min-height: 100px;
    }
}

/* ========================================
   5.11  BUTTONS
   ======================================== */
.mmlms-practice-container .mmlms-btn,
.mmlms-practice-student-v2 .ps-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--mmlms-radius-md, 12px);
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 48px;
    text-decoration: none;
}

.mmlms-practice-container .mmlms-btn:disabled,
.mmlms-practice-student-v2 .ps-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mmlms-practice-container .mmlms-btn-primary,
.mmlms-practice-student-v2 .ps-btn-primary {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.mmlms-practice-container .mmlms-btn-primary:hover:not(:disabled),
.mmlms-practice-student-v2 .ps-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

.mmlms-practice-container .mmlms-btn-secondary,
.mmlms-practice-student-v2 .ps-btn-secondary {
    background: var(--mmlms-card-bg, #fff);
    color: var(--mmlms-text, #1e293b);
    border: 1.5px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-btn-secondary:hover:not(:disabled),
.mmlms-practice-student-v2 .ps-btn-secondary:hover:not(:disabled) {
    background: var(--mmlms-bg, #f8fafc);
    border-color: var(--mmlms-primary-light, #3b82f6);
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-container .mmlms-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--mmlms-danger, #ef4444);
    border: 1.5px solid var(--mmlms-danger, #ef4444);
}

.mmlms-practice-container .mmlms-btn-danger:hover:not(:disabled) {
    background: var(--mmlms-danger, #ef4444);
    color: #fff;
}

.mmlms-practice-container .mmlms-btn-success,
.mmlms-practice-student-v2 .ps-btn-success {
    background: linear-gradient(135deg, var(--mmlms-success, #10b981) 0%, #059669 100%);
    color: #fff;
}

.mmlms-practice-container .mmlms-btn-success:hover:not(:disabled),
.mmlms-practice-student-v2 .ps-btn-success:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.mmlms-practice-container .mmlms-btn-outline {
    background: transparent;
    color: var(--mmlms-primary, #2563eb);
    border: 1.5px solid var(--mmlms-primary, #2563eb);
}

.mmlms-practice-container .mmlms-btn-outline:hover:not(:disabled) {
    background: rgba(37, 99, 235, 0.06);
}

.mmlms-practice-container .mmlms-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Button sizes */
.mmlms-practice-student-v2 .ps-btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.mmlms-practice-student-v2 .ps-btn-xl {
    padding: 20px 40px;
    font-size: 18px;
    border-radius: var(--mmlms-radius-md, 12px);
}

.mmlms-practice-student-v2 .ps-btn-full { width: 100%; }

/* Glow effect */
.mmlms-practice-student-v2 .ps-btn-glow {
    position: relative;
    overflow: hidden;
}

.mmlms-practice-student-v2 .ps-btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.mmlms-practice-student-v2 .ps-btn-glow:hover::before { left: 100%; }

/* Navigation buttons */
.mmlms-practice-container .mmlms-question-navigation {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.mmlms-practice-container .mmlms-question-navigation .mmlms-btn {
    flex: 1;
    min-width: 120px;
}

.mmlms-practice-container .mmlms-question-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mmlms-practice-student-v2 .ps-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mmlms-practice-student-v2 .ps-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--mmlms-bg, #f8fafc);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mmlms-practice-student-v2 .ps-nav-btn:hover:not(:disabled) {
    background: var(--mmlms-card-bg, #fff);
    border-color: var(--mmlms-primary-light, #3b82f6);
}

.mmlms-practice-student-v2 .ps-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mmlms-practice-student-v2 .ps-nav-btn-primary {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #1d4ed8) 100%);
    color: #fff;
    border-color: transparent;
}

.mmlms-practice-student-v2 .ps-nav-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* ========================================
   5.12  SOLUTION PANEL
   ======================================== */
.mmlms-practice-container .mmlms-solution-card,
.mmlms-practice-student-v2 .ps-solution-panel {
    margin-top: 24px;
    padding: 24px;
    background: var(--mmlms-bg, #f8fafc);
    border-radius: var(--mmlms-radius-lg, 16px);
    border: 1px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-solution-header,
.mmlms-practice-student-v2 .ps-solution-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-solution-icon,
.mmlms-practice-student-v2 .ps-solution-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 20px;
}

.mmlms-practice-container .mmlms-solution-icon .dashicons {
    font-size: 20px;
}

.mmlms-practice-container .mmlms-solution-title,
.mmlms-practice-student-v2 .ps-solution-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
    margin: 0;
}

.mmlms-practice-container .mmlms-solution-content,
.mmlms-practice-student-v2 .ps-solution-content {
    font-size: 15px;
    line-height: 1.8;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-solution-content {
    white-space: normal;
    text-align: left;
    word-break: break-word;
    overflow-wrap: break-word;
}
.mmlms-practice-container .mmlms-solution-content p,
.mmlms-practice-student-v2 .ps-solution-content p {
    margin: 0 0 12px;
}

.mmlms-practice-container .mmlms-solution-content p:last-child,
.mmlms-practice-student-v2 .ps-solution-content p:last-child {
    margin-bottom: 0;
}

.mmlms-practice-container .mmlms-solution-image,
.mmlms-practice-student-v2 .ps-solution-image {
    margin: 20px 0;
    text-align: center;
}

.mmlms-practice-container .mmlms-solution-image img,
.mmlms-practice-student-v2 .ps-solution-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--mmlms-radius-md, 12px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* Solution locked */
.mmlms-practice-container .mmlms-solution-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    background: var(--mmlms-bg, #f8fafc);
    border-radius: var(--mmlms-radius-md, 12px);
    border: 2px dashed var(--mmlms-border, #e2e8f0);
    gap: 16px;
}

.mmlms-practice-container .mmlms-solution-locked .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--mmlms-primary-light, #3b82f6);
}

.mmlms-practice-container .mmlms-solution-locked p {
    margin: 0;
    font-size: 16px;
    color: var(--mmlms-text-muted, #64748b);
}

/* Correct answer badge */
.mmlms-practice-student-v2 .ps-correct-answer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--mmlms-success, #10b981);
    border-radius: var(--mmlms-radius-sm, 8px);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 16px;
}

/* ========================================
   5.13  FEEDBACK CARD
   ======================================== */
.mmlms-practice-container .mmlms-feedback {
    margin-top: 24px;
    padding: 20px;
    border-radius: var(--mmlms-radius-md, 12px);
    animation: mmlms-slideUp 0.3s ease-out;
}

.mmlms-practice-container .mmlms-feedback.correct {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-feedback.incorrect {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--mmlms-danger, #ef4444);
}

.mmlms-practice-container .mmlms-feedback .solution {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--mmlms-border, #cbd5e1);
}

/* Feedback card (tutor style) */
.mmlms-practice-container .mmlms-feedback-card {
    margin-top: 24px;
    padding: 20px 24px;
    border-radius: var(--mmlms-radius-md, 12px);
    display: flex;
    align-items: center;
    gap: 16px;
}

.mmlms-practice-container .mmlms-feedback-card.correct {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-feedback-card.incorrect {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid var(--mmlms-danger, #ef4444);
}

.mmlms-practice-container .mmlms-feedback-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    flex-shrink: 0;
}

.mmlms-practice-container .mmlms-feedback-card.correct .mmlms-feedback-icon {
    background: var(--mmlms-success, #10b981);
    color: #fff;
}

.mmlms-practice-container .mmlms-feedback-card.incorrect .mmlms-feedback-icon {
    background: var(--mmlms-danger, #ef4444);
    color: #fff;
}

.mmlms-practice-container .mmlms-feedback-content { flex: 1; }

.mmlms-practice-container .mmlms-feedback-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

.mmlms-practice-container .mmlms-feedback-card.correct .mmlms-feedback-title {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-feedback-card.incorrect .mmlms-feedback-title {
    color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-container .mmlms-feedback-text {
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
    margin: 0;
}

/* ========================================
   5.14  QUESTION NAV GRID (tutor style)
   ======================================== */
.mmlms-practice-container .mmlms-question-nav {
    padding: 20px 24px;
    background: var(--mmlms-bg, #f8fafc);
    border-top: 1px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-question-nav-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    margin-bottom: 12px;
}

.mmlms-practice-container .mmlms-question-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 8px;
}

.mmlms-practice-container .mmlms-question-nav-item {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mmlms-card-bg, #fff);
    border: 1.5px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    cursor: pointer;
    transition: all 0.25s ease;
}

.mmlms-practice-container .mmlms-question-nav-item:hover {
    border-color: var(--mmlms-primary-light, #3b82f6);
    background: rgba(37, 99, 235, 0.04);
}

.mmlms-practice-container .mmlms-question-nav-item.current {
    border-color: var(--mmlms-primary, #2563eb);
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
}

.mmlms-practice-container .mmlms-question-nav-item.answered {
    border-color: var(--mmlms-success, #10b981);
    background: rgba(16, 185, 129, 0.08);
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-question-nav-item.skipped {
    border-color: var(--mmlms-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.08);
    color: #856404;
}

.mmlms-practice-container .mmlms-question-nav-item.flagged {
    position: relative;
}

.mmlms-practice-container .mmlms-question-nav-item.flagged::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--mmlms-danger, #ef4444);
    border-radius: 50%;
    border: 2px solid var(--mmlms-card-bg, #fff);
}

/* ========================================
   5.15  RESULTS SCREEN
   ======================================== */
.mmlms-practice-container .mmlms-results-card {
    text-align: center;
    padding: 40px;
}

.mmlms-practice-container .mmlms-results-header,
.mmlms-practice-student-v2 .ps-results-hero {
    text-align: center;
    margin-bottom: 30px;
    padding: 40px 32px;
}

.mmlms-practice-container .mmlms-results-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.mmlms-practice-student-v2 .ps-results-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
}

.mmlms-practice-container .mmlms-results-header h2 {
    margin: 0 0 8px;
    font-size: 1.75rem;
}

.mmlms-practice-container .mmlms-results-header p {
    color: var(--mmlms-text-muted, #64748b);
    margin: 0;
}

.mmlms-practice-student-v2 .ps-results-title {
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 800;
    margin: 0 0 12px;
    background: linear-gradient(135deg, var(--mmlms-text, #1e293b) 0%, var(--mmlms-primary, #2563eb) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mmlms-practice-student-v2 .ps-results-subtitle,
.mmlms-practice-container .mmlms-results-subtitle {
    font-size: 16px;
    color: var(--mmlms-text-muted, #64748b);
    margin: 0;
}

.mmlms-practice-student-v2 .ps-results-container,
.mmlms-practice-container .mmlms-results-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Score circle */
.mmlms-practice-container .mmlms-score-circle,
.mmlms-practice-container .mmlms-results-score {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.25);
}

.mmlms-practice-container .mmlms-score-circle.success {
    background: linear-gradient(135deg, var(--mmlms-success, #10b981) 0%, #059669 100%);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3);
}

.mmlms-practice-container .mmlms-score-circle.warning {
    background: linear-gradient(135deg, var(--mmlms-warning, #f59e0b) 0%, #d97706 100%);
    box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3);
}

.mmlms-practice-container .mmlms-score-circle.danger {
    background: linear-gradient(135deg, var(--mmlms-danger, #ef4444) 0%, #dc2626 100%);
    box-shadow: 0 10px 40px rgba(239, 68, 68, 0.3);
}

.mmlms-practice-container .mmlms-score-value,
.mmlms-practice-container .mmlms-results-score-value {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.mmlms-practice-container .mmlms-score-label,
.mmlms-practice-container .mmlms-results-score-label {
    font-size: 1rem;
    opacity: 0.9;
    margin-top: 4px;
}

/* SVG score circle (student-v2) */
.mmlms-practice-student-v2 .ps-score-circle {
    width: 180px;
    height: 180px;
    margin: 32px auto;
    position: relative;
}

.mmlms-practice-student-v2 .ps-score-circle svg {
    transform: rotate(-90deg);
}

.mmlms-practice-student-v2 .ps-score-circle-bg {
    fill: none;
    stroke: var(--mmlms-bg, #f1f5f9);
    stroke-width: 12;
}

.mmlms-practice-student-v2 .ps-score-circle-progress {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mmlms-practice-student-v2 .ps-score-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.mmlms-practice-student-v2 .ps-score-value {
    display: block;
    font-size: 42px;
    font-weight: 800;
    color: var(--mmlms-text, #1e293b);
    line-height: 1;
}

.mmlms-practice-student-v2 .ps-score-label {
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
    margin-top: 4px;
}

/* Performance message */
.mmlms-practice-container .mmlms-performance-message,
.mmlms-practice-student-v2 .ps-performance-message {
    padding: 16px 24px;
    border-radius: var(--mmlms-radius-md, 12px);
    margin: 24px 0;
    font-weight: 500;
    font-size: 16px;
}

.mmlms-practice-container .mmlms-performance-message.success,
.mmlms-practice-student-v2 .ps-performance-message.excellent {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

.mmlms-practice-container .mmlms-performance-message.warning,
.mmlms-practice-student-v2 .ps-performance-message.needs-improvement {
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

.mmlms-practice-container .mmlms-performance-message.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.mmlms-practice-student-v2 .ps-performance-message.good {
    background: rgba(37, 99, 235, 0.08);
    color: #1e40af;
}

/* Stats grid (results) */
.mmlms-practice-container .mmlms-results-stats,
.mmlms-practice-student-v2 .ps-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.mmlms-practice-container .mmlms-result-stat,
.mmlms-practice-student-v2 .ps-stat-card {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    transition: all 0.25s ease;
}

.mmlms-practice-student-v2 .ps-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mmlms-practice-student-v2 .ps-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--mmlms-radius-md, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
}

.mmlms-practice-student-v2 .ps-stat-card.correct .ps-stat-icon { background: rgba(16, 185, 129, 0.1); }
.mmlms-practice-student-v2 .ps-stat-card.wrong .ps-stat-icon { background: rgba(239, 68, 68, 0.1); }
.mmlms-practice-student-v2 .ps-stat-card.skipped .ps-stat-icon { background: rgba(245, 158, 11, 0.1); }
.mmlms-practice-student-v2 .ps-stat-card.total .ps-stat-icon { background: rgba(37, 99, 235, 0.08); }

.mmlms-practice-container .mmlms-result-stat-value,
.mmlms-practice-student-v2 .ps-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--mmlms-text, #1e293b);
    margin-bottom: 4px;
    line-height: 1;
}

.mmlms-practice-container .mmlms-result-stat.correct .mmlms-result-stat-value { color: var(--mmlms-success, #10b981); }
.mmlms-practice-container .mmlms-result-stat.incorrect .mmlms-result-stat-value { color: var(--mmlms-danger, #ef4444); }
.mmlms-practice-container .mmlms-result-stat.skipped .mmlms-result-stat-value { color: var(--mmlms-warning, #f59e0b); }

.mmlms-practice-container .mmlms-result-stat-label,
.mmlms-practice-student-v2 .ps-stat-label {
    font-size: 13px;
    color: var(--mmlms-text-muted, #64748b);
    margin-top: 4px;
}

/* Results actions */
.mmlms-practice-container .mmlms-results-actions,
.mmlms-practice-student-v2 .ps-results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Results title (tutor style) */
.mmlms-practice-container .mmlms-results-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
    margin: 0 0 8px;
}

/* ========================================
   5.16  TIER SYSTEM
   ======================================== */
.mmlms-practice-container .mmlms-tier-badge,
.mmlms-practice-student-v2 .mmlms-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--mmlms-bg, #f1f5f9);
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-container .mmlms-tier-badge-plus,
.mmlms-practice-container .mmlms-tier-badge-premium,
.mmlms-practice-student-v2 .mmlms-tier-badge-plus,
.mmlms-practice-student-v2 .mmlms-tier-badge-premium {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(217, 119, 6, 0.2);
}

/* Tier lock message */
.mmlms-practice-container .mmlms-tier-lock {
    padding: 40px 24px;
    text-align: center;
    background: var(--mmlms-bg, #f8fafc);
    border-radius: var(--mmlms-radius-xl, 20px);
    border: 2px dashed var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-container .mmlms-tier-lock-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mmlms-practice-container .mmlms-tier-lock-icon .dashicons {
    font-size: 40px;
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-container .mmlms-tier-lock h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
    margin: 0 0 8px;
}

.mmlms-practice-container .mmlms-tier-lock p {
    font-size: 15px;
    color: var(--mmlms-text-muted, #64748b);
    margin: 0 0 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.mmlms-practice-container .mmlms-tier-lock-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.mmlms-practice-container .mmlms-tier-lock-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-tier-lock-feature .dashicons {
    color: var(--mmlms-success, #10b981);
    font-size: 20px;
}

/* Upgrade button */
.mmlms-practice-container .mmlms-btn-upgrade {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    padding: 14px 32px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--mmlms-radius-md, 12px);
    transition: all 0.25s ease;
    min-height: 48px;
}

.mmlms-practice-container .mmlms-btn-upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
    color: #fff;
    text-decoration: none;
}

/* Tier notice */
.mmlms-practice-student-v2 .mmlms-tier-notice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-lg, 16px);
    margin-bottom: 32px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.mmlms-practice-student-v2 .mmlms-tier-notice-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.06);
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 20px;
}

.mmlms-practice-student-v2 .mmlms-tier-notice-content { flex: 1; }

.mmlms-practice-student-v2 .mmlms-tier-notice-content p {
    margin: 0;
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-student-v2 .mmlms-tier-notice-action {
    padding: 8px 16px;
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    text-decoration: none;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-weight: 700;
    font-size: 13px;
    transition: all 0.25s ease;
}

.mmlms-practice-student-v2 .mmlms-tier-notice-action:hover {
    background: var(--mmlms-primary-light, #1d4ed8);
    transform: translateY(-1px);
}

/* Tier limit card */
.mmlms-practice-student-v2 .mmlms-tier-limit-card {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-width: 700px;
    margin: 40px auto;
}

.mmlms-practice-student-v2 .mmlms-tier-limit-icon {
    font-size: 64px;
    margin-bottom: 24px;
    filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.2));
}

.mmlms-practice-student-v2 .mmlms-tier-limit-card h3 {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-student-v2 .mmlms-tier-upgrade-options {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    margin-top: 40px;
    text-align: left;
}

.mmlms-practice-student-v2 .mmlms-tier-option {
    padding: 32px;
    background: var(--mmlms-bg, #f8fafc);
    border-radius: 20px;
    border: 2px solid transparent;
}

.mmlms-practice-student-v2 .mmlms-tier-option-current {
    background: var(--mmlms-card-bg, #fff);
    border-color: var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-student-v2 .mmlms-tier-option h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

.mmlms-practice-student-v2 .mmlms-tier-option ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.mmlms-practice-student-v2 .mmlms-tier-option li {
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
    margin-bottom: 8px;
}

.mmlms-practice-student-v2 .mmlms-tier-reset-time {
    font-weight: 800;
    color: var(--mmlms-primary, #2563eb);
    font-family: var(--mmlms-font-mono, 'JetBrains Mono', monospace);
    font-size: 20px;
}

.mmlms-practice-student-v2 .mmlms-student-btn {
    display: inline-block;
    padding: 16px 32px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, #1d4ed8 100%);
    color: #fff;
    text-decoration: none;
    border-radius: var(--mmlms-radius-md, 12px);
    font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.mmlms-practice-student-v2 .mmlms-student-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
}

/* Student section */
.mmlms-practice-student-v2 .mmlms-student-section {
    padding: 16px 0;
}

.mmlms-practice-student-v2 .mmlms-student-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-student-v2 .mmlms-student-section-header h2 {
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    color: var(--mmlms-text, #1e293b);
    letter-spacing: -0.02em;
}

/* ========================================
   5.17  DIFFICULTY BADGES
   ======================================== */
.mmlms-practice-container .mmlms-difficulty-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-container .mmlms-difficulty-badge.easy {
    background: rgba(16, 185, 129, 0.1);
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-container .mmlms-difficulty-badge.medium {
    background: rgba(245, 158, 11, 0.1);
    color: #856404;
}

.mmlms-practice-container .mmlms-difficulty-badge.hard {
    background: rgba(239, 68, 68, 0.1);
    color: var(--mmlms-danger, #ef4444);
}

/* ========================================
   5.18  PRACTICE DASHBOARD
   ======================================== */
.mmlms-practice-container .mmlms-practice-dashboard {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.mmlms-practice-container .mmlms-student-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 30px 20px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    border-radius: var(--mmlms-radius-md, 12px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

.mmlms-practice-container .mmlms-student-header h1 {
    margin: 0 0 10px;
    font-size: 1.75rem;
    font-weight: 700;
}

.mmlms-practice-container .mmlms-student-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Session list */
.mmlms-practice-container .mmlms-session-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mmlms-practice-container .mmlms-session-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #e2e8f0);
    border-radius: var(--mmlms-radius-md, 12px);
    transition: all 0.2s ease;
}

.mmlms-practice-container .mmlms-session-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.mmlms-practice-container .mmlms-session-card.completed {
    border-left: 4px solid var(--mmlms-success, #22c55e);
}

.mmlms-practice-container .mmlms-session-card.in-progress {
    border-left: 4px solid var(--mmlms-primary, #2563eb);
}

.mmlms-practice-container .mmlms-session-info h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-session-meta {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: var(--mmlms-text-muted, #64748b);
    flex-wrap: wrap;
}

.mmlms-practice-container .mmlms-session-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Badge */
.mmlms-practice-container .mmlms-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-container .mmlms-badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: #0f5132;
}

/* Card title */
.mmlms-practice-container .mmlms-card-title {
    margin: 0 0 20px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mmlms-border, #e2e8f0);
}

/* Empty state */
.mmlms-practice-container .mmlms-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.mmlms-practice-container .mmlms-empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    color: var(--mmlms-text-muted, #64748b);
}

.mmlms-practice-container .mmlms-empty-title {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-container .mmlms-empty-text {
    margin: 0 0 20px;
    color: var(--mmlms-text-muted, #64748b);
}

/* Loading */
.mmlms-practice-container .mmlms-loading,
.mmlms-practice-student-v2 .ps-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
}

.mmlms-practice-container .mmlms-loading-spinner,
.mmlms-practice-student-v2 .ps-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--mmlms-border, #e2e8f0);
    border-top-color: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
    animation: mmlms-spin 1s linear infinite;
}

.mmlms-practice-container .mmlms-loading-text,
.mmlms-practice-student-v2 .ps-loading-text {
    margin-top: 16px;
    font-size: 14px;
    color: var(--mmlms-text-muted, #64748b);
}

/* Skeleton loading */
.mmlms-practice-student-v2 .ps-skeleton {
    background: linear-gradient(90deg, var(--mmlms-bg, #f1f5f9) 25%, var(--mmlms-card-bg, #e2e8f0) 50%, var(--mmlms-bg, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: mmlms-shimmer 1.5s infinite;
    border-radius: var(--mmlms-radius-sm, 8px);
}

/* Scrollbar */
.mmlms-practice-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mmlms-practice-container::-webkit-scrollbar-track {
    background: var(--mmlms-bg, #f8fafc);
}

.mmlms-practice-container::-webkit-scrollbar-thumb {
    background: var(--mmlms-border, #e2e8f0);
    border-radius: 3px;
}

.mmlms-practice-container::-webkit-scrollbar-thumb:hover {
    background: var(--mmlms-text-muted, #94a3b8);
}

/* Utility visibility */
.mmlms-practice-student-v2 .ps-hidden { display: none; }

.mmlms-practice-student-v2 .ps-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus states */
.mmlms-practice-container .mmlms-btn:focus,
.mmlms-practice-container .mmlms-option-label:focus,
.mmlms-practice-container .mmlms-numeric-input:focus,
.mmlms-practice-container .mmlms-question-nav-item:focus,
.mmlms-practice-student-v2 .ps-focus-ring:focus {
    outline: 2px solid var(--mmlms-primary, #2563eb);
    outline-offset: 2px;
}

/* ========================================
   5.19  DARK MODE
   ======================================== */
[data-mmlms-theme="dark"] .mmlms-practice-container,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 {
    --mmlms-bg: #0f172a;
    --mmlms-card-bg: #1e293b;
    --mmlms-text: #f1f5f9;
    --mmlms-text-muted: #94a3b8;
    --mmlms-border: #334155;
    --mmlms-primary: #3b82f6;
    --mmlms-primary-light: #60a5fa;
}

/* Hero / header dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-practice-header,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

/* Mode cards dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-practice-mode-card,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-mode-card {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-practice-mode-icon,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-mode-icon {
    background: rgba(59, 130, 246, 0.15);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-mode-feature {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-mode-card.active {
    background: rgba(37, 99, 235, 0.1);
}

/* Form dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-form-section,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-form-section {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-input,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-select {
    background: #0f172a;
    border-color: var(--mmlms-border);
    color: var(--mmlms-text);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-checkbox-group {
    background: rgba(255, 255, 255, 0.05);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-range {
    background: #334155;
}

/* Preset dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-preset-card,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-preset-card {
    background: var(--mmlms-card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-preset-icon,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-preset-icon {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--mmlms-border);
}

/* Session container dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-session-container {
    background: var(--mmlms-card-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-session-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-color: var(--mmlms-border);
}

/* Timer dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-session-timer,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-question-timer {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

/* Progress dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-progress-wrapper,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-progress-wrapper {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-progress-bar-container,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-progress-bar-container {
    background: #334155;
}

/* Question card dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-question-card,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-question-card {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-question-number {
    background: rgba(59, 130, 246, 0.15);
}

/* Options dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option-label,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option:hover,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option-label:hover,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option:hover {
    background: rgba(59, 130, 246, 0.08);
    border-color: var(--mmlms-primary);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option-letter,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option-letter {
    background: #1e293b;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option.selected,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-option-label.selected,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option.selected {
    background: rgba(59, 130, 246, 0.15);
}

/* Inputs dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-numerical-input,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-matrix-input,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-subjective-input,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-sub-question {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-numerical-input input,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-numeric-input-wrapper .mmlms-numeric-input,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-numerical-input input {
    background: #1e293b;
    border-color: var(--mmlms-border);
    color: var(--mmlms-text);
}

/* Buttons dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-btn-secondary,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-btn-secondary {
    background: #1e293b;
    border-color: var(--mmlms-border);
    color: var(--mmlms-text);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-nav-btn {
    background: #1e293b;
    border-color: var(--mmlms-border);
    color: var(--mmlms-text);
}

/* Solution dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-solution-card,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-solution-panel {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

/* Feedback dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-feedback.correct,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-feedback-card.correct {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-feedback.incorrect,
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-feedback-card.incorrect {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Question nav dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-question-nav {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-question-nav-item {
    background: #1e293b;
    border-color: var(--mmlms-border);
    color: var(--mmlms-text);
}

/* Results dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-result-stat,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-stat-card {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-results-title {
    background: linear-gradient(135deg, #f1f5f9 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Performance message dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-performance-message.success,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.excellent {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-performance-message.warning,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.needs-improvement {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-performance-message.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.good {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

/* Tier dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-tier-lock {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-solution-locked {
    background: #0f172a;
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-tier-notice {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-tier-limit-card {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-tier-option {
    background: #0f172a;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-tier-option-current {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

/* Dashboard dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-student-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-session-card {
    background: var(--mmlms-card-bg);
    border-color: var(--mmlms-border);
}

[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-badge-success {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

/* Passage dark */
[data-mmlms-theme="dark"] .mmlms-practice-container .mmlms-passage-box,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-passage-box {
    background: #0f172a;
    border-color: var(--mmlms-primary);
}

/* Scrollbar dark */
[data-mmlms-theme="dark"] .mmlms-practice-container::-webkit-scrollbar-track {
    background: #0f172a;
}

[data-mmlms-theme="dark"] .mmlms-practice-container::-webkit-scrollbar-thumb {
    background: #475569;
}

/* ========================================
   5.20  RESPONSIVE BREAKPOINTS
   ======================================== */
@media (max-width: 1024px) {
    .mmlms-practice-student-v2 .mmlms-tier-upgrade-options {
        grid-template-columns: 1fr;
    }

    .mmlms-practice-container .mmlms-btn-upgrade,
    .mmlms-practice-modern .mmlms-btn-upgrade {
        width: 100%;
        padding: 12px 24px;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .mmlms-practice-container .mmlms-practice-header,
    .mmlms-practice-student-v2 .ps-hero {
        padding: 32px 20px;
    }

    .mmlms-practice-student-v2 .ps-hero-stats {
        gap: 20px;
    }

    .mmlms-practice-student-v2 .ps-hero-stat-value {
        font-size: 24px;
    }

    .mmlms-practice-container .mmlms-practice-modes,
    .mmlms-practice-student-v2 .ps-mode-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mmlms-practice-student-v2 .ps-form-grid {
        grid-template-columns: 1fr;
    }

    .mmlms-practice-container .mmlms-presets-grid,
    .mmlms-practice-student-v2 .ps-preset-grid {
        grid-template-columns: 1fr;
    }

    .mmlms-practice-container .mmlms-session-header {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    .mmlms-practice-container .mmlms-practice-header.session-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .mmlms-practice-container .mmlms-session-timer,
    .mmlms-practice-student-v2 .ps-question-timer {
        font-size: 1.1rem;
        padding: 10px 16px;
    }

    .mmlms-practice-container .mmlms-progress-marker,
    .mmlms-practice-student-v2 .ps-progress-marker {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .mmlms-practice-container .mmlms-question-card,
    .mmlms-practice-student-v2 .ps-question-card {
        padding: 24px 16px;
    }

    .mmlms-practice-container .mmlms-question-text,
    .mmlms-practice-student-v2 .ps-question-text {
        font-size: 1rem;
    }

    .mmlms-practice-container .mmlms-option,
    .mmlms-practice-container .mmlms-option-label,
    .mmlms-practice-student-v2 .ps-option {
        padding: 12px 16px;
    }

    .mmlms-practice-container .mmlms-option-letter,
    .mmlms-practice-student-v2 .ps-option-letter {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .mmlms-practice-container .mmlms-question-navigation,
    .mmlms-practice-container .mmlms-question-actions {
        flex-direction: column;
    }

    .mmlms-practice-container .mmlms-question-navigation .mmlms-btn {
        width: 100%;
    }

    .mmlms-practice-container .mmlms-question-nav {
        padding: 16px;
    }

    .mmlms-practice-container .mmlms-question-header,
    .mmlms-practice-student-v2 .ps-question-header {
        flex-direction: column;
    }

    .mmlms-practice-container .mmlms-score-circle,
    .mmlms-practice-container .mmlms-results-score {
        width: 130px;
        height: 130px;
    }

    .mmlms-practice-container .mmlms-score-value,
    .mmlms-practice-container .mmlms-results-score-value {
        font-size: 2.5rem;
    }

    .mmlms-practice-container .mmlms-results-actions,
    .mmlms-practice-student-v2 .ps-results-actions {
        flex-direction: column;
    }

    .mmlms-practice-container .mmlms-results-actions .mmlms-btn {
        width: 100%;
    }

    .mmlms-practice-container .mmlms-results-stats,
    .mmlms-practice-student-v2 .ps-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mmlms-practice-container .mmlms-results-container {
        padding: 24px 16px;
    }

    .mmlms-practice-container .mmlms-session-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .mmlms-practice-container .mmlms-session-meta {
        flex-direction: column;
        gap: 4px;
    }

    .mmlms-practice-container .mmlms-student-header {
        padding: 24px 16px;
    }

    .mmlms-practice-container .mmlms-student-header h1 {
        font-size: 1.4rem;
    }

    .mmlms-practice-container .mmlms-feedback-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .mmlms-practice-student-v2 .mmlms-tier-notice {
        flex-direction: column;
        text-align: center;
    }
}

/* ========================================
   FIX 10: Session info container uneven stacking at tablet
   ======================================== */
@media (max-width: 768px) {
    /* Legacy: let meta badges wrap naturally instead of squeezing into a tight column */
    .mmlms-practice-container .mmlms-session-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    /* Modern: make info block full-width so it aligns with full-width actions */
    .mmlms-practice-modern .mmlms-session-info {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .mmlms-practice-container {
        padding: 12px;
        border-radius: 8px;
    }

    .mmlms-practice-container .mmlms-practice-header,
    .mmlms-practice-student-v2 .ps-hero {
        padding: 24px 16px;
    }

    .mmlms-practice-container .mmlms-practice-header.session-header {
        padding: 16px;
    }

    .mmlms-practice-container .mmlms-practice-mode-card,
    .mmlms-practice-student-v2 .ps-mode-card {
        padding: 24px 20px;
    }

    .mmlms-practice-container .mmlms-preset-header,
    .mmlms-practice-student-v2 .ps-preset-header {
        flex-direction: column;
        text-align: center;
    }

    .mmlms-practice-container .mmlms-preset-stats,
    .mmlms-practice-student-v2 .ps-preset-stats {
        justify-content: center;
    }

    .mmlms-practice-container .mmlms-progress-markers,
    .mmlms-practice-student-v2 .ps-progress-markers {
        gap: 4px;
    }

    .mmlms-practice-container .mmlms-progress-marker,
    .mmlms-practice-student-v2 .ps-progress-marker {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .mmlms-practice-container .mmlms-option,
    .mmlms-practice-container .mmlms-option-label,
    .mmlms-practice-student-v2 .ps-option {
        padding: 10px 12px;
    }

    .mmlms-practice-container .mmlms-option-letter,
    .mmlms-practice-student-v2 .ps-option-letter {
        width: 28px;
        height: 28px;
    }

    .mmlms-practice-container .mmlms-question-badge,
    .mmlms-practice-student-v2 .ps-question-number-badge {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.8rem;
        padding: 6px 16px;
    }

    .mmlms-practice-container .mmlms-score-circle,
    .mmlms-practice-container .mmlms-results-score {
        width: 120px;
        height: 120px;
    }

    .mmlms-practice-container .mmlms-score-value,
    .mmlms-practice-container .mmlms-results-score-value {
        font-size: 2rem;
    }

    .mmlms-practice-container .mmlms-results-stats,
    .mmlms-practice-student-v2 .ps-stats-grid {
        grid-template-columns: 1fr;
    }

    .mmlms-practice-container .mmlms-practice-dashboard {
        padding: 12px;
    }

    .mmlms-practice-container .mmlms-student-header {
        padding: 20px 16px;
    }

    .mmlms-practice-container .mmlms-student-header h1 {
        font-size: 1.25rem;
    }

    .mmlms-practice-container .mmlms-session-card {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .mmlms-practice-container .mmlms-session-meta {
        justify-content: center;
    }

    .mmlms-practice-container .mmlms-btn,
    .mmlms-practice-student-v2 .ps-btn {
        width: 100%;
        padding: 12px 20px;
    }

    .mmlms-practice-container .mmlms-btn-upgrade {
        width: 100%;
        padding: 12px 24px;
    }

    .mmlms-practice-container .mmlms-solution-locked {
        padding: 32px 20px;
    }

    .mmlms-practice-container .mmlms-results-actions {
        flex-direction: column;
    }

    .mmlms-practice-container .mmlms-tier-lock-features {
        flex-direction: column;
        gap: 12px;
    }

    .mmlms-practice-student-v2 .ps-numerical-input input,
    .mmlms-practice-container .mmlms-numeric-input-wrapper .mmlms-numeric-input {
        font-size: 16px;
        padding: 14px;
    }
}

/* ========================================
   5.21  PRINT STYLES
   ======================================== */
@media print {
    .mmlms-practice-container .mmlms-practice-header,
    .mmlms-practice-student-v2 .ps-hero,
    .mmlms-practice-container .mmlms-question-navigation,
    .mmlms-practice-container .mmlms-question-actions,
    .mmlms-practice-container .mmlms-practice-actions,
    .mmlms-practice-container .mmlms-session-timer,
    .mmlms-practice-student-v2 .ps-navigation,
    .mmlms-practice-student-v2 .ps-progress-wrapper {
        display: none;
    }

    .mmlms-practice-container .mmlms-question-card,
    .mmlms-practice-student-v2 .ps-question-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* =====================================================================
   STEP 6 — EXTRACTED INLINE STYLES
   PHP inline style="" attributes → CSS classes
   ===================================================================== */

/* Config hero header card */
.mmlms-practice-student-v2 .mmlms-header-card {
    margin-bottom: 32px;
    border-radius: 20px;
    overflow: hidden;
}

.mmlms-practice-student-v2 .mmlms-header-content {
    padding: 40px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    position: relative;
}

.mmlms-practice-student-v2 .mmlms-header-content::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}

.mmlms-practice-student-v2 .mmlms-header-meta {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.mmlms-practice-student-v2 .mmlms-header-meta .mmlms-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
}

.mmlms-practice-student-v2 .mmlms-header-meta .mmlms-badge .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

.mmlms-practice-student-v2 .mmlms-header-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 12px;
    letter-spacing: -0.5px;
    color: #fff;
    position: relative;
    z-index: 1;
}

.mmlms-practice-student-v2 .mmlms-header-subtitle {
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Reattempt loading spinner */
.mmlms-practice-container #reattempt-loading {
    margin-top: 20px;
    text-align: center;
}

.mmlms-practice-container #reattempt-loading .mmlms-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 3px solid var(--mmlms-border, #e2e8f0);
    border-top-color: var(--mmlms-primary, #2563eb);
    border-radius: 50%;
    animation: mmlms-spin 1s linear infinite;
}

.mmlms-practice-container #reattempt-loading p {
    margin-top: 10px;
    color: var(--mmlms-text-muted, #64748b);
}

/* Result action buttons with icons */
.mmlms-practice-container .mmlms-results-actions .dashicons,
.mmlms-practice-student-v2 .ps-results-actions .dashicons {
    margin-right: 8px;
}

/* Question image inline extraction */
.mmlms-practice-container .mmlms-question-image,
.mmlms-practice-student-v2 .ps-question-image {
    margin: 24px 0;
    text-align: center;
}

.mmlms-practice-container .mmlms-question-image img,
.mmlms-practice-student-v2 .ps-question-image img {
    max-width: 100%;
    border-radius: var(--mmlms-radius-sm, 8px);
}

/* Form hint small text */
.mmlms-practice-student-v2 .ps-form-hint {
    display: block;
    color: var(--mmlms-text-muted, #64748b);
    font-weight: normal;
    margin-top: 2px;
    font-size: 12px;
}

/* Button icon spacing */
.mmlms-practice-container .mmlms-btn .dashicons,
.mmlms-practice-student-v2 .ps-btn .dashicons {
    margin-right: 8px;
}

/* Inline form (doubt form) */
.mmlms-practice-container .mmlms-inline-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: flex-end;
}

.mmlms-practice-container .mmlms-inline-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Numerical input margin */
.mmlms-practice-student-v2 .ps-numerical-input {
    margin-bottom: 16px;
}

/* Doubt question text */
.mmlms-practice-container .mmlms-doubt-text {
    margin: 6px 0 0;
    color: var(--mmlms-text-muted, #475569);
}

/* Action buttons row */
.mmlms-practice-container .mmlms-action-row {
    display: flex;
    gap: 12px;
}

/* End button danger color */
.mmlms-practice-student-v2 #btn-end.ps-btn-secondary {
    color: var(--mmlms-danger, #ef4444);
}

/* Dark mode for extracted styles */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-header-content {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}

[data-mmlms-theme="dark"] .mmlms-practice-container #reattempt-loading .mmlms-spinner {
    border-color: var(--mmlms-border);
    border-top-color: var(--mmlms-primary);
}

[data-mmlms-theme="dark"] .mmlms-practice-container #reattempt-loading p {
    color: var(--mmlms-text-muted);
}

/* Responsive for extracted styles */
@media (max-width: 768px) {
    .mmlms-practice-student-v2 .mmlms-header-content {
        padding: 32px 20px;
    }

    .mmlms-practice-student-v2 .mmlms-header-title {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .mmlms-practice-student-v2 .mmlms-header-content {
        padding: 24px 16px;
    }

    .mmlms-practice-student-v2 .mmlms-header-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   NEW LAYOUT STYLES - Navigation & Explanation Panel
   ========================================================================== */

/* Hide Progress Card */
.mmlms-practice-modern .mmlms-progress-card {
    display: none !important;
}

/* Updated Arrow Navigation with Submit in middle */
.mmlms-practice-modern .mmlms-arrow-nav {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--mmlms-space-md);
}

/* Previous button - align left */
.mmlms-practice-modern .mmlms-arrow-prev {
    margin-right: auto;
}

/* Next button - align right (new style) */
.mmlms-practice-modern .mmlms-btn-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--mmlms-radius, 12px);
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    color: var(--mmlms-text-muted, #6b7280);
    cursor: pointer;
    box-shadow: var(--mmlms-shadow-sm);
    transition: var(--mmlms-transition-fast, 150ms ease);
    margin-left: auto;
}

.mmlms-practice-modern .mmlms-btn-next:hover:not(:disabled) {
    background: var(--mmlms-primary, #2563eb);
    border-color: var(--mmlms-primary, #2563eb);
    color: var(--mmlms-card-bg, #fff);
    box-shadow: var(--mmlms-shadow);
    transform: translateY(-2px);
}

.mmlms-practice-modern .mmlms-btn-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Submit button in navigation */
.mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit {
    order: 0;
}

.mmlms-practice-modern .mmlms-arrow-prev {
    order: -1;
}

.mmlms-practice-modern .mmlms-btn-next {
    order: 1;
}

/* Hide old question actions container since submit is now in nav */
.mmlms-practice-modern .mmlms-question-actions {
    display: none;
}

/* Solution Card - now always visible inline */
.mmlms-practice-modern .mmlms-solution-card-inline {
    margin-top: 0;
}

.mmlms-practice-modern .mmlms-solution-card-inline .mmlms-solution-wrapper {
    display: block !important;
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

/* Ensure sidebar solution card stretches full height */
.mmlms-practice-modern .mmlms-sidebar-panel .mmlms-solution-card-inline {
    height: 100%;
}

.mmlms-practice-modern .mmlms-sidebar-panel .mmlms-solution-content {
    height: 100%;
}

/* Ensure solution content is visible */
.mmlms-practice-modern .mmlms-solution-content {
    max-height: none;
    overflow-y: visible;
}

/* Solution placeholder styling */
.mmlms-practice-modern .mmlms-solution-placeholder {
    min-height: 120px;
}

/* Correct answer display in solution */
.mmlms-practice-modern .mmlms-correct-answer {
    background: var(--mmlms-success-light, #d1fae5);
    border: 1px solid var(--mmlms-success, #10b981);
    border-radius: var(--mmlms-radius, 12px);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-modern .mmlms-correct-answer strong {
    color: var(--mmlms-success, #10b981);
}

/* Dark mode for new elements */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-next {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border, #334155);
    color: var(--mmlms-text-muted, #9ca3af);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-btn-next:hover:not(:disabled) {
    background: var(--mmlms-primary, #60a5fa);
    border-color: var(--mmlms-primary, #60a5fa);
    color: var(--mmlms-bg, #181f2a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-correct-answer {
    background: var(--mmlms-success-light, #064e3b);
    border-color: var(--mmlms-success, #34d399);
    color: var(--mmlms-text, #f3f4f6);
}

/* Responsive for new layout */
@media screen and (max-width: 768px) {
    .mmlms-practice-modern .mmlms-arrow-nav {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit,
    .mmlms-practice-modern .mmlms-btn-next {
        flex: 1 1 calc(50% - 6px);
        min-width: 120px;
    }
    
    .mmlms-practice-modern .mmlms-arrow-prev {
        width: 48px;
        flex: 0 0 48px;
    }
}

@media screen and (max-width: 480px) {
    .mmlms-practice-modern .mmlms-arrow-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .mmlms-practice-modern .mmlms-arrow-prev,
    .mmlms-practice-modern .mmlms-btn-next {
        flex: 1 1 40%;
    }
    
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit {
        flex: 1 1 100%;
        order: -1;
    }
}

/* ==========================================================================
   PRACTICE LAYOUT REDESIGN - FEEDBACK & EXPLANATION BUTTON STYLES
   ========================================================================== */

/* Feedback display after submission */
.mmlms-practice-modern .mmlms-feedback {
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: var(--mmlms-radius-sm, 8px);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: mmlms-fadeInUp 0.3s ease-out;
}

.mmlms-practice-modern .mmlms-feedback-correct {
    background: var(--mmlms-success-light, #d1fae5);
    color: var(--mmlms-success, #10b981);
    border: 1px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-feedback-correct .dashicons {
    color: var(--mmlms-success, #10b981);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mmlms-practice-modern .mmlms-feedback-incorrect {
    background: var(--mmlms-danger-light, #fee2e2);
    color: var(--mmlms-danger, #ef4444);
    border: 1px solid var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-feedback-incorrect .dashicons {
    color: var(--mmlms-danger, #ef4444);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* View Explanation button */
.mmlms-practice-modern .mmlms-btn-explanation {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--mmlms-radius, 12px);
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.mmlms-practice-modern .mmlms-btn-explanation:hover:not(:disabled) {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.mmlms-practice-modern .mmlms-btn-explanation:disabled,
.mmlms-practice-modern .mmlms-btn-explanation.locked {
    background: var(--mmlms-gray-300, #cbd5e1);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

.mmlms-practice-modern .mmlms-btn-explanation .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Submit button disabled state (after submission) */
.mmlms-practice-modern .mmlms-btn-submit:disabled {
    background: var(--mmlms-gray-300, #cbd5e1);
    color: var(--mmlms-gray-600, #64748b);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.8;
}

/* Navigation layout: Prev | Submit | Next */
.mmlms-practice-modern .mmlms-arrow-nav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--mmlms-space-md);
}

/* Prev button on left */
.mmlms-practice-modern .mmlms-arrow-prev {
    order: -1;
}

/* Submit button in middle */
.mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit {
    order: 0;
    flex: 0 0 auto;
}

/* Next button on right */
.mmlms-practice-modern .mmlms-btn-next {
    order: 1;
}

/* View Explanation button positioned after Submit */
.mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-explanation {
    order: 0;
    margin-left: 8px;
}

/* Solution card styles update */
.mmlms-practice-modern .mmlms-solution-card {
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius, 12px);
    padding: 20px;
    height: fit-content;
}

.mmlms-practice-modern .mmlms-solution-card h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mmlms-text, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mmlms-practice-modern .mmlms-solution-card h3 .dashicons {
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-solution-placeholder {
    text-align: center;
    padding: 32px 16px;
    color: var(--mmlms-gray-500, #64748b);
}

.mmlms-practice-modern .mmlms-solution-placeholder .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    color: var(--mmlms-gray-400, #94a3b8);
}

.mmlms-practice-modern .mmlms-solution-placeholder p {
    margin: 0;
    font-size: 14px;
}

.mmlms-practice-modern .mmlms-solution-locked {
    text-align: center;
    padding: 32px 16px;
    color: var(--mmlms-gray-500, #64748b);
    background: var(--mmlms-gray-50, #f8fafc);
    border-radius: var(--mmlms-radius-sm, 8px);
    border: 1px dashed var(--mmlms-gray-300, #cbd5e1);
}

.mmlms-practice-modern .mmlms-solution-locked .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    color: var(--mmlms-gray-400, #94a3b8);
}

.mmlms-practice-modern .mmlms-solution-locked p {
    margin: 0;
    font-size: 14px;
}

.mmlms-practice-modern .mmlms-correct-answer {
    background: var(--mmlms-success-light, #d1fae5);
    border: 1px solid var(--mmlms-success, #10b981);
    border-radius: var(--mmlms-radius-sm, 8px);
    padding: 12px 16px;
    margin-bottom: 16px;
    color: var(--mmlms-success, #10b981);
    font-weight: 500;
}

/* Dark mode support */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-correct {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--mmlms-success, #10b981);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-incorrect {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--mmlms-danger, #ef4444);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-solution-locked {
    background: var(--mmlms-gray-800, #1e293b);
    border-color: var(--mmlms-gray-600, #475569);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-correct-answer {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--mmlms-success, #10b981);
}

/* ==========================================================================
   INLINE ANSWER FEEDBACK (for numerical/subjective questions)
   ========================================================================== */

.mmlms-practice-modern .mmlms-answer-feedback-inline {
    margin: 16px 0;
    padding: 16px 20px;
    border-radius: var(--mmlms-radius, 12px);
    animation: mmlms-fadeInUp 0.3s ease-out;
}

.mmlms-practice-modern .mmlms-answer-feedback-inline.correct {
    background: var(--mmlms-success-light, #d1fae5);
    border: 1px solid var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-answer-feedback-inline.incorrect {
    background: var(--mmlms-danger-light, #fee2e2);
    border: 1px solid var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-feedback-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.mmlms-practice-modern .mmlms-feedback-status.correct {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-feedback-status.incorrect {
    color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-feedback-status .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mmlms-practice-modern .mmlms-feedback-user-answer,
.mmlms-practice-modern .mmlms-feedback-correct-answer {
    font-size: 14px;
    margin-top: 8px;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-modern .mmlms-feedback-correct-answer {
    color: var(--mmlms-success, #059669);
    font-weight: 500;
}

/* Dark mode for inline feedback */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-answer-feedback-inline.correct {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--mmlms-success, #10b981);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-answer-feedback-inline.incorrect {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--mmlms-danger, #ef4444);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-user-answer,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-correct-answer {
    color: var(--mmlms-text, #f3f4f6);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-arrow-nav {
        flex-wrap: nowrap;
        gap: 10px;
    }
    
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit,
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-explanation {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 14px;
        font-size: 14px;
    }
    
    .mmlms-practice-modern .mmlms-arrow-prev {
        width: 42px;
        flex: 0 0 42px;
        height: 42px;
        padding: 0;
    }
    
    .mmlms-practice-modern .mmlms-btn-next {
        flex: 0 0 auto;
        padding: 10px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .mmlms-practice-modern .mmlms-arrow-nav {
        flex-direction: column;
    }
    
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit,
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-explanation {
        flex: 1 1 100%;
        width: 100%;
    }
    
    .mmlms-practice-modern .mmlms-arrow-prev,
    .mmlms-practice-modern .mmlms-btn-next {
        flex: 1 1 calc(50% - 6px);
    }
}

/* ==========================================================================
   OPTION CORRECT/INCORRECT HIGHLIGHTING - ENHANCED STYLES
   ========================================================================== */

/* Correct option - green highlight */
.mmlms-practice-modern .mmlms-option.correct {
    background: var(--mmlms-success-light, #d1fae5) !important;
    border-color: var(--mmlms-success, #10b981) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Correct option letter */
.mmlms-practice-modern .mmlms-option.correct .mmlms-option-letter {
    background: var(--mmlms-success, #10b981) !important;
    color: #fff !important;
    border-color: var(--mmlms-success, #10b981) !important;
}

/* Wrong/incorrect option - red highlight */
.mmlms-practice-modern .mmlms-option.wrong {
    background: var(--mmlms-danger-light, #fee2e2) !important;
    border-color: var(--mmlms-danger, #ef4444) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Wrong option letter */
.mmlms-practice-modern .mmlms-option.wrong .mmlms-option-letter {
    background: var(--mmlms-danger, #ef4444) !important;
    color: #fff !important;
    border-color: var(--mmlms-danger, #ef4444) !important;
}

/* Add checkmark icon to correct option */
.mmlms-practice-modern .mmlms-option.correct::after {
    content: '\f15e';
    font-family: 'Dashicons';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mmlms-success, #10b981);
    font-size: 20px;
    font-weight: bold;
}

/* Add X icon to wrong option */
.mmlms-practice-modern .mmlms-option.wrong::after {
    content: '\f158';
    font-family: 'Dashicons';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mmlms-danger, #ef4444);
    font-size: 20px;
    font-weight: bold;
}

/* Ensure options have relative positioning for the icon */
.mmlms-practice-modern .mmlms-option {
    position: relative;
}

/* Dark mode support */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: var(--mmlms-success, #34d399) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: var(--mmlms-danger, #f87171) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct::after {
    color: var(--mmlms-success, #34d399);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong::after {
    color: var(--mmlms-danger, #f87171);
}

/* ==========================================================================
   OPTION CORRECT/INCORRECT HIGHLIGHTING - MODERN UPGRADED STYLES
   ========================================================================== */

/* Base option styles with smooth transitions */
.mmlms-practice-modern .mmlms-option {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Correct option - modern green styling */
.mmlms-practice-modern .mmlms-option.correct {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #10b981;
    border-width: 2px;
    box-shadow: 
        0 0 0 4px rgba(16, 185, 129, 0.1),
        0 4px 12px rgba(16, 185, 129, 0.15);
    transform: translateX(4px);
}

/* Correct option hover effect */
.mmlms-practice-modern .mmlms-option.correct:hover {
    box-shadow: 
        0 0 0 4px rgba(16, 185, 129, 0.15),
        0 6px 20px rgba(16, 185, 129, 0.2);
}

/* Correct option letter - vibrant green pill */
.mmlms-practice-modern .mmlms-option.correct .mmlms-option-letter {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    transform: scale(1.05);
}

/* Wrong/incorrect option - modern red styling */
.mmlms-practice-modern .mmlms-option.wrong {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #ef4444;
    border-width: 2px;
    box-shadow: 
        0 0 0 4px rgba(239, 68, 68, 0.08),
        0 4px 12px rgba(239, 68, 68, 0.12);
    transform: translateX(4px);
    opacity: 0.9;
}

/* Wrong option letter - vibrant red pill */
.mmlms-practice-modern .mmlms-option.wrong .mmlms-option-letter {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border-color: #ef4444;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
    transform: scale(1.05);
}

/* Checkmark icon for correct option - modern style */
.mmlms-practice-modern .mmlms-option.correct::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.mmlms-practice-modern .mmlms-option.correct::before {
    content: '';
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    z-index: 1;
    margin-top: -1px;
}

/* X icon for wrong option - modern style */
.mmlms-practice-modern .mmlms-option.wrong::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

.mmlms-practice-modern .mmlms-option.wrong::before {
    content: '\00d7';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    z-index: 1;
}

/* Animation for result reveal */
@keyframes mmlms-resultReveal {
    0% {
        transform: translateX(0) scale(0.98);
        opacity: 0.8;
    }
    50% {
        transform: translateX(8px) scale(1.01);
    }
    100% {
        transform: translateX(4px) scale(1);
        opacity: 1;
    }
}

.mmlms-practice-modern .mmlms-option.correct,
.mmlms-practice-modern .mmlms-option.wrong {
    animation: mmlms-resultReveal 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Staggered animation for multiple options */
.mmlms-practice-modern .mmlms-options .mmlms-option.correct:nth-child(1),
.mmlms-practice-modern .mmlms-options .mmlms-option.wrong:nth-child(1) {
    animation-delay: 0ms;
}

.mmlms-practice-modern .mmlms-options .mmlms-option.correct:nth-child(2),
.mmlms-practice-modern .mmlms-options .mmlms-option.wrong:nth-child(2) {
    animation-delay: 50ms;
}

.mmlms-practice-modern .mmlms-options .mmlms-option.correct:nth-child(3),
.mmlms-practice-modern .mmlms-options .mmlms-option.wrong:nth-child(3) {
    animation-delay: 100ms;
}

.mmlms-practice-modern .mmlms-options .mmlms-option.correct:nth-child(4),
.mmlms-practice-modern .mmlms-options .mmlms-option.wrong:nth-child(4) {
    animation-delay: 150ms;
}

/* Dark mode support - enhanced */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%);
    border-color: #34d399;
    box-shadow: 
        0 0 0 4px rgba(16, 185, 129, 0.1),
        0 4px 16px rgba(16, 185, 129, 0.2);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct .mmlms-option-letter {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.5);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.22) 100%);
    border-color: #f87171;
    box-shadow: 
        0 0 0 4px rgba(239, 68, 68, 0.08),
        0 4px 16px rgba(239, 68, 68, 0.15);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong .mmlms-option-letter {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.45);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct::after {
    background: #34d399;
    box-shadow: 0 2px 12px rgba(52, 211, 153, 0.5);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong::after {
    background: #f87171;
    box-shadow: 0 2px 12px rgba(248, 113, 113, 0.45);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .mmlms-practice-modern .mmlms-option.correct,
    .mmlms-practice-modern .mmlms-option.wrong {
        transform: translateX(2px);
    }
    
    .mmlms-practice-modern .mmlms-option.correct::after,
    .mmlms-practice-modern .mmlms-option.wrong::after {
        right: 12px;
        width: 20px;
        height: 20px;
    }
    
    .mmlms-practice-modern .mmlms-option.correct::before {
        right: 16px;
        width: 5px;
        height: 10px;
        border-width: 0 2px 2px 0;
    }
    
    .mmlms-practice-modern .mmlms-option.wrong::before {
        right: 15px;
        font-size: 14px;
    }
}

/* ==========================================================================
   FIX OPTION BOX OVERLAPPING
   ========================================================================== */

/* Ensure options have proper spacing and don't overlap */
.mmlms-practice-modern .mmlms-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: var(--mmlms-space-lg) 0;
    width: 100%;
}

.mmlms-practice-modern .mmlms-error {
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #ef4444;
    border-radius: 8px;
    color: #dc2626;
    font-weight: 500;
    text-align: center;
}

.mmlms-practice-modern .mmlms-option {
    position: relative;
    padding: var(--mmlms-space-md);
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius, 12px);
    box-shadow: var(--mmlms-shadow-sm);
    cursor: pointer;
    transition: var(--mmlms-transition, 200ms ease);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure option text doesn't overflow */
.mmlms-practice-modern .mmlms-option-text {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mmlms-text, #1f2937);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    min-width: 0;
}

/* Fix for math content in options */
.mmlms-practice-modern .mmlms-option-text .math-content,
.mmlms-practice-modern .mmlms-option-text mjx-container,
.mmlms-practice-modern .mmlms-option-text .mjx-chtml {
    display: inline;
    white-space: normal;
}



/* Single scroll layout - content flows naturally with page scroll */
.mmlms-practice-modern .mmlms-main-layout {
    overflow-y: visible;
    max-height: none;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-option {
        padding: 12px;
        gap: 10px;
        min-height: 48px;
    }
    
    .mmlms-practice-modern .mmlms-option-letter {
        min-width: 28px;
        height: 28px;
        font-size: 14px;
    }
    
    .mmlms-practice-modern .mmlms-option-text {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* ==========================================================================
   BOOKMARK DROPDOWN STYLES
   ========================================================================== */

.mmlms-practice-modern .mmlms-bookmark-dropdown {
    position: relative;
    display: inline-block;
}

.mmlms-practice-modern .mmlms-bookmark-dropdown.active .mmlms-bookmark-menu {
    display: block !important;
}

/* Checkbox-style bookmark button */
.mmlms-practice-modern .mmlms-bookmark-checkbox-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid var(--mmlms-border, #dbe4f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mmlms-practice-modern .mmlms-bookmark-checkbox-btn:hover {
    border-color: var(--mmlms-primary, #2563eb);
    background: var(--mmlms-bg-light, #f8fafc);
}

.mmlms-practice-modern .mmlms-bookmark-checkbox-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.mmlms-practice-modern .mmlms-bookmark-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.mmlms-practice-modern .mmlms-bookmark-checkbox .dashicons-bookmark {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--mmlms-text-muted, #9ca3af);
    transition: all 0.2s ease;
}

.mmlms-practice-modern .mmlms-bookmark-checkbox .dashicons-bookmark::before {
    transition: all 0.2s ease;
}

/* Bookmark saved/active state */
.mmlms-practice-modern .mmlms-bookmark-dropdown.has-bookmark .mmlms-bookmark-checkbox-btn {
    border-color: var(--mmlms-primary, #2563eb);
    background: rgba(37, 99, 235, 0.1);
}

.mmlms-practice-modern .mmlms-bookmark-dropdown.has-bookmark .mmlms-bookmark-checkbox .dashicons-bookmark,
.mmlms-practice-modern .mmlms-bookmark-checkbox .dashicons-bookmark.bookmarked {
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-bookmark-dropdown.has-bookmark .mmlms-bookmark-checkbox .dashicons-bookmark::before,
.mmlms-practice-modern .mmlms-bookmark-checkbox .dashicons-bookmark.bookmarked::before {
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-modern .mmlms-bookmark-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 220px;
    background: var(--mmlms-card-bg, #fff);
    border: 1px solid var(--mmlms-border, #dbe4f0);
    border-radius: var(--mmlms-radius, 12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
}

.mmlms-practice-modern .mmlms-bookmark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-bottom: 1px solid var(--mmlms-border, #dbe4f0);
    font-size: 13px;
}

.mmlms-practice-modern .mmlms-bookmark-new {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mmlms-practice-modern .mmlms-bookmark-new:hover {
    background: var(--mmlms-primary-dark, #1d4ed8);
}

.mmlms-practice-modern .mmlms-bookmark-new .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
}

.mmlms-practice-modern .mmlms-bookmark-lists {
    max-height: 200px;
    overflow-y: auto;
    padding: 8px 0;
}

.mmlms-practice-modern .mmlms-bookmark-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mmlms-practice-modern .mmlms-bookmark-item:hover {
    background: var(--mmlms-bg-light, #f8fafc);
}

.mmlms-practice-modern .mmlms-bookmark-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.mmlms-practice-modern .mmlms-bookmark-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    margin: 0;
}

.mmlms-practice-modern .mmlms-bookmark-item .bookmark-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--mmlms-text-muted, #64748b);
    background: var(--mmlms-bg-light, #f1f5f9);
    padding: 3px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
}

.mmlms-practice-modern .mmlms-bookmark-item.loading,
.mmlms-practice-modern .mmlms-bookmark-item.empty {
    justify-content: center;
    color: var(--mmlms-text-muted, #6b7280);
    font-size: 13px;
    padding: 16px;
    cursor: default;
}

.mmlms-practice-modern .mmlms-bookmark-item.loading:hover,
.mmlms-practice-modern .mmlms-bookmark-item.empty:hover {
    background: transparent;
}
}

/* Bookmark saved state - legacy support for old bookmark button style */
.mmlms-practice-modern .mmlms-bookmark-dropdown.has-bookmark .dashicons-bookmark::before {
    color: var(--mmlms-primary, #2563eb);
}

/* Bookmark checkbox active/popup open state */
.mmlms-practice-modern .mmlms-bookmark-dropdown.active .mmlms-bookmark-checkbox-btn {
    border-color: var(--mmlms-primary, #2563eb);
    background: rgba(37, 99, 235, 0.15);
}

/* New Bookmark List Modal */
.mmlms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647; /* Maximum z-index to show above everything including fullscreen */
    padding: 20px;
}

/* Ensure modal shows properly in fullscreen mode */
#mmlms-practice-app.is-fullscreen ~ .mmlms-modal-overlay,
#mmlms-practice-app.is-fullscreen .mmlms-modal-overlay {
    z-index: 2147483647;
}

/* Also ensure the modal overlay is not constrained by parent */
body .mmlms-modal-overlay {
    position: fixed;
    z-index: 2147483647;
}

.mmlms-modal {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
}

.mmlms-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--mmlms-border, #e5e7eb);
}

.mmlms-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.mmlms-modal-body {
    padding: 24px;
}

.mmlms-modal-body .form-group {
    margin-bottom: 16px;
}

.mmlms-modal-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
}

.mmlms-modal-body input[type="text"],
.mmlms-modal-body textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--mmlms-border, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}

.mmlms-modal-body textarea {
    resize: vertical;
    min-height: 80px;
}

.mmlms-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: var(--mmlms-bg-light, #f9fafb);
    border-top: 1px solid var(--mmlms-border, #e5e7eb);
}

.mmlms-modal-footer .mmlms-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mmlms-modal-footer .mmlms-btn-secondary {
    background: var(--mmlms-bg-light, #f3f4f6);
    color: var(--mmlms-text, #374151);
    border: 1px solid var(--mmlms-border, #d1d5db);
}

.mmlms-modal-footer .mmlms-btn-primary {
    background: var(--mmlms-primary, #2563eb);
    color: #fff;
    border: none;
}

.mmlms-modal-footer .mmlms-btn-primary:hover {
    background: var(--mmlms-primary-dark, #1d4ed8);
}

/* Dark mode support */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-checkbox-btn {
    background: var(--mmlms-card-bg, #1e293b);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-checkbox-btn:hover {
    border-color: var(--mmlms-primary, #3b82f6);
    background: var(--mmlms-bg-light, #0f172a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-checkbox .dashicons-bookmark {
    color: var(--mmlms-text-muted, #6b7280);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-dropdown.has-bookmark .mmlms-bookmark-checkbox-btn {
    border-color: var(--mmlms-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.2);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-dropdown.has-bookmark .mmlms-bookmark-checkbox .dashicons-bookmark,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-checkbox .dashicons-bookmark.bookmarked {
    color: var(--mmlms-primary, #3b82f6);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-menu {
    background: var(--mmlms-card-bg, #1e293b);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-header {
    background: var(--mmlms-bg-light, #0f172a);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-bookmark-item:hover {
    background: var(--mmlms-bg-light, #334155);
}

[data-mmlms-theme="dark"] .mmlms-modal {
    background: var(--mmlms-card-bg, #1e293b);
}

[data-mmlms-theme="dark"] .mmlms-modal-footer {
    background: var(--mmlms-bg-light, #0f172a);
}


/* ==========================================================================
   ENHANCED ANALYSIS VIEW STYLES
   ========================================================================== */

/* Time Analysis Detailed */
.mmlms-practice-modern .mmlms-time-stats-detailed {
    margin-bottom: 24px;
}

.mmlms-practice-modern .mmlms-time-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}

.mmlms-practice-modern .mmlms-time-row:last-child {
    margin-bottom: 0;
}

.mmlms-practice-modern .mmlms-time-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 10px;
}

.mmlms-practice-modern .mmlms-time-item.highlight {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.mmlms-practice-modern .mmlms-time-item .dashicons {
    color: var(--mmlms-primary, #2563eb);
    margin-right: 8px;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.mmlms-practice-modern .mmlms-time-value.saved {
    color: var(--mmlms-success, #10b981);
    font-weight: 700;
}

/* Speed Analysis */
.mmlms-practice-modern .mmlms-speed-analysis {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--mmlms-border, #e5e7eb);
}

.mmlms-practice-modern .mmlms-speed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.mmlms-practice-modern .mmlms-speed-item {
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    background: var(--mmlms-bg-light, #f8fafc);
}

.mmlms-practice-modern .mmlms-speed-item.too-fast {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.mmlms-practice-modern .mmlms-speed-item.ideal {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.mmlms-practice-modern .mmlms-speed-item.too-slow {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.mmlms-practice-modern .mmlms-speed-count {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
    margin-bottom: 4px;
}

.mmlms-practice-modern .mmlms-speed-label {
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
}

/* Extreme Times (Fastest/Slowest) */
.mmlms-practice-modern .mmlms-extreme-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mmlms-border, #e5e7eb);
}

.mmlms-practice-modern .mmlms-extreme-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--mmlms-bg-light, #f8fafc);
}

.mmlms-practice-modern .mmlms-extreme-item.fastest {
    background: rgba(16, 185, 129, 0.08);
}

.mmlms-practice-modern .mmlms-extreme-item.slowest {
    background: rgba(245, 158, 11, 0.08);
}

.mmlms-practice-modern .mmlms-extreme-item .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.mmlms-practice-modern .mmlms-extreme-item.fastest .dashicons {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-extreme-item.slowest .dashicons {
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-extreme-content {
    display: flex;
    flex-direction: column;
}

.mmlms-practice-modern .mmlms-extreme-label {
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
}

.mmlms-practice-modern .mmlms-extreme-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
}

/* Question Type Analysis */
.mmlms-practice-modern .mmlms-question-types {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mmlms-practice-modern .mmlms-type-item {
    padding: 16px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 12px;
}

.mmlms-practice-modern .mmlms-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mmlms-practice-modern .mmlms-type-name {
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-modern .mmlms-type-accuracy {
    font-weight: 700;
    font-size: 18px;
}

.mmlms-practice-modern .mmlms-type-accuracy.good {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-type-accuracy.average {
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-type-accuracy.poor {
    color: var(--mmlms-danger, #ef4444);
}

.mmlms-practice-modern .mmlms-type-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
    margin-bottom: 12px;
}

.mmlms-practice-modern .mmlms-type-bar {
    height: 6px;
    background: var(--mmlms-border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}

.mmlms-practice-modern .mmlms-type-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb), var(--mmlms-primary-light, #3b82f6));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Enhanced Difficulty Cards */
.mmlms-practice-modern .mmlms-difficulty-bar-container {
    margin-top: 12px;
}

.mmlms-practice-modern .mmlms-difficulty-bar {
    height: 8px;
    background: var(--mmlms-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.mmlms-practice-modern .mmlms-difficulty-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.mmlms-practice-modern .difficulty-easy .mmlms-difficulty-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.mmlms-practice-modern .difficulty-medium .mmlms-difficulty-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.mmlms-practice-modern .difficulty-hard .mmlms-difficulty-fill {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Strong Areas Card */
.mmlms-practice-modern .mmlms-analysis-card.strong-areas {
    border-left: 4px solid var(--mmlms-success, #10b981);
    background: linear-gradient(to right, rgba(16, 185, 129, 0.03), var(--mmlms-card-bg, #fff));
}

.mmlms-practice-modern .mmlms-strength-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmlms-practice-modern .mmlms-strength-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 10px;
}

.mmlms-practice-modern .mmlms-strength-item .dashicons {
    color: var(--mmlms-success, #10b981);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mmlms-practice-modern .mmlms-strength-content {
    display: flex;
    flex-direction: column;
}

.mmlms-practice-modern .mmlms-strength-name {
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-modern .mmlms-strength-accuracy {
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
}

.mmlms-practice-modern .mmlms-strength-type {
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
    font-weight: 500;
}

/* Improvement Bar */
.mmlms-practice-modern .mmlms-improvement-bar {
    height: 6px;
    background: var(--mmlms-border, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.mmlms-practice-modern .mmlms-improvement-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Score/Breakdown Score Colors */
.mmlms-practice-modern .mmlms-breakdown-score.good,
.mmlms-practice-modern .mmlms-topic-score.good {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-modern .mmlms-breakdown-score.average,
.mmlms-practice-modern .mmlms-topic-score.average {
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-modern .mmlms-breakdown-score.poor,
.mmlms-practice-modern .mmlms-topic-score.poor {
    color: var(--mmlms-danger, #ef4444);
}

/* Responsive */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-time-row,
    .mmlms-practice-modern .mmlms-extreme-times {
        grid-template-columns: 1fr;
    }
    
    .mmlms-practice-modern .mmlms-speed-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode Support */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-analysis-card.strong-areas {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.06), var(--mmlms-card-bg, #232b3a));
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-strength-item {
    background: rgba(16, 185, 129, 0.12);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-area-type-badge {
    background: var(--mmlms-bg-light, #1e293b);
    color: var(--mmlms-text-muted, #94a3b8);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-chapter-link {
    color: var(--mmlms-primary-light, #60a5fa);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-chapter-link:hover {
    color: var(--mmlms-primary, #3b82f6);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-speed-item {
    background: var(--mmlms-bg-light, #0f172a);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-type-item,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-time-item,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-extreme-item {
    background: var(--mmlms-bg-light, #0f172a);
}

/* ==========================================================================
   Analysis View - Enhanced Sections CSS
   Matches render_session_results() HTML structure
   ========================================================================== */

/* Time Analysis Stats Grid */
/* Analysis View Styles - For mmlms-practice-student-v2 container */
.mmlms-practice-student-v2 .mmlms-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.mmlms-practice-student-v2 .mmlms-stat-item {
    text-align: center;
    padding: 20px 16px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mmlms-practice-student-v2 .mmlms-stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mmlms-practice-student-v2 .mmlms-stat-number {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--mmlms-primary, #2563eb);
    font-family: var(--mmlms-font-mono, 'JetBrains Mono', monospace);
    margin-bottom: 6px;
}

.mmlms-practice-student-v2 .mmlms-stat-item .mmlms-stat-label {
    font-size: 13px;
    color: var(--mmlms-text-secondary, #4b5563);
    font-weight: 500;
}

/* Speed Distribution */
.mmlms-practice-student-v2 .mmlms-speed-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: var(--mmlms-text, #1f2937);
    margin-bottom: 4px;
}

.mmlms-practice-student-v2 .mmlms-speed-item .mmlms-speed-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mmlms-text, #374151);
    margin-bottom: 2px;
}

.mmlms-practice-student-v2 .mmlms-speed-desc {
    display: block;
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
}

/* Extreme Times - Updated to match HTML */
.mmlms-practice-student-v2 .mmlms-extreme-time {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--mmlms-bg-light, #f8fafc);
}

.mmlms-practice-student-v2 .mmlms-extreme-time.fastest {
    background: rgba(16, 185, 129, 0.08);
}

.mmlms-practice-student-v2 .mmlms-extreme-time.slowest {
    background: rgba(245, 158, 11, 0.08);
}

.mmlms-practice-student-v2 .mmlms-extreme-time .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.mmlms-practice-student-v2 .mmlms-extreme-time.fastest .dashicons {
    color: var(--mmlms-success, #10b981);
}

.mmlms-practice-student-v2 .mmlms-extreme-time.slowest .dashicons {
    color: var(--mmlms-warning, #f59e0b);
}

.mmlms-practice-student-v2 .mmlms-extreme-time div {
    display: flex;
    flex-direction: column;
}

.mmlms-practice-student-v2 .mmlms-extreme-time strong {
    font-size: 13px;
    color: var(--mmlms-text-secondary, #4b5563);
    font-weight: 500;
}

.mmlms-practice-student-v2 .mmlms-extreme-time span:last-child {
    font-size: 20px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
    font-family: var(--mmlms-font-mono, 'JetBrains Mono', monospace);
}

/* Type Breakdown */
.mmlms-practice-student-v2 .mmlms-type-breakdown {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.mmlms-practice-student-v2 .mmlms-type-stat {
    font-size: 14px;
    font-weight: 600;
    color: var(--mmlms-text-secondary, #4b5563);
}

/* Strengths List - Updated */
.mmlms-practice-student-v2 .mmlms-strength-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mmlms-practice-student-v2 .mmlms-strength-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 10px;
}

.mmlms-practice-student-v2 .mmlms-strength-list li .dashicons {
    color: var(--mmlms-success, #10b981);
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mmlms-practice-student-v2 .mmlms-strength-list li div {
    display: flex;
    flex-direction: column;
}

.mmlms-practice-student-v2 .mmlms-strength-list li strong {
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
    font-size: 14px;
}

.mmlms-practice-student-v2 .mmlms-strength-list li span {
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
}

/* Improvement Areas - Updated */
.mmlms-practice-student-v2 .mmlms-improvement-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.mmlms-practice-student-v2 .mmlms-improvement-item {
    padding: 16px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 10px;
}

.mmlms-practice-student-v2 .mmlms-improvement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mmlms-practice-student-v2 .mmlms-improvement-topic {
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
    font-size: 14px;
}

.mmlms-practice-student-v2 .mmlms-improvement-accuracy {
    font-weight: 700;
    font-size: 16px;
}

.mmlms-practice-student-v2 .mmlms-improvement-desc {
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
}

/* Analysis Card Title with dashicons */
.mmlms-practice-student-v2 .mmlms-analysis-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--mmlms-text, #111827);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mmlms-practice-student-v2 .mmlms-analysis-title .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
    color: var(--mmlms-primary, #2563eb);
}

/* Responsive */
@media (max-width: 768px) {
    .mmlms-practice-student-v2 .mmlms-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .mmlms-practice-student-v2 .mmlms-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .mmlms-practice-student-v2 .mmlms-speed-grid {
        grid-template-columns: 1fr;
    }
    
    .mmlms-practice-student-v2 .mmlms-extreme-times {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-stat-item {
    background: var(--mmlms-gray-100, #1e293b);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-stat-number {
    color: var(--mmlms-primary-light, #60a5fa);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-speed-value {
    color: var(--mmlms-gray-100, #f1f5f9);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-extreme-time {
    background: var(--mmlms-gray-100, #1e293b);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-extreme-time span:last-child {
    color: var(--mmlms-gray-100, #f1f5f9);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-improvement-item {
    background: var(--mmlms-gray-100, #1e293b);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-strength-list li {
    background: rgba(16, 185, 129, 0.12);
}

/* ==========================================================================
   Difficulty Grid - Additional Styles
   ========================================================================== */

.mmlms-practice-student-v2 .mmlms-difficulty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.mmlms-practice-student-v2 .mmlms-difficulty-item {
    text-align: center;
    padding: 20px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 12px;
    transition: transform 0.2s ease;
}

.mmlms-practice-student-v2 .mmlms-difficulty-item:hover {
    transform: translateY(-2px);
}

.mmlms-practice-student-v2 .mmlms-difficulty-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--mmlms-text-secondary, #4b5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.mmlms-practice-student-v2 .mmlms-difficulty-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    color: var(--mmlms-text, #1f2937);
    margin-bottom: 4px;
}

.mmlms-practice-student-v2 .mmlms-difficulty-count {
    display: block;
    font-size: 12px;
    color: var(--mmlms-text-muted, #6b7280);
}

/* Responsive for difficulty grid */
@media (max-width: 600px) {
    .mmlms-practice-student-v2 .mmlms-difficulty-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode for difficulty */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-difficulty-item {
    background: var(--mmlms-gray-100, #1e293b);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-difficulty-value {
    color: var(--mmlms-gray-100, #f1f5f9);
}

/* ==========================================================================
   Analysis Card Styles for mmlms-practice-student-v2
   ========================================================================== */

.mmlms-practice-student-v2 .mmlms-analysis-card {
    background: var(--mmlms-card-bg, #fff);
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 32px;
    border: 1px solid var(--mmlms-border-light, #e9eef6);
    box-shadow: var(--mmlms-shadow);
    margin-bottom: 24px;
    text-align: left;
}

.mmlms-practice-student-v2 .mmlms-analysis-card.strong-areas {
    border-left: 4px solid var(--mmlms-success, #10b981);
    background: linear-gradient(to right, rgba(16, 185, 129, 0.03), var(--mmlms-card-bg, #fff));
}

.mmlms-practice-student-v2 .mmlms-analysis-card.improvement-areas {
    border-left: 4px solid var(--mmlms-warning, #f59e0b);
    background: linear-gradient(to right, rgba(245, 158, 11, 0.03), var(--mmlms-card-bg, #fff));
}

/* Speed Grid */
.mmlms-practice-student-v2 .mmlms-speed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.mmlms-practice-student-v2 .mmlms-speed-item {
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    background: var(--mmlms-bg-light, #f8fafc);
}

.mmlms-practice-student-v2 .mmlms-speed-item.too-fast {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.mmlms-practice-student-v2 .mmlms-speed-item.ideal {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.mmlms-practice-student-v2 .mmlms-speed-item.too-slow {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Extreme Times Grid */
.mmlms-practice-student-v2 .mmlms-extreme-times {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mmlms-border, #e5e7eb);
}

/* Type Bar */
.mmlms-practice-student-v2 .mmlms-type-bar {
    height: 8px;
    background: var(--mmlms-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.mmlms-practice-student-v2 .mmlms-type-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Improvement Bar */
.mmlms-practice-student-v2 .mmlms-improvement-bar {
    height: 8px;
    background: var(--mmlms-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.mmlms-practice-student-v2 .mmlms-improvement-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Type Item */
.mmlms-practice-student-v2 .mmlms-type-item {
    padding: 16px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 12px;
}

.mmlms-practice-student-v2 .mmlms-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mmlms-practice-student-v2 .mmlms-type-name {
    font-weight: 600;
    color: var(--mmlms-text, #1f2937);
}

/* Responsive */
@media (max-width: 768px) {
    .mmlms-practice-student-v2 .mmlms-speed-grid {
        grid-template-columns: 1fr;
    }
    
    .mmlms-practice-student-v2 .mmlms-extreme-times {
        grid-template-columns: 1fr;
    }
}

/* Dark Mode */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-analysis-card {
    background: var(--mmlms-card-bg, #232b3a);
    border-color: var(--mmlms-border-light, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-analysis-card.strong-areas {
    background: linear-gradient(to right, rgba(16, 185, 129, 0.06), var(--mmlms-card-bg, #232b3a));
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-speed-item {
    background: var(--mmlms-bg-light, #0f172a);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-type-item {
    background: var(--mmlms-bg-light, #0f172a);
}

/* ==========================================================================
   Improved Question Type Breakdown Styles
   ========================================================================== */

.mmlms-practice-student-v2 .mmlms-type-breakdown {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.mmlms-practice-student-v2 .mmlms-type-item {
    padding: 20px;
    background: var(--mmlms-bg-light, #f8fafc);
    border-radius: 12px;
    border-left: 4px solid var(--mmlms-border, #e5e7eb);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mmlms-practice-student-v2 .mmlms-type-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mmlms-practice-student-v2 .mmlms-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mmlms-practice-student-v2 .mmlms-type-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-student-v2 .mmlms-type-name .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.mmlms-practice-student-v2 .mmlms-type-stat {
    font-size: 20px;
    font-weight: 700;
    color: var(--mmlms-text, #1f2937);
}

.mmlms-practice-student-v2 .mmlms-type-bar {
    height: 8px;
    background: var(--mmlms-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.mmlms-practice-student-v2 .mmlms-type-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.mmlms-practice-student-v2 .mmlms-type-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mmlms-text-muted, #6b7280);
}

.mmlms-practice-student-v2 .mmlms-type-meta span:nth-child(2) {
    opacity: 0.5;
}

/* Dark Mode */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-type-item {
    background: var(--mmlms-gray-100, #1e293b);
}

/* ==========================================================================
   Analysis View - Layout Improvements
   ========================================================================== */

/* Results Container - ensure proper max-width for analysis */
.mmlms-practice-student-v2.ps-results-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Two column layout for larger screens */
@media (min-width: 992px) {
    .mmlms-practice-student-v2 .mmlms-analysis-two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    
    .mmlms-practice-student-v2 .mmlms-analysis-two-col .mmlms-analysis-card {
        margin: 0 !important;
    }
}

/* Section Divider */
.mmlms-practice-student-v2 .mmlms-section-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 32px 0;
    color: var(--mmlms-text-muted, #6b7280);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mmlms-practice-student-v2 .mmlms-section-divider::before,
.mmlms-practice-student-v2 .mmlms-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mmlms-border, #e5e7eb);
}

/* Performance Message Enhancement */
.mmlms-practice-student-v2 .ps-performance-message {
    padding: 20px 24px;
    border-radius: 12px;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

.mmlms-practice-student-v2 .ps-performance-message strong {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
}

.mmlms-practice-student-v2 .ps-performance-message.excellent {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #10b981;
    color: #065f46;
}

.mmlms-practice-student-v2 .ps-performance-message.good {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #3b82f6;
    color: #1e40af;
}

.mmlms-practice-student-v2 .ps-performance-message.average {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #f59e0b;
    color: #92400e;
}

.mmlms-practice-student-v2 .ps-performance-message.needs-improvement {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #ef4444;
    color: #991b1b;
}

/* Dark Mode for Performance Message */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.excellent {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.1) 100%);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.good {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.average {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-performance-message.needs-improvement {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

/* ==========================================================================
   CORRECT ANSWER HIGHLIGHTING FIX for mmlms-practice-student-v2
   ========================================================================== */

/* Correct option highlighting */
.mmlms-practice-student-v2 .mmlms-option.correct,
.mmlms-practice-student-v2 .ps-option.correct {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-color: #10b981 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), 0 4px 12px rgba(16, 185, 129, 0.15) !important;
    transform: translateX(4px);
    position: relative;
}

/* Wrong option highlighting */
.mmlms-practice-student-v2 .mmlms-option.wrong,
.mmlms-practice-student-v2 .ps-option.wrong {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border-color: #ef4444 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), 0 4px 12px rgba(239, 68, 68, 0.15) !important;
    position: relative;
}

/* Correct option letter */
.mmlms-practice-student-v2 .mmlms-option.correct .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option.correct .ps-option-letter {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border-color: #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

/* Wrong option letter */
.mmlms-practice-student-v2 .mmlms-option.wrong .mmlms-option-letter,
.mmlms-practice-student-v2 .ps-option.wrong .ps-option-letter {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff !important;
    border-color: #ef4444 !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35);
}

/* Checkmark icon for correct option */
.mmlms-practice-student-v2 .mmlms-option.correct::after,
.mmlms-practice-student-v2 .ps-option.correct::after {
    content: '\f147';
    font-family: 'Dashicons';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #10b981;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* X icon for wrong option */
.mmlms-practice-student-v2 .mmlms-option.wrong::after,
.mmlms-practice-student-v2 .ps-option.wrong::after {
    content: '\f158';
    font-family: 'Dashicons';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #ef4444;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Dark Mode */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.correct,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option.correct {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%) !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), 0 4px 16px rgba(16, 185, 129, 0.2) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.wrong,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option.wrong {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.25) 100%) !important;
    border-color: #f87171 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1), 0 4px 16px rgba(239, 68, 68, 0.2) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.correct::after,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option.correct::after {
    background: #34d399;
    color: #fff;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.wrong::after,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-option.wrong::after {
    background: #f87171;
    color: #fff;
}

/* ==========================================================================
   Question Type Badge in Header
   ========================================================================== */

.mmlms-practice-modern .mmlms-question-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mmlms-primary-subtle, #dbeafe);
    color: var(--mmlms-primary, #2563eb);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    border: 1px solid var(--mmlms-primary-light, #93c5fd);
    white-space: nowrap;
    flex-shrink: 0;
}

.mmlms-practice-modern .mmlms-question-type::before {
    content: '\f163';
    font-family: 'Dashicons';
    font-size: 14px;
}

/* Type-specific colors */
.mmlms-practice-modern .mmlms-question-type.single_mcq,
.mmlms-practice-modern .mmlms-question-type.single_select {
    background: #dbeafe;
    color: #2563eb;
    border-color: #93c5fd;
}

.mmlms-practice-modern .mmlms-question-type.multiple_mcq,
.mmlms-practice-modern .mmlms-question-type.multiple_select {
    background: #ede9fe;
    color: #7c3aed;
    border-color: #c4b5fd;
}

.mmlms-practice-modern .mmlms-question-type.numerical {
    background: #fef3c7;
    color: #d97706;
    border-color: #fcd34d;
}

.mmlms-practice-modern .mmlms-question-type.paragraph {
    background: #fce7f3;
    color: #db2777;
    border-color: #f9a8d4;
}

.mmlms-practice-modern .mmlms-question-type.matrix,
.mmlms-practice-modern .mmlms-question-type.matrix_match {
    background: #ffedd5;
    color: #ea580c;
    border-color: #fdba74;
}

.mmlms-practice-modern .mmlms-question-type.subjective {
    background: #d1fae5;
    color: #059669;
    border-color: #6ee7b7;
}

/* Dark Mode */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type {
    background: rgba(37, 99, 235, 0.2);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.3);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.single_mcq,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.single_select {
    background: rgba(37, 99, 235, 0.2);
    color: #93c5fd;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.multiple_mcq,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.multiple_select {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.numerical {
    background: rgba(217, 119, 6, 0.2);
    color: #fcd34d;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.paragraph {
    background: rgba(219, 39, 119, 0.2);
    color: #f9a8d4;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.matrix,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.matrix_match {
    background: rgba(234, 88, 12, 0.2);
    color: #fdba74;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-question-type.subjective {
    background: rgba(5, 150, 105, 0.2);
    color: #6ee7b7;
}

/* ==========================================================================
   Improved Answer Feedback Box for Numerical/Subjective Questions
   ========================================================================== */

.mmlms-practice-modern .mmlms-answer-feedback-inline {
    margin: 20px 0 8px;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    animation: mmlms-feedbackSlideIn 0.3s ease;
    position: relative;
    overflow: visible;
    text-align: center;
}

.mmlms-practice-modern .mmlms-answer-feedback-inline::before {
    display: none;
}

/* Correct feedback */
.mmlms-practice-modern .mmlms-answer-feedback-inline.correct {
    background: transparent;
}

.mmlms-practice-modern .mmlms-answer-feedback-inline.correct::before {
    display: none;
}

/* Incorrect feedback */
.mmlms-practice-modern .mmlms-answer-feedback-inline.incorrect {
    background: transparent;
}

.mmlms-practice-modern .mmlms-answer-feedback-inline.incorrect::before {
    display: none;
}

/* Status header */
.mmlms-practice-modern .mmlms-feedback-status {
    display: block;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 6px;
}

.mmlms-practice-modern .mmlms-feedback-status.correct {
    color: #059669;
}

.mmlms-practice-modern .mmlms-feedback-status.incorrect {
    color: #dc2626;
}

.mmlms-practice-modern .mmlms-feedback-status .dashicons {
    display: none;
}

.mmlms-practice-modern .mmlms-feedback-status.correct .dashicons {
    display: none;
}

.mmlms-practice-modern .mmlms-feedback-status.incorrect .dashicons {
    display: none;
}

/* Answer rows */
.mmlms-practice-modern .mmlms-feedback-user-answer,
.mmlms-practice-modern .mmlms-feedback-correct-answer,
.mmlms-practice-modern .mmlms-feedback-hint {
    display: block;
    font-size: 15px;
    padding: 0;
    border-bottom: 0;
    line-height: 1.6;
}

.mmlms-practice-modern .mmlms-feedback-user-answer:last-child,
.mmlms-practice-modern .mmlms-feedback-correct-answer:last-child,
.mmlms-practice-modern .mmlms-feedback-hint:last-child {
    border-bottom: 0;
}

.mmlms-practice-modern .mmlms-feedback-user-answer strong,
.mmlms-practice-modern .mmlms-feedback-correct-answer strong {
    font-weight: 500;
    color: #6b7280;
}

.mmlms-practice-modern .mmlms-feedback-user-answer {
    color: var(--mmlms-text-secondary, #4b5563);
}

.mmlms-practice-modern .mmlms-feedback-correct-answer {
    color: #6b7280;
    font-weight: 400;
}

.mmlms-practice-modern .mmlms-feedback-hint {
    color: #9ca3af;
}

/* Animation */
@keyframes mmlms-feedbackSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark Mode */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-answer-feedback-inline.correct {
    background: transparent;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-answer-feedback-inline.incorrect {
    background: transparent;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-status.correct {
    color: #6ee7b7;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-status.incorrect {
    color: #fca5a5;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-user-answer strong,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-correct-answer strong {
    color: #d1d5db;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-correct-answer {
    color: #d1d5db;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-hint {
    color: #94a3b8;
}

/* Feedback row icons */
.mmlms-practice-modern .mmlms-feedback-user-answer .dashicons,
.mmlms-practice-modern .mmlms-feedback-correct-answer .dashicons {
    display: none;
}

.mmlms-practice-modern .mmlms-feedback-correct-answer .dashicons {
    display: none;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-feedback-correct-answer .dashicons {
    display: none;
}

/* =====================================================================
   NEW PRACTICE MODE STYLES - Section Numbering & Practice Mode Cards
   ===================================================================== */

/* Section Title Row with Numbered Circle (like the image) */
.mmlms-practice-student-v2 .ps-section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    max-width: 100%;
}

.mmlms-practice-student-v2 .ps-section-number-circle {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.mmlms-practice-student-v2 .ps-section-title-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
    margin: 0;
}

/* Mode grids - full width */
.mmlms-practice-student-v2 .ps-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 100%;
}

/* Two-column mode grid for Practice Modes */
.mmlms-practice-student-v2 .ps-mode-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    max-width: 100%;
}

/* Mode cards - compact and professional */
.mmlms-practice-student-v2 .ps-mode-card {
    position: relative;
    background: var(--mmlms-card-bg, #fff);
    border: 2px solid transparent;
    border-radius: var(--mmlms-radius-lg, 16px);
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.mmlms-practice-student-v2 .ps-mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mmlms-practice-student-v2 .ps-mode-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
    border-color: var(--mmlms-primary-light, #3b82f6);
}

.mmlms-practice-student-v2 .ps-mode-card:hover::before {
    opacity: 1;
}

.mmlms-practice-student-v2 .ps-mode-card.active {
    border-color: var(--mmlms-primary, #2563eb);
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.mmlms-practice-student-v2 .ps-mode-card.active::before {
    opacity: 1;
}

/* Mode icon - smaller and compact */
.mmlms-practice-student-v2 .ps-mode-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
    border-radius: var(--mmlms-radius, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--mmlms-primary, #2563eb);
    transition: all 0.3s ease;
}

.mmlms-practice-student-v2 .ps-mode-card:hover .ps-mode-icon {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
    transform: scale(1.05);
}

.mmlms-practice-student-v2 .ps-mode-card.active .ps-mode-icon {
    background: linear-gradient(135deg, var(--mmlms-primary, #2563eb) 0%, var(--mmlms-primary-light, #3b82f6) 100%);
    color: #fff;
}

/* Mode card text - compact */
.mmlms-practice-student-v2 .ps-mode-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mmlms-text, #1e293b);
}

.mmlms-practice-student-v2 .ps-mode-card p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--mmlms-text-muted, #64748b);
    line-height: 1.5;
}

/* Mode features - compact */
.mmlms-practice-student-v2 .ps-mode-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.mmlms-practice-student-v2 .ps-mode-feature {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(37, 99, 235, 0.06);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--mmlms-primary, #2563eb);
}

.mmlms-practice-student-v2 .ps-mode-feature::before {
    content: '\2713';
    font-weight: 700;
    font-size: 10px;
}

/* Practice Mode Card specific styles */
.mmlms-practice-student-v2 .ps-practice-mode-card {
    border: 2px solid var(--mmlms-border, #e2e8f0);
}

.mmlms-practice-student-v2 .ps-practice-mode-card.active {
    border-color: var(--mmlms-primary, #2563eb);
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14), 0 8px 24px rgba(37, 99, 235, 0.12);
}

/* First section title has less margin-top */
.mmlms-practice-student-v2 .ps-mode-grid.ps-animate-stagger + .ps-section-title-row,
.mmlms-practice-student-v2 .mmlms-header-card + .ps-section-title-row {
    margin-top: 16px;
}

/* Form container - full width */
.mmlms-practice-student-v2 .ps-form-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

/* Form sections - full width */
.mmlms-practice-student-v2 .ps-form-section {
    width: 100%;
    max-width: 100%;
}

/* Form grid - better spacing */
.mmlms-practice-student-v2 .ps-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

/* Header card - more compact */
.mmlms-practice-student-v2 .mmlms-header-card {
    margin-bottom: 20px;
}

.mmlms-practice-student-v2 .mmlms-header-content {
    padding: 28px 32px;
}

.mmlms-practice-student-v2 .mmlms-header-title {
    font-size: 24px;
}

.mmlms-practice-student-v2 .mmlms-header-subtitle {
    font-size: 14px;
}

/* Dark Mode Support */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-section-number-circle {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-section-title-text {
    color: var(--mmlms-gray-100, #f1f5f9);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-mode-card {
    background: var(--mmlms-gray-100);
    border-color: var(--mmlms-gray-200);
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-mode-card.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: #3b82f6;
}

[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .ps-practice-mode-card.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-color: #3b82f6;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .mmlms-practice-student-v2 .ps-mode-grid,
    .mmlms-practice-student-v2 .ps-mode-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .mmlms-practice-student-v2 .ps-section-title-row {
        margin: 20px 0 12px;
    }
    
    .mmlms-practice-student-v2 .ps-section-number-circle {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .mmlms-practice-student-v2 .ps-section-title-text {
        font-size: 15px;
    }
    
    .mmlms-practice-student-v2 .ps-mode-card {
        padding: 16px 14px;
    }
    
    .mmlms-practice-student-v2 .ps-mode-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .mmlms-practice-student-v2 .mmlms-header-content {
        padding: 20px 24px;
    }
    
    .mmlms-practice-student-v2 .mmlms-header-title {
        font-size: 20px;
    }
}

@media screen and (max-width: 480px) {
    .mmlms-practice-student-v2 .ps-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   TIME LIMIT INPUT FIX
   ===================================================================== */

/* Fix number input styling - remove spinner arrows */
.mmlms-practice-student-v2 .ps-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.mmlms-practice-student-v2 .ps-input[type="number"]::-webkit-outer-spin-button,
.mmlms-practice-student-v2 .ps-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Time limit group specific styling */
.mmlms-practice-student-v2 #time-limit-group .ps-input-wrapper {
    display: flex;
    align-items: center;
}

.mmlms-practice-student-v2 #time-limit-group .ps-input {
    padding-left: 40px;
    padding-right: 16px;
    height: 46px;
    font-size: 15px;
    font-weight: 500;
}

/* Time limit icon styling */
.mmlms-practice-student-v2 #time-limit-group .ps-input-wrapper .dashicons-clock {
    font-size: 18px;
    color: var(--mmlms-text-muted, #94a3b8);
}

/* Focus state for time limit */
.mmlms-practice-student-v2 #time-limit-group .ps-input:focus {
    border-color: var(--mmlms-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* Dark mode for time limit */
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 #time-limit-group .ps-input {
    background: var(--mmlms-gray-100, #1e293b);
    border-color: var(--mmlms-gray-200, #334155);
    color: var(--mmlms-gray-100, #f1f5f9);
}

/* ==========================================================================
   FIX: OPTIONS VISIBILITY - Ensure all options are displayed
   ========================================================================== */

/* Ensure options container is always visible and properly sized */
.mmlms-practice-modern .mmlms-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: var(--mmlms-space-lg, 24px) 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
}

/* Ensure each option is visible */
.mmlms-practice-modern .mmlms-options .mmlms-option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: var(--mmlms-space-md, 16px) !important;
    background: var(--mmlms-card-bg, #fff) !important;
    border: 2px solid var(--mmlms-border, #dbe4f0) !important;
    border-radius: var(--mmlms-radius, 12px) !important;
    box-shadow: var(--mmlms-shadow-sm, 0 2px 4px rgba(0,0,0,0.05)) !important;
    cursor: pointer !important;
    transition: var(--mmlms-transition, 200ms ease) !important;
    width: 100% !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* Ensure option text is visible */
.mmlms-practice-modern .mmlms-options .mmlms-option-text {
    flex: 1 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--mmlms-text, #1f2937) !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure option letter is visible */
.mmlms-practice-modern .mmlms-options .mmlms-option-letter {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    background: var(--mmlms-primary-subtle, #dbeafe) !important;
    color: var(--mmlms-primary-dark, #1d4ed8) !important;
    border-radius: var(--mmlms-radius-sm, 8px) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border: 1px solid var(--mmlms-border, #dbe4f0) !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure input is visible but positioned correctly */
.mmlms-practice-modern .mmlms-options .mmlms-option input[type="radio"],
.mmlms-practice-modern .mmlms-options .mmlms-option input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Ensure question container doesn't clip options */
.mmlms-practice-modern .mmlms-question-box {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

.mmlms-practice-modern #question-container {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Ensure question panel allows overflow */
.mmlms-practice-modern .mmlms-question-panel {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Dark mode support */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-options .mmlms-option {
    background: var(--mmlms-card-bg, #232b3a) !important;
    border-color: var(--mmlms-border, #334155) !important;
    color: var(--mmlms-text, #f8fafc) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-options .mmlms-option-text {
    color: var(--mmlms-text, #f8fafc) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-options {
        gap: 10px !important;
    }
    
    .mmlms-practice-modern .mmlms-options .mmlms-option {
        padding: 12px !important;
        min-height: 48px !important;
    }
}

/* ==========================================================================
   FIX: OPTION SELECTION VISIBILITY - Ensure selected state is visible
   ========================================================================== */

/* Selected state with !important to override base styles */
.mmlms-practice-modern .mmlms-options .mmlms-option.selected {
    background: var(--mmlms-primary-subtle, #dbeafe) !important;
    border-color: var(--mmlms-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #eff6ff) !important;
}

.mmlms-practice-modern .mmlms-options .mmlms-option:hover {
    background: var(--mmlms-primary-ghost, #eff6ff) !important;
    border-color: var(--mmlms-primary, #2563eb) !important;
    box-shadow: var(--mmlms-shadow) !important;
}

/* Selected option letter */
.mmlms-practice-modern .mmlms-options .mmlms-option.selected .mmlms-option-letter {
    transform: scale(1.1) !important;
    background: var(--mmlms-primary, #2563eb) !important;
    color: var(--mmlms-card-bg, #fff) !important;
}

/* Hover option letter */
.mmlms-practice-modern .mmlms-options .mmlms-option:hover .mmlms-option-letter {
    transform: scale(1.1) !important;
    background: var(--mmlms-primary, #2563eb) !important;
    color: var(--mmlms-card-bg, #fff) !important;
}

/* Dark mode selected state */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-options .mmlms-option.selected {
    background: var(--mmlms-primary-subtle, #1e3a5f) !important;
    border-color: var(--mmlms-primary, #60a5fa) !important;
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #172554) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-options .mmlms-option:hover {
    background: var(--mmlms-primary-ghost, #172554) !important;
    border-color: var(--mmlms-primary, #60a5fa) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-options .mmlms-option.selected .mmlms-option-letter,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-options .mmlms-option:hover .mmlms-option-letter {
    background: var(--mmlms-primary, #60a5fa) !important;
    color: var(--mmlms-bg, #181f2a) !important;
}

/* ==========================================================================
   FIX: MATHJAX RENDERING IN OPTIONS - Ensure math renders properly
   ========================================================================== */

/* Ensure option text allows math content */
.mmlms-practice-modern .mmlms-option-text {
    flex: 1 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--mmlms-text, #1f2937) !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    min-width: 0 !important;
    /* Allow content to be visible */
    overflow: visible !important;
    max-width: 100% !important;
}

/* Math content in options - inline display */
.mmlms-practice-modern .mmlms-option-text .math-content,
.mmlms-practice-modern .mmlms-option-text mjx-container,
.mmlms-practice-modern .mmlms-option-text .mjx-chtml {
    display: inline !important;
    white-space: normal !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    vertical-align: middle !important;
}

/* Ensure mjx-container doesn't overflow */
.mmlms-practice-modern .mmlms-option-text mjx-container {
    margin: 0 2px !important;
}

/* Dark mode math in options */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option-text {
    color: var(--mmlms-text, #f8fafc) !important;
}

/* Mobile responsive for selected state */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-options .mmlms-option.selected {
        box-shadow: 0 0 0 2px var(--mmlms-primary-ghost, #eff6ff) !important;
    }
    
    .mmlms-practice-modern .mmlms-option-text .math-content,
    .mmlms-practice-modern .mmlms-option-text mjx-container {
        font-size: 14px !important;
    }
}

/* ========================================
   FIX 8: MathJax overflow for tablet/mobile (481px–767px gap)
   ======================================== */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-question-text,
    .mmlms-practice-modern .mmlms-solution-content,
    .mmlms-practice-modern .mmlms-passage-box,
    .mmlms-practice-container .mmlms-question-text,
    .mmlms-practice-container .mmlms-solution-content,
    .mmlms-practice-container .mmlms-passage-box,
    .mmlms-practice-student-v2 .ps-question-text,
    .mmlms-practice-student-v2 .ps-solution-content,
    .mmlms-practice-student-v2 .ps-passage-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mmlms-practice-modern .mmlms-option-text,
    .mmlms-practice-container .mmlms-option-text,
    .mmlms-practice-student-v2 .ps-option-text {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}
@media (max-width: 480px) {
    .mmlms-practice-modern .mmlms-question-text,
    .mmlms-practice-modern .mmlms-solution-content,
    .mmlms-practice-modern .mmlms-passage-box,
    .mmlms-practice-container .mmlms-question-text,
    .mmlms-practice-container .mmlms-solution-content,
    .mmlms-practice-container .mmlms-passage-box,
    .mmlms-practice-student-v2 .ps-question-text,
    .mmlms-practice-student-v2 .ps-solution-content,
    .mmlms-practice-student-v2 .ps-passage-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mmlms-practice-modern .mmlms-option-text,
    .mmlms-practice-container .mmlms-option-text,
    .mmlms-practice-student-v2 .ps-option-text {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   ENHANCED: OPTION SELECTION VISIBILITY - Stronger selected state
   ========================================================================== */

/* Base option with high contrast border */
.mmlms-practice-modern .mmlms-option {
    border: 2px solid var(--mmlms-border, #dbe4f0) !important;
    background: var(--mmlms-card-bg, #fff) !important;
    transition: all 0.2s ease !important;
}

/* Selected state - very visible */
.mmlms-practice-modern .mmlms-option.selected {
    background: var(--mmlms-primary-subtle, #dbeafe) !important;
    border-color: var(--mmlms-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px var(--mmlms-primary-ghost, #eff6ff), inset 0 0 0 1px var(--mmlms-primary, #2563eb) !important;
}

/* Hover state — kept visible even when another option is already selected,
 * so the user always gets feedback before re-picking. On touch devices
 * `:active` covers the brief tap window since `:hover` doesn't fire there. */
.mmlms-practice-modern .mmlms-option:hover:not(.selected),
.mmlms-practice-modern .mmlms-option:active:not(.selected) {
    background: rgba(37, 99, 235, 0.10) !important;
    border-color: var(--mmlms-primary, #2563eb) !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.22) !important;
    transform: translateY(-1px);
}

/* Suppress hover/active feedback after the question is answered — the option
 * is locked in to its correct/wrong styling at that point. */
.mmlms-practice-modern .mmlms-option.correct:hover,
.mmlms-practice-modern .mmlms-option.wrong:hover,
.mmlms-practice-modern .mmlms-option.correct:active,
.mmlms-practice-modern .mmlms-option.wrong:active {
    transform: none;
}

/* Selected option letter */
.mmlms-practice-modern .mmlms-option.selected .mmlms-option-letter {
    background: var(--mmlms-primary, #2563eb) !important;
    color: #fff !important;
    border-color: var(--mmlms-primary, #2563eb) !important;
    transform: scale(1.1) !important;
}

/* Hover option letter (only when not selected) */
.mmlms-practice-modern .mmlms-option:hover:not(.selected) .mmlms-option-letter {
    background: var(--mmlms-primary, #2563eb) !important;
    color: #fff !important;
    border-color: var(--mmlms-primary, #2563eb) !important;
}

/* Dark mode selected state */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.selected {
    background: rgba(96, 165, 250, 0.2) !important;
    border-color: var(--mmlms-primary, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), inset 0 0 0 1px var(--mmlms-primary, #60a5fa) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option:hover:not(.selected) {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: var(--mmlms-primary, #60a5fa) !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.selected .mmlms-option-letter,
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option:hover:not(.selected) .mmlms-option-letter {
    background: var(--mmlms-primary, #60a5fa) !important;
    color: #0f172a !important;
    border-color: var(--mmlms-primary, #60a5fa) !important;
}

/* ==========================================================================
   ENHANCED: MATHJAX IN OPTIONS - Better math rendering support
   ========================================================================== */

/* Ensure math in options is properly sized */
.mmlms-practice-modern .mmlms-option-text .math-content {
    display: inline !important;
}

.mmlms-practice-modern .mmlms-option-text mjx-container {
    display: inline !important;
    margin: 0 2px !important;
    vertical-align: middle !important;
}

/* Ensure MathJax elements don't overflow option */
.mmlms-practice-modern .mmlms-option-text .mjx-chtml {
    display: inline !important;
    overflow: visible !important;
    max-width: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .mmlms-practice-modern .mmlms-option.selected {
        box-shadow: 0 0 0 2px var(--mmlms-primary-ghost, #eff6ff), inset 0 0 0 1px var(--mmlms-primary, #2563eb) !important;
    }
    
    .mmlms-practice-modern .mmlms-option-text mjx-container {
        font-size: 0.95em !important;
    }
}

/* ==========================================================================
   FIX: MODAL IN FULLSCREEN MODE - Ensure modal is always on top
   ========================================================================== */

/* Maximum z-index for modal overlay to ensure it shows above fullscreen */
.mmlms-modal-overlay {
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Ensure modal is visible and not clipped */
.mmlms-modal {
    position: relative;
    z-index: 2147483648 !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* When in fullscreen, ensure modal is not affected by fullscreen container */
.is-fullscreen .mmlms-modal-overlay {
    position: fixed !important;
    z-index: 2147483647 !important;
}

/* Dark mode modal in fullscreen */
[data-mmlms-theme="dark"] .mmlms-modal-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================================
   FIX: MODAL IN FULLSCREEN MODE - Append modal inside fullscreen element
   ========================================================================== */

/* When modal is inside fullscreen app */
#mmlms-practice-app.is-fullscreen .mmlms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000000 !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

#mmlms-practice-app.is-fullscreen .mmlms-modal {
    position: relative;
    z-index: 1000001 !important;
    max-height: 90vh;
    overflow-y: auto;
}

/* When modal is in body (normal mode) */
body > .mmlms-modal-overlay {
    position: fixed;
    z-index: 1000000 !important;
}

body > .mmlms-modal-overlay .mmlms-modal {
    z-index: 1000001 !important;
}

/* Dark mode support for fullscreen modal */
[data-mmlms-theme="dark"] #mmlms-practice-app.is-fullscreen .mmlms-modal-overlay {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* ==========================================================================
   FIX: Section Numbering Alignment & Left Padding
   ========================================================================== */

/* Add left padding to the main container to prevent border cutoff */
.mmlms-practice-student-v2 {
    padding-left: 16px;
    padding-right: 16px;
}

/* Align section title rows consistently */
.mmlms-practice-student-v2 .ps-section-title-row {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
}

/* Ensure numbered circles align with card left edge */
.mmlms-practice-student-v2 .ps-section-number-circle {
    flex-shrink: 0;
}

/* Grid containers should align with section titles */
.mmlms-practice-student-v2 .ps-mode-grid,
.mmlms-practice-student-v2 .ps-mode-grid-2 {
    margin-left: 0;
    margin-right: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .mmlms-practice-student-v2 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==========================================================================
   FIX: Vertical Alignment of Section Numbers (1, 2, 3)
   ========================================================================== */

/* Ensure all section rows align vertically */
.mmlms-practice-student-v2 .ps-section-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    /* Remove any left margin that could cause misalignment */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* First section should also have consistent margin */
.mmlms-practice-student-v2 .mmlms-header-card + .ps-section-title-row,
.mmlms-practice-student-v2 .ps-mode-grid + .ps-section-title-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure the number circles are aligned */
.mmlms-practice-student-v2 .ps-section-number-circle {
    flex-shrink: 0;
    margin-left: 0;
}

/* Main container needs some breathing room on sides */
.mmlms-practice-student-v2 #practice-config {
    padding-left: 8px;
    padding-right: 8px;
}

/* Grid should align with section title */
.mmlms-practice-student-v2 .ps-mode-grid,
.mmlms-practice-student-v2 .ps-mode-grid-2,
.mmlms-practice-student-v2 .ps-form-container {
    margin-left: 0;
    margin-right: 0;
}

/* Header card should also align */
.mmlms-practice-student-v2 .mmlms-header-card {
    margin-left: 0;
    margin-right: 0;
}

/* ==========================================================================
   MOBILE APP STYLE - Option Selection Visual Indicators
   Left border with labels like "Your Answer" and "Correct Answer"
   ========================================================================== */

/* Base option with left border for result indication */
.mmlms-practice-modern .mmlms-option.correct,
.mmlms-practice-student-v2 .mmlms-option.correct {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-left: 4px solid #22c55e !important;
    position: relative;
}

.mmlms-practice-modern .mmlms-option.wrong,
.mmlms-practice-student-v2 .mmlms-option.wrong {
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-left: 4px solid #ef4444 !important;
    position: relative;
}

/* Selected user's answer - show "Your Answer" label */
.mmlms-practice-modern .mmlms-option.wrong::before,
.mmlms-practice-student-v2 .mmlms-option.wrong::before {
    content: 'Your Answer';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Correct answer - show "Correct Answer" label */
.mmlms-practice-modern .mmlms-option.correct::before,
.mmlms-practice-student-v2 .mmlms-option.correct::before {
    content: 'Correct Answer';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

/* User's selected correct answer - show "Your Answer" */
.mmlms-practice-modern .mmlms-option.correct.selected::before,
.mmlms-practice-student-v2 .mmlms-option.correct.selected::before {
    content: 'Your Answer';
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
}

/* Option letter styling for correct/wrong */
.mmlms-practice-modern .mmlms-option.correct .mmlms-option-letter,
.mmlms-practice-student-v2 .mmlms-option.correct .mmlms-option-letter {
    background: #22c55e !important;
    color: #fff !important;
    border-color: #22c55e !important;
}

.mmlms-practice-modern .mmlms-option.wrong .mmlms-option-letter,
.mmlms-practice-student-v2 .mmlms-option.wrong .mmlms-option-letter {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: #ef4444 !important;
}

/* Remove the default after pseudo-elements (checkmarks) */
.mmlms-practice-modern .mmlms-option.correct::after,
.mmlms-practice-modern .mmlms-option.wrong::after,
.mmlms-practice-student-v2 .mmlms-option.correct::after,
.mmlms-practice-student-v2 .mmlms-option.wrong::after {
    display: none !important;
}

/* Dark mode support */
[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.correct {
    background: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.3) !important;
    border-left: 4px solid #22c55e !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.wrong {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-left: 4px solid #ef4444 !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.correct::before,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.correct::before {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.2);
}

[data-mmlms-theme="dark"] .mmlms-practice-modern .mmlms-option.wrong::before,
[data-mmlms-theme="dark"] .mmlms-practice-student-v2 .mmlms-option.wrong::before {
    color: #f87171;
    background: rgba(239, 68, 68, 0.2);
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .mmlms-practice-modern .mmlms-option.correct::before,
    .mmlms-practice-modern .mmlms-option.wrong::before,
    .mmlms-practice-student-v2 .mmlms-option.correct::before,
    .mmlms-practice-student-v2 .mmlms-option.wrong::before {
        font-size: 10px;
        padding: 1px 6px;
        top: 6px;
        right: 8px;
    }
}

/* ==========================================================================
   FIX: Option Styling Clean Up - Remove artifacts and ensure clean rendering
   ========================================================================== */

/* Ensure clean option rendering without artifacts */
.mmlms-practice-modern .mmlms-option,
.mmlms-practice-student-v2 .mmlms-option {
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* Force GPU acceleration for cleaner rendering */
    backface-visibility: hidden;
}

/* Fix any potential MathJax overflow issues in options */
.mmlms-practice-modern .mmlms-option-text mjx-container,
.mmlms-practice-student-v2 .mmlms-option-text mjx-container {
    max-width: 100%;
    overflow: visible;
}

/* Ensure labels are properly positioned */
.mmlms-practice-modern .mmlms-option.correct::before,
.mmlms-practice-modern .mmlms-option.wrong::before,
.mmlms-practice-student-v2 .mmlms-option.correct::before,
.mmlms-practice-student-v2 .mmlms-option.wrong::before {
    z-index: 10;
    pointer-events: none;
}

/* Clean up any pseudo-element artifacts */
.mmlms-practice-modern .mmlms-option::after,
.mmlms-practice-student-v2 .mmlms-option::after {
    display: none !important;
}

/* Ensure option text doesn't overflow - but allow math to scroll if needed */
.mmlms-practice-modern .mmlms-option-text,
.mmlms-practice-student-v2 .mmlms-option-text {
    overflow: visible;
}

/* Fix border rendering issues */
.mmlms-practice-modern .mmlms-option.correct,
.mmlms-practice-modern .mmlms-option.wrong,
.mmlms-practice-student-v2 .mmlms-option.correct,
.mmlms-practice-student-v2 .mmlms-option.wrong {
    border-style: solid !important;
    border-left-style: solid !important;
}

/* Final result-state override: after submission, green/red should win over blue selection */
.mmlms-practice-modern .mmlms-option.correct,
.mmlms-practice-modern .mmlms-option.correct.selected,
.mmlms-practice-student-v2 .mmlms-option.correct,
.mmlms-practice-student-v2 .mmlms-option.correct.selected {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    border-left-color: #22c55e !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.08) inset !important;
}

.mmlms-practice-modern .mmlms-option.wrong,
.mmlms-practice-modern .mmlms-option.wrong.selected,
.mmlms-practice-student-v2 .mmlms-option.wrong,
.mmlms-practice-student-v2 .mmlms-option.wrong.selected {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    border-left-color: #ef4444 !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.08) inset !important;
}

.mmlms-practice-modern .mmlms-option.correct .mmlms-option-letter,
.mmlms-practice-modern .mmlms-option.correct.selected .mmlms-option-letter,
.mmlms-practice-student-v2 .mmlms-option.correct .mmlms-option-letter,
.mmlms-practice-student-v2 .mmlms-option.correct.selected .mmlms-option-letter {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

.mmlms-practice-modern .mmlms-option.wrong .mmlms-option-letter,
.mmlms-practice-modern .mmlms-option.wrong.selected .mmlms-option-letter,
.mmlms-practice-student-v2 .mmlms-option.wrong .mmlms-option-letter,
.mmlms-practice-student-v2 .mmlms-option.wrong.selected .mmlms-option-letter {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

/* Matrix match polish: keep math text intact, show correct answer clearly, and constrain explanation panels. */
.mmlms-practice-modern .mmlms-matrix-columns .mmlms-matrix-col .math-content {
    display: block !important;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
}

.mmlms-practice-modern .mmlms-matrix-columns .mmlms-matrix-col ul {
    display: block !important;
}

.mmlms-practice-modern .mmlms-matrix-columns .mmlms-matrix-col li {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    width: 100%;
    clear: both;
}

.mmlms-practice-modern .mmlms-matrix-columns .mmlms-matrix-col li strong {
    grid-column: 1;
}

.mmlms-practice-modern .mmlms-matrix-columns .mmlms-matrix-col li .math-content {
    grid-column: 2;
}

.mmlms-practice-modern .mmlms-matrix-col mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
}

.mmlms-practice-modern .mmlms-feedback-matrix-correct {
    margin: 8px auto;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.mmlms-practice-modern .mmlms-feedback-matrix-details {
    margin-top: 8px;
    color: #111827;
}

.mmlms-practice-modern .mmlms-matrix-feedback-row {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
}

.mmlms-practice-modern .mmlms-matrix-feedback-row.correct {
    color: #047857;
}

.mmlms-practice-modern .mmlms-matrix-feedback-row.incorrect {
    color: #b91c1c;
}

.mmlms-practice-modern .mmlms-matrix-row-detail {
    color: #4b5563;
    font-weight: 500;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-sidebar-panel {
    min-height: 0;
    align-self: stretch;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 100%;
    max-height: none;
    background: #fff;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline .mmlms-solution-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    max-height: none;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline .mmlms-solution-content {
    min-height: 0;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box;
    background: #fff;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline .mmlms-solution-placeholder,
#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline #solution-content {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline #solution-content {
    overflow-x: auto;
    overflow-y: visible;
    text-align: left;
}

#mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions .mmlms-solution-card-inline #solution-content mjx-container {
    max-width: none !important;
}

/* Keep a single result label: JS renders .mmlms-option-badge, so suppress legacy pseudo labels. */
.mmlms-practice-modern .mmlms-option.correct::before,
.mmlms-practice-modern .mmlms-option.wrong::before,
.mmlms-practice-modern .mmlms-option.correct.selected::before,
.mmlms-practice-modern .mmlms-option.wrong.selected::before,
.mmlms-practice-student-v2 .mmlms-option.correct::before,
.mmlms-practice-student-v2 .mmlms-option.wrong::before,
.mmlms-practice-student-v2 .mmlms-option.correct.selected::before,
.mmlms-practice-student-v2 .mmlms-option.wrong.selected::before {
    content: none !important;
    display: none !important;
}

.mmlms-practice-modern .mmlms-option,
.mmlms-practice-student-v2 .mmlms-option {
    overflow: hidden;
}

/*
 * Result badge ("Correct Answer" / "Your Answer") for answered options.
 * Positioned absolutely so it never participates in the flex row that holds
 * the option letter + option text. When the badge was a flex item, its
 * intrinsic width on small screens collapsed the text container down to a
 * single character per line. Absolute positioning + reserved right padding
 * on the option keeps the text legible at every viewport width.
 */
.mmlms-practice-modern .mmlms-option,
.mmlms-practice-student-v2 .mmlms-option {
    position: relative;
}

.mmlms-practice-modern .mmlms-option-badge,
.mmlms-practice-student-v2 .mmlms-option-badge {
    position: absolute !important;
    top: 10px;
    right: 12px;
    flex: 0 0 auto;
    margin: 0 !important;
    z-index: 2;
    pointer-events: none;
}

/* Make room for the absolute badge so it doesn't overlap option text. */
.mmlms-practice-modern .mmlms-option.correct,
.mmlms-practice-modern .mmlms-option.wrong,
.mmlms-practice-student-v2 .mmlms-option.correct,
.mmlms-practice-student-v2 .mmlms-option.wrong {
    padding-right: 150px;
}

@media (max-width: 768px) {
    /* Reduce reserved padding on tablets so option text has more room */
    .mmlms-practice-modern .mmlms-option.correct,
    .mmlms-practice-modern .mmlms-option.wrong,
    .mmlms-practice-student-v2 .mmlms-option.correct,
    .mmlms-practice-student-v2 .mmlms-option.wrong {
        padding-right: 110px;
    }

    /* Move absolute badge to bottom-right earlier (was 600px only) */
    .mmlms-practice-student-v2 .mmlms-option-badge {
        top: auto;
        bottom: 8px;
        right: 10px;
        font-size: 11px;
        padding: 3px 8px;
    }
}

@media (max-width: 600px) {
    /* On phones, drop the badge to the bottom-right and let it stay compact.
     * Reserved padding shifts to the bottom so vertical text flow stays clean. */
    .mmlms-practice-modern .mmlms-option-badge,
    .mmlms-practice-student-v2 .mmlms-option-badge {
        top: auto;
        bottom: 8px;
        right: 10px;
        font-size: 11px;
        padding: 3px 8px;
    }
    .mmlms-practice-modern .mmlms-option.correct,
    .mmlms-practice-modern .mmlms-option.wrong,
    .mmlms-practice-student-v2 .mmlms-option.correct,
    .mmlms-practice-student-v2 .mmlms-option.wrong {
        padding-right: 16px;
        padding-bottom: 36px;
    }
}

/* Option text never tries to share a row with the badge. */
.mmlms-practice-modern .mmlms-option-text,
.mmlms-practice-student-v2 .mmlms-option-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ==========================================================================
   QUESTIONS-ACTIVE: Compact header (hides metadata rows on questions screen)
   The JS adds .mmlms-questions-active to #mmlms-practice-app when the session
   starts, so only the title + End Practice + fullscreen row shows.
   The instructions-screen header is unaffected.
   ========================================================================== */

#mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-questions-header .mmlms-header-row:not(.mmlms-header-row-main) {
    display: none;
}

/* Tighter padding on the compact header row */
#mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-questions-header {
    padding: 12px 24px;
}

/* Keep End Practice button compact */
#mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-btn-end-session {
    padding: 8px 16px;
    font-size: 13px;
}

/* Truncate long title so buttons stay visible */
#mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-header-title {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

#mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-header-title .mmlms-header-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    #mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-questions-header {
        padding: 10px 16px;
    }

    #mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-header-title .mmlms-header-label {
        font-size: 15px;
    }

    #mmlms-practice-app.mmlms-questions-active .mmlms-practice-header .mmlms-btn-end-session {
        padding: 7px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   MOBILE NAV BUTTONS: Fix submit/explanation/next layout on small screens
   ========================================================================== */

/* ==========================================================================
   MOBILE ONLY (≤480px) — practice session fixes
   Desktop and tablet behaviour is untouched.
   ========================================================================== */
@media (max-width: 480px) {

    /* --- Navigation bar: Prev | Submit | 💡 | Next  (single row, no overflow) ---
       The explanation button keeps its icon only; text is suppressed via font-size:0
       so all four items fit comfortably within the viewport. */
    .mmlms-practice-modern .mmlms-arrow-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .mmlms-practice-modern .mmlms-arrow-prev {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
    }

    /* Submit button: grows to fill available space */
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-submit {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 10px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    /* Explanation button: icon-only to save horizontal space */
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-explanation {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 40px !important;
        padding: 10px 12px !important;
        font-size: 0 !important;      /* hides text node */
        white-space: nowrap;
    }
    .mmlms-practice-modern .mmlms-arrow-nav .mmlms-btn-explanation .dashicons {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* Next button: compact, fixed width */
    .mmlms-practice-modern .mmlms-btn-next {
        flex: 0 0 auto !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
        margin-left: 0 !important;
    }

    /* Option text + badge layout for narrow screens. The badge is now
     * absolutely positioned (see global rule), so we only need to ensure the
     * text container can shrink below its intrinsic content width without
     * forcing per-character wrapping. */
    .mmlms-practice-modern .mmlms-option {
        overflow: visible !important;
    }
    .mmlms-practice-modern .mmlms-option-text {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* --- Screen-questions: prevent page-level horizontal scroll --- */
    #mmlms-practice-app.mmlms-practice-modern .mmlms-screen-questions {
        overflow-x: hidden;
    }

    /* --- Explanation / solution content: prevent text running off-screen --- */
    .mmlms-practice-modern .mmlms-solution-card,
    .mmlms-practice-modern .mmlms-solution-card-inline {
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }
    .mmlms-practice-modern .mmlms-solution-content,
    #solution-content {
        overflow-x: auto !important;
        white-space: normal !important;  /* override pre-wrap so long lines wrap */
        word-break: break-word;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    /* Math elements: allow them to scroll horizontally within their own block */
    .mmlms-practice-modern .mmlms-solution-content mjx-container,
    .mmlms-practice-modern .mmlms-solution-content .mjx-chtml,
    .mmlms-practice-modern .mmlms-solution-content .math-content {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* --- Question text: ensure it also wraps and doesn't push layout wide --- */
    .mmlms-practice-modern .mmlms-question-text,
    .mmlms-practice-modern .mmlms-question-box {
        max-width: 100%;
        overflow-x: auto !important;
        word-break: break-word;
    }
    .mmlms-practice-modern .mmlms-question-text mjx-container,
    .mmlms-practice-modern .mmlms-question-text .mjx-chtml {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* View Explanation button in the question toolbar — compact */
    .mmlms-practice-modern .mmlms-question-toolbar .mmlms-btn-text-icon {
        padding: 7px 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
   RESPONSIVE: Custom Practice Path — Mobile & Laptop
   ========================================================================== */

/* Tablet and below */
@media screen and (max-width: 768px) {
    /* Hero stats: allow wrapping so they never overflow narrow screens */
    .mmlms-practice-student-v2 .ps-hero-stats {
        flex-wrap: wrap;
        gap: 20px;
    }

    /* Form sections: less padding on small screens */
    .mmlms-practice-student-v2 .ps-form-section {
        padding: 16px;
    }

    /* iOS Safari zoom prevention: inputs < 16px trigger auto-zoom on focus */
    .mmlms-practice-student-v2 .ps-input,
    .mmlms-practice-student-v2 .ps-select {
        font-size: 16px;
    }

    /* Touch-friendly minimum height for buttons */
    .mmlms-practice-student-v2 .ps-btn {
        min-height: 44px;
    }

    /* Checkbox groups: keep comfortable tap area but prevent overflow */
    .mmlms-practice-student-v2 .ps-checkbox-group {
        padding: 10px;
    }

    .mmlms-practice-student-v2 .ps-checkbox-label {
        font-size: 15px;
    }

    /* Mode cards: slightly smaller text for narrow viewports */
    .mmlms-practice-student-v2 .ps-mode-card h3 {
        font-size: 16px;
    }

    .mmlms-practice-student-v2 .ps-mode-card p {
        font-size: 13px;
    }
}

/* Small phones */
@media screen and (max-width: 480px) {
    .mmlms-practice-student-v2 .ps-form-section {
        padding: 12px;
        border-radius: 12px;
    }

    .mmlms-practice-student-v2 .ps-form-section-header {
        gap: 8px;
        padding-bottom: 12px;
    }

    .mmlms-practice-student-v2 .ps-form-section-number {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .mmlms-practice-student-v2 .ps-form-section-title {
        font-size: 14px;
    }

    /* Hero stats: tighter spacing */
    .mmlms-practice-student-v2 .ps-hero-stats {
        gap: 16px;
        padding-top: 16px;
        margin-top: 20px;
    }

    .mmlms-practice-student-v2 .ps-hero-stat-value {
        font-size: 22px;
    }

    .mmlms-practice-student-v2 .ps-hero-stat-label {
        font-size: 11px;
    }

    /* Ensure selects and options remain readable */
    .mmlms-practice-student-v2 .ps-select option {
        font-size: 16px;
    }

    /* Header badge: compact */
    .mmlms-practice-student-v2 .mmlms-header-meta .mmlms-badge {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* Slightly larger tap target for buttons */
    .mmlms-practice-student-v2 .ps-btn {
        min-height: 48px;
    }
}

/* Large laptops & desktops: gently constrain width so lines don't get too long */
@media screen and (min-width: 1400px) {
    .mmlms-practice-student-v2 #practice-config {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ============================================
   RICH-SELECT OVERLAY (MathJax-rendered dropdown)
   ============================================ */
.mmlms-rich-select-wrapper { position: relative; display: inline-block; min-width: 280px; max-width: 100%; width: 100%; }
.mmlms-rich-select-wrapper select.mmlms-rich-select,
.mmlms-rich-select-wrapper select.ps-select { position: absolute; opacity: 0; pointer-events: none; height: 1px; width: 1px; left: 0; top: 0; }
.mmlms-rich-select-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 8px 32px 8px 14px; background: #fff; border: 1px solid var(--mmlms-gray-300, #cbd5e1); border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); cursor: pointer; font: inherit; color: var(--mmlms-gray-800, #1e293b); text-align: left; line-height: 1.4; position: relative; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.mmlms-rich-select-button:hover { border-color: var(--mmlms-primary, #3b82f6); }
.mmlms-rich-select-button:focus { border-color: var(--mmlms-primary, #3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); outline: none; }
.mmlms-rich-select-button[aria-disabled="true"] { background: var(--mmlms-gray-100, #f1f5f9); color: var(--mmlms-gray-400, #94a3b8); cursor: not-allowed; border-color: var(--mmlms-gray-200, #e2e8f0); }
.mmlms-rich-select-button .mmlms-rich-select-display { flex: 1; overflow: hidden; word-break: break-word; }
.mmlms-rich-select-button .mmlms-rich-select-display.placeholder { color: var(--mmlms-gray-400, #94a3b8); }
.mmlms-rich-select-button::after { content: ""; position: absolute; right: 14px; top: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--mmlms-gray-500, #64748b); transform: translateY(-50%); pointer-events: none; }
.mmlms-rich-select-popup { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--mmlms-gray-200, #e2e8f0); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.10); max-height: 280px; max-width: 100%; overflow-y: auto; overflow-x: hidden; z-index: 9999; display: none; }
.mmlms-rich-select-wrapper.is-open .mmlms-rich-select-popup { display: block; }
.mmlms-rich-select-option { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--mmlms-gray-100, #f1f5f9); line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.mmlms-rich-select-option:last-child { border-bottom: none; }
.mmlms-rich-select-option:hover, .mmlms-rich-select-option.is-active { background: var(--mmlms-primary-light, #eff6ff); }
.mmlms-rich-select-option.is-selected { background: #dbeafe; font-weight: 600; color: var(--mmlms-primary-hover, #2563eb); }
.mmlms-rich-select-option.is-placeholder { color: var(--mmlms-gray-400, #94a3b8); font-style: italic; }
.mmlms-rich-select-option mjx-container { margin: 0 2px; }

/* Header card banner improvements */
.mmlms-practice-student-v2.mmlms-practice-modern .mmlms-header-card {
    border-radius: var(--mmlms-radius-xl, 20px);
    box-shadow: 0 8px 32px rgba(29, 78, 216, 0.22);
}

/* Ensure topic dropdown wrapper stays inside form container */
.ps-input-wrapper .mmlms-rich-select-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Account for dashicons inside input wrapper */
.ps-input-wrapper .mmlms-rich-select-button {
    padding-left: 40px;
}

/* ============================================
   RESPONSIVE: Rich-select & Practice Config
   ============================================ */

/* Tablet (<= 768px) */
@media screen and (max-width: 768px) {
    .mmlms-rich-select-wrapper {
        min-width: auto;
    }
    .mmlms-rich-select-button {
        min-height: 40px;
        padding: 6px 28px 6px 12px;
        font-size: 14px;
    }
    .ps-input-wrapper .mmlms-rich-select-button {
        padding-left: 36px;
    }
    .mmlms-rich-select-popup {
        max-height: 240px;
        border-radius: 10px;
        top: calc(100% + 4px);
    }
    .mmlms-rich-select-option {
        padding: 10px 12px;
        font-size: 14px;
    }
    /* Banner: reduce padding */
    .mmlms-practice-student-v2.mmlms-practice-modern .mmlms-header-card {
        padding: 28px 24px;
    }
    .mmlms-practice-student-v2 .mmlms-header-title {
        font-size: 24px;
    }
    .mmlms-practice-student-v2 .mmlms-header-subtitle {
        font-size: 14px;
    }
    .mmlms-practice-student-v2 .ps-hero-stat-value {
        font-size: 24px;
    }
}

/* Mobile (<= 480px) */
@media screen and (max-width: 480px) {
    .mmlms-rich-select-wrapper {
        min-width: auto;
        max-width: 100%;
    }
    .mmlms-rich-select-button {
        min-height: 36px;
        padding: 5px 24px 5px 10px;
        font-size: 13px;
        border-radius: 8px;
    }
    .ps-input-wrapper .mmlms-rich-select-button {
        padding-left: 32px;
    }
    .mmlms-rich-select-popup {
        max-height: 200px;
        border-radius: 8px;
        left: -2px;
        right: -2px;
    }
    .mmlms-rich-select-option {
        padding: 8px 10px;
        font-size: 13px;
    }
    /* Banner: compact */
    .mmlms-practice-student-v2.mmlms-practice-modern .mmlms-header-card {
        padding: 20px 16px;
        border-radius: 14px;
    }
    .mmlms-practice-student-v2 .mmlms-header-title {
        font-size: 20px;
    }
    .mmlms-practice-student-v2 .mmlms-header-subtitle {
        font-size: 13px;
    }
    .mmlms-practice-student-v2 .ps-hero-stats {
        gap: 20px;
        margin-top: 20px;
        padding-top: 16px;
    }
    .mmlms-practice-student-v2 .ps-hero-stat-value {
        font-size: 20px;
    }
    .mmlms-practice-student-v2 .ps-hero-stat-label {
        font-size: 11px;
    }
}

/* ==========================================================================
   SESSION REVIEW PAGE
   ========================================================================== */

.mmlms-practice-review {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 20px;
    background: var(--mmlms-bg, #f8fafc);
    min-height: 100vh;
}

.mmlms-practice-review .mmlms-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--mmlms-border, #dbe4f0);
}

.mmlms-practice-review .mmlms-review-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--mmlms-text, #0f172a);
    margin: 0;
}

.mmlms-practice-review .mmlms-review-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--mmlms-text-secondary, #64748b);
}

.mmlms-practice-review .mmlms-review-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mmlms-practice-review .mmlms-review-item {
    background: var(--mmlms-card-bg, #fff);
    border-radius: 12px;
    padding: 20px 24px;
    border: 1px solid var(--mmlms-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.mmlms-practice-review .mmlms-review-item.correct {
    border-left: 4px solid var(--mmlms-success, #22c55e);
}

.mmlms-practice-review .mmlms-review-item.wrong {
    border-left: 4px solid var(--mmlms-danger, #ef4444);
}

.mmlms-practice-review .mmlms-review-item.skipped {
    border-left: 4px solid var(--mmlms-gray-400, #94a3b8);
}

.mmlms-practice-review .mmlms-review-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mmlms-practice-review .mmlms-review-qnum {
    font-size: 15px;
    font-weight: 700;
    color: var(--mmlms-text, #0f172a);
}

.mmlms-practice-review .mmlms-review-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 999px;
}

.mmlms-practice-review .mmlms-review-item.correct .mmlms-review-status {
    background: #dcfce7;
    color: #166534;
}

.mmlms-practice-review .mmlms-review-item.wrong .mmlms-review-status {
    background: #fee2e2;
    color: #991b1b;
}

.mmlms-practice-review .mmlms-review-item.skipped .mmlms-review-status {
    background: #f1f5f9;
    color: #475569;
}

.mmlms-practice-review .mmlms-review-question {
    font-size: 15px;
    line-height: 1.6;
    color: var(--mmlms-text, #1e293b);
    margin-bottom: 14px;
    overflow-x: auto;
}

.mmlms-practice-review .mmlms-review-question mjx-container,
.mmlms-practice-review .mmlms-review-question .mjx-chtml,
.mmlms-practice-review .mmlms-review-question .math-content {
    max-width: 100% !important;
}

.mmlms-practice-review .mmlms-review-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.mmlms-practice-review .mmlms-review-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--mmlms-border, #e2e8f0);
    background: #fafafa;
    font-size: 14px;
}

.mmlms-practice-review .mmlms-review-option.correct {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.mmlms-practice-review .mmlms-review-option.correct-selected {
    background: #dcfce7;
    border-color: #22c55e;
}

.mmlms-practice-review .mmlms-review-option.wrong-selected {
    background: #fee2e2;
    border-color: #ef4444;
}

.mmlms-practice-review .mmlms-review-option-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--mmlms-gray-200, #e2e8f0);
    color: var(--mmlms-text, #334155);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.mmlms-practice-review .mmlms-review-option.correct .mmlms-review-option-letter,
.mmlms-practice-review .mmlms-review-option.correct-selected .mmlms-review-option-letter {
    background: #22c55e;
    color: #fff;
}

.mmlms-practice-review .mmlms-review-option.wrong-selected .mmlms-review-option-letter {
    background: #ef4444;
    color: #fff;
}

.mmlms-practice-review .mmlms-review-option-text {
    line-height: 1.5;
}

.mmlms-practice-review .mmlms-review-explanation {
    margin-top: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mmlms-text-secondary, #475569);
    overflow-x: auto;
}

.mmlms-practice-review .mmlms-review-explanation mjx-container,
.mmlms-practice-review .mmlms-review-explanation .mjx-chtml,
.mmlms-practice-review .mmlms-review-explanation .math-content {
    max-width: 100% !important;
}

.mmlms-practice-review .mmlms-review-explanation strong {
    display: block;
    margin-bottom: 6px;
    color: var(--mmlms-text, #0f172a);
}

@media print {
    .mmlms-practice-review {
        background: #fff;
        padding: 20px;
    }
    .mmlms-practice-review .mmlms-review-header button {
        display: none !important;
    }
    .mmlms-practice-review .mmlms-review-item {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* PDF capture mode: force light colors so html2canvas captures dark-mode pages correctly */
.mmlms-pdf-capture,
.mmlms-pdf-capture .mmlms-review-item,
.mmlms-pdf-capture .mmlms-review-question,
.mmlms-pdf-capture .mmlms-review-option-text,
.mmlms-pdf-capture .mmlms-review-explanation {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #dddddd !important;
}
.mmlms-pdf-capture .mmlms-review-title,
.mmlms-pdf-capture .mmlms-review-qnum,
.mmlms-pdf-capture .mmlms-review-status,
.mmlms-pdf-capture .mmlms-review-option-letter {
    color: #000000 !important;
}
.mmlms-pdf-capture .mmlms-review-option.correct,
.mmlms-pdf-capture .mmlms-review-option.correct-selected {
    background: #d1fae5 !important;
    border-color: #10b981 !important;
}
.mmlms-pdf-capture .mmlms-review-option.wrong-selected {
    background: #fee2e2 !important;
    border-color: #ef4444 !important;
}
.mmlms-pdf-capture .math-content,
.mmlms-pdf-capture mjx-container,
.mmlms-pdf-capture .katex,
.mmlms-pdf-capture .MathJax {
    color: #000000 !important;
}

[data-mmlms-theme="dark"] .mmlms-practice-review {
    background: var(--mmlms-bg, #0f172a);
}

[data-mmlms-theme="dark"] .mmlms-practice-review .mmlms-review-title {
    color: var(--mmlms-text, #f1f5f9);
}

[data-mmlms-theme="dark"] .mmlms-practice-review .mmlms-review-item {
    background: var(--mmlms-card-bg, #1e293b);
    border-color: var(--mmlms-border, #334155);
}

[data-mmlms-theme="dark"] .mmlms-practice-review .mmlms-review-option {
    background: #1e293b;
    border-color: #334155;
}

[data-mmlms-theme="dark"] .mmlms-practice-review .mmlms-review-explanation {
    background: #0f172a;
}

/* Watermark for PDF generation */
#mmlms-review-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.06;
    display: none;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    overflow: hidden;
}

#mmlms-review-watermark span {
    font-size: 42px;
    font-weight: 700;
    color: #000;
    transform: rotate(-35deg);
    white-space: nowrap;
    padding: 30px 20px;
    user-select: none;
}

[data-mmlms-theme="dark"] #mmlms-review-watermark span {
    color: #fff;
}

/* ==========================================================================
   FIX: RESPONSIVE MATH EQUATIONS OVERFLOW
   Ensures that long inline and block equations become scrollable horizontally
   if they exceed the width of their permissible containers on any device.
   ========================================================================== */
.mmlms-practice-modern .mmlms-question-text,
.mmlms-practice-modern .mmlms-question-box,
.mmlms-practice-modern .mmlms-option-text,
.mmlms-practice-modern .mmlms-solution-content,
.mmlms-practice-student-v2 .mmlms-question-text,
.mmlms-practice-student-v2 .mmlms-question-box,
.mmlms-practice-student-v2 .mmlms-option-text,
.mmlms-practice-student-v2 .mmlms-solution-content {
    max-width: 100%;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.MathJax,
.MathJax_SVG,
.MathJax_Display,
.MathJax_Preview,
mjx-container,
.katex,
.katex-display {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    vertical-align: middle !important;
}

/* Ensure display block containers act as blocks but scroll if too wide */
mjx-container[display="true"] {
    display: block !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    max-width: 100% !important;
}

/* Custom sleek scrollbar for math containers so they look premium */
.MathJax::-webkit-scrollbar,
.MathJax_SVG::-webkit-scrollbar,
mjx-container::-webkit-scrollbar,
.katex::-webkit-scrollbar {
    height: 4px;
}
.MathJax::-webkit-scrollbar-thumb,
.MathJax_SVG::-webkit-scrollbar-thumb,
mjx-container::-webkit-scrollbar-thumb,
.katex::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}