/* 
 * Custom Styles for MathsTutor
 * This file contains custom styles that are NOT generated by Tailwind
 * These styles are preserved during CSS rebuilds
 * DO NOT DELETE THIS FILE - It contains Bootstrap overrides and custom components
 */

/* ============================================
   DEV ENVIRONMENT BANNER
   Fixed bottom-center banner, only rendered in Development
   ============================================ */

.dev-environment-banner {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff6b35, #e05500);
    color: #fff;
    padding: 6px 24px;
    border-radius: 8px 8px 0 0;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 -2px 12px rgba(255, 107, 53, 0.4);
    white-space: nowrap;
}

/* v2026-02-13-dev-banner */

/* ============================================
   DISPLAY FONT - Headings use Nunito (rounded, playful)
   Body text keeps system font stack for readability
   ============================================ */

h1, h2, h3, h4, h5, h6,
.hero-title,
.key-stage-main-title,
.card-title,
.assessment-title {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}

/* ============================================
   SKIP NAVIGATION - ACCESSIBILITY (WCAG 2.4.1)
   ============================================ */

.skip-nav-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top 0.2s ease;
}

.skip-nav-link:focus {
    top: 0;
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Prevent focus outline on main content target */
#main-content:focus {
    outline: none;
}

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

/* ============================================
   INTERACTIVE ELEMENT ACCESSIBILITY
   ============================================ */

/* Ensure all role="button" elements have pointer cursor and focus styles */
[role="button"] {
    cursor: pointer;
}

[role="button"]:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* ============================================
   FOCUS MANAGEMENT - PREVENT UGLY TITLE FOCUS BOXES
   ============================================ */

/* Remove focus outlines from headings (not interactive elements) */
h1, h2, h3, h4, h5, h6 {
    outline: none;
    border: none;
}

/* Remove focus styles from headings even when programmatically focused */
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
h1:focus-visible, h2:focus-visible, h3:focus-visible,
h4:focus-visible, h5:focus-visible, h6:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
}

/* But ensure our buttons get proper focus styles */
.btn:focus, button:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Special focus style for our Button component */
.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* ============================================
   EXERCISE IMAGE STYLES
   Responsive image display for exercise illustrations
   ============================================ */

.exercise-image-container {
    max-width: 100%;
    margin: 1.5rem 0;
    text-align: center;
    overflow: hidden;
}

.exercise-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: contain;
}

/* Mobile responsive images */
@media (max-width: 768px) {
    .exercise-image-container {
        margin: 1rem 0;
    }

    .exercise-image {
        max-height: 300px;
    }
}

/* Small phone responsive images */
@media (max-width: 480px) {
    .exercise-image {
        max-height: 200px;
    }
}

/* Dark mode support for images */
@media (prefers-color-scheme: dark) {
    .exercise-image {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
}

/* ============================================
   ABOUT PAGE GRADIENT ENHANCEMENTS
   Additional enhancements to the base gradient from app.css
   ============================================ */
/* bg-gradient-hero is defined in input.css via design tokens - no emergency override needed */

/* Utility gradient backgrounds for settings and summary cards - using design tokens */
.bg-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--student-primary)));
}

.bg-gradient-success {
    background: var(--gradient-success);
}

.bg-gradient-warning {
    background: linear-gradient(135deg, hsl(var(--warning)), hsl(var(--medium)));
}

.bg-gradient-danger {
    background: linear-gradient(135deg, hsl(var(--destructive)), hsl(0 84.2% 50%));
}

.bg-gradient-info {
    background: linear-gradient(135deg, hsl(var(--primary-glow)), hsl(var(--primary)));
}

/* Toggle switch styling for Family Settings */
.settings-toggle {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
}

.settings-toggle + .settings-toggle {
    margin-top: 0.5rem;
}

.settings-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle-label {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 76px;
    font-weight: 500;
    color: hsl(var(--foreground));
    cursor: pointer;
    line-height: 1.4;
}

.settings-toggle-label::before {
    content: "";
    position: absolute;
    left: 0;
    width: 60px;
    height: 32px;
    border-radius: var(--radius-full);
    background: hsl(var(--border));
    box-shadow: inset 0 2px 4px hsl(var(--foreground) / 0.12);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.settings-toggle-label::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: hsl(var(--card));
    box-shadow: 0 4px 10px hsl(var(--foreground) / 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.settings-toggle-input:checked + .settings-toggle-label::before {
    background: linear-gradient(135deg, hsl(var(--success)), hsl(var(--student-success)));
    box-shadow: 0 8px 16px hsl(var(--success) / 0.35);
}

.settings-toggle-input:checked + .settings-toggle-label::after {
    transform: translateX(28px);
    box-shadow: 0 6px 14px hsl(var(--success) / 0.35);
}

.settings-toggle-input:focus-visible + .settings-toggle-label::before {
    box-shadow: 0 0 0 3px hsl(var(--success) / 0.35);
}

.settings-toggle-input:disabled + .settings-toggle-label {
    opacity: 0.6;
    cursor: not-allowed;
}

.settings-toggle-input:disabled + .settings-toggle-label::before {
    background: hsl(var(--muted));
}

/* ============================================
   NAVIGATION MENU FIXES
   Bootstrap overrides to prevent menu breakage
   ============================================ */

/* Ensure Bootstrap navbar works correctly */
.navbar {
    position: relative;
    z-index: 1000;
}

.navbar-collapse {
    transition: height 0.3s ease;
}

.dropdown-menu {
    z-index: 1050;
}

/* Fix modal centering and z-index issues */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* ============================================
   ENHANCED NAVIGATION ICON SYSTEM
   Key Stage specific colors preserved from original
   Cache bust: v2025-09-01-icons-fix
   ============================================ */
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-decoration: none !important;
    font-size: 1.25rem;
}

.nav-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
}

/* Key Stage specific icon colors */
.nav-icon-ks1 {
    background: linear-gradient(135deg, #F9A8D4 0%, #EC4899 100%) !important;
    color: white !important;
    border: 1px solid rgba(236, 72, 153, 0.3) !important;
    box-shadow: 0 2px 4px rgba(236, 72, 153, 0.2) !important;
}

.nav-icon-ks1:hover {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(236, 72, 153, 0.4) !important;
    border-color: rgba(219, 39, 119, 0.5) !important;
    transform: translateY(-1px) !important;
}

.nav-icon-ks2 {
    background: linear-gradient(135deg, #93C5FD 0%, #2563EB 100%) !important;
    color: white !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
}

.nav-icon-ks2:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.4) !important;
    border-color: rgba(29, 78, 216, 0.5) !important;
    transform: translateY(-1px) !important;
}

.nav-icon-ks3 {
    background: linear-gradient(135deg, #FDE047 0%, #CA8A04 100%) !important;
    color: white !important;
    border: 1px solid rgba(202, 138, 4, 0.3) !important;
    box-shadow: 0 2px 4px rgba(202, 138, 4, 0.2) !important;
}

.nav-icon-ks3:hover {
    background: linear-gradient(135deg, #CA8A04 0%, #A16207 100%) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(202, 138, 4, 0.4) !important;
    border-color: rgba(161, 98, 7, 0.5) !important;
    transform: translateY(-1px) !important;
}

.nav-icon-ks4 {
    background: linear-gradient(135deg, #9CA3AF 0%, #4B5563 100%) !important;
    color: white !important;
    border: 1px solid rgba(75, 85, 99, 0.3) !important;
    box-shadow: 0 2px 4px rgba(75, 85, 99, 0.2) !important;
}

.nav-icon-ks4:hover {
    background: linear-gradient(135deg, #4B5563 0%, #374151 100%) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(75, 85, 99, 0.4) !important;
    border-color: rgba(55, 65, 81, 0.5) !important;
    transform: translateY(-1px) !important;
}

.nav-icon-assessment {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: white !important;
    border: 1px solid rgba(5, 150, 105, 0.3) !important;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2) !important;
}

.nav-icon-assessment:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    color: white !important;
    box-shadow: 0 8px 16px rgba(5, 150, 105, 0.4) !important;
    border-color: rgba(4, 120, 87, 0.5) !important;
    transform: translateY(-1px) !important;
}

.sidebar.collapsed .nav-icon-assessment,
.sidebar.collapsed .nav-icon-assessment:hover {
    border-radius: 8px !important;
    padding: 10px !important;
}

/* Legacy color utility classes for navigation */
.text-pink-600 { color: #ec4899 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-yellow-600 { color: #ca8a04 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-purple-600 { color: #9333ea !important; }

/* ============================================
   KEY STAGE CARDS
   Custom card styles with gradients
   ============================================ */
.key-stage-card {
    background: hsl(var(--card));
    border-radius: var(--radius-3xl);
    padding: var(--space-4) var(--space-6);
    border: 1px solid hsl(var(--border));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.key-stage-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* Theme-specific card backgrounds - using design tokens */
.ks1-card {
    background: var(--gradient-ks1);
}

.ks2-card {
    background: var(--gradient-ks2);
}

.ks3-card {
    background: var(--gradient-ks3);
}

.ks4-card {
    background: var(--gradient-ks4);
}

/* ============================================
   PROGRESS STATS CARDS
   Compact stats card design
   ============================================ */
.progress-stats-card {
    background: hsl(var(--card));
    border-radius: var(--radius-2xl);
    padding: var(--space-4);
    border: 1px solid hsl(var(--border));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 140px;
    max-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.progress-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   HERO SECTIONS
   Custom hero styles with gradients
   ============================================ */
.hero-section {
    padding: var(--space-12) 0;
    background: var(--gradient-hero);
    border-radius: var(--radius-3xl);
    margin-bottom: var(--space-8);
    color: hsl(var(--primary-foreground));
}

/* Desktop margin treatment - consistent with Key Stage pages */
@media (min-width: 1024px) {
    .hero-section {
        margin: 1.25rem;
        border-radius: 16px;
    }
}

/* Mobile margin treatment - extend to screen edges */
@media (max-width: 768px) {
    .hero-section {
        margin: 0 -1rem 2rem -1rem;
        border-radius: 0;
    }
}

.hero-title {
    font-size: var(--text-5xl);
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: hsl(var(--primary-foreground));
}

.hero-subtitle {
    font-size: var(--text-xl);
    opacity: 0.9;
    color: hsl(var(--primary-foreground) / 0.9);
    margin-bottom: var(--space-6);
}

.hero-features {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: white;
    opacity: 0.9;
}

.feature-item i {
    font-size: 1.25rem;
}

/* New badge-style feature tags */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.feature-badge i {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Parent dashboard hero layout refinements */
.parent-dashboard-hero .welcome-back-message {
    margin-top: 1.5rem;
    margin-bottom: 1.75rem;
}

.parent-dashboard-hero .welcome-back-message span {
    background: rgba(255, 255, 255, 0.25) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.parent-dashboard-hero .hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem 1.5rem;
    margin-top: 1rem;
}

.parent-dashboard-hero .feature-item {
    align-items: center;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
    color: white;
    opacity: 1;
}

.parent-dashboard-hero .feature-item span {
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.parent-dashboard-hero .feature-item i {
    font-size: 1.5rem;
}


.parent-dashboard-hero .mega-continue-button {
    background: linear-gradient(135deg, #facc15 0%, #f97316 100%);
    color: #1f2937;
    border: none;
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.35);
}

.parent-dashboard-hero .mega-continue-button:hover {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.45);
}

.parent-dashboard-hero .mega-continue-button:focus-visible {
    outline: 3px solid rgba(250, 204, 21, 0.65);
    outline-offset: 2px;
}
.parent-dashboard-hero .dash-family-overview-card {
    box-shadow: 0 20px 40px rgba(76, 29, 149, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.parent-dashboard-hero .dash-family-overview-card .card-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem auto;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.95), rgba(49, 46, 129, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(67, 56, 202, 0.35);
}

.parent-dashboard-hero .dash-family-overview-card .card-icon i {
    color: #f8fafc !important;
    font-size: 32px;
    text-shadow: 0 4px 12px rgba(15, 23, 42, 0.45);
}

.parent-dashboard-hero .dash-family-overview-card .family-hub-icon {
    color: #f8fafc !important;
}

.parent-dashboard-hero .dash-family-overview-card .card-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

/* Improve readability for family stats on gradient backgrounds */
.dash-family-overview-card .family-overview-meta {
    color: #ffffff !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.6),
        0 0 8px rgba(0, 0, 0, 0.4);
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.parent-dashboard-hero .dash-family-overview-card .card-title {
    color: #ffffff !important;
    text-shadow:
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 1px 2px rgba(0, 0, 0, 0.9);
    font-weight: 700 !important;
}

.parent-dashboard-hero .dash-family-overview-card .card-description {
    color: #ffffff !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.7),
        0 0 6px rgba(0, 0, 0, 0.4);
    font-weight: 500 !important;
}

.parent-dashboard-hero .dash-family-overview-card .age-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1f2937 !important;
    font-weight: 700 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 768px) {
    .parent-dashboard-hero .hero-features {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Mobile feature badge styling */
    .feature-badge {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.5rem !important;
        gap: 0.2rem !important;
    }

    .feature-badge i {
        font-size: 0.75rem !important;
    }
}

/* Reduce gap between hero and content sections on parent dashboard */
.parent-dashboard-hero ~ .key-stage-selection-section {
    padding-top: var(--space-6);
}

/* Progress page specific compact hero */
.progress-hero-compact .hero-section {
    padding: var(--space-6) 0;
    margin-bottom: var(--space-4);
    background: var(--gradient-hero);
}

/* Ensure progress-hero-compact inherits margin treatment on desktop */
@media (min-width: 1024px) {
    .progress-hero-compact .hero-section {
        margin: 1.25rem;
        border-radius: 16px;
    }
}

/* Ensure progress-hero-compact has proper clearance on mobile */
@media (max-width: 768px) {
    .progress-hero-compact .hero-section {
        margin: 0 1rem 1rem 1rem !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }
}

.progress-hero-compact .hero-title {
    font-size: 1.875rem;
    margin-bottom: 0.5rem;
    color: white;
}

.progress-hero-compact .hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.progress-hero-compact .hero-features {
    gap: 1.5rem;
}

.progress-hero-compact .progress-motivation {
    margin: 1rem 0;
    color: white;
}

/* Lesson page specific compact hero - Cache bust: v2026-01-30-normalize */
.lesson-hero-compact .hero-section {
    padding: 0.125rem 0;
    margin-bottom: var(--space-4);
    background: var(--gradient-hero);
}

.lesson-hero-compact .container {
    padding-top: 0rem;
    padding-bottom: 0.25rem;
}

.lesson-hero-compact .row {
    margin-top: 0;
}

.lesson-hero-compact .hero-title {
    font-size: 1.75rem;
    margin-bottom: 0rem;
    margin-top: -0.125rem;
    line-height: 1.05;
    color: white;
    text-align: left;
}

.lesson-hero-compact .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.1;
    text-align: left;
}

.lesson-hero-compact .hero-features {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0;
    flex-wrap: wrap;
}

.lesson-hero-compact .feature-item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    column-gap: 0.75rem;
    align-items: start;
    font-size: 0.875rem;
    line-height: 1.3;
    padding: 0;
    width: 100%;
}

.lesson-hero-compact .feature-item i {
    justify-self: center;
    line-height: 1;
}

.lesson-hero-compact .feature-item span {
    text-align: left;
}

.lesson-hero-compact .hero-demo-card {
    padding: 0.375rem;
}

.lesson-hero-compact .lesson-best-time-container {
    margin: 0.125rem 0;
}

/* Desktop specific margins for lesson hero */
@media (min-width: 1024px) {
    .lesson-hero-compact .hero-section {
        margin: 1.25rem;
        margin-bottom: 1rem;
        border-radius: 16px;
    }
}

/* Mobile specific margins for lesson hero - Fixed padding issue */
@media (max-width: 768px) {
    .lesson-hero-compact .hero-section {
        margin: 0 1rem 1rem 1rem !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }

    .lesson-hero-compact .hero-title {
        font-size: 1.5rem;
    }
}

/* ============================================
   LESSON PAGE COMPACT SPACING OVERRIDES
   Reduces excessive white space on lesson pages
   Cache bust: v2025-09-25-ultra-compact-lesson
   ============================================ */

/* Override the large key-stage-selection-section padding */
.lesson-content-section {
    padding-top: 1rem !important;
    padding-bottom: 2rem !important;
}

/* Further reduce hero section spacing — comfortable padding with design system breathing room */
.lesson-hero-compact .hero-section {
    padding: 1.5rem 0 !important;
    margin-bottom: 0.5rem !important;
}

/* Mobile-specific ultra compact spacing */
@media (max-width: 768px) {
    .lesson-content-section {
        padding-top: 0.5rem !important;
        padding-bottom: 1rem !important;
    }

    .lesson-hero-compact .hero-section {
        padding: 1rem 0 !important;
        margin-bottom: 0.25rem !important;
    }
}

/* ============================================
   LESSON DETAIL PAGE STYLES (.lesson- prefix)
   Migrated from LessonPage.razor inline styles
   Refreshed with design system tokens (Plan 02)
   Cache bust: v2026-02-22-lesson-detail-refresh
   ============================================ */

/* Hero title — Nunito 800 matching auth/landing design system */
.lesson-hero-compact .hero-title {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    font-weight: 800;
}

/* Hero subtitle — consistent with design system */
.lesson-hero-compact .hero-subtitle {
    font-size: var(--text-base);
    letter-spacing: 0.01em;
}

/* Hero demo card specific styling */
.lesson-hero-demo-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.lesson-hero-demo-card .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Difficulty badge colours — utility classes usable across pages */
.difficulty-easy { background: hsl(var(--student-success)) !important; color: white !important; text-transform: uppercase; }
.difficulty-medium { background: hsl(var(--warning)) !important; color: #000 !important; text-transform: uppercase; }
.difficulty-hard { background: hsl(var(--destructive)) !important; color: white !important; text-transform: uppercase; }
.difficulty-elite { background: hsl(var(--student-primary)) !important; color: white !important; text-transform: uppercase; }

.lesson-content {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* ── Lesson Content Dark Mode Fix ── */
[data-theme="dark"] .formatted-content {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .formatted-content h1,
[data-theme="dark"] .formatted-content h2,
[data-theme="dark"] .formatted-content h3,
[data-theme="dark"] .formatted-content h4,
[data-theme="dark"] .formatted-content h5,
[data-theme="dark"] .formatted-content h6 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .formatted-content p,
[data-theme="dark"] .formatted-content li,
[data-theme="dark"] .formatted-content dd,
[data-theme="dark"] .formatted-content dt {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .lesson-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .content-step {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .intro-step {
    background: hsl(220 30% 15%);
    border-color: hsl(var(--primary));
}

[data-theme="dark"] .step-header h4 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .step-label {
    color: hsl(var(--muted-foreground));
}

/* ── Lesson Content Blocks: worked-example, key-vocabulary, method-box ── */

.worked-example {
    background: hsl(var(--primary) / 0.08);
    border-left: 4px solid hsl(var(--primary));
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}

.worked-example h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.worked-example math-span {
    color: inherit;
}

.key-vocabulary {
    background: hsl(var(--success) / 0.08);
    border-left: 4px solid hsl(var(--success));
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}

.key-vocabulary h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.key-vocabulary dt {
    font-weight: 700;
}

.key-vocabulary math-span {
    color: inherit;
}

.method-box {
    background: hsl(var(--warning) / 0.08);
    border-left: 4px solid hsl(var(--warning));
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}

.method-box h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.method-box ol {
    padding-left: 1.5rem;
}

.method-box math-span {
    color: inherit;
}

.warning-box {
    background: hsl(var(--destructive) / 0.08);
    border-left: 4px solid hsl(var(--destructive));
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}

.warning-box h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--destructive));
}

.warning-box math-span {
    color: inherit;
}

/* Dark mode variants */
[data-theme="dark"] .worked-example {
    background: hsl(220 30% 18%);
    color: hsl(var(--foreground));
}

[data-theme="dark"] .worked-example h3 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .key-vocabulary {
    background: hsl(142 25% 16%);
    color: hsl(var(--foreground));
}

[data-theme="dark"] .key-vocabulary h3,
[data-theme="dark"] .key-vocabulary dt {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .method-box {
    background: hsl(45 25% 16%);
    color: hsl(var(--foreground));
}

[data-theme="dark"] .method-box h3 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .warning-box {
    background: hsl(0 25% 18%);
    color: hsl(var(--foreground));
}

[data-theme="dark"] .warning-box h3 {
    color: hsl(0 60% 65%);
}

.fun-activity {
    background: hsl(var(--student-primary) / 0.08);
    border-left: 4px solid hsl(var(--student-primary));
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}

.fun-activity h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

[data-theme="dark"] .fun-activity {
    background: hsl(280 25% 16%);
    color: hsl(var(--foreground));
}

[data-theme="dark"] .fun-activity h3 {
    color: hsl(var(--foreground));
}

.lesson-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.lesson-card-grid > div {
    text-align: center;
    padding: 1rem;
    background: hsl(var(--background));
    border-radius: var(--radius);
    border: 2px solid hsl(var(--border));
    overflow: hidden;
}

[data-theme="dark"] .lesson-card-grid > div {
    background: hsl(220 20% 14%);
    border-color: hsl(220 20% 25%);
}

.answer-line {
    margin: 0;
    background: hsl(var(--success) / 0.08);
    padding: 0.75rem;
    border-radius: 0.25rem;
}

[data-theme="dark"] .answer-line {
    background: hsl(142 25% 16%);
    color: hsl(var(--foreground));
}

.answer-line-warning {
    margin: 0;
    background: hsl(var(--destructive) / 0.08);
    padding: 0.75rem;
    border-radius: 0.25rem;
}

[data-theme="dark"] .answer-line-warning {
    background: hsl(0 25% 18%);
    color: hsl(var(--foreground));
}

.answer-line-tip {
    margin: 0;
    background: hsl(var(--warning) / 0.08);
    padding: 0.75rem;
    border-radius: 0.25rem;
}

[data-theme="dark"] .answer-line-tip {
    background: hsl(45 25% 16%);
    color: hsl(var(--foreground));
}

.formula-highlight {
    text-align: center;
    font-size: 1.3rem;
    margin: 1rem 0;
    padding: 0.75rem;
    background: hsl(var(--primary) / 0.08);
    border-radius: 0.5rem;
    border: 2px solid hsl(var(--primary));
}

[data-theme="dark"] .formula-highlight {
    background: hsl(220 30% 18%);
    color: hsl(var(--foreground));
}

.lesson-exercise-item {
    background-color: hsl(var(--muted));
    transition: all 0.2s ease;
}

.lesson-exercise-item:hover {
    background-color: hsl(var(--accent));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Scope .progress height override to lesson pages only */
.lesson-hero-compact .progress {
    height: 10px;
}

/* Exercise Cards - Responsive Grid */
.lesson-exercise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-4);
}

@media (max-width: 992px) {
    .lesson-exercise-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.lesson-exercise-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lesson-exercise-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.lesson-exercise-card:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.lesson-exercise-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
}

.lesson-exercise-icon {
    width: 32px;
    height: 32px;
    background: hsl(var(--accent));
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--space-3);
    flex-shrink: 0;
}

.lesson-exercise-icon i {
    font-size: var(--text-base);
}

.lesson-exercise-title {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
    color: hsl(var(--foreground));
    font-size: var(--text-base);
}

.lesson-exercise-question {
    color: hsl(var(--muted-foreground));
    font-size: var(--text-sm);
    line-height: 1.4;
    margin-bottom: var(--space-4);
    min-height: 2.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Lesson details grid */
.lesson-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-2);
    max-width: 100%;
    overflow-x: hidden;
}

/* Lesson content container overflow protection */
.key-stage-selection-section .container {
    max-width: 100%;
    overflow-x: hidden;
}

/* Primary action buttons styling */
.lesson-primary-start-button,
.lesson-primary-continue-button {
    font-family: 'Nunito', system-ui, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: var(--space-4) var(--space-6) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-xl) !important;
}

.lesson-primary-start-button:hover,
.lesson-primary-continue-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.lesson-detail-item {
    font-size: var(--text-sm);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: hsl(var(--foreground));
}

.lesson-detail-item strong {
    color: hsl(var(--foreground));
}

/* Sidebar card — assessment-card scoped overrides for lesson page context */
.lesson-sidebar-card {
    border-radius: var(--radius-2xl) !important;
    border: 1px solid hsl(var(--border)) !important;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lesson-sidebar-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Exercise stats card */
.lesson-exercise-stats-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lesson-exercise-stats-card .stat-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
    min-height: 44px;
}

.lesson-exercise-stats-card .stat-item i {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.lesson-exercise-stats-card .stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    line-height: 1.2;
}

.lesson-exercise-stats-card .stat-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.2;
}

/* Exercise Cards Container Styling */
.lesson-exercise-cards-container {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-2xl);
    padding: var(--space-6);
    margin-top: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.lesson-exercise-cards-container .lesson-exercise-grid {
    margin-top: 0;
}

/* Year group completion message */
.lesson-year-group-complete-message {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, hsl(var(--warning) / 0.15), hsl(var(--warning) / 0.1));
    border: 1px solid hsl(var(--warning));
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--text-sm);
    color: hsl(var(--warning));
}

.lesson-year-group-complete-message i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Best Time Indicator Styling */
.lesson-best-time-container {
    margin: 0.25rem 0;
    padding: 0.25rem 0;
}

.lesson-best-time-container .best-time-indicator {
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.lesson-best-time-container .best-time-indicator.success {
    color: #10f981 !important;
}

.lesson-best-time-container .best-time-indicator.loading {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Mobile breakpoints for lesson detail page */
@media (max-width: 576px) {
    .lesson-details-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .lesson-detail-item {
        padding-bottom: var(--space-2);
        border-bottom: 1px solid hsl(var(--border));
    }

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

    .lesson-exercise-stats-card {
        padding: var(--space-4);
    }

    .lesson-exercise-stats-card .stat-item {
        justify-content: space-between;
        padding: var(--space-3) var(--space-2);
    }

    .lesson-exercise-stats-card .stat-item > div {
        text-align: right;
    }

    /* Hero title font scale on small screens */
    .lesson-hero-compact .hero-title {
        font-size: 1.5rem;
    }

    .lesson-hero-compact .hero-subtitle {
        font-size: 1rem;
    }

    /* Reduced card padding on mobile */
    .lesson-sidebar-card {
        padding: var(--space-4) !important;
    }
}

@media (max-width: 768px) {
    .lesson-exercise-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
        max-width: 100%;
        overflow-x: hidden;
    }

    .lesson-exercise-stats-card {
        margin-bottom: var(--space-4);
    }

    .lesson-exercise-cards-container {
        padding: var(--space-4);
        margin-top: var(--space-3);
        max-width: 100%;
        overflow-x: hidden;
    }

    .lesson-best-time-container {
        margin: 0.125rem 0;
        padding: 0.125rem 0;
    }

    .lesson-best-time-container .best-time-indicator {
        padding: 0.25rem 0.5rem;
        font-size: var(--text-sm);
    }

    /* Minimum touch targets for exercise cards on mobile */
    .lesson-exercise-card {
        min-height: 44px;
    }
}

/* ============================================
   LESSON DETAIL PAGE - DARK MODE
   Cache bust: v2026-02-22-lesson-detail-dark-mode
   ============================================ */

[data-theme="dark"] .lesson-exercise-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .lesson-exercise-card:hover {
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .lesson-exercise-icon {
    background: hsl(var(--accent));
}

[data-theme="dark"] .lesson-exercise-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .lesson-exercise-question {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .lesson-exercise-cards-container {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .lesson-sidebar-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .lesson-detail-item {
    color: hsl(var(--foreground));
    border-bottom-color: hsl(var(--border));
}

[data-theme="dark"] .lesson-detail-item strong {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .lesson-year-group-complete-message {
    background: linear-gradient(135deg, hsl(var(--warning) / 0.2), hsl(var(--warning) / 0.1));
    border-color: hsl(var(--warning) / 0.5);
    color: hsl(var(--warning));
}

[data-theme="dark"] .lesson-primary-start-button,
[data-theme="dark"] .lesson-primary-continue-button {
    box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .lesson-exercise-card .difficulty-easy { background: hsl(var(--student-success)) !important; }
[data-theme="dark"] .lesson-exercise-card .difficulty-medium { background: hsl(var(--warning)) !important; color: hsl(0 0% 0%) !important; }
[data-theme="dark"] .lesson-exercise-card .difficulty-hard { background: hsl(var(--destructive)) !important; }
[data-theme="dark"] .lesson-exercise-card .difficulty-elite { background: hsl(var(--student-primary)) !important; }

[data-theme="dark"] .lesson-best-time-container .best-time-indicator {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ============================================
   LOGIN ICON STYLES - PERMANENT SOLUTION

   CRITICAL: These styles are in custom.css instead of Tailwind utilities
   to solve the circular CSS dependency problem.
   
   THE PROBLEM:
   - Tailwind utilities (w-16, h-16, bg-gradient-to-br) were missing from compiled app.css
   - Rebuilding CSS to include them broke Bootstrap navigation menus
   - Created unusable circular dependency: icons work OR navigation works, not both
   
   THE SOLUTION:
   - Move all custom UI elements to custom.css (loads after Tailwind)
   - Use !important declarations to override any framework conflicts
   - Navigation menus stay intact regardless of CSS rebuilds
   - Custom components work independently of Tailwind build process
   
   DO NOT move these back to Tailwind classes or inline styles!
   See docs/css-architecture-fix.md for full technical details.
   
   Date: 2025-09-06
   Status: Working - Both icons and navigation functional
   ============================================ */
.login-icon-student {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-icon-parent {
    width: 64px !important;
    height: 64px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-icon-student i.bi,
.login-icon-parent i.bi {
    font-size: 30px !important;
    color: white !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* ============================================
   MOBILE RESPONSIVE LOGIN BUTTONS
   Fix text overflow on small screens
   ============================================ */

/* Mobile screens - much smaller icons for Samsung and other mobile devices */
@media (max-width: 480px) {
    .login-icon-student,
    .login-icon-parent {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }
    
    .login-icon-student i.bi,
    .login-icon-parent i.bi {
        font-size: 16px !important;
    }
    
    /* Reasonable padding for mobile */
    .user-type-button {
        padding: 0.75rem !important;
    }
    
    .user-type-button .flex.items-center {
        gap: 0.5rem !important;
    }
}

/* ============================================
   CUSTOM ANIMATIONS
   Note: float, wiggle, pulse-magic are defined in input.css @layer components
   Only page-specific animations remain here
   ============================================ */

/* ============================================
   EASTER EGGS & FUN ELEMENTS
   About page interactive elements
   ============================================ */
.magical-word {
    cursor: pointer;
    transition: all 0.3s ease;
}

/* rainbow-text, floating-sparkle, and secret-toast are defined in input.css @layer components */

/* Gradient text click-invisible fix: -webkit-text-fill-color: transparent makes text
   disappear when selected. Prevent selection on all gradient text elements. */
.rainbow-text,
.rainbow-text-slow,
.text-gradient-student {
    user-select: none;
}

/* achievement-popup animation - kept as page-specific override */
.achievement-popup {
    animation: achievement-entrance 0.5s ease-out;
}

@keyframes achievement-entrance {
    0% {
        transform: scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

/* wobble-animation, rocket-launch, confetti, and fade-in-quote are defined in input.css @layer components */

/* ============================================
   WHO WE SERVE CARDS
   Gradient cards for different user types
   Moved from input.css @layer components — Tailwind purge was dropping them
   Cache bust: v2026-02-06-card-gradients
   ============================================ */

.who-we-serve-card {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2xl);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.who-we-serve-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-hover);
}

.students-card {
    background-color: #5b21b6;
    background: linear-gradient(135deg, #3b82f6 0%, #a855f7 100%);
}

.parents-card {
    background-color: #2563eb;
    background: linear-gradient(135deg, #22c55e 0%, #3b82f6 100%);
}

.teachers-card {
    background-color: #c2410c;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
}

.who-we-serve-card .card-icon {
    margin-bottom: 1rem;
}

.who-we-serve-card .card-icon i {
    color: white;
    font-size: 3.75rem;
}

.who-we-serve-card .card-title {
    margin-bottom: 1rem;
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

.who-we-serve-card .card-text {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.95);
}

.who-we-serve-card .card-testimonial {
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
    opacity: 0.9;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
}

.who-we-serve-card .card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    color: white;
}

.who-we-serve-card .feature-item i {
    color: white;
}

.who-we-serve-card .feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ============================================
   PROGRESS PAGE TEXT VISIBILITY FIX
   Make motivational quotes visible on purple background
   Cache bust: v2025-09-12-voice-text-fix
   ============================================ */
.level-voice,
.lesson-voice,
.streak-voice,
.score-voice {
    color: white !important;
    font-weight: 600 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.3) !important;
    opacity: 0.95 !important;
    text-align: right !important;
    display: block !important;
    width: 100% !important;
}

/* Ensure text remains visible during animation */
@keyframes voice-glow {
    0% { 
        opacity: 0.9 !important; 
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 0, 0, 0.3) !important; 
    }
    100% { 
        opacity: 1 !important; 
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 255, 0.15) !important; 
    }
}

/* Mobile improvements for voice text */
@media (max-width: 768px) {
    .level-voice,
    .lesson-voice,
    .streak-voice,
    .score-voice {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
}

/* ============================================
   UTILITY OVERRIDES
   Important overrides that must be preserved
   ============================================ */

/* Fix Bootstrap button focus states - override default Bootstrap focus ring
   Uses :where() to avoid adding specificity, letting focus-visible styles win */
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn-primary:focus:not(:focus-visible),
.btn-primary:active:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Button variant styles - replacing missing Tailwind utility classes */
.btn-destructive {
    background-color: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-destructive:hover:not(:disabled) {
    background-color: hsl(0, 72%, 51%);
    box-shadow: 0 4px 15px hsl(var(--destructive) / 0.5), 0 0 20px hsl(var(--destructive) / 0.3);
}

.btn-destructive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-destructive:focus:not(:focus-visible),
.btn-destructive:active:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

[data-theme="dark"] .btn-destructive {
    background-color: hsl(0, 72%, 51%);
}

[data-theme="dark"] .btn-destructive:hover:not(:disabled) {
    background-color: hsl(0, 72%, 45%);
    box-shadow: 0 4px 15px hsl(0 72% 51% / 0.5), 0 0 20px hsl(0 72% 51% / 0.3);
}

.btn-secondary-variant {
    background-color: #e5e7eb;
    color: #111827;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-variant:hover:not(:disabled) {
    background-color: #d1d5db;
}

.btn-secondary-variant:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-theme="dark"] .btn-secondary-variant {
    background-color: #374151;
    color: #f9fafb;
}

[data-theme="dark"] .btn-secondary-variant:hover:not(:disabled) {
    background-color: #4b5563;
}

.btn-outline-variant {
    background: transparent;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline-variant:hover:not(:disabled) {
    background-color: #f9fafb;
}

[data-theme="dark"] .btn-outline-variant {
    color: #f9fafb;
    border-color: #4b5563;
}

[data-theme="dark"] .btn-outline-variant:hover:not(:disabled) {
    background-color: #1f2937;
}

.btn-ghost {
    background: transparent;
    color: #374151;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost:hover:not(:disabled) {
    background-color: #f3f4f6;
}

[data-theme="dark"] .btn-ghost {
    color: #f9fafb;
}

[data-theme="dark"] .btn-ghost:hover:not(:disabled) {
    background-color: #1f2937;
}

.btn-link-variant {
    background: transparent;
    color: hsl(var(--primary));
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    text-underline-offset: 4px;
    transition: all 0.2s ease;
}

.btn-link-variant:hover:not(:disabled) {
    text-decoration: underline;
}

/* Ensure proper z-index stacking */
.navbar-nav .dropdown-menu {
    position: absolute;
    z-index: 1000;
}

/* Fix card overlaps */
.card {
    position: relative;
    z-index: 1;
}

/* Preserve icon sizing */
.bi {
    vertical-align: middle;
}

/* Animation performance optimization */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* ============================================
   EXPANDED SIDEBAR VERTICAL SPACING REDUCTION
   Reduces vertical spacing in expanded menu state only
   Cache bust: v2025-09-07-aggressive-spacing
   ============================================ */

/* Aggressively reduce navigation container padding in expanded state (35% reduction) */
.sidebar:not(.collapsed) .flex-column {
    padding: 0.65rem 1rem !important; /* Reduce from p-3 (1rem) to 0.65rem top/bottom (35% reduction) */
}

/* Aggressively reduce menu item bottom margins in expanded state (35% reduction) */
.sidebar:not(.collapsed) .nav-item {
    margin-bottom: 0.325rem !important; /* Reduce from mb-2 (0.5rem) to 0.325rem (35% reduction) */
}

/* Aggressively reduce nav link vertical padding while preserving horizontal padding (35% reduction) */
.sidebar:not(.collapsed) .nav-link {
    padding: 0.65rem 1rem !important; /* Reduce from p-3 (1rem all) to 0.65rem vertical (35% reduction) */
}

/* Further reduce section header margins (35% reduction) */
.sidebar:not(.collapsed) h6 {
    margin-bottom: 0.487rem !important; /* Reduce from mb-3 (0.75rem) to 0.487rem (35% reduction) */
}

/* Aggressively reduce horizontal rule margins in expanded state (35% reduction) */
.sidebar:not(.collapsed) hr {
    margin: 0.487rem 0 !important; /* Reduce from default margins by 35% */
}

/* ============================================
   FORM INPUT STYLING - REGISTER/LOGIN CONSISTENCY
   Ensures consistent input styling across forms
   Date: 2025-09-07
   ============================================ */

/* Consistent InputText styling for auth forms - using design tokens */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
select:not(.page-size-select) {
    width: 100% !important;
    padding: var(--space-2) var(--space-3) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--text-sm) !important;
    transition: all 0.2s ease !important;
    background: hsl(var(--card)) !important;
}

/* Focus states for inputs - using design tokens */
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:not(.page-size-select):focus {
    outline: none !important;
    border-color: hsl(var(--ring)) !important;
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2) !important;
}

/* Ensure labels are consistent - using design tokens */
label {
    display: block !important;
    font-size: var(--text-sm) !important;
    font-weight: 500 !important;
    color: hsl(var(--foreground)) !important;
    margin-bottom: var(--space-2) !important;
}

/* ============================================
   EMAIL FIELD SPACING FIX
   Fix spacing between email field and next field
   ============================================ */
.email-field-container {
    margin-bottom: 2rem !important;
}

.email-info-box {
    margin-top: 0.75rem !important;
    margin-bottom: 1rem !important;
}

/* ============================================
   HEADER SPACING FIXES - FORCE PROPER MARGINS
   Ensure all hero sections have proper margins like KeyStage page
   ============================================ */

/* Force hero-section margins with higher specificity */
.hero-section {
    margin: 0 !important;
    margin-bottom: 2rem !important;
    border-radius: 24px !important;
}

/* Force progress-hero-compact margins with higher specificity */
.progress-hero-compact .hero-section {
    margin: 0 !important;
    margin-bottom: 1rem !important;
    border-radius: 24px !important;
}

/* Desktop specific margins - force proper spacing */
@media (min-width: 1024px) {
    .hero-section {
        margin: 1.25rem !important;
        margin-bottom: 2rem !important;
        border-radius: 16px !important;
    }
    
    .progress-hero-compact .hero-section {
        margin: 1.25rem !important;
        margin-bottom: 1rem !important;
        border-radius: 16px !important;
    }
}

/* Mobile specific margins - extend to edges but with proper structure */
@media (max-width: 768px) {
    .hero-section {
        margin: 0 -1rem 2rem -1rem !important;
        border-radius: 0 !important;
    }

    .progress-hero-compact .hero-section {
        margin: 0 1rem 1rem 1rem !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }

    /* Settings page hero clearance on mobile */
    .settings-hero {
        margin: 0 1rem 2rem 1rem !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }
}

/* Hero inset modifier — rounded with margins on mobile instead of full-bleed
   Use on pages like invite code, link-a-child, lesson loading states
   Cache bust: v2026-03-11-hero-inset */
@media (max-width: 768px) {
    .hero-section.hero-inset {
        margin: 0 1rem 1rem 1rem !important;
        border-radius: 12px !important;
        padding: 1rem !important;
    }
}

/* ============================================
   SPINNER LOADING ANIMATION - SIMPLE & RELIABLE
   Custom spinner for SkeletonScreen component
   Cache bust: v2025-09-14-spinner-animation-v5
   ============================================ */

.spinner-loading {
    animation: spin-loading 1s linear infinite !important;
}

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

/* ============================================
   REGISTRATION FORM INPUT COMPLETE STYLING FIX
   Force ALL input fields to consistent width AND height
   ============================================ */

/* Target ALL input elements regardless of type - with consistent height */
/* Exclude checkboxes/radios so toggle switches aren't stretched */
input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    font-size: 0.875rem !important;
}

/* Ensure all inputs in any form have full width and proper height */
form input:not([type="checkbox"]):not([type="radio"]),
form select,
form textarea {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    font-size: 0.875rem !important;
}

/* Target inputs without type attribute (Blazor sometimes renders without type) */
input:not([type]),
input[type=""],
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    font-size: 0.875rem !important;
}

/* Force width and height on inputs inside any div with space-y classes */
.space-y-2 input:not([type="checkbox"]):not([type="radio"]),
.space-y-4 input:not([type="checkbox"]):not([type="radio"]),
.space-y-6 input:not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 2.5rem !important;
    font-size: 0.875rem !important;
}

/* Ultra-specific targeting for registration page - using design tokens */
#firstName,
#lastName,
#email,
#password,
#confirmPassword,
#userType {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: var(--space-2) var(--space-3) !important;
    min-height: 2.5rem !important;
    font-size: var(--text-sm) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius-sm) !important;
    background: hsl(var(--card)) !important;
}

/* ============================================
   ADMIN DASHBOARD READABILITY FIX
   Force light theme for admin pages to prevent white text on white background
   Cache bust: v2025-09-15-admin-readability-fix
   ============================================ */

/* Force light theme for all admin pages - override dark mode detection */
.admin-dashboard,
.admin-dashboard *,
[class*="admin-"] {
    /* Force CSS variables to light theme */
    --background: 244 47% 96% !important;
    --foreground: 222.2 84% 4.9% !important;
    --card: 0 0% 100% !important;
    --card-foreground: 222.2 84% 4.9% !important;

    /* Force light backgrounds and dark text */
    background-color: #f8fafc !important;
    color: #1f2937 !important;
}

/* Ensure admin dashboard container always has light background */
.admin-dashboard {
    background: #f8fafc !important;
    color: #1f2937 !important;
    min-height: 100vh !important;
}

/* Force admin cards to always be light with dark text */
.admin-dashboard .bg-white,
.admin-dashboard [class*="bg-white"] {
    background-color: white !important;
    color: #1f2937 !important;
}

/* Force admin text colors to always be visible */
.admin-dashboard .text-gray-900,
.admin-dashboard [class*="text-gray-900"] {
    color: #111827 !important;
}

.admin-dashboard .text-gray-600,
.admin-dashboard [class*="text-gray-600"] {
    color: #4b5563 !important;
}

.admin-dashboard .text-gray-500,
.admin-dashboard [class*="text-gray-500"] {
    color: #6b7280 !important;
}

/* Force admin headings to be dark */
.admin-dashboard h1,
.admin-dashboard h2,
.admin-dashboard h3,
.admin-dashboard h4,
.admin-dashboard h5,
.admin-dashboard h6 {
    color: #111827 !important;
}

/* Force admin paragraphs and spans to be readable */
.admin-dashboard p,
.admin-dashboard span,
.admin-dashboard div {
    color: inherit !important;
}

/* Ensure admin buttons maintain their intended colors */
.admin-dashboard .bg-blue-600 {
    background-color: #2563eb !important;
    color: white !important;
}

.admin-dashboard .bg-green-600 {
    background-color: #16a34a !important;
    color: white !important;
}

.admin-dashboard .bg-purple-600 {
    background-color: #9333ea !important;
    color: white !important;
}

.admin-dashboard .bg-orange-600 {
    background-color: #ea580c !important;
    color: white !important;
}

.admin-dashboard .bg-gray-500 {
    background-color: #6b7280 !important;
    color: white !important;
}

/* Force admin form inputs to be readable */
.admin-dashboard input,
.admin-dashboard select,
.admin-dashboard textarea {
    background-color: white !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

/* Ensure admin loading states are visible */
.admin-dashboard .text-gray-500 {
    color: #6b7280 !important;
}

/* Force admin borders to be visible */
.admin-dashboard .border-gray-300 {
    border-color: #d1d5db !important;
}

.admin-dashboard .border-gray-200 {
    border-color: #e5e7eb !important;
}

/* Apply same theme isolation to all admin-related classes */
[class*="admin-"] {
    background-color: inherit !important;
    color: #1f2937 !important;
}

/* Specific fix for developer pages */
.developer-showcase {
    background: #f8fafc !important;
    color: #1f2937 !important;
}

.developer-showcase h1,
.developer-showcase h2,
.developer-showcase h3 {
    color: #111827 !important;
}

.developer-showcase .text-gray-900 {
    color: #111827 !important;
}

.developer-showcase .text-gray-600 {
    color: #4b5563 !important;
}

/* ============================================
   HEADER CONTAINER LAYOUT IMPROVEMENTS
   Better spacing and alignment for header elements
   Cache bust: v2025-09-16-header-layout-fix
   ============================================ */

/* Better spacing in header container */
.hero-back-container {
    padding: 1rem 0 !important;
    align-items: center !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .hero-back-container {
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 1rem !important;
        padding: 0.75rem 0 !important;
    }
}

/* Very small mobile screens */
@media (max-width: 480px) {
    .hero-back-container {
        padding: 0.5rem 0 !important;
    }
}

/* ============================================
   GRAPH ICON VISIBILITY FIX
   Make graph icons visible against purple backgrounds
   Cache bust: v2025-09-16-graph-icon-visibility
   ============================================ */

/* Override text-success for graph icons on purple backgrounds */
.hero-section .bi-graph-up.text-success,
.hero-section .bi-graph-up-arrow.text-success,
.progress-hero-compact .bi-graph-up.text-success,
.progress-hero-compact .bi-graph-up-arrow.text-success,
.bg-gradient-hero .bi-graph-up.text-success,
.bg-gradient-hero .bi-graph-up-arrow.text-success {
    color: #ffd700 !important; /* Bright gold - highly visible against purple */
}

/* Also apply to any graph icon with text-success in purple gradient contexts */
[class*="purple"] .bi-graph-up.text-success,
[class*="purple"] .bi-graph-up-arrow.text-success,
[style*="purple"] .bi-graph-up.text-success,
[style*="purple"] .bi-graph-up-arrow.text-success {
    color: #ffd700 !important; /* Bright gold - highly visible against purple */
}

/* ============================================
   FLAME ICON VISIBILITY FIX
   Make flame icons more visible against purple backgrounds while keeping them red
   Cache bust: v2025-09-16-flame-icon-visibility
   ============================================ */

/* Override text-danger and red flame icons on purple backgrounds */
.hero-section .bi-fire,
.hero-section .text-danger,
.progress-hero-compact .bi-fire,
.progress-hero-compact .text-danger,
.bg-gradient-hero .bi-fire,
.bg-gradient-hero .text-danger {
    color: #ff6b9d !important; /* Bright pink-red - high contrast against purple */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Add shadow for extra visibility */
}

/* Also target flame icons specifically in purple contexts */
[class*="purple"] .bi-fire,
[style*="purple"] .bi-fire,
[class*="purple"] .text-danger,
[style*="purple"] .text-danger {
    color: #ff6b9d !important; /* Bright pink-red - high contrast against purple */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important; /* Add shadow for extra visibility */
}

/* ============================================
   STUDENT LEVEL INDICATOR MOBILE OVERRIDES
   Cache bust: v2025-09-27-mobile-indicator-fix
   ============================================ */

/* Mobile responsive - make medium size tiny on mobile (25% of original) with horizontal layout */
@media (max-width: 768px) {
    /* For headers, hide the progress completely and show only circle */
    .hero-back-container .student-level-indicator.size-medium .progress-sub-box,
    .hero-back-container .student-level-indicator.size-medium .progress-container {
        display: none !important;
    }

    /* Make the header indicator just the circle */
    .hero-back-container .student-level-indicator.size-medium {
        max-width: 50px !important;
        min-width: 40px !important;
        width: auto !important;
        margin-left: auto !important; /* Right align */
        gap: 0.05rem !important;
    }

    .hero-back-container .student-level-indicator.size-medium .level-content {
        flex-direction: column !important; /* Stack vertically for just the circle */
        align-items: center !important;
        gap: 0.1rem !important;
    }

    /* General mobile fallback for other uses of the component */
    .student-level-indicator.size-medium {
        max-width: 90px !important;
        min-width: 80px !important;
        width: 90px !important;
        margin-left: auto !important; /* Right align */
        gap: 0.05rem !important;
    }

    .student-level-indicator.size-medium .level-content {
        flex-direction: row !important; /* Force horizontal layout */
        align-items: center !important;
        gap: 0.2rem !important;
    }

    .student-level-indicator.size-medium .level-circle-container {
        gap: 0.02rem !important;
        flex-shrink: 0 !important; /* Don't shrink the circle */
        min-width: 25px !important; /* Smaller fixed width for circle area */
    }

    /* Hide less important elements to save space */
    .student-level-indicator.size-medium .level-header-text,
    .student-level-indicator.size-medium .xp-remaining,
    .student-level-indicator.size-medium .xp-text {
        display: none !important;
    }

    .student-level-indicator.size-medium .level-text {
        font-size: 0.5rem !important;
        font-weight: 500 !important;
        margin: 0 !important;
    }

    /* Ultra-compact progress box for horizontal layout */
    .student-level-indicator.size-medium .progress-sub-box {
        min-width: 40px !important;
        max-width: 45px !important;
        padding: 0.02rem !important;
        flex: 1 !important;
    }

    .student-level-indicator.size-medium.with-background {
        padding: 0.08rem !important;
        border-radius: 3px !important;
    }

    .student-level-indicator.size-medium .progress-header {
        margin-bottom: 0.02rem !important;
    }

    .student-level-indicator.size-medium .progress-header small {
        font-size: 0.45rem !important;
    }

    .student-level-indicator.size-medium .progress-values {
        font-size: 0.4rem !important;
        margin: 0.02rem 0 !important;
    }

    /* Ultra-small progress bar for horizontal layout */
    .student-level-indicator.size-medium .progress-bar-container .level-progress {
        height: 8px !important;
        line-height: 8px !important;
        min-height: 8px !important;
        max-height: 8px !important;
    }

    .student-level-indicator.size-medium .progress-bar-container .level-progress .progress-bar {
        height: 8px !important;
        line-height: 8px !important;
        min-width: 8px !important;
        font-size: 0.4rem !important;
    }

    .student-level-indicator.size-medium .progress-percentage {
        font-size: 0.4rem !important;
    }

    /* Override circle size to be much smaller */
    .student-level-indicator.size-medium .level-circle-md {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.4rem !important;
    }
}

/* ============================================
   XP GAIN ANIMATION - BEST TIME BONUS STYLES
   ============================================ */

/* XP text breakdown styles */
.xp-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.xp-total {
    font-size: 2rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.xp-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.xp-base {
    color: #94a3b8;
}

.xp-bonus {
    color: #fbbf24;
    font-weight: 600;
}

.new-best-time {
    font-size: 1rem;
    font-weight: bold;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
    animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* ============================================
   CHART DESIGN TOKENS
   Okabe-Ito colorblind-safe palette for chart components
   Defined here because input.css tokens aren't in app.css
   Cache bust: v2026-02-04-chart-tokens
   ============================================ */

:root {
    --chart-bg: #ffffff;
    --chart-border: #e5e7eb;
    --chart-text-color: #1f2937;
    --chart-text-muted: #6b7280;
    --chart-axis-color: #374151;
    --chart-gridline-color: #e5e7eb;
    --chart-stroke: #374151;
    --chart-selection-color: #3b82f6;
    --chart-color-1: #0072B2;
    --chart-color-2: #E69F00;
    --chart-color-3: #009E73;
    --chart-color-4: #F0E442;
    --chart-color-5: #CC79A7;
    --chart-color-6: #56B4E9;
    /* Filter popover z-index — sits above user-profile-dropdown (1030),
       below drawer-backdrop (1040).
       Full stacking order: navbar=1000, user-profile-dropdown=1030,
       filter-popover=1035, drawer-backdrop=1040, drawer-panel=1045,
       feedback-modal-backdrop=1059, feedback-modal=1060, toast=1080, xp-animation=1100,
       feature-announcement-backdrop=1109, feature-announcement=1110.
       The announcement sits above toasts and XP animations because when it is showing it is the
       thing commanding attention — a toast is not a competing modal, so it renders visually behind. */
    --z-filter-popover: 1035;

    /* ANN-06 — feature announcement modal. Backdrop/panel follow the existing
       feedback-modal-backdrop/feedback-modal (1059/1060) pairing convention. */
    --z-feature-announcement-backdrop: 1109;
    --z-feature-announcement: 1110;
}

[data-theme="dark"] {
    --chart-bg: #1f2937;
    --chart-border: #374151;
    --chart-text-color: #f9fafb;
    --chart-text-muted: #9ca3af;
    --chart-axis-color: #d1d5db;
    --chart-gridline-color: #374151;
    --chart-stroke: #d1d5db;
    --chart-selection-color: #60a5fa;
    --chart-color-1: #60a5fa;
    --chart-color-2: #fbbf24;
    --chart-color-3: #34d399;
    --chart-color-4: #fde047;
    --chart-color-5: #f0abfc;
    --chart-color-6: #7dd3fc;
}

/* ============================================
   TOAST NOTIFICATION COMPONENT STYLES
   Replaces Tailwind utility classes that are not in app.css
   These styles power ToastContainer.razor and Toast.razor
   Cache bust: v2026-02-04-toast-styles
   ============================================ */

/* --- ToastContainer positioning --- */
.toast-container-fixed {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
}

.toast-container-fixed > * + * {
    margin-top: 0.5rem;
}

.toast-container-top-right {
    top: 1rem;
    right: 1rem;
}

.toast-container-top-left {
    top: 1rem;
    left: 1rem;
}

.toast-container-top-center {
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

.toast-container-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.toast-container-bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.toast-container-bottom-center {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
}

/* --- Individual toast card styles --- */
.toast-item {
    pointer-events: auto;
    position: relative;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: 1px solid;
    transition: all 0.3s ease-in-out;
    max-width: 24rem;
    width: 24rem;
}

/* Toast type backgrounds */
.toast-success {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.toast-error {
    background-color: #fef2f2;
    border-color: #fecaca;
}

.toast-warning {
    background-color: #fefce8;
    border-color: #fef08a;
}

.toast-achievement {
    background: linear-gradient(to right, #fefce8, #fff7ed);
    border-color: #fde047;
}

.toast-info {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

/* Toast layout */
.toast-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.toast-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.toast-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.toast-icon-success { color: #16a34a; }
.toast-icon-error { color: #dc2626; }
.toast-icon-warning { color: #ca8a04; }
.toast-icon-achievement { color: #eab308; }
.toast-icon-info { color: #2563eb; }

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.625;
}

.toast-message {
    font-size: 0.875rem;
    line-height: 1.625;
}

/* Toast text colors */
.toast-text-success { color: #166534; }
.toast-text-error { color: #991b1b; }
.toast-text-warning { color: #854d0e; }
.toast-text-achievement { color: #854d0e; }
.toast-text-info { color: #1e40af; }

.toast-msg-success { color: #15803d; }
.toast-msg-error { color: #b91c1c; }
.toast-msg-warning { color: #a16207; }
.toast-msg-achievement { color: #a16207; }
.toast-msg-info { color: #1d4ed8; }

/* Toast close button */
.toast-close {
    flex-shrink: 0;
    padding: 0.25rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s;
}

.toast-close:hover {
    background-color: #f3f4f6;
}

.toast-close:focus {
    outline: 2px solid #6b7280;
    outline-offset: 2px;
}

.toast-close svg {
    width: 1rem;
    height: 1rem;
}

.toast-close-success { color: #4ade80; }
.toast-close-error { color: #f87171; }
.toast-close-warning { color: #facc15; }
.toast-close-achievement { color: #facc15; }
.toast-close-info { color: #60a5fa; }

/* Toast action button */
.toast-action {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

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

.toast-action:focus {
    outline: 2px solid;
    outline-offset: 2px;
}

/* Toast progress bar */
.toast-progress-track {
    margin-top: 0.5rem;
    width: 100%;
    background-color: #e5e7eb;
    border-radius: 9999px;
    height: 0.25rem;
}

.toast-progress-bar {
    height: 0.25rem;
    border-radius: 9999px;
    transition: width 0.1s linear;
}

.toast-progress-success { background-color: #22c55e; }
.toast-progress-error { background-color: #ef4444; }
.toast-progress-warning { background-color: #eab308; }
.toast-progress-achievement { background: linear-gradient(to right, #eab308, #f97316); }
.toast-progress-info { background-color: #3b82f6; }

/* Mobile responsive toast */
@media (max-width: 480px) {
    .toast-item {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
    }
}

/* ============================================
   TOAST NOTIFICATION ANIMATIONS
   Entrance, exit, and achievement glow effects
   Cache bust: v2026-02-04-toast-animations
   ============================================ */

/* Toast entrance animation - slide in from right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Toast exit animation - slide out to right */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Achievement toast special glow effect */
@keyframes achievement-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
    }
}

/* Apply slide-in animation class */
.animate-slide-in-right {
    animation: slideInRight 0.3s ease-out forwards;
}

/* Apply slide-out animation class */
.animate-slide-out-right {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* Achievement toast glow */
.toast-achievement {
    animation: achievement-glow 2s ease-in-out infinite;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate-slide-in-right,
    .animate-slide-out-right,
    .toast-achievement {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   PRINT STYLESHEET
   Hides chrome, optimizes layout for paper
   ============================================ */

@media print {
    /* Hide non-content elements */
    .sidebar,
    .navbar,
    .top-bar,
    .skip-nav-link,
    #blazor-error-ui,
    #pwa-install-btn,
    #offline-indicator,
    #toast-container,
    #shooting-stars-container,
    .floating-numbers,
    .btn-magic,
    .start-learning-btn,
    .assessment-section,
    .demo-links-card,
    .encouragement-badges,
    .celebration-hover::after,
    footer {
        display: none !important;
    }

    /* Reset backgrounds and colors for ink */
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt;
    }

    .key-stage-selection-section,
    .hero-section,
    .index-hero {
        background: none !important;
        color: black !important;
        padding: 0 !important;
    }

    /* Ensure readable text */
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
    }

    /* Show link URLs */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: "";
    }

    /* Avoid page breaks inside cards */
    .key-stage-card,
    .adventure-level-card,
    .question-display-container {
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid #ccc !important;
        background: white !important;
    }

    /* Full width layout */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Remove animations */
    * {
        animation: none !important;
        transition: none !important;
    }

    /* Exercise images should print well */
    .exercise-image {
        max-width: 100% !important;
        max-height: none !important;
    }
}

/* ========================================
   USER PROFILE MENU
   Cache bust: v2026-02-05-user-menu
   ======================================== */

.user-profile-menu {
    position: relative;
}

.user-profile-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    flex-shrink: 0;
    min-width: 36px;
    min-height: 36px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.user-profile-trigger:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.user-profile-trigger:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.user-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: white;
    color: #1f2937;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid hsl(220 15% 90%);
    z-index: 1030;
    padding: 8px 0;
    animation: userMenuFadeIn 0.15s ease;
}

@keyframes userMenuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-profile-dropdown-header {
    padding: 12px 16px;
    color: #1f2937;
}

.user-profile-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 10px 16px;
    margin: 0;
    box-sizing: border-box;
    color: hsl(220 15% 25%);
    text-decoration: none;
    font-size: 0.9rem;
    font-family: inherit;
    transition: background 0.15s ease;
    min-height: 44px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.user-profile-dropdown .dropdown-item:hover {
    background: hsl(220 15% 96%);
}

.user-profile-dropdown .dropdown-item:focus-visible {
    outline: 2px solid hsl(220 70% 50%);
    outline-offset: -2px;
}

.user-profile-dropdown .dropdown-item.text-danger:hover {
    background: hsl(0 80% 96%);
}

/* Dark mode */
[data-theme="dark"] .user-profile-dropdown {
    background: hsl(220 15% 15%);
    border-color: hsl(220 15% 25%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .user-profile-dropdown .dropdown-item {
    color: hsl(220 15% 80%);
}

[data-theme="dark"] .user-profile-dropdown .dropdown-item:hover {
    background: hsl(220 15% 20%);
}

[data-theme="dark"] .user-profile-dropdown .dropdown-item.text-danger {
    color: hsl(0 80% 65%);
}

[data-theme="dark"] .user-profile-dropdown .dropdown-item.text-danger:hover {
    background: hsl(0 30% 20%);
}

[data-theme="dark"] .user-profile-dropdown-header {
    color: hsl(220 15% 85%);
}

[data-theme="dark"] .user-profile-dropdown-header small {
    color: hsl(220 15% 55%) !important;
}

/* Mobile adjustments - Cache bust: v2026-02-08-mobile-dropdown-fix */

/* Override overflow-x: hidden on .top-row that clips the dropdown on mobile.
   Per CSS spec, overflow-x: hidden forces overflow-y to auto, creating a clip
   context that hides the absolutely positioned dropdown extending below .top-row.
   This override ensures the dropdown is visible on all mobile widths. */
@media (max-width: 768px) {
    main .top-row {
        overflow: visible !important;
    }
}

@media (max-width: 480px) {
    .user-profile-trigger {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        font-size: 0.95rem;
    }

    .user-profile-dropdown {
        right: -8px;
        min-width: 200px;
    }
}

@media (max-width: 375px) {
    .user-profile-trigger {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        font-size: 0.85rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .user-profile-trigger {
        transition: none;
    }

    .user-profile-trigger:hover {
        transform: none;
    }

    .user-profile-dropdown {
        animation: none;
    }
}

/* ============================================
   LANDING PAGE STYLES (.lp- prefix)
   Phase 48: Infrastructure skeleton
   Phase 49: Hero section + sticky navigation
   Phases 50-52: Content, pricing, animations, dark mode
   ============================================ */

/* Light mode base */
.lp-light-mode {
    color-scheme: light;
}

/* Dark mode support */
[data-theme="dark"] .lp-light-mode {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 8%;
    --card-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    color-scheme: dark;
}

/* Container — Fixed light mode.
   All marketing/landing pages are intentionally light-only (#ffffff background).
   Dark mode theming applies only to the app shell. Deliberate brand decision:
   white backgrounds convey trust and readability for parent audiences. */
.lp-container {
    min-height: 100vh;
    background: #ffffff;
    color: #1a1a2e;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    flex-direction: column;
    scroll-behavior: smooth;
}

/* Reset app chrome styles within landing page scope */
.lp-container main {
    margin-left: 0;
    min-height: unset;
    transition: none;
}

.lp-container .top-row {
    display: none;
}

/* ---- Sticky Navigation ---- */
.lp-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.lp-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.lp-nav-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #7c3aed;
    text-decoration: none;
}

.lp-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lp-nav-close:hover {
    background-color: hsl(var(--muted) / 0.5);
    color: hsl(var(--foreground));
}

.lp-nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.lp-nav-link {
    color: #4b5563;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.lp-nav-link:hover {
    color: #7c3aed;
}

.lp-nav-cta {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #ffffff;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.lp-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* ---- Hamburger Menu ---- */
.lp-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
}

.lp-hamburger-line {
    width: 24px;
    height: 3px;
    background: #1a1a2e;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ---- Main Content ---- */
.lp-main {
    flex: 1;
}

/* ---- Hero Section (mobile-first) ---- */
.lp-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.5rem;
    gap: 2rem;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #ec4899 100%);
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}

.lp-hero-content {
    max-width: 600px;
}

.lp-hero-tagline {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(var(--student-accent));
    background: hsla(var(--student-accent), 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}

.lp-hero-headline {
    font-family: 'Nunito', sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #ffffff;
}

.lp-hero-subheadline {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    color: #ffffff;
}

.lp-hero-visual {
    max-width: 480px;
    width: 100%;
}

.lp-hero-image {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* ---- Educational App Store certification badge (Key Stage hero sections) ----
   Mobile-first: static + centred below the hero. Desktop (>=768px): pinned to
   the bottom-right corner of the hero section. */
.lp-home-hero,
.lp-ks1-hero,
.lp-ks2-hero,
.lp-ks3-hero,
.lp-gcse-hero {
    position: relative;
}

.lp-hero-eas-badge {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    line-height: 0;
}

.lp-hero-eas-badge img {
    height: 84px;
    width: auto;
}

@media (min-width: 768px) {
    .lp-hero-eas-badge {
        position: absolute;
        right: 1.5rem;
        bottom: 1.5rem;
        margin-top: 0;
        z-index: 3;
    }
}

/* ---- CTA Buttons ---- */
.lp-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.lp-btn {
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
}

.lp-btn:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.lp-btn-primary {
    background: #ffffff;
    color: #7c3aed;
}

.lp-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.lp-btn-secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.lp-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Content Sections ---- */
.lp-section {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    scroll-margin-top: 4.5rem;
}

/* ---- Footer ---- */
.lp-footer {
    padding: 3rem 2rem 2rem;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.lp-footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.lp-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.lp-footer-heading {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a2e;
}

.lp-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lp-footer-links li {
    margin-bottom: 0.75rem;
}

.lp-footer-links a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.lp-footer-links a:hover {
    color: #7c3aed;
}

.lp-footer-links a:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
    border-radius: 2px;
}

.lp-footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.lp-footer-copyright {
    font-size: 0.875rem;
    color: #9ca3af;
    margin: 0;
}

/* ---- Responsive: Mobile (max-width: 768px) ---- */
@media (max-width: 768px) {
    .lp-hamburger {
        display: flex;
    }

    .lp-nav-container {
        padding: 0.75rem 1rem;
    }

    .lp-nav-links {
        display: none;
    }

    .lp-nav-links.is-open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        padding: 1rem 2rem;
        gap: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .lp-nav-links.is-open .lp-nav-cta {
        text-align: center;
    }

    .lp-section {
        padding: 2rem 1rem;
    }

    .lp-section-title {
        font-size: 1.625rem;
    }

    .lp-section-subtitle {
        margin-bottom: 2rem;
    }

    .lp-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .lp-how-steps {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .lp-step-connector {
        transform: rotate(90deg);
        margin-top: 0;
    }

    .lp-proof-grid {
        gap: 1rem;
    }

    .lp-pricing-card-featured {
        transform: none;
    }

    .lp-pricing-card-featured:hover {
        transform: translateY(-4px);
    }

    .lp-final-cta-section {
        padding: 3rem 1.5rem;
    }

    .lp-final-cta-headline {
        font-size: 1.625rem;
    }
}

/* ---- Responsive: Tablet (min-width: 768px) ---- */
@media (min-width: 768px) {
    .lp-hero {
        flex-direction: row;
        text-align: left;
        padding: 5rem 3rem;
        gap: 3rem;
        justify-content: center;
    }

    .lp-hero-content {
        flex: 1;
        max-width: 500px;
    }

    .lp-hero-visual {
        flex: 1;
        max-width: 500px;
    }

    .lp-hero-headline {
        font-size: 3rem;
    }

    .lp-cta-buttons {
        justify-content: flex-start;
    }

    .lp-who-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lp-features-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lp-proof-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lp-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-pricing-card-featured {
        transform: scale(1.05);
    }

    .lp-pricing-card-featured:hover {
        transform: scale(1.05) translateY(-4px);
    }

    .lp-final-cta-headline {
        font-size: 2.5rem;
    }

    .lp-footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* ---- Responsive: Desktop (min-width: 1200px) ---- */
@media (min-width: 1200px) {
    .lp-hero {
        padding: 6rem 4rem;
    }

    .lp-hero-headline {
        font-size: 3.5rem;
    }

    .lp-hero-subheadline {
        font-size: 1.25rem;
    }

    .lp-section-title {
        font-size: 2.25rem;
    }
}

/* ---- Section Shared Styles ---- */
.lp-section-title {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
    text-align: center;
    margin-bottom: 0.5rem;
}

.lp-section-subtitle {
    font-size: 1.125rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 3rem;
}

/* ---- Who It's For Section ---- */
.lp-who-section {
    background: #ffffff;
}

.lp-who-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-who-card {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.lp-who-card-student {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(236, 72, 153, 0.08) 100%);
    border: 2px solid rgba(124, 58, 237, 0.15);
}

.lp-who-card-parent {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%);
    border: 2px solid rgba(59, 130, 246, 0.15);
}

.lp-who-icon {
    margin-bottom: 1rem;
}

.lp-who-card-student .lp-who-icon {
    color: #7c3aed;
}

.lp-who-card-parent .lp-who-icon {
    color: #3b82f6;
}

.lp-who-card-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #1a1a2e;
}

.lp-who-card-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.lp-who-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.lp-who-list li {
    padding: 0.5rem 0;
    padding-left: 1.75rem;
    position: relative;
    color: #374151;
    font-size: 1rem;
    line-height: 1.5;
}

.lp-who-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
}

.lp-who-card-student .lp-who-list li::before {
    color: #7c3aed;
}

.lp-who-card-parent .lp-who-list li::before {
    color: #3b82f6;
}

/* ---- Features Section ---- */
.lp-features-section {
    background: #f9fafb;
}

.lp-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-feature-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}

.lp-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lp-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lp-feature-icon-purple {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.lp-feature-icon-pink {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.lp-feature-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.lp-feature-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.lp-feature-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.lp-feature-desc {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
}

/* ---- How It Works Section ---- */
.lp-how-section {
    background: #ffffff;
}

.lp-how-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-step {
    flex: 1;
    text-align: center;
    max-width: 260px;
}

.lp-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.lp-step-icon {
    color: #7c3aed;
    margin-bottom: 0.75rem;
}

.lp-step-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.lp-step-desc {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
}

.lp-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    margin-top: 2.5rem;
    flex-shrink: 0;
}

/* ---- Social Proof Section ---- */
.lp-proof-section {
    background: #f9fafb;
}

.lp-proof-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-proof-card {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.lp-proof-icon {
    color: #7c3aed;
    margin-bottom: 1rem;
}

.lp-proof-stat {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    user-select: none;
}

.lp-proof-desc {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.lp-proof-cite {
    font-size: 0.8125rem;
    font-style: normal;
}

.lp-proof-cite a {
    color: #7c3aed;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-proof-cite a:hover {
    color: #6d28d9;
}

.lp-proof-cite a:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.lp-proof-disclaimer {
    max-width: 720px;
    margin: 0 auto var(--space-6);
    text-align: center;
    font-size: 0.85rem;
    color: hsl(var(--muted-foreground));
    font-style: italic;
    padding: 0 var(--space-4);
}

[data-theme="dark"] .lp-proof-disclaimer {
    color: hsl(var(--muted-foreground));
}

/* ---- Testimonials Section (Trustpilot static quotes) ---- */
.lp-testimonials-section {
    background: hsl(var(--muted) / 0.3);
}

[data-theme="dark"] .lp-testimonials-section {
    background: hsl(var(--muted) / 0.1);
}

.lp-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1100px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .lp-testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.lp-testimonial-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
}

.lp-testimonial-stars {
    color: hsl(45 100% 55%);
    font-size: 1.15rem;
    letter-spacing: 2px;
    line-height: 1;
}

.lp-testimonial-quote {
    font-size: 1rem;
    line-height: 1.55;
    color: hsl(var(--foreground));
    margin: 0;
    font-style: italic;
}

.lp-testimonial-author {
    font-weight: 700;
    color: hsl(var(--foreground));
    font-size: 0.95rem;
}

.lp-testimonials-attribution {
    text-align: center;
    margin-top: var(--space-6);
    font-size: 0.9rem;
}

.lp-testimonials-attribution a {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 600;
}

.lp-testimonials-attribution a:hover {
    text-decoration: underline;
}

/* ---- Pricing Section ---- */
.lp-pricing-section {
    background: #f9fafb;
}

.lp-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-pricing-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.lp-pricing-card-featured {
    border-color: #7c3aed;
    border-width: 3px;
}

.lp-pricing-card-featured:hover {
    transform: translateY(-4px) scale(1.05);
}

.lp-pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #ffffff;
    padding: 0.25rem 1.25rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
}

.lp-pricing-tier {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a1a2e;
}

.lp-pricing-price {
    margin-bottom: 1.5rem;
}

.lp-pricing-amount {
    font-family: 'Nunito', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #1a1a2e;
}

.lp-pricing-period {
    font-size: 1rem;
    color: #6b7280;
}

.lp-pricing-subtext {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

.lp-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    text-align: left;
}

.lp-pricing-features li {
    padding: 0.5rem 0;
    padding-left: 1.75rem;
    position: relative;
    color: #4b5563;
    line-height: 1.5;
}

.lp-pricing-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}

.lp-pricing-btn {
    display: block;
    text-align: center;
    width: 100%;
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

.lp-pricing-card-featured .lp-pricing-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #ffffff;
}

.lp-pricing-card-featured .lp-pricing-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.lp-pricing-card-premium .lp-pricing-btn {
    background: transparent;
    color: #7c3aed;
    border: 2px solid #7c3aed;
}

.lp-pricing-card-premium .lp-pricing-btn:hover {
    background: rgba(124, 58, 237, 0.05);
    transform: translateY(-2px);
}

.lp-pricing-discount-callout {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, #ede9fe 0%, #fce7f3 100%);
    border-radius: 12px;
    text-align: center;
}

.lp-pricing-discount-icon {
    color: #7c3aed;
    margin-bottom: 0.5rem;
}

.lp-pricing-discount-callout h4 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.lp-pricing-discount-callout p {
    font-size: 1rem;
    color: #4b5563;
    margin: 0;
}

/* ---- Final CTA Section ---- */
.lp-final-cta-section {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #ec4899 100%);
    color: #ffffff;
    text-align: center;
    padding: 4rem 2rem;
}

.lp-final-cta-headline {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #ffffff;
}

.lp-final-cta-subtext {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

.lp-btn-large {
    font-size: 1.25rem;
    padding: 1rem 2.5rem;
}

/* ============================================
   LANDING PAGE DARK MODE
   ============================================ */

/* Container */
[data-theme="dark"] .lp-container {
    background: #0a0a0f;
    color: #e5e7eb;
}

/* Navigation */
[data-theme="dark"] .lp-nav {
    background: #1a1a2e;
    border-bottom-color: #2d2d44;
}

[data-theme="dark"] .lp-nav-link {
    color: #9ca3af;
}

[data-theme="dark"] .lp-nav-link:hover {
    color: #a78bfa;
}

[data-theme="dark"] .lp-hamburger-line {
    background: #e5e7eb;
}

[data-theme="dark"] .lp-nav-links.is-open {
    background: #1a1a2e;
    border-bottom-color: #2d2d44;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Section titles and subtitles */
[data-theme="dark"] .lp-section-title {
    color: #f9fafb;
}

[data-theme="dark"] .lp-section-subtitle {
    color: #9ca3af;
}

/* Who It's For cards */
[data-theme="dark"] .lp-who-section {
    background: #0a0a0f;
}

[data-theme="dark"] .lp-who-card-student {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
    border-color: rgba(124, 58, 237, 0.3);
}

[data-theme="dark"] .lp-who-card-parent {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .lp-who-card-title {
    color: #f9fafb;
}

[data-theme="dark"] .lp-who-card-subtitle {
    color: #9ca3af;
}

[data-theme="dark"] .lp-who-list li {
    color: #d1d5db;
}

/* Features section */
[data-theme="dark"] .lp-features-section {
    background: #0f0f18;
}

[data-theme="dark"] .lp-feature-card {
    background: #1e1e30;
    border-color: #2d2d44;
}

[data-theme="dark"] .lp-feature-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lp-feature-title {
    color: #f9fafb;
}

[data-theme="dark"] .lp-feature-desc {
    color: #9ca3af;
}

/* How It Works section */
[data-theme="dark"] .lp-how-section {
    background: #0a0a0f;
}

[data-theme="dark"] .lp-step-title {
    color: #f9fafb;
}

[data-theme="dark"] .lp-step-desc {
    color: #9ca3af;
}

[data-theme="dark"] .lp-step-connector {
    color: #4b5563;
}

/* Social Proof section */
[data-theme="dark"] .lp-proof-section {
    background: #0f0f18;
}

[data-theme="dark"] .lp-proof-card {
    background: #1e1e30;
    border-color: #2d2d44;
}

[data-theme="dark"] .lp-proof-desc {
    color: #9ca3af;
}

[data-theme="dark"] .lp-proof-cite a {
    color: #a78bfa;
}

[data-theme="dark"] .lp-proof-cite a:hover {
    color: #c4b5fd;
}

/* Pricing section */
[data-theme="dark"] .lp-pricing-section {
    background: #0f0f18;
}

[data-theme="dark"] .lp-pricing-card {
    background: #1e1e30;
    border-color: #2d2d44;
}

[data-theme="dark"] .lp-pricing-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lp-pricing-card-featured {
    border-color: #a78bfa;
}

[data-theme="dark"] .lp-pricing-tier {
    color: #f9fafb;
}

[data-theme="dark"] .lp-pricing-amount {
    color: #f9fafb;
}

[data-theme="dark"] .lp-pricing-period {
    color: #9ca3af;
}

[data-theme="dark"] .lp-pricing-subtext {
    color: #9ca3af;
}

[data-theme="dark"] .lp-pricing-features li {
    color: #d1d5db;
}

[data-theme="dark"] .lp-pricing-card-premium .lp-pricing-btn {
    color: #a78bfa;
    border-color: #a78bfa;
}

[data-theme="dark"] .lp-pricing-card-premium .lp-pricing-btn:hover {
    background: rgba(167, 139, 250, 0.1);
}

[data-theme="dark"] .lp-pricing-discount-callout {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
}

[data-theme="dark"] .lp-pricing-discount-callout h4 {
    color: #f9fafb;
}

[data-theme="dark"] .lp-pricing-discount-callout p {
    color: #d1d5db;
}

/* Footer */
[data-theme="dark"] .lp-footer {
    background: #1a1a2e;
    border-top-color: #2d2d44;
}

[data-theme="dark"] .lp-footer-heading {
    color: #f9fafb;
}

[data-theme="dark"] .lp-footer-links a {
    color: #9ca3af;
}

[data-theme="dark"] .lp-footer-links a:hover {
    color: #a78bfa;
}

[data-theme="dark"] .lp-footer-bottom {
    border-top-color: #2d2d44;
}

[data-theme="dark"] .lp-footer-copyright {
    color: #6b7280;
}

/* Hero and Final CTA gradients work in both modes - no override needed */
/* Buttons with gradient backgrounds (nav CTA, pricing featured btn, pricing badge) - no override needed */

/* ============================================
   LANDING PAGE SCROLL ANIMATIONS
   ============================================ */

.lp-reveal-hidden {
    opacity: 0;
    transform: translateY(30px);
}

.lp-reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .lp-reveal-hidden {
        opacity: 1;
        transform: none;
    }

    .lp-reveal-visible {
        transition: none;
    }
}

/* ============================================
   LANDING PAGE HOVER & MICRO-INTERACTIONS
   ============================================ */

/* Who cards hover */
.lp-who-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-who-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .lp-who-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Proof cards hover */
.lp-proof-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lp-proof-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .lp-proof-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* How-it-works steps hover */
.lp-step {
    transition: transform 0.2s ease;
}

.lp-step:hover {
    transform: translateY(-4px);
}

/* CTA button pulse on hover (hero + final CTA) */
.lp-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

/* Final CTA button glow */
.lp-final-cta-section .lp-btn-primary:hover {
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Focus-visible states for new interactive elements */
.lp-who-card:focus-visible,
.lp-proof-card:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ============================================
   LANDING PAGE RESPONSIVE ADDITIONS
   ============================================ */

/* Tablet landscape (1024px) */
@media (min-width: 1024px) and (max-width: 1199px) {
    .lp-hero {
        padding: 5rem 2.5rem;
    }

    .lp-hero-headline {
        font-size: 2.75rem;
    }

    .lp-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small mobile (375px and below) */
@media (max-width: 375px) {
    .lp-nav-container {
        padding: 0.75rem 0.75rem;
    }

    .lp-hero {
        padding: 2rem 1rem;
    }

    .lp-hero-headline {
        font-size: 1.75rem;
    }

    .lp-btn {
        padding: 0.625rem 1.5rem;
        font-size: 0.9375rem;
    }

    .lp-section {
        padding: 2rem 0.75rem;
    }

    .lp-pricing-card {
        padding: 1.5rem;
    }

    .lp-final-cta-section {
        padding: 2.5rem 1rem;
    }
}

/* ============================================
   ABOUT PAGE STYLES (.lp-about-*)
   Uses the same design language as the landing
   page: Nunito headings, purple/pink palette,
   consistent spacing & dark-mode support.
   ============================================ */

/* ---- About Hero ---- */
.lp-about-hero {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #ec4899 100%);
    color: #ffffff;
    text-align: center;
    padding: 4rem 2rem;
    border-radius: 1rem;
}

.lp-about-hero-headline {
    font-family: 'Nunito', sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 1rem;
    color: #ffffff;
}

.lp-about-hero-subtext {
    font-size: 1.125rem;
    line-height: 1.6;
    opacity: 0.95;
    max-width: 560px;
    margin: 0 auto;
    color: #ffffff;
}

/* ---- About Hero Socials ---- */
.lp-about-hero-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.lp-about-social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.lp-about-social svg {
    flex-shrink: 0;
}

.lp-about-social:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.lp-about-social-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
}

.lp-about-social-youtube:hover {
    background: #ff0000;
    border-color: transparent;
}

.lp-about-social:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .lp-about-social {
        transition: none;
    }

    .lp-about-social:hover {
        transform: none;
    }
}

/* ---- About Section ---- */
.lp-about-section {
    padding: 3rem 0;
    max-width: 800px;
    margin: 0 auto;
}

/* ---- Founder Card ---- */
.lp-about-founder-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.lp-about-founder-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}

.lp-about-founder-photo {
    width: 160px;
    aspect-ratio: 294 / 400;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 3px solid rgba(124, 58, 237, 0.15);
    flex-shrink: 0;
}

.lp-about-founder-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-about-founder-name {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
}

.lp-about-founder-role {
    font-size: 1rem;
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.lp-about-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #0A66C2;
    color: #ffffff;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s;
}

.lp-about-linkedin:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
    color: #ffffff;
}

.lp-about-linkedin:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.lp-about-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    margin: 2rem 0;
}

/* ---- Story Text ---- */
.lp-about-story p {
    font-size: 1.0625rem;
    color: #4b5563;
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.lp-about-story p:last-child {
    margin-bottom: 0;
}

/* ---- Mission Section ---- */
.lp-about-mission-section {
    text-align: center;
    background: #f9fafb;
    border-radius: 1rem;
    padding: 3rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.lp-about-mission-text {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.75;
    max-width: 650px;
    margin: 1rem auto 0;
}

/* ---- What Makes Us Different ---- */
.lp-about-diff-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.lp-about-diff-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.lp-about-diff-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.lp-about-diff-icon {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lp-about-diff-icon-purple {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.lp-about-diff-icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.lp-about-diff-icon-pink {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.lp-about-diff-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.lp-about-diff-desc {
    font-size: 0.9375rem;
    color: #6b7280;
    line-height: 1.6;
}

/* ---- About CTA ---- */
.lp-about-cta {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #ec4899 100%);
    color: #ffffff;
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-top: 0;
}

.lp-about-cta-headline {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.lp-about-cta-subtext {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.lp-about-cta-buttons {
    display: flex;
    justify-content: center;
}

.lp-about-cta .lp-btn-primary:hover {
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* ============================================
   ABOUT PAGE DARK MODE
   ============================================ */

[data-theme="dark"] .lp-about-hero {
    background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 50%, #be185d 100%);
}

[data-theme="dark"] .lp-about-founder-card {
    background: #1e1e30;
    border-color: #2d2d44;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .lp-about-founder-name {
    color: #f9fafb;
}

[data-theme="dark"] .lp-about-founder-role {
    color: #a78bfa;
}

[data-theme="dark"] .lp-about-founder-photo {
    border-color: rgba(167, 139, 250, 0.25);
}

[data-theme="dark"] .lp-about-divider {
    background: linear-gradient(to right, transparent, #2d2d44, transparent);
}

[data-theme="dark"] .lp-about-story p {
    color: #d1d5db;
}

[data-theme="dark"] .lp-about-mission-section {
    background: #1a1a2e;
}

[data-theme="dark"] .lp-about-mission-text {
    color: #d1d5db;
}

[data-theme="dark"] .lp-about-diff-card {
    background: #1e1e30;
    border-color: #2d2d44;
}

[data-theme="dark"] .lp-about-diff-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lp-about-diff-title {
    color: #f9fafb;
}

[data-theme="dark"] .lp-about-diff-desc {
    color: #9ca3af;
}

[data-theme="dark"] .lp-about-cta {
    background: linear-gradient(135deg, #5b21b6 0%, #4c1d95 50%, #be185d 100%);
}

/* ============================================
   ABOUT PAGE RESPONSIVE
   ============================================ */

@media (min-width: 640px) {
    .lp-about-founder-header {
        flex-direction: row;
        text-align: left;
    }

    .lp-about-founder-meta {
        align-items: flex-start;
    }
}

@media (min-width: 768px) {
    .lp-about-diff-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .lp-about-hero {
        padding: 3rem 1.5rem;
        border-radius: 0;
    }

    .lp-about-hero-headline {
        font-size: 1.75rem;
    }

    .lp-about-section {
        padding: 2rem 1rem;
    }

    .lp-about-founder-card {
        padding: 1.5rem;
    }

    .lp-about-mission-section {
        border-radius: 0;
        padding: 2rem 1.5rem;
    }

    .lp-about-cta {
        padding: 2.5rem 1.5rem;
        border-radius: 0;
    }

    .lp-about-cta-headline {
        font-size: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .lp-about-hero-headline {
        font-size: 3rem;
    }

    .lp-about-hero-subtext {
        font-size: 1.25rem;
    }
}

@media (max-width: 375px) {
    .lp-about-hero {
        padding: 2rem 1rem;
    }

    .lp-about-hero-headline {
        font-size: 1.5rem;
    }

    .lp-about-founder-card {
        padding: 1.25rem;
    }

    .lp-about-founder-photo {
        width: 120px;
    }

    .lp-about-cta {
        padding: 2rem 1rem;
    }
}

/* ============================================================
   FEEDBACK MODAL
   ============================================================ */

/* Backdrop */
.feedback-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1059;
}

/* Modal container */
.feedback-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1060;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    animation: feedbackModalIn 0.2s ease-out;
}

@keyframes feedbackModalIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feedback-modal {
        animation: none;
    }
}

/* Mobile: full width with margins */
@media (max-width: 576px) {
    .feedback-modal {
        max-width: calc(100% - 32px);
        top: 80px;
        transform: translateX(-50%);
        max-height: calc(100vh - 100px);
    }

    @keyframes feedbackModalIn {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}

/* Header */
.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.feedback-modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
}

.feedback-modal-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #6b7280;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    transition: background-color 0.15s, color 0.15s;
}

.feedback-modal-close:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

.feedback-modal-close:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

/* Body */
.feedback-modal-body {
    padding: 20px;
}

/* Form fields */
.feedback-modal-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.feedback-modal-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #1f2937;
    background-color: #ffffff;
    appearance: auto;
    min-height: 44px;
    transition: border-color 0.15s;
}

.feedback-modal-select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.feedback-modal-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #1f2937;
    background-color: #ffffff;
    resize: none;
    min-height: 80px;
    max-height: 200px;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.feedback-modal-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Character counter */
.feedback-char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 4px;
}

.feedback-char-warning {
    color: #d97706;
}

.feedback-char-danger {
    color: #dc2626;
}

/* Sentiment selector */
.feedback-sentiment-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.feedback-sentiment-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    min-width: 80px;
    min-height: 64px;
    transition: border-color 0.15s, background-color 0.15s;
}

.feedback-sentiment-btn:hover {
    border-color: #c4b5fd;
    background-color: #faf5ff;
}

.feedback-sentiment-btn:focus-visible {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}

.feedback-sentiment-btn.active {
    border-color: #8b5cf6;
    background-color: #f5f3ff;
}

.feedback-sentiment-btn .emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.feedback-sentiment-btn .label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.feedback-sentiment-btn.active .label {
    color: #7c3aed;
}

/* Inline error alert */
.feedback-error-inline {
    background: hsl(0 80% 96%);
    border-left: 3px solid #dc2626;
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 0.8125rem;
    color: #991b1b;
    margin-top: 8px;
}

/* Rate limit message */
.feedback-rate-limit {
    text-align: center;
    padding: 12px;
    color: #6b7280;
    font-size: 0.875rem;
}

/* Footer */
.feedback-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Form group spacing */
.feedback-form-group {
    margin-bottom: 16px;
}

.feedback-form-group:last-child {
    margin-bottom: 0;
}

/* ============================================================
   FEEDBACK MODAL — DARK MODE
   ============================================================ */

[data-theme="dark"] .feedback-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .feedback-modal {
    background: hsl(220 15% 15%);
    border: 1px solid hsl(220 15% 25%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .feedback-modal-header {
    border-bottom-color: hsl(220 15% 25%);
}

[data-theme="dark"] .feedback-modal-header h2 {
    color: hsl(220 15% 85%);
}

[data-theme="dark"] .feedback-modal-close {
    color: hsl(220 15% 60%);
}

[data-theme="dark"] .feedback-modal-close:hover {
    background-color: hsl(220 15% 20%);
    color: hsl(220 15% 85%);
}

[data-theme="dark"] .feedback-modal-label {
    color: hsl(220 15% 75%);
}

[data-theme="dark"] .feedback-modal-select,
[data-theme="dark"] .feedback-modal-textarea {
    background-color: hsl(220 15% 12%);
    border-color: hsl(220 15% 25%);
    color: hsl(220 15% 85%);
}

[data-theme="dark"] .feedback-modal-select:focus,
[data-theme="dark"] .feedback-modal-textarea:focus {
    border-color: #a78bfa;
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .feedback-char-counter {
    color: hsl(220 15% 50%);
}

[data-theme="dark"] .feedback-char-warning {
    color: #fbbf24;
}

[data-theme="dark"] .feedback-char-danger {
    color: #f87171;
}

[data-theme="dark"] .feedback-sentiment-btn {
    border-color: hsl(220 15% 25%);
}

[data-theme="dark"] .feedback-sentiment-btn:hover {
    border-color: #a78bfa;
    background-color: hsl(270 30% 18%);
}

[data-theme="dark"] .feedback-sentiment-btn.active {
    border-color: #a78bfa;
    background-color: hsl(270 30% 20%);
}

[data-theme="dark"] .feedback-sentiment-btn .label {
    color: hsl(220 15% 55%);
}

[data-theme="dark"] .feedback-sentiment-btn.active .label {
    color: #c4b5fd;
}

[data-theme="dark"] .feedback-error-inline {
    background: hsl(0 30% 18%);
    border-left-color: hsl(0 80% 65%);
    color: #fca5a5;
}

[data-theme="dark"] .feedback-rate-limit {
    color: hsl(220 15% 55%);
}

[data-theme="dark"] .feedback-modal-footer {
    border-top-color: hsl(220 15% 25%);
}

/* ============================================================
   PAYWALL PAGE — Phase 58-01
   ============================================================ */

.paywall-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}

.paywall-banner {
    background-color: hsl(var(--primary) / 0.1);
    border: 2px solid hsl(var(--primary));
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
}

.paywall-pricing-card {
    background-color: hsl(var(--card));
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.paywall-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.paywall-pricing-card.featured {
    border-color: hsl(var(--warning));
    box-shadow: 0 4px 16px hsl(var(--warning) / 0.2);
}

.paywall-pricing-card .price {
    font-size: 2rem;
    font-weight: 700;
    color: hsl(var(--primary));
    line-height: 1.2;
}

.countdown-timer {
    font-weight: 600;
    font-size: 1.25rem;
    color: hsl(var(--foreground));
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   SIDEBAR COMPACT — reduce vertical padding to prevent scrollbar
   ============================================================ */

.nav-scrollable .nav-link {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
}

/* ============================================================
   EXERCISE COUNTER — Phase 58-02 (used in sidebar)
   ============================================================ */

.exercise-counter {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 0.75rem;
    margin-bottom: 1rem;
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.exercise-counter .fw-bold {
    color: #fff;
    font-size: 0.95rem;
}

.exercise-counter-label {
    color: rgba(255, 255, 255, 0.8);
}

.exercise-counter .progress {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    height: 6px;
}

.exercise-counter .progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, hsl(270 60% 80%) 100%);
    transition: width 0.3s ease;
}

/* ============================================================
   GO PREMIUM BADGE — Phase 58-02 (used in sidebar and header)
   ============================================================ */

.go-premium-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.375rem 1rem;
    background: linear-gradient(135deg, hsl(var(--warning)) 0%, hsl(45 90% 55%) 100%);
    color: white;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px hsl(var(--warning) / 0.3);
    cursor: pointer;
}

.go-premium-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px hsl(var(--warning) / 0.4);
}

.go-premium-header {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, hsl(var(--warning)) 0%, hsl(45 90% 55%) 100%);
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 9999px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px hsl(var(--warning) / 0.3);
}

.go-premium-header:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px hsl(var(--warning) / 0.4);
    color: white;
    text-decoration: none;
}

/* ============================================================
   PAYWALL PAGE — DARK MODE
   ============================================================ */

[data-theme="dark"] .paywall-container {
    background-color: hsl(220 15% 10%);
    color: hsl(220 15% 85%);
}

[data-theme="dark"] .paywall-banner {
    background-color: hsl(var(--primary) / 0.2);
    border-color: hsl(var(--primary));
}

[data-theme="dark"] .paywall-pricing-card {
    background-color: hsl(220 15% 15%);
    border-color: hsl(220 15% 25%);
}

[data-theme="dark"] .paywall-pricing-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .paywall-pricing-card.featured {
    border-color: hsl(var(--warning));
    box-shadow: 0 4px 16px hsl(var(--warning) / 0.3);
}

[data-theme="dark"] .paywall-pricing-card .price {
    color: hsl(var(--primary));
}

[data-theme="dark"] .countdown-timer {
    color: hsl(220 15% 85%);
}

[data-theme="dark"] .exercise-counter {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .exercise-counter .progress {
    background-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .go-premium-badge {
    background: linear-gradient(135deg, hsl(45 90% 50%) 0%, hsl(45 90% 45%) 100%);
}

[data-theme="dark"] .go-premium-header {
    background: linear-gradient(135deg, hsl(45 90% 50%) 0%, hsl(45 90% 45%) 100%);
    color: white;
}

/* ============================================
   ABOUT PAGE
   ============================================ */

/* ============================================
   AUTH PAGE STYLES (.auth- prefix)
   Phase 62: Login & Register Visual Redesign
   Matches landing page quality: gradients, spacing, animations, dark mode
   ============================================ */

/* ---- Animations ---- */

@keyframes auth-fade-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes auth-slide-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes auth-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(124, 58, 237, 0.15);
    }
    50% {
        box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
    }
}

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

/* ---- Page Background ---- */

.auth-page-bg {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    background: #f5f5f5;
    overflow: hidden;
}

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

.auth-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    animation: auth-fade-in 0.5s ease-out;
}

/* ---- Enhanced AuthHeader ---- */

.auth-header {
    text-align: center;
}

.auth-header-enhanced {
    text-align: center;
    animation: auth-slide-up 0.6s ease-out;
}

.auth-header-enhanced h1 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.auth-header-enhanced p {
    color: #6b7280;
    font-size: 1rem;
    margin: 0;
}

.auth-header-enhanced .text-foreground {
    color: #1f2937;
}

.auth-header-enhanced .text-gray-600 {
    color: #6b7280;
}

/* ---- Enhanced AuthCard ---- */

.auth-card-enhanced {
    background: #ffffff;
    border-radius: 1.5rem;
    padding: 2rem 2rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
                0 1px 4px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: auth-slide-up 0.7s ease-out;
    display: flex;
    flex-direction: column;
    /* Override default AuthCard pink gradient */
    background: #ffffff !important;
}

.auth-card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1),
                0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ---- User Type Buttons ---- */

.auth-user-type-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    animation: auth-slide-up 0.65s ease-out;
}

.auth-user-type-btn {
    padding: 1rem;
    border-radius: 1rem;
    border: 2px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 44px;
    text-align: left;
}

.auth-user-type-btn:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.auth-user-type-btn:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.auth-user-type-btn.active {
    background: #ffffff;
    color: #1a1a2e;
    border-color: #7c3aed;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
}

.auth-user-type-btn.active .auth-user-type-icon {
    background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    color: #ffffff;
}

.auth-user-type-btn .auth-user-type-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f4f6;
    color: #9ca3af;
    transition: all 0.25s ease;
    font-size: 1rem;
}

.auth-user-type-btn .auth-user-type-title {
    font-size: 1rem;
    font-weight: 700;
}

.auth-user-type-btn .auth-user-type-subtitle {
    font-size: 0.8rem;
    opacity: 0.75;
}

.auth-user-type-btn.active .auth-user-type-subtitle {
    opacity: 0.6;
}

/* ---- Form Groups ---- */

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.auth-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    display: block;
}

/* ---- Input Fields ---- */

.auth-input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    color: #1a1a2e;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.auth-input::placeholder {
    color: #9ca3af;
}

.auth-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.auth-input:hover:not(:focus) {
    border-color: #d1d5db;
}

/* Password field with eye icon */
.auth-input-with-toggle {
    padding-right: 2.75rem;
}

.auth-password-wrapper {
    position: relative;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease;
    min-width: 44px;
    min-height: 44px;
}

.auth-password-toggle:hover {
    color: #374151;
}

.auth-password-toggle:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 1px;
}

/* ---- Select Dropdown ---- */

.auth-select {
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    color: #1a1a2e;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    cursor: pointer;
    appearance: auto;
}

.auth-select:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* ---- Options Row (Remember me + Forgot password) ---- */

.auth-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

/* ---- Checkbox ---- */

.auth-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-checkbox-group input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid #d1d5db !important;
    background: #ffffff !important;
    background-image: none !important;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.auth-checkbox-group input[type="checkbox"]:checked {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}

.auth-checkbox-group input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.auth-checkbox-group input[type="checkbox"]:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.auth-checkbox-group label {
    font-size: 0.875rem;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    position: relative;
    top: 4px;
}

/* ---- Forgot Password Link ---- */

.auth-forgot-password {
    text-align: right;
}

.auth-forgot-password a {
    font-size: 0.875rem;
    color: hsl(var(--primary));
    text-decoration: none;
    transition: color 0.2s;
}

.auth-forgot-password a:hover {
    color: hsl(var(--primary-glow));
    text-decoration: underline;
}

/* ---- Primary Button ---- */

.auth-btn-primary {
    width: 100%;
    height: 3.25rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #ec4899 100%);
    background-size: 200% auto;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.auth-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
    background-position: right center;
}

.auth-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-btn-primary:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

/* ---- Google OAuth Button ---- */

.auth-btn-google {
    width: 100%;
    height: 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-btn-google:hover {
    border-color: #d1d5db;
    background: #f9fafb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.auth-btn-google:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

.auth-btn-google .bi-google {
    color: #4285f4;
    font-size: 1.125rem;
}

/* ---- Sign in with Apple (WSIWA-03, HIG black button; equal prominence to Google) ---- */
.apple-login-slot {
    margin-top: 0.75rem;
}

.auth-btn-apple {
    width: 100%;
    height: 3rem;
    border: 2px solid #000000;
    border-radius: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #ffffff;
    background: #000000;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-btn-apple:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.auth-btn-apple:focus-visible {
    outline: 3px solid #7c3aed;
    outline-offset: 2px;
}

.auth-btn-apple .bi-apple {
    color: #ffffff;
    font-size: 1.125rem;
}

/* ---- Alert Messages ---- */

.auth-alert-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #eff6ff;
    border: 2px solid #93c5fd;
    color: #1e40af;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.auth-alert-info i {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.auth-alert-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #fef2f2;
    border: 2px solid #fca5a5;
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.auth-alert-error i {
    flex-shrink: 0;
}

.auth-alert-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: #fffbeb;
    border: 2px solid #fcd34d;
    color: #92400e;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.auth-alert-warning i {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.auth-alert-warning a {
    color: #78350f;
    text-decoration: underline;
    font-weight: 600;
}

.auth-alert-warning a:hover {
    color: #451a03;
}

/* ---- Divider Override Inside Enhanced Card ---- */

.auth-card-enhanced .auth-divider span {
    background: #ffffff;
}

/* ---- Email Info Box ---- */

.auth-email-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.8125rem;
}

/* ---- Password Hint ---- */

.auth-password-hint {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* ---- Card Title/Description inside Enhanced Card ---- */

.auth-card-enhanced .card-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
}

.auth-card-enhanced .card-description {
    color: #6b7280;
}

/* ---- Card Footer Links ---- */

.auth-footer-text {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 1rem;
}

.auth-footer-text a {
    color: #7c3aed;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-footer-text a:hover {
    color: #6d28d9;
    text-decoration: underline;
}

/* ---- Bottom Section (below card) ---- */

.auth-bottom-section {
    text-align: center;
    animation: auth-slide-up 0.8s ease-out;
}

.auth-bottom-divider {
    position: relative;
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-bottom-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #d1d5db;
}

.auth-bottom-divider span {
    background: #f5f5f5;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    color: #6b7280;
    font-weight: 500;
    font-size: 0.875rem;
}

.auth-btn-register {
    width: 100%;
    height: 3.25rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #7c3aed 100%);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.auth-btn-register:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 50%, #6d28d9 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.35);
}

.auth-btn-register:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.auth-bottom-text {
    font-size: 0.8125rem;
    color: #9ca3af;
    margin-top: 0.75rem;
}

/* ---- Loading Overlay ---- */

.auth-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.auth-google-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-google-loading-box {
    background: #ffffff;
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.auth-google-loading-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: #6366f1;
    border-radius: 50%;
}

.auth-google-loading-text {
    font-size: 1rem;
    font-weight: 500;
    color: #374151;
}

/* ---- Validation Messages ---- */

.auth-validation-error {
    color: #dc2626;
    font-size: 0.8125rem;
    margin-top: 0.125rem;
}

/* ---- Inline Custom Validation Error ---- */

.auth-inline-error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: #fef2f2;
    border: 2px solid #fca5a5;
    color: #991b1b;
    font-size: 0.8125rem;
    font-weight: 500;
}

.auth-inline-error i {
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* ---- Loading Spinner in Buttons ---- */

.auth-btn-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.auth-btn-spinner .spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ---- Dark Mode ---- */

[data-theme="dark"] .auth-page-bg {
    background: #121212;
}

[data-theme="dark"] .auth-header-enhanced h1,
[data-theme="dark"] .auth-header-enhanced .text-foreground {
    color: #f3f4f6;
}

[data-theme="dark"] .auth-header-enhanced p,
[data-theme="dark"] .auth-header-enhanced .text-gray-600 {
    color: #9ca3af;
}

[data-theme="dark"] .auth-card-enhanced {
    background: #1e1e2e !important;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
                0 8px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .auth-card-enhanced:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45),
                0 12px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .auth-label {
    color: #d1d5db;
}

[data-theme="dark"] .auth-input {
    background: #2a2a3e;
    border-color: #3f3f5c;
    color: #e5e7eb;
}

[data-theme="dark"] .auth-input::placeholder {
    color: #6b7280;
}

[data-theme="dark"] .auth-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .auth-input:hover:not(:focus) {
    border-color: #4f4f6e;
}

[data-theme="dark"] .auth-select {
    background: #2a2a3e;
    border-color: #3f3f5c;
    color: #e5e7eb;
}

[data-theme="dark"] .auth-select:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .auth-checkbox-group label {
    color: #d1d5db;
}

[data-theme="dark"] .auth-checkbox-group input[type="checkbox"] {
    border-color: #4f4f6e;
    background: #1e1e2e;
}

[data-theme="dark"] .auth-checkbox-group input[type="checkbox"]:checked {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
}

[data-theme="dark"] .auth-forgot-password a {
    color: hsl(var(--primary-glow));
}

[data-theme="dark"] .auth-forgot-password a:hover {
    color: hsl(var(--student-primary));
}

[data-theme="dark"] .auth-btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #ec4899 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .auth-btn-primary:hover:not(:disabled) {
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .auth-btn-google {
    background: #2a2a3e;
    border-color: #3f3f5c;
    color: #e5e7eb;
}

[data-theme="dark"] .auth-btn-google:hover {
    background: #333348;
    border-color: #4f4f6e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* HIG: on dark backgrounds the Apple button flips to white-on-black. */
[data-theme="dark"] .auth-btn-apple {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
}

[data-theme="dark"] .auth-btn-apple:hover {
    background: #e5e7eb;
    border-color: #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .auth-btn-apple .bi-apple {
    color: #000000;
}

[data-theme="dark"] .auth-alert-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

[data-theme="dark"] .auth-alert-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .auth-alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .auth-alert-warning a {
    color: #fbbf24;
}

[data-theme="dark"] .auth-card-enhanced .auth-divider span {
    background: #1e1e2e;
}

[data-theme="dark"] .auth-card-enhanced .auth-divider::before {
    background: #3f3f5c;
}

[data-theme="dark"] .auth-email-info {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
}

[data-theme="dark"] .auth-password-hint {
    color: #9ca3af;
}

[data-theme="dark"] .auth-card-enhanced .card-description {
    color: #9ca3af;
}

[data-theme="dark"] .auth-footer-text {
    color: #9ca3af;
}

[data-theme="dark"] .auth-footer-text a {
    color: #a78bfa;
}

[data-theme="dark"] .auth-footer-text a:hover {
    color: #c4b5fd;
}

[data-theme="dark"] .auth-user-type-btn {
    border-color: #3f3f5c;
    background: #1e1e2e;
    color: #9ca3af;
}

[data-theme="dark"] .auth-user-type-btn:hover {
    background: #252540;
    border-color: #4f4f6e;
}

[data-theme="dark"] .auth-user-type-btn .auth-user-type-icon {
    background: #2a2a42;
    color: #6b7280;
}

[data-theme="dark"] .auth-user-type-btn.active {
    background: #252540;
    color: #f3f4f6;
    border-color: #8b5cf6;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .auth-password-toggle {
    color: #9ca3af;
}

[data-theme="dark"] .auth-password-toggle:hover {
    color: #d1d5db;
}

[data-theme="dark"] .auth-inline-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .auth-google-loading-box {
    background: #1e1e2e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .auth-google-loading-spinner {
    border-color: #3f3f5c;
    border-top-color: #8b5cf6;
}

[data-theme="dark"] .auth-google-loading-text {
    color: #e5e7eb;
}

[data-theme="dark"] .auth-bottom-divider::before {
    background: #3f3f5c;
}

[data-theme="dark"] .auth-bottom-divider span {
    background: #121212;
    color: #9ca3af;
}

[data-theme="dark"] .auth-btn-register {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #8b5cf6 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .auth-btn-register:hover {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #7c3aed 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

[data-theme="dark"] .auth-bottom-text {
    color: #6b7280;
}

[data-theme="dark"] .auth-card-enhanced .text-student-primary {
    color: #a78bfa;
}

[data-theme="dark"] .auth-card-enhanced .text-parent-primary {
    color: #86efac;
}

/* ---- Responsive: Mobile (max-width: 480px) ---- */

@media (max-width: 480px) {
    .auth-page-bg {
        padding: 1rem 0.75rem;
    }

    .auth-container {
        gap: 1rem;
    }

    .auth-header-enhanced h1 {
        font-size: 1.75rem;
    }

    .auth-header-enhanced p {
        font-size: 0.875rem;
    }

    .auth-card-enhanced {
        padding: 1.5rem 1.25rem;
        border-radius: 1.25rem;
    }

    .auth-input {
        height: 2.75rem;
        font-size: 0.875rem;
    }

    .auth-select {
        height: 2.75rem;
        font-size: 0.875rem;
    }

    .auth-btn-primary {
        height: 3rem;
        font-size: 1rem;
    }

    .auth-btn-google {
        height: 2.75rem;
        font-size: 0.875rem;
    }

    .auth-user-type-btn {
        padding: 0.75rem;
    }

    .auth-user-type-btn .auth-user-type-icon {
        width: 2rem;
        height: 2rem;
    }

    .auth-user-type-btn .auth-user-type-title {
        font-size: 0.875rem;
    }

    .auth-user-type-btn .auth-user-type-subtitle {
        font-size: 0.7rem;
    }

    .auth-btn-register {
        height: 3rem;
        font-size: 0.9375rem;
    }
}

/* ---- Responsive: Tablet (max-width: 768px) ---- */

@media (max-width: 768px) {
    .auth-container {
        max-width: 100%;
    }
}

/* ---- Responsive: Desktop (min-width: 1024px) ---- */

@media (min-width: 1024px) {
    .auth-container {
        max-width: 500px;
    }

    .auth-card-enhanced {
        padding: 2.5rem 2.5rem;
    }
}

/* ============================================================
   REDUCED MOTION — ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .paywall-pricing-card:hover {
        transform: none;
    }

    .go-premium-badge:hover {
        transform: none;
    }

    .auth-container,
    .auth-header-enhanced,
    .auth-card-enhanced,
    .auth-user-type-section,
    .auth-bottom-section {
        animation: none;
    }

    .auth-btn-primary:hover:not(:disabled),
    .auth-btn-register:hover,
    .auth-btn-google:hover,
    .auth-user-type-btn:hover,
    .auth-card-enhanced:hover {
        transform: none;
    }
}

/* ============================================
   LaTeX Prompt — instruction subtitle above MathRenderer
   Shown when latexExpression is present to provide context
   (e.g. "Calculate:", "Which is larger?")
   v2026-02-18-latex-prompt
   ============================================ */
.latex-prompt {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.25rem;
    text-align: center;
}

[data-theme="dark"] .latex-prompt {
    color: #9ca3af;
}

@media (max-width: 768px) {
    .latex-prompt {
        font-size: 0.875rem;
    }
}

/* ============================================
   MathLive MathRenderer — equation display blocks
   (replaces KaTeX — v2026-02-19-mathlive)
   ============================================ */
.math-renderer-block {
    display: block;
    text-align: center;
    padding: 1.25rem 1rem;
    margin: 1rem 0;
    background: rgba(99, 102, 241, 0.04);
    border-radius: 0.75rem;
    border: 1px solid rgba(99, 102, 241, 0.12);
    overflow-x: auto;
    overflow-y: visible;
}

.math-renderer-content {
    font-size: clamp(1.1rem, 4.5vw, 1.75rem);
    line-height: 1.6;
    color: #1e293b;
    display: inline-block;
    max-width: 100%;
}

/* Dark mode — equation colours */
[data-theme="dark"] .math-renderer-block {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .math-renderer-content {
    color: #e2e8f0;
}

/* Dark mode — MathLive web components (replaces KaTeX internal selectors) */
/* v2026-02-19-mathlive */
[data-theme="dark"] math-div,
[data-theme="dark"] math-span {
    color: #e2e8f0;
}

/* Responsive: scale down on mobile — clamp handles sizing, just tighten padding
   v2026-02-20-math-mobile-fix */
@media (max-width: 768px) {
    .math-renderer-block {
        padding: 1rem 0.5rem;
    }
}

/* Reduced motion: no transitions */
@media (prefers-reduced-motion: reduce) {
    .math-renderer-block {
        transition: none;
    }
}

/* ============================================
   MathLive MathInput — editable math-field input
   (Phase 81 — v2026-02-19-mathlive-p81)
   ============================================ */
.math-input-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: 100%;
}

.math-input-field {
    width: 100%;
    min-height: 52px;
    font-size: 1.25rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    --caret-color: #007bff;
    --selection-color: transparent;
    --contains-highlight-background-color: transparent;
}

.math-input-field:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    outline: none;
}

/* Correct/incorrect states */
.math-input-correct .math-input-field {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.math-input-incorrect .math-input-field {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.math-input-feedback {
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Dark mode — math-field input */
[data-theme="dark"] .math-input-field {
    background: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
    --caret-color: #60a5fa;
    --selection-color: transparent;
    --contains-highlight-background-color: transparent;
}

[data-theme="dark"] .math-input-field:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .math-input-correct .math-input-field {
    border-color: #34d399;
    background: rgba(52, 211, 153, 0.1);
}

[data-theme="dark"] .math-input-incorrect .math-input-field {
    border-color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

[data-theme="dark"] math-field {
    color: #e2e8f0;
}

/* "Make fraction" mobile-only helper button — appears below the math-field on
   mixed-number-answer exercises so students can insert a blank fraction next
   to a whole number (the default ÷ keycap consumes the previous atom into
   the numerator instead of placing a fraction next to it). */
.mixed-fraction-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    min-height: 44px; /* WCAG touch target */
    border: 2px solid var(--primary, #3b82f6);
    border-radius: 0.625rem;
    background: linear-gradient(135deg, #fff, #f3f4f6);
    color: var(--primary, #3b82f6);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.15);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}

.mixed-fraction-button:hover {
    background: linear-gradient(135deg, var(--primary, #3b82f6), #2563eb);
    color: #fff;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.mixed-fraction-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

.mixed-fraction-button:focus-visible {
    outline: 3px solid var(--primary, #3b82f6);
    outline-offset: 2px;
}

.mixed-fraction-button__icon {
    font-size: 1.05rem;
    line-height: 1;
    font-family: "Times New Roman", Cambria, serif;
}

.mixed-fraction-button__icon sup,
.mixed-fraction-button__icon sub {
    font-size: 0.7em;
}

.mixed-fraction-button__label {
    font-family: var(--font-heading, Nunito, system-ui, sans-serif);
}

[data-theme="dark"] .mixed-fraction-button {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: #60a5fa;
    color: #93c5fd;
    box-shadow: 0 2px 6px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .mixed-fraction-button:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}

/* Stacked FITB — place-value decomposition (e.g. "256 = ___ hundreds + ___ tens + ___ ones") */
.fitb-prefix {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .fitb-prefix {
    color: #e2e8f0;
}

.fitb-stacked-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.fitb-stacked-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fitb-stacked-row .fitb-input-wrapper {
    flex: 1;
    min-width: 0;
}

.fitb-stacked-row .fitb-input-stacked {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.fitb-row-label {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    min-width: 5.5rem;
    flex-shrink: 0;
}

[data-theme="dark"] .fitb-row-label {
    color: #9ca3af;
}

@media (max-width: 480px) {
    .fitb-stacked-row {
        gap: 0.5rem;
    }

    .fitb-row-label {
        font-size: 0.85rem;
        min-width: 4.5rem;
    }

    .fitb-prefix {
        font-size: 1.25rem;
    }
}

/* Multi-blank LaTeX FITB — labelled input rows */
.fitb-latex-multi-blank {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fitb-latex-blank-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fitb-blank-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #6b7280;
    white-space: nowrap;
    min-width: 4.5rem;
}

[data-theme="dark"] .fitb-blank-label {
    color: #9ca3af;
}

/* Hide MathLive toolbar buttons (keyboard toggle + menu) globally on ALL math-field
   elements. Uses ::part() to reach into math-field shadow DOM.
   Previously scoped to .math-input-no-toolbar but icons should never appear anywhere. */
/* MathLive selection highlight — use native --selection-color CSS custom property.
   .math-input-field already has this, but inline math-field elements in interactive
   components (ProbabilityTree, QuadraticGraph, etc.) don't have that class. */
math-field {
    --selection-color: transparent;
    --contains-highlight-background-color: transparent;
}

math-field::part(menu-toggle),
math-field::part(virtual-keyboard-toggle) {
    display: none !important;
}

/* Responsive: math-field on mobile */
@media (max-width: 768px) {
    .math-input-field {
        font-size: 1.1rem;
        min-height: 48px;
        padding: 0.375rem 0.5rem;
    }
}

/* ============================================
   EXERCISE PAGE STYLES (.exercise- prefix)
   Migrated from ExercisePage.razor inline styles
   Cache bust: v2026-02-22-exercise-page-refresh
   Design system refresh: v2026-02-22-exercise-page-design-system
   ============================================ */

/* Exercise stats card — glass-morphism override for hero gradient background context */
.lesson-hero-compact .exercise-stats-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Stats row */
.exercise-page .exercise-stats-card .stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Stat items within exercise stats card */
.exercise-page .exercise-stats-card .stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exercise-page .exercise-stats-card .stat-item i {
    font-size: var(--text-xl);
}

.exercise-page .exercise-stats-card .stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: 'Nunito', system-ui, sans-serif;
    color: white;
}

.exercise-page .exercise-stats-card .stat-label {
    font-size: var(--text-sm);
    opacity: 0.85;
    color: white;
}

/* Motivation card */
.exercise-motivation-card {
    background: linear-gradient(135deg, hsl(var(--warning) / 0.15), hsl(var(--warning) / 0.1));
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid hsl(var(--warning) / 0.3);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exercise-motivation-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exercise-motivation-icon i {
    font-size: 2rem;
}

.exercise-motivation-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: hsl(var(--foreground));
}

.exercise-motivation-message {
    color: hsl(var(--muted-foreground));
    font-size: var(--text-sm);
}

/* Tips card */
.exercise-tips-card {
    background: hsl(var(--card));
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid hsl(var(--border));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exercise-tips-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exercise-tips-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.exercise-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exercise-tips-list li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.exercise-tips-list li:last-child {
    border-bottom: none;
}

.exercise-tips-list li::before {
    content: "💡";
    position: absolute;
    left: 0;
    top: 0.5rem;
}

/* Action button styling for exercise page */
.exercise-action-btn {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    border-radius: var(--radius-lg);
    min-height: 44px;
}

/* Exercise progress */
.exercise-progress {
    margin: 1.5rem 0;
}

/* Animation keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

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

.feedback-card {
    animation: feedbackSlideIn 0.3s ease-out forwards;
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .feedback-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Mobile overflow prevention scoped to exercise page */
@media (max-width: 768px) {
    .exercise-page {
        max-width: 100vw !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow-x: hidden !important;
    }

    .exercise-page .row {
        margin-left: -0.375rem !important;
        margin-right: -0.375rem !important;
    }

    .exercise-page .row > * {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }

    .exercise-page .hero-section .container {
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .exercise-page .hero-back-container {
        margin-bottom: 1rem;
    }

    /* Ensure cards don't overflow */
    .exercise-page .assessment-card,
    .exercise-page .key-stage-card,
    .exercise-page .hero-demo-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Stack columns on mobile */
    .exercise-page .col-lg-8,
    .exercise-page .col-lg-4 {
        flex: 0 0 auto;
        width: 100% !important;
    }

    /* Stats card mobile responsiveness — compact and snug */
    .exercise-page .exercise-stats-card {
        padding: 0.3rem !important;
        gap: 0.1rem !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 0.5rem !important;
    }

    .exercise-page .exercise-stats-card .stats-row {
        flex-direction: row !important;
        gap: 0.25rem !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }

    .exercise-page .exercise-stats-card .stats-row .stat-item {
        gap: 0.15rem !important;
        flex: 1 !important;
        align-items: center !important;
        padding: 0.15rem !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 0.25rem !important;
        min-width: 0 !important;
    }

    .exercise-page .exercise-stats-card .stat-item div {
        min-width: 0 !important;
    }

    .exercise-page .exercise-stats-card .stat-item i {
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }

    .exercise-page .exercise-stats-card .stat-value {
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        margin-bottom: 0.05rem !important;
    }

    .exercise-page .exercise-stats-card .stat-label {
        font-size: 0.45rem !important;
        opacity: 0.7 !important;
        line-height: 1 !important;
        margin: 0 !important;
    }
}

/* Page-specific hero sizing overrides (compact header), scoped to exercise page */
.exercise-page .hero-section {
    padding: 1.5rem 0;
}

.exercise-page .hero-section .hero-title {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: white;
}

.exercise-page .hero-section .hero-subtitle {
    font-size: var(--text-base);
    letter-spacing: 0.01em;
    opacity: 0.9;
}

.exercise-page .hero-features {
    margin-top: var(--space-4);
}

.exercise-page .feature-item {
    font-size: var(--text-sm);
}

.exercise-page .hero-demo-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Hints card hover lift within exercise page */
.exercise-page .key-stage-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.exercise-page .key-stage-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ============================================
   EXERCISE PAGE DARK MODE
   Cache bust: v2026-02-22-exercise-page-dark-mode
   ============================================ */

/* Stats card in hero — darker glass-morphism variant */
[data-theme="dark"] .lesson-hero-compact .exercise-stats-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Motivation card dark mode */
[data-theme="dark"] .exercise-motivation-card {
    background: linear-gradient(135deg, hsl(var(--warning) / 0.2), hsl(var(--warning) / 0.1));
    border-color: hsl(var(--warning) / 0.4);
}

[data-theme="dark"] .exercise-motivation-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .exercise-motivation-message {
    color: hsl(var(--muted-foreground));
}

/* Tips card dark mode */
[data-theme="dark"] .exercise-tips-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .exercise-tips-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .exercise-tips-list li {
    color: hsl(var(--muted-foreground));
    border-bottom-color: hsl(var(--border) / 0.5);
}

/* Result message dark mode */
[data-theme="dark"] .exercise-result-message {
    color: hsl(var(--muted-foreground)) !important;
}

/* Hints card (bg-ks3) dark mode variant */
[data-theme="dark"] .exercise-page .key-stage-card.bg-ks3 {
    background: hsl(var(--warning) / 0.15);
}

/* ============================================
   PARENT DASHBOARD STYLES (.dash- prefix)
   Migrated from ParentDashboard.razor inline styles
   Cache bust: v2026-02-22-dashboard
   ============================================ */

.dash-welcome-back-message {
    margin-top: var(--space-4);
    animation: dash-gentle-pulse 2s ease-in-out infinite;
}

@keyframes dash-gentle-pulse {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
}

.dash-celebration-stat {
    position: relative;
    transition: all 0.3s ease;
}

.dash-celebration-stat:hover {
    transform: scale(1.02);
}

.dash-celebration-stat:hover::after {
    content: attr(data-celebration);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-hero);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    animation: dash-stat-tooltip 0.3s ease-out;
    box-shadow: var(--shadow-md);
}

@keyframes dash-stat-tooltip {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.8); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.dash-pulse-glow {
    animation: dash-pulse-glow-parent 2s ease-in-out infinite;
}

@keyframes dash-pulse-glow-parent {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1) drop-shadow(0 0 0 hsl(var(--primary) / 0));
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2) drop-shadow(0 0 8px hsl(var(--primary) / 0.6));
    }
}

.dash-flame-dance {
    animation: dash-flame-dance 1.5s ease-in-out infinite;
}

@keyframes dash-flame-dance {
    0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
    25% { transform: scale(1.05) rotate(-2deg); filter: hue-rotate(5deg); }
    75% { transform: scale(1.05) rotate(2deg); filter: hue-rotate(-5deg); }
}

.dash-bounce-success {
    animation: dash-bounce-success 2s ease-in-out infinite;
}

@keyframes dash-bounce-success {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.05); }
}

.dash-mega-continue-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.dash-mega-continue-button:hover {
    animation: dash-mega-button-celebrate 0.8s ease-in-out;
}

@keyframes dash-mega-button-celebrate {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.03) rotate(-1deg); }
    50% { transform: scale(1.05) rotate(1deg); }
    75% { transform: scale(1.03) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.dash-users-pulse {
    animation: dash-users-pulse 1.5s ease-in-out infinite;
}

@keyframes dash-users-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.dash-motivational-quote {
    animation: dash-quote-glow 3s ease-in-out infinite;
}

@keyframes dash-quote-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
}

.dash-family-overview-card {
    position: relative;
    overflow: hidden;
}

.dash-family-overview-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: dash-family-card-shimmer 4s linear infinite;
}

@keyframes dash-family-card-shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.dash-animated-progress {
    position: relative;
}

.dash-animated-progress::after {
    content: none;
}

.dash-family-celebration-text {
    animation: dash-gentle-glow 2s ease-in-out infinite alternate;
}

@keyframes dash-gentle-glow {
    0% { opacity: 0.8; }
    100% { opacity: 1; text-shadow: 0 0 5px rgba(255, 255, 255, 0.2); }
}

.dash-encouraging-progress,
.dash-analytics-subtitle,
.dash-subscription-subtitle,
.dash-quick-actions-subtitle {
    background: linear-gradient(135deg, hsl(var(--background)), hsl(var(--secondary)));
    padding: var(--space-4);
    border-radius: var(--radius);
    border-left: 3px solid hsl(var(--primary));
    position: relative;
    margin-bottom: var(--space-4);
}

.dash-progress-encouragement,
.dash-analytics-motivation,
.dash-subscription-motivation,
.dash-quick-actions-motivation {
    margin-top: var(--space-2);
    text-align: center;
}

.dash-child-progress-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-lg, 1rem);
    background: hsl(var(--card));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.dash-child-progress-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.dash-child-card-accent {
    height: 6px;
    border-radius: var(--radius-lg, 1rem) var(--radius-lg, 1rem) 0 0;
}

.dash-accent-ks1 { background: linear-gradient(90deg, hsl(300 70% 65%), hsl(340 80% 65%)); }
.dash-accent-ks2 { background: linear-gradient(90deg, hsl(220 90% 56%), hsl(260 80% 60%)); }
.dash-accent-ks3 { background: linear-gradient(90deg, hsl(45 100% 55%), hsl(30 90% 55%)); }
.dash-accent-ks4 { background: linear-gradient(90deg, hsl(15 90% 55%), hsl(0 70% 55%)); }

.dash-child-card-body {
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
}

.dash-child-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.dash-avatar-ks1 { background: linear-gradient(135deg, hsl(300 70% 65%), hsl(340 80% 60%)); }
.dash-avatar-ks2 { background: linear-gradient(135deg, hsl(220 90% 56%), hsl(260 80% 60%)); }
.dash-avatar-ks3 { background: linear-gradient(135deg, hsl(45 100% 55%), hsl(30 90% 50%)); }
.dash-avatar-ks4 { background: linear-gradient(135deg, hsl(15 90% 55%), hsl(0 70% 50%)); }

.dash-child-name {
    font-family: 'Nunito', var(--font-family-sans);
    font-weight: 800;
    font-size: 1.05rem;
    color: hsl(var(--foreground));
}

.dash-child-meta {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.dash-child-weekly-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25em 0.65em;
    border-radius: var(--radius-full, 9999px);
}

.dash-child-stats {
    display: flex;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-2, 0.5rem);
}

.dash-child-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    font-size: 0.82rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.dash-child-stat-icon {
    font-size: 0.9rem;
}

.dash-child-achievement {
    margin-top: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: linear-gradient(135deg, hsl(45 100% 96%), hsl(45 100% 92%));
    border-radius: var(--radius, 0.75rem);
    font-size: 0.78rem;
    font-weight: 600;
    color: hsl(35 80% 35%);
}

.dash-child-achievement i {
    color: hsl(45 100% 50%);
    margin-right: var(--space-1, 0.25rem);
}

.dash-celebration-child:hover::before {
    content: '\1F389';
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    animation: dash-child-confetti 1s ease-out;
}

@keyframes dash-child-confetti {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(360deg);
    }
}

.dash-add-child-card {
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--radius-lg, 1rem);
    border: 2px dashed hsl(var(--primary) / 0.3);
    background: hsl(var(--primary) / 0.04);
    padding: var(--space-5, 1.25rem);
}

.dash-add-child-card:hover {
    transform: translateY(-4px);
    border-color: hsl(var(--primary) / 0.6);
    background: hsl(var(--primary) / 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.dash-add-child-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full, 9999px);
    background: var(--gradient-hero);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: var(--space-3, 0.75rem);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    transition: transform 0.3s ease;
}

.dash-add-child-card:hover .dash-add-child-icon {
    transform: scale(1.1) rotate(90deg);
}

.dash-add-child-title {
    font-family: 'Nunito', var(--font-family-sans);
    font-weight: 800;
    color: hsl(var(--primary));
    margin-bottom: var(--space-1, 0.25rem);
}

.dash-add-child-subtitle {
    color: hsl(var(--muted-foreground));
    font-size: 0.82rem;
}

.dash-celebration-add:hover::after {
    content: attr(data-celebration);
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-hero);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    animation: dash-add-tooltip 0.3s ease-out;
    box-shadow: var(--shadow-sm);
}

@keyframes dash-add-tooltip {
    0% { opacity: 0; transform: translateX(-50%) translateY(5px) scale(0.9); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.dash-analytics-stat-card {
    transition: all 0.3s ease;
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.dash-analytics-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.dash-stat-number {
    font-size: 1.5rem;
    font-weight: bold;
    animation: dash-number-pop 0.5s ease-out;
}

@keyframes dash-number-pop {
    0% { transform: scale(0.8); }
    100% { transform: scale(1); }
}

/* ---- Typography: Nunito headings for dashboard-specific elements ---- */
.dash-stat-number,
.dash-child-progress-card h6,
.dash-analytics-stat-card h5,
.dash-analytics-stat-card .stat-label,
.dash-analytics-stat-card p {
    font-family: 'Nunito', var(--font-family-sans);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] .dash-child-progress-card {
    background: hsl(var(--card));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .dash-child-progress-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .dash-child-achievement {
    background: linear-gradient(135deg, hsl(45 60% 15%), hsl(45 50% 12%));
    color: hsl(45 80% 70%);
}

/* TRANS-01: muted footer link inside child card pointing to iTutor transcripts.
   Must NOT visually compete with the card's primary ViewChildDetails affordance
   (the whole card is a button). Muted by default, parent-primary on hover. */
.dash-child-transcript-link {
    display: inline-block;
    margin-top: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: hsl(var(--muted-foreground, 215 16% 47%));
    text-decoration: none;
    transition: color 0.15s ease;
    cursor: pointer;
}

.dash-child-transcript-link:hover {
    color: hsl(var(--parent-primary, 220 90% 40%));
    text-decoration: underline;
}

.dash-child-transcript-link:focus-visible {
    color: hsl(var(--parent-primary, 220 90% 40%));
    outline: 2px solid hsl(var(--ring, 220 90% 56%));
    outline-offset: 2px;
    border-radius: var(--radius-xs, 0.25rem);
    text-decoration: none;
}

.dash-child-transcript-link:active {
    color: hsl(var(--parent-accent, 195 100% 45%));
}

[data-theme="dark"] .dash-child-transcript-link {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .dash-child-transcript-link:hover {
    color: hsl(220 90% 65%);
}

/* Sibling entry link on the child card → topics-covered page (mirrors transcript link;
   full-width 44px touch target so it stacks cleanly below the transcript link). */
.dash-child-coverage-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-1, 0.25rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: hsl(var(--muted-foreground, 215 16% 47%));
    text-decoration: none;
    transition: color 0.15s ease;
    cursor: pointer;
}

.dash-child-coverage-link:hover {
    color: hsl(var(--parent-primary, 220 90% 40%));
    text-decoration: underline;
}

.dash-child-coverage-link:focus-visible {
    color: hsl(var(--parent-primary, 220 90% 40%));
    outline: 2px solid hsl(var(--ring, 220 90% 56%));
    outline-offset: 2px;
    border-radius: var(--radius-xs, 0.25rem);
    text-decoration: none;
}

.dash-child-coverage-link:active {
    color: hsl(var(--parent-accent, 195 100% 45%));
}

[data-theme="dark"] .dash-child-coverage-link {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .dash-child-coverage-link:hover {
    color: hsl(220 90% 65%);
}

/* --- Bootstrap text utility dark mode overrides --- */
[data-theme="dark"] .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="dark"] .text-success {
    color: hsl(142 70% 65%) !important;
}

[data-theme="dark"] .text-info {
    color: hsl(195 90% 65%) !important;
}

[data-theme="dark"] .text-warning {
    color: hsl(45 100% 65%) !important;
}

[data-theme="dark"] .text-danger {
    color: hsl(0 84% 68%) !important;
}

[data-theme="dark"] .text-primary {
    color: hsl(var(--primary)) !important;
}

[data-theme="dark"] .text-secondary {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .bg-success-subtle {
    background-color: hsl(142 70% 15%) !important;
}

[data-theme="dark"] .bg-warning-subtle {
    background-color: hsl(45 80% 15%) !important;
}

[data-theme="dark"] .dash-add-child-card {
    border-color: hsl(var(--primary) / 0.4);
    background: hsl(var(--primary) / 0.08);
}

[data-theme="dark"] .dash-add-child-card:hover {
    border-color: hsl(var(--primary) / 0.6);
    background: hsl(var(--primary) / 0.15);
}

[data-theme="dark"] .dash-analytics-stat-card {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .dash-analytics-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .dash-encouraging-progress,
[data-theme="dark"] .dash-analytics-subtitle,
[data-theme="dark"] .dash-subscription-subtitle,
[data-theme="dark"] .dash-quick-actions-subtitle {
    background: linear-gradient(135deg, hsl(var(--secondary)), hsl(var(--card)));
    border-left-color: hsl(var(--primary));
}

[data-theme="dark"] .dash-celebration-stat:hover::after {
    background: var(--gradient-hero);
}

[data-theme="dark"] .dash-celebration-add:hover::after {
    background: var(--gradient-hero);
}

/* Parent dashboard mobile responsiveness */
@media (max-width: 768px) {
    .dash-celebration-stat:hover::after,
    .dash-celebration-add:hover::after {
        display: none;
    }

    .dash-motivational-quote {
        font-size: 0.8rem;
    }

    .dash-stat-number {
        font-size: 1.2rem;
    }

    .dash-child-progress-card,
    .dash-add-child-card {
        margin-bottom: var(--space-4);
    }
}

/* Accessibility: reduce motion for parent dashboard animations */
@media (prefers-reduced-motion: reduce) {
    .dash-welcome-back-message,
    .dash-pulse-glow,
    .dash-flame-dance,
    .dash-bounce-success,
    .dash-mega-continue-button,
    .dash-users-pulse,
    .dash-motivational-quote,
    .dash-family-overview-card::before,
    .dash-animated-progress::after,
    .dash-family-celebration-text,
    .dash-child-progress-card,
    .dash-add-child-card,
    .dash-analytics-stat-card,
    .dash-stat-number,
    .dash-celebration-child::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   PROGRESS PAGE STYLES (.prog- prefix)
   Migrated from ProgressPage.razor inline styles
   Cache bust: v2026-02-22-progress-v2
   ============================================ */

/* Progress stats card — progress-page override (more padding/height than global .progress-stats-card) */
.prog-stats-card {
    background: hsl(var(--card));
    border-radius: 16px;
    padding: 28px 24px 32px 24px;
    border: 1px solid hsl(var(--border));
    transition: all 0.3s ease;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: visible;
    margin-bottom: 1.5rem;
}

.prog-stats-card .card-icon {
    margin-bottom: 16px;
    flex-shrink: 0;
}

.prog-stats-card .card-title {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.prog-stats-card .card-subtitle {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.prog-stats-card .age-badge {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.prog-stats-card .card-description {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 8px;
    font-size: 0.875rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.prog-stats-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Scoped Bootstrap overrides — prevent global bleed */
.progress-hero-compact .card {
    transition: all 0.2s ease;
}

.progress-hero-compact .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.progress-hero-compact .progress {
    border-radius: 10px;
}

.progress-hero-compact .progress-bar {
    border-radius: 10px;
}

.progress-hero-compact .badge {
    font-size: 0.875em;
}

.progress-hero-compact .display-4 {
    font-weight: 700;
}

/* Progress motivation float */
.prog-motivation {
    margin-top: 1.5rem;
    animation: prog-motivation-float 3s ease-in-out infinite;
}

@keyframes prog-motivation-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Progress stat item */
.prog-stat {
    position: relative;
    transition: all 0.3s ease;
}

/* Celebration hover tooltip */
.prog-celebration-hover:hover::after {
    content: attr(data-celebration);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    animation: prog-tooltip 0.3s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

@keyframes prog-tooltip {
    0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.8); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Trophy shine */
.prog-trophy-shine {
    animation: prog-trophy-shine 2.5s ease-in-out infinite;
}

@keyframes prog-trophy-shine {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(251, 191, 36, 0));
    }
    50% {
        transform: scale(1.1) rotate(-5deg);
        filter: brightness(1.3) drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
    }
}

/* Streak flame */
.prog-streak-flame {
    animation: prog-streak-flame-dance 2s ease-in-out infinite;
}

@keyframes prog-streak-flame-dance {
    0%, 100% { transform: scale(1) rotate(0deg); filter: hue-rotate(0deg); }
    25% { transform: scale(1.05) rotate(-3deg); filter: hue-rotate(10deg); }
    75% { transform: scale(1.05) rotate(3deg); filter: hue-rotate(-10deg); }
}

/* Score bounce */
.prog-score-bounce {
    animation: prog-score-bounce 2s ease-in-out infinite;
}

@keyframes prog-score-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.05); }
}

/* Continue button */
.prog-continue-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.prog-continue-button:hover {
    animation: prog-continue-button-celebrate 0.6s ease-in-out;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

@keyframes prog-continue-button-celebrate {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.03) rotate(-1deg); }
    50% { transform: scale(1.05) rotate(1deg); }
    75% { transform: scale(1.03) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Play icon pulse */
.prog-play-icon-pulse {
    animation: prog-play-icon-pulse 1.8s ease-in-out infinite;
}

@keyframes prog-play-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Continue encouragement */
.prog-continue-encouragement {
    animation: prog-gentle-glow 2.5s ease-in-out infinite alternate;
}

@keyframes prog-gentle-glow {
    0% { opacity: 0.8; }
    100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); }
}

/* Stats motivation */
.prog-stats-motivation {
    background: hsl(var(--accent));
    padding: 1.5rem;
    border-radius: var(--radius);
    border-left: 4px solid hsl(var(--primary));
    position: relative;
    margin-bottom: 1rem;
}

/* Stats inspiration */
.prog-stats-inspiration {
    margin-top: 1rem;
    text-align: center;
}

/* Level celebration card */
.prog-level-celebration-card {
    position: relative;
    overflow: hidden;
}

/* Level trophy glow */
.prog-level-trophy-glow {
    animation: prog-level-trophy-glow 3s ease-in-out infinite;
}

@keyframes prog-level-trophy-glow {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 0 rgba(251, 191, 36, 0));
    }
    50% {
        filter: brightness(1.4) drop-shadow(0 0 15px rgba(251, 191, 36, 0.9));
    }
}

/* Level number pop */
.prog-level-number-pop {
    font-size: 2.5rem;
    animation: prog-level-number-celebration 2s ease-in-out infinite;
}

@keyframes prog-level-number-celebration {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
}

/* XP badge shine */
.prog-xp-badge-shine {
    position: relative;
    animation: prog-xp-shine 4s ease-in-out infinite;
}

@keyframes prog-xp-shine {
    0%, 100% { background-color: rgba(59, 130, 246, 0.2); }
    50% { background-color: rgba(59, 130, 246, 0.4); box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); }
}

/* Level/voice encouragement */
.prog-level-encouragement,
.prog-lesson-voice,
.prog-streak-voice,
.prog-score-voice {
    position: relative;
}

.prog-level-voice,
.prog-lesson-voice,
.prog-streak-voice,
.prog-score-voice {
    display: block;
    margin-top: 0.75rem;
    color: white;
    font-style: italic;
    font-weight: 600;
    animation: prog-voice-glow 2.5s ease-in-out infinite alternate;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@keyframes prog-voice-glow {
    0% { opacity: 0.85; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
    100% { opacity: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.2); }
}

/* Lessons book flip */
.prog-lessons-book-flip {
    animation: prog-book-flip 3s ease-in-out infinite;
}

@keyframes prog-book-flip {
    0%, 100% { transform: rotateY(0deg); }
    25% { transform: rotateY(-15deg); }
    75% { transform: rotateY(15deg); }
}

/* Lesson count celebrate */
.prog-lesson-count-celebrate {
    font-size: 2.5rem;
    animation: prog-lesson-count-pop 0.8s ease-out;
}

@keyframes prog-lesson-count-pop {
    0% { transform: scale(0.8) rotate(-5deg); }
    50% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Encouragement badge glow */
.prog-encouragement-badge-glow {
    animation: prog-encouragement-glow 2s ease-in-out infinite;
}

@keyframes prog-encouragement-glow {
    0%, 100% { background-color: rgba(236, 72, 153, 0.2); }
    50% { background-color: rgba(236, 72, 153, 0.4); box-shadow: 0 0 12px rgba(236, 72, 153, 0.3); }
}

/* Streak fire dance */
.prog-streak-fire-dance {
    animation: prog-streak-fire-wild 2.5s ease-in-out infinite;
}

@keyframes prog-streak-fire-wild {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        transform: scale(1.08) rotate(-4deg);
        filter: hue-rotate(15deg) brightness(1.2);
    }
    75% {
        transform: scale(1.08) rotate(4deg);
        filter: hue-rotate(-15deg) brightness(1.2);
    }
}

/* Streak number flame */
.prog-streak-number-flame {
    font-size: 2.5rem;
    animation: prog-streak-number-burn 2s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

@keyframes prog-streak-number-burn {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    }
}

/* Streak badge pulse */
.prog-streak-badge-pulse {
    animation: prog-streak-badge-throb 1.5s ease-in-out infinite;
}

@keyframes prog-streak-badge-throb {
    0%, 100% { background-color: rgba(180, 83, 9, 0.2); }
    50% { background-color: rgba(180, 83, 9, 0.4); transform: scale(1.02); }
}

/* Score graph rise */
.prog-score-graph-rise {
    animation: prog-graph-rise-celebrate 3s ease-in-out infinite;
}

@keyframes prog-graph-rise-celebrate {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    33% { transform: translateY(-2px) rotate(2deg) scale(1.05); }
    66% { transform: translateY(-1px) rotate(-2deg) scale(1.05); }
}

/* Score percentage pop */
.prog-score-percentage-pop {
    font-size: 2.5rem;
    animation: prog-percentage-precision 2s ease-in-out infinite;
    color: #0ea5e9;
    text-shadow: 0 0 8px rgba(14, 165, 233, 0.3);
}

@keyframes prog-percentage-precision {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 8px rgba(14, 165, 233, 0.3);
    }
    50% {
        transform: scale(1.03);
        text-shadow: 0 0 15px rgba(14, 165, 233, 0.5);
    }
}

/* Score badge glow */
.prog-score-badge-glow {
    animation: prog-score-precision-glow 2.5s ease-in-out infinite;
}

@keyframes prog-score-precision-glow {
    0%, 100% { background-color: rgba(75, 85, 99, 0.2); }
    50% { background-color: rgba(75, 85, 99, 0.4); box-shadow: 0 0 12px rgba(75, 85, 99, 0.3); }
}

/* Level progress motivation */
.prog-level-progress-motivation {
    background: linear-gradient(135deg, #fef7cd, #fef3c7);
    padding: 1.5rem;
    border-radius: 1rem;
    border-left: 4px solid #f59e0b;
    position: relative;
    margin-bottom: 1rem;
}

/* Level journey inspiration */
.prog-level-journey-inspiration {
    margin-top: 1rem;
    text-align: center;
}

/* Level progress bar (shimmer) */
.prog-level-progress-bar {
    position: relative;
    overflow: hidden;
}

.prog-level-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: prog-progress-shimmer 2s infinite;
}

@keyframes prog-progress-shimmer {
    0% { transform: translateX(-30px); }
    100% { transform: translateX(300px); }
}

/* Progress celebration */
.prog-celebration {
    text-align: center;
    animation: prog-celebration-sparkle 2s ease-in-out infinite alternate;
}

@keyframes prog-celebration-sparkle {
    0% { opacity: 0.8; }
    100% { opacity: 1; text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
}

/* Level progress enhanced card */
.prog-level-progress-enhanced {
    background: hsl(var(--accent));
    border: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
    padding: 2rem !important;
    margin-bottom: 3rem !important;
}

.prog-level-progress-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
    animation: prog-progress-card-glow 3s ease-in-out infinite;
}

@keyframes prog-progress-card-glow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.prog-level-progress-enhanced .assessment-title {
    margin-bottom: 0.75rem !important;
}

.prog-level-progress-enhanced .assessment-subtitle {
    margin-bottom: 2rem !important;
}

/* Level header section */
.prog-level-header-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
    border-radius: 16px;
    padding: 2.5rem;
    margin: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    border: 1px solid rgba(59, 130, 246, 0.12);
    position: relative;
    min-height: 180px;
}

/* Level current display */
.prog-level-current-display {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Level badge large */
.prog-level-badge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    animation: prog-level-badge-pulse 3s ease-in-out infinite;
    min-width: 120px;
}

@keyframes prog-level-badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3); }
    50% { transform: scale(1.02); box-shadow: 0 12px 32px rgba(59, 130, 246, 0.4); }
}

/* Level badge text */
.prog-level-badge-text {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

/* Level number large */
.prog-level-number-large {
    font-size: 3rem;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    animation: prog-level-number-enhanced 2s ease-in-out infinite;
}

@keyframes prog-level-number-enhanced {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
}

/* Level next info */
.prog-level-next-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Next level text */
.prog-next-level-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Progress percentage large */
.prog-percentage-large {
    font-size: 1.75rem;
    font-weight: 800;
    color: #10b981;
    text-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    animation: prog-percentage-emphasis 2s ease-in-out infinite;
}

@keyframes prog-percentage-emphasis {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); text-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); }
}

/* XP display container */
.prog-xp-display-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
    min-width: 200px;
}

/* XP current large */
.prog-xp-current-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 14px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
    transition: all 0.3s ease;
}

.prog-xp-current-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* XP label large */
.prog-xp-label-large {
    font-size: 0.9rem;
    color: #059669;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    opacity: 1;
}

/* XP number large */
.prog-xp-number-large {
    font-size: 2.25rem;
    font-weight: 800;
    color: #047857;
    animation: prog-xp-number-glow 2.5s ease-in-out infinite;
    line-height: 1;
}

@keyframes prog-xp-number-glow {
    0%, 100% { color: #059669; }
    50% { color: #10b981; text-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
}

/* XP needed display */
.prog-xp-needed-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
    transition: all 0.3s ease;
}

.prog-xp-needed-display:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* XP needed label */
.prog-xp-needed-label {
    font-size: 0.85rem;
    color: #d97706;
    font-weight: 600;
    margin-bottom: 0.4rem;
    opacity: 1;
}

/* XP needed number */
.prog-xp-needed-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #b45309;
    line-height: 1;
}

/* Progress visualization */
.prog-visualization {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), rgba(34, 197, 94, 0.04));
    border-radius: 16px;
    padding: 3rem;
    margin: 2rem 0;
    border: 1px solid rgba(16, 185, 129, 0.12);
    min-height: 200px;
}

/* Progress bar container large */
.prog-bar-container-large {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Progress labels section */
.prog-labels-section {
    margin-bottom: 1.5rem;
}

/* Progress labels */
.prog-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

/* Progress start/end labels */
.prog-start-label,
.prog-end-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    padding: 0.75rem 1.25rem;
    background: hsl(var(--accent));
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border));
}

/* Progress bar section */
.prog-bar-section {
    margin: 2rem 0;
    padding: 1.5rem 0;
}

/* Progress bar wrapper */
.prog-bar-wrapper {
    position: relative;
    margin: 0;
    padding: 0.5rem 0;
}

/* Level progress bar redesigned */
.prog-level-bar-redesigned {
    border-radius: 16px !important;
    background: rgba(229, 231, 235, 0.8) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.prog-level-bar-redesigned .progress-bar {
    background: linear-gradient(90deg, #10b981, #34d399, #6ee7b7) !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    position: relative;
    animation: prog-bar-shimmer 3s ease-in-out infinite;
}

@keyframes prog-bar-shimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}

/* Progress percentage overlay */
.prog-percentage-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    z-index: 10;
    animation: prog-percentage-overlay-glow 2s ease-in-out infinite;
}

@keyframes prog-percentage-overlay-glow {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
}

/* XP markers section */
.prog-xp-markers-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(16, 185, 129, 0.15);
}

/* XP markers */
.prog-xp-markers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0 1rem;
}

/* XP marker start/end */
.prog-xp-marker-start,
.prog-xp-marker-end {
    font-size: 1rem;
    color: #059669;
    font-weight: 600;
    padding: 0.5rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Level motivation redesigned */
.prog-level-motivation {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
    border-radius: 16px;
    padding: 2rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(245, 158, 11, 0.12);
}

/* Motivation content */
.prog-motivation-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Motivation main */
.prog-motivation-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

/* Motivation icon */
.prog-motivation-icon {
    font-size: 2rem;
    animation: prog-motivation-icon-glow 2.5s ease-in-out infinite;
}

@keyframes prog-motivation-icon-glow {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.1); filter: brightness(1.3); }
}

/* Motivation text container */
.prog-motivation-text-container {
    flex: 1;
}

/* Motivation title */
.prog-motivation-title {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Nunito', var(--font-family-sans);
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
    animation: prog-motivation-title-float 3s ease-in-out infinite;
}

@keyframes prog-motivation-title-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* Motivation description */
.prog-motivation-description {
    font-size: 1.125rem;
    color: hsl(var(--muted-foreground));
    line-height: 1.6;
    margin: 0;
    animation: prog-motivation-glow 3s ease-in-out infinite;
}

@keyframes prog-motivation-glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 4px rgba(245, 158, 11, 0.2); }
}

/* Level stats mini */
.prog-level-stats-mini {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

/* Stat mini */
.prog-stat-mini {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    border: 1px solid hsl(var(--border));
    transition: all 0.3s ease;
    background: hsl(var(--accent));
    color: hsl(var(--primary));
}

/* Stat mini XP */
.prog-stat-mini-xp {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(52, 211, 153, 0.15));
    border-color: rgba(16, 185, 129, 0.25);
    color: #047857;
}

.prog-stat-mini-xp i {
    color: #059669;
}

/* Stat mini level */
.prog-stat-mini-level {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.15));
    border-color: rgba(245, 158, 11, 0.25);
    color: #92400e;
}

.prog-stat-mini-level i {
    color: #d97706;
}

.prog-stat-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15);
}

.prog-stat-mini-xp:hover {
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.2);
}

.prog-stat-mini-level:hover {
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2);
}

.prog-stat-mini i {
    font-size: 1.125rem;
    animation: prog-stat-icon-bounce 2s ease-in-out infinite;
}

@keyframes prog-stat-icon-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Trend visualization card */
.prog-trend-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    box-shadow: var(--shadow-md);
}

/* Trend summary grid */
.prog-trend-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Trend insight card */
.prog-trend-insight-card {
    background: hsl(var(--card));
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid hsl(var(--border));
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.prog-trend-insight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Trend header */
.prog-trend-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* Trend title */
.prog-trend-title {
    font-weight: 600;
    font-family: 'Nunito', var(--font-family-sans);
    color: hsl(var(--foreground));
    font-size: 1rem;
}

/* Trend content */
.prog-trend-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Trend direction */
.prog-trend-direction {
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-align: center;
    text-transform: capitalize;
}

/* Trend direction states */
.prog-trend-improving {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    animation: prog-trend-improve-glow 2s ease-in-out infinite;
}

.prog-trend-stable {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.prog-trend-declining {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    animation: prog-trend-decline-pulse 2s ease-in-out infinite;
}

.prog-trend-unknown {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

@keyframes prog-trend-improve-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
}

@keyframes prog-trend-decline-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Trend velocity/average/current streak */
.prog-trend-velocity,
.prog-trend-average,
.prog-trend-current-streak {
    font-size: 1.2rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Trend motivation/summary/streak motivation */
.prog-trend-motivation,
.prog-trend-summary,
.prog-streak-motivation {
    font-style: italic;
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Trend strengths */
.prog-trend-strengths {
    font-size: 0.9rem;
    color: #059669;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.5rem;
    border-radius: 6px;
}

/* Trend best streak */
.prog-trend-best-streak {
    font-size: 0.9rem;
    color: #7c2d12;
    font-weight: 500;
}

/* Trend recommendations */
.prog-trend-recommendations {
    margin-top: 2rem;
    padding: 1.5rem;
    background: hsl(var(--accent));
    border-radius: var(--radius);
    border-left: 4px solid hsl(var(--primary));
}

/* Recommendation title */
.prog-recommendation-title {
    color: hsl(var(--primary));
    font-family: 'Nunito', var(--font-family-sans);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/* Recommendation list */
.prog-recommendation-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Recommendation item */
.prog-recommendation-item {
    display: flex;
    align-items: flex-start;
    color: hsl(var(--foreground));
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Progress stats grid spacing */
.prog-stats-grid-spacing {
    gap: 2rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 3rem !important;
}

.prog-stats-grid-spacing > div {
    margin-bottom: 0 !important;
}

/* Level indicator wrapper */
.prog-level-indicator-wrapper {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

/* Key stage progress section */
.prog-key-stage-progress-section {
    margin-bottom: 2rem;
}

.prog-key-stage-progress-section .key-stage-card {
    min-height: auto;
    padding: var(--space-4) var(--space-5);
    gap: 0.5rem;
}

.prog-key-stage-progress-section .key-stage-card .card-icon {
    margin-bottom: 0.25rem;
}

.prog-key-stage-progress-section .key-stage-card .card-icon i {
    font-size: 1.75rem;
}

.prog-key-stage-progress-section .key-stage-card .card-title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.prog-key-stage-progress-section .key-stage-card .age-badge {
    margin-bottom: 0.25rem;
}

.prog-key-stage-progress-section .key-stage-card .card-description {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.prog-key-stage-progress-section .assessment-title {
    position: relative;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-4);
}

.prog-key-stage-progress-section .assessment-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #a855f7);
    border-radius: 2px;
}

.prog-key-stage-progress-section .assessment-subtitle {
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-6);
}

/* Locked premium start button */
.prog-start-learning-btn-locked {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    cursor: not-allowed;
    opacity: 0.85;
}

.prog-start-learning-btn-locked:hover {
    transform: none;
    box-shadow: none;
}

/* Inline style extractions */
.prog-level-circle {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    margin: 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.prog-level-circle-number {
    color: #212529;
    font-size: 1.5rem;
    font-weight: bold;
}

.prog-streak-badge-override {
    background: #d97706 !important;
    color: white !important;
    font-weight: 600 !important;
}

/* Mobile responsiveness for progress page */
@media (max-width: 768px) {
    .prog-celebration-hover:hover::after {
        display: none;
    }

    .prog-level-number-pop,
    .prog-lesson-count-celebrate,
    .prog-streak-number-flame,
    .prog-score-percentage-pop {
        font-size: 2rem;
    }

    .prog-stats-motivation,
    .prog-level-progress-motivation {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .prog-level-voice,
    .prog-lesson-voice,
    .prog-streak-voice,
    .prog-score-voice {
        font-size: 0.875rem;
        line-height: 1.3;
    }

    .prog-stats-card {
        min-height: 240px;
        padding: 20px 16px 24px 16px;
    }

    .prog-stats-card .card-description {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .prog-level-header-section {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .prog-level-current-display {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        width: 100%;
    }

    .prog-level-badge-large {
        min-width: 100px;
        padding: 1.25rem 1.5rem;
    }

    .prog-level-number-large {
        font-size: 2.5rem;
    }

    .prog-percentage-large {
        font-size: 1.5rem;
    }

    .prog-xp-display-container {
        flex-direction: row;
        gap: 1rem;
        align-items: stretch;
        width: 100%;
        margin-top: 1.5rem;
    }

    .prog-xp-current-large,
    .prog-xp-needed-display {
        flex: 1;
        align-items: center;
        padding: 1rem;
    }

    .prog-xp-number-large {
        font-size: 1.5rem;
    }

    .prog-visualization,
    .prog-level-motivation {
        padding: 2rem;
        min-height: auto;
    }

    .prog-bar-container-large {
        gap: 1.5rem;
    }

    .prog-labels-section {
        margin-bottom: 1rem;
    }

    .prog-labels {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        padding: 0;
    }

    .prog-start-label,
    .prog-end-label {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        text-align: center;
        width: 100%;
        max-width: 200px;
    }

    .prog-bar-section {
        margin: 1.5rem 0;
        padding: 1rem 0;
    }

    .prog-percentage-overlay {
        font-size: 1rem;
    }

    .prog-xp-markers-section {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .prog-xp-markers {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        padding: 0;
    }

    .prog-xp-marker-start,
    .prog-xp-marker-end {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
        text-align: center;
        width: 100%;
        max-width: 250px;
    }

    .prog-motivation-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .prog-motivation-title {
        font-size: 1.25rem;
    }

    .prog-motivation-description {
        font-size: 1rem;
    }

    .prog-level-stats-mini {
        flex-direction: column;
        gap: 1rem;
    }

    .prog-stat-mini {
        justify-content: center;
    }

    .prog-level-indicator-wrapper {
        justify-content: center;
    }

    /* Trend cards mobile */
    .prog-trend-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .prog-trend-insight-card {
        padding: 1rem;
    }

    .prog-trend-direction {
        font-size: 1rem;
    }

    .prog-trend-velocity,
    .prog-trend-average,
    .prog-trend-current-streak {
        font-size: 1.1rem;
    }

    .prog-trend-recommendations {
        padding: 1rem;
    }
}

/* Tablet responsiveness for trend grid */
@media (max-width: 992px) {
    .prog-trend-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Accessibility — scoped reduced motion for progress page */
@media (prefers-reduced-motion: reduce) {
    .progress-hero-compact *,
    [class^="prog-"],
    [class*=" prog-"] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .progress-hero-compact .animate-fade-in-up {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---- Progress Page Dark Mode ---- */
[data-theme="dark"] .prog-stats-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .prog-stats-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .prog-stats-card .card-title,
[data-theme="dark"] .prog-stats-card .card-subtitle,
[data-theme="dark"] .prog-stats-card .card-description {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-stats-motivation {
    background: hsl(var(--accent));
    border-left-color: hsl(var(--primary));
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-stats-motivation p,
[data-theme="dark"] .prog-stats-inspiration {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .prog-level-progress-enhanced {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .prog-level-progress-enhanced .assessment-title,
[data-theme="dark"] .prog-level-progress-enhanced .assessment-subtitle {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-level-motivation {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .prog-motivation-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-motivation-description {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .prog-trend-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .prog-trend-insight-card {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .prog-trend-header {
    border-bottom-color: hsl(var(--border));
}

[data-theme="dark"] .prog-trend-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-trend-velocity,
[data-theme="dark"] .prog-trend-average,
[data-theme="dark"] .prog-trend-current-streak {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-trend-motivation,
[data-theme="dark"] .prog-trend-summary,
[data-theme="dark"] .prog-streak-motivation {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .prog-trend-recommendations {
    background: hsl(var(--accent));
    border-left-color: hsl(var(--primary));
}

[data-theme="dark"] .prog-recommendation-title {
    color: hsl(var(--primary));
}

[data-theme="dark"] .prog-recommendation-item {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-stat-mini {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-stat-mini-xp {
    background: hsla(var(--success), 0.15);
    border-color: hsla(var(--success), 0.3);
}

[data-theme="dark"] .prog-stat-mini-level {
    background: hsla(var(--warning), 0.15);
    border-color: hsla(var(--warning), 0.3);
}

[data-theme="dark"] .prog-level-celebration-card,
[data-theme="dark"] .progress-stats-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .progress-stats-card .card-title,
[data-theme="dark"] .progress-stats-card .card-subtitle,
[data-theme="dark"] .progress-stats-card .card-description {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-key-stage-progress-section .assessment-title,
[data-theme="dark"] .prog-key-stage-progress-section .assessment-subtitle {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-start-learning-btn-locked {
    background: linear-gradient(135deg, hsl(var(--muted-foreground)), hsl(var(--secondary)));
}

[data-theme="dark"] .prog-next-level-text {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-start-label,
[data-theme="dark"] .prog-end-label {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

[data-theme="dark"] .prog-trend-insight-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   KEY STAGE LISTING PAGE STYLES (.ksl- prefix) — v2026-02-22
   ========================================================================== */

/* Container */
.ksl-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5);
    font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
}

/* Student Status Card - Gradient Header */
.ksl-status-card {
    background: var(--gradient-hero);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.ksl-info {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.ksl-avatar {
    font-size: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ksl-info h2 {
    margin: 0 0 var(--space-2) 0;
    font-size: 28px;
    font-weight: 700;
}

.ksl-level-display {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    align-items: center;
}

.ksl-age-range,
.ksl-lesson-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 14px;
}

.ksl-access-badge {
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}

.ksl-access-badge.free {
    background: rgba(16, 185, 129, 0.3);
    color: #10f981;
}

.ksl-access-badge.premium {
    background: rgba(245, 158, 11, 0.3);
    color: #ffd700;
}

.ksl-description {
    margin-top: var(--space-2);
    opacity: 0.9;
    line-height: 1.5;
}

/* Difficulty Selection Cards */
.ksl-difficulty-selection {
    margin-bottom: var(--space-8);
}

.ksl-difficulty-selection h3 {
    color: hsl(var(--foreground));
    margin-bottom: var(--space-5);
    font-size: 1.5rem;
}

.ksl-difficulty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.ksl-difficulty-card {
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--space-4);
    background: hsl(var(--card));
    cursor: pointer;
    transition: all 0.3s ease;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.ksl-difficulty-card:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.ksl-difficulty-card.active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.ksl-difficulty-card.all { border-color: #6b7280; }
.ksl-difficulty-card.all.active {
    border-color: #4b5563;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.ksl-difficulty-card.easy { border-color: #28a745; }
.ksl-difficulty-card.easy.active {
    border-color: #28a745;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}

.ksl-difficulty-card.medium { border-color: #ffc107; }
.ksl-difficulty-card.medium.active {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
}

.ksl-difficulty-card.hard { border-color: #dc3545; }
.ksl-difficulty-card.hard.active {
    border-color: #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}

.ksl-difficulty-card.elite { border-color: #6f42c1; }
.ksl-difficulty-card.elite.active {
    border-color: #6f42c1;
    background: linear-gradient(135deg, #e7e0f5 0%, #d4c5f0 100%);
}

.ksl-difficulty-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

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

.ksl-difficulty-name {
    font-weight: 600;
    color: hsl(var(--foreground));
    font-size: 1rem;
}

.ksl-difficulty-badge {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.ksl-all-badge { background: #6b7280; color: white; }
.ksl-difficulty-card.easy .ksl-difficulty-badge { background: #28a745; color: white; }
.ksl-difficulty-card.medium .ksl-difficulty-badge { background: #ffc107; color: #000; }
.ksl-difficulty-card.hard .ksl-difficulty-badge { background: #dc3545; color: white; }
.ksl-difficulty-card.elite .ksl-difficulty-badge { background: #6f42c1; color: white; }

.ksl-difficulty-description {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

/* Lesson Cards Section */
.ksl-lesson-selection {
    margin-bottom: var(--space-8);
}

.ksl-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-4);
}

.ksl-section-header h3 {
    color: hsl(var(--foreground));
    margin: 0;
    font-size: 1.5rem;
}

.ksl-section-controls {
    display: flex;
    gap: var(--space-5);
    align-items: center;
}

.ksl-lessons-info {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.ksl-lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-5);
}

/* Lesson card — preserve exact visual styles (KSLST-02) */
.ksl-lesson-card {
    border: 2px solid;
    border-radius: var(--radius);
    padding: var(--space-5);
    background: white;
    transition: all 0.3s ease;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.ksl-lesson-card:hover:not(.locked) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.ksl-lesson-card.easy { border-color: #28a745; }
.ksl-lesson-card.medium { border-color: #ffc107; }
.ksl-lesson-card.hard { border-color: #dc3545; }
.ksl-lesson-card.elite { border-color: #6f42c1; }

.ksl-lesson-card.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.ksl-lesson-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.ksl-lesson-header h4 {
    margin: 0;
    color: hsl(var(--foreground));
    font-size: 1.125rem;
}

/* Difficulty badge inside lesson card — preserve exact colours (KSLST-02) */
.ksl-difficulty {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.ksl-lesson-card.easy .ksl-difficulty { background: #28a745; color: white; }
.ksl-lesson-card.medium .ksl-difficulty { background: #ffc107; color: #000; }
.ksl-lesson-card.hard .ksl-difficulty { background: #dc3545; color: white; }
.ksl-lesson-card.elite .ksl-difficulty { background: #6f42c1; color: white; }

.ksl-lesson-info {
    margin-bottom: var(--space-4);
}

.ksl-lesson-description {
    color: hsl(var(--muted-foreground));
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.ksl-lesson-stats {
    display: flex;
    gap: var(--space-4);
    font-size: 14px;
    color: hsl(var(--muted-foreground));
    flex-wrap: wrap;
    align-items: center;
}

/* Push pills to the far right of the stats row */
.ksl-stats-pills {
    margin-left: auto;
}

.ksl-lesson-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* XP reward — preserve green colour (KSLST-02) */
.ksl-xp-green,
.ksl-lesson-stats .ksl-xp-green,
.ksl-lesson-card .ksl-xp-green,
.ksl-xp-reward.ksl-xp-green,
.ksl-lesson-stats span.ksl-xp-reward,
.ksl-lesson-card .ksl-lesson-stats .ksl-xp-reward,
.ksl-lesson-stats .ksl-xp-reward {
    color: #28a745 !important;
    font-weight: 600;
}

.ksl-status {
    color: hsl(var(--muted-foreground));
}

/* Start Lesson Button — preserve gradient (KSLST-02) */
.ksl-btn-start {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #4A90E2, #7B68EE);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    margin: var(--space-4) 0;
}

.ksl-btn-start:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.ksl-btn-start:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ksl-btn-start.loading {
    background: linear-gradient(135deg, #6b7280, #9ca3af);
}

.ksl-btn-start.locked {
    background: hsl(var(--border));
    color: hsl(var(--muted-foreground));
    cursor: not-allowed;
}

/* Empty State */
.ksl-empty-state {
    text-align: center;
    padding: 60px var(--space-5);
    color: hsl(var(--muted-foreground));
}

.ksl-empty-state i {
    font-size: 4rem;
    margin-bottom: var(--space-5);
    color: hsl(var(--muted-foreground));
}

.ksl-empty-state h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: hsl(var(--foreground));
}

.ksl-empty-state p {
    font-size: 1rem;
    opacity: 0.8;
}

/* Summary Card */
.ksl-summary-card {
    background: hsl(var(--muted));
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-top: var(--space-8);
}

.ksl-summary-card h3 {
    color: hsl(var(--primary));
    margin-bottom: var(--space-5);
    font-size: 1.5rem;
}

.ksl-summary-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.ksl-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-5);
}

.ksl-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.ksl-stat-item i {
    font-size: 24px;
    color: hsl(var(--primary));
}

.ksl-stat-item div {
    display: flex;
    flex-direction: column;
}

.ksl-stat-label {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.ksl-stat-value {
    font-size: 1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.ksl-key-topics {
    border-top: 1px solid hsl(var(--border));
    padding-top: var(--space-5);
}

.ksl-key-topics h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: var(--space-4);
}

.ksl-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.ksl-topic-pill {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: hsl(var(--foreground));
    font-size: 0.875rem;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-weight: 500;
    transition: all 0.3s ease;
}

.ksl-topic-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Pagination Container */
.ksl-pagination-container {
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
}

/* Spin animation for loading state */
.ksl-animate-spin {
    animation: ksl-spin 1s linear infinite;
}

@keyframes ksl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .ksl-container {
        padding: 1rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    .ksl-info {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .ksl-info h2 {
        font-size: 1.5rem;
    }

    .ksl-level-display {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ksl-difficulty-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ksl-lesson-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ksl-section-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ksl-section-controls {
        width: 100%;
        justify-content: space-between;
    }

    .ksl-summary-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ksl-btn-start,
    .ksl-difficulty-card {
        min-height: 44px;
        padding: 0.75rem 1rem;
        touch-action: manipulation;
    }

    .ksl-lesson-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .ksl-status-card h2 {
        font-size: 1.5rem !important;
    }

    .ksl-difficulty-selection h3,
    .ksl-lesson-selection h3,
    .ksl-summary-card h3 {
        font-size: 1.25rem !important;
    }

    /* Enhanced focus indicators for mobile */
    .ksl-btn-start:focus,
    .ksl-difficulty-card:focus,
    .ksl-lesson-card:focus {
        outline: 2px solid hsl(var(--ring));
        outline-offset: 2px;
        box-shadow: 0 0 0 4px hsla(var(--ring), 0.25);
    }

    /* Ensure sufficient colour contrast on mobile */
    .ksl-lesson-description,
    .ksl-difficulty-description {
        color: hsl(var(--foreground));
    }

    /* Performance — reduce shadows on mobile */
    .ksl-lesson-card,
    .ksl-difficulty-card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.15s ease;
    }

    /* Disable hover effects on touch devices */
    .ksl-lesson-card:hover,
    .ksl-difficulty-card:hover {
        transform: none;
    }
}

@media (max-width: 576px) {
    .ksl-container {
        padding: 0.75rem;
    }

    .ksl-summary-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ksl-stat-item {
        justify-content: space-between;
        padding: 0.75rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 0.5rem;
        min-height: 44px;
    }

    .ksl-stat-item > div {
        text-align: right;
    }

    .ksl-stat-item i {
        font-size: 1.25rem;
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }

    .ksl-stat-label {
        font-size: 0.8rem;
    }

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

    .ksl-lesson-description,
    .ksl-difficulty-description {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .ksl-avatar {
        width: 60px;
        height: 60px;
        font-size: 36px;
    }

    .ksl-age-range,
    .ksl-lesson-count,
    .ksl-access-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .ksl-lesson-stats {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .ksl-lesson-stats span {
        font-size: 0.875rem;
    }
}

/* Ultra-mobile optimisation for very small screens */
@media (max-width: 480px) {
    .ksl-container {
        padding: 0.5rem;
    }

    .ksl-difficulty-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .ksl-lesson-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .ksl-summary-stats {
        gap: 0.5rem;
    }

    .ksl-stat-item {
        padding: 0.75rem 0.5rem;
    }

    .ksl-stat-item i {
        font-size: 1.1rem;
        width: 20px;
    }

    .ksl-stat-label {
        font-size: 0.75rem;
    }

    .ksl-stat-value {
        font-size: 1rem;
    }

    .ksl-btn-start {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .ksl-lesson-card,
    .ksl-difficulty-card {
        padding: 0.75rem;
    }

    .ksl-lesson-header h4 {
        font-size: 1rem;
    }

    .ksl-difficulty-name {
        font-size: 0.9rem;
    }

    .ksl-status-card {
        padding: 1rem;
    }

    .ksl-info h2 {
        font-size: 1.25rem;
    }

    .ksl-description {
        font-size: 0.875rem;
    }

    /* Filter controls: allow wrapping so page-size selector can drop to its own line */
    .ksl-section-controls {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    /* When the controls wrap, the page-size selector takes the full second line */
    .ksl-section-controls .page-size-selector {
        flex: 1 1 100%;
    }

    .ksl-section-controls .page-size-select {
        width: 100%;
        min-width: auto;
    }

    /* Filter trigger and lesson count stay on the first line together */
    .ksl-section-controls > div:first-child {
        flex-shrink: 0;
    }

    .ksl-lessons-info {
        flex: 1;
        font-size: 0.8125rem;
    }
}

/* ==========================================================================
   KEY STAGE LISTING PAGE — DARK MODE SELECTORS
   [data-theme="dark"] overrides for all .ksl- page chrome elements
   ========================================================================== */

/* Page container */
[data-theme="dark"] .ksl-container {
    color: hsl(var(--foreground));
}

/* Status card — gradient works in both modes; strengthen shadow only */
[data-theme="dark"] .ksl-status-card {
    box-shadow: var(--shadow-lg);
}

/* Difficulty selection section */
[data-theme="dark"] .ksl-difficulty-selection h3 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-difficulty-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .ksl-difficulty-card:hover:not(.locked) {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .ksl-difficulty-name {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-difficulty-description {
    color: hsl(var(--muted-foreground));
}

/* Active difficulty cards — darker gradient backgrounds in dark mode */
[data-theme="dark"] .ksl-difficulty-card.all.active {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border-color: #6b7280;
}

[data-theme="dark"] .ksl-difficulty-card.easy.active {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    border-color: #28a745;
}

[data-theme="dark"] .ksl-difficulty-card.medium.active {
    background: linear-gradient(135deg, #713f12 0%, #92400e 100%);
    border-color: #ffc107;
}

[data-theme="dark"] .ksl-difficulty-card.hard.active {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    border-color: #dc3545;
}

[data-theme="dark"] .ksl-difficulty-card.elite.active {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 100%);
    border-color: #6f42c1;
}

/* Section header */
[data-theme="dark"] .ksl-section-header h3 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-lessons-info {
    color: hsl(var(--muted-foreground));
}

/* Lesson cards — light touch: background and text only, borders preserved */
[data-theme="dark"] .ksl-lesson-card {
    background: hsl(var(--card));
}

[data-theme="dark"] .ksl-lesson-header h4 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-lesson-description {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .ksl-lesson-stats {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .ksl-status {
    color: hsl(var(--muted-foreground));
}

/* Start lesson button — gradient works in both modes; adjust disabled and loading states */
[data-theme="dark"] .ksl-btn-start:disabled {
    opacity: 0.5;
}

[data-theme="dark"] .ksl-btn-start.loading {
    background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--border)));
}

/* Empty state */
[data-theme="dark"] .ksl-empty-state {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .ksl-empty-state h3 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-empty-state i {
    color: hsl(var(--muted-foreground));
}

/* Summary card */
[data-theme="dark"] .ksl-summary-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .ksl-summary-card h3 {
    color: hsl(var(--primary));
}

[data-theme="dark"] .ksl-stat-item i {
    color: hsl(var(--primary));
}

[data-theme="dark"] .ksl-stat-label {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .ksl-stat-value {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-key-topics {
    border-top-color: hsl(var(--border));
}

[data-theme="dark"] .ksl-key-topics h4 {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-topic-pill {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

/* ==========================================================================
   KEY STAGE LISTING PAGE — REDUCED MOTION
   Scoped to .ksl- elements only
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ksl-container *,
    [class*="ksl-"] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =================================================================
   Equation Builder Component (.eqbld-*)
   Step-by-step notebook for interactive equation solving
   ================================================================= */

/* Notebook container — replaces scales-container */
.eqbld-notebook-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(0.5rem, 4vw, 2rem);
    width: 100%;
    gap: clamp(1rem, 3vw, 2rem);
    font-family: var(--font-sans);
}

/* Notebook — warm paper background, scrollable */
.eqbld-notebook {
    width: 100%;
    max-width: min(700px, 95vw);
    max-height: 400px;
    overflow-y: auto;
    background: #fffdf7;
    border: 2px solid #e8e0d0;
    border-radius: 12px;
    padding: clamp(8px, 2vw, 16px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Individual step row */
.eqbld-step {
    display: flex;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
    padding: clamp(10px, 2vw, 16px) clamp(8px, 2vw, 12px);
    border-bottom: 1px solid #e8e0d0;
    transition: background-color 0.2s ease;
}

.eqbld-step:last-child {
    border-bottom: none;
}

/* Current step highlight */
.eqbld-step-current {
    background: hsl(var(--student-primary) / 0.06);
    border-radius: 8px;
}

/* Solved step — green tint */
.eqbld-step-solved {
    background: hsl(var(--success) / 0.08);
    border-radius: 8px;
}

/* Step number badge */
.eqbld-step-number {
    min-width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--student-primary) / 0.1);
    color: hsl(var(--student-primary));
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    font-weight: 700;
    border-radius: 9999px;
    flex-shrink: 0;
    padding: 0 12px;
}

/* Equation line — horizontal flex for terms */
.eqbld-equation-line {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 8px);
    flex-wrap: wrap;
    flex: 1;
    min-height: 48px;
}

/* Equation side — flex group for left/right */
.eqbld-equation-side {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 6px);
    flex-wrap: wrap;
}

/* Inline equals sign */
.eqbld-equals-sign {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    font-weight: 700;
    color: #334155;
    padding: 0 clamp(4px, 1vw, 8px);
    flex-shrink: 0;
}

/* Inline operator (+) between terms */
.eqbld-operator {
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 600;
    color: #64748b;
    padding: 0 2px;
}

/* Operation annotation between steps */
.eqbld-step-annotation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: clamp(4px, 1vw, 8px) clamp(8px, 2vw, 12px);
    gap: 4px 8px;
}

.eqbld-op-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    font-weight: 700;
    color: white;
    background: hsl(var(--student-primary));
    border-radius: 8px;
    white-space: nowrap;
}

/* Badge drop-in animation — left badge first, right badge staggered */
.eqbld-badge-drop-left {
    animation: eqbld-badge-drop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.eqbld-badge-drop-right {
    animation: eqbld-badge-drop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s both;
}

@keyframes eqbld-badge-drop {
    0% {
        opacity: 0;
        transform: translateY(-14px) scale(0.7);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.eqbld-annotation-text {
    font-style: italic;
    font-size: clamp(0.75rem, 1.8vw, 0.85rem);
    color: hsl(var(--student-primary));
    font-weight: 500;
}

/* Pre-simplify equation — full-width forces it below the badge row */
.eqbld-presimplify {
    width: 100%;
    text-align: center;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
    color: #64748b;
    padding: 2px 0;
}

.eqbld-presimplify-fade {
    animation: eqbld-presimplify-show 0.4s ease-out 0.2s both;
}

@keyframes eqbld-presimplify-show {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Green checkmark for solved step */
.eqbld-solved-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: hsl(var(--success));
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Term tiles - 60px minimum for EQBLD-07 */
.eqbld-term {
    min-width: 60px;
    min-height: 60px;
    padding: clamp(8px, 2vw, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(var(--student-primary) / 0.1), hsl(var(--student-secondary) / 0.1));
    border: 2px solid hsl(var(--student-primary) / 0.3);
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 600;
}

.eqbld-term:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px hsl(var(--student-primary) / 0.2);
}

.eqbld-term.selected {
    transform: scale(1.1);
    border-color: hsl(var(--student-primary));
    box-shadow: 0 0 0 3px hsl(var(--student-primary) / 0.3);
    background: linear-gradient(135deg, hsl(var(--student-primary) / 0.2), hsl(var(--student-secondary) / 0.2));
}

.eqbld-term.highlighted {
    animation: eqbld-term-glow 0.5s ease-out;
}

@keyframes eqbld-term-glow {
    0% { box-shadow: 0 0 0 0 hsl(var(--student-accent) / 0.7); }
    100% { box-shadow: 0 0 20px 10px hsl(var(--student-accent) / 0); }
}

/* Step entry animation — slide down + fade when new step appears */
.eqbld-step-animate-in {
    animation: eqbld-step-enter 0.3s ease-out both;
}

@keyframes eqbld-step-enter {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Annotation entry animation — slide from left + fade */
.eqbld-annotation-animate-in {
    animation: eqbld-annotation-enter 0.25s ease-out both;
}

@keyframes eqbld-annotation-enter {
    0% {
        opacity: 0;
        transform: translateX(-12px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Dark mode — notebook */
[data-theme="dark"] .eqbld-notebook {
    background: #1a1d23;
    border-color: #374151;
}

[data-theme="dark"] .eqbld-step {
    border-bottom-color: #374151;
}

[data-theme="dark"] .eqbld-step-current {
    background: hsl(var(--student-primary) / 0.12);
}

[data-theme="dark"] .eqbld-step-solved {
    background: hsl(var(--success) / 0.12);
}

[data-theme="dark"] .eqbld-step-number {
    background: hsl(var(--student-primary) / 0.2);
}

[data-theme="dark"] .eqbld-equals-sign {
    color: #e5e7eb;
}

[data-theme="dark"] .eqbld-operator {
    color: #9ca3af;
}

[data-theme="dark"] .eqbld-annotation-text {
    color: hsl(var(--student-primary) / 0.8);
}

[data-theme="dark"] .eqbld-op-badge {
    background: hsl(var(--student-primary) / 0.85);
}

[data-theme="dark"] .eqbld-presimplify {
    color: #9ca3af;
}

[data-theme="dark"] .eqbld-term {
    background: linear-gradient(135deg, hsl(var(--student-primary) / 0.2), hsl(var(--student-secondary) / 0.2));
    border-color: hsl(var(--student-primary) / 0.4);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .eqbld-step {
        transition: none;
    }
    .eqbld-term {
        transition: none;
    }
    .eqbld-term.highlighted {
        animation: none;
    }
    .eqbld-step-animate-in {
        animation: none;
    }
    .eqbld-annotation-animate-in {
        animation: none;
    }
    .eqbld-badge-drop-left,
    .eqbld-badge-drop-right {
        animation: none;
    }
    .eqbld-presimplify-fade {
        animation: none;
    }
}


/* ========================================
   Phase 94: Equation Builder - Action Panel & Controls (Plan 02)
   ======================================== */

/* Action Panel */
.eqbld-action-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 2vw, 12px);
    width: 100%;
    max-width: min(600px, 95vw);
    padding: clamp(12px, 3vw, 20px);
    background: hsl(var(--student-primary) / 0.05);
    border-radius: 16px;
    border: 2px solid hsl(var(--student-primary) / 0.1);
    margin-top: clamp(16px, 4vw, 24px);
}

.eqbld-action-title {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-weight: 600;
    color: var(--text-primary, #334155);
}

.eqbld-action-buttons {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    flex-wrap: wrap;
    justify-content: center;
}

.eqbld-action-btn {
    min-width: 60px;
    min-height: 60px;
    padding: clamp(12px, 3vw, 16px);
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    font-weight: 700;
    background: white;
    border: 2px solid hsl(var(--student-primary) / 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: hsl(var(--student-primary));
}

.eqbld-action-btn:hover:not(:disabled) {
    background: hsl(var(--student-primary) / 0.1);
    border-color: hsl(var(--student-primary));
    transform: scale(1.05);
}

.eqbld-action-btn.active {
    background: hsl(var(--student-primary));
    border-color: hsl(var(--student-primary));
    color: white;
}

.eqbld-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Operation input */
.eqbld-operation-input {
    display: flex;
    gap: clamp(8px, 2vw, 12px);
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.eqbld-value-input {
    width: 100px;
    min-height: 48px;
    padding: 12px;
    font-size: 1rem;
    border: 2px solid hsl(var(--student-primary) / 0.3);
    border-radius: 8px;
    text-align: center;
}

.eqbld-value-input:focus {
    outline: none;
    border-color: hsl(var(--student-primary));
    box-shadow: 0 0 0 3px hsl(var(--student-primary) / 0.1);
}

.eqbld-apply-btn {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: hsl(var(--success));
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eqbld-apply-btn:hover:not(:disabled) {
    background: hsl(var(--success) / 0.85);
    transform: translateY(-1px);
}

.eqbld-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.eqbld-cancel-btn {
    min-height: 48px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-secondary, #64748b);
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eqbld-cancel-btn:hover {
    background: var(--bg-secondary, #f1f5f9);
}

/* Undo/Reset Controls */
.eqbld-controls {
    display: flex;
    gap: clamp(12px, 3vw, 16px);
    justify-content: center;
    width: 100%;
    max-width: min(600px, 95vw);
    margin-top: clamp(12px, 3vw, 16px);
}

.eqbld-control-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    background: white;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary, #64748b);
}

.eqbld-control-btn:hover:not(:disabled) {
    background: var(--bg-secondary, #f1f5f9);
    border-color: var(--text-secondary, #64748b);
}

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

.eqbld-control-btn i {
    font-size: 1rem;
}

/* Dark mode for action panel */
[data-theme="dark"] .eqbld-action-panel {
    background: hsl(var(--student-primary) / 0.1);
    border-color: hsl(var(--student-primary) / 0.2);
}

[data-theme="dark"] .eqbld-action-title {
    color: #f3f4f6;
}

[data-theme="dark"] .eqbld-action-btn {
    background: #374151;
    border-color: hsl(var(--student-primary) / 0.4);
}

[data-theme="dark"] .eqbld-action-btn.active {
    background: hsl(var(--student-primary));
}

[data-theme="dark"] .eqbld-value-input {
    background: #1f2937;
    border-color: #4b5563;
    color: #f3f4f6;
}

[data-theme="dark"] .eqbld-control-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-theme="dark"] .eqbld-control-btn:hover:not(:disabled) {
    background: #4b5563;
}

[data-theme="dark"] .eqbld-cancel-btn {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

[data-theme="dark"] .eqbld-cancel-btn:hover {
    background: #4b5563;
}

/* Solved state banner */
.eqbld-solved-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 32px);
    background: linear-gradient(135deg, hsl(var(--success) / 0.15), hsl(var(--success) / 0.1));
    border: 2px solid hsl(var(--success));
    border-radius: 12px;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 700;
    color: hsl(var(--success));
    animation: eqbld-solved-appear 0.3s ease-out;
}

.eqbld-solved-banner i {
    font-size: 1.5rem;
}

@keyframes eqbld-solved-appear {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

[data-theme="dark"] .eqbld-solved-banner {
    background: linear-gradient(135deg, hsl(var(--success) / 0.2), hsl(var(--success) / 0.15));
}

/* Reduced motion for controls */
@media (prefers-reduced-motion: reduce) {
    .eqbld-action-btn,
    .eqbld-apply-btn,
    .eqbld-cancel-btn,
    .eqbld-control-btn {
        transition: none;
    }

    .eqbld-solved-banner {
        animation: none;
    }
}

/* ============================================
   ANGLE DIAGRAM MULTIPLE CHOICE
   Grid of small SVG angle diagrams labelled A-D,
   used in estimation exercises where the student
   picks the angle closest to a target value.
   ============================================ */

.angle-diagrams-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    max-width: 40rem;
    margin: 1.25rem auto;
}

.angle-diagram-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: hsl(var(--card, 0 0% 100%));
    border: 2px solid hsl(var(--border, 220 13% 91%));
    border-radius: var(--radius, 0.75rem);
    padding: 0.5rem 0.25rem 0.375rem;
    transition: border-color 0.15s ease;
}

.angle-diagram-svg {
    width: 100%;
    max-width: 110px;
    height: auto;
    aspect-ratio: 1;
}

.angle-diagram-label {
    display: inline-block;
    margin-top: 0.25rem;
    font-weight: 700;
    font-size: 1rem;
    color: hsl(var(--foreground, 222.2 47.4% 11.2%));
    text-align: center;
}

/* Responsive: 2×2 grid on narrow screens */
@media (max-width: 480px) {
    .angle-diagrams-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .angle-diagram-svg {
        max-width: 90px;
    }

    .angle-diagram-label {
        font-size: 0.875rem;
    }
}

/* Dark mode */
[data-theme="dark"] .angle-diagram-card {
    background: hsl(var(--card, 224 71.4% 4.1%));
    border-color: hsl(var(--border, 215 27.9% 16.9%));
}

[data-theme="dark"] .angle-diagram-card {
    --angle-diagram-ray: #94a3b8;
    --angle-diagram-arc: #818cf8;
    --angle-diagram-dot: #94a3b8;
}

/* ============================================
   YEAR 8 GEOMETRY SVG DISPLAY COMPONENTS
   Cache bust: v2026-02-geometry-components-v1
   Display-only SVG components for parallel lines,
   right triangles, compound shapes, and prism
   cross-sections. No interaction — diagrams only.
   ============================================ */

/* Parallel Lines Component */
.parallel-lines-container {
    max-width: 400px;
    margin: 0 auto;
    min-height: 200px;
}

.parallel-lines-svg {
    width: 100%;
    height: auto;
    display: block;
    color: #1e293b;
}

[data-theme="dark"] .parallel-lines-svg {
    color: #e2e8f0;
}

/* Right Triangle Component */
.right-triangle-container {
    max-width: 400px;
    margin: 0 auto;
    min-height: 200px;
}

.right-triangle-svg {
    width: 100%;
    height: auto;
    display: block;
    color: #1e293b;
}

[data-theme="dark"] .right-triangle-svg {
    color: #e2e8f0;
}

/* Compound Shape Component */
.compound-shape-container {
    max-width: 400px;
    margin: 0 auto;
    min-height: 200px;
}

.compound-shape-svg {
    width: 100%;
    height: auto;
    display: block;
    color: #1e293b;
}

[data-theme="dark"] .compound-shape-svg {
    color: #e2e8f0;
}

/* Prism Cross-Section Component */
.prism-cross-section-container {
    max-width: 400px;
    margin: 0 auto;
    min-height: 200px;
}

.prism-cross-section-svg {
    width: 100%;
    height: auto;
    display: block;
    color: #1e293b;
}

[data-theme="dark"] .prism-cross-section-svg {
    color: #e2e8f0;
}

/* Mobile responsive — geometry display components */
@media (max-width: 768px) {
    .parallel-lines-container,
    .right-triangle-container,
    .compound-shape-container,
    .prism-cross-section-container {
        max-width: 100%;
    }
}

/* Reduced motion — no animations on these static components */
@media (prefers-reduced-motion: reduce) {
    .parallel-lines-svg,
    .right-triangle-svg,
    .compound-shape-svg,
    .prism-cross-section-svg {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Seeder Background Color Utility Classes
   Migrated from inline styles in Y3-Y6 content seeders.
   59 unique colors with dark mode variants.
   ============================================================ */

/* --- Slate --- */
.bg-f8fafc { background-color: #f8fafc; }
.bg-f1f5f9 { background-color: #f1f5f9; }
.bg-e2e8f0 { background-color: #e2e8f0; }
.bg-cbd5e1 { background-color: #cbd5e1; }
.bg-334155 { background-color: #334155; }

/* --- Blue --- */
.bg-eff6ff { background-color: #eff6ff; }
.bg-dbeafe { background-color: #dbeafe; }
.bg-bfdbfe { background-color: #bfdbfe; }
.bg-93c5fd { background-color: #93c5fd; }
.bg-60a5fa { background-color: #60a5fa; }
.bg-3b82f6 { background-color: #3b82f6; }
.bg-1d4ed8 { background-color: #1d4ed8; }
.bg-1e40af { background-color: #1e40af; }

/* --- Sky --- */
.bg-f0f9ff { background-color: #f0f9ff; }

/* --- Indigo --- */
.bg-eef2ff { background-color: #eef2ff; }
.bg-e0e7ff { background-color: #e0e7ff; }
.bg-312e81 { background-color: #312e81; }

/* --- Violet --- */
.bg-f5f3ff { background-color: #f5f3ff; }
.bg-ede9fe { background-color: #ede9fe; }
.bg-c4b5fd { background-color: #c4b5fd; }
.bg-a78bfa { background-color: #a78bfa; }
.bg-8b5cf6 { background-color: #8b5cf6; }

/* --- Purple --- */
.bg-faf5ff { background-color: #faf5ff; }
.bg-f3e8ff { background-color: #f3e8ff; }
.bg-d8b4fe { background-color: #d8b4fe; }

/* --- Fuchsia --- */
.bg-fdf4ff { background-color: #fdf4ff; }
.bg-fae8ff { background-color: #fae8ff; }

/* --- Pink --- */
.bg-fdf2f8 { background-color: #fdf2f8; }
.bg-fce7f3 { background-color: #fce7f3; }

/* --- Red --- */
.bg-fef2f2 { background-color: #fef2f2; }
.bg-fee2e2 { background-color: #fee2e2; }
.bg-fecaca { background-color: #fecaca; }
.bg-fca5a5 { background-color: #fca5a5; }
.bg-f87171 { background-color: #f87171; }
.bg-ef4444 { background-color: #ef4444; }

/* --- Yellow --- */
.bg-fefce8 { background-color: #fefce8; }
.bg-fef9c3 { background-color: #fef9c3; }
.bg-fef08a { background-color: #fef08a; }
.bg-eab308 { background-color: #eab308; }

/* --- Amber --- */
.bg-fef3c7 { background-color: #fef3c7; }
.bg-fde68a { background-color: #fde68a; }
.bg-f59e0b { background-color: #f59e0b; }

/* --- Orange --- */
.bg-fed7aa { background-color: #fed7aa; }
.bg-fdba74 { background-color: #fdba74; }

/* --- Green --- */
.bg-f0fdf4 { background-color: #f0fdf4; }
.bg-dcfce7 { background-color: #dcfce7; }
.bg-bbf7d0 { background-color: #bbf7d0; }
.bg-86efac { background-color: #86efac; }
.bg-22c55e { background-color: #22c55e; }
.bg-15803d { background-color: #15803d; }

/* --- Emerald --- */
.bg-ecfdf5 { background-color: #ecfdf5; }
.bg-d1fae5 { background-color: #d1fae5; }
.bg-10b981 { background-color: #10b981; }
.bg-059669 { background-color: #059669; }

/* --- Custom --- */
.bg-c0c0c0 { background-color: #c0c0c0; }
.bg-d4a574 { background-color: #d4a574; }
.bg-f5d6a4 { background-color: #f5d6a4; }
.bg-c7e6c7 { background-color: #c7e6c7; }
.bg-ffd700 { background-color: #ffd700; }

/* --- Dark mode variants --- */
[data-theme="dark"] .bg-f8fafc { background-color: #1e293b; }
[data-theme="dark"] .bg-f1f5f9 { background-color: #1e293b; }
[data-theme="dark"] .bg-e2e8f0 { background-color: #334155; }
[data-theme="dark"] .bg-cbd5e1 { background-color: #475569; }
[data-theme="dark"] .bg-334155 { background-color: #94a3b8; }

[data-theme="dark"] .bg-eff6ff { background-color: #172554; }
[data-theme="dark"] .bg-dbeafe { background-color: #1e3a8a; }
[data-theme="dark"] .bg-bfdbfe { background-color: #1e40af; }
[data-theme="dark"] .bg-93c5fd { background-color: #1d4ed8; }
[data-theme="dark"] .bg-60a5fa { background-color: #2563eb; }
[data-theme="dark"] .bg-3b82f6 { background-color: #60a5fa; }
[data-theme="dark"] .bg-1d4ed8 { background-color: #60a5fa; }
[data-theme="dark"] .bg-1e40af { background-color: #93c5fd; }

[data-theme="dark"] .bg-f0f9ff { background-color: #0c4a6e; }

[data-theme="dark"] .bg-eef2ff { background-color: #312e81; }
[data-theme="dark"] .bg-e0e7ff { background-color: #3730a3; }
[data-theme="dark"] .bg-312e81 { background-color: #818cf8; }

[data-theme="dark"] .bg-f5f3ff { background-color: #4c1d95; }
[data-theme="dark"] .bg-ede9fe { background-color: #5b21b6; }
[data-theme="dark"] .bg-c4b5fd { background-color: #6d28d9; }
[data-theme="dark"] .bg-a78bfa { background-color: #7c3aed; }
[data-theme="dark"] .bg-8b5cf6 { background-color: #a78bfa; }

[data-theme="dark"] .bg-faf5ff { background-color: #581c87; }
[data-theme="dark"] .bg-f3e8ff { background-color: #6b21a8; }
[data-theme="dark"] .bg-d8b4fe { background-color: #9333ea; }

[data-theme="dark"] .bg-fdf4ff { background-color: #701a75; }
[data-theme="dark"] .bg-fae8ff { background-color: #86198f; }

[data-theme="dark"] .bg-fdf2f8 { background-color: #831843; }
[data-theme="dark"] .bg-fce7f3 { background-color: #9d174d; }

[data-theme="dark"] .bg-fef2f2 { background-color: #7f1d1d; }
[data-theme="dark"] .bg-fee2e2 { background-color: #991b1b; }
[data-theme="dark"] .bg-fecaca { background-color: #b91c1c; }
[data-theme="dark"] .bg-fca5a5 { background-color: #dc2626; }
[data-theme="dark"] .bg-f87171 { background-color: #ef4444; }
[data-theme="dark"] .bg-ef4444 { background-color: #f87171; }

[data-theme="dark"] .bg-fefce8 { background-color: #713f12; }
[data-theme="dark"] .bg-fef9c3 { background-color: #854d0e; }
[data-theme="dark"] .bg-fef08a { background-color: #a16207; }
[data-theme="dark"] .bg-eab308 { background-color: #facc15; }

[data-theme="dark"] .bg-fef3c7 { background-color: #92400e; }
[data-theme="dark"] .bg-fde68a { background-color: #b45309; }
[data-theme="dark"] .bg-f59e0b { background-color: #fbbf24; }

[data-theme="dark"] .bg-fed7aa { background-color: #c2410c; }
[data-theme="dark"] .bg-fdba74 { background-color: #ea580c; }

[data-theme="dark"] .bg-f0fdf4 { background-color: #14532d; }
[data-theme="dark"] .bg-dcfce7 { background-color: #166534; }
[data-theme="dark"] .bg-bbf7d0 { background-color: #15803d; }
[data-theme="dark"] .bg-86efac { background-color: #16a34a; }
[data-theme="dark"] .bg-22c55e { background-color: #4ade80; }
[data-theme="dark"] .bg-15803d { background-color: #4ade80; }

[data-theme="dark"] .bg-ecfdf5 { background-color: #064e3b; }
[data-theme="dark"] .bg-d1fae5 { background-color: #065f46; }
[data-theme="dark"] .bg-10b981 { background-color: #34d399; }
[data-theme="dark"] .bg-059669 { background-color: #34d399; }

[data-theme="dark"] .bg-c0c0c0 { background-color: #4b5563; }
[data-theme="dark"] .bg-d4a574 { background-color: #78501e; }
[data-theme="dark"] .bg-f5d6a4 { background-color: #8b5e34; }
[data-theme="dark"] .bg-c7e6c7 { background-color: #2d5a2d; }
[data-theme="dark"] .bg-ffd700 { background-color: #b8860b; }

/* ============================================
   Branch and Year Pills (Phase 123)
   ============================================ */

/* Pill container for lesson cards and page headers */
.pill-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

/* Base pill styling */
.branch-pill,
.year-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* Year pill - neutral */
.year-pill {
    background: hsl(220, 15%, 93%);
    color: hsl(220, 15%, 35%);
}

/* Branch colour modifiers - light mode */
.branch-pill--number { background: hsl(220, 85%, 93%); color: hsl(220, 80%, 35%); }
.branch-pill--algebra { background: hsl(270, 80%, 93%); color: hsl(270, 70%, 35%); }
.branch-pill--geometry { background: hsl(150, 70%, 90%); color: hsl(150, 70%, 28%); }
.branch-pill--geometry-measures { background: hsl(170, 70%, 90%); color: hsl(170, 70%, 25%); }
.branch-pill--statistics { background: hsl(35, 85%, 90%); color: hsl(35, 80%, 30%); }
.branch-pill--probability { background: hsl(330, 70%, 93%); color: hsl(330, 65%, 35%); }
.branch-pill--measurement { background: hsl(195, 75%, 90%); color: hsl(195, 75%, 28%); }
.branch-pill--fractions { background: hsl(15, 80%, 92%); color: hsl(15, 75%, 32%); }
.branch-pill--ratio { background: hsl(50, 75%, 88%); color: hsl(50, 80%, 28%); }
.branch-pill--cross-topic { background: hsl(0, 80%, 93%); color: hsl(0, 80%, 35%); }
.branch-pill--decimals { background: hsl(200, 60%, 90%); color: hsl(200, 60%, 30%); }
.branch-pill--percentages { background: hsl(280, 60%, 93%); color: hsl(280, 55%, 35%); }

/* Fallback for unknown branches */
.branch-pill--unknown { background: hsl(220, 10%, 92%); color: hsl(220, 10%, 40%); }

/* Dark mode overrides */
[data-theme="dark"] .year-pill {
    background: hsl(220, 15%, 25%);
    color: hsl(220, 15%, 80%);
}

[data-theme="dark"] .branch-pill--number { background: hsl(220, 50%, 25%); color: hsl(220, 85%, 80%); }
[data-theme="dark"] .branch-pill--algebra { background: hsl(270, 40%, 25%); color: hsl(270, 80%, 80%); }
[data-theme="dark"] .branch-pill--geometry { background: hsl(150, 40%, 20%); color: hsl(150, 70%, 75%); }
[data-theme="dark"] .branch-pill--geometry-measures { background: hsl(170, 40%, 20%); color: hsl(170, 70%, 75%); }
[data-theme="dark"] .branch-pill--statistics { background: hsl(35, 45%, 22%); color: hsl(35, 85%, 78%); }
[data-theme="dark"] .branch-pill--probability { background: hsl(330, 40%, 25%); color: hsl(330, 70%, 80%); }
[data-theme="dark"] .branch-pill--measurement { background: hsl(195, 45%, 22%); color: hsl(195, 75%, 78%); }
[data-theme="dark"] .branch-pill--fractions { background: hsl(15, 45%, 23%); color: hsl(15, 80%, 78%); }
[data-theme="dark"] .branch-pill--ratio { background: hsl(50, 40%, 22%); color: hsl(50, 75%, 75%); }
[data-theme="dark"] .branch-pill--cross-topic { background: hsl(0, 50%, 22%); color: hsl(0, 80%, 78%); }
[data-theme="dark"] .branch-pill--decimals { background: hsl(200, 40%, 22%); color: hsl(200, 60%, 78%); }
[data-theme="dark"] .branch-pill--percentages { background: hsl(280, 40%, 25%); color: hsl(280, 60%, 80%); }
[data-theme="dark"] .branch-pill--unknown { background: hsl(220, 10%, 25%); color: hsl(220, 10%, 75%); }

/* Responsive: slightly smaller on very small screens */
@media (max-width: 480px) {
    .branch-pill,
    .year-pill {
        font-size: 0.6875rem;
        padding: 0.0625rem 0.375rem;
    }
}

/* ============================================
   Link to Parent Page (.ltp-)
   ============================================ */

.ltp-card {
    background: white;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    animation: ltp-slideUp 0.4s ease-out;
    margin-top: 1rem;
}

.ltp-card--success {
    border-color: rgba(34, 197, 94, 0.25);
}

.ltp-icon-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-student, linear-gradient(135deg, #8b5cf6, #ec4899));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.ltp-icon-ring i {
    font-size: 2rem;
    color: white;
}

.ltp-icon-ring--success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.ltp-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.ltp-subtitle {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Code badge */
.ltp-code-display {
    margin-bottom: 1.5rem;
    animation: ltp-fadeInScale 0.5s ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ltp-code-badge {
    display: inline-block;
    padding: 1.25rem 2.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.35);
    position: relative;
    overflow: hidden;
}

.ltp-code-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    border-radius: inherit;
}

.ltp-code-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 2rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Expiry info */
.ltp-expiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #475569;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.ltp-expiry i {
    color: hsl(var(--student-accent, 45 100% 60%));
    font-size: 1.1rem;
}

.ltp-expiry-remaining {
    color: #94a3b8;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* Instructions box */
.ltp-instructions {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(59, 130, 246, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.12);
    border-radius: 0.875rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.ltp-instructions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: #6d28d9;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.ltp-instructions-header i {
    font-size: 1.1rem;
}

.ltp-instructions-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* Action buttons */
.ltp-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Entrance animations */
@keyframes ltp-slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ltp-fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Dark mode */
[data-theme="dark"] .ltp-card {
    background: hsl(222, 47%, 11%);
    border-color: rgba(139, 92, 246, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .ltp-card--success {
    border-color: rgba(34, 197, 94, 0.25);
}

[data-theme="dark"] .ltp-title {
    color: #f1f5f9;
}

[data-theme="dark"] .ltp-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .ltp-expiry {
    color: #cbd5e1;
}

[data-theme="dark"] .ltp-expiry-remaining {
    color: #64748b;
}

[data-theme="dark"] .ltp-instructions {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="dark"] .ltp-instructions-header {
    color: #a78bfa;
}

[data-theme="dark"] .ltp-instructions-list {
    color: #94a3b8;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .ltp-card {
        padding: 2rem 1.25rem;
        border-radius: 1rem;
    }

    .ltp-icon-ring {
        width: 64px;
        height: 64px;
    }

    .ltp-icon-ring i {
        font-size: 1.5rem;
    }

    .ltp-title {
        font-size: 1.4rem;
    }

    .ltp-code-text {
        font-size: 1.5rem;
        letter-spacing: 0.2rem;
    }

    .ltp-code-badge {
        padding: 1rem 1.75rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ltp-card,
    .ltp-code-display {
        animation: none;
    }
}

/* ============================================
   Link a Child Page (.lac-)
   ============================================ */

.lac-card {
    background: white;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    animation: ltp-slideUp 0.4s ease-out;
    margin-top: 1rem;
}

.lac-card--success {
    border-color: rgba(34, 197, 94, 0.25);
}

.lac-icon-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #0ea5e9);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.lac-icon-ring i {
    font-size: 2rem;
    color: white;
}

.lac-icon-ring--parent {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.lac-icon-ring--confirm {
    background: linear-gradient(135deg, #22c55e, #10b981);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.lac-icon-ring--success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);
}

.lac-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.lac-subtitle {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Student name badge (confirmation state) */
.lac-name-display {
    margin-bottom: 1.5rem;
    animation: ltp-fadeInScale 0.5s ease-out;
}

.lac-name-badge {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 1rem;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    position: relative;
    overflow: hidden;
}

.lac-name-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    border-radius: inherit;
}

.lac-name-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Input styling */
.lac-input-group {
    text-align: left;
    margin-bottom: 1.5rem;
}

.lac-label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
}

.lac-input {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.15rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lac-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Action buttons */
.lac-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Dark mode */
[data-theme="dark"] .lac-card {
    background: hsl(222, 47%, 11%);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .lac-card--success {
    border-color: rgba(34, 197, 94, 0.25);
}

[data-theme="dark"] .lac-title {
    color: #f1f5f9;
}

[data-theme="dark"] .lac-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .lac-label {
    color: #cbd5e1;
}

[data-theme="dark"] .lac-input {
    background: hsl(222, 47%, 15%);
    border-color: hsl(222, 30%, 25%);
    color: #f1f5f9;
}

[data-theme="dark"] .lac-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Mobile responsive */
@media (max-width: 576px) {
    .lac-card {
        padding: 2rem 1.25rem;
        border-radius: 1rem;
    }

    .lac-icon-ring {
        width: 64px;
        height: 64px;
    }

    .lac-icon-ring i {
        font-size: 1.5rem;
    }

    .lac-title {
        font-size: 1.4rem;
    }

    .lac-name-text {
        font-size: 1.15rem;
    }

    .lac-name-badge {
        padding: 0.75rem 1.75rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lac-card,
    .lac-name-display {
        animation: none;
    }
}

/* ============================================
   UPGRADE PAGE — TRIAL MESSAGING
   Classes for the 14-day free trial UI elements
   on the /upgrade page. Uses upgrade- prefix to
   match the existing namespace in UpgradePage.razor.
   v2026-03-14-trial-messaging
   ============================================ */

/* "Free for 14 days" label above the price */
.upgrade-trial-label {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    font-weight: 800;
    color: #059669;
    margin-bottom: 0.25rem;
}

[data-theme="dark"] .upgrade-trial-label {
    color: #34d399;
}

/* "Then £X/month" secondary pricing text */
.upgrade-trial-then {
    font-size: 0.95rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

[data-theme="dark"] .upgrade-trial-then {
    color: #9ca3af;
}

/* Trial Explainer Section wrapper */
.upgrade-trial-explainer {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

/* Inner card container */
.upgrade-trial-explainer-inner {
    background: hsl(var(--card));
    border: 2px solid hsl(var(--border));
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

[data-theme="dark"] .upgrade-trial-explainer-inner {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

/* Explainer section heading */
.upgrade-trial-explainer-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0 0 1.25rem;
}

[data-theme="dark"] .upgrade-trial-explainer-title {
    color: hsl(var(--foreground));
}

/* Numbered steps list */
.upgrade-trial-steps {
    list-style: decimal;
    padding: 0 0 0 1.5rem;
    margin: 0 0 1rem;
    text-align: left;
    display: inline-block;
}

.upgrade-trial-steps li {
    color: hsl(var(--foreground));
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0.3rem 0;
}

[data-theme="dark"] .upgrade-trial-steps li {
    color: hsl(var(--foreground));
}

/* Reassurance tagline */
.upgrade-trial-reassurance {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    font-style: italic;
}

[data-theme="dark"] .upgrade-trial-reassurance {
    color: #9ca3af;
}

/* ============================================
   SUBSCRIPTION PAGE
   Cache bust: v2026-03-14-subscription-redesign
   ============================================ */

.sub-page {
    padding: var(--space-6) var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

/* Hero */
.sub-hero {
    text-align: center;
    margin-bottom: var(--space-8);
}

.sub-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: var(--gradient-student);
    color: white;
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 16px hsl(var(--student-primary) / 0.3);
}

.sub-hero-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: hsl(var(--foreground));
    margin: 0 0 var(--space-2);
}

.sub-hero-subtitle {
    font-size: var(--text-lg);
    color: hsl(var(--muted-foreground));
    margin: 0;
}

/* Loading */
.sub-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

/* Cards */
.sub-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease;
}

.sub-card:hover {
    box-shadow: var(--shadow-md);
}

.sub-card-main {
    border-left: 4px solid hsl(var(--student-primary));
}

.sub-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid hsl(var(--border));
}

.sub-card-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-xl);
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sub-card-title svg {
    color: hsl(var(--primary));
    flex-shrink: 0;
}

/* Tier badges */
.sub-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.sub-tier-premium {
    background: linear-gradient(135deg, hsl(var(--student-primary) / 0.15), hsl(var(--student-secondary) / 0.15));
    color: hsl(var(--student-primary));
    border: 1px solid hsl(var(--student-primary) / 0.3);
}

.sub-tier-free {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.sub-tier-discount {
    background: linear-gradient(135deg, hsl(var(--student-success) / 0.15), hsl(142 70% 40% / 0.1));
    color: hsl(var(--student-success));
    border: 1px solid hsl(var(--student-success) / 0.3);
}

/* Details grid */
.sub-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

@media (max-width: 480px) {
    .sub-details-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

.sub-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sub-detail-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
}

.sub-detail-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: hsl(var(--foreground));
}

.sub-price {
    color: hsl(var(--student-primary));
}

.sub-status-trial {
    color: hsl(var(--primary));
}

.sub-status-active {
    color: hsl(var(--student-success));
}

.sub-status-cancelled {
    color: hsl(var(--destructive));
}

.sub-status-suspended {
    color: hsl(var(--warning));
}

/* Premium access badge */
.sub-access-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, hsl(var(--student-success) / 0.1), hsl(142 70% 40% / 0.05));
    color: hsl(var(--student-success));
    font-weight: 700;
    font-size: 0.875rem;
    border: 1px solid hsl(var(--student-success) / 0.2);
    margin-bottom: var(--space-4);
}

/* Alert boxes */
.sub-alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.sub-alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.sub-alert-title {
    font-weight: 700;
    font-size: 0.9375rem;
    margin: 0 0 var(--space-1);
}

.sub-alert-text {
    font-size: 0.875rem;
    margin: 0;
    opacity: 0.85;
}

.sub-alert-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.sub-alert-trial {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.03));
    border: 1px solid hsl(var(--primary) / 0.2);
    color: hsl(var(--primary));
}

.sub-alert-trial .sub-alert-icon { color: hsl(var(--primary)); }

.sub-alert-amber {
    background: linear-gradient(135deg, hsl(var(--warning) / 0.12), hsl(var(--warning) / 0.05));
    border: 1px solid hsl(var(--warning) / 0.3);
    color: hsl(45 80% 30%);
}

.sub-alert-amber .sub-alert-icon { color: hsl(var(--warning)); }

.sub-alert-danger {
    background: linear-gradient(135deg, hsl(var(--destructive) / 0.08), hsl(var(--destructive) / 0.03));
    border: 1px solid hsl(var(--destructive) / 0.2);
    color: hsl(var(--destructive));
}

.sub-alert-danger .sub-alert-icon { color: hsl(var(--destructive)); }

.sub-alert-discount {
    background: linear-gradient(135deg, hsl(var(--success) / 0.08), hsl(var(--success) / 0.03));
    border: 1px solid hsl(var(--success) / 0.2);
    color: hsl(142 60% 25%);
}

.sub-alert-discount .sub-alert-icon { color: hsl(var(--success)); }

.sub-alert-parent-managed {
    background: hsl(var(--parent-primary) / 0.08);
    border: 1px solid hsl(var(--parent-primary) / 0.25);
}

.sub-alert-parent-managed .sub-alert-icon {
    color: hsl(var(--parent-primary));
}

.sub-alert-parent-managed .sub-alert-title {
    color: hsl(var(--parent-primary));
}

/* Actions */
.sub-actions {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid hsl(var(--border));
}

/* Empty state */
.sub-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
}

.sub-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-4);
}

.sub-empty-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0 0 var(--space-2);
}

.sub-empty-text {
    color: hsl(var(--muted-foreground));
    font-size: 0.9375rem;
    margin: 0 0 var(--space-5);
}

.sub-upgrade-link {
    text-decoration: none;
}

/* Content access grid */
.sub-access-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sub-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: hsl(var(--muted) / 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border) / 0.5);
}

.sub-access-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: hsl(var(--foreground));
    margin: 0;
}

.sub-access-desc {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin: var(--space-1) 0 0;
}

.sub-access-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.sub-access-granted {
    background: hsl(var(--student-success) / 0.12);
    color: hsl(var(--student-success));
}

.sub-access-locked {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* Daily limits */
.sub-limits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 480px) {
    .sub-limits-grid {
        grid-template-columns: 1fr;
    }
}

.sub-limit-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: hsl(var(--muted) / 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border) / 0.5);
}

.sub-limit-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
}

.sub-limit-value {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: hsl(var(--foreground));
}

.sub-limit-value small {
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    text-transform: lowercase;
}

.sub-limit-unlimited {
    color: hsl(var(--student-success));
}

.sub-limit-reached {
    color: hsl(var(--destructive));
}

/* Children list */
.sub-children-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.sub-child-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: hsl(var(--muted) / 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border) / 0.5);
}

.sub-child-name {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.sub-child-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sub-child-age,
.sub-child-ks {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    padding: 2px var(--space-2);
    background: hsl(var(--muted));
    border-radius: var(--radius-sm);
}

.sub-child-status {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.sub-child-active {
    color: hsl(var(--student-success));
    background: hsl(var(--student-success) / 0.1);
}

.sub-child-inactive {
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
}

.sub-child-price {
    font-size: 0.8125rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.sub-family-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    border-top: 2px solid hsl(var(--border));
    font-weight: 700;
    font-family: 'Nunito', var(--font-family-sans);
}

.sub-family-total-price {
    font-size: 1.1rem;
    color: hsl(var(--primary));
}

[data-theme="dark"] .sub-child-price {
    color: hsl(var(--primary));
}

[data-theme="dark"] .sub-family-total-price {
    color: hsl(var(--primary));
}

/* Upgrade CTA card */
.sub-card-upgrade {
    background: var(--gradient-student);
    border: none;
    text-align: center;
    color: white;
}

.sub-card-upgrade:hover {
    box-shadow: 0 8px 32px hsl(var(--student-primary) / 0.3);
}

.sub-upgrade-inner {
    padding: var(--space-4) 0;
}

.sub-upgrade-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: white;
    margin: 0 0 var(--space-3);
}

.sub-upgrade-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
    margin: 0 0 var(--space-5);
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   SUBSCRIPTION PAGE - DARK MODE
   ============================================ */

[data-theme="dark"] .sub-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .sub-card-main {
    border-left-color: hsl(var(--student-primary));
}

[data-theme="dark"] .sub-hero-title {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .sub-hero-subtitle {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .sub-tier-premium {
    background: linear-gradient(135deg, hsl(var(--student-primary) / 0.2), hsl(var(--student-secondary) / 0.2));
    color: hsl(280 90% 75%);
    border-color: hsl(var(--student-primary) / 0.4);
}

[data-theme="dark"] .sub-access-badge {
    background: linear-gradient(135deg, hsl(var(--student-success) / 0.15), hsl(142 70% 40% / 0.1));
    color: hsl(142 60% 60%);
    border-color: hsl(var(--student-success) / 0.3);
}

[data-theme="dark"] .sub-alert-trial {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.12), hsl(var(--primary) / 0.06));
    border-color: hsl(var(--primary) / 0.3);
    color: hsl(220 80% 75%);
}

[data-theme="dark"] .sub-alert-trial .sub-alert-icon { color: hsl(220 80% 70%); }

[data-theme="dark"] .sub-alert-amber {
    background: linear-gradient(135deg, hsl(var(--warning) / 0.15), hsl(var(--warning) / 0.08));
    border-color: hsl(var(--warning) / 0.35);
    color: hsl(45 90% 70%);
}

[data-theme="dark"] .sub-alert-amber .sub-alert-icon { color: hsl(45 80% 60%); }

[data-theme="dark"] .sub-alert-danger {
    background: linear-gradient(135deg, hsl(var(--destructive) / 0.12), hsl(var(--destructive) / 0.06));
    border-color: hsl(var(--destructive) / 0.3);
    color: hsl(0 80% 75%);
}

[data-theme="dark"] .sub-alert-danger .sub-alert-icon { color: hsl(0 70% 65%); }

[data-theme="dark"] .sub-alert-discount {
    background: linear-gradient(135deg, hsl(var(--success) / 0.12), hsl(var(--success) / 0.06));
    border-color: hsl(var(--success) / 0.3);
    color: hsl(142 70% 70%);
}

[data-theme="dark"] .sub-alert-discount .sub-alert-icon { color: hsl(142 60% 60%); }

[data-theme="dark"] .sub-alert-parent-managed {
    background: hsl(var(--parent-primary) / 0.15);
    border-color: hsl(var(--parent-primary) / 0.35);
}

[data-theme="dark"] .sub-access-row {
    background: hsl(var(--muted) / 0.3);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .sub-access-granted {
    background: hsl(var(--student-success) / 0.15);
    color: hsl(142 60% 60%);
}

[data-theme="dark"] .sub-limit-box {
    background: hsl(var(--muted) / 0.3);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .sub-child-row {
    background: hsl(var(--muted) / 0.3);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .sub-child-age,
[data-theme="dark"] .sub-child-ks {
    background: hsl(var(--muted) / 0.5);
}

[data-theme="dark"] .sub-empty-icon {
    background: hsl(var(--muted) / 0.5);
}

[data-theme="dark"] .sub-card-upgrade {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .sub-tier-discount {
    color: hsl(142 60% 60%);
    background: hsl(var(--student-success) / 0.15);
    border-color: hsl(var(--student-success) / 0.3);
}

/* ============================================
   SETTINGS PAGE HERO - DARK MODE FIX
   The hero gradient background is always dark,
   so text must always be white regardless of theme.
   Cache bust: v2026-03-14-settings-hero-fix
   ============================================ */

.settings-hero .hero-title,
.settings-hero .hero-subtitle {
    color: white !important;
}

.settings-hero .hero-subtitle {
    opacity: 0.9;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 600;
}

[data-theme="dark"] .settings-hero .hero-title,
[data-theme="dark"] .settings-hero .hero-subtitle {
    color: white !important;
    opacity: 1;
}

[data-theme="dark"] .settings-hero .hero-subtitle {
    opacity: 0.9;
}

/* ============================================
   NAV BAR PREMIUM PILL
   Cache bust: v2026-03-15-premium-pill
   ============================================ */

.nav-premium-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, #f5c842, #e6a817, #d4950f);
    color: #3d2800;
    box-shadow: 0 2px 8px rgba(230, 168, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1;
}

.nav-premium-pill svg {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

[data-theme="dark"] .nav-premium-pill {
    background: linear-gradient(135deg, #f5c842, #d4950f);
    color: #2a1a00;
    box-shadow: 0 2px 12px rgba(245, 200, 66, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════
   Filter Popover — Phase 153
   Cache bust: v2026-03-23-filter-popover
   ═══════════════════════════════════════ */

/* Filter trigger button */
.ksl-filter-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    border: 1px solid hsl(220 15% 90%);
    border-radius: var(--radius);
    background: hsl(220 15% 96%);
    color: hsl(var(--foreground));
    cursor: pointer;
    font-size: 1.125rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ksl-filter-trigger:hover {
    background: hsl(220 15% 93%);
    border-color: hsl(220 15% 85%);
}

.ksl-filter-trigger:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

.ksl-filter-trigger.has-active-filters {
    background: hsl(220 90% 96%);
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

[data-theme="dark"] .ksl-filter-trigger {
    background: hsl(220 15% 20%);
    border-color: hsl(220 15% 30%);
    color: hsl(var(--foreground));
}

[data-theme="dark"] .ksl-filter-trigger:hover {
    background: hsl(220 15% 25%);
    border-color: hsl(220 15% 35%);
}

[data-theme="dark"] .ksl-filter-trigger.has-active-filters {
    background: hsl(220 90% 15%);
    border-color: hsl(var(--primary));
    color: hsl(var(--primary));
}

/* Filter badge (count indicator on trigger button) */
.ksl-filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: hsl(var(--primary));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

/* Filter popover backdrop (transparent, click-outside-to-close) */
.ksl-filter-popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-filter-popover) - 1);
    background: transparent;
}

/* Filter popover panel */
.ksl-filter-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    max-width: calc(100vw - 32px);
    max-height: 80vh;
    overflow-y: auto;
    background: white;
    border: 1px solid hsl(220 15% 90%);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-filter-popover);
    padding: var(--space-6) var(--space-4);
    animation: userMenuFadeIn 0.15s ease;
}

[data-theme="dark"] .ksl-filter-popover {
    background: hsl(220 15% 15%);
    border-color: hsl(220 15% 25%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Section inside popover (branch group / year group) */
.ksl-filter-section {
    margin-bottom: var(--space-5);
}

.ksl-filter-section:last-of-type {
    margin-bottom: 0;
}

/* Section label */
.ksl-filter-section-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    margin-bottom: var(--space-2);
}

/* Pill group flex wrapper */
.ksl-filter-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Pill buttons inside the popover — thin and long like difficulty badges */
.ksl-filter-pill-group button {
    cursor: pointer;
    border: none;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

/* Active pill: bold solid fill like difficulty badges (Easy/Medium/Hard) */
.filter-pill--active {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: scale(1.02);
}

.year-pill.filter-pill--active {
    background: hsl(var(--primary)) !important;
    color: white !important;
}

.branch-pill--number.filter-pill--active { background: hsl(220, 75%, 50%) !important; color: white !important; }
.branch-pill--algebra.filter-pill--active { background: hsl(270, 65%, 50%) !important; color: white !important; }
.branch-pill--geometry.filter-pill--active { background: hsl(150, 60%, 40%) !important; color: white !important; }
.branch-pill--geometry-measures.filter-pill--active { background: hsl(170, 60%, 38%) !important; color: white !important; }
.branch-pill--statistics.filter-pill--active { background: hsl(35, 80%, 48%) !important; color: white !important; }
.branch-pill--probability.filter-pill--active { background: hsl(330, 60%, 50%) !important; color: white !important; }
.branch-pill--measurement.filter-pill--active { background: hsl(195, 70%, 42%) !important; color: white !important; }
.branch-pill--fractions.filter-pill--active { background: hsl(15, 75%, 50%) !important; color: white !important; }
.branch-pill--ratio.filter-pill--active { background: hsl(50, 75%, 45%) !important; color: white !important; }
.branch-pill--cross-topic.filter-pill--active { background: hsl(0, 70%, 50%) !important; color: white !important; }
.branch-pill--unknown.filter-pill--active { background: hsl(220, 10%, 50%) !important; color: white !important; }

.filter-pill--active:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* Dark mode active pills */
[data-theme="dark"] .year-pill.filter-pill--active {
    background: hsl(220, 80%, 55%) !important;
    color: white !important;
}

[data-theme="dark"] .branch-pill--number.filter-pill--active { background: hsl(220, 70%, 55%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--algebra.filter-pill--active { background: hsl(270, 60%, 55%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--geometry.filter-pill--active { background: hsl(150, 55%, 45%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--geometry-measures.filter-pill--active { background: hsl(170, 55%, 43%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--statistics.filter-pill--active { background: hsl(35, 75%, 52%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--probability.filter-pill--active { background: hsl(330, 55%, 55%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--measurement.filter-pill--active { background: hsl(195, 65%, 48%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--fractions.filter-pill--active { background: hsl(15, 70%, 55%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--ratio.filter-pill--active { background: hsl(50, 70%, 50%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--cross-topic.filter-pill--active { background: hsl(0, 65%, 55%) !important; color: white !important; }
[data-theme="dark"] .branch-pill--unknown.filter-pill--active { background: hsl(220, 10%, 55%) !important; color: white !important; }

/* Showing count text at bottom of popover */
.ksl-filter-count {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid hsl(220 15% 90%);
}

[data-theme="dark"] .ksl-filter-count {
    border-top-color: hsl(220 15% 25%);
}

/* Clear all filters button */
.ksl-filter-clear {
    font-size: 0.875rem;
    color: hsl(var(--primary));
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-top: var(--space-2);
    display: inline-block;
}

.ksl-filter-clear:hover {
    text-decoration: underline;
}

.ksl-filter-clear:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* iOS safe area for popover */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .ksl-filter-popover {
        padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    }
}

/* ═══════════════════════════════════════
   Filter controls — mobile layout fix
   Cache bust: v2026-03-24-mobile-filter
   ═══════════════════════════════════════ */

/* Ensure the popover anchors correctly when controls wrap on very small screens */
@media (max-width: 480px) {
    /* The filter trigger wrapper keeps position:relative so popover still anchors to it */
    .ksl-section-controls > div:first-child {
        position: relative;
    }

    /* Popover stays left-aligned on very narrow screens to avoid off-screen clipping */
    .ksl-filter-popover {
        right: auto;
        left: 0;
    }
}

/* ============================================
   BADGE ARTWORK SYSTEM (.bdg- namespace)
   Phase 156 — SVG badge tiles, locked/earned states
   Cache bust: v2026-03-26-badge-artwork
   ============================================ */

/* Badge tile container */
.bdg-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.bdg-tile:hover {
    transform: scale(1.08);
}

/* Badge SVG base sizing */
.bdg-svg {
    width: var(--bdg-size, 80px);
    height: var(--bdg-size, 80px);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.bdg-svg--sm { --bdg-size: 48px; }
.bdg-svg--md { --bdg-size: 80px; }
.bdg-svg--lg { --bdg-size: 120px; }

/* Earned badge state (full colour + glow) */
.bdg-earned .bdg-svg {
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

.bdg-earned .bdg-svg:hover {
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.7));
}

/* Locked badge state — grayscale filter (ART-05) */
.bdg-locked .bdg-svg {
    filter: grayscale(100%) brightness(0.65);
    opacity: 0.55;
}

.bdg-locked .bdg-name,
.bdg-locked .bdg-desc {
    color: var(--text-muted, #9ca3af);
}

/* Dark mode adjustments (ART-04 — locked badges must remain visible against dark backgrounds) */
[data-theme="dark"] .bdg-locked .bdg-svg {
    filter: grayscale(100%) brightness(0.4);
    opacity: 0.45;
}

[data-theme="dark"] .bdg-earned .bdg-svg {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

/* Badge grid layout (for Phase 157 achievements page) */
.bdg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

@media (max-width: 640px) {
    .bdg-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 0.75rem;
    }
}

/* Earned entrance animation (reuses existing scale-in keyframe) */
.bdg-just-earned {
    animation: scale-in 0.3s ease-out;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .bdg-tile {
        transition: none;
    }

    .bdg-svg {
        transition: none;
    }

    .bdg-tile:hover {
        transform: none;
    }
}

/* ============================================
   BADGE CARD COMPONENT (.bdg-card namespace)
   Phase 157 — BadgeCard.razor styling
   Cache bust: v2026-03-26-achievements-page
   ============================================ */

.bdg-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: var(--radius, 0.75rem);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
    min-height: 44px; /* WCAG touch target (PAGE-09) */
}

.bdg-card--earned {
    background: rgba(251, 191, 36, 0.06);
}

.bdg-card--earned:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

.bdg-card--locked {
    opacity: 0.85;
}

.bdg-card__icon {
    margin-bottom: 0.5rem;
}

.bdg-card__name {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--foreground, #1f2937);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    min-height: 2em;
}

.bdg-card--locked .bdg-card__name {
    color: var(--text-muted, #9ca3af);
}

.bdg-card__progress {
    width: 100%;
    margin-top: 0.25rem;
}

.bdg-card__progress-bar {
    height: 4px;
}

.bdg-card__progress-label {
    font-size: 0.625rem;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.125rem;
    display: block;
}

.bdg-card__earned-date {
    font-size: 0.625rem;
    color: var(--student-accent, hsl(45, 100%, 60%));
    margin-top: 0.25rem;
    font-weight: 500;
}

/* Dark mode badge card */
[data-theme="dark"] .bdg-card--earned {
    background: rgba(251, 191, 36, 0.08);
}

[data-theme="dark"] .bdg-card__name {
    color: var(--foreground, #f3f4f6);
}

[data-theme="dark"] .bdg-card--locked .bdg-card__name {
    color: var(--text-muted, #6b7280);
}

[data-theme="dark"] .bdg-card__earned-date {
    color: hsl(45, 100%, 65%);
}

/* ============================================
   BADGE CARD TOOLTIPS (.bdg-card tooltip / bdg-card__tooltip)
   CSS-only ::after pseudo-element pattern
   Cache bust: v2026-04-06-badge-tooltips
   ============================================ */

.bdg-card {
    position: relative;
}

.bdg-card::after {
    content: '';
    display: none;
}

.bdg-card::before {
    content: '';
    display: none;
}

.bdg-card:hover::after,
.bdg-card:focus-visible::after {
    content: attr(data-tooltip);
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: hsl(220, 15%, 15%);
    color: #ffffff;
    padding: 8px 12px;
    border-radius: var(--radius, 0.75rem);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    max-width: 200px;
    width: max-content;
    text-align: center;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: bdg-tooltip-in 0.2s ease-out;
}

.bdg-card:hover::before,
.bdg-card:focus-visible::before {
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid hsl(220, 15%, 15%);
    z-index: 1001;
    pointer-events: none;
}

/* Dark mode tooltips */
[data-theme="dark"] .bdg-card:hover::after,
[data-theme="dark"] .bdg-card:focus-visible::after {
    background: hsl(0, 0%, 95%);
    color: hsl(220, 15%, 15%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .bdg-card:hover::before,
[data-theme="dark"] .bdg-card:focus-visible::before {
    border-top-color: hsl(0, 0%, 95%);
}

/* Touch-only devices: suppress hover tooltip (title attribute still accessible via long-press) */
@media (hover: none) {
    .bdg-card:hover::after,
    .bdg-card:hover::before {
        display: none;
    }
}

/* Reduced motion: disable tooltip animation */
@media (prefers-reduced-motion: reduce) {
    .bdg-card:hover::after,
    .bdg-card:focus-visible::after {
        animation: none;
    }
}

@keyframes bdg-tooltip-in {
    0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(0.95); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================
   BADGE TABS LIST OVERRIDE (.bdg-tabs-list)
   Overrides TabsList grid-cols-2 for 10+ year tabs
   Gamified pill navigation for year-group switching
   ============================================ */

.bdg-tabs-list {
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: unset !important;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.06), rgba(236, 72, 153, 0.06)) !important;
    border-radius: var(--radius-xl, 1rem) !important;
    border: 1px solid rgba(147, 51, 234, 0.1);
    margin-bottom: 1.5rem;
    justify-content: center;
}

.bdg-tabs-list button {
    white-space: nowrap;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius, 0.75rem) !important;
    font-family: 'Nunito', var(--font-sans);
    font-weight: 700 !important;
    font-size: 0.875rem;
    border: 2px solid transparent !important;
    background: transparent !important;
    color: hsl(280, 40%, 45%) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
    cursor: pointer;
    position: relative;
}

.bdg-tabs-list button:hover {
    background: rgba(147, 51, 234, 0.08) !important;
    color: hsl(280, 80%, 50%) !important;
    transform: translateY(-1px);
}

/* Active tab — bold gradient pill */
.bdg-tabs-list button.bg-white {
    background: linear-gradient(135deg, hsl(280, 100%, 60%), hsl(340, 100%, 65%)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(147, 51, 234, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border-color: transparent !important;
    transform: translateY(-1px);
}

.bdg-tabs-list button.bg-white:hover {
    box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px);
}

/* Dark mode tabs */
[data-theme="dark"] .bdg-tabs-list {
    background: rgba(147, 51, 234, 0.08) !important;
    border-color: rgba(147, 51, 234, 0.2);
}

[data-theme="dark"] .bdg-tabs-list button {
    color: rgba(233, 213, 255, 0.7) !important;
}

[data-theme="dark"] .bdg-tabs-list button:hover {
    background: rgba(147, 51, 234, 0.15) !important;
    color: rgba(233, 213, 255, 0.95) !important;
}

[data-theme="dark"] .bdg-tabs-list button.bg-white {
    background: linear-gradient(135deg, hsl(280, 100%, 55%), hsl(340, 100%, 60%)) !important;
    color: #fff !important;
}

/* ============================================
   ACHIEVEMENTS PAGE (.ach- namespace)
   Phase 157 — AchievementsPage.razor styling
   Gamified header with trophy icon and stats
   ============================================ */

.ach-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.ach-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 1.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.06), rgba(236, 72, 153, 0.04), rgba(245, 158, 11, 0.04));
    border-radius: var(--radius-xl, 1rem);
    border: 1px solid rgba(147, 51, 234, 0.1);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative shimmer */
.ach-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
    animation: ach-shimmer 8s ease-in-out infinite;
}

@keyframes ach-shimmer {
    0%, 100% { transform: translateX(-25%); }
    50% { transform: translateX(25%); }
}

.ach-header__title {
    font-family: 'Nunito', var(--font-sans);
    font-size: 2rem;
    font-weight: 900;
    background: var(--gradient-student, linear-gradient(135deg, hsl(280, 100%, 60%), hsl(340, 100%, 65%)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    position: relative;
}

.ach-header__count {
    font-family: 'Nunito', var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    position: relative;
}

.ach-header__count strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: hsl(280, 80%, 55%);
}

.ach-header__count strong:first-child {
    color: hsl(280, 80%, 55%);
}

.ach-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #6b7280);
}

.ach-error {
    text-align: center;
    padding: 2rem;
    color: hsl(var(--destructive));
}

/* Dark mode page */
[data-theme="dark"] .ach-header {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(236, 72, 153, 0.06), rgba(245, 158, 11, 0.06));
    border-color: rgba(147, 51, 234, 0.2);
}

[data-theme="dark"] .ach-header::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.02), transparent);
}

[data-theme="dark"] .ach-header__title {
    background: var(--gradient-student, linear-gradient(135deg, hsl(280, 100%, 70%), hsl(340, 100%, 75%)));
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="dark"] .ach-header__count {
    color: var(--text-muted, #9ca3af);
}

[data-theme="dark"] .ach-header__count strong {
    color: hsl(280, 80%, 70%);
}

[data-theme="dark"] .ach-header__count strong:first-child {
    color: hsl(45, 100%, 65%);
}

/* ============================================
   ACHIEVEMENTS LINK CARD (for ProgressPage NAV-02)
   ============================================ */

.ach-link-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-radius: var(--radius, 0.75rem);
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(236, 72, 153, 0.08));
    border: 1px solid rgba(147, 51, 234, 0.15);
    text-decoration: none;
    color: var(--foreground, #1f2937);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 44px;
}

.ach-link-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.12);
    text-decoration: none;
    color: var(--foreground, #1f2937);
}

.ach-link-card__text {
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
}

.ach-link-card__arrow {
    font-size: 1.25rem;
    color: hsl(280, 100%, 60%);
}

[data-theme="dark"] .ach-link-card {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.12), rgba(236, 72, 153, 0.12));
    border-color: rgba(147, 51, 234, 0.25);
    color: var(--foreground, #f3f4f6);
}

[data-theme="dark"] .ach-link-card:hover {
    color: var(--foreground, #f3f4f6);
}

@media (max-width: 640px) {
    .ach-page {
        padding: 1rem 0.75rem;
    }

    .ach-header {
        padding: 1.25rem 1rem 1rem;
    }

    .ach-header__title {
        font-size: 1.5rem;
    }

    .bdg-tabs-list {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0.375rem;
        padding: 0.5rem;
        justify-content: center;
    }

    .bdg-tabs-list button {
        padding: 0.4rem 0.75rem;
        font-size: 0.8125rem;
        min-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ach-header::before {
        animation: none;
    }
}

/* ============================================
   LEGAL PAGES (Privacy Policy, Terms of Service)
   ============================================ */

.legal-hero {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    padding: 4rem 2rem 3rem;
    text-align: center;
    color: #fff;
}

.legal-hero-title {
    font-family: 'Nunito', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.legal-hero-updated {
    font-size: 0.95rem;
    opacity: 0.85;
    margin: 0;
}

.legal-content {
    background: #f9fafb;
    padding: 3rem 1.5rem 4rem;
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
}

.legal-intro {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #3b82f6;
}

.legal-intro p {
    margin: 0 0 0.75rem;
    line-height: 1.7;
    color: #374151;
}

.legal-intro p:last-child {
    margin-bottom: 0;
}

.legal-toc {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.legal-toc-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1rem;
}

.legal-toc-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style-type: decimal;
}

.legal-toc-list li {
    margin-bottom: 0.375rem;
}

.legal-toc-list a {
    color: #3b82f6;
    text-decoration: none;
    font-size: 0.95rem;
}

.legal-toc-list a:hover {
    text-decoration: underline;
}

.legal-body {
    background: #fff;
    border-radius: 0.75rem;
    padding: 2rem 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.legal-body section {
    margin-bottom: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.legal-body section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.legal-body h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 1rem;
}

.legal-body h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 1.25rem 0 0.75rem;
}

.legal-body p {
    line-height: 1.7;
    color: #4b5563;
    margin: 0 0 0.75rem;
}

.legal-body ul {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

.legal-body li {
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 0.375rem;
}

.legal-body a {
    color: #3b82f6;
    text-decoration: none;
}

.legal-body a:hover {
    text-decoration: underline;
}

/* Dark mode */
[data-theme="dark"] .legal-hero {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

[data-theme="dark"] .legal-content {
    background: #111827;
}

[data-theme="dark"] .legal-intro,
[data-theme="dark"] .legal-toc,
[data-theme="dark"] .legal-body {
    background: #1f2937;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .legal-intro {
    border-left-color: #60a5fa;
}

[data-theme="dark"] .legal-intro p,
[data-theme="dark"] .legal-body p,
[data-theme="dark"] .legal-body li {
    color: #d1d5db;
}

[data-theme="dark"] .legal-toc-title,
[data-theme="dark"] .legal-body h2 {
    color: #f3f4f6;
}

[data-theme="dark"] .legal-body h3 {
    color: #e5e7eb;
}

[data-theme="dark"] .legal-toc-list a,
[data-theme="dark"] .legal-body a {
    color: #60a5fa;
}

[data-theme="dark"] .legal-body section {
    border-bottom-color: #374151;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .legal-hero {
        padding: 3rem 1.5rem 2rem;
    }

    .legal-hero-title {
        font-size: 1.875rem;
    }

    .legal-content {
        padding: 2rem 1rem 3rem;
    }

    .legal-intro,
    .legal-toc {
        padding: 1.25rem 1.5rem;
    }

    .legal-body {
        padding: 1.5rem;
    }
}

/* v2026-03-29-legal-pages */


/* ═══════════════════════════════════════════════════════════
   FAMILY PAGES - Parent-facing
   (Reports, Settings, Children, Add Child, Manage Child)
   Prefix: .fam-
   v2026-04-07
   ═══════════════════════════════════════════════════════════ */

/* --- Page container --- */
.fam-page {
    padding-bottom: var(--space-8);
}

/* --- Hero variant for family pages --- */
.fam-hero {
    background: var(--gradient-parent);
}

.fam-hero .hero-title {
    font-family: 'Nunito', system-ui, sans-serif;
}

.fam-hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Breadcrumbs on hero */
.fam-breadcrumb {
    padding: 0;
    margin-bottom: var(--space-3);
    background: transparent;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: var(--text-sm);
}

.fam-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.fam-breadcrumb li + li::before {
    content: "/";
    padding: 0 0.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.fam-breadcrumb a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.fam-breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.fam-breadcrumb .active {
    color: white;
    font-weight: 600;
}

/* Hero actions bar (title + button row) */
.fam-hero-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* --- Content section wrapper --- */
.fam-content {
    padding: 0 var(--space-4);
    max-width: 1200px;
    margin: 0 auto;
}

.fam-content-narrow {
    max-width: 800px;
}

/* --- Card --- */
.fam-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.fam-card:hover {
    box-shadow: var(--shadow-md);
}

/* Card header */
.fam-card-header {
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.fam-card-header i {
    font-size: 1.125rem;
}

.fam-card-header-primary {
    background: var(--gradient-parent);
    color: white;
}

.fam-card-header-success {
    background: linear-gradient(135deg, hsl(142 70% 45%), hsl(142 60% 38%));
    color: white;
}

.fam-card-header-warning {
    background: linear-gradient(135deg, hsl(45 100% 52%), hsl(40 95% 45%));
    color: hsl(30 80% 15%);
}

.fam-card-header-danger {
    background: linear-gradient(135deg, hsl(0 75% 55%), hsl(0 65% 48%));
    color: white;
}

.fam-card-header-info {
    background: linear-gradient(135deg, hsl(195 90% 48%), hsl(200 80% 42%));
    color: white;
}

.fam-card-header-secondary {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}

.fam-card-header-accent {
    background: linear-gradient(135deg, hsl(var(--parent-primary)), hsl(var(--parent-accent)));
    color: white;
}

.fam-card-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-lg);
    font-weight: 700;
    margin: 0;
}

.fam-card-body {
    padding: var(--space-5);
}

.fam-card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--muted) / 0.3);
}

/* Interactive card variant (clickable) */
.fam-card-interactive {
    cursor: pointer;
}

.fam-card-interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.fam-card-interactive:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* --- Stats grid --- */
.fam-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-4);
}

.fam-stat-item {
    text-align: center;
    padding: var(--space-3);
    background: hsl(var(--muted) / 0.4);
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border) / 0.5);
    transition: all 0.2s ease;
}

.fam-stat-item:hover {
    background: hsl(var(--muted) / 0.6);
    transform: translateY(-1px);
}

.fam-stat-value {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1.2;
    color: hsl(var(--foreground));
}

.fam-stat-value-primary { color: hsl(var(--primary)); }
.fam-stat-value-success { color: hsl(var(--success)); }
.fam-stat-value-warning { color: hsl(var(--warning)); }
.fam-stat-value-info { color: hsl(195 90% 48%); }
.fam-stat-value-danger { color: hsl(var(--destructive)); }
.fam-stat-value-muted { color: hsl(var(--muted-foreground)); }

.fam-stat-label {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
    margin-top: var(--space-1);
    font-weight: 500;
}

/* Large stat grid (6-col for reports summary) */
.fam-stat-grid-lg {
    grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 992px) {
    .fam-stat-grid-lg {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .fam-stat-grid-lg {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Form styling --- */
.fam-form .form-label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: hsl(var(--foreground));
    margin-bottom: var(--space-1);
}

.fam-form .form-control,
.fam-form .form-select {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: var(--text-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fam-form .form-control:focus,
.fam-form .form-select:focus {
    border-color: hsl(var(--parent-primary));
    box-shadow: 0 0 0 3px hsl(var(--parent-primary) / 0.15);
    outline: none;
}

.fam-form .form-control:disabled,
.fam-form .form-select:disabled {
    background: hsl(var(--muted) / 0.5);
    opacity: 0.7;
    cursor: not-allowed;
}

.fam-form .form-text {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
    margin-top: var(--space-1);
}

/* --- Toggle switch --- */
.fam-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.fam-toggle-input {
    width: 44px;
    min-width: 44px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: hsl(var(--muted));
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    border: 1px solid hsl(var(--border));
    flex-shrink: 0;
    margin-top: 2px;
}

.fam-toggle-input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: white;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}

.fam-toggle-input:checked {
    background: hsl(var(--parent-primary));
    border-color: hsl(var(--parent-primary));
}

.fam-toggle-input:checked::after {
    transform: translateX(20px);
}

.fam-toggle-input:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.fam-toggle-label {
    font-size: var(--text-sm);
    color: hsl(var(--foreground));
    cursor: pointer;
    line-height: 1.5;
}

/* --- Alert boxes --- */
.fam-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.fam-alert i {
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.fam-alert-success {
    background: hsl(var(--success) / 0.08);
    border: 1px solid hsl(var(--success) / 0.2);
    color: hsl(142 60% 30%);
}

.fam-alert-success i { color: hsl(var(--success)); }

.fam-alert-danger {
    background: hsl(var(--destructive) / 0.08);
    border: 1px solid hsl(var(--destructive) / 0.2);
    color: hsl(0 65% 35%);
}

.fam-alert-danger i { color: hsl(var(--destructive)); }

.fam-alert-warning {
    background: hsl(var(--warning) / 0.1);
    border: 1px solid hsl(var(--warning) / 0.3);
    color: hsl(30 80% 25%);
}

.fam-alert-warning i { color: hsl(var(--warning)); }

.fam-alert-info {
    background: hsl(var(--primary) / 0.06);
    border: 1px solid hsl(var(--primary) / 0.15);
    color: hsl(220 60% 35%);
}

.fam-alert-info i { color: hsl(var(--primary)); }

.fam-alert h5,
.fam-alert h6 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    margin: 0 0 var(--space-1);
    font-size: var(--text-base);
    color: inherit;
}

.fam-alert p {
    margin: 0;
}

/* --- Children grid --- */
.fam-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
}

@media (max-width: 768px) {
    .fam-children-grid {
        grid-template-columns: 1fr;
    }
}

/* Child card */
.fam-child-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.fam-child-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.fam-child-card-header {
    background: var(--gradient-parent);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fam-child-card-header-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.fam-child-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: white;
    color: hsl(var(--parent-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Avatar size variants — cache bust: v2026-04-09-ds-audit */
.fam-child-avatar-sm {
    width: 36px;
    height: 36px;
    font-size: var(--text-sm);
}

.fam-child-avatar-lg {
    width: 50px;
    height: 50px;
    font-size: var(--text-lg);
}

.fam-child-name {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-base);
    color: white;
    margin: 0;
}

.fam-child-meta {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.75);
}

.fam-child-card-body {
    padding: var(--space-5);
    flex: 1;
}

.fam-child-card-footer {
    padding: var(--space-3) var(--space-5) var(--space-4);
}

/* Child stat grid (2x2) */
.fam-child-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.fam-child-stat {
    text-align: center;
    padding: var(--space-3);
    background: hsl(var(--muted) / 0.4);
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border) / 0.5);
}

.fam-child-stat-value {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-lg);
}

.fam-child-stat-label {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
}

/* Recent achievement badge */
.fam-achievement {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: hsl(var(--success) / 0.08);
    border: 1px solid hsl(var(--success) / 0.15);
    border-radius: var(--radius);
    font-size: var(--text-xs);
    color: hsl(142 55% 35%);
    margin-bottom: var(--space-3);
}

.fam-achievement i {
    color: hsl(var(--student-accent));
}

/* Child detail row */
.fam-child-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}

.fam-child-detail-label {
    color: hsl(var(--muted-foreground));
}

.fam-child-detail-value {
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* Add child card (dashed border) */
.fam-add-child-card {
    background: hsl(var(--card));
    border: 2px dashed hsl(var(--parent-primary) / 0.4);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 200px;
}

.fam-add-child-card:hover {
    border-color: hsl(var(--parent-primary));
    background: hsl(var(--parent-primary) / 0.04);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.fam-add-child-card:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.fam-add-child-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: hsl(var(--parent-primary) / 0.1);
    color: hsl(var(--parent-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--space-3);
    transition: all 0.3s ease;
}

.fam-add-child-card:hover .fam-add-child-icon {
    background: hsl(var(--parent-primary) / 0.15);
    transform: scale(1.1);
}

.fam-add-child-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    color: hsl(var(--parent-primary));
    margin-bottom: var(--space-1);
}

.fam-add-child-text {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
}

/* --- Family overview card (gradient) --- */
.fam-overview-card {
    background: var(--gradient-parent);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    color: white;
    margin-bottom: var(--space-5);
    box-shadow: 0 8px 24px hsl(var(--parent-primary) / 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fam-overview-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.fam-overview-meta {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-3);
}

.fam-overview-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.fam-overview-progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius-full);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fam-overview-progress-text {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.75);
}

.fam-discount-badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(4px);
}

/* --- Header text-link button ------------------------------------------------
   A <button> that has to read as one of the header's <a> links. app.css styles
   those via `main .top-row a`, which a <button> never matches, so the link look
   (colour, padding, radius, hover lift) is mirrored here — including the
   <=480px padding squeeze from app.css. Used by "Have your say", which opens the
   feedback modal rather than navigating, so an anchor would be the wrong element. */
main .top-row .top-row-link-btn {
    display: inline-flex;
    align-items: center;
    /* Strip the UA button chrome outright: without `appearance: none` some engines
       keep painting the native control background over `background: none`. */
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    box-shadow: none;
    font: inherit;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

main .top-row .top-row-link-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

main .top-row .top-row-link-btn:focus-visible {
    color: white;
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

@media (max-width: 480px) {
    main .top-row .top-row-link-btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.85rem;
    }
}

/* --- Add / Link child action buttons (v23.1) --- */
.fam-child-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .fam-child-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fam-child-actions > .btn {
        width: 100%;
        justify-content: center;
    }
}

.dash-welcome-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    backdrop-filter: blur(4px);
}

/* --- Summary list (sidebar) --- */
.fam-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fam-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    font-size: var(--text-sm);
}

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

.fam-summary-label {
    color: hsl(var(--muted-foreground));
}

.fam-summary-value {
    font-weight: 700;
    color: hsl(var(--foreground));
}

/* --- Danger zone --- */
.fam-danger-zone {
    border: 2px solid hsl(var(--destructive) / 0.3);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.fam-danger-zone .fam-card-header {
    background: linear-gradient(135deg, hsl(0 75% 55%), hsl(0 65% 48%));
    color: white;
}

.fam-danger-zone .fam-card-body {
    background: hsl(var(--destructive) / 0.02);
}

.fam-danger-confirm {
    margin-top: var(--space-5);
    padding: var(--space-6);
    background: hsl(var(--destructive) / 0.05);
    border: 1px solid hsl(var(--destructive) / 0.15);
    border-radius: var(--radius-lg);
    text-align: center;
}

.fam-danger-confirm-icon {
    font-size: 3rem;
    color: hsl(var(--destructive));
    margin-bottom: var(--space-3);
}

.fam-danger-confirm h5 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    color: hsl(var(--destructive));
    margin-bottom: var(--space-2);
}

.fam-danger-confirm-input {
    max-width: 280px;
    margin: 0 auto;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-color: hsl(var(--destructive) / 0.4) !important;
}

.fam-danger-confirm-input:focus {
    border-color: hsl(var(--destructive)) !important;
    box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15) !important;
}

/* --- Empty state --- */
.fam-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
}

.fam-empty-icon {
    display: inline-flex;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: hsl(var(--muted) / 0.5);
    color: hsl(var(--muted-foreground));
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: var(--space-4);
}

.fam-empty h4 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-2);
}

.fam-empty p {
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-5);
}

/* --- Help card --- */
.fam-help {
    background: hsl(var(--muted) / 0.3);
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    margin-top: var(--space-5);
}

.fam-help h6 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fam-help ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fam-help li {
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

.fam-help li strong {
    color: hsl(var(--foreground));
}

/* --- Username warning --- */
.fam-username-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: hsl(var(--warning) / 0.1);
    color: hsl(30 80% 25%);
    border: 1px solid hsl(var(--warning) / 0.3);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.fam-username-warning i {
    font-size: 1.1rem;
    color: hsl(25 90% 40%);
    margin-top: 2px;
    flex-shrink: 0;
}

.fam-username-warning strong {
    color: hsl(30 80% 20%);
}

/* --- Password display --- */
.fam-password-display {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.fam-password-code {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
}

/* --- Email change inline form --- */
.fam-email-change {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: hsl(var(--muted) / 0.3);
    border-radius: var(--radius-lg);
    border: 1px solid hsl(var(--border));
}

/* --- Report: activity chart --- */
.fam-report-chart-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
}

@media (max-width: 576px) {
    .fam-report-chart-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.fam-report-day {
    text-align: center;
    padding: var(--space-3);
    background: hsl(var(--muted) / 0.3);
    border-radius: var(--radius);
    border: 1px solid hsl(var(--border) / 0.5);
}

.fam-report-day-label {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-1);
}

.fam-report-day-value {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-lg);
    color: hsl(var(--foreground));
}

.fam-report-day-unit {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
}

/* --- Report: recommendations --- */
.fam-tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

@media (max-width: 768px) {
    .fam-tips-grid {
        grid-template-columns: 1fr;
    }
}

.fam-tips-section h6 {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    color: hsl(var(--parent-primary));
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fam-tip-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: hsl(var(--foreground));
    line-height: 1.5;
}

.fam-tip-item i {
    flex-shrink: 0;
    margin-top: 3px;
}

/* --- Report: child progress card --- */
.fam-report-child-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.fam-report-child-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.fam-report-child-header {
    background: hsl(var(--muted) / 0.4);
    padding: var(--space-4) var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.fam-report-child-body {
    padding: var(--space-5);
    flex: 1;
}

.fam-report-child-footer {
    padding: var(--space-3) var(--space-5) var(--space-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid hsl(var(--border) / 0.5);
}

/* Progress bar */
.fam-progress-bar {
    height: 8px;
    background: hsl(var(--muted) / 0.5);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.fam-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--gradient-student);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Weekly goals in report */
.fam-weekly-goals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.fam-weekly-goal {
    text-align: center;
    padding: var(--space-3);
    background: hsl(var(--muted) / 0.3);
    border-radius: var(--radius);
}

.fam-weekly-goal-label {
    font-size: var(--text-xs);
    color: hsl(var(--muted-foreground));
}

.fam-weekly-goal-value {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    color: hsl(var(--primary));
}

/* --- Settings: section labels --- */
.fam-section-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-3);
    margin-top: var(--space-4);
}

.fam-section-label:first-child {
    margin-top: 0;
}

/* --- Quick action buttons grid --- */
.fam-action-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- Dropdown menu on child cards --- */
.fam-child-menu-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    color: white;
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fam-child-menu-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* --- Timeframe selector --- */
.fam-timeframe {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.fam-timeframe .form-select {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: var(--text-sm);
    min-width: 160px;
}

.fam-timeframe .form-select:focus {
    border-color: hsl(var(--parent-primary));
    box-shadow: 0 0 0 3px hsl(var(--parent-primary) / 0.15);
}

/* --- Account info (description list) --- */
.fam-account-info dt {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.fam-account-info dd {
    font-size: var(--text-sm);
    color: hsl(var(--foreground));
    font-weight: 600;
}

.fam-account-info code {
    background: hsl(var(--muted) / 0.5);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: hsl(var(--parent-primary));
    font-weight: 600;
}


/* ═══════════════════════════════════════
   DARK MODE - Family Pages
   ═══════════════════════════════════════ */

[data-theme="dark"] .fam-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .fam-card-header-secondary {
    background: hsl(var(--muted) / 0.5);
}

[data-theme="dark"] .fam-card-footer {
    background: hsl(var(--muted) / 0.2);
    border-top-color: hsl(var(--border));
}

[data-theme="dark"] .fam-stat-item {
    background: hsl(var(--muted) / 0.3);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-form .form-control,
[data-theme="dark"] .fam-form .form-select {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

[data-theme="dark"] .fam-toggle-input {
    background: hsl(var(--muted) / 0.5);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-toggle-input::after {
    background: hsl(var(--foreground));
}

[data-theme="dark"] .fam-alert-success {
    background: hsl(var(--success) / 0.1);
    border-color: hsl(var(--success) / 0.25);
    color: hsl(142 65% 65%);
}

[data-theme="dark"] .fam-alert-danger {
    background: hsl(var(--destructive) / 0.1);
    border-color: hsl(var(--destructive) / 0.25);
    color: hsl(0 80% 70%);
}

[data-theme="dark"] .fam-alert-warning {
    background: hsl(var(--warning) / 0.1);
    border-color: hsl(var(--warning) / 0.3);
    color: hsl(45 90% 70%);
}

[data-theme="dark"] .fam-alert-info {
    background: hsl(var(--primary) / 0.08);
    border-color: hsl(var(--primary) / 0.2);
    color: hsl(220 80% 75%);
}

[data-theme="dark"] .fam-child-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-child-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .fam-child-stat {
    background: hsl(var(--muted) / 0.3);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-achievement {
    background: hsl(var(--success) / 0.1);
    border-color: hsl(var(--success) / 0.2);
    color: hsl(142 60% 60%);
}

[data-theme="dark"] .fam-add-child-card {
    background: hsl(var(--card));
    border-color: hsl(var(--parent-primary) / 0.3);
}

[data-theme="dark"] .fam-add-child-card:hover {
    background: hsl(var(--parent-primary) / 0.08);
    border-color: hsl(var(--parent-primary) / 0.5);
}

[data-theme="dark"] .fam-add-child-icon {
    background: hsl(var(--parent-primary) / 0.15);
}

[data-theme="dark"] .fam-overview-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .fam-help {
    background: hsl(var(--muted) / 0.2);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-username-warning {
    background: hsl(var(--warning) / 0.12);
    border-color: hsl(var(--warning) / 0.25);
    color: hsl(45 90% 70%);
}

[data-theme="dark"] .fam-username-warning i {
    color: hsl(40 85% 60%);
}

[data-theme="dark"] .fam-username-warning strong {
    color: hsl(45 90% 75%);
}

[data-theme="dark"] .fam-password-code {
    background: hsl(var(--muted) / 0.5);
    color: hsl(142 70% 65%);
}

[data-theme="dark"] .fam-email-change {
    background: hsl(var(--muted) / 0.2);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-danger-zone {
    border-color: hsl(var(--destructive) / 0.4);
}

[data-theme="dark"] .fam-danger-zone .fam-card-body {
    background: hsl(var(--destructive) / 0.04);
}

[data-theme="dark"] .fam-danger-confirm {
    background: hsl(var(--destructive) / 0.08);
    border-color: hsl(var(--destructive) / 0.2);
}

[data-theme="dark"] .fam-report-child-header {
    background: hsl(var(--muted) / 0.3);
    border-bottom-color: hsl(var(--border));
}

[data-theme="dark"] .fam-report-child-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-report-child-footer {
    border-top-color: hsl(var(--border));
}

[data-theme="dark"] .fam-report-day {
    background: hsl(var(--muted) / 0.2);
    border-color: hsl(var(--border));
}

[data-theme="dark"] .fam-weekly-goal {
    background: hsl(var(--muted) / 0.2);
}

[data-theme="dark"] .fam-progress-bar {
    background: hsl(var(--muted) / 0.3);
}

[data-theme="dark"] .fam-summary-item {
    border-bottom-color: hsl(var(--border) / 0.5);
}

[data-theme="dark"] .fam-account-info code {
    background: hsl(var(--muted) / 0.4);
    color: hsl(195 80% 65%);
}

[data-theme="dark"] .fam-timeframe .form-select {
    background: hsl(var(--secondary));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

[data-theme="dark"] .fam-tips-section h6 {
    color: hsl(195 80% 65%);
}


/* ═══════════════════════════════════════
   REDUCED MOTION - Family Pages
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .fam-card,
    .fam-card-interactive,
    .fam-child-card,
    .fam-add-child-card,
    .fam-add-child-icon,
    .fam-stat-item,
    .fam-report-child-card,
    .fam-overview-progress-fill,
    .fam-progress-fill {
        animation: none !important;
        transition: none !important;
    }
}


/* ═══════════════════════════════════════
   MOBILE - Family Pages
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
    .fam-content {
        padding: 0 var(--space-3);
    }

    .fam-card-body {
        padding: var(--space-4);
    }

    .fam-card-header {
        padding: var(--space-3) var(--space-4);
    }

    .fam-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fam-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .fam-tips-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .fam-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .fam-stat-value {
        font-size: var(--text-xl);
    }

    .fam-child-card-header {
        padding: var(--space-3) var(--space-4);
    }
}

/* Coming Soon banner overlay for unimplemented settings panels */
.fam-coming-soon-wrapper {
    position: relative;
    overflow: hidden;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

.fam-coming-soon-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    background: linear-gradient(135deg, hsl(var(--student-primary)), hsl(var(--student-secondary)));
    color: #fff;
    font-size: 2.2rem;
    font-weight: 900;
    font-family: 'Nunito', sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.6rem 4rem;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .fam-coming-soon-wrapper {
    opacity: 0.45;
}

[data-theme="dark"] .fam-coming-soon-banner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 576px) {
    .fam-coming-soon-banner {
        font-size: 1.5rem;
        padding: 0.5rem 2.5rem;
    }
}

/* Design system audit — cache bust: v2026-04-09-ds-audit */
.fam-card-header-meta {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.75);
}

.dash-subscription-badge {
    background: rgba(255, 255, 255, 0.95);
    color: #1e3a5f;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Support page icon circles — cache bust: v2026-04-09-ds-audit */
.support-icon-circle {
    width: 60px;
    height: 60px;
}

/* Pre-interactive state for Blazor Server circuit connection — cache bust: v2026-04-09-ds-audit */
.key-stage-card.not-interactive {
    pointer-events: none;
    opacity: 0.7;
}

/* v2026-04-07-family-pages */

/* ============================================================
   ASSESSMENT PAGE (.asmnt-*)
   Phase 167 — Assessment Session Flow
   All styles scoped to the /assessment route
   ============================================================ */

/* --- Wobble keyframe (not in app.css — defined here for assessment use) --- */
@keyframes asmnt-wobble {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-5px) rotate(-2deg); }
    30% { transform: translateX(10px) rotate(1deg); }
    45% { transform: translateX(-8px) rotate(-1deg); }
    60% { transform: translateX(8px) rotate(0.5deg); }
    75% { transform: translateX(-4px) rotate(-0.5deg); }
    90% { transform: translateX(4px) rotate(0deg); }
}

/* --- Fade-in-up animation for question card --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
}

/* --- Page container --- */
.asmnt-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-4);
}

/* --- Step 1: Hero --- */
.asmnt-hero {
    text-align: center;
    margin-bottom: var(--space-8);
}
.asmnt-hero h1 {
    font-family: 'Nunito', sans-serif;
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin-bottom: var(--space-2);
}
.asmnt-hero p {
    font-size: var(--text-base);
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

/* --- Step 1: Setup card --- */
.asmnt-setup-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- Name input label --- */
.asmnt-setup-card label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: hsl(var(--foreground));
}
.asmnt-setup-card input[type="text"] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    font-size: var(--text-base);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.15s;
}
.asmnt-setup-card input[type="text"]:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-color: hsl(var(--primary));
}

/* --- Year group section heading --- */
.asmnt-ks-heading {
    font-size: var(--text-sm);
    font-weight: 700;
    color: hsl(var(--foreground));
    margin: 0;
}

/* --- KS section groups --- */
.asmnt-ks-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* --- KS label badges --- */
.asmnt-ks-label {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.asmnt-ks-label--ks1 { background: hsl(300 70% 90%); color: hsl(300 70% 35%); }
.asmnt-ks-label--ks2 { background: hsl(220 90% 92%); color: hsl(220 90% 35%); }
.asmnt-ks-label--ks3 { background: hsl(45 100% 90%); color: hsl(45 100% 28%); }
.asmnt-ks-label--ks4 { background: hsl(15 90% 90%); color: hsl(15 90% 30%); }

/* --- Year group pill grid --- */
.asmnt-yg-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Year group pills --- */
.asmnt-yg-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}
.asmnt-yg-pill:hover {
    opacity: 0.85;
    transform: scale(1.02);
}
.asmnt-yg-pill:active {
    transform: scale(0.97);
}
.asmnt-yg-pill:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* KS tint backgrounds */
.asmnt-yg-pill--ks1 { background: hsl(300 70% 93%); color: hsl(300 70% 30%); }
.asmnt-yg-pill--ks2 { background: hsl(220 90% 93%); color: hsl(220 90% 30%); }
.asmnt-yg-pill--ks3 { background: hsl(45 100% 92%); color: hsl(45 100% 25%); }
.asmnt-yg-pill--ks4 { background: hsl(15 90% 93%); color: hsl(15 90% 28%); }

/* Active / selected state — accent purple overrides KS tint */
.asmnt-yg-pill--active {
    border-color: hsl(var(--student-primary));
    background: hsl(280 100% 97%);
    color: hsl(var(--student-primary));
}

/* --- Step 2: Progress section --- */
.asmnt-progress-section {
    padding: var(--space-4) 0;
    margin-bottom: var(--space-4);
}
.asmnt-progress-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-2);
    text-align: center;
}

/* --- Step 2: Question card --- */
.asmnt-question-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.asmnt-question-card h2 {
    font-family: 'Nunito', sans-serif;
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    color: hsl(var(--foreground));
    margin: 0;
    max-width: 100%;
}

/* --- MC grid --- */
.asmnt-mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
@media (max-width: 575px) {
    .asmnt-mc-grid {
        grid-template-columns: 1fr;
    }
}

/* --- MC option cards --- */
.asmnt-mc-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-size: var(--text-base);
    color: hsl(var(--foreground));
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s, background 0.15s;
}
.asmnt-mc-option:hover:not([disabled]) {
    box-shadow: var(--shadow-hover);
    transform: scale(1.01);
}
.asmnt-mc-option:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}
.asmnt-mc-option:active:not([disabled]) {
    transform: scale(0.99);
}

/* Selected (pre-confirm) */
.asmnt-mc-option--selected {
    border: 2px solid hsl(var(--student-primary));
    background: hsl(280 100% 98%);
}

/* Correct (post-confirm) */
.asmnt-mc-option--correct {
    border: 2px solid hsl(var(--success));
    background: rgba(34, 197, 94, 0.12);
    color: hsl(142 70% 28%);
    animation: scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Incorrect (post-confirm) */
.asmnt-mc-option--incorrect {
    border: 2px solid hsl(var(--destructive));
    background: rgba(239, 68, 68, 0.12);
    color: hsl(0 84.2% 35%);
    animation: asmnt-wobble 0.5s ease-in-out;
}

/* Disabled other options after reveal */
.asmnt-mc-option--disabled,
.asmnt-mc-option[disabled] {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

/* Letter badge */
.asmnt-mc-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
    border-radius: var(--radius-full);
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

/* Option text */
.asmnt-mc-text {
    flex: 1;
    line-height: 1.4;
}

/* Bootstrap icons alignment inside options */
.asmnt-mc-option .bi {
    flex-shrink: 0;
    font-size: 1.1rem;
    align-self: center;
}
.asmnt-mc-option--correct .bi { color: hsl(var(--success)); }
.asmnt-mc-option--incorrect .bi { color: hsl(var(--destructive)); }

/* --- Rate limit message --- */
.asmnt-rate-limit-msg {
    font-size: var(--text-sm);
    font-weight: 700;
    color: hsl(45 100% 28%);
    background: hsl(45 100% 93%);
    border: 1px solid hsl(45 100% 60%);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    text-align: center;
}

/* --- Generic error message --- */
.asmnt-error-msg {
    font-size: var(--text-sm);
    color: hsl(var(--destructive));
    margin: 0;
}

/* --- Step 3: Complete screen --- */
.asmnt-complete {
    text-align: center;
    padding: var(--space-16) var(--space-4);
    font-size: var(--text-xl);
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    color: hsl(var(--foreground));
}

/* --- Dark mode overrides --- */
[data-theme="dark"] .asmnt-ks-label--ks1 { background: hsl(300 70% 15%); color: hsl(300 70% 75%); }
[data-theme="dark"] .asmnt-ks-label--ks2 { background: hsl(220 90% 15%); color: hsl(220 90% 75%); }
[data-theme="dark"] .asmnt-ks-label--ks3 { background: hsl(45 100% 12%); color: hsl(45 100% 70%); }
[data-theme="dark"] .asmnt-ks-label--ks4 { background: hsl(15 90% 12%); color: hsl(15 90% 72%); }

[data-theme="dark"] .asmnt-yg-pill--ks1 { background: hsl(300 70% 15%); color: hsl(300 70% 80%); }
[data-theme="dark"] .asmnt-yg-pill--ks2 { background: hsl(220 90% 15%); color: hsl(220 90% 80%); }
[data-theme="dark"] .asmnt-yg-pill--ks3 { background: hsl(45 100% 12%); color: hsl(45 100% 75%); }
[data-theme="dark"] .asmnt-yg-pill--ks4 { background: hsl(15 90% 12%); color: hsl(15 90% 75%); }
[data-theme="dark"] .asmnt-yg-pill--active { background: hsl(280 100% 15%); color: hsl(280 100% 80%); }

[data-theme="dark"] .asmnt-mc-option--correct { background: rgba(34, 197, 94, 0.18); }
[data-theme="dark"] .asmnt-mc-option--incorrect { background: rgba(239, 68, 68, 0.18); }
[data-theme="dark"] .asmnt-rate-limit-msg { background: hsl(45 100% 12%); color: hsl(45 100% 70%); border-color: hsl(45 100% 30%); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .asmnt-mc-option--correct,
    .asmnt-mc-option--incorrect,
    .asmnt-yg-pill,
    .asmnt-mc-option,
    .animate-fade-in-up {
        animation: none !important;
        transition-duration: 0.01s !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ASSESSMENT RESULTS PAGE — Phase 168
   Namespace: .asmnt-results-*
   ═══════════════════════════════════════════════════════════════ */

/* --- Blurred teaser behind gate --- */
.asmnt-results-teaser {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    margin-bottom: var(--space-8);
}

/* --- Email gate card --- */
.asmnt-results-gate {
    background: hsl(var(--card));
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-xl);
    max-width: 440px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    animation: fadeInUp 0.3s ease-out;
}

.asmnt-results-gate__heading {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: var(--text-xl);
    color: hsl(var(--foreground));
    margin-bottom: var(--space-2);
    text-align: center;
}

.asmnt-results-gate__subtext {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-6);
    text-align: center;
}

.asmnt-results-gate__input {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    font-size: var(--text-base);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color 0.2s;
    margin-bottom: var(--space-3);
}

.asmnt-results-gate__input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}

.asmnt-results-gate__input--error {
    border-color: hsl(var(--destructive));
}

.asmnt-results-gate__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    min-height: 44px;
}

.asmnt-results-gate__consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 2px;
    accent-color: hsl(var(--primary));
    cursor: pointer;
}

.asmnt-results-gate__consent label {
    font-size: var(--text-sm);
    color: hsl(var(--foreground));
    cursor: pointer;
    line-height: 1.4;
}

/* --- Hero score card --- */
.asmnt-results-hero {
    background: var(--gradient-student, linear-gradient(135deg, #8b5cf6, #ec4899));
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    color: white;
    margin-bottom: var(--space-8);
}

.asmnt-results-hero--glow {
    box-shadow: 0 0 32px hsl(var(--student-accent) / 0.5);
}

.asmnt-results-hero__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: var(--text-xl);
    margin-bottom: var(--space-2);
    opacity: 0.95;
}

.asmnt-results-hero__score {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: var(--space-3);
}

.asmnt-results-hero__summary {
    font-size: var(--text-base);
    opacity: 0.9;
    line-height: 1.5;
}

/* --- Branch breakdown --- */
.asmnt-results-breakdown {
    margin-bottom: var(--space-8);
}

.asmnt-results-breakdown__title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: var(--text-xl);
    color: hsl(var(--foreground));
    margin-bottom: var(--space-4);
}

.asmnt-results-branch-row {
    margin-bottom: var(--space-4);
}

.asmnt-results-branch-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1, 4px);
}

.asmnt-results-branch-fraction {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
}

/* --- CTA placeholder (empty in P168) --- */
.asmnt-results-cta-placeholder {
    min-height: var(--space-4);
}

/* --- Grade table --- */
.asmnt-results-grades {
    margin-top: var(--space-8);
}

.asmnt-results-grades__subtitle {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-4);
}

.asmnt-results-grades__table {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid hsl(var(--border));
}

.asmnt-results-grades__header {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: hsl(var(--muted));
    font-weight: 700;
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.asmnt-results-grades__row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid hsl(var(--border));
    font-size: var(--text-sm);
    transition: background-color 0.2s ease;
}

.asmnt-results-grades__row--active {
    background: linear-gradient(135deg, hsl(280 100% 60% / 0.1), hsl(340 100% 65% / 0.1));
    font-weight: 700;
    position: relative;
}

.asmnt-results-grades__row--active::before {
    content: "▶";
    position: absolute;
    left: var(--space-1);
    font-size: 10px;
    color: hsl(var(--student-primary));
    top: 50%;
    transform: translateY(-50%);
}

.asmnt-results-grades__label {
    color: hsl(var(--foreground));
}

.asmnt-results-grades__range {
    color: hsl(var(--muted-foreground));
}

.asmnt-results-grades__row--active .asmnt-results-grades__label,
.asmnt-results-grades__row--active .asmnt-results-grades__range {
    color: hsl(var(--foreground));
}

.asmnt-results-grades__verdict {
    margin-top: var(--space-4);
    font-size: var(--text-base);
    color: hsl(var(--foreground));
    text-align: center;
    padding: var(--space-3) var(--space-4);
    background: hsl(var(--muted) / 0.5);
    border-radius: var(--radius);
}

.asmnt-results-grades__verdict strong {
    color: hsl(var(--student-primary));
}

/* Dark mode */
[data-theme="dark"] .asmnt-results-grades__row--active {
    background: linear-gradient(135deg, hsl(280 100% 60% / 0.15), hsl(340 100% 65% / 0.15));
}

[data-theme="dark"] .asmnt-results-grades__verdict {
    background: hsl(var(--muted) / 0.3);
}

/* --- Confetti CSS animation --- */
.asmnt-results-confetti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.asmnt-results-confetti__piece {
    position: absolute;
    top: -20px;
    left: var(--offset, 50%);
    width: 10px;
    height: 10px;
    border-radius: 2px;
    animation: confetti-fall 2s ease-in var(--delay, 0s) forwards;
}

.asmnt-results-confetti__piece:nth-child(odd) {
    background: hsl(var(--student-accent));
}
.asmnt-results-confetti__piece:nth-child(even) {
    background: hsl(var(--student-primary));
}
.asmnt-results-confetti__piece:nth-child(3n) {
    background: hsl(var(--student-secondary));
    width: 8px;
    height: 12px;
}
.asmnt-results-confetti__piece:nth-child(4n) {
    background: hsl(var(--student-success, var(--success)));
    border-radius: 50%;
}

/* --- Dark mode overrides --- */
[data-theme="dark"] .asmnt-results-gate {
    background: hsl(var(--card));
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .asmnt-results-gate__input {
    background: hsl(var(--background));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}

[data-theme="dark"] .asmnt-results-hero {
    background: linear-gradient(135deg, hsl(280, 60%, 40%), hsl(340, 60%, 40%));
}

[data-theme="dark"] .asmnt-results-breakdown__title {
    color: hsl(var(--foreground));
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .asmnt-results-gate {
        animation: none;
    }
    .asmnt-results-hero {
        animation: none;
    }
    .asmnt-results-confetti {
        display: none;
    }
    .asmnt-results-branch-row {
        animation: none !important;
    }
}

/* ==========================================================================
   Assessment Conversion Cards (Phase 169)
   ========================================================================== */

.asmnt-conversion-section {
    margin-top: var(--space-8);
}

.asmnt-conversion-heading {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-6);
    text-align: center;
    color: hsl(var(--foreground));
}

.asmnt-conversion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    max-width: 1000px;
    margin: 0 auto;
}

.asmnt-conversion-card {
    padding: var(--space-6);
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius);
    background: white;
    text-align: center;
    position: relative;
    transition: all 0.2s;
}

.asmnt-conversion-card:hover {
    box-shadow: var(--shadow-hover);
}

/* Primary card (Google OAuth) - per D-06 */
.asmnt-conversion-card--primary {
    border: 2px solid hsl(var(--student-primary));
    background: linear-gradient(135deg, rgba(128, 90, 213, 0.03) 0%, rgba(236, 72, 153, 0.03) 100%);
}

.asmnt-conversion-badge {
    position: absolute;
    top: -12px;
    right: var(--space-4);
    background: hsl(var(--student-accent));
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.asmnt-conversion-card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: hsl(var(--foreground));
}

.asmnt-conversion-card__title i {
    margin-right: var(--space-2);
}

.asmnt-conversion-card__desc {
    color: hsl(var(--muted-foreground));
    font-size: 0.95rem;
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.asmnt-magic-link-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
    text-align: left;
}

.asmnt-account-type-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: hsl(var(--muted) / 0.3);
    border-radius: var(--radius);
    border: 2px solid hsl(var(--border));
}

.asmnt-account-type-label {
    font-size: 0.95rem;
    color: hsl(var(--foreground));
}

.asmnt-account-type-label strong {
    color: hsl(var(--student-primary));
}

.asmnt-success-message {
    background: hsl(var(--success) / 0.08);
    border-left: 4px solid hsl(var(--success));
    padding: var(--space-4);
    border-radius: var(--radius);
    margin-top: var(--space-4);
    color: hsl(var(--foreground));
}

.asmnt-success-message i {
    color: hsl(var(--success));
    margin-right: var(--space-2);
}

[data-theme="dark"] .asmnt-account-type-toggle {
    background: hsl(var(--muted) / 0.15);
    border-color: hsl(var(--border));
}

/* Dark mode */
[data-theme="dark"] .asmnt-conversion-card {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .asmnt-conversion-card--primary {
    background: linear-gradient(135deg, rgba(128, 90, 213, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .asmnt-conversion-card {
        transition: none;
    }
}

/* ============================================
   Phase 170 — Assessment Hero CTA
   ============================================ */

@keyframes pulse-magic {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.lp-btn-magic {
    background: linear-gradient(135deg, hsl(280 100% 60%), hsl(340 100% 65%));
    color: #ffffff;
    animation: pulse-magic 1s ease-in-out infinite;
}

.lp-btn-magic:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px hsla(280, 100%, 60%, 0.4);
    animation: none;
}

.lp-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.lp-btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 479px) {
    .lp-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-cta-buttons .lp-btn {
        text-align: center;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-btn-magic {
        animation: none;
    }
}

/* ============================================================
   Cookie Consent Banner (Phase 172)
   Namespace: .consent-
   z-index: 10002 (above dev banner 10001, below toasts 99999)
   ============================================================ */

.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background: hsl(var(--background));
    border-top: 1px solid hsl(var(--border));
    padding: var(--space-4) var(--space-6);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lg);
}

.consent-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.consent-banner__message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: hsl(var(--foreground));
    flex: 1;
    min-width: 0;
}

.consent-banner__icon {
    flex-shrink: 0;
    color: hsl(var(--primary));
    margin-top: 2px;
}

.consent-banner__link {
    color: hsl(var(--primary));
    text-decoration: none;
    font-weight: 600;
}

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

.consent-banner__link:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.consent-banner__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.consent-banner__actions .btn {
    min-height: 44px;
    white-space: nowrap;
}

/* Entry animation — slide up from bottom */
@keyframes consentSlideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Exit animation — slide down out of viewport */
@keyframes consentSlideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.consent-banner--enter {
    animation: consentSlideInUp 0.3s ease-out forwards;
}

.consent-banner--exit {
    animation: consentSlideOutDown 0.3s ease-in forwards;
}

/* Mobile responsive — stack text above buttons */
@media (max-width: 639px) {
    .consent-banner {
        padding: var(--space-4);
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    .consent-banner__inner {
        flex-direction: column;
        gap: var(--space-4);
    }

    .consent-banner__actions {
        width: 100%;
        justify-content: stretch;
    }

    .consent-banner__actions .btn {
        flex: 1;
    }
}

/* Reduced motion — instant show/hide, no animation */
@media (prefers-reduced-motion: reduce) {
    .consent-banner--enter {
        animation: none;
    }

    .consent-banner--exit {
        animation: none;
    }
}

/* Dark mode — uses CSS variable tokens, no extra rules needed.
   This block is here for any dark-mode-specific tweaks if needed. */
[data-theme="dark"] .consent-banner {
    box-shadow: var(--shadow-xl);
}

/* ==========================================================================
   PAST ASSESSMENTS PAGE (.past-asmnt- prefix) — v2026-04-15
   ========================================================================== */

.past-asmnt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-5);
    font-family: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Hero header — matches .ksl-status-card pattern */
.past-asmnt-hero {
    background: var(--gradient-hero);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.past-asmnt-hero__icon {
    font-size: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.past-asmnt-hero__title {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: white;
}

.past-asmnt-hero__subtitle {
    margin: 0;
    font-size: var(--text-base);
    opacity: 0.9;
    font-weight: 500;
}

/* Empty state */
.past-asmnt-empty {
    text-align: center;
    padding: var(--space-16) var(--space-4);
}

.past-asmnt-empty__icon {
    font-size: 3rem;
    color: hsl(var(--muted-foreground));
    display: block;
    margin-bottom: var(--space-3);
}

.past-asmnt-empty__heading {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: hsl(var(--foreground));
}

.past-asmnt-empty__text {
    color: hsl(var(--muted-foreground));
    margin-bottom: var(--space-6);
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Child name heading (multi-child) */
.past-asmnt-child-heading {
    font-size: var(--text-lg);
    font-weight: 700;
    margin: var(--space-6) 0 var(--space-3) 0;
    color: hsl(var(--foreground));
}

/* Card grid */
.past-asmnt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Assessment card */
.past-asmnt-card {
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-md);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.past-asmnt-card:hover {
    box-shadow: var(--shadow-hover);
}

.past-asmnt-card--expanded {
    border-color: hsl(var(--primary));
}

/* Card header row */
.past-asmnt-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.past-asmnt-card__info {
    flex: 1;
    min-width: 0;
}

.past-asmnt-card__name {
    font-size: var(--text-lg);
    font-weight: 700;
    color: hsl(var(--foreground));
    display: block;
    margin-bottom: var(--space-2);
}

.past-asmnt-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.past-asmnt-card__date {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* Score badge */
.past-asmnt-score {
    font-size: var(--text-lg);
    font-weight: 800;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
}

.past-asmnt-score--high {
    background: hsl(var(--success) / 0.15);
    color: hsl(142 70% 35%);
}

.past-asmnt-score--mid {
    background: hsl(var(--warning) / 0.15);
    color: hsl(45 100% 35%);
}

.past-asmnt-score--low {
    background: hsl(var(--destructive) / 0.15);
    color: hsl(0 84% 45%);
}

/* Card footer (collapsed state) */
.past-asmnt-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid hsl(var(--border));
}

.past-asmnt-card__topic-count {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* Card actions (expanded state) */
.past-asmnt-card__actions {
    margin-top: var(--space-3);
    text-align: right;
}

/* Topic breakdown (expanded) */
.past-asmnt-breakdown {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid hsl(var(--border));
}

.past-asmnt-breakdown__title {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--muted-foreground));
    margin: 0 0 var(--space-3) 0;
}

.past-asmnt-breakdown__row {
    margin-bottom: var(--space-3);
}

.past-asmnt-breakdown__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}

.past-asmnt-breakdown__fraction {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    font-weight: 600;
}

/* Dark mode adjustments */
[data-theme="dark"] .past-asmnt-score--high {
    color: hsl(142 70% 60%);
}

[data-theme="dark"] .past-asmnt-score--mid {
    color: hsl(45 100% 60%);
}

[data-theme="dark"] .past-asmnt-score--low {
    color: hsl(0 84% 65%);
}

/* Responsive */
@media (max-width: 640px) {
    .past-asmnt-hero {
        flex-direction: column;
        text-align: center;
        padding: var(--space-5);
    }

    .past-asmnt-hero__title {
        font-size: var(--text-xl);
    }

    .past-asmnt-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .past-asmnt-card {
        transition: none;
    }
}

/* ============================================================
   KS2 LANDING PAGE (/ks2)
   Page-scoped prefix: .lp-ks2-
   ============================================================ */

/* Hero gradient — KS2 blue (hsl 220 90% 56% → 260 80% 60%) */
.lp-ks2-hero {
    background: linear-gradient(135deg, hsl(220 90% 46%) 0%, hsl(240 85% 55%) 50%, hsl(260 80% 58%) 100%);
}

/* Tagline pill — lighter blue tint to match hero */
.lp-ks2-tagline {
    color: #bfdbfe;
    background: rgba(255, 255, 255, 0.18);
}

/* Hero graphic card — decorative floating card in hero area */
.lp-ks2-hero-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lp-ks2-hero-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.lp-ks2-hero-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.lp-ks2-hero-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.lp-ks2-hero-level {
    font-size: 0.875rem;
    opacity: 0.85;
}

.lp-ks2-hero-question {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}

.lp-ks2-hero-answer {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #bfdbfe;
    margin-bottom: 0.75rem;
}

.lp-ks2-hero-xp {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(45 100% 80%);
    letter-spacing: 0.02em;
}

/* Topics section */
.lp-ks2-topics-section {
    background: #ffffff;
}

.lp-ks2-topics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.lp-ks2-topic-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.25rem 1rem;
    align-items: start;
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-ks2-topic-card > .lp-ks2-topic-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.lp-ks2-topic-card:hover {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
}

/* SATs-special card */
.lp-ks2-topic-card-sats {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}

.lp-ks2-topic-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: hsl(220 90% 56%);
    color: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-ks2-topic-icon-sats {
    background: linear-gradient(135deg, hsl(220 90% 46%), hsl(260 80% 58%));
}

.lp-ks2-topic-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0 0 0.25rem;
}

.lp-ks2-topic-desc {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* FAQ section */
.lp-ks2-faq-section {
    background: #f9fafb;
}

/* ============================================================
   GCSE LANDING PAGE (/gcse)
   Page-scoped prefix: .lp-gcse-
   ============================================================ */

/* Hero gradient — KS4 warm amber-orange, toned down from original saturated red-orange */
.lp-gcse-hero {
    background: linear-gradient(135deg, hsl(30 75% 45%) 0%, hsl(22 70% 52%) 50%, hsl(15 60% 48%) 100%);
}

/* Tagline pill */
.lp-gcse-tagline {
    color: #fed7aa;
    background: rgba(255, 255, 255, 0.18);
}

/* Hero graphic card */
.lp-gcse-hero-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lp-gcse-hero-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.lp-gcse-hero-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.lp-gcse-hero-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.lp-gcse-hero-level {
    font-size: 0.875rem;
    opacity: 0.85;
}

.lp-gcse-hero-question {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}

.lp-gcse-hero-answer {
    font-family: 'Nunito', sans-serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: #fed7aa;
    margin-bottom: 0.75rem;
}

.lp-gcse-hero-xp {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(45 100% 80%);
    letter-spacing: 0.02em;
}

/* Value comparison bar */
.lp-gcse-value-section {
    background: #fff7ed;
    border-top: 1px solid #fed7aa;
    border-bottom: 1px solid #fed7aa;
    padding: 2.5rem 1.5rem;
}

.lp-gcse-value-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 0 auto 0.75rem;
}

.lp-gcse-value-item {
    text-align: center;
}

.lp-gcse-value-number {
    font-family: 'Nunito', sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    color: hsl(25 90% 42%);
    line-height: 1.1;
}

.lp-gcse-value-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.lp-gcse-value-divider {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #9ca3af;
}

.lp-gcse-value-caption {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Topics section */
.lp-gcse-topics-section {
    background: #ffffff;
}

.lp-gcse-topics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.lp-gcse-topic-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.25rem 1rem;
    align-items: start;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-gcse-topic-card > .lp-gcse-topic-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.lp-gcse-topic-card:hover {
    box-shadow: 0 4px 16px rgba(180, 100, 40, 0.12);
    transform: translateY(-2px);
}

/* Elite topic card */
.lp-gcse-topic-card-elite {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #d8b4fe;
}

.lp-gcse-topic-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: hsl(25 65% 50%);
    color: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-gcse-topic-icon-elite {
    background: linear-gradient(135deg, hsl(280 80% 55%), hsl(340 80% 60%));
}

.lp-gcse-topic-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #7c2d12;
    margin: 0 0 0.25rem;
}

.lp-gcse-topic-desc {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* FAQ section */
.lp-gcse-faq-section {
    background: #f9fafb;
}

/* ============================================================
   SHARED: FAQ ACCORDION COMPONENT
   Used by both KS2 and GCSE pages (and extensible to future pages)
   ============================================================ */

.lp-faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lp-faq-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.lp-faq-item[open] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.lp-faq-question {
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color 0.15s ease;
}

.lp-faq-question::-webkit-details-marker {
    display: none;
}

.lp-faq-question::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
    margin-left: 0.75rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.lp-faq-item[open] .lp-faq-question::after {
    content: '−';
    color: #7c3aed;
}

.lp-faq-question:hover {
    background-color: #f9fafb;
}

.lp-faq-answer {
    padding: 0 1.5rem 1.25rem;
    color: #4b5563;
    font-size: 0.9375rem;
    line-height: 1.65;
}

.lp-faq-answer p {
    margin: 0;
}

.lp-faq-answer p + p {
    margin-top: 0.75rem;
}

.lp-faq-answer strong {
    color: #1a1a2e;
}

/* ============================================================
   KS2 / GCSE RESPONSIVE — Tablet (min-width: 640px)
   ============================================================ */

@media (min-width: 640px) {
    .lp-ks2-topics-grid,
    .lp-gcse-topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   KS2 / GCSE RESPONSIVE — Desktop (min-width: 1024px)
   ============================================================ */

@media (min-width: 1024px) {
    .lp-ks2-topics-grid,
    .lp-gcse-topics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   KS2 / GCSE REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .lp-ks2-topic-card,
    .lp-gcse-topic-card {
        transition: none;
    }
}

/* ============================================================
   KS1 LANDING PAGE (/ks1)
   Page-scoped prefix: .lp-ks1-
   ============================================================ */

/* Hero gradient — KS1 pink (hsl 300 70% 55% → hsl 330 80% 60%) */
.lp-ks1-hero {
    background: linear-gradient(135deg, hsl(300 70% 48%) 0%, hsl(315 75% 55%) 50%, hsl(330 80% 58%) 100%);
}

/* Tagline pill */
.lp-ks1-tagline {
    color: #f9a8d4;
    background: rgba(255, 255, 255, 0.18);
}

/* Hero graphic card */
.lp-ks1-hero-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lp-ks1-hero-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.lp-ks1-hero-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.lp-ks1-hero-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.lp-ks1-hero-level {
    font-size: 0.875rem;
    opacity: 0.85;
}

.lp-ks1-hero-question {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}

.lp-ks1-hero-answer {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fce7f3;
    margin-bottom: 0.75rem;
}

.lp-ks1-hero-xp {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(45 100% 80%);
    letter-spacing: 0.02em;
}

/* Topics section */
.lp-ks1-topics-section {
    background: #ffffff;
}

.lp-ks1-topics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.lp-ks1-topic-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.25rem 1rem;
    align-items: start;
    background: #fdf2f8;
    border: 1px solid #f9a8d4;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-ks1-topic-card > .lp-ks1-topic-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.lp-ks1-topic-card:hover {
    box-shadow: 0 4px 16px rgba(192, 38, 211, 0.12);
    transform: translateY(-2px);
}

/* Featured topic card */
.lp-ks1-topic-card-featured {
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-color: #f472b6;
}

.lp-ks1-topic-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: hsl(300 70% 55%);
    color: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-ks1-topic-icon-featured {
    background: linear-gradient(135deg, hsl(300 70% 48%), hsl(330 80% 58%));
}

.lp-ks1-topic-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #831843;
    margin: 0 0 0.25rem;
}

.lp-ks1-topic-desc {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* FAQ section */
.lp-ks1-faq-section {
    background: #f9fafb;
}

/* ============================================================
   KS3 LANDING PAGE (/ks3)
   Page-scoped prefix: .lp-ks3-
   ============================================================ */

/* Hero gradient — KS3 yellow/amber (hsl 45 100% 45% → hsl 30 95% 50%) */
.lp-ks3-hero {
    background: linear-gradient(135deg, hsl(40 95% 38%) 0%, hsl(45 100% 44%) 50%, hsl(35 100% 48%) 100%);
}

/* Tagline pill */
.lp-ks3-tagline {
    color: #fef08a;
    background: rgba(255, 255, 255, 0.18);
}

/* Hero graphic card */
.lp-ks3-hero-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lp-ks3-hero-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    padding: 1.75rem 2rem;
    max-width: 320px;
    width: 100%;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.lp-ks3-hero-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}

.lp-ks3-hero-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.lp-ks3-hero-level {
    font-size: 0.875rem;
    opacity: 0.85;
}

.lp-ks3-hero-question {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0.95;
}

.lp-ks3-hero-answer {
    font-family: 'Nunito', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: #fef08a;
    margin-bottom: 0.75rem;
}

.lp-ks3-hero-xp {
    font-size: 0.875rem;
    font-weight: 700;
    color: hsl(45 100% 85%);
    letter-spacing: 0.02em;
}

/* Engagement stats bar */
.lp-ks3-engagement-section {
    background: #fffbeb;
    border-top: 1px solid #fde68a;
    border-bottom: 1px solid #fde68a;
    padding: 2.5rem 1.5rem;
}

.lp-ks3-engagement-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    max-width: 640px;
    margin: 0 auto 0.75rem;
}

.lp-ks3-engagement-item {
    text-align: center;
}

.lp-ks3-engagement-number {
    font-family: 'Nunito', sans-serif;
    font-size: 2.25rem;
    font-weight: 900;
    color: hsl(40 95% 38%);
    line-height: 1.1;
}

.lp-ks3-engagement-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
    max-width: 200px;
}

.lp-ks3-engagement-divider {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #9ca3af;
}

.lp-ks3-engagement-caption {
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
}

/* Topics section */
.lp-ks3-topics-section {
    background: #ffffff;
}

.lp-ks3-topics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.lp-ks3-topic-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0.25rem 1rem;
    align-items: start;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-ks3-topic-card:hover {
    box-shadow: 0 4px 16px rgba(202, 138, 4, 0.14);
    transform: translateY(-2px);
}

.lp-ks3-topic-card > .lp-ks3-topic-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
}

/* Featured topic card */
.lp-ks3-topic-card-featured {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
    border-color: #fbbf24;
}

.lp-ks3-topic-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: hsl(45 100% 44%);
    color: #ffffff;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-ks3-topic-icon-featured {
    background: linear-gradient(135deg, hsl(40 95% 38%), hsl(35 100% 48%));
}

.lp-ks3-topic-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #713f12;
    margin: 0 0 0.25rem;
}

.lp-ks3-topic-desc {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* FAQ section */
.lp-ks3-faq-section {
    background: #f9fafb;
}

/* ============================================================
   KS1 / KS3 RESPONSIVE — Tablet (min-width: 640px)
   ============================================================ */

@media (min-width: 640px) {
    .lp-ks1-topics-grid,
    .lp-ks3-topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   KS1 / KS3 RESPONSIVE — Desktop (min-width: 1024px)
   ============================================================ */

@media (min-width: 1024px) {
    .lp-ks1-topics-grid,
    .lp-ks3-topics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   KS1 / KS3 REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .lp-ks1-topic-card,
    .lp-ks3-topic-card {
        transition: none;
    }
}

/* ============================================================
   KS CROSS-LINKS SECTION — "Looking for a different age group?"
   Used on all 4 KS landing pages (/ks1, /ks2, /ks3, /gcse)
   v2026-04-16-ks-crosslinks
   ============================================================ */

.lp-crosslink-section {
    padding: 3rem 2rem;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
}

.lp-crosslink-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.lp-crosslink-heading {
    font-family: 'Nunito', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.lp-crosslink-subtext {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1.75rem;
}

.lp-crosslink-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.lp-crosslink-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    min-width: 160px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-crosslink-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
}

.lp-crosslink-card:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 2px;
}

.lp-crosslink-card-ks1 {
    border-color: hsl(300, 70%, 65%);
}

.lp-crosslink-card-ks1:hover {
    border-color: hsl(300, 70%, 55%);
    box-shadow: 0 4px 16px hsla(300, 70%, 65%, 0.25);
}

.lp-crosslink-card-ks2 {
    border-color: hsl(220, 90%, 60%);
}

.lp-crosslink-card-ks2:hover {
    border-color: hsl(220, 90%, 50%);
    box-shadow: 0 4px 16px hsla(220, 90%, 60%, 0.25);
}

.lp-crosslink-card-ks3 {
    border-color: hsl(45, 100%, 55%);
}

.lp-crosslink-card-ks3:hover {
    border-color: hsl(45, 100%, 45%);
    box-shadow: 0 4px 16px hsla(45, 100%, 55%, 0.25);
}

.lp-crosslink-card-gcse {
    border-color: hsl(15, 90%, 55%);
}

.lp-crosslink-card-gcse:hover {
    border-color: hsl(15, 90%, 45%);
    box-shadow: 0 4px 16px hsla(15, 90%, 55%, 0.25);
}

.lp-crosslink-card-label {
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
}

.lp-crosslink-card-ages {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ---- Responsive: Desktop ---- */
@media (min-width: 640px) {
    .lp-crosslink-card {
        min-width: 180px;
    }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    .lp-crosslink-card {
        transition: none;
    }
}

/* ============================================================
   Phase 179 — /press page styles
   Namespace: .lp-press-*
   Consumed by: src/BE/Presentation/MathsTutor.WebApi/Pages/Press.razor
   Inherits: fixed light mode (v12.1 INFRA-04); NO [data-theme="dark"] overrides.
   Design tokens: hsl(var(--token)) pattern — no hard-coded hex except
                  where journalists need copy-paste values (handled inline in Razor).
   Breakpoints: mobile 375px / tablet 768px / desktop 1024px (matches .lp-ks*-* system).
   ============================================================ */

/* ---- 1. Hero — purple→pink gradient, white copy ---- */
.lp-press-hero {
    background: linear-gradient(135deg, hsl(var(--student-primary)) 0%, hsl(var(--student-secondary)) 100%);
    color: #ffffff;
}

.lp-press-hero .lp-hero-headline,
.lp-press-hero h1 {
    color: #ffffff;
}

.lp-press-hero .lp-hero-subheadline,
.lp-press-hero .lp-hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
    max-width: 48rem;
}

.lp-press-hero .lp-hero-tagline {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    display: inline-block;
}

/* ---- 2. Section shell — narrower than generic .lp-section for readable prose ---- */
.lp-press-section {
    padding: 4rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.lp-press-section h2,
.lp-press-section .lp-section-title {
    margin-bottom: 0.5rem;
}

.lp-press-section .lp-section-subtitle,
.lp-press-section-subtitle {
    margin-bottom: 2.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* ---- 3. Factsheet — striped two-column table ---- */
.lp-press-factsheet {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.lp-press-factsheet th,
.lp-press-factsheet td {
    padding: 0.875rem 1rem;
    text-align: left;
    vertical-align: top;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.lp-press-factsheet th[scope="row"] {
    width: 35%;
    background: hsl(var(--muted));
    font-weight: 700;
    color: hsl(var(--foreground));
    border-bottom: 1px solid hsl(var(--border));
}

.lp-press-factsheet td {
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.lp-press-factsheet tr:last-child th,
.lp-press-factsheet tr:last-child td {
    border-bottom: none;
}

.lp-press-factsheet a {
    color: hsl(var(--primary));
    text-decoration: underline;
}

.lp-press-factsheet a:hover,
.lp-press-factsheet a:focus-visible {
    text-decoration-thickness: 2px;
}

/* ---- 4. Pitches — numbered list with primary-colour markers ---- */
.lp-press-pitches {
    list-style: decimal inside;
    padding-left: 0;
    margin: 0 0 1.5rem;
}

.lp-press-pitches li {
    padding: 0.75rem 0 0.75rem 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 1rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.lp-press-pitches li::marker {
    font-weight: 800;
    color: hsl(var(--primary));
}

.lp-press-pitches li:last-child {
    border-bottom: none;
}

/* ---- 5. Founder story — card containers ---- */
.lp-press-founder-story {
    margin-bottom: 1.5rem;
}

.lp-press-founder-short,
.lp-press-founder-long {
    padding: 1.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.lp-press-founder-short h3,
.lp-press-founder-long h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 1.0625rem;
    font-weight: 800;
    color: hsl(var(--primary));
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lp-press-founder-short p,
.lp-press-founder-long p {
    margin: 0 0 1rem;
    line-height: 1.7;
    font-size: 1rem;
    color: hsl(var(--foreground));
}

.lp-press-founder-long p:last-child,
.lp-press-founder-short p:last-child {
    margin-bottom: 0;
}

/* ---- 6. Stats grid — 3 columns desktop, responsive ---- */
.lp-press-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.lp-press-stat-tile {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lp-press-stat-headline {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 900;
    color: hsl(var(--primary));
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.lp-press-stat-caption {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    line-height: 1.4;
}

.lp-press-stat-helper {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

/* ---- 7. Boilerplate short/long — restrained cards ---- */
.lp-press-boilerplate {
    margin-bottom: 1.5rem;
}

.lp-press-boilerplate-short,
.lp-press-boilerplate-long {
    padding: 1.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.lp-press-boilerplate-short h3,
.lp-press-boilerplate-long h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: hsl(var(--muted-foreground));
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lp-press-boilerplate-short p,
.lp-press-boilerplate-long p {
    margin: 0 0 0.75rem;
    line-height: 1.7;
    font-size: 1rem;
    color: hsl(var(--foreground));
}

.lp-press-boilerplate-short p:last-child,
.lp-press-boilerplate-long p:last-child {
    margin-bottom: 0;
}

/* ---- 8. Press-kit list + usage blockquote ---- */
.lp-press-kit-section {
    margin-bottom: 1.5rem;
}

.lp-press-kit-usage {
    padding: 1rem 1.25rem;
    background: hsl(var(--muted));
    border-left: 4px solid hsl(var(--primary));
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
    margin-bottom: 1.5rem;
}

.lp-press-kit-usage a {
    color: hsl(var(--primary));
    text-decoration: underline;
    word-break: break-word;
}

.lp-press-kit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}

.lp-press-kit-list li {
    padding: 0.625rem 0 0.625rem 1.5rem;
    position: relative;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.9375rem;
    line-height: 1.5;
    color: hsl(var(--foreground));
}

.lp-press-kit-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.625rem;
    color: hsl(var(--student-success, 142 70% 50%));
    font-weight: 700;
}

.lp-press-kit-list li:last-child {
    border-bottom: none;
}

/* ---- 9. Brand colours table + swatch + typography block ---- */
.lp-press-colours {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.lp-press-colours th,
.lp-press-colours td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.9375rem;
    vertical-align: middle;
    color: hsl(var(--foreground));
}

.lp-press-colours thead th {
    background: hsl(var(--muted));
    font-weight: 700;
}

.lp-press-colours tr:last-child th,
.lp-press-colours tr:last-child td {
    border-bottom: none;
}

.lp-press-colours code,
.lp-press-colours td:nth-child(2),
.lp-press-colours td:nth-child(3) {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
}

.lp-press-colour-swatch {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    vertical-align: middle;
    margin-right: 0.625rem;
    box-shadow: 0 0 0 1px hsl(var(--border));
}

.lp-press-typography {
    padding: 1.25rem;
    background: hsl(var(--muted));
    border-radius: var(--radius);
}

.lp-press-typography p {
    margin: 0.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

/* ---- 10. Milestones timeline — vertical rule + dots ---- */
.lp-press-timeline {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    position: relative;
}

.lp-press-timeline::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: hsl(var(--border));
}

.lp-press-timeline-entry {
    position: relative;
    padding: 0.75rem 0 0.75rem 2rem;
    transition: background-color 0.2s ease;
}

.lp-press-timeline-entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--background));
}

.lp-press-timeline-entry time {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 0.875rem;
    color: hsl(var(--primary));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.75rem;
}

.lp-press-timeline-entry span {
    color: hsl(var(--foreground));
    line-height: 1.6;
}

/* ---- 11. Press contact block ---- */
.lp-press-contact {
    background: hsl(var(--muted));
    padding: 2rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.lp-press-contact p {
    margin: 0.5rem 0;
    line-height: 1.6;
    font-size: 1rem;
    color: hsl(var(--foreground));
}

.lp-press-contact a {
    color: hsl(var(--primary));
    text-decoration: underline;
    word-break: break-word;
}

.lp-press-contact a:hover,
.lp-press-contact a:focus-visible {
    text-decoration-thickness: 2px;
}

/* ---- 12. Featured-in empty state — dashed muted block ---- */
.lp-press-featured-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: hsl(var(--muted));
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    font-size: 1rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.lp-press-featured-empty em {
    font-style: italic;
}

/* ---- 13. Responsive breakpoints (tablet 1024, mobile 768, narrow 480) ---- */
@media (max-width: 1023px) {
    .lp-press-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .lp-press-section {
        padding: 3rem 1.25rem;
    }

    .lp-press-stats-grid {
        grid-template-columns: 1fr;
    }

    /* Stack factsheet into cards on narrow screens */
    .lp-press-factsheet,
    .lp-press-factsheet tbody,
    .lp-press-factsheet tr,
    .lp-press-factsheet th,
    .lp-press-factsheet td {
        display: block;
        width: 100%;
    }

    .lp-press-factsheet tr {
        border-bottom: 1px solid hsl(var(--border));
        padding: 0.75rem 0;
    }

    .lp-press-factsheet tr:last-child {
        border-bottom: none;
    }

    .lp-press-factsheet th[scope="row"] {
        width: auto;
        background: transparent;
        padding: 0 1rem 0.25rem;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: hsl(var(--muted-foreground));
        border-bottom: none;
    }

    .lp-press-factsheet td {
        padding: 0 1rem 0.5rem;
        border-bottom: none;
    }

    /* Colour table — horizontal scroll fallback */
    .lp-press-colours {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 479px) {
    .lp-press-hero .lp-hero-headline {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .lp-press-stat-headline {
        font-size: 1.75rem;
    }

    .lp-press-contact {
        padding: 1.25rem;
    }
}

/* ---- 14. Reduced motion — disable any transitions for the press namespace ---- */
@media (prefers-reduced-motion: reduce) {
    .lp-press-hero,
    .lp-press-stat-tile,
    .lp-press-timeline-entry {
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================================================
   Blog article — reuses lp-press-section layout for readable prose width.
   Scoped under .lp-blog-article so Press page typography is unaffected.
   ======================================================================== */
.lp-blog-hero {
    padding-bottom: 2.5rem;
}

.lp-blog-byline {
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
}

.lp-blog-byline a {
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-blog-byline a:hover {
    color: rgba(255, 255, 255, 0.85);
}

.lp-blog-disclosure strong {
    display: inline-block;
    margin-right: 0.25rem;
    color: hsl(var(--primary));
}

.lp-blog-article .lp-press-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

.lp-blog-article .lp-press-section > ul,
.lp-blog-article .lp-press-section > ol {
    margin: 0 0 1.25rem 1.25rem;
    line-height: 1.7;
    color: hsl(var(--foreground));
}

.lp-blog-article .lp-press-section > ul > li,
.lp-blog-article .lp-press-section > ol > li {
    margin-bottom: 0.5rem;
}

.lp-blog-article .lp-press-section a:not(.lp-btn) {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-blog-article .lp-press-section a:not(.lp-btn):hover {
    color: hsl(var(--primary) / 0.85);
}

.lp-blog-criteria {
    counter-reset: blog-criterion;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.lp-blog-criteria li {
    position: relative;
    padding: 0.625rem 0 0.625rem 2.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
    border-bottom: 1px solid hsl(var(--border));
    counter-increment: blog-criterion;
}

.lp-blog-criteria li::before {
    content: counter(blog-criterion);
    position: absolute;
    left: 0;
    top: 0.625rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lp-blog-criteria li:last-child {
    border-bottom: none;
}

/* App ranking card */
.lp-blog-app {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    background: hsl(var(--card));
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lp-blog-app:hover {
    box-shadow: var(--shadow-md);
}

.lp-blog-app-winner {
    border-color: hsl(var(--primary) / 0.5);
    background: linear-gradient(180deg, hsl(var(--primary) / 0.04) 0%, hsl(var(--card)) 60%);
}

.lp-blog-app-title {
    font-family: "Nunito", var(--font-heading, system-ui), sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    color: hsl(var(--foreground));
    margin: 0 0 1rem;
    line-height: 1.3;
}

.lp-blog-app-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.lp-blog-app-meta li {
    padding: 0;
    border: none;
}

.lp-blog-app-meta li::before {
    content: none;
}

.lp-blog-app-score {
    background: hsl(var(--muted));
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    margin: 1rem 0 !important;
    color: hsl(var(--foreground));
}

.lp-blog-app ul {
    margin: 0.5rem 0 1rem 1.25rem;
    line-height: 1.6;
}

.lp-blog-app ul li {
    margin-bottom: 0.375rem;
}

.lp-blog-app-try {
    margin-top: 1rem !important;
    padding-top: 0.75rem;
    border-top: 1px solid hsl(var(--border));
}

/* Comparison table — horizontal scroll on narrow screens */
.lp-blog-table-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.lp-blog-comparison-table {
    min-width: 720px;
}

.lp-blog-comparison-table thead th {
    background: hsl(var(--muted));
    font-weight: 700;
    text-align: left;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.lp-blog-comparison-table tbody th[scope="row"] {
    white-space: nowrap;
}

.lp-blog-comparison-table tbody td {
    font-size: 0.875rem;
}

/* Final CTA — highlighted block */
.lp-blog-final-cta {
    text-align: center;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.06) 0%, hsl(var(--student-primary) / 0.06) 100%);
    border: 1px solid hsl(var(--primary) / 0.15);
    border-radius: var(--radius-lg, 1rem);
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.lp-blog-final-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 1.5rem 0 0.75rem !important;
}

.lp-blog-footnote {
    margin-top: 1.5rem !important;
    font-size: 0.8125rem !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* Dark mode */
[data-theme="dark"] .lp-blog-app {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .lp-blog-app-winner {
    background: linear-gradient(180deg, hsl(var(--primary) / 0.08) 0%, hsl(var(--card)) 60%);
}

[data-theme="dark"] .lp-blog-final-cta {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1) 0%, hsl(var(--student-primary) / 0.1) 100%);
    border-color: hsl(var(--primary) / 0.25);
}

@media (max-width: 767px) {
    .lp-blog-app {
        padding: 1.25rem;
    }

    .lp-blog-app-title {
        font-size: 1.1875rem;
    }

    .lp-blog-final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-blog-app {
        transition: none !important;
    }
}

/* ========================================================================
   Blog index page
   ======================================================================== */
.lp-blog-index-list {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.lp-blog-index-card {
    display: block;
    padding: 1.5rem 1.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #ffffff;
    text-decoration: none !important;
    color: #1f2937;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.lp-blog-index-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    border-color: #3b82f6;
    transform: translateY(-1px);
}

.lp-blog-index-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.lp-blog-index-card-title {
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 800;
    color: #111827;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.lp-blog-index-card-excerpt {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

.lp-blog-index-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: hsl(var(--muted));
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
}

/* Blog cross-link (KS landing pages) */
.lp-blog-crosslink {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.25rem 2rem;
    text-align: center;
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.lp-blog-crosslink a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    .lp-blog-crosslink {
        padding: 1rem 1.25rem;
    }
}


/* ============================================================
   Phase 183 — /teachers page styles
   Namespace: .lp-teachers-*
   Consumed by: src/BE/Presentation/MathsTutor.WebApi/Pages/Teachers.razor
   Inherits: fixed light mode (v12.1 INFRA-04); NO [data-theme="dark"] overrides.
   Design tokens: hsl(var(--token)) pattern — no hard-coded hex.
   Breakpoints: mobile 375px / tablet 768px / desktop 1024px.
   ============================================================ */

/* ---- 1. Hero — teal→blue parent-palette gradient so it reads different from /press ---- */
.lp-teachers-hero {
    background: linear-gradient(135deg, hsl(var(--parent-primary)) 0%, hsl(var(--parent-accent)) 100%);
    color: #ffffff;
}

.lp-teachers-hero .lp-hero-headline,
.lp-teachers-hero h1 {
    color: #ffffff;
}

.lp-teachers-hero .lp-hero-subheadline,
.lp-teachers-hero .lp-hero-subtitle {
    color: rgba(255, 255, 255, 0.92);
    max-width: 48rem;
}

.lp-teachers-hero .lp-hero-tagline {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    display: inline-block;
}

/* ---- 2. Section shell — narrower than generic .lp-section for readable prose ---- */
.lp-teachers-section {
    padding: 4rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.lp-teachers-section h2,
.lp-teachers-section .lp-section-title {
    margin-bottom: 0.5rem;
}

.lp-teachers-section .lp-section-subtitle {
    margin-bottom: 2.5rem;
    color: hsl(var(--muted-foreground));
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* ---- 3. Download cards — 2 side-by-side on desktop, stacked on mobile ---- */
.lp-teachers-downloads {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.lp-teachers-download-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.lp-teachers-download-badge {
    display: inline-block;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    align-self: flex-start;
}

.lp-teachers-download-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: hsl(var(--foreground));
    margin: 0;
}

.lp-teachers-download-subtitle {
    color: hsl(var(--muted-foreground));
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
}

.lp-teachers-download-features {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.25rem 0 0.5rem 0;
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    line-height: 1.6;
}

.lp-teachers-download-features li {
    margin-bottom: 0.25rem;
}

.lp-teachers-download-features code {
    background: hsl(var(--muted));
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.lp-teachers-download-cta {
    margin: 0.5rem 0 0 0;
}

/* ---- 4. Curriculum alignment — 2-column cards ---- */
.lp-teachers-alignment {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.lp-teachers-alignment-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem 1.5rem;
    color: hsl(var(--foreground));
    line-height: 1.6;
}

.lp-teachers-alignment-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: hsl(var(--foreground));
}

.lp-teachers-alignment-card p {
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
}

.lp-teachers-alignment-card p:last-child {
    margin-bottom: 0;
}

/* ---- 5. Trust signals — 4-up tile grid ---- */
.lp-teachers-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.lp-teachers-trust-tile {
    background: hsl(var(--muted));
    border-radius: var(--radius);
    padding: 1.25rem 1rem;
    text-align: center;
    color: hsl(var(--foreground));
}

.lp-teachers-trust-headline {
    font-weight: 800;
    font-size: 1.0625rem;
    color: hsl(var(--parent-primary));
    margin-bottom: 0.25rem;
}

.lp-teachers-trust-tile p {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    margin: 0;
    line-height: 1.5;
}

/* ---- 6. Safeguarding + DfE disclaimer ---- */
.lp-teachers-safeguarding p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
    margin-bottom: 1rem;
}

.lp-teachers-safeguarding a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lp-teachers-safeguarding code {
    background: hsl(var(--muted));
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.lp-teachers-disclaimer {
    background: hsl(var(--muted));
    border-left: 4px solid hsl(var(--warning));
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
    color: hsl(var(--foreground));
    margin-top: 1.25rem !important;
    margin-bottom: 0 !important;
}

/* ---- 7. FAQ — native <details>/<summary> accordion ---- */
.lp-teachers-faq {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.lp-teachers-faq-item {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
}

.lp-teachers-faq-item > summary {
    cursor: pointer;
    font-weight: 700;
    padding: 1rem 1.25rem;
    color: hsl(var(--foreground));
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
    font-size: 1rem;
}

.lp-teachers-faq-item > summary::-webkit-details-marker {
    display: none;
}

.lp-teachers-faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
    font-size: 1.375rem;
    line-height: 1;
    color: hsl(var(--muted-foreground));
    transition: transform 0.2s ease;
}

.lp-teachers-faq-item[open] > summary::after {
    content: "−";
}

.lp-teachers-faq-item > p {
    padding: 0 1.25rem 1.125rem 1.25rem;
    margin: 0;
    color: hsl(var(--foreground));
    font-size: 0.9375rem;
    line-height: 1.6;
}

.lp-teachers-faq-item code,
.lp-teachers-faq-item strong {
    color: hsl(var(--foreground));
}

.lp-teachers-faq-item code {
    background: hsl(var(--muted));
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---- 8. Contact ---- */
.lp-teachers-contact p {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.lp-teachers-contact a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================================
   Responsive — /teachers
   ============================================================ */
@media (max-width: 1023px) {
    .lp-teachers-trust {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .lp-teachers-section {
        padding: 2.5rem 1.25rem;
    }
    .lp-teachers-downloads,
    .lp-teachers-alignment {
        grid-template-columns: 1fr;
    }
    .lp-teachers-hero .lp-hero-headline {
        font-size: 2rem;
    }
    .lp-teachers-download-card {
        padding: 1.25rem 1.125rem;
    }
}

@media (max-width: 479px) {
    .lp-teachers-trust {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Phase 196 — UI gate (Bug 1) + parent Go Premium badge (D-03)
   ============================================================ */

.upgrade-empty-state,
.sub-empty-state-no-children {
    max-width: 560px;
    margin: 3rem auto;
    padding: 3rem 2rem;
    background: hsl(var(--card));
    border: 2px dashed hsl(var(--border));
    border-radius: 1rem;
    text-align: center;
}

.upgrade-empty-icon,
.sub-empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, hsl(var(--primary) / 0.15) 0%, hsl(var(--student-secondary) / 0.15) 100%);
    color: hsl(var(--primary));
    border-radius: 9999px;
}

[data-theme="dark"] .upgrade-empty-icon,
[data-theme="dark"] .sub-empty-state-icon {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.25) 0%, hsl(var(--student-secondary) / 0.25) 100%);
}

.upgrade-empty-title,
.sub-empty-state-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: hsl(var(--foreground));
    margin: 0 0 0.75rem;
}

.upgrade-empty-text,
.sub-empty-state-text {
    color: hsl(var(--muted-foreground));
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}

.upgrade-empty-cta,
.sub-empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, hsl(var(--student-primary)) 0%, hsl(var(--student-secondary)) 100%);
    color: white;
    border-radius: 9999px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 16px hsl(var(--student-primary) / 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upgrade-empty-cta:hover,
.sub-empty-state-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px hsl(var(--student-primary) / 0.4);
    color: white;
}

.upgrade-empty-hint {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.upgrade-empty-hint a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Parent Go Premium badge — visual mirror of student .go-premium-badge.
   W6 explicit contrast verification:
   - Light mode --parent-primary = HSL(220 90% 40%) ≈ RGB(10,70,198), relative luminance ≈ 0.0721.
     White-on-primary contrast = (1.0 + 0.05) / (0.0721 + 0.05) ≈ 8.6:1 — passes WCAG 2.1 AA (4.5:1)
     and AAA (7:1) for normal text.
   - Dark mode --parent-primary = HSL(220 90% 60%) ≈ RGB(51,122,240), relative luminance ≈ 0.196.
     White-on-primary contrast ≈ 4.27:1 — only passes AA-large (≥3:1). Because we keep the
     badge text at font-weight 700 and 1rem (which qualifies as bold-large per WCAG 1.4.3),
     this is AA-compliant in dark mode too. Belt-and-braces: dark-mode override below clamps
     the lightness back to 45% so contrast climbs to ≈ 7:1.
   - --parent-accent (teal, 195 100% 45%) is intentionally NOT used as the background — white-on-teal
     sits below 4.5:1, so accent is reserved for the icon only. */
.parent-go-premium-badge {
    background: hsl(var(--parent-primary));
    color: white !important;
    font-weight: 700;
    box-shadow: 0 4px 12px hsl(var(--parent-primary) / 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.parent-go-premium-badge:hover,
.parent-go-premium-badge:focus {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px hsl(var(--parent-primary) / 0.45);
    color: white !important;
}

.parent-go-premium-badge i {
    color: hsl(var(--student-accent));
}

/* W6 dark-mode hardening — keep the AA-normal-text contrast safe even for non-bold
   user-agent overrides by deepening the badge background instead of trusting the lighter
   dark-mode token. */
[data-theme="dark"] .parent-go-premium-badge {
    background: hsl(220 90% 45%);
    box-shadow: 0 4px 12px hsl(220 90% 45% / 0.4);
}

[data-theme="dark"] .parent-go-premium-badge:hover,
[data-theme="dark"] .parent-go-premium-badge:focus {
    box-shadow: 0 6px 18px hsl(220 90% 45% / 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .upgrade-empty-cta,
    .sub-empty-state-cta,
    .parent-go-premium-badge {
        transition: none;
    }
    .upgrade-empty-cta:hover,
    .sub-empty-state-cta:hover,
    .parent-go-premium-badge:hover {
        transform: none;
    }
}

/* ============================================================
   Phase 196-06 — Proration confirmation dialog (D-13)
   Used by ProrationConfirmDialog.razor on link/unlink flows
   ============================================================ */

.proration-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    animation: proration-dialog-fade-in 0.15s ease-out;
}

.proration-dialog {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border-radius: 1rem;
    padding: 2rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
    animation: proration-dialog-scale-in 0.2s ease-out;
}

.proration-dialog-title {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: hsl(var(--foreground));
}

.proration-dialog-body {
    margin: 0 0 1.5rem;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.proration-dialog-body p {
    margin: 0 0 0.75rem;
}

.proration-dialog-body p:last-child {
    margin-bottom: 0;
}

.proration-dialog-figure {
    background: hsl(var(--muted));
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
}

.proration-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@keyframes proration-dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes proration-dialog-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .proration-dialog-backdrop,
    .proration-dialog {
        animation: none;
    }
}

/* ============================================================================
   iTutor panel (Phase 201 plan 02 — page-scoped .itutor- prefix)
   D-05: desktop ≥768px persistent peek→expand side dock beside QuestionDisplay
   (never reflows/obscures it); mobile <768px right-edge "stuck?" tab → panel
   that slides in from the right (kept clear of MathLive's maths keyboard).
   Uses the established design tokens; dark mode via [data-theme="dark"];
   prefers-reduced-motion disables the slide animations; 44px min touch targets.
   ============================================================================ */

/* --- Shared inner panel --- */
.itutor-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem);
}

.itutor-panel-header {
    margin-bottom: var(--space-1, 0.25rem);
}

.itutor-panel-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-lg, 1.125rem);
    color: hsl(var(--student-primary, 280 100% 60%));
}

.itutor-panel-subtitle {
    margin: var(--space-1, 0.25rem) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: hsl(var(--muted-foreground, 215 16% 47%));
}

.itutor-panel-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

/* Spam-protection is in the Button component (IsLoading) + the panel's
   re-entrancy guard; this only guarantees the 44px touch-target rule. */
.itutor-action-btn {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
}

.itutor-panel-stream,
.itutor-panel-message {
    background: hsl(var(--muted, 210 40% 96%));
    border-radius: var(--radius, 0.75rem);
    padding: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    color: hsl(var(--foreground, 222 47% 11%));
    white-space: pre-wrap;
}

.itutor-panel-message--blocked {
    background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.12);
    border-left: 4px solid hsl(var(--destructive, 0 84.2% 60.2%));
}

.itutor-panel-steps {
    margin: 0;
    padding-left: var(--space-5, 1.25rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    color: hsl(var(--foreground, 222 47% 11%));
}

.itutor-panel-steps--revealed {
    margin-top: var(--space-2, 0.5rem);
    font-weight: 600;
}

.itutor-panel-gate {
    background: hsl(var(--student-accent, 45 100% 60%) / 0.12);
    border-radius: var(--radius, 0.75rem);
    padding: var(--space-3, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.itutor-panel-gate-prompt {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: hsl(var(--foreground, 222 47% 11%));
}

.itutor-panel-degraded {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-style: italic;
    color: hsl(var(--muted-foreground, 215 16% 47%));
}

/* --- Desktop ≥768px side dock --- */
.itutor-dock {
    position: sticky;
    top: var(--space-4, 1rem);
    /* Desktop-only (hidden <768px; mobile uses .itutor-sheet): gap so the
       "Ask iTutor" toggle doesn't butt against the element below it in col-lg-4. */
    margin-bottom: var(--space-4, 1rem);
    width: 100%;
    max-width: 360px;
    border-radius: var(--radius-lg, 1rem);
    background: hsl(var(--card, 0 0% 100%));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    overflow: hidden;
}

.itutor-dock-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border: none;
    cursor: pointer;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    color: #fff;
    background: var(--gradient-student, linear-gradient(135deg, #a855f7 0%, #ec4899 100%));
}

.itutor-dock-body {
    max-height: 70vh;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

.itutor-dock--peek .itutor-dock-body {
    max-height: 0;
}

/* --- Mobile <768px right-edge "stuck?" tab → slide-in panel from the right ---
   Replaced the docked bottom bar (2026-09-29): MathLive's on-screen maths keyboard
   (body > .ML__keyboard, z-index 105) opens along the bottom, so a bottom bar either
   covered the keyboard's bottom row or had to hide — leaving iTutor unreachable while
   a student is typing, i.e. exactly when they get stuck. The tab instead sits on the
   right edge, lifted above the keyboard via --mt-vk-height (keyboard height, set on
   <html> by _Layout.cshtml from mathVirtualKeyboard `geometrychange`). */
.itutor-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1049;
}

/* The panel is parked just off the right edge; the tab hangs off its left side
   (right: 100%) so it stays on-screen and slides in WITH the panel as its handle.
   Width always leaves 52px so the tab is never clipped on narrow phones. */
.itutor-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(calc(100vw - 52px), 380px);
    z-index: 1050;
    background: hsl(var(--card, 0 0% 100%));
    transform: translateX(100%);
    transition: transform 0.3s ease;
}

/* Shadow only when open — while parked, a shadow would bleed a grey strip down the
   right edge of the page. */
.itutor-sheet--open {
    transform: translateX(0);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
}

/* 30vh up from the bottom when the keyboard is closed; just above the keyboard
   (its height + 16px) when it is open, whichever is higher. */
.itutor-sheet-tab {
    position: absolute;
    right: 100%;
    bottom: max(calc(var(--mt-vk-height, 0px) + 16px), 30vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    width: 44px;
    padding: var(--space-3, 0.75rem) 0;
    border: none;
    border-radius: var(--radius-lg, 1rem) 0 0 var(--radius-lg, 1rem);
    cursor: pointer;
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    background: var(--gradient-student, linear-gradient(135deg, #a855f7 0%, #ec4899 100%));
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
    transition: bottom 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.itutor-sheet-tab:focus-visible {
    outline: 3px solid hsl(var(--primary, 220 90% 56%));
    outline-offset: 2px;
}

.itutor-sheet-tab-label {
    writing-mode: vertical-rl;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Full height with its own scroll — the page behind stays put. */
.itutor-sheet-body {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --- Responsive split: dock is desktop-only, sheet is mobile-only --- */
@media (max-width: 767.98px) {
    .itutor-dock {
        display: none;
    }
}

@media (min-width: 768px) {
    .itutor-sheet,
    .itutor-sheet-overlay {
        display: none;
    }
}

/* --- Dark mode (selector form is [data-theme="dark"], NOT .dark) --- */
[data-theme="dark"] .itutor-dock,
[data-theme="dark"] .itutor-sheet {
    background: hsl(222 47% 14%);
}

[data-theme="dark"] .itutor-panel-stream,
[data-theme="dark"] .itutor-panel-message {
    background: hsl(217 33% 22%);
    color: hsl(210 40% 96%);
}

[data-theme="dark"] .itutor-panel-steps,
[data-theme="dark"] .itutor-panel-gate-prompt {
    color: hsl(210 40% 96%);
}

[data-theme="dark"] .itutor-panel-subtitle,
[data-theme="dark"] .itutor-panel-degraded {
    color: hsl(215 20% 65%);
}

/* --- Reduced motion: disable the slide animations (panel still opens) --- */
@media (prefers-reduced-motion: reduce) {
    .itutor-dock-body,
    .itutor-sheet,
    .itutor-sheet-tab {
        transition: none;
    }
}

/* =========================================================================
   iTutor parent transcript (Phase 201 plan 03 — same .itutor- page prefix)
   PARENT-01 criteria 3+4. Flagged-row maps to the --destructive/--warning
   design tokens; the glanceable highlight is icon + text + token, NEVER
   colour-only (WCAG 2.1 AA). [data-theme="dark"] + reduced-motion below.
   ========================================================================= */
.itutor-transcript {
    padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
    max-width: 880px;
}

.itutor-transcript-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    color: hsl(var(--foreground, 222 47% 11%));
    margin-bottom: var(--space-1, 0.25rem);
}

.itutor-transcript-intro {
    color: hsl(var(--muted-foreground, 215 16% 47%));
    margin-bottom: var(--space-5, 1.25rem);
}

.itutor-transcript-empty {
    text-align: center;
    padding: var(--space-8, 2rem);
    border: 1px dashed hsl(var(--border, 214 32% 91%));
    border-radius: var(--radius, 0.75rem);
}

.itutor-transcript-empty-title {
    font-weight: 700;
    color: hsl(var(--foreground, 222 47% 11%));
    margin-bottom: var(--space-1, 0.25rem);
}

.itutor-transcript-empty-text {
    color: hsl(var(--muted-foreground, 215 16% 47%));
    margin: 0;
}

.itutor-transcript-row {
    background: hsl(var(--card, 0 0% 100%));
    border: 1px solid hsl(var(--border, 214 32% 91%));
    border-radius: var(--radius-lg, 1rem);
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* D-02 glanceable highlight — destructive token border + tint, NOT colour-only:
   it is always paired with the .itutor-transcript-flag icon + text label below. */
.itutor-transcript-row--flagged {
    border-left: 5px solid hsl(var(--destructive, 0 84.2% 60.2%));
    background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.06);
}

.itutor-transcript-flag {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-weight: 700;
    color: hsl(var(--destructive, 0 84.2% 60.2%));
    margin-bottom: var(--space-2, 0.5rem);
}

.itutor-transcript-flag-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.itutor-transcript-guidance {
    background: hsl(var(--warning, 45 100% 60%) / 0.14);
    border-radius: var(--radius, 0.75rem);
    padding: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    color: hsl(var(--foreground, 222 47% 11%));
}

.itutor-transcript-row-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
}

.itutor-transcript-context {
    font-weight: 600;
    color: hsl(var(--foreground, 222 47% 11%));
}

.itutor-transcript-when {
    color: hsl(var(--muted-foreground, 215 16% 47%));
}

.itutor-transcript-outcome {
    margin: var(--space-2, 0.5rem) 0;
    font-size: var(--text-sm, 0.875rem);
    color: hsl(var(--foreground, 222 47% 11%));
}

.itutor-transcript-no-hints {
    font-size: var(--text-sm, 0.875rem);
    font-style: italic;
    color: hsl(var(--muted-foreground, 215 16% 47%));
    margin: 0;
}

.itutor-transcript-hints {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}

.itutor-transcript-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
    font-size: var(--text-sm, 0.875rem);
}

.itutor-transcript-hint-flavour {
    font-weight: 700;
    color: hsl(var(--primary, 220 90% 56%));
}

.itutor-transcript-hint-accepted {
    color: hsl(var(--muted-foreground, 215 16% 47%));
}

.itutor-transcript-reveal {
    flex-basis: 100%;
    margin-top: var(--space-1, 0.25rem);
}

.itutor-transcript-reveal-label {
    font-weight: 600;
    margin: 0 0 var(--space-1, 0.25rem);
    color: hsl(var(--foreground, 222 47% 11%));
}

.itutor-transcript-flagged-text {
    margin: 0;
    padding: var(--space-3, 0.75rem);
    border-left: 4px solid hsl(var(--destructive, 0 84.2% 60.2%));
    background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.08);
    border-radius: var(--radius-sm, 0.375rem);
    font-style: italic;
    color: hsl(var(--foreground, 222 47% 11%));
}

/* --- Dark mode --- */
[data-theme="dark"] .itutor-transcript-row {
    background: hsl(222 47% 14%);
    border-color: hsl(217 33% 25%);
}

[data-theme="dark"] .itutor-transcript-heading,
[data-theme="dark"] .itutor-transcript-context,
[data-theme="dark"] .itutor-transcript-outcome,
[data-theme="dark"] .itutor-transcript-empty-title,
[data-theme="dark"] .itutor-transcript-reveal-label,
[data-theme="dark"] .itutor-transcript-guidance,
[data-theme="dark"] .itutor-transcript-flagged-text {
    color: hsl(210 40% 96%);
}

[data-theme="dark"] .itutor-transcript-intro,
[data-theme="dark"] .itutor-transcript-when,
[data-theme="dark"] .itutor-transcript-hint-accepted,
[data-theme="dark"] .itutor-transcript-no-hints,
[data-theme="dark"] .itutor-transcript-empty-text {
    color: hsl(215 20% 65%);
}

[data-theme="dark"] .itutor-transcript-row--flagged {
    background: hsl(var(--destructive, 0 84.2% 60.2%) / 0.16);
}

/* KSX-11: auto-hide iTutor panel on green-state.
   display: none !important because .itutor-dock already sets display responsively
   via media queries; the !important overrides regardless of viewport.
   Instant hide — no transition — prefers-reduced-motion trivially satisfied. */
.itutor-hidden {
    display: none !important;
}

/* ===== Phase 210 (ATTR-04): Referral code field affordances =====
   Subtle "(optional)" annotation on the Referral code label in Register.razor.
   Inherits the existing .auth-label font sizing context; only sets visual de-emphasis
   so the optional nature is clear without competing with the primary label. WCAG 2.1 AA
   colour-contrast: hsl(var(--muted-foreground)) on the auth card background remains
   ≥ 4.5:1 in both light and dark themes (verified via design-token palette). */
.auth-optional-hint {
    color: hsl(var(--muted-foreground));
    font-weight: 400;
    font-size: var(--text-xs);
    margin-left: var(--space-1);
}

/* Phase 210 (ATTR-05) — UpgradePage referral code section.
   Mirrors .upgrade-promo-code spacing (max-width 700px, page-centred) so the new
   "Got a referral code from a friend?" section reads as a sibling of the promo-code
   block above it. Page-scoped CSS (the inline <style> in UpgradePage.razor owns the
   promo styles); we drop the referral overrides here in custom.css so app.css stays
   byte-unchanged per the hand-curated rule. */
.upgrade-referral-code {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 1rem;
}

.upgrade-referral-code .upgrade-promo-input {
    text-transform: uppercase;
}

/* ============================================
   REFER A FRIEND CARD STYLES (.refer- prefix)
   Phase 212-04 — Parent Dashboard share card
   Cache bust: v2026-06-04-refer-card
   ============================================ */

/* Card container — gradient-parent (blue→teal) for parent trust tone (D-03) */
.refer-card {
    background: var(--gradient-parent, linear-gradient(135deg, hsl(220 90% 40%), hsl(195 100% 45%)));
    border: none;
    border-radius: var(--radius, 0.75rem);
    color: #fff;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
    animation: refer-gentle-glow 4s ease-in-out infinite;
}

/* Heading — Nunito font per design system */
.refer-heading {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: var(--text-lg, 1.125rem);
    color: #fff;
    letter-spacing: -0.01em;
}

/* Reward summary copy */
.refer-summary {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* Link input field */
.refer-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: var(--space-1, 0.25rem);
}

.refer-link-input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm, 0.375rem);
    color: #fff;
    font-size: var(--text-sm, 0.875rem);
    min-height: 44px; /* WCAG 2.1 AA touch target */
    cursor: text;
}

.refer-link-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    outline: none;
}

/* Typeable code inline display */
.refer-code {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.85);
}

.refer-code-value {
    color: hsl(var(--student-accent, 45 100% 60%));
    font-family: 'Courier New', monospace;
    font-size: var(--text-base, 1rem);
    letter-spacing: 0.1em;
}

/* Live counter badge — gold (student-accent) for achievement tone */
.refer-counter-badge {
    display: inline-block;
    background: hsl(var(--student-accent, 45 100% 60%) / 0.2);
    color: hsl(var(--student-accent, 45 100% 60%));
    border: 1px solid hsl(var(--student-accent, 45 100% 60%) / 0.4);
    border-radius: var(--radius-full, 9999px);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

/* Encouraging empty state — stays readable on the gradient background */
.refer-empty-state {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

/* Share-button row (WhatsApp / Email / X) */
.refer-share-actions {
    display: flex;
    gap: var(--space-2, 0.5rem);
    flex-wrap: wrap;
}

/* Share buttons — anchors styled as outline buttons, min 44px touch target */
.refer-share-btn {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.refer-share-btn:hover,
.refer-share-btn:focus-visible {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    text-decoration: none;
}

.refer-share-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

/* Dark mode overrides */
[data-theme="dark"] .refer-card {
    background: linear-gradient(135deg, hsl(220 60% 25%), hsl(195 60% 25%));
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.3));
}

[data-theme="dark"] .refer-link-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Gentle glow animation — only for users who are comfortable with motion */
@keyframes refer-gentle-glow {
    0%, 100% { box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)); }
    50% { box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)), 0 0 12px rgba(59, 130, 246, 0.2); }
}

/* Suppress all refer-card animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .refer-card,
    .refer-counter-badge,
    .refer-share-btn,
    .refer-ambassador-badge {
        animation: none;
        transition: none;
    }
}

/* ============================================
   Phase 213 — Tiered Reward Ladder — Ambassador badge
   Cache bust: v2026-06-04-ambassador-badge
   ============================================ */

/* Base badge — pill shape, inline-flex row, min 44px touch target (WCAG 2.1 AA) */
.refer-ambassador-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    border-radius: var(--radius-full, 9999px);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    min-height: 44px;
    letter-spacing: 0.01em;
    border: 2px solid transparent;
}

/* Bronze — warm copper tone */
.refer-ambassador-badge--bronze {
    background: hsl(30 70% 55% / 0.2);
    color: hsl(30 70% 35%);
    border-color: hsl(30 70% 55% / 0.4);
}

/* Silver — neutral silver tone */
.refer-ambassador-badge--silver {
    background: hsl(220 10% 70% / 0.2);
    color: hsl(220 10% 40%);
    border-color: hsl(220 10% 70% / 0.4);
}

/* Gold — uses --student-accent design token (matches .refer-code-value and .refer-counter-badge) */
/* hsla() fallbacks before the CSS Level 4 hsl(var() / alpha) form for Safari < 15.4 / Chrome < 111 */
.refer-ambassador-badge--gold {
    background: hsla(45, 100%, 60%, 0.2);
    background: hsl(var(--student-accent, 45 100% 60%) / 0.2);
    color: hsl(45, 100%, 60%);
    color: hsl(var(--student-accent, 45 100% 60%));
    border-color: hsla(45, 100%, 60%, 0.5);
    border-color: hsl(var(--student-accent, 45 100% 60%) / 0.5);
}

/* Next-tier nudge — small encouraging text beneath the badge */
.refer-tier-nudge {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    margin: 0;
}

/* Dark mode overrides — ensure WCAG AA contrast on the dark gradient card */
[data-theme="dark"] .refer-ambassador-badge--bronze {
    background: hsl(30 70% 30% / 0.35);
    color: hsl(30 70% 75%);
    border-color: hsl(30 70% 55% / 0.5);
}

[data-theme="dark"] .refer-ambassador-badge--silver {
    background: hsl(220 10% 40% / 0.35);
    color: hsl(220 10% 85%);
    border-color: hsl(220 10% 70% / 0.5);
}

/* hsla() fallbacks before the CSS Level 4 form for Safari < 15.4 / Chrome < 111 */
[data-theme="dark"] .refer-ambassador-badge--gold {
    background: hsla(45, 100%, 60%, 0.25);
    background: hsl(var(--student-accent, 45 100% 60%) / 0.25);
    color: hsl(45, 100%, 60%);
    color: hsl(var(--student-accent, 45 100% 60%));
    border-color: hsla(45, 100%, 60%, 0.6);
    border-color: hsl(var(--student-accent, 45 100% 60%) / 0.6);
}

/* ============================================================
   REFERRAL LEADERBOARD (.leaderboard- prefix) — Phase 214
   Cache bust: v2026-06-04-referral-leaderboard
   ============================================================ */

/* Widget container */
.leaderboard-widget {
    border-radius: var(--radius, 0.75rem);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
    overflow: hidden;
    background: hsl(var(--card, 0 0% 100%));
    padding: var(--space-4, 1rem);
}

/* Rotating monthly title */
.leaderboard-title {
    font-family: Nunito, system-ui, -apple-system, sans-serif;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 800;
    color: hsl(var(--foreground, 222.2 84% 4.9%));
    margin-bottom: var(--space-3, 0.75rem);
}

/* Ordered list reset */
.leaderboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Row — 44px min height (WCAG 2.1 AA touch target) */
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    min-height: 44px;
    border-bottom: 1px solid hsl(var(--border, 214.3 31.8% 91.4%));
    font-size: var(--text-sm, 0.875rem);
    color: hsl(var(--foreground, 222.2 84% 4.9%));
    transition: background 0.15s ease;
}

.leaderboard-row:last-child {
    border-bottom: none;
}

/* Rank number — monospace column */
.leaderboard-rank-num {
    font-weight: 700;
    min-width: 1.5rem;
    text-align: center;
    color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
    font-size: var(--text-xs, 0.75rem);
}

/* Medal icon column — fixed width so names align */
.leaderboard-medal-icon {
    min-width: 1.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

.leaderboard-medal-icon--placeholder {
    display: inline-block;
}

/* Name — grows to fill available space */
.leaderboard-name {
    flex: 1;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Count — right-aligned */
.leaderboard-count {
    font-size: var(--text-xs, 0.75rem);
    color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
    white-space: nowrap;
}

/* Top-3 medal accent rows — colour + weight (colour is NOT the only indicator — rank num + emoji also present) */
.leaderboard-medal--gold .leaderboard-name {
    color: hsl(var(--student-accent, 45 100% 60%));
    font-weight: 800;
}

.leaderboard-medal--gold .leaderboard-rank-num {
    color: hsl(var(--student-accent, 45 100% 60%));
}

.leaderboard-medal--silver .leaderboard-name {
    color: hsl(var(--parent-accent, 195 100% 45%));
    font-weight: 700;
}

.leaderboard-medal--silver .leaderboard-rank-num {
    color: hsl(var(--parent-accent, 195 100% 45%));
}

.leaderboard-medal--bronze .leaderboard-name {
    color: hsl(25 90% 50%);
    font-weight: 700;
}

.leaderboard-medal--bronze .leaderboard-rank-num {
    color: hsl(25 90% 50%);
}

/* Current parent's own row (LEADER-02 inside-top-10 highlight) */
.leaderboard-row--highlight {
    background: hsl(var(--primary, 220 90% 56%) / 0.08);
    border-left: 3px solid hsl(var(--primary, 220 90% 56%));
}

/* Outside-top-10 rank line — encouraging, uses parent accent colours */
.leaderboard-rank-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    min-height: 44px;
    border-radius: var(--radius-sm, 0.5rem);
    background: linear-gradient(135deg, hsl(var(--parent-primary, 220 90% 40%) / 0.1), hsl(var(--parent-accent, 195 100% 45%) / 0.1));
    border: 1px solid hsl(var(--parent-accent, 195 100% 45%) / 0.3);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: hsl(var(--parent-primary, 220 90% 40%));
    text-align: center;
}

/* Empty state — centred, muted, encouraging */
.leaderboard-empty {
    padding: var(--space-8, 2rem) var(--space-4, 1rem);
    text-align: center;
    color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%));
    font-size: var(--text-sm, 0.875rem);
    font-style: italic;
}

/* Landing-page section wrapper — follows .lp-section conventions */
.lp-leaderboard-section {
    background: hsl(var(--muted, 210 40% 96.1%) / 0.5);
}

/* ---- Dark mode overrides ---- */

[data-theme="dark"] .leaderboard-widget {
    background: hsl(var(--card, 222.2 84% 4.9%));
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.3));
}

[data-theme="dark"] .leaderboard-title {
    color: hsl(var(--foreground, 210 40% 98%));
}

[data-theme="dark"] .leaderboard-row {
    border-bottom-color: hsl(var(--border, 217.2 32.6% 17.5%));
    color: hsl(var(--foreground, 210 40% 98%));
}

[data-theme="dark"] .leaderboard-rank-num,
[data-theme="dark"] .leaderboard-count {
    color: hsl(var(--muted-foreground, 215 20.2% 65.1%));
}

[data-theme="dark"] .leaderboard-medal--gold .leaderboard-name,
[data-theme="dark"] .leaderboard-medal--gold .leaderboard-rank-num {
    color: hsl(var(--student-accent, 45 100% 60%));
}

[data-theme="dark"] .leaderboard-medal--silver .leaderboard-name,
[data-theme="dark"] .leaderboard-medal--silver .leaderboard-rank-num {
    color: hsl(195 80% 65%);
}

[data-theme="dark"] .leaderboard-medal--bronze .leaderboard-name,
[data-theme="dark"] .leaderboard-medal--bronze .leaderboard-rank-num {
    color: hsl(25 90% 65%);
}

[data-theme="dark"] .leaderboard-row--highlight {
    background: hsl(var(--primary, 220 90% 56%) / 0.15);
    border-left-color: hsl(var(--primary, 220 90% 56%));
}

[data-theme="dark"] .leaderboard-rank-line {
    background: linear-gradient(135deg, hsl(220 90% 40% / 0.2), hsl(195 100% 45% / 0.2));
    border-color: hsl(195 100% 45% / 0.4);
    color: hsl(195 80% 70%);
}

[data-theme="dark"] .leaderboard-empty {
    color: hsl(var(--muted-foreground, 215 20.2% 65.1%));
}

[data-theme="dark"] .lp-leaderboard-section {
    background: hsl(var(--muted, 217.2 32.6% 17.5%) / 0.3);
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    .leaderboard-widget * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Affiliate Self-Service Dashboard (v19.0, Phase 240 — AFF-01..05)
   Professional / parent-console tone: --parent-primary / --parent-accent,
   NEVER the student purple/pink gradient. See 240-UI-SPEC.md.
   Cache bust: v2026-07-06-affiliate-dashboard
   ============================================================ */

.affiliate-page-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-3xl, 1.875rem);
}

.affiliate-live-note {
    display: flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

.affiliate-code-chip {
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, monospace;
    letter-spacing: 0.05em;
    font-weight: 700;
    /* The Badge "outline" variant relies on the Tailwind `text-gray-700` utility, which does
       not exist in the hand-curated CSS, so the code inherited a near-invisible light colour.
       Pin an explicit, theme-adaptive foreground plus a faint accent tint so the code reads
       clearly on both light and dark cards. */
    color: hsl(var(--foreground)) !important;
    background: hsl(var(--parent-accent) / 0.1);
    border-color: hsl(var(--parent-accent)) !important;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

.affiliate-copy-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.affiliate-empty-icon {
    color: hsl(var(--parent-accent));
    font-size: var(--text-xl, 1.25rem);
    margin-right: var(--space-2, 0.5rem);
}

.affiliate-earnings-figure {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-4xl, 2.25rem);
    color: hsl(var(--parent-primary));
    line-height: 1.2;
}

.affiliate-bonus-text {
    font-weight: 600;
}

.affiliate-progress {
    background-color: hsl(var(--muted, 220 15% 95%));
}

/* Progress.razor's inner fill div always carries "bg-gradient-student" regardless of the
   outer CssClass — override it here so the fill reads --parent-accent (teal), never the
   student gamified gradient (D-06/D-07). */
.affiliate-progress .bg-gradient-student {
    background: hsl(var(--parent-accent)) !important;
}

.affiliate-stat-tile {
    text-align: center;
}

.affiliate-stat-icon {
    font-size: var(--text-2xl, 1.5rem);
    display: block;
    margin-bottom: var(--space-2, 0.5rem);
}

.affiliate-stat-number {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-3xl, 1.875rem);
}

.affiliate-stat-label {
    font-size: var(--text-sm, 0.875rem);
}

/* ---- Dark mode overrides ---- */

[data-theme="dark"] .affiliate-progress {
    background-color: hsl(var(--muted, 217.2 32.6% 17.5%));
}

/* ============================================
   FORCED-UPDATE GATE (Phase 241)
   Non-dismissible "Update Required" overlay shared by the Android + iOS MAUI apps
   (Shared.UI/Components/Mobile/ForcedUpdateGate.razor). This IDENTICAL block is ported to all
   three custom.css copies (web WebApi wwwroot + Android + iOS) so the shared component never
   falls back to unstyled WebView. The web copy is unused-on-web but ported for parity.
   z-index: 2000 sits ABOVE every existing overlay in the mobile stack — .offline-banner (999),
   .mobile-app-bar (1000), .toast-container-fixed (1080), .pgo-confirm-overlay (1100). Any FUTURE
   overlay MUST stay BELOW 2000 so the forced gate always wins (RESEARCH Finding 6 / Pitfall 4).
   ============================================ */

.fug-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 2000; /* MUST stay above 1100 confirm-dialog / 1080 toast layers — see block comment */
    animation: fug-fade-in 0.2s ease-out;
}

.fug-dialog {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 24px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: fug-pop 0.25s ease-out;
}

.fug-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 12px;
}

.fug-text {
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 22px;
    font-size: 0.95rem;
}

.fug-btn {
    width: 100%;
    min-height: 48px;
}

/* Inline fallback note shown INSTEAD of the Update button when there is no store id to open yet
   (iOS pre-submission — Plan 241-04). Inherits the dialog's muted text tone; disappears once a real
   store id is configured and the caller stops passing UnavailableMessage. */
.fug-note {
    color: #475569;
    line-height: 1.5;
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

@keyframes fug-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fug-pop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

/* Dark mode — driven by the app theme toggle via [data-theme="dark"], NOT OS
   prefers-color-scheme (MEMORY.md mobile dark-mode pattern). */
[data-theme="dark"] .fug-dialog {
    background: hsl(220 15% 15%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .fug-title {
    color: hsl(220 15% 90%);
}

[data-theme="dark"] .fug-text {
    color: hsl(220 15% 65%);
}

[data-theme="dark"] .fug-note {
    color: hsl(220 15% 75%);
}

/* Respect reduced-motion — disable the gate entrance animations entirely. */
@media (prefers-reduced-motion: reduce) {
    .fug-overlay,
    .fug-dialog {
        animation: none;
    }
}

/* ============================================
   TOPIC COVERAGE  (Parent console — v20.0)
   Cache bust: v2026-07-13-topic-coverage
   Per-child "Topics Covered" report page (TopicCoveragePage.razor).
   Parent-console tone only (--parent-primary / --parent-accent / --gradient-parent)
   — NEVER the student gamification gradients. All new styles live here (never in
   app.css, never inline in the .razor — Razor parses <style> and chokes on raw @).
   British English throughout.
   ============================================ */

/* Loading shell — the stable marker the bUnit render test (plan 243-02) waits on. */
.cov-loading {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cov-page {
    padding-top: 0.5rem;
    padding-bottom: 3rem;
    /* Guarantee horizontal breathing room so the summary tiles, headings and cards never
       clip against the viewport's left edge regardless of the .container gutter behaviour
       (UAT fix: "1/47 cut off on the left"). */
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}

/* Hero — parent gradient (clean/professional, not the student purple/pink). */
.cov-hero {
    background: var(--gradient-parent);
}

.cov-breadcrumb {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
}

.cov-breadcrumb a {
    color: #fff;
    text-decoration: underline;
}

.cov-subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
}

.cov-reassurance {
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    margin-top: 0.5rem;
}

.cov-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Hero buttons must read on the parent gradient (UAT: the outline print button was
   dark-on-blue and unreadable). Primary "Back" = solid white with parent-primary text;
   "Print" = outline-light (white border + white text) that fills white on hover. */
.cov-actions .btn.cov-back {
    background: #fff;
    border: 1px solid #fff;
    color: hsl(var(--parent-primary));
    font-weight: 700;
    min-height: 44px;
}

.cov-actions .btn.cov-back:hover,
.cov-actions .btn.cov-back:active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    color: hsl(var(--parent-primary));
}

.cov-actions .btn.cov-print-btn {
    background: rgba(255, 255, 255, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    font-weight: 600;
    min-height: 44px;
}

.cov-actions .btn.cov-print-btn:hover,
.cov-actions .btn.cov-print-btn:active {
    background: #fff;
    border-color: #fff;
    color: hsl(var(--parent-primary));
}

.cov-actions .btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Summary band. The Card component ships no inner padding (that normally comes from
   CardContent, which this band deliberately omits for the flex grid), so give the tiles
   their own generous internal padding — otherwise the labels/values sit flush against the
   card's inner-left edge and clip (UAT: "LESSONS COVERED / 1 / 47 too far left in its box"). */
.cov-summary {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
}

.cov-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

.cov-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: hsl(var(--muted-foreground));
}

.cov-summary-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: hsl(var(--foreground));
}

/* Key-stage section. */
.cov-ks-section {
    margin-top: 2rem;
}

.cov-ks-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    color: hsl(var(--parent-primary));
    border-bottom: 2px solid hsl(var(--parent-accent));
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Topic card. */
.cov-topic-card {
    margin-bottom: 1rem;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
}

/* Clickable topic header — >=44px touch target for a11y (VIEW-06). */
.cov-topic-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    text-align: left;
    color: hsl(var(--foreground));
    transition: background-color 0.2s ease;
}

.cov-topic-header:hover {
    background: hsl(var(--parent-primary) / 0.06);
}

.cov-topic-header:focus-visible {
    outline: 2px solid hsl(var(--parent-primary));
    outline-offset: 2px;
    border-radius: 0.5rem;
}

.cov-chevron {
    color: hsl(var(--muted-foreground));
    transition: transform 0.2s ease;
}

.cov-chevron--open {
    transform: rotate(90deg);
}

.cov-topic-title {
    font-weight: 700;
    font-size: 1.0625rem;
    color: hsl(var(--foreground));
}

.cov-topic-meta {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* "Last practised <date>" recency chip on a topic header — subtle, muted, never wraps. */
.cov-topic-date {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    color: hsl(var(--muted-foreground));
}

/* Per-lesson completion date in the drill-down (sits after the score). */
.cov-lesson-date {
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Children-list card footer: two stacked entry buttons (Topics Covered + View Details). */
.cov-child-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Keep each summary stat from cramping so the tiles read as a clean row. */
.cov-summary-grid > div {
    min-width: 8rem;
}

/* ---- Family coverage overview (Phase 244): clickable child rows ---- */
.famcov-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.famcov-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-height: 44px;
    padding: 1rem 1.25rem;
    text-align: left;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius, 0.75rem);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.famcov-row:hover {
    border-color: hsl(var(--parent-primary));
    box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.08));
    transform: translateY(-1px);
}

.famcov-row:focus-visible {
    outline: 2px solid hsl(var(--parent-primary));
    outline-offset: 2px;
}

.famcov-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 9999px);
    background: var(--gradient-parent);
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
}

.famcov-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 8rem;
}

.famcov-name {
    font-weight: 700;
    font-size: 1.0625rem;
    color: hsl(var(--foreground));
}

.famcov-ks {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.famcov-latest {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 10rem;
}

.famcov-latest-topic {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.famcov-latest-date,
.famcov-latest-none {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.famcov-chevron {
    flex: 0 0 auto;
    color: hsl(var(--muted-foreground));
}

.famcov-hint {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .famcov-row {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}

/* Stack the "latest" column under the name on narrow screens. */
@media (max-width: 576px) {
    .famcov-latest {
        align-items: flex-start;
        text-align: left;
        min-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .famcov-row {
        transition: none;
    }

    .famcov-row:hover {
        transform: none;
    }
}

.cov-progress-wrap {
    flex: 1 1 140px;
    min-width: 120px;
    max-width: 220px;
}

/* RAG flag — always icon + text + colour, never colour alone (accessibility). */
.cov-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.cov-flag--excelling {
    color: hsl(var(--student-success));
}

.cov-flag--support {
    color: hsl(var(--warning));
}

/* Lessons drill-down — always in the DOM; collapse is the CSS class below (never @if),
   so window.print() reveals everything without a re-render race (EXP-01). */
.cov-lessons {
    padding: 0.25rem 1rem 1rem 1rem;
    border-top: 1px solid hsl(var(--border));
}

.cov-lessons--collapsed {
    display: none;
}

.cov-lesson {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid hsl(var(--border) / 0.6);
}

.cov-lesson:last-child {
    border-bottom: none;
}

.cov-lesson-title {
    font-weight: 600;
    color: hsl(var(--foreground));
}

.cov-lesson-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
}

.cov-lesson-status--done {
    color: hsl(var(--success));
}

.cov-lesson-status--gap {
    color: hsl(var(--muted-foreground));
}

.cov-lesson-score {
    color: hsl(var(--muted-foreground));
    font-size: 0.875rem;
}

.cov-lesson-obj {
    flex-basis: 100%;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.cov-topic-note,
.cov-uncat-note {
    font-size: 0.8125rem;
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

/* Honest empty state. */
.cov-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: hsl(var(--muted-foreground));
}

/* Dark mode — [data-theme="dark"] ONLY (never prefers-color-scheme, never .dark).
   --card / --foreground / --border flip at :root for dark, so text stays legible. */
[data-theme="dark"] .cov-topic-card {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .cov-topic-header:hover {
    background: hsl(var(--parent-accent) / 0.12);
}

/* Reduced motion — do not reintroduce forced motion on the coverage page. */
@media (prefers-reduced-motion: reduce) {
    .cov-topic-header,
    .cov-chevron {
        transition: none;
    }
}

/* Print — a SECOND @media print block for the .cov- surface only. The existing block
   (near L3010) already hides nav/sidebar/footer/toast, resets body + .hero-section to
   ink, avoids heading breaks and kills animations — do NOT re-declare those here.
   This reveals collapsed lessons (expand-all), hides interactive chrome and forces
   ink-on-white including the dark-mode variants (EXP-01). */
@media print {
    .cov-lessons--collapsed {
        display: block !important; /* expand-all on print */
    }

    .cov-actions,
    .cov-back,
    .cov-breadcrumb,
    .cov-chevron {
        display: none !important;
    }

    .cov-topic-card {
        page-break-inside: avoid;
        break-inside: avoid;
        border: 1px solid #ccc !important;
    }

    .cov-page,
    .cov-topic-card,
    [data-theme="dark"] .cov-page,
    [data-theme="dark"] .cov-topic-card {
        background: #fff !important;
        color: #000 !important;
    }

    /* Muted meta (accuracy, "Last practised", lesson score/date) must ink legibly on paper. */
    .cov-topic-meta,
    .cov-topic-date,
    .cov-lesson-date,
    .cov-lesson-score,
    .cov-summary-label {
        color: #333 !important;
    }
}

/* ============================================
   TIMES TABLES FLUENCY  (Parent console — v23.0 Phase 263)
   Cache bust: v2026-08-25-parent-fluency-reporting
   Per-child "Times Tables Fluency" report page (FactFluencyPage.razor).
   Parent-console tone only (--parent-primary / --parent-accent / --gradient-parent)
   — NEVER the student gamification gradients. All new styles live here: app.css is
   hand-curated and must NEVER be edited or regenerated, and inline <style> in a .razor
   is parsed as Razor markup and chokes on raw @.
   The band colours themselves come from the shared Badge variants and Bootstrap Icons;
   this block owns the SURROUNDING layout only. British English throughout.
   ============================================ */

/* Loading shell — the stable marker the bUnit render tests wait on. */
.flu-loading {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flu-page {
    padding-top: 0.5rem;
    padding-bottom: 3rem;
    /* Same horizontal breathing room as .cov-page, so cards never clip against the
       viewport's left edge regardless of the .container gutter behaviour. */
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}

/* Hero — parent gradient (clean/professional, not the student purple/pink). */
.flu-hero {
    background: var(--gradient-parent);
}

.flu-breadcrumb {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.5rem;
}

.flu-breadcrumb a {
    color: #fff;
    text-decoration: underline;
}

.flu-subtitle {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.05rem;
}

.flu-reassurance {
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
    margin-top: 0.5rem;
}

.flu-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* The hero button has to read ON the parent gradient — the same fix .cov-back carries,
   because a default dark button on blue is unreadable. */
.flu-actions .btn.flu-back {
    background: #fff;
    border: 1px solid #fff;
    color: hsl(var(--parent-primary));
    font-weight: 700;
    min-height: 44px;
}

.flu-actions .btn.flu-back:hover,
.flu-actions .btn.flu-back:active {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    color: hsl(var(--parent-primary));
}

/* Reuses .cov-actions' focus treatment rather than inventing a new one. */
.flu-actions .btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Section headings — same treatment as .cov-ks-heading so the two parent reports read
   as one product rather than two. */
.flu-section-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: hsl(var(--parent-primary));
    border-bottom: 2px solid hsl(var(--parent-accent));
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.flu-tables-section {
    margin-top: 1.5rem;
}

/* The 11 mastery cards. minmax(160px, 1fr) gives 2 columns at a 375px viewport and
   scales up on its own, so no extra breakpoint is needed to keep it readable on a
   phone — a fixed column count is exactly what would break there. */
.flu-tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4);
}

.flu-table-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--space-4);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    /* Tall enough for the table number, the icon+badge row and the supporting count to
       sit without awkward wrapping at the 160px minimum width. */
    min-height: 8.5rem;
}

.flu-table-number {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: hsl(var(--foreground));
}

/* Band row — colour is NEVER the only signal here: an icon and a text label always
   travel with the badge (WCAG 2.1 AA, matching the .cov-flag convention). */
.flu-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.flu-band-icon {
    font-size: 1rem;
    line-height: 1;
    color: hsl(var(--muted-foreground));
}

/* The supporting "N of 11 facts practised · M need practice" line. Pushed to the bottom
   of the card so every card's badge row lines up across the grid. */
.flu-table-support {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    margin-top: auto;
}

/* Clear vertical separation from the grid and from each other — the "structurally
   separate" requirement made visible as well as true in the DOM. */
.flu-speed-section,
.flu-mtc-section {
    margin-top: var(--space-8);
}

/* Hold the shared SVG chart to a sensible reading width instead of letting it stretch
   the full width of a desktop viewport. */
.flu-speed-section .line-graph-svg {
    width: 100%;
    max-width: 640px;
    height: auto;
}

.flu-speed-single,
.flu-speed-empty,
.flu-mtc-empty {
    color: hsl(var(--muted-foreground));
    font-style: italic;
}

.flu-mtc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.flu-mtc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid hsl(var(--border) / 0.6);
}

.flu-mtc-row:last-child {
    border-bottom: none;
}

.flu-mtc-score {
    font-weight: 700;
    color: hsl(var(--foreground));
}

.flu-mtc-date {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}

/* Dark mode — [data-theme="dark"] ONLY (never prefers-color-scheme, never .dark).
   --card / --foreground / --border / --muted-foreground all flip at :root for dark, so
   these rules only need to make sure the fluency surfaces pick the flipped tokens up
   rather than inheriting a light-mode surface. Values adapted from
   [data-theme="dark"] .cov-topic-card rather than guessed from scratch. */
[data-theme="dark"] .flu-table-card {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
}

[data-theme="dark"] .flu-table-number,
[data-theme="dark"] .flu-mtc-score {
    color: hsl(var(--foreground));
}

[data-theme="dark"] .flu-table-support,
[data-theme="dark"] .flu-band-icon,
[data-theme="dark"] .flu-mtc-date {
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .flu-mtc-row {
    border-bottom-color: hsl(var(--border));
}

/* Reduced motion: this block deliberately introduces NO transition and NO animation —
   a static card grid and a static SVG chart do not need motion, and motion added for
   its own sake is exactly what prefers-reduced-motion exists to undo. There is
   therefore nothing here to switch off. */

/* ---- App Store Download CTA (quick 260811-ftk) ---- */
.lp-store-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #14161a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.2s, background 0.2s;
}

.lp-store-cta:hover {
    background: #24272e;
    transform: translateY(-2px);
}

.lp-store-cta:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 2px;
}

.lp-store-cta svg {
    width: 22px;
    height: 22px;
    flex: none;
}

.lp-store-cta-text {
    white-space: nowrap;
}

[data-theme="dark"] .lp-store-cta {
    background: #f5f5f5;
    color: #14161a;
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .lp-store-cta:hover {
    background: #e2e2e2;
}

/* Standalone centred row for the store CTA on pages with no hero (e.g. /faq).
   Deliberately NOT .lp-cta-buttons — that class is switched to
   justify-content: flex-start above 768px to suit the left-aligned landing
   hero, which would pull this button off-centre. */
.lp-store-cta-row {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

@media (prefers-reduced-motion: reduce) {
    .lp-store-cta {
        transition: none;
    }

    .lp-store-cta:hover {
        transform: none;
    }
}

/* ============================================================
   SPEED DRILL MODE (.drill-*)
   Phase 260 — Times Tables Speed Drill (setup -> play -> results)
   All styles scoped to the /drills route. Every colour resolves through
   hsl(var(--token)); no new hex values are introduced anywhere in this block.
   Cache bust: v2026-08-24-speed-drill-mode
   ============================================================ */

/* --- Shared page container (mirrors .asmnt-page) --- */
.drill-page {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
}

/* --- Setup: hero --- */
.drill-hero {
    text-align: center;
    margin-bottom: var(--space-8);
}

.drill-hero .drill-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-3xl);
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin: 0 0 var(--space-2);
}

.drill-hero .drill-subtitle {
    font-size: var(--text-base);
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

/* --- Setup: free-tier allowance pill --- */
.drill-allowance-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0 auto var(--space-6);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    background: hsl(var(--student-accent) / 0.18);
    border: 1px solid hsl(var(--student-accent) / 0.4);
    color: hsl(var(--foreground));
    font-size: var(--text-sm);
    font-weight: 600;
}

.drill-page .drill-allowance-badge {
    display: flex;
    width: fit-content;
}

/* --- Setup: mode grid. One populated card now; the second cell is deliberately
       EMPTY, reserved for Phase 261's MTC card with zero container rework. --- */
.drill-mode-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
    .drill-mode-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
}

.drill-mode-card-content {
    padding: var(--space-4);
    text-align: center;
}

.drill-mode-icon {
    font-size: 2rem;
    color: hsl(var(--student-primary));
}

.drill-mode-title {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-xl);
    line-height: 1.2;
    margin: var(--space-2) 0 var(--space-1);
    color: hsl(var(--foreground));
}

.drill-mode-description {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    margin: 0;
}

/* --- Setup: table picker --- */
.drill-picker-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-xl);
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin: 0 0 var(--space-4);
}

.drill-starter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

/* The starter tiles read as "the easy ones" through a soft KS1 pastel, before any
   label has to be read. */
.drill-starter-tile {
    position: relative;
    width: 96px;
    height: 96px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(var(--ks1) / 0.5);
    border-radius: var(--radius-lg);
    background: hsl(var(--ks1) / 0.12);
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.drill-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.drill-table-tile {
    position: relative;
    height: 72px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.drill-starter-tile .drill-tile-number,
.drill-table-tile .drill-tile-number {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
}

.drill-starter-tile:hover,
.drill-table-tile:hover,
.drill-mixed-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.drill-starter-tile:focus-visible,
.drill-table-tile:focus-visible,
.drill-mixed-tile:focus-visible,
.drill-keypad-key:focus-visible,
.drill-answer-readout:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Selection is redundant, never colour-only: the gradient fill is paired with the
   .drill-tile-badge check icon supplied by DrillTablePicker's markup. */
.drill-table-tile--selected {
    background: var(--gradient-student);
    border-color: transparent;
    color: #fff;
    animation: scale-in 0.3s ease-out;
}

.drill-table-tile--selected .drill-tile-number {
    color: #fff;
}

.drill-tile-badge {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    font-size: 1rem;
    color: #fff;
}

/* "Mixed" is filled even at rest so it reads as the big option, not just another tile. */
.drill-mixed-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: var(--space-4);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--gradient-student);
    color: #fff;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: var(--space-6);
}

.drill-mixed-tile.drill-table-tile--selected {
    opacity: 1;
    box-shadow: var(--shadow-glow);
    animation: scale-in 0.3s ease-out;
}

/* --- Setup: limit state. Gold and celebratory, never destructive red — using all
       three of today's drills is an achievement, not a failure. --- */
.drill-limit-card {
    border-top: 4px solid hsl(var(--student-accent));
    text-align: center;
}

.drill-limit-card-content {
    padding: var(--space-6);
}

.drill-limit-icon {
    font-size: 2rem;
    color: hsl(var(--student-accent));
}

.drill-limit-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 1.2;
    margin: var(--space-2) 0;
    color: hsl(var(--foreground));
}

.drill-limit-body {
    font-size: var(--text-base);
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
    margin: 0 0 var(--space-4);
}

.drill-limit-reset {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    margin: var(--space-4) 0 0;
}

/* --- Setup / Results: CTA row --- */
.drill-cta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.drill-cta-row .drill-start-cta {
    width: 100%;
}

/* The Start CTA sits ABOVE the table picker (user request, 2026-08-25) so it stays reachable
   without scrolling past the now-taller multi-select grid. It needs breathing room on BOTH sides:
   butted against "Choose your tables" it reads as a heading for the picker rather than the action
   that launches the drill. */
.drill-cta-row--above-picker {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
    .drill-cta-row .drill-start-cta {
        width: auto;
        min-width: 240px;
    }
}

/* --- Play: layout --- */
.drill-play-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.drill-progress {
    width: 100%;
}

/* The text label is the non-colour, screen-reader-legible source of truth for
   progress; the bar above it is the glanceable visual. */
.drill-progress-label {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.drill-question-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius-xl);
    background: hsl(var(--card));
    animation: scale-in 0.3s ease-out;
}

.drill-question-text {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-4xl);
    line-height: 1.2;
    text-align: center;
    color: hsl(var(--foreground));
    margin: 0;
}

@media (min-width: 640px) {
    .drill-question-text {
        font-size: var(--text-5xl);
    }
}

/* Calculator-style read-out. inputmode="none" in the markup suppresses the mobile
   OS keyboard; this is purely its visual treatment. */
.drill-answer-readout {
    width: 100%;
    max-width: 240px;
    padding: var(--space-2) var(--space-4);
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-3xl);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.drill-answer-readout:disabled {
    opacity: 0.7;
}

/* --- Play: cosmetic countdown ring (TRUST-06) --- */
.drill-countdown-ring {
    --drill-ring-track: hsl(var(--muted));
    --drill-ring-progress: hsl(var(--student-accent));
    position: relative;
    width: 88px;
    height: 88px;
}

.drill-countdown-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.drill-countdown-track {
    fill: none;
    stroke: var(--drill-ring-track);
    stroke-width: 8;
}

/* The ring's colour NEVER changes to signal urgency — no green/amber/red shift. It is
   genuinely decorative, which keeps it honest: nothing about it should ever be
   mistaken for scoring information. */
.drill-countdown-progress {
    fill: none;
    stroke: var(--drill-ring-progress);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear;
}

/* The numeral is the PRIMARY indicator — always present, always accurate, and
   independent of colour (QV-02). */
/* Centred with flexbox, NOT `top/left 50% + translate(-50%, -50%)` (fixed 2026-08-25).
   The urgent state below applies `pulse-magic`, whose keyframes set `transform: scale(...)` —
   the same property — so the translate that did the centring was overwritten the instant the
   animation started, and the 3/2/1 digits jumped off-centre. Centring via flex leaves `transform`
   entirely to the animation, so the two can no longer fight. Do not reintroduce a transform here. */
.drill-countdown-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    color: hsl(var(--foreground));
}

/* Final 3 seconds: a shape/motion cue layered ON TOP of the numeral, never instead
   of it. */
.drill-countdown-ring--urgent .drill-countdown-number {
    animation: pulse-magic 1s ease-in-out infinite;
}

/* --- Play: feedback states. Every state pairs colour with an icon (and, for a
       genuine wrong answer only, motion). --- */
.drill-feedback {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.drill-feedback--correct {
    border-color: hsl(var(--student-success));
    background: hsl(var(--student-success) / 0.12);
    color: hsl(var(--student-success));
}

.drill-feedback--incorrect {
    border-color: hsl(var(--destructive));
    background: hsl(var(--destructive) / 0.12);
    color: hsl(var(--destructive));
}

/* Teal, deliberately neither success-green nor destructive-red: nothing went wrong
   on the child's part. */
.drill-feedback--voided {
    border-color: hsl(var(--parent-accent));
    background: hsl(var(--parent-accent) / 0.12);
    color: hsl(var(--parent-accent));
}

/* An unanswered question scores the same as incorrect, so it shares that visual
   tier — but never the wobble, because nothing was "wrong". */
.drill-feedback--timeout {
    border-color: hsl(var(--destructive));
    background: hsl(var(--destructive) / 0.12);
    color: hsl(var(--destructive));
}

.drill-question-card.drill-feedback--correct,
.drill-question-card.drill-feedback--incorrect,
.drill-question-card.drill-feedback--voided,
.drill-question-card.drill-feedback--timeout {
    background: hsl(var(--card));
}

.drill-feedback-text {
    font-size: var(--text-base);
}

/* --- Play: numeric keypad --- */
.drill-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    width: 100%;
    max-width: 280px;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--space-2);
    background: hsl(var(--background));
}

/* 56px mobile / 64px desktop, both comfortably above the 44px WCAG floor, which is
   also enforced as a hard minimum regardless of viewport. */
.drill-keypad-key {
    min-width: 44px;
    min-height: 44px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    transition: transform 0.1s ease;
}

@media (min-width: 640px) {
    .drill-keypad {
        max-width: 320px;
    }

    .drill-keypad-key {
        height: 64px;
    }
}

.drill-keypad-key:active:not([disabled]) {
    transform: scale(0.95);
}

.drill-keypad-key--clear i,
.drill-keypad-key--enter i {
    font-size: 1.25rem;
}

/* --- Results. The container is IDENTICAL for every outcome — a low score is a data
       point, never a failure state, and never gets an alarming treatment. --- */
.drill-results-card {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, hsl(var(--student-primary) / 0.10), hsl(var(--student-secondary) / 0.10));
    border: 1px solid hsl(var(--border));
}

.drill-results-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-3xl);
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin: 0 0 var(--space-4);
}

.drill-results-score {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    color: hsl(var(--foreground));
    margin: 0 0 var(--space-1);
}

.drill-results-time {
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
    color: hsl(var(--muted-foreground));
    margin: 0 0 var(--space-1);
}

.drill-results-best {
    font-size: var(--text-base);
    color: hsl(var(--muted-foreground));
    margin: 0 0 var(--space-4);
}

/* Informational, never a warning colour — the cap is never framed as a penalty. */
.drill-results-xp-note {
    font-size: var(--text-sm);
    color: hsl(var(--muted-foreground));
    margin: var(--space-4) 0 0;
}

/* --- Dark mode. Almost everything above resolves through hsl(var(--token)) and
       therefore needs no override by construction. These two are the exceptions the
       UI-SPEC flags. --- */
[data-theme="dark"] .drill-countdown-ring {
    --drill-ring-track: hsl(var(--muted) / 0.5);
    --drill-ring-progress: hsl(var(--student-accent));
}

[data-theme="dark"] .drill-feedback--voided {
    background: hsl(var(--parent-accent) / 0.22);
    color: hsl(var(--parent-accent));
}

/* --- prefers-reduced-motion. Every animation this phase introduces has a documented
       fallback; the countdown numeral still updates every second in all cases. --- */
@media (prefers-reduced-motion: reduce) {
    .drill-table-tile--selected,
    .drill-mixed-tile.drill-table-tile--selected,
    .drill-question-card {
        animation: none;
    }

    .drill-feedback--incorrect,
    .drill-question-card.asmnt-wobble,
    .drill-feedback.asmnt-wobble {
        animation: none;
    }

    .drill-countdown-ring--urgent .drill-countdown-number {
        animation: none;
    }

    /* The ring still depletes — it simply jumps per update instead of interpolating. */
    .drill-countdown-progress {
        transition: none;
    }

    .drill-feedback {
        transition: none;
    }

    .drill-keypad-key {
        transition: none;
    }

    .drill-keypad-key:active:not([disabled]) {
        transform: none;
    }

    .drill-starter-tile,
    .drill-table-tile,
    .drill-mixed-tile {
        transition: none;
    }

    .drill-starter-tile:hover,
    .drill-table-tile:hover,
    .drill-mixed-tile:hover {
        transform: none;
    }
}

/* ============================================================
   MTC PRACTICE CHECK (.drill-mtc-*)
   Phase 261 — the faithful Multiplication Tables Check replica.
   A sub-family of the Phase 260 .drill-* block above: the MTC card REUSES
   .drill-mode-card / .drill-mode-card-content wholesale and only overrides what is
   genuinely different. Every colour resolves through hsl(var(--token)); no new hex
   values are introduced anywhere in this block, and app.css is never touched.
   Cache bust: v2026-08-24-mtc-practice-check
   ============================================================ */

/* --- Setup: the MTC card. Sits in the grid slot Phase 260 deliberately reserved,
       with no change to .drill-mode-grid. --- */
.drill-mtc-card .drill-mode-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

/* Pink rather than the Speed Drill stopwatch's purple, so the two cards are told
   apart by shape AND colour before either title is read. */
.drill-mode-icon.drill-mtc-icon {
    color: hsl(var(--student-secondary));
}

.drill-mtc-start-cta,
.drill-mtc-unlock-cta {
    margin-top: var(--space-2);
    min-height: 44px;
}

/* Locked state: gold and celebratory, matching DrillLimitReachedCard's "not yet
   unlocked" language — never a denial, never destructive red. This REUSES
   .go-premium-badge and only neutralises the interactive affordances that badge
   carries as a link, because here it is a non-clickable label sitting above a
   separate CTA. */
.drill-mtc-locked-badge {
    min-height: 0;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    gap: var(--space-1);
    cursor: default;
}

.drill-mtc-locked-badge:hover {
    transform: none;
    box-shadow: 0 2px 8px hsl(var(--warning) / 0.3);
}

/* --- Pre-start notice. Calm and centred, matching the Setup and Results screens'
       existing 640px container convention (.drill-page already caps the width). --- */
.drill-mtc-notice {
    animation: scale-in 0.3s ease-out;
}

.drill-mtc-notice-content {
    padding: var(--space-6) var(--space-4);
    text-align: center;
}

.drill-mtc-notice-icon {
    font-size: 2.5rem;
    color: hsl(var(--student-secondary));
}

.drill-mtc-notice-heading {
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-3xl);
    line-height: 1.2;
    color: hsl(var(--foreground));
    margin: var(--space-2) 0 var(--space-4);
}

.drill-mtc-notice-body {
    font-size: var(--text-base);
    line-height: 1.6;
    color: hsl(var(--muted-foreground));
    margin: 0 0 var(--space-4);
}

/* Left-aligned inside a centred card: a list of rules is far easier for a child to
   scan down the left edge than centred ragged text. */
.drill-mtc-notice-list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    text-align: left;
}

.drill-mtc-notice-list li {
    position: relative;
    padding: var(--space-2) 0 var(--space-2) var(--space-8);
    font-size: var(--text-base);
    line-height: 1.5;
    color: hsl(var(--foreground));
    border-bottom: 1px solid hsl(var(--border));
}

.drill-mtc-notice-list li:last-child {
    border-bottom: none;
}

/* A neutral marker, not a tick: none of these lines is an achievement. */
.drill-mtc-notice-list li::before {
    content: "•";
    position: absolute;
    left: var(--space-3);
    color: hsl(var(--student-secondary));
    font-weight: 800;
}

.drill-mtc-notice-list strong {
    color: hsl(var(--foreground));
    font-weight: 700;
}

/* The gentler option is set apart so it reads as a genuine second door, not a
   cancel link tucked under the primary button. */
.drill-mtc-notice-alt {
    margin: 0 0 var(--space-6);
    padding: var(--space-4);
    border-radius: var(--radius);
    background: hsl(var(--student-primary) / 0.08);
    border: 1px solid hsl(var(--student-primary) / 0.2);
}

.drill-mtc-notice-alt-text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: hsl(var(--foreground));
}

.drill-mtc-notice-cta-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

@media (min-width: 480px) {
    .drill-mtc-notice-cta-row {
        flex-direction: row;
        justify-content: center;
    }
}

.drill-mtc-notice-start,
.drill-mtc-notice-alt-cta {
    min-height: 44px;
}

/* --- Dark mode. Everything above resolves through hsl(var(--token)) and needs no
       override by construction, with one exception: .go-premium-badge's gradient is
       hardcoded white-on-gold, and the tinted alt panel needs a little more presence
       against the darker card surface. --- */
[data-theme="dark"] .drill-mtc-notice-alt {
    background: hsl(var(--student-primary) / 0.16);
    border-color: hsl(var(--student-primary) / 0.32);
}

[data-theme="dark"] .drill-mtc-notice-list li {
    border-bottom-color: hsl(var(--border));
}

/* --- prefers-reduced-motion. The notice's entrance is the only animation this
       block introduces; the locked badge's hover lift is already neutralised above
       for every user. --- */
@media (prefers-reduced-motion: reduce) {
    .drill-mtc-notice {
        animation: none;
    }
}

/* ============================================================
   DRILL TABLE PICKER — additive multi-select (2026-08-25)
   The grid became multi-select, which needs two new affordances: a Reset that
   clears a set in one go, and a live text summary so the running selection is
   readable (and announced) rather than only inferable from lit tiles.
   ============================================================ */

.drill-picker-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* The mixed tile owned the bottom margin when it was the last element in the
   picker; the actions row owns it now, or the two controls sit unevenly. */
.drill-picker-actions .drill-mixed-tile {
    flex: 1 1 12rem;
    width: auto;
    margin-bottom: 0;
}

.drill-reset-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* 44px floor — the project's mobile touch-target minimum. */
    min-height: 56px;
    padding: var(--space-4) var(--space-5);
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background: hsl(var(--card));
    color: hsl(var(--muted-foreground));
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.drill-reset-tile:hover:not(:disabled) {
    color: hsl(var(--destructive));
    border-color: hsl(var(--destructive));
    transform: translateY(-2px);
}

.drill-reset-tile:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* Greyed rather than hidden — a control that disappears when idle is harder to
   relocate than one that simply dims. */
.drill-reset-tile:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.drill-picker-summary {
    margin: 0 0 var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    min-height: 1.25rem;
}

[data-theme="dark"] .drill-reset-tile {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .drill-picker-summary {
    color: hsl(var(--muted-foreground));
}

/* --- prefers-reduced-motion. The reset tile's only animation is its hover
   lift; the selected-tile scale-in is already covered by the existing global
   reduced-motion block. --- */
@media (prefers-reduced-motion: reduce) {
    .drill-reset-tile,
    .drill-reset-tile:hover:not(:disabled) {
        transform: none;
        transition: none;
    }
}

/* ============================================================
   DRILL INTER-QUESTION GAP PANEL (2026-08-25)
   Shown instead of the answered question during the hold between questions.
   Before this, the old question stayed on screen with its countdown still
   draining, so MTC's statutory 3-second pause read as the app hanging.
   ============================================================ */

.drill-gap-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    /* Matches the question card's occupied height so the card does not collapse
       and reflow the keypad underneath mid-drill. */
    min-height: 180px;
}

.drill-gap-icon {
    font-size: var(--text-4xl);
    color: hsl(var(--muted-foreground));
    animation: pulse-magic 1.2s ease-in-out infinite;
}

.drill-gap-text {
    margin: 0;
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--text-lg);
    color: hsl(var(--muted-foreground));
}

[data-theme="dark"] .drill-gap-icon,
[data-theme="dark"] .drill-gap-text {
    color: hsl(var(--muted-foreground));
}

/* --- prefers-reduced-motion: the dots stay, they simply stop pulsing. The panel
       never relied on motion to convey the pause — the text does that. --- */
@media (prefers-reduced-motion: reduce) {
    .drill-gap-icon {
        animation: none;
    }
}

/* Perfect-run callout on the results screen (2026-08-25). Gold/celebratory, and paired
   with an icon and words so it never depends on colour alone. */
.drill-results-perfect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
    font-family: 'Nunito', system-ui, sans-serif;
    font-weight: 800;
    font-size: var(--text-lg);
    color: hsl(var(--student-accent));
    animation: scale-in 0.3s ease-out;
}

[data-theme="dark"] .drill-results-perfect {
    color: hsl(var(--student-accent));
}

@media (prefers-reduced-motion: reduce) {
    .drill-results-perfect {
        animation: none;
    }
}

/* ============================================================
   KEYPAD — physical-key echo (2026-08-25)
   Pressing a key on the real keyboard lights the matching on-screen key, so the
   two input methods read as one control rather than two separate ones.
   ============================================================ */

.drill-keypad-key--pressed {
    /* !important: .drill-keypad-key sits on a Button component whose own variant
       classes (outline/secondary/success) set background and border. Without it the
       variant wins and the echo is invisible on every key. */
    background: var(--gradient-student) !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: scale(0.94);
    box-shadow: var(--shadow-md);
}

/* Transition on the base key, not only the pressed state, so the key eases back out
   when the highlight clears instead of snapping. */
.drill-keypad-key {
    transition: transform 0.12s ease, box-shadow 0.12s ease,
                background-color 0.12s ease, border-color 0.12s ease;
}

/* The answer field is focused automatically on every new question so typing works
   without clicking first. It must therefore look focused — an invisible focus ring
   on an auto-focused field is a WCAG 2.4.7 failure. */
.drill-answer-readout:focus,
.drill-answer-readout:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .drill-keypad-key,
    .drill-keypad-key--pressed {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   UAT FIXES (2026-08-25)
   ============================================================ */

/* --- Perfect-run callout: contrast fix.
   It was gold TEXT (--student-accent) on the results card's pale lavender wash,
   which measures 1.06:1 — indistinguishable from the background, not merely
   "hard to see". WCAG 2.1 AA needs 4.5:1.
   Plain gold text cannot reach that on this background without going so dark it
   stops reading as gold, so the celebration moves to a filled pill: gold stays
   the visual identity, and the TEXT contrasts against the pill rather than the
   card. Measured: text-on-pill 6.23:1, border-vs-card 3.1:1 (the border is what
   gives the pill a readable edge, since a pale gold fill on a pale card is only
   1.15:1 on its own). Colours are literal rather than token-derived because both
   sides of the pair had to be measured together. --- */
.drill-results-perfect {
    background: linear-gradient(135deg, hsl(45 95% 55%), hsl(38 95% 58%));
    color: hsl(38 100% 18%);
    border: 1px solid hsl(38 80% 30%);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* The pill already carries its own dark text, so the dark-mode override that
   re-applied the pale accent colour must not win here. */
[data-theme="dark"] .drill-results-perfect {
    color: hsl(38 100% 18%);
}

/* --- Parent fluency: band badge overflowed its card.
   "Not enough practice yet" is longer than the 160px minimum column, and .badge
   does not wrap, so the pill ran past the card edge. Allowed to wrap onto a
   second line and to shrink inside the flex row — the copy stays as written
   rather than being truncated to fit. --- */
.flu-band {
    min-width: 0;
}

.flu-band .badge {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    min-width: 0;
    max-width: 100%;
}

/* --- Parent fluency: MTC score colour bands (2026-08-25).
   Perfect purple, then green / amber / red as the score falls. Colour is a scanning
   aid only — the raw score and a band word sit beside it, so nothing depends on
   colour alone, and no band is ever labelled pass or fail (the real MTC has no pass
   mark). Values are darkened from the palette tokens because the tokens are tuned
   for fills, not for text on a pale card; measured against the page background these
   are 6.84 / 4.56 / 5.44 / 5.66 : 1, all clearing AA's 4.5. --- */
.flu-mtc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
}

.flu-mtc--perfect { color: hsl(280 100% 38%); }
.flu-mtc--strong  { color: hsl(142 70% 29%); }
.flu-mtc--mixed   { color: hsl(35 100% 28%); }
.flu-mtc--low     { color: hsl(0 74% 42%); }

.flu-mtc-band {
    font-size: var(--text-sm);
    font-weight: 700;
}

/* A perfect run is the one result worth making feel like an event. */
.flu-mtc--perfect.flu-mtc-score {
    font-weight: 800;
}

/* Dark mode: the same hues lifted to read on a dark card rather than a pale one. */
[data-theme="dark"] .flu-mtc--perfect { color: hsl(280 100% 78%); }
[data-theme="dark"] .flu-mtc--strong  { color: hsl(142 70% 65%); }
[data-theme="dark"] .flu-mtc--mixed   { color: hsl(45 100% 68%); }
[data-theme="dark"] .flu-mtc--low     { color: hsl(0 90% 72%); }

/* ============================================================================
   Phase 266 (ANN-06) — Feature Announcement Modal (.ann-*)
   One-time, per-feature, audience-targeted "what's new" dialog. Ported VERBATIM
   to both mobile custom.css copies in Phase 265 (MDRILL-04) — do not diverge
   here without updating Android/iOS too. Dark mode is [data-theme="dark"] ONLY;
   never prefers-color-scheme (mobile per-page inline <style> hardcodes light
   colours that would otherwise win the cascade over an OS-level media query).
   ============================================================================ */

.ann-backdrop {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: hsl(0 0% 0% / 0.6);
    opacity: 0;
    animation: annBackdropFadeIn 0.3s ease forwards;
    z-index: var(--z-feature-announcement-backdrop);
}

@keyframes annBackdropFadeIn {
    to { opacity: 1; }
}

/* Centred via inset:0 + margin:auto rather than top/left:50% + transform:translate(-50%,-50%),
   so the reused global `scale-in` keyframe (which only animates `transform: scale(...)`, no
   translate) never fights a static translate on this element. position:fixed already establishes
   the containing block the accent stripe and close button position against. */
.ann-panel {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(92vw, 420px);
    height: fit-content;
    max-height: 90dvh;
    overflow-y: auto;
    background: hsl(var(--card));
    color: hsl(var(--card-foreground));
    border-radius: var(--radius);
    box-shadow: var(--shadow-2xl);
    padding: var(--space-6);
    z-index: var(--z-feature-announcement);
    animation: scale-in 0.3s ease;
}

.ann-accent-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--radius) var(--radius) 0 0;
}

.ann-panel--student .ann-accent-stripe { background: var(--gradient-student); }
.ann-panel--parent .ann-accent-stripe { background: var(--gradient-parent); }

.ann-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-size: 16px;
    line-height: 1;
    color: hsl(var(--card-foreground));
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ann-close:hover {
    background: hsl(var(--muted));
}

/* 56px circle, solid (never the raw gradient) audience-tinted fill behind a white glyph — the
   two-stop gradient measures as low as 2.36:1 for white text/icons and must never sit under one. */
.ann-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: var(--space-8);
}

.ann-panel--student .ann-icon { background: hsl(var(--student-primary)); }
.ann-panel--parent .ann-icon { background: hsl(var(--parent-primary)); }

.ann-title {
    font-family: 'Nunito', system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: var(--text-2xl);
    line-height: 1.2;
    margin: 0 0 var(--space-3) 0;
}

.ann-body {
    font-size: var(--text-base);
    line-height: 1.5;
    color: hsl(var(--card-foreground));
    margin: 0;
}

.ann-note {
    font-size: var(--text-sm);
    line-height: 1.4;
    color: hsl(var(--muted-foreground));
    margin: var(--space-3) 0 0 0;
}

/* The "Premium" chip was removed at the user's request (2026-08-26) — the note text alone carries
   the meaning without badging the announcement. Its rules are deliberately deleted rather than left
   dead; if it ever returns, the measured recipe is still live at custom.css .drill-results-perfect. */

/* Label-style, not the reserved accent colour — --primary is spent on exactly three things in this
   component (Next/final-CTA button fill, focus ring, active dot) and this link is none of them. */
.ann-cta {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.4;
    font-weight: 400;
    color: hsl(var(--card-foreground));
    text-decoration: underline;
}

.ann-counter {
    font-size: var(--text-sm);
    font-weight: 400;
    line-height: 1.4;
    color: hsl(var(--muted-foreground));
    margin: var(--space-6) 0 0 0;
}

.ann-dots {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* NOT --border (measured 1.24:1/1.22:1 and rejected) — --muted-foreground clears 3:1 both themes. */
.ann-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: hsl(var(--muted-foreground));
}

.ann-dot--active {
    background: hsl(var(--primary));
}

.ann-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-6);
}

.ann-actions .btn {
    min-height: 44px;
}

/* 220ms opacity-only cross-fade — no slide/transform, so the reduced-motion fallback below is a
   trivial instant swap. Paired with @key="_currentIndex" on this element in the .razor file, which
   forces Blazor to recreate the node per page so the animation actually retriggers on Back/Next. */
.ann-page {
    animation: annPageFade 220ms ease;
}

@keyframes annPageFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ann-panel :focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .ann-panel {
        padding: var(--space-4);
    }

    .ann-title {
        font-size: var(--text-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ann-backdrop,
    .ann-panel,
    .ann-page {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   UNSUPPORTED BROWSER BANNER
   Injected by js/browser-support.js only when the browser can't parse the syntax
   blazor.server.js needs (e.g. Safari < 16.4), so everything here must work on old
   browsers: no nesting, color-mix(), :has(), :focus-visible or flex gap. Palette mirrors
   the <noscript> notice in _Layout.cshtml; the button uses --parent-primary (7:1 on white).
   ============================================ */

.unsupported-browser-banner {
    position: relative;
    z-index: 1000002;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top));
    background: hsl(48 96% 89%);
    color: hsl(40 60% 20%);
    border-bottom: 3px solid hsl(45 100% 60%);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

.unsupported-browser-banner:focus {
    outline: none;
}

.unsupported-browser-icon {
    flex-shrink: 0;
    margin-right: 0.75rem;
    font-size: 1.5rem;
}

.unsupported-browser-content {
    flex: 1 1 16rem;
    min-width: 0;
    margin-right: 1rem;
}

.unsupported-browser-banner p {
    margin: 0;
}

.unsupported-browser-title {
    font-size: 1.0625rem;
    font-weight: 800;
}

.unsupported-browser-text {
    font-size: 0.9375rem;
}

.unsupported-browser-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0.5rem 0;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background: hsl(220 90% 40%);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.unsupported-browser-link:hover,
.unsupported-browser-link:focus {
    background: hsl(220 90% 32%);
    color: #fff;
    text-decoration: none;
}

.unsupported-browser-link:focus {
    outline: 3px solid hsl(40 60% 20%);
    outline-offset: 2px;
}

[data-theme="dark"] .unsupported-browser-banner {
    background: hsl(40 45% 14%);
    color: hsl(48 96% 89%);
}

[data-theme="dark"] .unsupported-browser-link:focus {
    outline-color: hsl(48 96% 89%);
}