/*
   student.css - Americana Heritage Theme (Maximum)
   Intent: Bold vintage Americana with patriotic presence, certificate treatments,
   and dramatic heritage elements. 1940s WPA + National Archives grandeur.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
    /* ═══════════════════════════════════════════════════════════════════════
       AMERICANA HERITAGE COLOR PALETTE
       ═══════════════════════════════════════════════════════════════════════ */

    /* Stars & Stripes Core */
    --color-navy: #0A1628;
    --color-navy-medium: #1A2742;
    --color-navy-light: #2D3B54;

    --color-heritage-red: #BF0A30;
    --color-heritage-red-dark: #8B0A22;
    --color-heritage-red-wash: #FFF0F3;

    --color-heritage-white: #FFFFFF;
    --color-off-white: #FAFAFA;

    /* Gold & Brass (Seals, Highlights) */
    --color-gold: #D4AF37;
    --color-brass: #C4A35A;
    --color-gold-dark: #B8962E;
    --color-gold-wash: #FFFDF5;

    /* Parchment (Aged Document) */
    --color-parchment: #F5EDD8;
    --color-parchment-dark: #E8DCC8;
    --color-cream: #FAF8F0;

    /* Status Colors */
    --color-liberty-green: #1B5E3F;
    --color-liberty-green-wash: #E8F5EC;

    /* Legacy Mappings (for compatibility) */
    --color-dossier-base: var(--color-modern-bg);
    --color-dossier-surface: var(--color-modern-surface);
    --color-dossier-inset: #F1F5F9;

    --color-ink-primary: var(--color-navy);
    --color-ink-secondary: #3D4A5C;
    --color-ink-muted: #6B7280;

    --color-stamp-gold: var(--color-gold);
    --color-stamp-gold-bg: var(--color-gold-wash);

    --color-stamp-green: var(--color-liberty-green);
    --color-stamp-green-bg: var(--color-liberty-green-wash);

    --color-stamp-red: var(--color-heritage-red);
    --color-stamp-red-bg: var(--color-heritage-red-wash);

    --color-archival-gray-border: #E2E8F0;
    --color-archival-gray-hover: #F1F5F9;

    /* ── CitizenPath Component Variables (used by citizen-path.css) ─────────── */
    --color-citizen-blue: #2563EB;
    --color-citizen-blue-dark: #1D4ED8;
    --color-citizen-blue-50: #EFF6FF;
    --color-citizen-text: #1E293B;
    --color-citizen-surface: #FFFFFF;
    --color-citizen-surface-alt: #F7F8FA;
    --color-citizen-border: #E2E8F0;

    /* ── Modern Practice Screen Palette ──────────────────────────────────────── */
    --color-modern-bg: #F7F8FA;
    --color-modern-surface: #FFFFFF;
    --color-modern-border: #E2E8F0;
    --color-modern-accent: #2563EB;
    --color-modern-accent-hover: #1D4ED8;
    --color-modern-text: #1E293B;
    --color-modern-text-secondary: #64748B;
    --color-modern-success: #10B981;
    --color-modern-success-bg: #ECFDF5;
    --color-modern-danger: #EF4444;
    --color-modern-danger-bg: #FEF2F2;
    --color-modern-indigo: #6366F1;

    /* ── N-400 Wizard Theme ─────────────────────────────────────────────────── */
    --n400-navy: #1e3a5f;
    --n400-navy-light: #2d4a6f;
    --n400-gold: #c7923e;
    --n400-gold-light: rgba(199, 146, 62, 0.1);
    --n400-cream: #faf8f5;
    --n400-success: #059669;
    --n400-success-light: #d1fae5;
    --n400-shadow: 0 2px 8px rgba(30, 58, 95, 0.08);
    --n400-shadow-hover: 0 4px 16px rgba(30, 58, 95, 0.12);
    --n400-shadow-active: 0 0 0 3px rgba(199, 146, 62, 0.2);

    /* ═══════════════════════════════════════════════════════════════════════
       TYPOGRAPHY
       ═══════════════════════════════════════════════════════════════════════ */

    --font-display: 'Playfair Display', serif;
    --font-official: 'Source Serif 4', serif;
    --font-ui: 'DM Sans', 'Inter', sans-serif;
    --font-kinetic-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-kinetic-body: 'Manrope', 'Inter', sans-serif;
    --color-kinetic-primary: #0050d4;
    --color-kinetic-primary-dim: #0046bb;
    --color-kinetic-primary-soft: rgba(0, 80, 212, 0.12);
    --color-kinetic-primary-surface: #eef3ff;
    --color-kinetic-secondary: #006947;
    --color-kinetic-secondary-soft: rgba(0, 105, 71, 0.12);
    --color-kinetic-secondary-surface: #eaf7f0;
    --color-kinetic-background: #f8f5ff;
    --color-kinetic-surface-low: #f1efff;
    --color-kinetic-surface-lowest: #ffffff;
    --color-kinetic-on-surface: #282b51;
    --color-kinetic-on-surface-muted: rgba(40, 43, 81, 0.66);
    --color-kinetic-ghost: rgba(40, 43, 81, 0.12);
    --shadow-kinetic-float: 0 24px 48px rgba(40, 43, 81, 0.06);

    /* ═══════════════════════════════════════════════════════════════════════
       SPACING
       ═══════════════════════════════════════════════════════════════════════ */

    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-12: 48px;
}

/* Base Body Application */
body.student-theme {
    background-color: var(--color-dossier-base);
    color: var(--color-ink-primary);
    font-family: var(--font-ui);
}

.student-theme h1,
.student-theme h2,
.student-theme h3,
.student-theme .official-text {
    font-family: var(--font-display);
    color: var(--color-ink-primary);
    letter-spacing: 0.5px;
}

/* Dossier Layout Base */
.dossier-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-6);
}

/* Dossier Header - Heritage Style */
.dossier-header {
    margin-bottom: var(--spacing-8);
    border-bottom: 2px solid var(--color-modern-accent);
    padding-bottom: var(--spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

.dossier-header::after {
    content: '';
    display: none;
}

.dossier-header h1 {
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--color-modern-text);
}

.dossier-header .dossier-subtitle {
    font-size: 12px;
    color: var(--color-modern-accent);
    font-family: var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: var(--spacing-2);
}

/* Dossier Cards / Surfaces - Borders Only, No Drop Shadows */
.dossier-surface {
    background-color: var(--color-modern-surface);
    border: 1px solid var(--color-modern-border);
    border-radius: 12px;
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* The Stamp Badge (Heritage Seal Element) */
.stamp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    transform: none;
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
}

.stamp-badge::before {
    content: '';
    display: none;
}

.stamp-badge.complete {
    color: var(--color-modern-success);
    border-color: var(--color-modern-success);
    background: var(--color-modern-success-bg);
}

.stamp-badge.complete::before {
    display: none;
}

.stamp-badge.pending {
    color: var(--color-modern-accent);
    border-color: var(--color-modern-accent);
    background: rgba(37, 99, 235, 0.06);
}

.stamp-badge.pending::before {
    display: none;
}

.stamp-badge.error {
    color: var(--color-modern-danger);
    border-color: var(--color-modern-danger);
    background: var(--color-modern-danger-bg);
}

.stamp-badge.error::before {
    display: none;
}

/* The Journey Map (Vertical Timeline) */
.journey-map {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
}

.journey-map::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 23px;
    /* 48px/2 - 1px */
    width: 2px;
    background-color: var(--color-archival-gray-border);
    z-index: 0;
}

.journey-checkpoint {
    position: relative;
    z-index: 1;
    display: flex;
    margin-bottom: var(--spacing-8);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.journey-checkpoint.active,
.journey-checkpoint.completed {
    opacity: 1;
}

.journey-checkpoint-icon {
    flex-shrink: 0;
    margin-right: var(--spacing-6);
    background-color: var(--color-dossier-surface);
    /* Hide the line behind the stamp */
}

.journey-checkpoint-content {
    flex-grow: 1;
    padding-top: var(--spacing-2);
}

.journey-checkpoint-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink-primary);
    margin-bottom: var(--spacing-1);
}

.journey-checkpoint-desc {
    font-size: 14px;
    color: var(--color-ink-secondary);
    line-height: 1.5;
}

/* Dossier Form Controls */
.dossier-input-group {
    margin-bottom: var(--spacing-4);
}

.dossier-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-ink-primary);
    margin-bottom: var(--spacing-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.dossier-input {
    width: 100%;
    padding: 10px 14px;
    font-family: var(--font-ui);
    font-size: 15px;
    color: var(--color-ink-primary);
    background-color: var(--color-dossier-inset);
    border: 1px solid var(--color-archival-gray-border);
    border-radius: 4px;
    transition: border-color 0.15s ease;
}

.dossier-input:focus {
    outline: none;
    border-color: var(--color-ink-primary);
    background-color: var(--color-dossier-surface);
}

.dossier-input[readonly],
.dossier-input:disabled {
    color: var(--color-ink-secondary);
    background-color: var(--color-dossier-inset);
    border-style: dashed;
}

/* Dossier Button - Heritage Style */
.dossier-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 12px 24px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.dossier-btn-primary {
    background-color: var(--color-modern-accent);
    color: white;
    border: none;
}

.dossier-btn-primary:hover {
    background-color: var(--color-modern-accent-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.dossier-btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.dossier-btn-secondary {
    background-color: var(--color-modern-surface);
    color: var(--color-modern-accent);
    border: 1.5px solid var(--color-modern-accent);
}

.dossier-btn-secondary:hover {
    background-color: rgba(37, 99, 235, 0.06);
    border-color: var(--color-modern-accent-hover);
    transform: translateY(-2px);
}

/* Accordion Specific for N-400 */
.dossier-accordion-item {
    border: 1px solid var(--color-archival-gray-border);
    border-radius: 4px;
    margin-bottom: var(--spacing-3);
    background-color: var(--color-dossier-surface);
    overflow: hidden;
}

.dossier-accordion-header {
    padding: var(--spacing-4) var(--spacing-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--color-dossier-surface);
    user-select: none;
    transition: background-color 0.15s ease;
}

.dossier-accordion-header:hover {
    background-color: var(--color-archival-gray-hover);
}

.dossier-accordion-title {
    font-family: var(--font-official);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-ink-primary);
}

.dossier-accordion-content {
    padding: 0 var(--spacing-6) var(--spacing-6) var(--spacing-6);
    display: none;
    border-top: 1px dashed var(--color-archival-gray-border);
}

.dossier-accordion-item.open .dossier-accordion-content {
    display: block;
    padding-top: var(--spacing-6);
}

.dossier-accordion-icon {
    color: var(--color-ink-secondary);
    transition: transform 0.2s ease;
}

.dossier-accordion-item.open .dossier-accordion-icon {
    transform: rotate(180deg);
}

/* Overall progress custom */
.official-progress-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: var(--color-dossier-inset);
    border: 1px solid var(--color-archival-gray-border);
    border-radius: 4px;
    margin-bottom: var(--spacing-8);
}

.official-progress-bar-wrap {
    flex-grow: 1;
    height: 6px;
    background-color: var(--color-archival-gray-border);
    border-radius: 3px;
    overflow: hidden;
}

.official-progress-fill {
    height: 100%;
    background-color: var(--color-ink-primary);
    width: 0%;
    transition: width 0.5s ease;
}

.official-progress-text {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-primary);
    min-width: 40px;
    text-align: right;
}

/* ── Civics Test: Interview Transcript - Heritage Style ────────────────── */

.transcript-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-6);
    background: radial-gradient(circle at top left, rgba(123, 156, 255, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 245, 255, 0.96) 100%);
    border-radius: 28px;
}

.transcript-entry {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    animation: heritage-fade-in 0.3s ease-out;
    align-items: flex-start;
}

.transcript-entry.student {
    flex-direction: row-reverse;
}

/* Chat Avatars */
.chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 14px 24px rgba(40, 43, 81, 0.12);
}

.chat-avatar .material-icons-outlined {
    font-size: 20px;
}

.chat-avatar-ai {
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #5c90ff 100%);
    color: white;
}

.chat-avatar-student {
    background: linear-gradient(145deg, #815100 0%, #c4871c 100%);
    color: white;
}

/* Content wrapper */
.chat-content-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 80%;
}

.transcript-entry.student .chat-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Message header: sender + timestamp */
.chat-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.chat-sender-name {
    font-family: var(--font-kinetic-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-kinetic-on-surface);
}

.chat-timestamp {
    font-size: 12px;
    color: var(--color-kinetic-on-surface-muted);
    font-family: var(--font-kinetic-body);
}

.transcript-entry-label {
    flex-shrink: 0;
    width: 90px;
    padding-top: 4px;
    font-family: var(--font-kinetic-body);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.52);
    text-align: right;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
}

.transcript-entry-label::before {
    content: '';
    display: none;
}

.transcript-entry-body {
    padding: 16px;
    background: linear-gradient(180deg, rgba(241, 239, 255, 0.88) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-radius: 22px;
    border-top-left-radius: 0;
    border-left: none;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
    line-height: 1.6;
}

.transcript-entry.examiner .transcript-entry-body {
    background: linear-gradient(180deg, rgba(241, 239, 255, 0.9) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-left: none;
}

.transcript-entry.student .transcript-entry-body {
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #2c73ff 100%);
    border-radius: 22px;
    border-top-right-radius: 0;
    border-left: none;
    box-shadow: 0 18px 28px rgba(0, 80, 212, 0.22);
}

.transcript-entry.student .transcript-entry-body .transcript-entry-text {
    color: white;
}

.transcript-entry.correct .transcript-entry-body {
    background: linear-gradient(180deg, rgba(234, 247, 240, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 105, 71, 0.12);
}

.transcript-entry.review .transcript-entry-body {
    background: linear-gradient(180deg, rgba(255, 248, 233, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: inset 0 0 0 1px rgba(129, 81, 0, 0.12);
}

.transcript-entry.incorrect .transcript-entry-body {
    background: linear-gradient(180deg, rgba(255, 240, 243, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: inset 0 0 0 1px rgba(191, 10, 48, 0.14);
}

.transcript-entry.error .transcript-entry-body {
    background: linear-gradient(180deg, rgba(255, 240, 243, 0.98) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: inset 0 0 0 1px rgba(191, 10, 48, 0.14);
}

.transcript-entry-text {
    font-family: var(--font-kinetic-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-kinetic-on-surface);
}

.transcript-entry-question {
    font-family: var(--font-kinetic-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-kinetic-on-surface);
}

.transcript-status-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-2);
    padding: 3px 10px;
    border-radius: 12px;
}

.transcript-status-label::before {
    font-size: 10px;
}

.transcript-status-label.correct {
    color: var(--color-kinetic-secondary);
    background-color: var(--color-kinetic-secondary-surface);
}

.transcript-status-label.correct::before {
    content: '✓';
}

.transcript-status-label.review {
    color: var(--color-gold-dark);
    background-color: rgba(212, 175, 55, 0.1);
}

.transcript-status-label.incorrect {
    color: var(--color-heritage-red);
    background-color: rgba(191, 10, 48, 0.1);
}

.transcript-status-label.incorrect::before {
    content: '✗';
}

.transcript-correct-answer {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-kinetic-primary-surface);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.14);
    border-radius: 16px;
    font-size: 13px;
    color: var(--color-kinetic-on-surface);
}

.transcript-correct-answer strong {
    font-weight: 700;
    color: var(--color-kinetic-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENHANCED FEEDBACK DISPLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.feedback-entry-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.feedback-status-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    width: fit-content;
}

.feedback-status-banner.correct {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
}

.feedback-status-banner.incorrect {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
}

.feedback-status-icon {
    font-size: 18px;
}

.feedback-status-text {
    font-size: 12px;
    letter-spacing: 0.5px;
}

.feedback-message {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-ink-primary);
}

.feedback-correct-answer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 10px;
    border-left: 4px solid #F59E0B;
}

.feedback-correct-answer > .material-icons-outlined {
    color: #D97706;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.feedback-correct-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feedback-correct-label {
    font-size: 11px;
    font-weight: 600;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feedback-correct-text {
    font-size: 14px;
    font-weight: 500;
    color: #78350F;
}

.transcript-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--spacing-2) 0;
}

.transcript-typing span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-ink-muted);
    animation: transcript-pulse 1.2s infinite;
}

.transcript-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.transcript-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes transcript-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* ── Civics Test: Audio Player Panel - Heritage Style ──────────────────── */

.audio-player-panel {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-6);
    background-color: var(--color-modern-surface);
    border-bottom: 1px solid var(--color-modern-border);
    position: relative;
}

.audio-player-panel::before {
    content: '';
    display: none;
}

.audio-control-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--color-modern-accent);
    background-color: var(--color-modern-surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--color-modern-accent);
    margin-left: 0;
}

.audio-control-btn:hover {
    background-color: var(--color-modern-accent);
    color: white;
    transform: scale(1.05);
}

.audio-control-btn .material-icons-outlined {
    font-size: 20px;
}

.audio-progress-container {
    flex: 1;
    height: 4px;
    background-color: #E2E8F0;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.audio-progress-fill {
    height: 100%;
    background: var(--color-modern-accent);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.audio-timestamp {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-modern-text-secondary);
    min-width: 32px;
}

.audio-timestamp-sep {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--color-ink-muted);
}

/* ── Civics Test: Stamp Score Panel ─────────────────────────────────── */

.stamp-score-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-6);
    gap: var(--spacing-4);
}

.stamp-score-badge {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--color-archival-gray-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-5deg);
    transition: border-color 0.4s ease, background-color 0.4s ease;
    background-color: var(--color-dossier-surface);
}

.stamp-score-badge.pending {
    border-color: var(--color-stamp-gold);
    background-color: var(--color-stamp-gold-bg);
}

.stamp-score-badge.passing {
    border-color: var(--color-stamp-green);
    background-color: var(--color-stamp-green-bg);
}

.stamp-score-badge.failing {
    border-color: var(--color-stamp-red);
    background-color: var(--color-stamp-red-bg);
}

.stamp-score-fraction {
    font-family: var(--font-official);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-ink-primary);
    transition: color 0.4s ease;
}

.stamp-score-badge.passing .stamp-score-fraction {
    color: var(--color-stamp-green);
}

.stamp-score-badge.failing .stamp-score-fraction {
    color: var(--color-stamp-red);
}

.stamp-score-label {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-top: 2px;
    transition: color 0.4s ease;
}

.stamp-score-badge.passing .stamp-score-label {
    color: var(--color-stamp-green);
}

.stamp-score-badge.failing .stamp-score-label {
    color: var(--color-stamp-red);
}

/* ── SVG Score Ring - Heritage Style ────────────────────────────────── */

.score-ring-container {
    position: relative;
    width: 130px;
    height: 130px;
}

.score-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-ring-bg {
    fill: none;
    stroke: #E2E8F0;
    stroke-width: 8;
}

.score-ring-progress {
    fill: none;
    stroke: var(--color-modern-accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease, stroke 0.4s ease;
    filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.3));
}

.score-ring-progress.passing {
    stroke: var(--color-modern-success);
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.3));
}

.score-ring-progress.failing {
    stroke: var(--color-modern-danger);
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.3));
}

.score-ring-progress.pending {
    stroke: var(--color-gold);
}

.score-ring-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.score-ring-fraction {
    font-family: var(--font-ui);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-modern-text);
    transition: color 0.4s ease;
}

.score-ring-fraction.passing {
    color: var(--color-modern-success);
}

.score-ring-fraction.failing {
    color: var(--color-modern-danger);
}

.score-ring-pct {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-ink-secondary);
}

/* ── Section Categories List ─────────────────────────────────────────── */

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed var(--color-archival-gray-border);
    font-family: var(--font-ui);
    font-size: 13px;
}

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

.category-item-name {
    color: var(--color-ink-secondary);
}

.category-item-count {
    font-size: 11px;
    color: var(--color-ink-muted);
}

.stamp-score-meta {
    text-align: center;
}

.stamp-score-meta-line {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-ink-secondary);
    line-height: 1.5;
}

.stamp-score-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 2px;
    border: 2px solid var(--color-parchment-dark);
    color: var(--color-ink-muted);
    background-color: var(--color-cream);
    transition: all 0.3s ease;
}

.stamp-score-status::before {
    font-size: 10px;
}

.stamp-score-status.passing {
    border-color: var(--color-liberty-green);
    color: var(--color-liberty-green);
    background-color: var(--color-liberty-green-wash);
}

.stamp-score-status.passing::before {
    content: '✓';
}

.stamp-score-status.failing {
    border-color: var(--color-heritage-red);
    color: var(--color-heritage-red);
    background-color: var(--color-heritage-red-wash);
}

.stamp-score-status.failing::before {
    content: '✗';
}

.stamp-score-progress-wrap {
    width: 100%;
    height: 4px;
    background-color: var(--color-archival-gray-border);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.stamp-score-progress-fill {
    height: 100%;
    background-color: var(--color-ink-primary);
    width: 0%;
    transition: width 0.4s ease;
    border-radius: 2px;
}

.stamp-score-threshold {
    position: absolute;
    left: 60%;
    top: -3px;
    width: 1px;
    height: 10px;
    background-color: var(--color-ink-muted);
}

/* ── Civics Test: Section List Row ──────────────────────────────────── */

.dossier-section-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 4px;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.12);
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.dossier-section-row:hover {
    transform: translateY(-1px);
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 28px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.dossier-section-row::after {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(123, 156, 255, 0.16);
    color: rgba(40, 43, 81, 0.62);
    font-family: var(--font-kinetic-display);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    content: 'Module';
}

.dossier-section-row:nth-child(1)::after {
    background: rgba(105, 246, 184, 0.48);
    color: #006947;
    content: 'Ready';
}

.dossier-section-row:nth-child(2)::after {
    background: rgba(123, 156, 255, 0.16);
    color: #5565b7;
    content: 'Up Next';
}

.dossier-section-row:nth-child(3)::after {
    background: rgba(129, 81, 0, 0.12);
    color: #815100;
    content: 'Final Step';
}

.dossier-section-number {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ffffff 0%, #eef0ff 100%);
    box-shadow: 0 10px 22px rgba(40, 43, 81, 0.08),
    inset 0 0 0 1px rgba(167, 170, 215, 0.18);
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 700;
    color: rgba(40, 43, 81, 0.72);
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.dossier-section-number.active {
    background: linear-gradient(145deg, #0050d4 0%, #256dff 100%);
    box-shadow: 0 18px 30px rgba(0, 80, 212, 0.24);
    color: #ffffff;
}

.dossier-section-number.complete {
    background: linear-gradient(145deg, rgba(105, 246, 184, 0.72) 0%, rgba(105, 246, 184, 0.42) 100%);
    color: #006947;
}

.dossier-section-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-family: var(--font-kinetic-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #282b51;
}

.dossier-section-count {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-family: var(--font-kinetic-body);
    font-size: 0.88rem;
    color: rgba(40, 43, 81, 0.58);
}

/* ── Civics Test: Journey Stepper - Heritage Style ───────────────────── */

.civics-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
}

.civics-stepper::before {
    content: '';
    display: none;
}

.civics-stepper::after {
    content: '';
    display: none;
}

.civics-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.civics-stepper-stamp {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #eef0ff 100%);
    box-shadow: 0 18px 30px rgba(40, 43, 81, 0.08),
    inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    font-family: var(--font-kinetic-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(40, 43, 81, 0.68);
    transition: all 0.3s ease;
}

.civics-stepper-stamp.active {
    background: linear-gradient(145deg, #0050d4 0%, #256dff 100%);
    color: #ffffff;
    box-shadow: 0 22px 34px rgba(0, 80, 212, 0.28);
    transform: translateY(-2px);
}

.civics-stepper-stamp.complete {
    background: linear-gradient(145deg, rgba(105, 246, 184, 0.7) 0%, rgba(105, 246, 184, 0.42) 100%);
    color: #006947;
    box-shadow: 0 16px 28px rgba(0, 105, 71, 0.12);
}

.civics-stepper-label {
    font-family: var(--font-kinetic-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(40, 43, 81, 0.62);
    max-width: 120px;
    text-align: center;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.civics-stepper-label.active {
    color: #282b51;
}

.civics-stepper-line {
    flex: 1;
    height: 8px;
    background: rgba(123, 156, 255, 0.18);
    max-width: 220px;
    min-width: 80px;
    margin: 27px 18px 0;
    border-radius: 999px;
    opacity: 1;
}

.civics-stepper-line.complete {
    background: linear-gradient(90deg, #69f6b8 0%, #006947 100%);
}

@media (max-width: 960px) {
    .civics-welcome-container {
        max-width: 760px;
    }

    .civics-welcome-surface {
        padding: 22px;
        border-radius: 28px;
    }

    .civics-welcome-insights {
        grid-template-columns: 1fr;
    }

    .civics-stepper-line {
        max-width: 120px;
        min-width: 42px;
        margin: 27px 12px 0;
    }
}

@media (max-width: 720px) {
    #welcome-screen {
        align-items: flex-start;
    }

    .civics-welcome-hero {
        text-align: left;
        margin-bottom: 22px;
    }

    .civics-welcome-summary {
        margin-left: 0;
        margin-right: 0;
    }

    .civics-welcome-stepper-panel {
        overflow-x: auto;
        padding: 10px 4px 4px;
    }

    .civics-stepper {
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
    }

    .civics-welcome-modules {
        padding: 14px;
        border-radius: 22px;
    }

    .dossier-section-row {
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        padding: 16px;
    }

    .dossier-section-row::after {
        grid-column: 2;
        grid-row: 3;
        justify-self: start;
        margin-top: 6px;
    }

    .dossier-section-number {
        width: 48px;
        height: 48px;
        font-size: 0.95rem;
    }

    .dossier-section-name {
        font-size: 0.98rem;
    }

    .civics-begin-btn {
        width: 100%;
        letter-spacing: 0.13em;
    }
}

/* ── Civics Test: Hint Card ─────────────────────────────────────────── */

.dossier-hint-card {
    border-left: 3px solid var(--color-stamp-gold);
    padding: var(--spacing-4) var(--spacing-6);
    background-color: var(--color-stamp-gold-bg);
    border-right: 1px solid var(--color-archival-gray-border);
    border-top: 1px solid var(--color-archival-gray-border);
    border-bottom: 1px solid var(--color-archival-gray-border);
    border-radius: 0 4px 4px 0;
    margin-bottom: var(--spacing-6);
}

.dossier-hint-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-stamp-gold);
    margin-bottom: var(--spacing-1);
}

.dossier-hint-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-ink-secondary);
}

/* ── Civics Test: Difficulty Badge - Heritage Style ────────────────────── */

.difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 2px;
    border: 2px solid;
}

.difficulty-badge::before {
    content: '★';
    font-size: 8px;
}

.difficulty-badge.easy {
    color: var(--color-liberty-green);
    border-color: var(--color-liberty-green);
    background-color: var(--color-liberty-green-wash);
}

.difficulty-badge.easy::before {
    content: '★';
}

.difficulty-badge.medium {
    color: var(--color-gold-dark);
    border-color: var(--color-gold);
    background-color: var(--color-gold-wash);
}

.difficulty-badge.medium::before {
    content: '★★';
}

.difficulty-badge.hard {
    color: var(--color-heritage-red);
    border-color: var(--color-heritage-red);
    background-color: var(--color-heritage-red-wash);
}

.difficulty-badge.hard::before {
    content: '★★★';
}

/* ── Civics Test: Results Stats Row - Heritage Style ──────────────────── */

.results-stats-row {
    display: flex;
    border: 3px solid var(--color-navy);
    border-radius: 4px;
    overflow: hidden;
    margin: var(--spacing-6) 0;
    background-color: var(--color-cream);
}

.results-stat-cell {
    flex: 1;
    padding: var(--spacing-6);
    text-align: center;
    border-right: 2px solid var(--color-gold);
    position: relative;
}

.results-stat-cell:last-child {
    border-right: none;
}

.results-stat-cell::before {
    content: '★';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-gold);
    font-size: 10px;
    opacity: 0.5;
}

.results-stat-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gold-dark);
    margin-bottom: var(--spacing-2);
}

.results-stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    color: var(--color-navy);
}

/* ── Civics Test: Result stamp (large) - Heritage Seal ─────────────────── */

.result-stamp {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-7deg);
    margin: 0;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.result-stamp::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px dashed;
    border-radius: 50%;
    opacity: 0.4;
}

.result-stamp.passed {
    border-color: var(--color-liberty-green);
    background: radial-gradient(circle, var(--color-liberty-green-wash) 50%, var(--color-cream) 100%);
}

.result-stamp.passed::before {
    border-color: var(--color-liberty-green);
}

.result-stamp.failed {
    border-color: var(--color-heritage-red);
    background: radial-gradient(circle, var(--color-heritage-red-wash) 50%, var(--color-cream) 100%);
}

.result-stamp.failed::before {
    border-color: var(--color-heritage-red);
}

.result-stamp-icon {
    font-size: 36px;
}

.result-stamp.passed .result-stamp-icon {
    color: var(--color-liberty-green);
}

.result-stamp.failed .result-stamp-icon {
    color: var(--color-heritage-red);
}

/* ── Civics Test: Answer Review Accordion ───────────────────────────── */

.review-accordion-item {
    border: 1px solid var(--color-archival-gray-border);
    border-radius: 4px;
    margin-bottom: var(--spacing-3);
    background-color: var(--color-dossier-surface);
    overflow: hidden;
}

.review-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.review-accordion-header:hover {
    background-color: var(--color-archival-gray-hover);
}

.review-accordion-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.review-accordion-body {
    display: none;
    padding: var(--spacing-4);
    border-top: 1px dashed var(--color-archival-gray-border);
    background-color: var(--color-dossier-base);
}

.review-accordion-item.open .review-accordion-body {
    display: block;
}

.review-field-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-1);
}

.review-field-value {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-ink-primary);
}

/* ── Civics Test: Question header bar - Heritage Style ────────────────── */

.question-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-6);
    border-bottom: 1px solid var(--color-modern-border);
    background-color: var(--color-modern-surface);
    color: var(--color-modern-text);
}

.question-counter-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--color-modern-accent);
    padding: 4px 14px;
    border: 1.5px solid var(--color-modern-accent);
    border-radius: 20px;
    background-color: rgba(37, 99, 235, 0.06);
}

.question-meta-bar .autoplay-toggle-label {
    color: var(--color-modern-text-secondary);
}

.question-meta-bar #question-category {
    color: var(--color-modern-text-secondary);
}

.question-body-area {
    padding: var(--spacing-8) var(--spacing-6);
    border-bottom: 1px solid var(--color-modern-border);
    background-color: var(--color-modern-surface);
    position: relative;
}

.question-body-area::before {
    content: '';
    display: none;
}

.question-body-area::after {
    content: '';
    display: none;
}

.question-text-display {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-modern-text);
    text-align: center;
}

.question-category-label {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--color-modern-text-secondary);
    margin-bottom: var(--spacing-3);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
}

/* ── Civics Test: Answer Input Area - Heritage Style ───────────────────── */

.answer-input-area {
    padding: var(--spacing-4) var(--spacing-6);
    border-top: 1px solid var(--color-modern-border);
    background-color: var(--color-modern-surface);
    position: relative;
}

.answer-input-area::before {
    content: '';
    display: none;
}

.answer-input-hint {
    font-family: var(--font-ui);
    font-size: 11px;
    color: var(--color-modern-text-secondary);
    margin-top: var(--spacing-2);
    font-style: italic;
}

.answer-input-area .dossier-input {
    border: 1.5px solid var(--color-modern-border);
    background-color: var(--color-modern-surface);
}

.answer-input-area .dossier-input:focus {
    border-color: var(--color-modern-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── Autoplay toggle ─────────────────────────────────────────────────── */

.autoplay-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-ink-secondary);
    cursor: pointer;
}

/* ── Civics Test: Question Image ─────────────────────────────────────── */

.question-image-container {
    padding: 0 var(--spacing-6) var(--spacing-4);
    text-align: center;
    background-color: var(--color-dossier-surface);
}

.question-image {
    max-width: 100%;
    max-height: 280px;
    border-radius: 8px;
    border: 1px solid var(--color-archival-gray-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    object-fit: contain;
}

/* ── Civics Test: Enhanced Loading Feedback ──────────────────────────── */

.transcript-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--spacing-2) 0;
}

.transcript-typing-message {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-ink-secondary);
    font-style: italic;
}

.transcript-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.transcript-typing-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-ink-muted);
    animation: transcript-pulse 1.2s infinite;
}

.transcript-typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.transcript-typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes transcript-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-2px);
    }
}

/* ── Evaluation Loading Card ───────────────────────────────────────────── */

.evaluation-loading-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    animation: evaluation-pulse 2s ease-in-out infinite;
}

.evaluation-loading-card.fade-out {
    animation: evaluation-fade-out 0.3s ease-out forwards;
}

.evaluation-loading-icon {
    font-size: 20px;
    color: white;
    animation: evaluation-icon-pulse 2s ease-in-out infinite;
}

.evaluation-loading-text {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.evaluation-loading-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.evaluation-loading-dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: white;
    animation: evaluation-dot-bounce 1.2s infinite;
}

.evaluation-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.evaluation-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes evaluation-pulse {
    0%, 100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

@keyframes evaluation-icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes evaluation-dot-bounce {
    0%, 100% {
        opacity: 0.5;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@keyframes evaluation-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ── Civics Test: Microphone Button ──────────────────────────────────── */

.mic-button {
    padding: 10px 14px !important;
    transition: all 0.2s ease;
}

.mic-button.recording {
    background-color: var(--color-stamp-red) !important;
    border-color: var(--color-stamp-red) !important;
    color: white !important;
    animation: mic-pulse 1s infinite;
}

@keyframes mic-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(163, 59, 59, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(163, 59, 59, 0);
    }
}

.recording-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-stamp-red);
}

.recording-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-stamp-red);
    animation: recording-blink 1s infinite;
}

@keyframes recording-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMERICANA HERITAGE THEME - DECORATIVE ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Parchment Texture Background ──────────────────────────────────────────── */

.parchment-texture {
    background-color: var(--color-parchment);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

/* ── Certificate Frame (Triple Border) ─────────────────────────────────────── */

.certificate-frame {
    position: relative;
    border: 4px solid var(--color-navy);
    padding: 32px;
    background: var(--color-parchment);
}

.certificate-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px solid var(--color-gold);
    pointer-events: none;
}

.certificate-frame::after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px dashed var(--color-heritage-red);
    opacity: 0.4;
    pointer-events: none;
}

/* ── Corner Stars ──────────────────────────────────────────────────────────── */

.corner-stars {
    position: relative;
}

.corner-stars::before,
.corner-stars::after {
    position: absolute;
    color: var(--color-gold);
    font-size: 18px;
    line-height: 1;
}

.corner-stars::before {
    content: '★';
    top: 4px;
    left: 8px;
}

.corner-stars::after {
    content: '★';
    top: 4px;
    right: 8px;
}

/* ── Liberty Stars Row (13 stars) ──────────────────────────────────────────── */

.liberty-stars {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    color: var(--color-gold);
    font-size: 14px;
    letter-spacing: 8px;
}

.liberty-stars::before {
    content: '★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★';
}

/* ── Star Separator ────────────────────────────────────────────────────────── */

.star-separator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-gold);
}

.star-separator::before,
.star-separator::after {
    content: '★';
    font-size: 10px;
}

/* ── Patriotic Stripe Accent ───────────────────────────────────────────────── */

.stripe-accent {
    height: 8px;
    background: repeating-linear-gradient(90deg,
    var(--color-heritage-red) 0px,
    var(--color-heritage-red) 20px,
    var(--color-heritage-white) 20px,
    var(--color-heritage-white) 40px);
    border-top: 2px solid var(--color-navy);
    border-bottom: 2px solid var(--color-navy);
}

/* ── Heritage Seal Stamp ───────────────────────────────────────────────────── */

.heritage-seal {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: rotate(-7deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

.heritage-seal::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dashed;
    border-radius: 50%;
    opacity: 0.5;
}

.heritage-seal.passed {
    border-color: var(--color-liberty-green);
    color: var(--color-liberty-green);
    background: radial-gradient(circle, var(--color-liberty-green-wash) 60%, var(--color-cream) 100%);
}

.heritage-seal.passed::before {
    border-color: var(--color-liberty-green);
}

.heritage-seal.failed {
    border-color: var(--color-heritage-red);
    color: var(--color-heritage-red);
    background: radial-gradient(circle, var(--color-heritage-red-wash) 60%, var(--color-cream) 100%);
}

.heritage-seal.failed::before {
    border-color: var(--color-heritage-red);
}

.heritage-seal-text {
    font-size: 11px;
    margin-top: 2px;
}

/* ── Eagle Seal Icon ───────────────────────────────────────────────────────── */

.eagle-icon {
    width: 48px;
    height: 48px;
    color: var(--color-gold);
}

.eagle-icon-sm {
    width: 24px;
    height: 24px;
    color: var(--color-gold);
}

/* ── Heritage Banner Header ────────────────────────────────────────────────── */

.heritage-banner {
    background-color: var(--color-navy);
    color: var(--color-gold);
    padding: var(--spacing-6) var(--spacing-8);
    text-align: center;
    position: relative;
}

.heritage-banner h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-gold);
}

.heritage-banner-subtitle {
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--spacing-2);
}

/* ── Heritage Button Styles ────────────────────────────────────────────────── */

.heritage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: 14px 28px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.heritage-btn-primary {
    background-color: var(--color-modern-accent);
    color: white;
    border: none;
}

.heritage-btn-primary:hover {
    background-color: var(--color-modern-accent-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.heritage-btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.heritage-btn-secondary {
    background-color: var(--color-modern-surface);
    color: var(--color-modern-accent);
    border: 1.5px solid var(--color-modern-accent);
}

.heritage-btn-secondary:hover {
    background-color: rgba(37, 99, 235, 0.06);
    border-color: var(--color-modern-accent-hover);
    transform: translateY(-2px);
}

/* ── Heritage Typography ───────────────────────────────────────────────────── */

.heritage-heading {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--color-navy);
    letter-spacing: 1px;
}

.heritage-heading-lg {
    font-size: 32px;
}

.heritage-heading-md {
    font-size: 24px;
}

.heritage-heading-sm {
    font-size: 18px;
}

.heritage-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* ── Gold Divider ──────────────────────────────────────────────────────────── */

.gold-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,
    transparent,
    var(--color-gold) 20%,
    var(--color-gold) 80%,
    transparent);
}

.gold-divider-h {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right,
    transparent,
    var(--color-gold) 20%,
    var(--color-gold) 80%,
    transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMERICANA HERITAGE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Star Twinkle Animation ────────────────────────────────────────────────── */

@keyframes star-twinkle {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.star-twinkle {
    animation: star-twinkle 2s ease-in-out infinite;
}

/* ── Seal Stamp Animation ──────────────────────────────────────────────────── */

@keyframes seal-stamp {
    0% {
        transform: rotate(-7deg) scale(1.3);
        opacity: 0;
    }

    60% {
        transform: rotate(-7deg) scale(0.95);
        opacity: 1;
    }

    100% {
        transform: rotate(-7deg) scale(1);
        opacity: 1;
    }
}

.seal-stamp-animate {
    animation: seal-stamp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Gold Shimmer Animation ────────────────────────────────────────────────── */

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

    100% {
        background-position: 200% center;
    }
}

.gold-shimmer {
    background: linear-gradient(90deg,
    var(--color-gold) 0%,
    #f0d78c 25%,
    var(--color-gold) 50%,
    #f0d78c 75%,
    var(--color-gold) 100%);
    background-size: 200% 100%;
    animation: gold-shimmer 3s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
}

/* ── Confetti Star Burst ───────────────────────────────────────────────────── */

@keyframes star-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.confetti-star {
    position: absolute;
    font-size: 16px;
    animation: star-burst 0.8s ease-out forwards;
    pointer-events: none;
}

/* ── Page Fade In ──────────────────────────────────────────────────────────── */

@keyframes heritage-fade-in {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.heritage-fade-in {
    animation: heritage-fade-in 0.4s ease-out forwards;
}

.heritage-fade-in-delay-1 {
    animation-delay: 0.1s;
}

.heritage-fade-in-delay-2 {
    animation-delay: 0.2s;
}

.heritage-fade-in-delay-3 {
    animation-delay: 0.3s;
}

.heritage-fade-in-delay-4 {
    animation-delay: 0.4s;
}

/* ── Score Ring Glow ───────────────────────────────────────────────────────── */

@keyframes ring-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 4px currentColor);
    }

    50% {
        filter: drop-shadow(0 0 12px currentColor);
    }
}

.ring-glow {
    animation: ring-glow 2s ease-in-out infinite;
}

/* ── Button Lift Hover ─────────────────────────────────────────────────────── */

.btn-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn-lift:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST LAYOUT - WELCOME SCREEN CENTERING
   ═══════════════════════════════════════════════════════════════════════════ */

#welcome-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 7vw, 88px) 0 clamp(36px, 6vw, 72px);
    background: radial-gradient(circle at top left, rgba(123, 156, 255, 0.18), transparent 32%),
    radial-gradient(circle at right 18% bottom 8%, rgba(105, 246, 184, 0.14), transparent 28%),
    linear-gradient(180deg, #f8f5ff 0%, #f3f0ff 58%, #f8f5ff 100%);
}

#welcome-screen .dossier-container {
    width: 100%;
}

.civics-welcome-container {
    max-width: 1080px;
    position: relative;
    z-index: 1;
}

.civics-welcome-hero {
    max-width: 720px;
    margin: 0 auto clamp(24px, 4vw, 40px);
    text-align: center;
}

.civics-welcome-kicker {
    margin: 0 0 10px;
    color: rgba(40, 43, 81, 0.62);
    font-family: var(--font-kinetic-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.civics-welcome-title {
    margin: 0;
    color: #282b51;
    font-family: var(--font-kinetic-display);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.civics-welcome-summary {
    max-width: 640px;
    margin: 16px auto 0;
    color: rgba(40, 43, 81, 0.72);
    font-family: var(--font-kinetic-body);
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.7;
}

.civics-welcome-surface {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(24px, 4vw, 38px);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 28px 60px rgba(40, 43, 81, 0.08),
    inset 0 0 0 1px rgba(167, 170, 215, 0.18);
    overflow: hidden;
}

.civics-welcome-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(14px);
    pointer-events: none;
    opacity: 0.7;
}

.civics-welcome-orb-primary {
    top: -68px;
    right: -48px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(123, 156, 255, 0.22) 0%, rgba(123, 156, 255, 0) 72%);
}

.civics-welcome-orb-secondary {
    left: -54px;
    bottom: -86px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(105, 246, 184, 0.18) 0%, rgba(105, 246, 184, 0) 70%);
}

.civics-welcome-stepper-panel {
    position: relative;
    padding: 14px clamp(10px, 3vw, 28px) 0;
}

.civics-welcome-modules {
    margin-top: clamp(18px, 3vw, 28px);
    padding: clamp(16px, 3vw, 20px);
    border-radius: 28px;
    background: #f1efff;
}

.civics-welcome-intro {
    padding: 6px 8px 2px;
}

.civics-welcome-intro p {
    margin: 0;
    color: rgba(40, 43, 81, 0.76);
    font-family: var(--font-kinetic-body);
    font-size: 0.95rem;
    line-height: 1.7;
}

.civics-section-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.civics-welcome-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: clamp(24px, 3.5vw, 32px);
}

.civics-begin-btn {
    width: min(100%, 420px);
    justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    border-radius: 18px;
    border: none;
    background: linear-gradient(135deg, #0050d4 0%, #256dff 100%);
    box-shadow: 0 20px 32px rgba(0, 80, 212, 0.24);
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.civics-begin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 38px rgba(0, 80, 212, 0.28);
}

.civics-begin-btn:active {
    transform: scale(0.98);
}

.civics-welcome-duration {
    margin: 0;
    color: rgba(40, 43, 81, 0.6);
    font-family: var(--font-kinetic-body);
    font-size: 0.9rem;
    font-weight: 600;
}

.civics-welcome-insights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    max-width: 880px;
    margin: 28px auto 0;
}

.civics-welcome-insight-card {
    min-height: 168px;
    padding: 24px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    backdrop-filter: blur(20px);
}

.civics-welcome-insight-card h2 {
    margin: 16px 0 8px;
    color: #282b51;
    font-family: var(--font-kinetic-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.civics-welcome-insight-card p {
    margin: 0;
    color: rgba(40, 43, 81, 0.7);
    font-family: var(--font-kinetic-body);
    font-size: 0.92rem;
    line-height: 1.65;
}

.civics-welcome-insight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 20px;
}

.civics-welcome-insight-icon-tip {
    color: #e09a10;
}

.civics-welcome-insight-icon-ai {
    color: #0050d4;
}

.civics-welcome-insight-icon-history {
    color: #006947;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - SESSION ACTIVE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shared desktop shell sizing */
:root {
    --practice-shell-max: 1920px;
    --practice-shell-inline: clamp(16px, 2vw, 32px);
    --practice-shell-gap: clamp(20px, 2vw, 32px);
}

/* ── Session Status Bar ──────────────────────────────────────────────────── */

.session-status-bar,
.evaluation-tabs,
.score-section-horizontal,
.practice-content-wrapper {
    box-sizing: border-box;
    width: min(calc(100% - (2 * var(--practice-shell-inline))), var(--practice-shell-max));
    margin-left: auto;
    margin-right: auto;
}

.session-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 0;
    padding: 16px 24px 8px;
    background: radial-gradient(circle at left top, rgba(105, 246, 184, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(241, 239, 255, 0.88) 0%, rgba(255, 255, 255, 0.78) 100%);
}

.session-status-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.session-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: rgba(105, 246, 184, 0.18);
    box-shadow: inset 0 0 0 1px rgba(0, 105, 71, 0.16);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-kinetic-secondary);
}

.session-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-kinetic-secondary);
    animation: pulse-dot 2s infinite;
    box-shadow: 0 0 0 6px rgba(0, 105, 71, 0.12);
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.session-title {
    font-family: var(--font-kinetic-display);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 800;
    color: var(--color-kinetic-on-surface);
    margin: 0;
    letter-spacing: -0.04em;
}

.session-status-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-small {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #63a2ff 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-kinetic-display);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 14px 24px rgba(0, 80, 212, 0.18);
}

/* ── Evaluation Tabs ─────────────────────────────────────────────────────── */

.evaluation-tabs {
    display: flex;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 24px 18px;
    background: transparent;
}

.eval-tab {
    padding: 12px 18px;
    font-family: var(--font-kinetic-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-kinetic-on-surface-muted);
    text-decoration: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.eval-tab:hover {
    color: var(--color-kinetic-on-surface);
    background-color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.eval-tab.active {
    color: var(--color-kinetic-primary);
    background: linear-gradient(145deg, rgba(0, 80, 212, 0.12), rgba(0, 80, 212, 0.2));
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - HORIZONTAL SCORE SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.score-section-horizontal {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0 24px;
    background: transparent;
}

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

.score-question-info h2 {
    font-family: var(--font-kinetic-display);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-kinetic-on-surface);
    margin: 0;
    letter-spacing: -0.03em;
}

.score-category-subtitle {
    font-family: var(--font-kinetic-body);
    font-size: 13px;
    color: var(--color-kinetic-on-surface-muted);
    margin: 4px 0 0;
}

.passing-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.08);
}

.passing-badge.passing {
    background-color: rgba(105, 246, 184, 0.18);
    color: var(--color-kinetic-secondary);
}

.passing-badge.passing::before {
    content: "✓";
    font-size: 14px;
}

.passing-badge.failing {
    background-color: rgba(191, 10, 48, 0.1);
    color: var(--color-modern-danger);
}

.passing-badge.unknown {
    background-color: rgba(241, 239, 255, 0.92);
    color: var(--color-kinetic-on-surface-muted);
}

.score-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.score-card {
    background: linear-gradient(180deg, rgba(241, 239, 255, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
    border-radius: 24px;
    padding: 18px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
}

.score-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-kinetic-float);
}

.score-card-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.52);
    margin-bottom: 6px;
}

.score-card-value {
    font-family: var(--font-kinetic-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-kinetic-on-surface);
}

.score-card-value .score-correct {
    color: var(--color-kinetic-primary);
    font-size: 22px;
    font-family: var(--font-kinetic-display);
}

.score-card-progress .progress-bar-container {
    position: relative;
    height: 8px;
    background-color: rgba(40, 43, 81, 0.08);
    border-radius: 999px;
    margin-top: 16px;
    overflow: visible;
}

.score-card-progress .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-kinetic-secondary) 0%, #30a46c 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.score-card-progress .score-card-label {
    color: var(--color-kinetic-secondary);
}

.score-card-progress .score-card-value {
    color: var(--color-kinetic-secondary);
}

.score-card-progress .progress-threshold-marker {
    position: absolute;
    left: 60%;
    top: -3px;
    width: 2px;
    height: 12px;
    background-color: rgba(40, 43, 81, 0.32);
    border-radius: 1px;
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST — STUDENT GUIDANCE: SCORING RUBRIC DISCLOSURE
   Inline "How am I scored?" panel shown on the in-session and results screens.
   ═══════════════════════════════════════════════════════════════════════════ */

.civics-rubric {
    margin: 14px 8px 4px;
    background-color: var(--color-kinetic-surface-low);
    border-radius: 16px;
    overflow: hidden;
}

.civics-rubric--results {
    margin: 0 0 var(--spacing-5, 20px);
}

.civics-rubric-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--font-kinetic-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-kinetic-on-surface);
    text-align: left;
    transition: background-color 0.18s ease;
}

.civics-rubric-toggle:hover,
.civics-rubric-toggle:focus-visible {
    background-color: rgba(0, 80, 212, 0.06);
    outline: none;
}

.civics-rubric-toggle .material-symbols-outlined:first-child {
    font-size: 20px;
    color: var(--color-kinetic-primary);
}

.civics-rubric-toggle-label {
    flex: 1;
}

.civics-rubric-chevron {
    font-size: 22px;
    color: var(--color-kinetic-on-surface-muted);
    transition: transform 0.2s ease;
}

.civics-rubric-toggle[aria-expanded="true"] .civics-rubric-chevron {
    transform: rotate(180deg);
}

.civics-rubric-body {
    padding: 4px 18px 18px;
}

.civics-rubric-pass {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 12px;
    background-color: var(--color-kinetic-secondary-surface, #eaf7f0);
    border-radius: 12px;
    font-family: var(--font-kinetic-body);
    font-size: 13px;
    color: var(--color-kinetic-on-surface);
}

.civics-rubric-pass .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-kinetic-secondary);
}

.civics-rubric-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.civics-rubric-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--font-kinetic-body);
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-kinetic-on-surface);
}

.civics-rubric-list li > div {
    flex: 1;
}

.civics-rubric-list strong {
    font-weight: 700;
    color: var(--color-kinetic-on-surface);
}

.civics-rubric-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    background-color: var(--color-kinetic-on-surface-muted);
}

.civics-rubric-list li[data-tier="correct"] .civics-rubric-dot {
    background-color: var(--color-stamp-green);
}

.civics-rubric-list li[data-tier="mostly"] .civics-rubric-dot {
    background-color: var(--color-kinetic-secondary);
}

.civics-rubric-list li[data-tier="partial"] .civics-rubric-dot {
    background-color: var(--color-stamp-gold);
}

.civics-rubric-list li[data-tier="incorrect"] .civics-rubric-dot {
    background-color: var(--color-stamp-red);
}

@media (max-width: 640px) {
    .civics-rubric {
        margin: 12px 0 4px;
    }

    .civics-rubric-toggle-label {
        font-size: 12px;
    }
}

/* Welcome screen — help button alignment in the hero */
.civics-welcome-hero-actions {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

/* Results screen — group help button + result stamp horizontally */
.dossier-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Labeled help chip — used on welcome + results headers where the bare ?
   icon felt isolated. Reads as an action, not decoration. */
.civics-help-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--color-kinetic-primary-soft, rgba(0, 80, 212, 0.12));
    color: var(--color-kinetic-primary, #0050d4);
    font-family: var(--font-kinetic-body, "Manrope", sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}

.civics-help-chip:hover,
.civics-help-chip:focus-visible {
    background-color: rgba(0, 80, 212, 0.18);
    box-shadow: 0 6px 18px rgba(0, 80, 212, 0.18);
    outline: none;
    transform: translateY(-1px);
}

.civics-help-chip .material-symbols-outlined {
    font-size: 18px;
}

/* Mobile — hide the label, keep the icon, save horizontal space. */
@media (max-width: 640px) {
    .civics-help-chip {
        padding: 8px;
        gap: 0;
    }

    .civics-help-chip .civics-help-chip-label {
        display: none;
    }
}

/* In-session status bar — give the help button breathing room beside the avatar
   and force its tooltip downward (sticky topbar clips an upward tooltip). */
.session-status-right {
    gap: 12px;
}

.session-status-right .handwriting-help-button {
    width: 36px;
    height: 36px;
}

.session-status-right .handwriting-help-button .material-symbols-outlined {
    font-size: 1.05rem;
}

/* Constrain the onboarding card so it lines up with the rest of the page on
   wide viewports (the page container max-width). */
[data-onboarding-id="civics-test"] {
    max-width: min(1200px, 92vw);
    margin-left: auto;
    margin-right: auto;
}

/* Onboarding step grid — already 3 cols on wide; reflow on tablet/mobile. */
@media (max-width: 960px) {
    [data-onboarding-id="civics-test"] .handwriting-onboarding-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    [data-onboarding-id="civics-test"] .handwriting-onboarding-steps {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - TWO-COLUMN VISUAL REFERENCE LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main Wrapper: Adaptive two-column shell */
.practice-content-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--practice-shell-gap);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 24px;
    min-height: 0;
}

/* When the left panel is present, expand to the approved adaptive 40/60 split */
.practice-content-wrapper.has-image {
    grid-template-columns: minmax(360px, 0.95fr) minmax(560px, 1.45fr);
}

/* ── Left Panel: Visual Reference ──────────────────────────────────────────── */

.visual-reference-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.visual-reference-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 245, 255, 0.98) 100%);
    border-radius: 28px;
    overflow: hidden;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: var(--shadow-kinetic-float), inset 0 0 0 1px rgba(40, 43, 81, 0.06);
}

.visual-reference-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 16px 18px 14px;
    background: rgba(241, 239, 255, 0.94);
}

.visual-reference-icon {
    font-size: 24px;
    color: #815100;
}

.visual-reference-header-text {
    flex: 1;
}

.visual-reference-title {
    font-family: var(--font-kinetic-body);
    font-size: 12px;
    font-weight: 800;
    color: #815100;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.visual-reference-subtitle {
    font-family: var(--font-kinetic-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-kinetic-on-surface);
    margin: 4px 0 0 0;
}

.visual-reference-image-wrapper {
    display: none;
    padding: 8px 12px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(241, 239, 255, 0) 100%);
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: clamp(300px, 38vh, 440px);
    max-height: clamp(320px, 42vh, 480px);
}

.visual-reference-panel.has-visual-media .visual-reference-image-wrapper {
    display: flex;
}

.visual-reference-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    object-fit: contain;
    object-position: center;
}

.visual-reference-caption {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-dossier-inset);
    border-top: 1px solid var(--color-archival-gray-border);
    font-size: 12px;
    color: var(--color-ink-secondary);
    line-height: 1.5;
}

.visual-reference-caption .material-icons-outlined {
    font-size: 16px;
    color: var(--color-stamp-gold);
    flex-shrink: 0;
    margin-top: 1px;
}

.visual-reference-controls {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 22px;
    padding: 14px 16px;
    display: flex;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
    margin-top: auto;
    flex: 0 0 auto;
}

/* ── Visual Reference: Content Sections (Translations) ─────────────────────── */

.visual-ref-content-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.visual-ref-content-section {
    padding: 12px 14px 14px;
    background-color: rgba(241, 239, 255, 0.68);
    border-radius: 18px;
    box-shadow: inset 4px 0 0 0 rgba(0, 80, 212, 0.9);
    flex: 0 0 auto;
}

.visual-ref-content-label {
    display: flex;
    align-items: center;
    font-family: var(--font-kinetic-body);
    font-size: 11px;
    font-weight: 800;
    color: var(--color-kinetic-primary);
    letter-spacing: 0.16em;
    margin-bottom: var(--spacing-2);
    text-transform: uppercase;
}

.visual-ref-content-text {
    font-family: var(--font-kinetic-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-kinetic-on-surface);
}

.visual-ref-content-text.translated {
    font-style: normal;
    color: var(--color-ink-primary);
}

/* Audio Section in Visual Reference */
.visual-ref-audio-section {
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(238, 243, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.12);
    flex: 0 0 auto;
}

.visual-ref-audio-label {
    font-family: var(--font-kinetic-body);
    font-size: 11px;
    font-weight: 800;
    color: var(--color-kinetic-primary);
    letter-spacing: 0.16em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.visual-ref-audio-players {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.visual-ref-audio-player {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, 0.74);
    border-radius: 16px;
    transition: background-color 0.2s ease;
}

.visual-ref-audio-player.playing {
    background-color: rgba(0, 80, 212, 0.1);
}

.visual-ref-audio-lang {
    font-family: var(--font-kinetic-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-kinetic-primary);
    min-width: 80px;
}

.visual-ref-audio-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #2c73ff 100%);
    color: white;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.visual-ref-audio-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 20px rgba(0, 80, 212, 0.24);
}

.visual-ref-audio-btn .material-icons-outlined {
    font-size: 22px;
}

/* Responsive adjustments for content sections */
@media (max-width: 1200px) {
    .visual-ref-content-container {
        padding: var(--spacing-3);
    }
}

@media (max-width: 768px) {
    .visual-ref-audio-players {
        gap: var(--spacing-1);
    }

    .visual-ref-audio-player {
        padding: var(--spacing-2);
    }
}

/* ── Right Panel: Chat ─────────────────────────────────────────────────────── */

.chat-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    height: 100%;
}

/* Adjust chat container when inside two-column layout */
.practice-content-wrapper .chat-main-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    flex: 1;
    min-height: 0;
}

/* Hide right panel auto-play when image panel is visible */
.practice-content-wrapper.has-image #input-options-row-main .autoplay-toggle-wrapper {
    display: none;
}

/* ── Responsive: Tablet and below ──────────────────────────────────────────── */

@media (max-width: 1024px) {
    .practice-content-wrapper {
        width: min(calc(100% - (2 * var(--practice-shell-inline))), 800px);
        grid-template-columns: minmax(0, 1fr);
    }

    .practice-content-wrapper.has-image {
        grid-template-columns: minmax(0, 1fr);
    }

    .visual-reference-panel {
        position: relative;
        height: auto;
    }

    .visual-reference-image-wrapper {
        min-height: clamp(220px, 40vw, 300px);
        max-height: none;
        padding: var(--spacing-3);
    }

    .visual-reference-image {
        max-height: 280px;
    }
}

@media (max-width: 768px) {
    .practice-content-wrapper {
        width: min(calc(100% - (2 * var(--practice-shell-inline))), 100%);
        padding: 0 var(--spacing-3);
        gap: var(--spacing-4);
    }

    .visual-reference-panel {
        margin-bottom: var(--spacing-2);
    }

    .visual-reference-header {
        padding: var(--spacing-3);
    }

    .visual-reference-image-wrapper {
        padding: var(--spacing-3);
    }

    .visual-reference-image {
        max-height: 200px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - CHAT MAIN CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.chat-main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 auto;
    padding: 18px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 245, 255, 0.98) 100%);
    border-radius: 28px;
    box-shadow: var(--shadow-kinetic-float), inset 0 0 0 1px rgba(40, 43, 81, 0.06);
}

.session-timestamp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--spacing-4);
    font-size: 12px;
    color: var(--color-kinetic-on-surface-muted);
    font-family: var(--font-kinetic-body);
}

.session-timestamp .material-icons-outlined {
    font-size: 14px;
}

.session-timestamp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.08);
    border-radius: 999px;
    font-size: 12px;
    color: var(--color-kinetic-on-surface-muted);
}

.chat-conversation-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 16px;
    min-height: 0;
    background-color: transparent;
}

@media (min-width: 1025px) {
    #practice-screen {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 88px);
        min-height: calc(100vh - 88px);
        overflow: hidden;
    }

    .score-section-horizontal {
        flex: 0 0 auto;
    }

    .practice-content-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        padding-bottom: 16px;
        overflow: hidden;
    }

    .visual-reference-card {
        min-height: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - INLINE HINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.hint-entry .transcript-entry-body {
    background-color: #E3F2FD !important;
    border-left-color: #2196F3 !important;
}

.inline-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
}

.inline-hint .hint-icon {
    color: #1976D2;
    font-size: 18px;
    flex-shrink: 0;
}

.inline-hint .hint-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1976D2;
    margin-bottom: 4px;
}

.inline-hint .hint-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-navy);
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - ANSWER INPUT AREA
   ═══════════════════════════════════════════════════════════════════════════ */

.answer-input-container-new {
    padding: var(--spacing-4);
    background: rgba(241, 239, 255, 0.62);
    border-radius: 24px;
    margin-top: auto;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
    flex-shrink: 0;
}

.input-row-new {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}

.chat-input-new {
    flex: 1;
    padding: 14px 18px;
    font-size: 15px;
    font-family: var(--font-kinetic-body);
    border: none;
    border-radius: 18px;
    background-color: rgba(255, 255, 255, 0.92);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--color-kinetic-on-surface);
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.08);
}

.chat-input-new::placeholder {
    color: var(--color-kinetic-on-surface-muted);
}

.chat-input-new:focus {
    outline: none;
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.32),
    0 0 0 4px rgba(0, 80, 212, 0.08);
}

.mic-button-new {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-kinetic-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.18);
}

.mic-button-new:hover {
    background-color: var(--color-kinetic-primary);
    color: white;
}

.mic-button-new.recording {
    background-color: #dc2626;
    color: white;
    animation: mic-pulse-new 1s infinite;
}

@keyframes mic-pulse-new {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }

    50% {
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
    }
}

.send-button-new {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #2c73ff 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-button-new:hover {
    background-color: var(--color-kinetic-primary-dim);
    transform: translateY(-1px);
    box-shadow: 0 12px 18px rgba(0, 80, 212, 0.22);
}

.send-button-new:disabled {
    background-color: #CBD5E1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.input-helper-text-new {
    margin-top: var(--spacing-2);
    font-size: 12px;
    color: var(--color-kinetic-on-surface-muted);
    text-align: center;
    font-family: var(--font-kinetic-body);
}

.input-helper-text-new kbd {
    padding: 2px 6px;
    background-color: #F1F5F9;
    border: 1px solid var(--color-modern-border);
    border-radius: 4px;
    font-family: monospace;
    font-size: 11px;
    color: var(--color-modern-text-secondary);
}

/* ── Input Options Row ────────────────────────────────────────────────────── */

.input-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-2);
    padding-top: var(--spacing-2);
}

.input-options-row .input-helper-text-new {
    margin-top: 0;
    text-align: left;
}

/* ── Auto-play Toggle Switch ──────────────────────────────────────────────── */

.autoplay-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    flex-shrink: 0;
}

.autoplay-toggle-label-text {
    font-family: var(--font-kinetic-body);
    font-size: 12px;
    color: var(--color-kinetic-on-surface-muted);
    white-space: nowrap;
}

.toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(40, 43, 81, 0.16);
    transition: 0.2s;
    border-radius: 20px;
}

.toggle-slider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-kinetic-primary);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(16px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px rgba(0, 80, 212, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - AUDIO PLAYER WITH WAVEFORM
   ═══════════════════════════════════════════════════════════════════════════ */

.chat-audio-player {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(238, 243, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-radius: 999px;
    margin-top: var(--spacing-2);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.12);
}

.audio-play-btn-inline {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #2c73ff 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.audio-play-btn-inline:hover {
    background-color: var(--color-kinetic-primary-dim);
}

.audio-play-btn-inline .material-icons-outlined {
    font-size: 20px;
}

.audio-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.audio-waveform .bar {
    width: 4px;
    background-color: var(--color-kinetic-primary);
    border-radius: 2px;
    animation: waveform-animate 1s ease-in-out infinite;
}

.audio-waveform .bar:nth-child(1) {
    height: 8px;
    animation-delay: 0s;
}

.audio-waveform .bar:nth-child(2) {
    height: 16px;
    animation-delay: 0.1s;
}

.audio-waveform .bar:nth-child(3) {
    height: 12px;
    animation-delay: 0.2s;
}

.audio-waveform .bar:nth-child(4) {
    height: 20px;
    animation-delay: 0.3s;
}

.audio-waveform .bar:nth-child(5) {
    height: 10px;
    animation-delay: 0.4s;
}

.audio-waveform.paused .bar {
    animation: none;
}

@keyframes waveform-animate {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.5);
    }
}

.playing-indicator {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-kinetic-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: var(--spacing-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - RECORDING STATUS
   ═══════════════════════════════════════════════════════════════════════════ */

.recording-status-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    color: var(--color-heritage-red);
    font-size: 13px;
    font-weight: 600;
}

.recording-status-new .recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #dc2626;
    animation: recording-blink 1s infinite;
}

@keyframes recording-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - TRANSCRIBING INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.transcribing-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(241, 239, 255, 0.94) 0%, rgba(255, 255, 255, 0.96) 100%);
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.08);
    max-width: fit-content;
}

.transcribing-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #2c73ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: transcribing-pulse 1.5s ease-in-out infinite;
}

.transcribing-icon .material-icons-outlined {
    font-size: 18px;
    color: white;
}

@keyframes transcribing-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);
    }
}

.transcribing-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transcribing-text {
    font-family: var(--font-kinetic-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-kinetic-on-surface);
}

.transcribing-waveform {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
}

.transcribing-waveform .bar {
    width: 3px;
    background-color: var(--color-kinetic-primary);
    border-radius: 2px;
    animation: transcribe-wave 1s ease-in-out infinite;
}

.transcribing-waveform .bar:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}

.transcribing-waveform .bar:nth-child(2) {
    height: 12px;
    animation-delay: 0.1s;
}

.transcribing-waveform .bar:nth-child(3) {
    height: 8px;
    animation-delay: 0.2s;
}

.transcribing-waveform .bar:nth-child(4) {
    height: 14px;
    animation-delay: 0.3s;
}

.transcribing-waveform .bar:nth-child(5) {
    height: 10px;
    animation-delay: 0.4s;
}

.transcribing-waveform .bar:nth-child(6) {
    height: 6px;
    animation-delay: 0.5s;
}

@keyframes transcribe-wave {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.4);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - STUDENT AUDIO PLAYER
   ═══════════════════════════════════════════════════════════════════════════ */

.student-audio-player {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.student-audio-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.95);
    color: #1c5cf2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.student-audio-btn:hover {
    background: white;
    transform: scale(1.05);
}

.student-audio-btn .material-icons-outlined {
    font-size: 16px;
}

.student-audio-waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 18px;
}

.student-audio-waveform .bar {
    width: 3px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    animation: student-wave 0.8s ease-in-out infinite;
}

.student-audio-waveform .bar:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}

.student-audio-waveform .bar:nth-child(2) {
    height: 12px;
    animation-delay: 0.1s;
}

.student-audio-waveform .bar:nth-child(3) {
    height: 8px;
    animation-delay: 0.15s;
}

.student-audio-waveform .bar:nth-child(4) {
    height: 14px;
    animation-delay: 0.2s;
}

.student-audio-waveform .bar:nth-child(5) {
    height: 10px;
    animation-delay: 0.25s;
}

.student-audio-waveform.paused .bar {
    animation: none;
}

@keyframes student-wave {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.5);
    }
}

.student-audio-status {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 50px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIVICS TEST REDESIGN - RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .session-status-bar {
        flex-direction: column;
        gap: var(--spacing-3);
        padding: 18px 16px 10px;
    }

    .session-status-left,
    .session-status-right {
        width: 100%;
        justify-content: center;
    }

    .evaluation-tabs {
        overflow-x: auto;
        padding: 0 16px 16px;
    }

    .eval-tab {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    .score-cards-row {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2);
    }

    .score-card {
        padding: var(--spacing-2);
    }

    .score-card-label {
        font-size: 9px;
    }

    .score-card-value {
        font-size: 13px;
    }

    .score-card-value .score-correct {
        font-size: 16px;
    }

    .score-section-horizontal {
        padding: 0 16px;
    }

    .score-question-info h2 {
        font-size: 14px;
    }

    .chat-main-container {
        padding: var(--spacing-3);
        height: auto;
        margin: var(--spacing-2) var(--spacing-3);
    }

    .input-row-new {
        flex-wrap: wrap;
    }

    .chat-input-new {
        width: 100%;
        order: 1;
    }

    .mic-button-new,
    .send-button-new {
        order: 2;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   N-400 SIDEBAR FORM EDITOR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layout Container */
.n400-editor {
    min-height: calc(100vh - 88px);
    background-color: var(--color-modern-bg);
}

.n400-layout {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
.n400-sidebar {
    width: 280px;
    background-color: var(--color-navy);
    color: white;
    flex-shrink: 0;
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 88px;
    height: calc(100vh - 88px);
    overflow-y: auto;
}

/* Profile Card */
.n400-profile-card {
    padding: var(--spacing-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.n400-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-modern-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--spacing-3);
}

.n400-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

.n400-profile-id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.n400-profile-completion {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--spacing-2);
}

.n400-profile-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

.n400-progress-bar {
    flex: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.n400-progress-fill {
    height: 100%;
    background-color: var(--color-modern-success);
    width: 0%;
    transition: width 0.5s ease;
}

.n400-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-modern-success);
    min-width: 40px;
    text-align: right;
}

/* Sections Remaining */
.n400-sections-remaining {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--spacing-2);
}

/* Section Navigation */
.n400-section-nav {
    flex: 1;
    padding: var(--spacing-4) 0;
    overflow-y: auto;
}

.n400-section-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-6);
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    color: rgba(255, 255, 255, 0.7);
}

.n400-section-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
}

.n400-section-item:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.08);
}

.n400-section-item.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--color-modern-accent);
    color: white;
}

.n400-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.n400-section-item.complete .n400-section-icon {
    background-color: var(--color-modern-success);
}

.n400-section-icon .material-icons-outlined {
    font-size: 18px;
}

.n400-section-info {
    flex: 1;
    min-width: 0;
}

.n400-section-name {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile Menu Button */
.n400-mobile-menu-btn {
    display: none;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-navy);
    color: white;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
}

.n400-mobile-menu-btn .material-icons-outlined {
    font-size: 20px;
}

/* Sidebar Overlay (Mobile) */
.n400-sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

.n400-sidebar-overlay.hidden {
    display: none;
}

/* ── Main Content Area ─────────────────────────────────────────────────────── */
.n400-content {
    flex: 1;
    padding: var(--spacing-8);
    background-color: white;
    min-height: calc(100vh - 88px);
}

.n400-content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--color-modern-border);
}

.n400-content-header-left {
    flex: 1;
}

.n400-content-title {
    font-family: var(--font-ui);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-modern-text);
    margin: 0;
}

.n400-content-desc {
    font-size: 14px;
    color: var(--color-modern-text-secondary);
    margin-top: var(--spacing-2);
    line-height: 1.5;
}

.n400-content-header-right {
    display: flex;
    gap: var(--spacing-3);
    flex-shrink: 0;
}

/* Unsaved Changes Banner */
.n400-unsaved-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background-color: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 8px;
    margin-bottom: var(--spacing-6);
    font-size: 14px;
    color: #92400E;
}

.n400-unsaved-banner .material-icons-outlined {
    font-size: 18px;
    color: #F59E0B;
}

.n400-unsaved-banner.hidden {
    display: none;
}

/* ── Field Groups ──────────────────────────────────────────────────────────── */
.n400-fields-container {
    max-width: 900px;
}

.n400-field-group {
    background-color: var(--color-modern-surface);
    border: 1px solid var(--color-modern-border);
    border-radius: 12px;
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.n400-field-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}

.n400-field-group-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-modern-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0;
    padding-left: var(--spacing-4);
    border-left: 4px solid var(--color-modern-accent);
}

.n400-field-group-title .material-icons-outlined {
    font-size: 20px;
    color: var(--color-modern-accent);
}

.n400-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.n400-field-row:last-child {
    margin-bottom: 0;
}

.n400-field-full {
    grid-column: 1 / -1;
}

/* Toggle Switch for Boolean Fields */
.n400-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) 0;
}

.n400-toggle-label {
    font-size: 14px;
    color: var(--color-modern-text);
}

/* ── Info Box ──────────────────────────────────────────────────────────────── */
.n400-info-box {
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    margin-bottom: var(--spacing-4);
}

.n400-info-box .material-icons-outlined {
    color: var(--color-modern-accent);
    font-size: 20px;
    flex-shrink: 0;
}

.n400-info-box-content {
    font-size: 13px;
    color: #1E40AF;
    line-height: 1.5;
}

/* ── Masked Input (SSN) ────────────────────────────────────────────────────── */
.n400-ssn-wrapper {
    position: relative;
}

.n400-ssn-input {
    letter-spacing: 2px;
    font-family: monospace;
    padding-left: 36px;
}

.n400-ssn-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-modern-text-secondary);
}

/* ── Field Component Classes (Phase 1) ─────────────────────────────────────── */

.n400-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    line-height: 1.4;
}

.n400-field-label .n400-required {
    color: var(--color-modern-accent);
    font-weight: 600;
}

.n400-field-hint {
    font-size: 12px;
    color: var(--color-modern-text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

.n400-field-row {
    margin-bottom: 16px;
}

.n400-field-error-msg {
    font-size: 12px;
    color: var(--color-modern-danger);
    margin-top: 4px;
    display: none;
    align-items: center;
    gap: 4px;
}

.n400-field-row.has-error .n400-field-error-msg {
    display: flex;
}

.n400-field-row.has-error .form-input-student {
    border-color: var(--color-modern-danger);
}

.n400-field-row.has-error .n400-yesno-pill {
    border-color: var(--color-modern-danger);
}

/* ── Address Component ─────────────────────────────────────────────────────── */

.n400-address-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--color-modern-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--color-modern-surface);
}

.n400-address-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.n400-address-city {
    grid-column: 1 / -1;
}

/* ══════════════════════════════════════════════════════════════════════════════
   N-400 WIZARD-STYLE REPEATER COMPONENT
   Step-by-step entry wizard with progress indicators and completion states
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Entries Container ─────────────────────────────────────────────────────── */
.n400-repeater-entries {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Individual Entry Card ─────────────────────────────────────────────────── */
.n400-repeater-entry {
    background: #ffffff;
    border: 1px solid var(--color-modern-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--n400-shadow);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    animation: n400SlideInUp 0.3s ease-out;
}

.n400-repeater-entry.is-active {
    border-color: var(--n400-gold);
    box-shadow: var(--n400-shadow-active);
}

.n400-repeater-entry.is-complete {
    border-left: 4px solid var(--n400-success);
}

.n400-repeater-entry.is-incomplete {
    border-left: 4px solid var(--n400-gold);
}

/* ── Entry Header (Always Visible) ─────────────────────────────────────────── */
.n400-entry-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--n400-cream);
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.n400-entry-header:hover {
    background: #f0ebe3;
}

.n400-entry-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--n400-navy);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.n400-entry-number .material-icons-outlined {
    font-size: 18px;
    color: var(--n400-gold);
}

.n400-entry-summary {
    flex: 1;
    margin-left: 16px;
    font-size: 14px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.n400-entry-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    margin-right: 12px;
    flex-shrink: 0;
}

.n400-entry-status.complete {
    background: var(--n400-success-light);
    color: var(--n400-success);
}

.n400-entry-status.in-progress {
    background: var(--n400-gold-light);
    color: var(--n400-gold);
}

.n400-entry-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #64748b;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n400-entry-toggle.is-expanded {
    transform: rotate(180deg);
}

.n400-entry-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #94a3b8;
    border-radius: 50%;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}

.n400-entry-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ── Step Indicator ────────────────────────────────────────────────────────── */
.n400-step-indicator {
    display: none; /* Hidden by default */
    align-items: center;
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.n400-repeater-entry.is-expanded .n400-step-indicator {
    display: flex;
}

.n400-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.n400-step.is-active {
    color: var(--n400-navy);
    font-weight: 600;
}

.n400-step.is-complete {
    color: var(--n400-success);
}

.n400-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.n400-step.is-active .n400-step-dot {
    background: var(--n400-gold);
    box-shadow: 0 0 0 3px var(--n400-gold-light);
}

.n400-step.is-complete .n400-step-dot {
    background: var(--n400-success);
}

.n400-step-connector {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 12px;
    min-width: 20px;
}

.n400-step-connector.is-complete {
    background: var(--n400-success);
}

/* ── Entry Body (Fields) ──────────────────────────────────────────────────── */
.n400-entry-body {
    padding: 24px;
    display: none;
}

.n400-repeater-entry.is-expanded .n400-entry-body {
    display: block;
    animation: n400FadeIn 0.2s ease;
}

/* Two-column grid for fields */
.n400-step-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.n400-step-fields .full-width {
    grid-column: 1 / -1;
}

/* Step content visibility */
.n400-step-content {
    display: none;
}

.n400-step-content.is-active {
    display: block;
}

/* Field wrapper with validation state */
.n400-field-wrapper {
    position: relative;
}

.n400-field-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.n400-field-wrapper.is-valid label::after {
    content: ' ✓';
    color: var(--n400-success);
}

.n400-field-wrapper.has-error input,
.n400-field-wrapper.has-error select {
    border-color: #ef4444;
}

/* ── Entry Footer (Navigation) ────────────────────────────────────────────── */
.n400-entry-footer {
    display: none; /* Hidden by default */
    justify-content: flex-end;
    align-items: center;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.n400-repeater-entry.is-expanded .n400-entry-footer {
    display: flex;
}

.n400-step-nav {
    display: flex;
    gap: 12px;
}

.n400-step-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.n400-step-btn.secondary {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.n400-step-btn.secondary:hover:not(:disabled) {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

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

.n400-step-btn.primary {
    background: var(--n400-navy);
    border: none;
    color: white;
}

.n400-step-btn.primary:hover {
    background: var(--n400-navy-light);
}

.n400-step-btn.complete {
    background: var(--n400-success);
}

.n400-step-btn.complete:hover {
    background: #047857;
}

/* ── Add Entry Button ──────────────────────────────────────────────────────── */
.n400-repeater-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 16px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: transparent;
    color: var(--n400-navy);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.n400-repeater-add:hover {
    border-color: var(--n400-gold);
    background: var(--n400-gold-light);
    color: var(--n400-gold);
}

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes n400SlideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes n400FadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Legacy Support (keep old class names working) ─────────────────────────── */
.n400-repeater-item {
    border: 1px solid var(--color-modern-border);
    border-radius: 8px;
    padding: 16px 16px 8px;
    margin-bottom: 8px;
    position: relative;
    background: var(--color-modern-surface);
    transition: border-color 0.2s ease;
}

.n400-repeater-subfield {
    margin-bottom: 10px;
}

.n400-repeater-subfield label {
    display: block;
    font-size: 12px;
    color: #374151;
    margin-bottom: 4px;
    font-weight: 500;
}

/* ── Wizard Responsive Styles ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .n400-step-fields {
        grid-template-columns: 1fr;
    }

    .n400-step-indicator {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .n400-step-connector {
        display: none;
    }

    .n400-step {
        padding: 4px 8px;
        background: #f1f5f9;
        border-radius: 16px;
    }

    .n400-entry-summary {
        display: none;
    }

    .n400-entry-header {
        padding: 12px 16px;
    }

    .n400-entry-body {
        padding: 16px;
    }

    .n400-entry-footer {
        flex-direction: column;
        gap: 12px;
        padding: 12px 16px;
    }

    .n400-step-nav {
        width: 100%;
    }

    .n400-step-btn {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
    }

    .n400-repeater-add {
        padding: 14px 16px;
    }
}

/* ── YESNO Pill Buttons (Phase 2) ──────────────────────────────────────────── */

.n400-yesno-group {
    display: flex;
    gap: 8px;
}

.n400-yesno-pill {
    flex: 1;
    padding: 10px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--color-modern-surface);
    border: 1.5px solid var(--color-modern-border);
    color: var(--color-modern-text-secondary);
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: inherit;
    user-select: none;
}

.n400-yesno-pill:hover {
    border-color: var(--color-modern-accent);
    color: var(--color-modern-text);
}

.n400-yesno-pill.selected {
    background: var(--color-modern-accent);
    border-color: var(--color-modern-accent);
    color: white;
    font-weight: 600;
}

.n400-yesno-pill.selected-no {
    background: var(--color-modern-danger);
    border-color: var(--color-modern-danger);
    color: white;
    font-weight: 600;
}

/* ── Sidebar Category Headers & Progress (Phase 3) ─────────────────────────── */

.n400-category-header {
    padding: 12px 24px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 4px;
}

.n400-category-header:first-child {
    margin-top: 0;
}

.n400-section-progress {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: auto;
}

.n400-section-progress svg {
    transform: rotate(-90deg);
    display: block;
}

.n400-section-progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 3;
}

.n400-section-progress-fill {
    fill: none;
    stroke: var(--color-modern-success);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}

.n400-unsaved-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    flex-shrink: 0;
    display: none;
}

.n400-section-item.has-unsaved .n400-unsaved-dot {
    display: block;
}

/* ── Custom Modal (Phase 4) ────────────────────────────────────────────────── */

.n400-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n400-modal-overlay.hidden {
    display: none;
}

.n400-modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: n400ModalIn 0.2s ease;
}

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

.n400-modal-icon {
    font-size: 40px;
    color: var(--color-gold);
    margin-bottom: 12px;
}

.n400-modal-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0 0 8px;
}

.n400-modal-text {
    font-size: 14px;
    color: var(--color-modern-text-secondary);
    margin: 0 0 24px;
    line-height: 1.5;
}

.n400-modal-actions {
    display: flex;
    gap: 12px;
}

.n400-modal-actions button {
    flex: 1;
    padding: 10px 20px;
    font-size: 14px;
}

/* ── Toast Notifications (Phase 4) ─────────────────────────────────────────── */

.n400-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.n400-toast {
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    animation: n400ToastIn 0.3s ease;
    color: white;
    pointer-events: auto;
    min-width: 200px;
}

.n400-toast.success {
    background: var(--color-modern-success);
}

.n400-toast.error {
    background: var(--color-modern-danger);
}

.n400-toast.info {
    background: var(--color-modern-accent);
}

.n400-toast.leaving {
    animation: n400ToastOut 0.3s ease forwards;
}

@keyframes n400ToastIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes n400ToastOut {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/* ── Section Transitions (Phase 5) ─────────────────────────────────────────── */

.n400-fields-container {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.n400-fields-container.transitioning-out {
    opacity: 0;
    transform: translateX(-8px);
}

.n400-fields-container.transitioning-in {
    opacity: 0;
    transform: translateX(8px);
}

.n400-section-complete-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--color-gold-wash);
    color: var(--color-gold-dark);
    font-size: 12px;
    font-weight: 600;
    animation: n400Celebrate 0.5s ease;
}

@keyframes n400Celebrate {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Focus ring for keyboard nav */
.n400-section-item:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: -2px;
}

/* ── Mobile Responsive (Phase 6) ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .n400-layout {
        flex-direction: column;
    }

    .n400-mobile-menu-btn {
        display: flex;
    }

    .n400-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        z-index: 100;
        transition: left 0.3s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .n400-sidebar.open {
        left: 0;
    }

    .n400-sidebar-overlay {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .n400-content {
        padding: var(--spacing-4);
    }

    .n400-content-header {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .n400-content-header-right {
        position: sticky;
        bottom: 0;
        z-index: 10;
        background: white;
        padding: 12px 0;
        border-top: 1px solid var(--color-modern-border);
        width: 100%;
    }

    .n400-content-header-right .btn-citizen {
        width: 100%;
        justify-content: center;
    }

    .n400-content-title {
        font-size: 22px;
    }

    .n400-field-row {
        grid-template-columns: 1fr;
    }

    /* Touch-friendly input sizes */
    .form-input-student {
        min-height: 44px;
        font-size: 16px; /* prevents iOS auto-zoom */
    }

    .n400-yesno-pill {
        min-height: 48px;
    }

    .n400-repeater-remove {
        width: 44px;
        height: 44px;
    }

    .n400-address-row {
        grid-template-columns: 1fr;
    }

    .n400-toast-container {
        left: 16px;
        right: 16px;
        bottom: 80px; /* above sticky save */
    }

    .n400-category-header {
        padding-left: 16px;
    }
}

/* ── Tablet (icon-only sidebar) ────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    .n400-sidebar {
        width: 72px;
        transition: width 0.2s ease;
    }

    .n400-section-info {
        display: none;
    }

    .n400-category-header {
        display: none;
    }

    .n400-profile-card .n400-profile-name,
    .n400-profile-card .n400-profile-id,
    .n400-profile-card .n400-profile-completion,
    .n400-sections-remaining {
        display: none;
    }

    .n400-profile-card {
        padding: 12px;
        text-align: center;
    }

    .n400-section-item {
        justify-content: center;
        padding: 12px;
    }

    .n400-section-progress {
        display: none;
    }

    .n400-unsaved-dot {
        position: absolute;
        top: 4px;
        right: 4px;
    }

    .n400-sidebar:hover {
        width: 280px;
        position: fixed;
        left: 0;
        top: 84px;
        z-index: 100;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
        height: calc(100vh - 88px);
    }

    .n400-sidebar:hover .n400-section-info,
    .n400-sidebar:hover .n400-category-header {
        display: block;
    }

    .n400-sidebar:hover .n400-section-item {
        justify-content: flex-start;
        padding: 10px 24px;
    }

    .n400-sidebar:hover .n400-section-progress {
        display: block;
    }

    .n400-sidebar:hover .n400-profile-card .n400-profile-name,
    .n400-sidebar:hover .n400-profile-card .n400-profile-id,
    .n400-sidebar:hover .n400-profile-card .n400-profile-completion,
    .n400-sidebar:hover .n400-sections-remaining {
        display: block;
    }

    .n400-content {
        margin-left: 72px;
    }
}

/* ── Repeater Redesign (Flat Forms & Rich Cards) ────────────────────────── */

.n400-repeater-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-modern-border, #e2e8f0);
}

.n400-repeater-title-group .n400-repeater-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-modern-text, #1e293b);
    margin: 0;
}

.n400-btn-add-experience {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3b82f6;
    color: white;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.n400-btn-add-experience:hover {
    background: #2563eb;
}

.n400-btn-add-experience .material-icons-outlined {
    font-size: 18px;
}

.n400-repeater-entries {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.n400-repeater-entry {
    background: white;
    border: 1px solid var(--color-modern-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.n400-entry-read-view {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.n400-repeater-entry.is-editing .n400-entry-read-view {
    display: none;
}

.n400-read-view-icon {
    width: 48px;
    height: 48px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    flex-shrink: 0;
}

.n400-read-view-icon .material-icons-outlined {
    font-size: 24px;
}

.n400-read-view-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.n400-read-view-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.n400-read-view-name {
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
}

.n400-read-view-occupation {
    font-size: 14px;
    color: #64748b;
}

.n400-read-view-location {
    font-size: 13px;
    color: #94a3b8;
}

.n400-read-view-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.n400-read-view-dates {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.n400-read-view-duration {
    font-size: 12px;
    color: #94a3b8;
}

.n400-read-view-edit-wrapper {
    padding-left: 20px;
}

.n400-read-view-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
}

.n400-read-view-edit:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* Edit View */
.n400-entry-edit-view {
    display: none;
    background: #f8fafc;
}

.n400-repeater-entry.is-editing .n400-entry-edit-view {
    display: block;
}

.n400-edit-view-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    color: #2563eb;
    font-weight: 600;
    font-size: 15px;
}

.n400-edit-view-header .material-icons-outlined {
    font-size: 18px;
}

.n400-edit-view-form {
    padding: 0 20px 20px;
}

.n400-edit-view-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.n400-btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #ef4444;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
}

.n400-btn-delete:hover {
    background: #fef2f2;
}

.n400-edit-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.n400-btn-cancel {
    background: transparent;
    border: none;
    color: #64748b;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
}

.n400-btn-cancel:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.n400-btn-save {
    background: #3b82f6;
    color: white;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.n400-btn-save:hover {
    background: #2563eb;
}

/* ── Current Employment Redesign ────────────────────────────────────────── */

.n400-2col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Remove default row margin in grid */
.n400-2col-grid > .n400-field-row {
    margin-bottom: 0;
}

/* Full width fields */
.n400-2col-grid > .n400-field-row.full-width {
    grid-column: 1 / -1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   N-400 KINETIC ACADEMIC REFRESH
   Scoped override layer for the redesigned student N-400 module.
   ═══════════════════════════════════════════════════════════════════════════ */

.n400-module {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 88px);
    padding: clamp(18px, 2vw, 28px);
    background: radial-gradient(circle at top left, rgba(123, 156, 255, 0.18), transparent 28%),
    radial-gradient(circle at right 10% top 18%, rgba(105, 246, 184, 0.14), transparent 22%),
    linear-gradient(180deg, var(--color-kinetic-background) 0%, #f4f0ff 100%);
}

.n400-module-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 18% 22%, rgba(0, 80, 212, 0.08), transparent 0, transparent 18%),
    radial-gradient(circle at 84% 12%, rgba(0, 105, 71, 0.08), transparent 0, transparent 16%);
}

.n400-editor {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
    z-index: 1;
}

.n400-layout {
    display: grid;
    grid-template-columns: minmax(292px, 308px) minmax(0, 1fr) 320px;
    gap: clamp(20px, 2vw, 28px);
    align-items: start;
}

.n400-main-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.n400-sidebar {
    position: relative;
    top: 0;
    width: 100%;
    display: block;
    background: transparent;
    color: var(--color-kinetic-on-surface);
    align-self: start;
    min-height: 0;
    height: auto;
    overflow: visible;
}

.n400-support-rail {
    position: sticky;
    top: 24px;
    align-self: start;
}

.n400-sidebar-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 18px 20px 24px 16px;
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(241, 239, 255, 0.96) 0%, rgba(236, 234, 252, 0.92) 100%);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.n400-sidebar-shell::after {
    content: '';
    position: absolute;
    top: 14px;
    right: 7px;
    bottom: 14px;
    width: 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(196, 202, 255, 0.34) 0%, rgba(180, 189, 255, 0.88) 100%);
}

.n400-support-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.n400-profile-card {
    padding: 24px;
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 246, 255, 0.96) 100%);
    box-shadow: 0 24px 48px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.n400-profile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(0, 80, 212, 0.08);
    color: var(--color-kinetic-primary);
    font-family: var(--font-kinetic-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.n400-profile-card-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 22px;
}

.n400-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 86px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4d81ff 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 1.24rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 18px 32px rgba(0, 80, 212, 0.18);
    flex-shrink: 0;
}

.n400-support-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4d81ff 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 18px 32px rgba(0, 80, 212, 0.18);
}

.n400-profile-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.n400-profile-name {
    margin: 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1.34rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    text-wrap: balance;
}

.n400-profile-id {
    color: var(--color-kinetic-on-surface-muted);
    font-family: var(--font-kinetic-body);
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

.n400-profile-progress-head,
.n400-profile-progress {
    margin-top: 22px;
}

.n400-profile-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.n400-profile-progress-label {
    color: rgba(40, 43, 81, 0.58);
    font-family: var(--font-kinetic-body);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.n400-progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(40, 43, 81, 0.1);
    overflow: hidden;
}

.n400-progress-bar-soft {
    background: rgba(255, 255, 255, 0.34);
}

.n400-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-kinetic-secondary) 0%, #20a871 100%);
    transition: width 0.4s ease;
}

.n400-progress-text,
.n400-sections-remaining {
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
}

.n400-progress-text {
    font-size: 0.92rem;
    font-weight: 800;
}

.n400-sections-remaining {
    margin-top: 16px;
    font-size: 0.96rem;
    color: rgba(40, 43, 81, 0.68);
}

.n400-section-nav {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.n400-category-header {
    padding: 0 10px;
    margin: 22px 0 14px;
    color: rgba(123, 137, 175, 0.82);
    font-family: var(--font-kinetic-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.n400-category-header:first-child {
    margin-top: 6px;
}

.n400-section-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 12px;
    border-radius: 24px;
    background: transparent;
    color: rgba(73, 92, 127, 0.92);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.n400-section-item:hover {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.32);
    color: rgba(49, 68, 103, 0.96);
}

.n400-section-item.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 247, 255, 0.98) 100%);
    color: var(--color-kinetic-primary);
    box-shadow: 0 12px 24px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(123, 156, 255, 0.2);
    transform: none;
}

.n400-section-item.active,
.n400-section-item.active .n400-section-name {
    color: var(--color-kinetic-primary);
}

.n400-section-item.complete {
    color: rgba(67, 86, 119, 0.96);
}

.n400-section-item.has-unsaved::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #f4a31f;
}

.n400-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: rgba(70, 92, 126, 0.98);
    flex-shrink: 0;
}

.n400-section-item.active .n400-section-icon {
    color: var(--color-kinetic-primary);
}

.n400-section-item.complete .n400-section-icon {
    background: transparent;
    color: rgba(70, 92, 126, 0.98);
    box-shadow: none;
}

.n400-section-item.active.complete .n400-section-icon {
    color: var(--color-kinetic-primary);
}

.n400-section-icon .material-icons-outlined {
    font-size: 1.72rem;
}

.n400-section-name {
    color: inherit;
    font-family: var(--font-kinetic-body);
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.n400-section-progress {
    display: none;
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    background: rgba(86, 107, 144, 0.96);
    box-shadow: 0 8px 16px rgba(40, 43, 81, 0.1);
}

.n400-section-item.complete .n400-section-progress {
    display: inline-flex;
}

.n400-section-item.active.complete .n400-section-progress {
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #3f7bff 100%);
    box-shadow: 0 10px 18px rgba(0, 80, 212, 0.18);
}

.n400-section-progress-icon {
    font-size: 13px;
    font-variation-settings: 'FILL' 1;
}

.n400-unsaved-dot {
    display: none;
}

.n400-mobile-menu-btn {
    display: none;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 30px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(167, 170, 215, 0.18);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
}

.n400-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(40, 43, 81, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 90;
}

.n400-sidebar-overlay.hidden {
    display: none;
}

.n400-intro-panel,
.n400-content,
.n400-support-card {
    border-radius: 30px;
    box-shadow: 0 24px 48px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.n400-intro-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
    gap: 24px;
    padding: clamp(24px, 3vw, 34px);
    background: radial-gradient(circle at top right, rgba(105, 246, 184, 0.12), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(241, 239, 255, 0.92) 100%);
}

.n400-intro-kicker,
.n400-support-card-header,
.n400-content-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(40, 43, 81, 0.6);
    font-family: var(--font-kinetic-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.n400-intro-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0 14px;
}

.n400-intro-chip,
.n400-content-context-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(40, 43, 81, 0.07);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.8rem;
    font-weight: 700;
}

.n400-intro-chip-success {
    background: rgba(0, 105, 71, 0.1);
    color: var(--color-kinetic-secondary);
}

.n400-content-title {
    margin: 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.n400-content-desc {
    max-width: 64ch;
    margin: 14px 0 0;
    color: rgba(40, 43, 81, 0.72);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    line-height: 1.7;
}

.n400-intro-stats {
    display: grid;
    gap: 14px;
    align-content: start;
}

.n400-intro-stat-card {
    padding: 18px 18px 20px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.n400-intro-stat-label,
.n400-intro-stat-caption {
    display: block;
    font-family: var(--font-kinetic-body);
}

.n400-intro-stat-label {
    color: rgba(40, 43, 81, 0.54);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.n400-intro-stat-value {
    display: block;
    margin-top: 8px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
}

.n400-intro-stat-value-compact {
    font-size: 1.1rem;
    line-height: 1.3;
}

.n400-intro-stat-caption {
    margin-top: 8px;
    color: rgba(40, 43, 81, 0.62);
    font-size: 0.92rem;
    line-height: 1.5;
}

.n400-content {
    padding: clamp(22px, 2.4vw, 30px);
    background: rgba(255, 255, 255, 0.86);
}

.n400-content-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.n400-content-eyebrow {
    margin: 0 0 10px;
}

.n400-content-context {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.n400-content-context-copy {
    color: rgba(40, 43, 81, 0.66);
    font-family: var(--font-kinetic-body);
    font-size: 0.94rem;
    line-height: 1.6;
}

.n400-content-header-right {
    flex-shrink: 0;
}

.n400-save-btn.btn-citizen {
    padding: 14px 22px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #256dff 100%);
    box-shadow: 0 20px 30px rgba(0, 80, 212, 0.24);
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.n400-save-btn.btn-citizen:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 24px 34px rgba(0, 80, 212, 0.28);
}

.n400-save-btn.btn-citizen:active:not(:disabled) {
    transform: scale(0.98);
}

.n400-unsaved-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgba(248, 160, 16, 0.12);
    color: #7b5010;
    box-shadow: inset 0 0 0 1px rgba(129, 81, 0, 0.12);
    font-family: var(--font-kinetic-body);
    font-size: 0.94rem;
    font-weight: 700;
}

.n400-unsaved-banner.hidden {
    display: none;
}

.n400-fields-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: none;
}

.n400-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 72px 24px;
    border-radius: 26px;
    background: rgba(241, 239, 255, 0.86);
    color: rgba(40, 43, 81, 0.66);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    font-weight: 700;
}

.n400-loading-icon {
    animation: spin 1s linear infinite;
}

.n400-field-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding: 22px;
    margin-bottom: 0;
    border-radius: 26px;
    background: rgba(241, 239, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.n400-field-group > .n400-field-group-header,
.n400-field-group > .n400-field-row.full-width,
.n400-field-group > .n400-repeater,
.n400-field-group > .n400-info-box {
    grid-column: 1 / -1;
}

.n400-field-group-header {
    display: flex;
    align-items: center;
    margin: 0;
}

.n400-field-group-title {
    position: relative;
    margin: 0;
    padding-left: 18px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.n400-field-group-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-kinetic-primary) 0%, #6f97ff 100%);
}

.n400-field-row {
    display: block;
    margin: 0;
}

.n400-field-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.5;
}

.n400-field-label .n400-required {
    color: var(--color-kinetic-primary);
}

.n400-field-hint {
    margin-top: 8px;
    color: rgba(40, 43, 81, 0.62);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    line-height: 1.55;
}

.n400-content .form-input-student,
.n400-content textarea.form-input-student,
.n400-content select.form-input-student {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.98rem;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.n400-content textarea.form-input-student {
    min-height: 126px;
    resize: vertical;
}

.n400-content .form-input-student:focus,
.n400-content .form-input-student:focus-visible {
    outline: none;
    background: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.28);
}

.n400-field-row.has-error .form-input-student,
.n400-field-wrapper.has-error input,
.n400-field-wrapper.has-error select {
    box-shadow: inset 0 0 0 2px rgba(179, 27, 37, 0.32);
}

.n400-field-error-msg {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #b31b25;
    font-family: var(--font-kinetic-body);
    font-size: 0.84rem;
    font-weight: 700;
}

.n400-field-row.has-error .n400-field-error-msg {
    display: inline-flex;
}

.n400-info-box {
    display: flex;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(0, 80, 212, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.12);
}

.n400-info-box-content {
    color: var(--color-kinetic-primary);
    font-family: var(--font-kinetic-body);
    font-size: 0.88rem;
    line-height: 1.6;
}

.n400-yesno-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.n400-yesno-pill {
    min-height: 54px;
    border: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.18);
    color: rgba(40, 43, 81, 0.7);
    font-family: var(--font-kinetic-body);
    font-size: 0.94rem;
    font-weight: 700;
}

.n400-yesno-pill:hover {
    color: var(--color-kinetic-on-surface);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.26);
}

.n400-yesno-pill.selected {
    background: rgba(0, 80, 212, 0.08);
    color: var(--color-kinetic-primary);
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.42);
}

.n400-yesno-pill.selected-no {
    background: rgba(40, 43, 81, 0.08);
    color: var(--color-kinetic-on-surface);
    box-shadow: inset 0 0 0 2px rgba(40, 43, 81, 0.22);
}

.n400-repeater {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.n400-repeater-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0;
    border: none;
}

.n400-repeater-label {
    margin: 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.n400-btn-add-experience,
.n400-btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #256dff 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.n400-btn-add-experience {
    padding: 12px 18px;
}

.n400-repeater-entry {
    border: none;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 28px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.n400-entry-read-view {
    padding: 20px;
}

.n400-read-view-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(0, 80, 212, 0.08);
    color: var(--color-kinetic-primary);
}

.n400-read-view-name {
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 800;
}

.n400-read-view-occupation,
.n400-read-view-location,
.n400-read-view-dates,
.n400-read-view-duration {
    color: rgba(40, 43, 81, 0.62);
    font-family: var(--font-kinetic-body);
}

.n400-read-view-edit,
.n400-btn-cancel,
.n400-btn-delete {
    border: none;
    border-radius: 16px;
    background: rgba(40, 43, 81, 0.06);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-weight: 700;
}

.n400-entry-edit-view {
    background: rgba(241, 239, 255, 0.76);
}

.n400-edit-view-header {
    color: var(--color-kinetic-primary);
    font-family: var(--font-kinetic-body);
    font-weight: 800;
}

.n400-edit-view-form {
    padding: 0 20px 20px;
}

.n400-step-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.n400-field-wrapper.full-width,
.n400-step-fields .full-width {
    grid-column: 1 / -1;
}

.n400-edit-view-footer {
    border: none;
    background: rgba(255, 255, 255, 0.84);
}

.n400-btn-delete {
    color: #b31b25;
    background: rgba(179, 27, 37, 0.08);
}

.n400-btn-save {
    padding: 12px 18px;
}

.n400-btn-cancel {
    padding: 12px 16px;
}

.n400-modal-overlay {
    background: rgba(40, 43, 81, 0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.n400-modal {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 30px 56px rgba(40, 43, 81, 0.16),
    inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.n400-modal-icon {
    color: #815100;
}

.n400-modal-title {
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    letter-spacing: -0.03em;
}

.n400-modal-text {
    color: rgba(40, 43, 81, 0.72);
    font-family: var(--font-kinetic-body);
}

.n400-toast-container {
    right: 26px;
    bottom: 26px;
}

.n400-toast {
    min-width: 240px;
    border-radius: 18px;
    box-shadow: 0 22px 38px rgba(40, 43, 81, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-family: var(--font-kinetic-body);
}

.n400-support-stack {
    gap: 16px;
}

.n400-support-card {
    padding: 20px;
    background: rgba(255, 255, 255, 0.84);
}

.n400-support-card-highlight {
    background: linear-gradient(180deg, rgba(0, 80, 212, 0.84) 0%, rgba(74, 110, 227, 0.92) 100%);
    color: #ffffff;
}

.n400-support-card-highlight .n400-support-card-header,
.n400-support-card-highlight .n400-support-title,
.n400-support-card-highlight .n400-support-text,
.n400-support-card-highlight .n400-support-caption,
.n400-support-card-highlight .n400-rail-progress-copy {
    color: #ffffff;
}

.n400-support-card-dark {
    background: linear-gradient(180deg, #24284f 0%, #171b3f 100%);
    color: #ffffff;
}

.n400-support-title {
    margin: 12px 0 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.n400-support-title-sm {
    font-size: 1rem;
}

.n400-support-text,
.n400-support-caption,
.n400-support-link,
.n400-focus-list,
.n400-support-dark-copy,
.n400-support-dark-note {
    font-family: var(--font-kinetic-body);
}

.n400-support-text,
.n400-support-caption,
.n400-support-link {
    color: rgba(40, 43, 81, 0.7);
    line-height: 1.65;
}

.n400-support-text {
    margin: 8px 0 0;
    font-size: 0.94rem;
}

.n400-support-caption,
.n400-support-link {
    margin-top: 12px;
    font-size: 0.88rem;
}

.n400-support-link {
    color: var(--color-kinetic-primary);
    font-weight: 700;
}

.n400-rail-progress {
    margin-top: 16px;
}

.n400-rail-progress-copy {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}

.n400-focus-list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: rgba(40, 43, 81, 0.72);
    font-size: 0.9rem;
}

.n400-focus-list li {
    position: relative;
    padding-left: 20px;
    line-height: 1.6;
}

.n400-focus-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--color-kinetic-primary) 0%, #6f97ff 100%);
}

.n400-support-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
}

.n400-support-profile-copy {
    min-width: 0;
}

.n400-support-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.n400-support-metric {
    padding: 14px;
    border-radius: 18px;
    background: rgba(241, 239, 255, 0.92);
}

.n400-support-metric span {
    display: block;
    color: rgba(40, 43, 81, 0.56);
    font-family: var(--font-kinetic-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.n400-support-metric strong {
    display: block;
    margin-top: 7px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.n400-support-dark-copy {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.n400-support-dark-note {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.9rem;
    line-height: 1.6;
}

.n400-fields-container.transitioning-out {
    opacity: 0;
    transform: translateY(8px);
}

.n400-fields-container.transitioning-in {
    opacity: 0;
    transform: translateY(-8px);
}

@media (max-width: 1280px) {
    .n400-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .n400-support-rail {
        position: static;
        grid-column: 1 / -1;
    }

    .n400-support-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .n400-module {
        padding: 16px;
    }

    .n400-layout {
        grid-template-columns: 1fr;
    }

    .n400-sidebar {
        position: static;
    }

    .n400-intro-panel {
        grid-template-columns: 1fr;
    }

    .n400-support-stack {
        grid-template-columns: 1fr;
    }

    .n400-field-group,
    .n400-step-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .n400-mobile-menu-btn {
        display: flex;
    }

    .n400-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(88vw, 320px);
        padding: 16px;
        background: var(--color-kinetic-background);
        z-index: 100;
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }

    .n400-sidebar.open {
        transform: translateX(0);
    }

    .n400-main-column {
        gap: 16px;
    }

    .n400-content,
    .n400-intro-panel,
    .n400-support-card {
        border-radius: 24px;
    }

    .n400-content {
        padding: 18px;
    }

    .n400-content-header {
        flex-direction: column;
        align-items: stretch;
    }

    .n400-content-header-right {
        position: sticky;
        bottom: 0;
        z-index: 5;
        background: rgba(248, 245, 255, 0.94);
        padding-top: 8px;
    }

    .n400-save-btn.btn-citizen {
        width: 100%;
        justify-content: center;
    }

    .n400-yesno-group {
        grid-template-columns: 1fr;
    }

    .n400-entry-read-view {
        flex-wrap: wrap;
    }

    .n400-read-view-meta,
    .n400-read-view-edit-wrapper {
        width: 100%;
        padding-left: 0;
        text-align: left;
    }

    .n400-toast-container {
        left: 16px;
        right: 16px;
        bottom: 92px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERVIEW SIMULATOR - KINETIC ACADEMIC REFRESH
   ═══════════════════════════════════════════════════════════════════════════ */

.interview-page {
    min-height: calc(100vh - 88px);
    background: radial-gradient(circle at top left, rgba(123, 156, 255, 0.14), transparent 28%),
    radial-gradient(circle at right 10% top 24%, rgba(105, 246, 184, 0.08), transparent 26%),
    linear-gradient(180deg, var(--color-kinetic-background) 0%, #f5f1ff 54%, var(--color-kinetic-background) 100%);
}

.interview-state-screen {
    min-height: calc(100vh - 88px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.interview-state-card,
.interview-complete-card {
    width: min(100%, 560px);
    padding: 36px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 30px 56px rgba(40, 43, 81, 0.08),
    inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    text-align: center;
}

.interview-state-card__icon,
.interview-complete-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 24px;
    margin-bottom: 18px;
    background: linear-gradient(145deg, rgba(0, 80, 212, 0.12), rgba(0, 80, 212, 0.22));
    color: var(--color-kinetic-primary);
    font-size: 2rem;
}

.interview-state-card__icon--muted {
    background: rgba(40, 43, 81, 0.08);
    color: rgba(40, 43, 81, 0.56);
}

.interview-state-card__title,
.interview-complete-card__title {
    margin: 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.interview-state-card__copy,
.interview-complete-card__copy {
    margin: 14px auto 0;
    max-width: 42ch;
    color: rgba(40, 43, 81, 0.7);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    line-height: 1.7;
}

.interview-primary-link,
.interview-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 22px;
    text-decoration: none;
    font-family: var(--font-kinetic-body);
    font-weight: 800;
}

.interview-primary-link {
    padding: 14px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #3f7bff 100%);
    color: #ffffff;
    box-shadow: 0 20px 30px rgba(0, 80, 212, 0.2);
}

.interview-secondary-link {
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-kinetic-on-surface);
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.1);
}

.interview-state-card--unlock {
    width: min(100%, 620px);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 40px;
}

.interview-state-card--unlock .interview-state-card__icon {
    margin-bottom: 4px;
}

.interview-state-card__icon--secondary {
    background: linear-gradient(145deg, rgba(0, 105, 71, 0.14), rgba(0, 105, 71, 0.26));
    color: var(--color-kinetic-secondary);
}

.interview-state-card__icon--pulse {
    animation: interview-state-card-pulse 1.6s ease-in-out infinite;
}

@keyframes interview-state-card-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.06); opacity: 0.85; }
}

.interview-state-card__kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 80, 212, 0.08);
    color: var(--color-kinetic-primary);
    font-family: var(--font-kinetic-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-state-card--unlock .interview-state-card__title {
    text-align: left;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.08;
}

.interview-state-card--unlock .interview-state-card__title strong {
    color: var(--color-kinetic-primary);
    font-weight: 800;
}

.interview-state-card--unlock .interview-state-card__copy {
    margin: 0;
    text-align: left;
    max-width: 52ch;
    font-size: 1.02rem;
    line-height: 1.65;
}

.interview-state-card__valueprops {
    list-style: none;
    margin: 8px 0 4px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.interview-state-card__valueprops li {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.98rem;
    line-height: 1.5;
}

.interview-state-card__valueprops li em {
    font-style: normal;
    color: var(--color-kinetic-primary);
    font-weight: 700;
}

.interview-state-card__valueprops .material-symbols-outlined {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(0, 80, 212, 0.1), rgba(0, 80, 212, 0.2));
    color: var(--color-kinetic-primary);
    font-size: 1.25rem;
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.interview-state-card__valueprops--compact {
    gap: 10px;
}

.interview-state-card__progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0;
}

.interview-state-card__progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(40, 43, 81, 0.08);
    overflow: hidden;
}

.interview-state-card__progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-kinetic-secondary) 0%, #0aa166 100%);
    transition: width 0.5s ease-out;
}

.interview-state-card__progress-label {
    color: var(--color-kinetic-secondary);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.interview-state-card--unlock .interview-primary-link {
    align-self: stretch;
    margin-top: 12px;
}

.interview-state-card__microcopy {
    margin: 0;
    color: rgba(40, 43, 81, 0.55);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .interview-state-card--unlock {
        padding: 28px;
        gap: 14px;
    }

    .interview-state-card--unlock .interview-state-card__title {
        font-size: 1.55rem;
    }
}

.interview-shell {
    min-height: calc(100vh - 88px);
}

.interview-shell__grid {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(320px, 360px);
    gap: 22px;
    padding: 20px;
    min-height: calc(100vh - 88px);
    box-sizing: border-box;
}

.interview-shell__sidebar,
.interview-shell__insights,
.interview-stage {
    min-height: 0;
}

.interview-sidebar,
.interview-insights {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    border-radius: 32px;
    background: rgba(241, 239, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.interview-insights {
    gap: 16px;
    padding: 18px;
}

.interview-sidebar__intro,
.interview-sidebar__roadmap,
.interview-sidebar__live-card,
.interview-status-card,
.interview-composer__surface,
.interview-question-card,
.interview-officer,
.interview-complete-card__stat {
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 36px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.interview-sidebar__intro,
.interview-sidebar__roadmap,
.interview-status-card,
.interview-question-card,
.interview-composer__surface {
    padding: 22px;
}

.interview-status-card {
    padding: 20px;
    border-radius: 26px;
}

.interview-sidebar__roadmap,
.interview-insights__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.interview-sidebar__roadmap {
    flex: 1;
    min-height: 0;
}

.interview-sidebar__status-row,
.interview-insights__header,
.interview-live-card__header,
.interview-panel-heading,
.interview-metric__header,
.interview-progress-snapshot__row,
.interview-complete-card__actions,
.interview-composer__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.interview-case-pill,
.interview-case-status,
.interview-question-card__chip,
.interview-question-card__count,
.interview-live-card__status,
.interview-insights__live {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: var(--font-kinetic-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-case-pill {
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4b86ff 100%);
    color: #ffffff;
}

.interview-case-status {
    background: rgba(40, 43, 81, 0.07);
    color: rgba(40, 43, 81, 0.64);
}

.interview-sidebar__title,
.interview-insights__title,
.interview-live-card__title,
.interview-officer__name {
    margin: 14px 0 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.interview-sidebar__title {
    font-size: clamp(1.8rem, 2.8vw, 2.65rem);
    line-height: 0.98;
}

.interview-insights__title {
    font-size: 1.55rem;
    line-height: 1.02;
}

.interview-live-card__title,
.interview-officer__name {
    font-size: 1.7rem;
    line-height: 1.05;
}

.interview-sidebar__copy,
.interview-insights__copy,
.interview-officer__role,
.interview-status-card__copy,
.interview-composer__hint,
.interview-progress-snapshot__label {
    margin: 10px 0 0;
    color: rgba(40, 43, 81, 0.68);
    font-family: var(--font-kinetic-body);
    line-height: 1.65;
}

.interview-insights__copy,
.interview-officer__role,
.interview-status-card__copy,
.interview-composer__hint {
    font-size: 0.95rem;
}

.interview-panel-heading {
    align-items: flex-start;
}

.interview-panel-heading__kicker,
.interview-question-card__eyebrow,
.interview-composer__label {
    color: var(--color-kinetic-primary);
    font-family: var(--font-kinetic-body);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.interview-panel-heading__support {
    color: rgba(40, 43, 81, 0.52);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    font-weight: 700;
}

.interview-roadmap-list,
.interview-progress-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.interview-section-accordion {
    border-radius: 24px;
    background: rgba(241, 239, 255, 0.68);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.12);
    overflow: hidden;
}

.interview-section-header {
    width: 100%;
    padding: 16px 18px;
    border: none;
    background: transparent;
    color: var(--color-kinetic-on-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    font-family: var(--font-kinetic-display);
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
}

.interview-section-header:hover {
    background: rgba(255, 255, 255, 0.34);
}

.interview-section-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.interview-section-header-title {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.interview-section-header-icon,
.interview-question-item__marker,
.interview-question-item__hint-icon,
.interview-status-card__icon,
.interview-sync-button .material-icons-outlined,
.interview-secondary-button .material-icons-outlined {
    font-size: 1.1rem;
}

.interview-section-body {
    display: none;
    padding: 0 14px 14px;
}

.interview-section-body.open {
    display: block;
}

.interview-question-item {
    display: flex;
    flex-direction: column;
    padding: 14px 14px 12px;
    margin-top: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--color-kinetic-on-surface);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.interview-question-item.current {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 243, 255, 0.98) 100%);
    box-shadow: 0 18px 28px rgba(0, 80, 212, 0.08),
    inset 0 0 0 1px rgba(0, 80, 212, 0.2);
    transform: translateX(2px);
}

.interview-question-item.answered {
    opacity: 0.62;
}

.interview-question-item.is-clue-open {
    opacity: 1;
    box-shadow: 0 20px 32px rgba(40, 43, 81, 0.10),
    inset 0 0 0 1px rgba(0, 80, 212, 0.16);
}

.interview-question-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 80, 212, 0.16),
    inset 0 0 0 1px rgba(0, 80, 212, 0.2);
}

.interview-question-item__summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.interview-question-item__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
}

.interview-question-item__marker {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(0, 80, 212, 0.06);
    color: rgba(40, 43, 81, 0.48);
    font-family: var(--font-kinetic-display);
    font-size: 0.81rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.interview-question-item.current .interview-question-item__marker {
    color: var(--color-kinetic-primary);
    background: rgba(0, 80, 212, 0.1);
}

.interview-question-item.answered .interview-question-item__marker {
    color: var(--color-kinetic-secondary);
    background: rgba(0, 105, 71, 0.1);
}

.interview-question-item__marker.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    font-size: 1rem;
    font-weight: 400;
}

.interview-question-item__title {
    font-family: var(--font-kinetic-body);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
}

.interview-question-item__hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: rgba(40, 43, 81, 0.72);
    font-family: var(--font-kinetic-body);
    font-size: 0.8rem;
    line-height: 1.35;
}

.interview-question-item__hint-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    color: rgba(0, 80, 212, 0.78);
    font-family: 'Material Icons Outlined';
    font-size: 1rem;
    line-height: 1;
}

.interview-question-item__hint-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: rgba(40, 43, 81, 0.74);
    font-weight: 600;
}

.interview-question-item__details {
    display: none;
    margin-top: 12px;
    padding: 16px 16px 14px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 244, 255, 0.98) 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.10);
}

.interview-question-item.is-clue-open .interview-question-item__details {
    display: block;
}

.interview-question-item__details-kicker {
    display: block;
    color: var(--color-kinetic-primary);
    font-family: var(--font-kinetic-body);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-question-item__details-kicker--answers {
    margin-top: 14px;
}

.interview-question-item__details-question {
    margin: 10px 0 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
}

.interview-question-item__details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.interview-question-item__details-answer,
.interview-question-item__details-empty {
    margin: 0;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    color: rgba(40, 43, 81, 0.88);
    font-family: var(--font-kinetic-body);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
}

.interview-question-item__details-empty {
    margin-top: 10px;
    background: rgba(40, 43, 81, 0.06);
}

.interview-sidebar__live-card {
    padding: 18px 20px;
    background: linear-gradient(180deg, #23274c 0%, #161a39 100%);
    color: #ffffff;
}

.interview-live-card__status,
.interview-insights__live {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
}

.interview-live-card__dot,
.interview-insights__live-dot,
.interview-officer__status-dot,
.interview-recording-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-kinetic-secondary);
    box-shadow: 0 0 0 6px rgba(105, 246, 184, 0.16);
    flex-shrink: 0;
}

.interview-live-card__metric,
.interview-progress-snapshot__value {
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.interview-live-card__progress-track,
.interview-progress-snapshot__track,
.interview-metric__track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
}

.interview-live-card__progress-fill,
.interview-progress-snapshot__fill,
.interview-metric__fill,
.section-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    transition: width 0.35s ease;
}

.interview-live-card__progress-fill,
.interview-progress-snapshot__fill,
.section-bar {
    background: linear-gradient(90deg, #69f6b8 0%, #20a871 100%);
}

.interview-live-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
}

.interview-stage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
}

.interview-stage__hero {
    flex: 0 0 auto;
}

.interview-officer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 22px 28px;
    min-height: 182px;
    text-align: center;
    background: radial-gradient(circle at top center, rgba(123, 156, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(241, 239, 255, 0.88) 100%);
}

.interview-officer__portrait-wrap {
    position: relative;
}

.interview-officer__portrait {
    width: 148px;
    height: 148px;
    padding: 6px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(123, 156, 255, 0.4), rgba(255, 255, 255, 0.9));
    box-shadow: 0 24px 40px rgba(40, 43, 81, 0.12);
}

.interview-officer__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}

.interview-officer__presence {
    position: absolute;
    right: 6px;
    bottom: 8px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-kinetic-secondary);
    box-shadow: 0 12px 20px rgba(0, 105, 71, 0.18),
    inset 0 0 0 3px rgba(255, 255, 255, 0.95);
}

.interview-officer__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.interview-officer__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: rgba(40, 43, 81, 0.72);
    font-family: var(--font-kinetic-body);
    font-size: 0.88rem;
    font-weight: 700;
}

.interview-officer__status.is-speaking {
    color: var(--color-kinetic-secondary);
}

.interview-question-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 247, 255, 0.98) 100%);
}

.interview-question-card__eyebrow-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.interview-question-card__rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 80, 212, 0.16), rgba(0, 80, 212, 0));
}

.interview-question-card__prompt {
    margin: 18px 0 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 4vw, 3.45rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.06em;
}

.interview-question-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.interview-question-card__chip {
    background: rgba(0, 80, 212, 0.08);
    color: var(--color-kinetic-primary);
}

.interview-question-card__count {
    background: rgba(40, 43, 81, 0.06);
    color: rgba(40, 43, 81, 0.62);
}

.interview-question-card__anchors {
    margin-top: 18px;
}

.interview-question-card__anchors-label {
    display: block;
    color: rgba(40, 43, 81, 0.56);
    font-family: var(--font-kinetic-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-question-card__answers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.interview-question-card__answer {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(241, 239, 255, 0.88);
    color: rgba(40, 43, 81, 0.74);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    font-weight: 700;
}

.interview-question-card__answer.is-empty {
    background: rgba(40, 43, 81, 0.06);
}

.interview-transcript {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 8px 4px;
}

.interview-transcript__entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 82%;
}

.interview-transcript__entry--student {
    align-self: flex-end;
    text-align: right;
}

.interview-transcript__entry--officer,
.interview-transcript__entry--evaluation {
    align-self: flex-start;
}

.interview-transcript__meta {
    color: rgba(40, 43, 81, 0.54);
    font-family: var(--font-kinetic-body);
    font-size: 0.8rem;
    font-weight: 700;
}

.interview-transcript__card {
    padding: 16px 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 30px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.interview-transcript__entry--student .interview-transcript__card {
    background: linear-gradient(145deg, var(--color-kinetic-primary) 0%, #3f7bff 100%);
    color: #ffffff;
    box-shadow: 0 20px 34px rgba(0, 80, 212, 0.22);
}

.interview-transcript__entry--evaluation .interview-transcript__card.is-correct {
    background: linear-gradient(180deg, rgba(234, 247, 240, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 18px 28px rgba(0, 105, 71, 0.06),
    inset 0 0 0 1px rgba(0, 105, 71, 0.14);
}

.interview-transcript__entry--evaluation .interview-transcript__card.is-warning {
    background: linear-gradient(180deg, rgba(255, 247, 233, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 18px 28px rgba(129, 81, 0, 0.06),
    inset 0 0 0 1px rgba(129, 81, 0, 0.12);
}

.interview-transcript__text {
    color: inherit;
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    line-height: 1.7;
}

.interview-transcript__question {
    font-family: var(--font-kinetic-display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: -0.03em;
}

.interview-transcript__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: var(--font-kinetic-body);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-transcript__badge.is-correct {
    background: rgba(0, 105, 71, 0.12);
    color: var(--color-kinetic-secondary);
}

.interview-transcript__badge.is-warning {
    background: rgba(129, 81, 0, 0.12);
    color: #815100;
}

.interview-transcript__list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: rgba(40, 43, 81, 0.7);
    font-family: var(--font-kinetic-body);
    font-size: 0.92rem;
    line-height: 1.6;
}

.interview-transcript__audio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 80, 212, 0.08);
}

.interview-transcript__entry--student .interview-transcript__audio {
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.16);
}

.interview-transcript__audio-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #3f7bff 100%);
    color: #ffffff;
    cursor: pointer;
}

.interview-transcript__entry--student .interview-transcript__audio-btn {
    background: rgba(255, 255, 255, 0.24);
}

.interview-transcript__waveform {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.interview-transcript__waveform-bar {
    width: 3px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.8;
}

.interview-transcript__waveform-bar:nth-child(1) {
    height: 10px;
}

.interview-transcript__waveform-bar:nth-child(2) {
    height: 16px;
}

.interview-transcript__waveform-bar:nth-child(3) {
    height: 22px;
}

.interview-transcript__waveform-bar:nth-child(4) {
    height: 12px;
}

.interview-transcript__waveform-bar:nth-child(5) {
    height: 18px;
}

.interview-transcript__audio-status {
    color: inherit;
    font-family: var(--font-kinetic-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-system-note {
    align-self: center;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.12);
    color: rgba(40, 43, 81, 0.72);
    font-family: var(--font-kinetic-body);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
}

.interview-system-note.is-error {
    background: rgba(255, 240, 243, 0.94);
    color: #b31b25;
    box-shadow: inset 0 0 0 1px rgba(179, 27, 37, 0.14);
}

.interview-system-note.is-processing {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.interview-system-note__scores {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

.interview-system-note__score {
    color: rgba(40, 43, 81, 0.68);
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    font-weight: 700;
}

.interview-composer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: 2px;
}

.interview-composer__topline {
    margin-bottom: 10px;
}

.interview-composer__prompt-group {
    min-width: 0;
}

.interview-composer__hint strong {
    color: var(--color-kinetic-primary);
}

.interview-recording-status {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(179, 27, 37, 0.08);
    color: #b31b25;
    font-family: var(--font-kinetic-body);
    font-size: 0.85rem;
    font-weight: 800;
}

.interview-recording-status.is-visible {
    display: inline-flex;
}

.interview-recording-status__dot {
    background: #b31b25;
    box-shadow: 0 0 0 6px rgba(179, 27, 37, 0.16);
}

.interview-composer__surface {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.96);
}

.interview-composer__surface.is-recording {
    background: rgba(255, 240, 243, 0.96);
    box-shadow: 0 22px 38px rgba(179, 27, 37, 0.08),
    inset 0 0 0 1px rgba(179, 27, 37, 0.22);
}

.interview-composer__surface.is-disabled {
    opacity: 0.72;
}

.interview-composer__input {
    flex: 1;
    min-width: 0;
    border: none;
    background: rgba(241, 239, 255, 0.8);
    border-radius: 20px;
    padding: 16px 18px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.interview-composer__input::placeholder {
    color: rgba(40, 43, 81, 0.5);
}

.interview-composer__input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.28);
}

.interview-composer__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.interview-secondary-button,
.interview-primary-button,
.interview-sync-button {
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-kinetic-body);
    font-weight: 800;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.interview-secondary-button {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(241, 239, 255, 0.88);
    color: var(--color-kinetic-on-surface);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.interview-primary-button,
.interview-sync-button {
    padding: 14px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #3f7bff 100%);
    color: #ffffff;
    box-shadow: 0 20px 30px rgba(0, 80, 212, 0.2);
}

.interview-primary-button--wide {
    width: 100%;
}

.interview-primary-button:hover,
.interview-secondary-button:hover,
.interview-sync-button:hover {
    transform: translateY(-1px);
}

.interview-primary-button:active,
.interview-secondary-button:active,
.interview-sync-button:active {
    transform: scale(0.98);
}

.interview-primary-button.is-disabled,
.interview-primary-button:disabled,
.interview-secondary-button.is-disabled,
.interview-secondary-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.interview-mic-indicator {
    width: 52px;
    height: 52px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(241, 239, 255, 0.88);
    color: var(--color-kinetic-primary);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.interview-mic-indicator.is-recording {
    background: #b31b25;
    color: #ffffff;
    box-shadow: 0 0 0 10px rgba(179, 27, 37, 0.12);
}

.interview-insights__header {
    align-items: flex-start;
    gap: 10px;
}

.interview-insights__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.interview-insights__footer {
    padding-top: 4px;
}

.interview-confidence-gauge {
    position: relative;
    width: 164px;
    height: 164px;
    margin: 0 auto;
}

.interview-confidence-gauge__track {
    fill: none;
    stroke: rgba(40, 43, 81, 0.08);
    stroke-width: 12;
}

.interview-confidence-gauge__fill {
    fill: none;
    stroke: var(--color-kinetic-primary);
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.45s ease, stroke 0.35s ease;
}

.interview-confidence-gauge__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.interview-confidence-gauge__value {
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
}

.interview-confidence-gauge__label {
    margin-top: 4px;
    color: rgba(40, 43, 81, 0.54);
    font-family: var(--font-kinetic-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-metric-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.interview-metric__header {
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.9rem;
    font-weight: 800;
}

.interview-metric--clarity .interview-metric__fill {
    background: linear-gradient(90deg, #20a871 0%, #006947 100%);
}

.interview-metric--accuracy .interview-metric__fill {
    background: linear-gradient(90deg, #f0b24a 0%, #cc7c08 100%);
}

.interview-metric--pace .interview-metric__fill {
    background: linear-gradient(90deg, #0050d4 0%, #4d81ff 100%);
}

.interview-progress-snapshot__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.interview-progress-snapshot__row > div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(241, 239, 255, 0.84);
}

.interview-progress-snapshot__label {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.45;
    text-transform: uppercase;
}

.interview-progress-snapshot__value {
    display: block;
    margin-top: 6px;
    color: var(--color-kinetic-on-surface);
    font-size: 1.18rem;
}

.interview-progress-snapshot__track {
    margin-top: 12px;
    background: rgba(40, 43, 81, 0.08);
}

.interview-progress-list {
    margin-top: 12px;
}

.interview-progress-list__item {
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(241, 239, 255, 0.7);
}

.interview-progress-list__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.4;
}

.interview-progress-list__header span:first-child {
    flex: 1;
    min-width: 0;
}

.interview-progress-list__header .section-count {
    flex: 0 0 auto;
}

.interview-progress-list__track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(40, 43, 81, 0.08);
}

.interview-status-card__title {
    margin: 0;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.interview-status-card--response.is-match,
.interview-status-card--success {
    background: linear-gradient(180deg, rgba(234, 247, 240, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 20px 32px rgba(0, 105, 71, 0.06),
    inset 0 0 0 1px rgba(0, 105, 71, 0.14);
}

.interview-status-card--response.is-mismatch {
    background: linear-gradient(180deg, rgba(255, 247, 233, 0.96) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 20px 32px rgba(129, 81, 0, 0.06),
    inset 0 0 0 1px rgba(129, 81, 0, 0.14);
}

.interview-status-card--response.is-neutral,
.interview-status-card--ambient {
    background: rgba(255, 255, 255, 0.92);
}

.interview-latest-eval {
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.94rem;
    line-height: 1.65;
}

.interview-legacy-metrics {
    display: none;
}

.interview-complete-card__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.interview-complete-card__stat {
    padding: 18px;
}

.interview-complete-card__stat span {
    display: block;
    color: rgba(40, 43, 81, 0.56);
    font-family: var(--font-kinetic-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.interview-complete-card__stat strong {
    display: block;
    margin-top: 8px;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-display);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.interview-complete-card__actions {
    margin-top: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 1360px) {
    .interview-shell__grid {
        grid-template-columns: minmax(240px, 290px) minmax(0, 1fr) minmax(320px, 360px);
        gap: 16px;
        padding: 16px;
    }

    .interview-insights {
        gap: 14px;
        padding: 16px;
    }

    .interview-status-card {
        padding: 18px;
        border-radius: 24px;
    }

    .interview-progress-snapshot__row {
        gap: 8px;
    }

    .interview-progress-snapshot__row > div {
        padding: 10px;
    }

    .interview-progress-snapshot__label {
        font-size: 0.68rem;
    }

    .interview-progress-snapshot__value {
        font-size: 1.08rem;
    }

    .interview-question-card__prompt {
        font-size: clamp(1.8rem, 3.2vw, 2.85rem);
    }
}

@media (max-width: 1120px) {
    .interview-shell__grid {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    }

    .interview-shell__insights {
        grid-column: 1 / -1;
    }

    .interview-insights__body {
        overflow: visible;
    }

    .interview-officer {
        justify-content: flex-start;
        text-align: left;
    }

    .interview-officer__copy {
        align-items: flex-start;
    }
}

@media (max-width: 820px) {
    .interview-shell__grid {
        grid-template-columns: 1fr;
    }

    .interview-sidebar {
        order: 2;
    }

    .interview-stage {
        order: 1;
    }

    .interview-shell__insights {
        order: 3;
    }

    .interview-officer {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .interview-officer__copy {
        align-items: center;
    }

    .interview-transcript__entry {
        max-width: 100%;
    }

    .interview-composer__surface {
        flex-direction: column;
        align-items: stretch;
    }

    .interview-composer__actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .interview-secondary-button,
    .interview-primary-button,
    .interview-sync-button {
        flex: 1 1 180px;
    }
}

@media (max-width: 640px) {
    .interview-shell__grid {
        padding: 12px;
        gap: 14px;
    }

    .interview-sidebar,
    .interview-insights {
        padding: 14px;
        border-radius: 24px;
    }

    .interview-progress-snapshot__row {
        grid-template-columns: 1fr;
    }

    .interview-sidebar__intro,
    .interview-sidebar__roadmap,
    .interview-status-card,
    .interview-question-card,
    .interview-composer__surface,
    .interview-officer {
        padding: 18px;
        border-radius: 22px;
    }

    .interview-question-card__prompt {
        font-size: 1.85rem;
    }

    .interview-question-item__details {
        padding: 14px 14px 12px;
        border-radius: 18px;
    }

    .interview-officer__portrait {
        width: 126px;
        height: 126px;
    }

    .interview-composer {
        position: sticky;
        bottom: 8px;
    }

    .interview-composer__topline,
    .interview-progress-snapshot__row,
    .interview-complete-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .interview-complete-card,
    .interview-state-card {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .interview-complete-card__stats {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED STUDENT SHELL AND KINETIC OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

body.student-theme {
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(111, 151, 255, 0.12), transparent 22rem),
    radial-gradient(circle at top right, rgba(105, 246, 184, 0.1), transparent 20rem),
    linear-gradient(180deg, #ffffff 0%, var(--color-kinetic-background) 14%, #f6f2ff 100%);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
}

.student-theme h1,
.student-theme h2,
.student-theme h3,
.student-theme h4,
.student-theme .official-text {
    font-family: var(--font-kinetic-display);
    color: var(--color-kinetic-on-surface);
    letter-spacing: -0.04em;
}

.student-app-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 1.35rem;
    background: rgba(248, 245, 255, 0.88);
    backdrop-filter: blur(18px);
    box-shadow: inset 0 -1px 0 rgba(167, 170, 215, 0.18);
}

.student-app-branding {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.student-app-logo {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4c82ff 100%);
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(0, 80, 212, 0.18);
}

.student-app-logo .material-symbols-outlined {
    font-size: 1.4rem;
}

.student-app-brandcopy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.student-app-brandcopy strong {
    font-family: var(--font-kinetic-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--color-kinetic-on-surface);
}

.student-app-brandcopy span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.54);
}

.student-app-nav-shell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.student-app-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    padding: 0 1rem;
    border-radius: 999px;
    color: rgba(40, 43, 81, 0.68);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.student-app-nav-link:hover,
.student-app-nav-link:focus-visible,
.student-app-nav-link.active,
.student-app-nav-link.is-active {
    background: linear-gradient(135deg, rgba(0, 80, 212, 0.1) 0%, rgba(0, 80, 212, 0.16) 100%);
    color: var(--color-kinetic-primary);
    transform: translateY(-1px);
}

.student-app-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.student-app-profile-wrap {
    position: relative;
}

.student-app-profile-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.45rem 0.55rem 0.45rem 0.45rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    cursor: pointer;
    color: var(--color-kinetic-on-surface);
}

.student-app-avatar {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4c82ff 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-display);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.student-app-profile-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.student-app-profile-copy strong {
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.student-app-profile-copy span {
    margin-top: 0.08rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.56);
}

.student-app-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    min-width: 12rem;
    padding: 0.45rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 36px rgba(40, 43, 81, 0.12),
    inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.student-app-dropdown.hidden {
    display: none;
}

.student-app-dropdown a,
.student-app-dropdown button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.8rem 0.95rem;
    border: none;
    border-radius: 0.85rem;
    background: transparent;
    color: var(--color-kinetic-on-surface);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.student-app-dropdown a:hover,
.student-app-dropdown button:hover {
    background: rgba(241, 239, 255, 0.9);
}

.student-app-main {
    min-height: calc(100vh - 88px);
}

.student-app-mobile-dock {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 45;
    display: none;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.35rem;
    width: min(calc(100% - 1rem), 34rem);
    padding: 0.45rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(20px);
    box-shadow: 0 18px 40px rgba(40, 43, 81, 0.16),
    inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.student-app-mobile-link {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 0.62rem 0.25rem;
    border-radius: 1rem;
    color: rgba(40, 43, 81, 0.58);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-app-mobile-link .material-symbols-outlined {
    font-size: 1.32rem;
}

.student-app-mobile-link.active,
.student-app-mobile-link.is-active {
    background: rgba(0, 80, 212, 0.12);
    color: var(--color-kinetic-primary);
}

/* Kinetic overrides for legacy dossier components used by remaining pages */
.dossier-container {
    max-width: 72rem;
    padding: 2rem 1.5rem 3rem;
}

.dossier-header {
    margin-bottom: 2rem;
    padding-bottom: 0;
    border-bottom: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.dossier-header h1 {
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-kinetic-on-surface);
}

.dossier-header .dossier-subtitle {
    font-family: var(--font-kinetic-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--color-kinetic-primary);
}

.dossier-surface {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 239, 255, 0.92) 100%);
    border: none;
    border-radius: 1.9rem;
    box-shadow: 0 24px 48px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
    padding: 1.5rem;
}

.dossier-label {
    margin-bottom: 0.55rem;
    font-family: var(--font-kinetic-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.56);
}

.dossier-input {
    min-height: 3.2rem;
    padding: 0.95rem 1rem;
    border: none;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 0.98rem;
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.dossier-input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.34),
    0 0 0 4px rgba(0, 80, 212, 0.08);
}

.dossier-input[readonly],
.dossier-input:disabled {
    border-style: none;
    color: rgba(40, 43, 81, 0.6);
    background: rgba(241, 239, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.dossier-btn {
    min-height: 3rem;
    padding: 0.88rem 1.25rem;
    border: none;
    border-radius: 1.1rem;
    font-family: var(--font-kinetic-body);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dossier-btn-primary {
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4c82ff 100%);
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(0, 80, 212, 0.2);
}

.dossier-btn-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--color-kinetic-primary-dim) 0%, #3f74f4 100%);
    box-shadow: 0 20px 34px rgba(0, 80, 212, 0.24);
}

.dossier-btn-primary:active,
.dossier-btn-secondary:active {
    transform: scale(0.98);
}

.dossier-btn-secondary {
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-kinetic-primary);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.18);
}

.dossier-btn-secondary:hover {
    transform: translateY(-1px);
    background: rgba(238, 243, 255, 0.96);
}

/* Shared auth experience */
.student-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top left, rgba(0, 80, 212, 0.12), transparent 23rem),
    radial-gradient(circle at right 14% top 20%, rgba(105, 246, 184, 0.1), transparent 18rem),
    linear-gradient(180deg, var(--color-kinetic-background) 0%, #f4f1ff 100%);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
}

.student-auth-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.9rem 1.6rem 0;
}

.student-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.student-auth-brandmark {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #5d8cff 100%);
    color: #ffffff;
    box-shadow: 0 16px 32px rgba(40, 43, 81, 0.06);
}

.student-auth-brandcopy {
    display: flex;
    flex-direction: column;
}

.student-auth-brandcopy strong {
    font-family: var(--font-kinetic-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.05em;
}

.student-auth-brandcopy span {
    margin-top: 0.08rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.54);
}

.student-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.6rem;
}

.student-auth-card {
    width: min(100%, 72rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.92fr);
    gap: 1.15rem;
    border-radius: 2rem;
    overflow: hidden;
    background: transparent;
}

.student-auth-panel {
    padding: clamp(1.75rem, 4vw, 3.8rem);
    border-radius: 2rem;
}

.student-auth-panel-form {
    background: var(--color-kinetic-surface-lowest);
    box-shadow: 0 24px 48px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(40, 43, 81, 0.08);
}

.student-auth-panel-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.1rem;
    min-height: 100%;
    background: radial-gradient(circle at top left, rgba(105, 246, 184, 0.2), transparent 30%),
    radial-gradient(circle at right bottom, rgba(255, 255, 255, 0.1), transparent 22%),
    linear-gradient(155deg, rgba(0, 80, 212, 0.96) 0%, rgba(33, 86, 188, 0.98) 54%, rgba(16, 44, 106, 1) 100%);
    color: #ffffff;
    box-shadow: 0 24px 48px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.student-auth-badge {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    backdrop-filter: blur(20px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.student-auth-badge--soft {
    background: var(--color-kinetic-surface-low);
    color: var(--color-kinetic-primary);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.08);
}

.student-auth-badge--offset {
    margin-top: 1rem;
}

.student-auth-badge--centered {
    margin-left: auto;
    margin-right: auto;
}

.student-auth-title {
    margin: 1rem 0 0;
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
}

.student-auth-panel-hero .student-auth-title {
    color: #ffffff;
}

.student-auth-copy {
    margin: 0.95rem 0 0;
    font-size: 1rem;
    line-height: 1.72;
    color: rgba(40, 43, 81, 0.66);
}

.student-auth-panel-hero .student-auth-copy {
    color: rgba(255, 255, 255, 0.82);
}

.student-auth-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.2rem 0 0;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
}

.student-auth-banner .material-icons-outlined {
    font-size: 1.2rem;
    margin-top: 0.05rem;
}

.student-auth-banner--success {
    background: rgba(234, 247, 240, 0.96);
    color: var(--color-kinetic-secondary);
}

.student-auth-banner--warning {
    background: rgba(255, 248, 233, 0.96);
    color: #815100;
}

.student-auth-banner--error {
    background: rgba(255, 240, 243, 0.98);
    color: #b31b25;
}

.student-auth-banner--compact {
    margin-top: 0;
}

.student-auth-form {
    display: grid;
    gap: 1.15rem;
    margin-top: 1.6rem;
}

.student-auth-field {
    display: grid;
    gap: 0.6rem;
}

.student-auth-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.student-auth-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.56);
}

.student-auth-inline-link,
.student-auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-kinetic-primary);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
}

.student-auth-input-wrap {
    position: relative;
}

.student-auth-input {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.95rem 3rem 0.95rem 1.05rem;
    border: none;
    border-radius: 1.15rem;
    background: var(--color-kinetic-surface-low);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.student-auth-input::placeholder {
    color: rgba(40, 43, 81, 0.46);
}

.student-auth-input:focus {
    outline: none;
    background: #f7f5ff;
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.22),
    0 0 0 4px rgba(0, 80, 212, 0.08);
}

.student-auth-input-icon,
.student-auth-input-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(40, 43, 81, 0.48);
}

.student-auth-input-toggle {
    border: none;
    background: transparent;
    cursor: pointer;
}

.student-auth-input-toggle .material-icons-outlined {
    font-size: 1.15rem;
}

.student-auth-button {
    width: 100%;
    min-height: 3.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 1.25rem;
    border: none;
    border-radius: 1.2rem;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #5d8cff 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 16px 32px rgba(40, 43, 81, 0.08);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.student-auth-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.student-auth-button:not(:disabled):hover {
    box-shadow: 0 18px 36px rgba(40, 43, 81, 0.1);
}

.student-auth-button:not(:disabled):active {
    transform: scale(0.98);
}

.student-auth-button--ghost {
    background: var(--color-kinetic-surface-low);
    color: var(--color-kinetic-primary);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.14);
}

.student-auth-button--inline {
    width: auto;
}

.student-auth-card--compact {
    max-width: 36rem;
    grid-template-columns: 1fr;
}

.student-auth-support {
    margin-top: 1.15rem;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(40, 43, 81, 0.6);
}

.student-auth-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 1.45rem;
}

.student-auth-stat strong {
    display: block;
    font-family: var(--font-kinetic-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.student-auth-stat span {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
}

.student-auth-note-list {
    display: grid;
    gap: 0.7rem;
    margin: 1.2rem 0 0;
    padding: 1rem;
    border-radius: 1.2rem;
    background: var(--color-kinetic-surface-low);
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
}

.student-auth-note-list--flush {
    margin-top: 0;
}

.student-auth-note-list--hero {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.student-auth-note-list--requirements {
    gap: 0.65rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.student-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(40, 43, 81, 0.68);
}

.student-auth-note-list--hero .student-auth-note {
    color: rgba(255, 255, 255, 0.82);
}

.student-auth-note .material-icons-outlined {
    font-size: 1rem;
    color: var(--color-kinetic-primary);
    margin-top: 0.1rem;
}

.student-auth-note-list--hero .student-auth-note .material-icons-outlined {
    color: #ffffff;
}

.student-auth-note--requirement {
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    background: var(--color-kinetic-surface-low);
    box-shadow: inset 0 0 0 1px rgba(40, 43, 81, 0.06);
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.student-auth-note--requirement.student-auth-note--met {
    background: var(--color-kinetic-secondary-surface);
    color: var(--color-kinetic-secondary);
    box-shadow: inset 0 0 0 1px rgba(0, 105, 71, 0.08);
}

.student-auth-note--requirement.student-auth-note--met .material-icons-outlined {
    color: var(--color-kinetic-secondary);
}

.student-auth-panel--centered {
    text-align: center;
}

.student-auth-panel--centered .student-auth-copy {
    margin-left: auto;
    margin-right: auto;
    max-width: 28rem;
}

.student-auth-back-link-block {
    margin-top: 1rem;
}

.student-auth-stack-sm {
    margin-top: 1rem;
}

.student-auth-stack-md {
    margin-top: 1.25rem;
}

.student-auth-spinner {
    animation: student-auth-spin 1s linear infinite;
}

.student-auth-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.6rem 1.6rem;
    color: rgba(40, 43, 81, 0.5);
}

.student-auth-footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.student-auth-footer-links span {
    opacity: 0.8;
}

.student-auth-meta {
    font-size: 0.78rem;
}

.student-auth-button:focus-visible,
.student-auth-input:focus-visible,
.student-auth-input-toggle:focus-visible,
.student-auth-inline-link:focus-visible,
.student-auth-back-link:focus-visible {
    outline: 2px solid rgba(0, 80, 212, 0.34);
    outline-offset: 3px;
}

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

/* Student profile page */
.student-profile-page {
    max-width: 84rem;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 3rem;
}

.student-profile-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.student-profile-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(0, 80, 212, 0.08);
    color: var(--color-kinetic-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.student-profile-title {
    margin: 0.95rem 0 0;
    font-size: clamp(2.15rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.06em;
}

.student-profile-copy {
    max-width: 42rem;
    margin: 0.85rem 0 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(40, 43, 81, 0.66);
}

.student-profile-badge {
    padding: 0.75rem 1rem;
    border-radius: 1.25rem;
    background: rgba(241, 239, 255, 0.9);
    color: rgba(40, 43, 81, 0.58);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.student-profile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.student-profile-panel {
    padding: 1.5rem;
    border-radius: 1.9rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 239, 255, 0.92) 100%);
    box-shadow: 0 24px 48px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.student-profile-panel--full {
    grid-column: 1 / -1;
}

.student-profile-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.student-profile-panel-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.student-profile-panel-copy {
    margin: 0.35rem 0 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(40, 43, 81, 0.62);
}

.student-profile-form {
    display: grid;
    gap: 1rem;
}

.student-profile-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.student-profile-field {
    display: grid;
    gap: 0.55rem;
}

.student-profile-field--full {
    grid-column: 1 / -1;
}

.student-profile-help {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(40, 43, 81, 0.58);
}

.student-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.4rem;
}

.student-profile-alert {
    display: none;
    margin-top: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Writing practice studio */
.writing-practice-page {
    --writing-accent: var(--color-kinetic-primary);
    --writing-accent-strong: var(--color-kinetic-primary-dim);
    --writing-accent-soft: rgba(0, 80, 212, 0.12);
    --writing-accent-surface: rgba(238, 243, 255, 0.94);
    --writing-card-shadow: 0 28px 48px rgba(40, 43, 81, 0.07);
    max-width: 76rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4.5rem;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
}

.writing-practice-page--fill {
    --writing-accent: var(--color-kinetic-secondary);
    --writing-accent-strong: #0a7a57;
    --writing-accent-soft: rgba(0, 105, 71, 0.12);
    --writing-accent-surface: rgba(234, 247, 240, 0.95);
}

.writing-practice-page [hidden] {
    display: none !important;
}

.writing-practice-page *,
.writing-practice-page *::before,
.writing-practice-page *::after {
    box-sizing: border-box;
}

.writing-practice-page .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.writing-practice-state,
.writing-practice-summary {
    text-align: center;
}

.writing-practice-state {
    max-width: 32rem;
    margin: 0 auto;
    padding: 5rem 0 3rem;
}

.writing-practice-state-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--writing-accent) 0%, #4c82ff 100%);
    color: #ffffff;
    font-size: 2.1rem;
    box-shadow: 0 20px 34px rgba(0, 80, 212, 0.18);
    animation: writing-practice-pulse 1.8s ease-in-out infinite;
}

.writing-practice-page--fill .writing-practice-state-icon {
    background: linear-gradient(135deg, var(--writing-accent) 0%, #3cae7d 100%);
    box-shadow: 0 20px 34px rgba(0, 105, 71, 0.18);
}

.writing-practice-state-icon--muted {
    animation: none;
    background: rgba(241, 239, 255, 0.96);
    color: rgba(40, 43, 81, 0.42);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.writing-practice-state-title,
.writing-practice-title,
.writing-practice-section-title,
.writing-practice-summary-title {
    font-family: var(--font-kinetic-display);
    letter-spacing: -0.06em;
}

.writing-practice-state-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
}

.writing-practice-state-copy {
    margin: 0.85rem 0 0;
    font-size: 1rem;
    line-height: 1.72;
    color: rgba(40, 43, 81, 0.62);
}

.writing-practice-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 1.5rem;
    align-items: start;
    margin-bottom: 1.6rem;
}

.writing-practice-hero--with-actions {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, auto);
}

.writing-practice-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.46rem 0.82rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    color: var(--writing-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.writing-practice-kicker--centered {
    justify-content: center;
}

.writing-practice-kicker .material-symbols-outlined {
    font-size: 1rem;
}

.writing-practice-title {
    margin: 1rem 0 0;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 0.95;
    font-weight: 800;
}

.writing-practice-title span {
    display: block;
}

.writing-practice-copy {
    max-width: 42rem;
    margin: 0.9rem 0 0;
    font-size: 1rem;
    line-height: 1.72;
    color: rgba(40, 43, 81, 0.66);
}

.writing-practice-hero-note {
    min-width: 18rem;
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.45rem;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16),
    0 14px 30px rgba(40, 43, 81, 0.05);
}

.writing-practice-hero-note .material-symbols-outlined {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--writing-accent-surface);
    color: var(--writing-accent);
    font-size: 1.4rem;
}

.writing-practice-hero-note strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.55);
}

.writing-practice-hero-note span {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.92rem;
    line-height: 1.58;
    color: rgba(40, 43, 81, 0.68);
}

.writing-practice-hero-note .autoplay-toggle-wrapper {
    margin-top: 0.75rem;
}

.writing-practice-hero-note .autoplay-toggle-wrapper span {
    display: inline;
    margin-top: 0;
}

.writing-practice-hero-note .toggle-slider {
    display: block;
    margin-top: 0;
}

.writing-practice-hero-actions {
    display: grid;
    gap: 0.85rem;
    justify-items: end;
}

.writing-practice-hero-note--compact {
    min-width: 0;
    max-width: 24rem;
}

.writing-practice-mode-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.32rem;
    padding: 0.35rem;
    border-radius: 1.55rem;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.writing-practice-mode-button {
    min-width: 7rem;
    min-height: 3rem;
    padding: 0.8rem 1.15rem;
    border: none;
    border-radius: 1.2rem;
    background: transparent;
    color: rgba(40, 43, 81, 0.64);
    font-family: var(--font-kinetic-body);
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.writing-practice-mode-button.is-active {
    background: linear-gradient(135deg, var(--writing-accent) 0%, var(--writing-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 18px 32px rgba(0, 80, 212, 0.16);
}

.writing-practice-page--fill .writing-practice-mode-button.is-active {
    box-shadow: 0 18px 32px rgba(0, 105, 71, 0.16);
}

.writing-practice-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: end;
    margin-bottom: 1.45rem;
}

.writing-practice-progress-label {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(40, 43, 81, 0.72);
}

.writing-practice-progress-track {
    width: min(100%, 22rem);
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(40, 43, 81, 0.08);
    overflow: hidden;
}

.writing-practice-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-kinetic-secondary) 0%, #2ca06c 100%);
    transition: width 0.28s ease;
}

.writing-practice-score {
    text-align: right;
}

.writing-practice-score-value,
.writing-practice-metric-value {
    display: block;
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    color: var(--writing-accent);
}

.writing-practice-score-label,
.writing-practice-metric-label,
.writing-practice-label,
.writing-practice-feedback-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.writing-practice-score-label {
    margin: 0.1rem 0 0;
    color: rgba(40, 43, 81, 0.54);
}

.writing-practice-shell {
    display: grid;
    gap: 1.25rem;
}

.writing-practice-page--dictation .writing-practice-shell {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.92fr);
    align-items: start;
}

.writing-practice-page--handwriting .writing-practice-shell {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.writing-practice-shell--stacked {
    grid-template-columns: 1fr;
}

.writing-practice-stack {
    display: grid;
    gap: 1.1rem;
}

.writing-practice-card,
.writing-practice-result-card,
.writing-practice-metric,
.writing-practice-review-card {
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 239, 255, 0.92) 100%);
    box-shadow: var(--writing-card-shadow),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.writing-practice-page--fill .writing-practice-card,
.writing-practice-page--fill .writing-practice-result-card,
.writing-practice-page--fill .writing-practice-metric,
.writing-practice-page--fill .writing-practice-review-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 247, 242, 0.94) 100%);
}

.writing-practice-card,
.writing-practice-result-card {
    padding: 1.55rem;
}

.writing-practice-card-heading {
    display: grid;
    gap: 0.42rem;
}

.writing-practice-label {
    margin: 0;
    color: var(--writing-accent);
}

.writing-practice-card-copy,
.writing-practice-result-copy,
.writing-practice-summary-copy {
    margin: 0;
    color: rgba(40, 43, 81, 0.66);
    line-height: 1.65;
}

.writing-practice-card--feature {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.writing-practice-card--feature .writing-practice-card-heading {
    justify-items: center;
}

.writing-practice-card--support {
    display: grid;
    gap: 1rem;
}

.writing-practice-audio-button {
    width: 7rem;
    height: 7rem;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--writing-accent) 0%, var(--writing-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 24px 40px rgba(0, 80, 212, 0.2);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.writing-practice-page--fill .writing-practice-audio-button,
.writing-practice-page--fill .writing-practice-primary-btn {
    box-shadow: 0 24px 40px rgba(0, 105, 71, 0.16);
}

.writing-practice-audio-button:active,
.writing-practice-primary-btn:active {
    transform: scale(0.98);
}

.writing-practice-audio-button.is-playing {
    animation: writing-practice-float 1.1s ease-in-out infinite alternate;
}

.writing-practice-audio-button:disabled {
    cursor: not-allowed;
}

.writing-practice-audio-button.is-unavailable,
.writing-practice-audio-button:disabled {
    background: rgba(255, 255, 255, 0.94);
    color: rgba(40, 43, 81, 0.28);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.writing-practice-audio-button .material-symbols-outlined {
    font-size: 2.9rem;
}

.writing-practice-status {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 700;
    color: rgba(40, 43, 81, 0.7);
}

.writing-practice-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: var(--writing-accent-surface);
    color: var(--writing-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.writing-practice-fallback {
    width: 100%;
    padding: 1.25rem;
    border-radius: 1.55rem;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.writing-practice-fallback-label {
    margin: 0 0 0.55rem;
    color: rgba(40, 43, 81, 0.54);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.writing-practice-fallback-text,
.writing-practice-sentence {
    margin: 0;
    font-family: var(--font-kinetic-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--color-kinetic-on-surface);
}

.writing-practice-sentence {
    text-align: left;
}

.writing-practice-blank {
    min-width: 5.4rem;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.22rem 0.14rem;
    border-bottom: 0.28rem solid var(--writing-accent);
}

.writing-practice-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.fib-option {
    min-height: 4rem;
    width: 100%;
    padding: 1rem 1.1rem;
    border: none;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 30px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.fib-option:hover,
.fib-option:focus-visible {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 34px rgba(40, 43, 81, 0.08),
    inset 0 0 0 2px rgba(0, 80, 212, 0.16);
}

.writing-practice-page--fill .fib-option:hover,
.writing-practice-page--fill .fib-option:focus-visible {
    box-shadow: 0 20px 34px rgba(40, 43, 81, 0.08),
    inset 0 0 0 2px rgba(0, 105, 71, 0.14);
}

.fib-option.is-correct,
.fib-option.is-reveal {
    background: rgba(234, 247, 240, 0.98);
    color: var(--color-kinetic-secondary);
    box-shadow: 0 20px 34px rgba(40, 43, 81, 0.05),
    inset 0 0 0 2px rgba(0, 105, 71, 0.18);
}

.fib-option.is-incorrect {
    background: rgba(255, 240, 243, 0.98);
    color: #b31b25;
    box-shadow: 0 20px 34px rgba(40, 43, 81, 0.05),
    inset 0 0 0 2px rgba(191, 10, 48, 0.16);
}

.fib-option:disabled {
    cursor: not-allowed;
}

.writing-practice-input-label {
    color: rgba(40, 43, 81, 0.58);
}

.writing-practice-input {
    width: 100%;
    min-height: 3.6rem;
    padding: 1rem 1.05rem;
    border: none;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.writing-practice-input::placeholder {
    color: rgba(40, 43, 81, 0.42);
}

.writing-practice-input:focus {
    outline: none;
    background: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(0, 80, 212, 0.3),
    0 0 0 4px rgba(0, 80, 212, 0.08);
}

.writing-practice-page--fill .writing-practice-input:focus {
    box-shadow: inset 0 0 0 2px rgba(0, 105, 71, 0.28),
    0 0 0 4px rgba(0, 105, 71, 0.08);
}

.writing-practice-primary-btn {
    min-height: 3.35rem;
    width: 100%;
    padding: 0.95rem 1.25rem;
    border: none;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, var(--writing-accent) 0%, var(--writing-accent-strong) 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.writing-practice-primary-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.writing-practice-primary-btn--centered {
    width: auto;
    min-width: 15rem;
    margin: 2rem auto 0;
}

.writing-practice-result-card {
    display: grid;
    gap: 1.2rem;
    text-align: left;
}

.writing-practice-result-card[data-state="correct"] {
    background: linear-gradient(180deg, rgba(234, 247, 240, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 24px 42px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(0, 105, 71, 0.14);
}

.writing-practice-result-card[data-state="incorrect"] {
    background: linear-gradient(180deg, rgba(255, 248, 233, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 24px 42px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(129, 81, 0, 0.14);
}

.writing-practice-result-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.writing-practice-result-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.86);
    color: var(--writing-accent);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.writing-practice-result-card[data-state="correct"] .writing-practice-result-icon {
    color: var(--color-kinetic-secondary);
}

.writing-practice-result-card[data-state="incorrect"] .writing-practice-result-icon {
    color: #815100;
}

.writing-practice-result-title {
    margin: 0;
    font-family: var(--font-kinetic-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--color-kinetic-on-surface);
}

.writing-practice-feedback-grid {
    display: grid;
    gap: 0.8rem;
}

.writing-practice-feedback-block {
    padding: 1rem 1.05rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.12);
}

.writing-practice-feedback-block--muted {
    background: rgba(241, 239, 255, 0.74);
}

.writing-practice-feedback-label {
    margin: 0 0 0.4rem;
    color: rgba(40, 43, 81, 0.54);
}

.writing-practice-feedback-value {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-kinetic-on-surface);
}

.writing-practice-summary {
    display: grid;
    gap: 1.5rem;
}

.writing-practice-summary-head {
    max-width: 32rem;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
}

.writing-practice-summary-icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 34px rgba(40, 43, 81, 0.08),
    inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    font-size: 2.1rem;
    color: var(--writing-accent);
}

.writing-practice-summary-title {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 0.96;
}

.writing-practice-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.writing-practice-metric {
    padding: 1.35rem 1.2rem;
    text-align: center;
}

.writing-practice-review-list {
    display: grid;
    gap: 1rem;
    text-align: left;
}

.writing-practice-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.writing-practice-section-title {
    margin: 0.3rem 0 0;
    font-size: 1.45rem;
    font-weight: 800;
}

.writing-practice-review-card {
    padding: 1.15rem 1.2rem;
    display: grid;
    gap: 0.8rem;
}

.writing-practice-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.writing-practice-review-index {
    margin: 0;
    font-family: var(--font-kinetic-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.writing-practice-review-state {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.writing-practice-review-state.is-correct {
    color: var(--color-kinetic-secondary);
}

.writing-practice-review-state.is-incorrect {
    color: #b31b25;
}

.writing-practice-review-copy {
    display: grid;
    gap: 0.48rem;
}

.writing-practice-review-text {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.68;
    color: var(--color-kinetic-on-surface);
}

.writing-practice-review-meta {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: rgba(40, 43, 81, 0.66);
}

.writing-practice-review-meta strong {
    color: var(--color-kinetic-on-surface);
}

/* Writing hub */
.writing-hub-page {
    max-width: 76rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4.5rem;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
}

.writing-hub-page *,
.writing-hub-page *::before,
.writing-hub-page *::after {
    box-sizing: border-box;
}

.writing-hub-page .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.writing-hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.88fr);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.writing-hub-kicker,
.writing-hub-metric-label,
.writing-hub-card-detail dt,
.writing-hub-note-kicker,
.writing-hub-card-badge {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.writing-hub-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.88rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    color: var(--color-kinetic-primary);
}

.writing-hub-kicker .material-symbols-outlined {
    font-size: 1rem;
}

.writing-hub-title,
.writing-hub-note-title,
.writing-hub-card-title {
    font-family: var(--font-kinetic-display);
    letter-spacing: -0.06em;
}

.writing-hub-title {
    margin: 1rem 0 0;
    font-size: clamp(2.6rem, 6vw, 4.45rem);
    line-height: 0.92;
    font-weight: 800;
}

.writing-hub-title span {
    display: block;
    margin-top: 0.7rem;
    font-size: clamp(1.3rem, 3vw, 2.2rem);
    line-height: 1.05;
    color: rgba(40, 43, 81, 0.76);
}

.writing-hub-copy {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: rgba(40, 43, 81, 0.68);
    font-size: 1rem;
    line-height: 1.72;
}

.writing-hub-path {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    margin-top: 1.35rem;
    padding: 1rem;
    border-radius: 1.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 239, 255, 0.92) 100%);
    box-shadow: 0 24px 42px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.writing-hub-path-step {
    min-width: 0;
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
}

.writing-hub-path-step .material-symbols-outlined {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(238, 243, 255, 0.94);
    color: var(--color-kinetic-primary);
    font-size: 1.35rem;
}

.writing-hub-path-step strong {
    display: block;
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--color-kinetic-on-surface);
}

.writing-hub-path-step span:not(.material-symbols-outlined) {
    display: block;
    margin-top: 0.18rem;
    color: rgba(40, 43, 81, 0.62);
    font-size: 0.88rem;
    line-height: 1.5;
}

.writing-hub-path-arrow {
    color: rgba(40, 43, 81, 0.34);
    font-size: 1.1rem;
}

.writing-hub-hero-note {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.95rem;
    padding: 1.1rem;
    border-radius: 1.65rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16),
    0 16px 30px rgba(40, 43, 81, 0.05);
    backdrop-filter: blur(20px);
}

.writing-hub-hero-note .material-symbols-outlined {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(238, 243, 255, 0.94);
    color: var(--color-kinetic-primary);
    font-size: 1.4rem;
}

.writing-hub-note-kicker {
    margin: 0;
    color: rgba(40, 43, 81, 0.56);
}

.writing-hub-note-title {
    margin: 0.5rem 0 0;
    font-size: 1.6rem;
    line-height: 1.04;
    font-weight: 800;
}

.writing-hub-note-copy {
    margin: 0.75rem 0 0;
    color: rgba(40, 43, 81, 0.66);
    line-height: 1.65;
}

.writing-hub-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.writing-hub-metric,
.writing-hub-card {
    border-radius: 1.9rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 239, 255, 0.92) 100%);
    box-shadow: 0 26px 46px rgba(40, 43, 81, 0.06),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.writing-hub-metric {
    padding: 1.2rem 1.25rem;
}

.writing-hub-metric--accent {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 243, 255, 0.96) 100%);
}

.writing-hub-metric-label {
    margin: 0;
    color: rgba(40, 43, 81, 0.54);
}

.writing-hub-metric-value {
    margin: 0.55rem 0 0;
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    color: var(--color-kinetic-primary);
}

.writing-hub-metric-detail {
    margin: 0.42rem 0 0;
    color: rgba(40, 43, 81, 0.64);
    line-height: 1.58;
}

.writing-hub-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.2rem;
    align-items: start;
}

.writing-hub-card {
    padding: 1.55rem;
}

.writing-hub-card--support {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 247, 242, 0.94) 100%);
}

.writing-hub-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.writing-hub-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.46rem 0.76rem;
    border-radius: 999px;
    background: rgba(238, 243, 255, 0.94);
    color: var(--color-kinetic-primary);
}

.writing-hub-card-badge--support {
    background: rgba(234, 247, 240, 0.95);
    color: var(--color-kinetic-secondary);
}

.writing-hub-card-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1.12rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, #4c82ff 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(0, 80, 212, 0.18);
}

.writing-hub-card-icon--support {
    background: linear-gradient(135deg, var(--color-kinetic-secondary) 0%, #3cae7d 100%);
    box-shadow: 0 18px 34px rgba(0, 105, 71, 0.16);
}

.writing-hub-card-head {
    margin-top: 1rem;
}

.writing-hub-card-title {
    margin: 0;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    line-height: 0.98;
    font-weight: 800;
}

.writing-hub-card-summary {
    margin: 0.5rem 0 0;
    color: rgba(40, 43, 81, 0.68);
    font-size: 1rem;
    line-height: 1.6;
}

.writing-hub-card-details {
    margin: 1.2rem 0 0;
    display: grid;
    gap: 0.95rem;
}

.writing-hub-card-detail {
    padding: 1rem 1.05rem;
    border-radius: 1.35rem;
    background: rgba(248, 245, 255, 0.82);
}

.writing-hub-card--support .writing-hub-card-detail {
    background: rgba(243, 250, 246, 0.9);
}

.writing-hub-card-detail dt {
    color: rgba(40, 43, 81, 0.54);
}

.writing-hub-card-detail dd {
    margin: 0.42rem 0 0;
    color: rgba(40, 43, 81, 0.74);
    line-height: 1.58;
}

.writing-hub-card-footer {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.writing-hub-card-latest,
.writing-hub-card-footer-copy {
    margin: 0;
    color: rgba(40, 43, 81, 0.66);
    line-height: 1.58;
}

.writing-hub-card-latest {
    font-weight: 700;
}

.writing-hub-card-cta {
    width: 100%;
    min-height: 3.4rem;
    margin-top: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.95rem 1.2rem;
    border-radius: 1.3rem;
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, var(--color-kinetic-primary-dim) 100%);
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 22px 38px rgba(0, 80, 212, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.writing-hub-card-cta:hover,
.writing-hub-card-cta:focus-visible {
    transform: translateY(-1px);
}

.writing-hub-card-cta:active {
    transform: scale(0.98);
}

.writing-hub-card-cta--support {
    background: linear-gradient(135deg, var(--color-kinetic-secondary) 0%, #0a7a57 100%);
    box-shadow: 0 22px 38px rgba(0, 105, 71, 0.16);
}

/* Reading practice checkpoint */
.reading-practice-page {
    --reading-accent: var(--color-kinetic-primary);
    --reading-accent-strong: var(--color-kinetic-primary-dim);
    --reading-accent-soft: rgba(0, 80, 212, 0.12);
    --reading-accent-surface: rgba(238, 243, 255, 0.94);
    --reading-success-soft: rgba(0, 105, 71, 0.12);
    --reading-warning-soft: rgba(129, 81, 0, 0.12);
    --reading-card-shadow: 0 28px 48px rgba(40, 43, 81, 0.07);
    max-width: 76rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4.5rem;
    color: var(--color-kinetic-on-surface);
    font-family: var(--font-kinetic-body);
}

.reading-practice-page [hidden] {
    display: none !important;
}

.reading-practice-page *,
.reading-practice-page *::before,
.reading-practice-page *::after {
    box-sizing: border-box;
}

.reading-practice-page .material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.reading-practice-state,
.reading-practice-summary {
    text-align: center;
}

.reading-practice-state {
    max-width: 32rem;
    margin: 0 auto;
    padding: 5rem 0 3rem;
}

.reading-practice-state-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--reading-accent) 0%, #4c82ff 100%);
    color: #ffffff;
    font-size: 2.1rem;
    box-shadow: 0 20px 34px rgba(0, 80, 212, 0.18);
    animation: reading-practice-pulse 1.8s ease-in-out infinite;
}

.reading-practice-state-icon--muted {
    animation: none;
    background: rgba(241, 239, 255, 0.96);
    color: rgba(40, 43, 81, 0.42);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.reading-practice-state-title,
.reading-practice-title,
.reading-practice-section-title,
.reading-practice-summary-title,
.reading-practice-result-title,
.reading-practice-review-index,
.reading-practice-recorder-title {
    font-family: var(--font-kinetic-display);
    letter-spacing: -0.06em;
}

.reading-practice-state-title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
}

.reading-practice-state-copy,
.reading-practice-copy,
.reading-practice-card-copy,
.reading-practice-result-copy,
.reading-practice-summary-copy,
.reading-practice-section-copy,
.reading-practice-recorder-body,
.reading-practice-inline-note-copy,
.reading-practice-review-meta {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(40, 43, 81, 0.66);
}

.reading-practice-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem 1.5rem;
    align-items: start;
    margin-bottom: 1.6rem;
}

.reading-practice-hero--with-actions {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, auto);
}

.reading-practice-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.46rem 0.82rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    color: var(--reading-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.reading-practice-kicker--centered {
    justify-content: center;
}

.reading-practice-kicker .material-symbols-outlined {
    font-size: 1rem;
}

.reading-practice-title {
    margin: 1rem 0 0;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 0.95;
    font-weight: 800;
}

.reading-practice-title span {
    display: block;
}

.reading-practice-copy {
    max-width: 43rem;
    margin-top: 0.9rem;
}

.reading-practice-hero-note {
    min-width: 18rem;
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.45rem;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16),
    0 14px 30px rgba(40, 43, 81, 0.05);
}

.reading-practice-hero-note--compact {
    min-width: 0;
    max-width: 22rem;
}

.reading-practice-hero-note .material-symbols-outlined {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--reading-accent-surface);
    color: var(--reading-accent);
    font-size: 1.4rem;
}

.reading-practice-hero-note strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.55);
}

.reading-practice-hero-note span {
    display: block;
    margin-top: 0.28rem;
    font-size: 0.92rem;
    line-height: 1.58;
    color: rgba(40, 43, 81, 0.68);
}

.reading-practice-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.reading-practice-section-title {
    margin: 0.28rem 0 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.reading-practice-section-copy {
    max-width: 22rem;
    font-size: 0.92rem;
}

.reading-practice-label,
.reading-practice-score-label,
.reading-practice-metric-label,
.reading-practice-feedback-label,
.reading-practice-inline-note-title,
.reading-practice-category-count {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.reading-practice-label {
    margin: 0;
    color: var(--reading-accent);
}

.reading-practice-category-board,
.reading-practice-review-list {
    display: grid;
    gap: 1rem;
}

.reading-practice-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.reading-practice-category-card {
    width: 100%;
    padding: 1.35rem;
    border: none;
    border-radius: 1.8rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 239, 255, 0.92) 100%);
    box-shadow: var(--reading-card-shadow),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
    display: grid;
    gap: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.reading-practice-category-card:hover,
.reading-practice-category-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 30px 52px rgba(40, 43, 81, 0.08),
    inset 0 0 0 2px rgba(0, 80, 212, 0.14);
}

.reading-practice-category-card:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

.reading-practice-category-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.reading-practice-category-card-title {
    margin: 0;
    font-family: var(--font-kinetic-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--color-kinetic-on-surface);
}

.reading-practice-category-card-copy {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.68;
    color: rgba(40, 43, 81, 0.66);
}

.reading-practice-category-arrow {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--reading-accent-surface);
    color: var(--reading-accent);
    flex-shrink: 0;
}

.reading-practice-category-arrow .material-symbols-outlined {
    font-size: 1.2rem;
}

.reading-practice-category-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.reading-practice-category-count {
    color: rgba(40, 43, 81, 0.54);
}

.reading-practice-category-link {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--reading-accent);
}

.reading-practice-primary-btn,
.reading-practice-secondary-btn {
    min-height: 3.35rem;
    border: none;
    border-radius: 1.25rem;
    font-family: var(--font-kinetic-body);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.reading-practice-primary-btn {
    width: 100%;
    padding: 0.95rem 1.25rem;
    background: linear-gradient(135deg, var(--reading-accent) 0%, var(--reading-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 24px 40px rgba(0, 80, 212, 0.16);
}

.reading-practice-primary-btn--wide {
    margin-top: 0.25rem;
}

.reading-practice-primary-btn--centered {
    width: auto;
    min-width: 15rem;
    margin: 2rem auto 0;
}

.reading-practice-secondary-btn {
    width: auto;
    padding: 0.92rem 1.15rem;
    background: rgba(255, 255, 255, 0.84);
    color: var(--reading-accent);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.reading-practice-primary-btn:active,
.reading-practice-secondary-btn:active,
.reading-practice-record-button:active {
    transform: scale(0.98);
}

.reading-practice-primary-btn:disabled,
.reading-practice-secondary-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

.reading-practice-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 1.25rem;
    align-items: end;
    margin-bottom: 1.45rem;
}

.reading-practice-progress-label {
    margin: 0 0 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(40, 43, 81, 0.72);
}

.reading-practice-progress-track {
    width: min(100%, 22rem);
    height: 0.7rem;
    border-radius: 999px;
    background: rgba(40, 43, 81, 0.08);
    overflow: hidden;
}

.reading-practice-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-kinetic-secondary) 0%, #2ca06c 100%);
    transition: width 0.28s ease;
}

.reading-practice-score {
    text-align: right;
}

.reading-practice-score-value,
.reading-practice-metric-value {
    display: block;
    font-family: var(--font-kinetic-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    color: var(--reading-accent);
}

.reading-practice-score-label,
.reading-practice-metric-label {
    margin: 0.1rem 0 0;
    color: rgba(40, 43, 81, 0.54);
}

.reading-practice-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.92fr);
    gap: 1.25rem;
    align-items: start;
}

.reading-practice-stack {
    display: grid;
    gap: 1.1rem;
}

.reading-practice-card,
.reading-practice-result-card,
.reading-practice-metric,
.reading-practice-review-card {
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 239, 255, 0.92) 100%);
    box-shadow: var(--reading-card-shadow),
    inset 0 0 0 1px rgba(167, 170, 215, 0.14);
}

.reading-practice-card,
.reading-practice-result-card {
    padding: 1.55rem;
}

.reading-practice-card-heading {
    display: grid;
    gap: 0.42rem;
}

.reading-practice-card--prompt {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.reading-practice-card--recorder {
    display: grid;
    gap: 1rem;
}

.reading-practice-sentence {
    margin: 0;
    font-family: var(--font-kinetic-display);
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: var(--color-kinetic-on-surface);
}

.reading-practice-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2.25rem;
    margin: 0;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: var(--reading-accent-surface);
    color: var(--reading-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.reading-practice-recorder-stage {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.reading-practice-record-button {
    width: 6.8rem;
    height: 6.8rem;
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--reading-accent) 0%, var(--reading-accent-strong) 100%);
    color: #ffffff;
    box-shadow: 0 24px 40px rgba(0, 80, 212, 0.2);
    cursor: pointer;
}

.reading-practice-record-button:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.reading-practice-record-button .material-symbols-outlined {
    font-size: 2.6rem;
}

.reading-practice-recorder-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-kinetic-on-surface);
}

.reading-practice-recorder-body {
    margin-top: 0.34rem;
    font-size: 0.94rem;
}

#recorder-card[data-recorder-state="recording"] .reading-practice-record-button {
    background: linear-gradient(135deg, #cf3d56 0%, #b91c41 100%);
    box-shadow: 0 24px 40px rgba(191, 10, 48, 0.2);
    animation: reading-practice-float 1.05s ease-in-out infinite alternate;
}

#recorder-card[data-recorder-state="processing"] .reading-practice-record-button,
#recorder-card[data-recorder-state="requesting"] .reading-practice-record-button {
    background: linear-gradient(135deg, #7f95c8 0%, #6478aa 100%);
    box-shadow: 0 24px 40px rgba(100, 120, 170, 0.16);
}

#recorder-card[data-recorder-state="permission-denied"] .reading-practice-record-button,
#recorder-card[data-recorder-state="evaluation-error"] .reading-practice-record-button,
#recorder-card[data-recorder-state="unsupported"] .reading-practice-record-button {
    background: rgba(255, 255, 255, 0.94);
    color: rgba(40, 43, 81, 0.34);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.18);
}

.reading-practice-processing {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.reading-practice-processing-spinner {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 3px solid rgba(40, 43, 81, 0.12);
    border-top-color: var(--reading-accent);
    animation: reading-practice-spin 0.8s linear infinite;
}

.reading-practice-processing-copy {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(40, 43, 81, 0.68);
}

.reading-practice-inline-note {
    padding: 1rem 1.05rem;
    border-radius: 1.3rem;
    background: rgba(255, 248, 233, 0.98);
    box-shadow: inset 0 0 0 1px rgba(129, 81, 0, 0.14);
}

.reading-practice-inline-note[data-state="info"] {
    background: rgba(238, 243, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(0, 80, 212, 0.14);
}

.reading-practice-inline-note-title {
    margin: 0 0 0.35rem;
    color: rgba(40, 43, 81, 0.58);
}

.reading-practice-inline-note-copy {
    font-size: 0.92rem;
}

.reading-practice-result-card {
    display: grid;
    gap: 1.2rem;
    text-align: left;
}

.reading-practice-result-card[data-state="correct"] {
    background: linear-gradient(180deg, rgba(234, 247, 240, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 24px 42px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(0, 105, 71, 0.14);
}

.reading-practice-result-card[data-state="incorrect"] {
    background: linear-gradient(180deg, rgba(255, 248, 233, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 24px 42px rgba(40, 43, 81, 0.05),
    inset 0 0 0 1px rgba(129, 81, 0, 0.14);
}

.reading-practice-result-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
}

.reading-practice-result-icon,
.reading-practice-review-state {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.16);
}

.reading-practice-result-icon {
    color: var(--reading-accent);
}

.reading-practice-result-card[data-state="correct"] .reading-practice-result-icon,
.reading-practice-review-state.is-correct {
    color: var(--color-kinetic-secondary);
}

.reading-practice-result-card[data-state="incorrect"] .reading-practice-result-icon,
.reading-practice-review-state.is-incorrect {
    color: #815100;
}

.reading-practice-result-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--color-kinetic-on-surface);
}

.reading-practice-result-copy--body {
    font-size: 0.96rem;
}

.reading-practice-feedback-grid {
    display: grid;
    gap: 0.8rem;
}

.reading-practice-feedback-block {
    padding: 1rem 1.05rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 0 0 1px rgba(167, 170, 215, 0.12);
}

.reading-practice-feedback-block--accent {
    background: rgba(255, 248, 233, 0.94);
}

.reading-practice-feedback-block--muted {
    background: rgba(241, 239, 255, 0.74);
}

.reading-practice-feedback-label {
    margin: 0 0 0.4rem;
    color: rgba(40, 43, 81, 0.54);
}

.reading-practice-feedback-value,
.reading-practice-review-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-kinetic-on-surface);
}

.reading-practice-summary {
    display: grid;
    gap: 1.5rem;
}

.reading-practice-summary-head {
    max-width: 34rem;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
}

.reading-practice-summary-icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 34px rgba(40, 43, 81, 0.08),
    inset 0 0 0 1px rgba(167, 170, 215, 0.16);
    font-size: 2.1rem;
    color: var(--reading-accent);
}

.reading-practice-summary-title {
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 0.96;
}

.reading-practice-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.reading-practice-metric {
    padding: 1.35rem 1.2rem;
    text-align: center;
}

.reading-practice-review-card {
    padding: 1.15rem 1.2rem;
    display: grid;
    gap: 0.8rem;
}

.reading-practice-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.reading-practice-review-index {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}

.reading-practice-review-copy {
    display: grid;
    gap: 0.48rem;
}

.reading-practice-review-meta strong {
    color: var(--color-kinetic-on-surface);
}

@keyframes reading-practice-pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes reading-practice-float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-4px);
    }
}

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

@keyframes writing-practice-pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@keyframes writing-practice-float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-4px);
    }
}

@media (max-width: 1100px) {
    .student-auth-card,
    .student-profile-grid {
        grid-template-columns: 1fr;
    }

    .writing-practice-page--dictation .writing-practice-shell {
        grid-template-columns: 1fr;
    }

    .reading-practice-shell,
    .reading-practice-category-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .student-app-nav-shell {
        display: none;
    }

    .student-app-profile-copy span {
        display: none;
    }

    .student-app-mobile-dock {
        display: grid;
    }

    .student-app-main {
        padding-bottom: 6.4rem;
    }

    .student-profile-hero {
        flex-direction: column;
    }

    .writing-practice-page {
        padding: 1.35rem 1rem 14rem;
    }

    .writing-hub-page {
        padding: 1.35rem 1rem 14rem;
    }

    .reading-practice-page {
        padding: 1.35rem 1rem 14rem;
    }

    .writing-hub-hero,
    .writing-practice-hero,
    .writing-practice-hero--with-actions {
        grid-template-columns: 1fr;
    }

    .reading-practice-hero,
    .reading-practice-hero--with-actions {
        grid-template-columns: 1fr;
    }

    .writing-practice-rail {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .reading-practice-rail {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .writing-practice-hero-actions {
        justify-items: stretch;
    }

    .writing-practice-hero-note {
        min-width: 0;
    }

    .reading-practice-hero-note {
        min-width: 0;
    }

    .writing-hub-progress,
    .writing-hub-card-grid {
        grid-template-columns: 1fr;
    }

    .writing-hub-path {
        grid-template-columns: 1fr;
    }

    .writing-hub-path-arrow {
        display: none;
    }

    .writing-practice-mode-switch {
        width: 100%;
    }

    .reading-practice-section-head {
        align-items: start;
        flex-direction: column;
    }

    .reading-practice-section-copy {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .student-app-topbar {
        padding: 0.9rem 1rem;
    }

    .student-app-brandcopy span,
    .student-app-profile-copy {
        display: none;
    }

    .student-auth-header {
        padding: 1.1rem 1rem 0;
    }

    .student-auth-main {
        padding: 1rem;
    }

    .writing-hub-title {
        font-size: clamp(2.1rem, 9vw, 3rem);
    }

    .writing-hub-title span {
        font-size: clamp(1.15rem, 5vw, 1.6rem);
    }

    .writing-hub-card,
    .writing-hub-metric {
        padding-left: 1.15rem;
        padding-right: 1.15rem;
    }

    .student-auth-panel {
        padding: 1.4rem;
    }

    .student-auth-panel-hero {
        display: none;
    }

    .student-profile-page {
        padding: 1.25rem 1rem 2.5rem;
    }

    .student-profile-form-grid {
        grid-template-columns: 1fr;
    }

    .writing-practice-title {
        font-size: clamp(2rem, 14vw, 3.2rem);
    }

    .reading-practice-title {
        font-size: clamp(2rem, 14vw, 3.2rem);
    }

    .writing-practice-sentence,
    .writing-practice-fallback-text {
        font-size: clamp(1.55rem, 10vw, 2.2rem);
    }

    .reading-practice-sentence {
        font-size: clamp(1.55rem, 10vw, 2.45rem);
    }

    .writing-practice-card,
    .writing-practice-result-card,
    .writing-practice-metric,
    .writing-practice-review-card {
        border-radius: 1.7rem;
    }

    .reading-practice-card,
    .reading-practice-result-card,
    .reading-practice-metric,
    .reading-practice-review-card,
    .reading-practice-category-card {
        border-radius: 1.7rem;
    }

    .writing-practice-metrics,
    .writing-practice-options {
        grid-template-columns: 1fr;
    }

    .reading-practice-metrics {
        grid-template-columns: 1fr;
    }

    .writing-practice-progress-track {
        width: 100%;
    }

    .reading-practice-progress-track {
        width: 100%;
    }

    .reading-practice-recorder-stage {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .reading-practice-record-button {
        width: 6rem;
        height: 6rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HANDWRITING DICTATION — Canvas, toolbar, and hub card variant
   "Kinetic Academic" rules: no 1px borders for sectioning, no Material drop
   shadows. Use tonal layering and ambient tinted shadows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hub card — third variant alongside --recommended and --support */
.writing-hub-card--handwriting {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 237, 216, 0.55) 100%);
}

.writing-hub-card--handwriting .writing-hub-card-detail {
    background: rgba(245, 237, 216, 0.7);
}

.writing-hub-card-badge--handwriting {
    background: rgba(212, 175, 55, 0.18);
    color: #815100;
}

.writing-hub-card-icon--handwriting {
    background: linear-gradient(135deg, #d4af37 0%, #815100 100%);
    color: #fffdf5;
}

.writing-hub-card-cta--handwriting {
    background: linear-gradient(135deg, #815100 0%, #d4af37 100%);
    color: #fffdf5;
}

.writing-hub-card-cta--handwriting:hover {
    filter: brightness(1.05);
}

/* Practice page hero accent */
.writing-practice-page--handwriting .writing-practice-kicker {
    background: rgba(212, 175, 55, 0.18);
    color: #815100;
}

/* ── Phase 4: widen shell + compact chrome on the handwriting page ─────── */

.writing-practice-page--handwriting {
    max-width: min(1700px, calc(100vw - 2rem));
    padding: 0.85rem 1rem 1.1rem;
}

.writing-practice-page--handwriting .writing-practice-hero {
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.6rem;
    gap: 0.5rem 1rem;
    align-items: center;
}

.writing-practice-page--handwriting .writing-practice-title {
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    line-height: 1.1;
    margin: 0.1rem 0 0.15rem;
}

.writing-practice-page--handwriting .writing-practice-copy {
    display: none;
}

.writing-practice-page--handwriting .writing-practice-hero-note {
    display: none;
}

.writing-practice-page--handwriting .writing-practice-rail {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    gap: 0.4rem 1rem;
}

.writing-practice-page--handwriting .writing-practice-progress-block {
    gap: 0.35rem;
}

.writing-practice-page--handwriting .writing-practice-progress-label {
    font-size: 0.78rem;
}

.writing-practice-page--handwriting .writing-practice-score-value {
    font-size: 1.6rem;
}

.writing-practice-page--handwriting .writing-practice-score-label {
    font-size: 0.7rem;
}

.writing-practice-page--handwriting .writing-practice-shell {
    gap: 0.85rem;
}

.writing-practice-page--handwriting .writing-practice-card {
    padding: 1rem 1.1rem;
}

.writing-practice-page--handwriting .writing-practice-stack {
    gap: 0.75rem;
}

.writing-practice-page--handwriting .writing-practice-card--feature {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.85rem;
    text-align: left;
}

.writing-practice-page--handwriting .writing-practice-card--feature .writing-practice-card-heading {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
}

.writing-practice-page--handwriting .writing-practice-card--feature .writing-practice-card-copy {
    display: none;
}

.writing-practice-page--handwriting .writing-practice-card--feature .writing-practice-label {
    font-size: 0.72rem;
}

.writing-practice-page--handwriting .writing-practice-audio-button {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    margin: 0;
    order: -1;
}

.writing-practice-page--handwriting .writing-practice-audio-button .material-symbols-outlined {
    font-size: 1.5rem;
}

.writing-practice-page--handwriting .writing-practice-card--feature .writing-practice-status,
.writing-practice-page--handwriting .writing-practice-card--feature .writing-practice-chip {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.78rem;
}

.writing-practice-page--handwriting .writing-practice-card--feature audio,
.writing-practice-page--handwriting .writing-practice-card--feature .writing-practice-fallback {
    flex-basis: 100%;
}

.writing-practice-page--handwriting .writing-practice-card--feature .autoplay-toggle-wrapper {
    margin-left: auto;
    flex: 0 0 auto;
}

.writing-practice-page--handwriting .writing-practice-card--support .writing-practice-card-heading {
    padding: 0.25rem 0 0;
    gap: 0.25rem;
}

.writing-practice-page--handwriting .writing-practice-card--support .writing-practice-card-copy {
    display: none;
}

.writing-practice-page--handwriting .handwriting-toolbar {
    padding: 0.45rem 0.6rem;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.writing-practice-page--handwriting .handwriting-tool-button {
    width: 36px;
    height: 36px;
}

.writing-practice-page--handwriting .handwriting-color-swatch {
    width: 22px;
    height: 22px;
}

.writing-practice-page--handwriting .handwriting-canvas-frame {
    margin-bottom: 0.5rem;
}

.writing-practice-page--handwriting .writing-practice-primary-btn {
    padding: 0.7rem 1.25rem;
    font-size: 0.95rem;
}

@media (max-width: 1100px) {
    .writing-practice-page--handwriting .writing-practice-hero-note {
        display: none;
    }
}

/* ── Drawing toolbar ──────────────────────────────────────────────────── */

.handwriting-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-kinetic-surface-low);
    border-radius: 1.25rem;
    margin-bottom: 1rem;
}

.handwriting-toolbar-divider {
    width: 1px;
    height: 1.75rem;
    background: rgba(40, 43, 81, 0.12);
}

.handwriting-toolbar-spacer {
    flex: 1;
    min-width: 0.5rem;
}

.handwriting-tool-button {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.85rem;
    background: var(--color-kinetic-surface-lowest);
    color: var(--color-kinetic-on-surface);
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease;
    font-family: inherit;
}

.handwriting-tool-button:hover:not(:disabled) {
    background: var(--color-kinetic-primary-surface);
}

.handwriting-tool-button:active:not(:disabled) {
    transform: scale(0.98);
}

.handwriting-tool-button.is-active {
    background: linear-gradient(135deg, var(--color-kinetic-primary) 0%, var(--color-kinetic-primary-dim) 100%);
    color: #fff;
}

.handwriting-tool-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.handwriting-tool-button--danger:hover:not(:disabled) {
    background: rgba(191, 10, 48, 0.12);
    color: #8b0a22;
}

.handwriting-tool-button .material-symbols-outlined {
    font-size: 1.25rem;
}

.handwriting-color-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.handwriting-color-swatch {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
    transition: transform 120ms ease, box-shadow 120ms ease;
    padding: 0;
}

.handwriting-color-swatch:hover {
    transform: scale(1.06);
}

.handwriting-color-swatch.is-active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9),
    0 0 0 3px var(--color-kinetic-primary);
}

.handwriting-width-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-kinetic-on-surface-muted);
}

.handwriting-width-label input[type="range"] {
    width: 6rem;
    accent-color: var(--color-kinetic-primary);
}

.handwriting-width-label .material-symbols-outlined {
    font-size: 1.25rem;
}

/* ── Canvas frame ─────────────────────────────────────────────────────── */

.handwriting-canvas-frame {
    position: relative;
    width: 100%;
    max-height: calc(100dvh - 520px);
    background: #fffdf5;
    border-radius: 1.25rem;
    box-shadow: 0 16px 32px rgba(40, 43, 81, 0.04);
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.handwriting-canvas {
    display: block;
    width: 100%;
    height: clamp(220px, calc(100dvh - 520px), 560px);
    max-height: calc(100dvh - 520px);
    touch-action: none;
    cursor: crosshair;
    background: repeating-linear-gradient(to bottom,
    transparent 0,
    transparent calc(12.5% - 1px),
    rgba(40, 43, 81, 0.1) calc(12.5% - 1px),
    rgba(40, 43, 81, 0.1) 12.5%);
}

.handwriting-canvas-baseline {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 28%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(40, 43, 81, 0.18), transparent);
    pointer-events: none;
}

/* ── Fullscreen mode (toolbar + canvas + submit fill the viewport) ────── */

#answer-section:fullscreen,
#answer-section:-webkit-full-screen {
    background: var(--color-kinetic-surface, #f8f5ff);
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

#answer-section:fullscreen .handwriting-toolbar,
#answer-section:-webkit-full-screen .handwriting-toolbar {
    flex: 0 0 auto;
}

#answer-section:fullscreen .handwriting-canvas-frame,
#answer-section:-webkit-full-screen .handwriting-canvas-frame {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

#answer-section:fullscreen .handwriting-canvas,
#answer-section:-webkit-full-screen .handwriting-canvas {
    width: 100%;
    height: 100%;
    max-height: none;
}

#answer-section:fullscreen .writing-practice-primary-btn,
#answer-section:-webkit-full-screen .writing-practice-primary-btn {
    flex: 0 0 auto;
}

/* ── Processing overlay (handwriting evaluation in flight) ────────────── */

.handwriting-processing {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: rgba(248, 245, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: inherit;
    text-align: center;
    z-index: 5;
}

.handwriting-processing[hidden] {
    display: none;
}

.handwriting-processing-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid rgba(0, 80, 212, 0.18);
    border-top-color: #0050d4;
    animation: handwriting-spin 0.9s linear infinite;
}

.handwriting-processing-title {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #282b51;
    letter-spacing: -0.01em;
}

.handwriting-processing-copy {
    margin: 0;
    max-width: 32ch;
    font-family: 'Manrope', system-ui, sans-serif;
    font-size: 0.9rem;
    color: rgba(40, 43, 81, 0.72);
    line-height: 1.45;
}

/* Submit button spinner state */

.writing-practice-primary-btn .submit-btn-spinner {
    display: none;
    margin-left: 0.5rem;
    font-size: 1.1rem;
    animation: handwriting-spin 0.9s linear infinite;
}

.writing-practice-primary-btn.is-processing .submit-btn-spinner {
    display: inline-block;
}

.writing-practice-primary-btn.is-processing {
    cursor: progress;
    opacity: 0.85;
}

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

@media (prefers-reduced-motion: reduce) {
    .handwriting-processing-spinner,
    .writing-practice-primary-btn .submit-btn-spinner {
        animation-duration: 2.4s;
    }
}

/* ── Result extras (image preview + legibility score) ─────────────────── */

.handwriting-result-extras {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0;
}

.handwriting-result-image-wrapper {
    flex: 1 1 320px;
    background: var(--color-kinetic-surface-low);
    padding: 0.85rem;
    border-radius: 1rem;
}

.handwriting-result-image-wrapper img {
    display: block;
    width: 100%;
    border-radius: 0.65rem;
    background: #fffdf5;
}

.handwriting-legibility-block {
    flex: 0 0 8rem;
    background: var(--color-kinetic-secondary-surface);
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    text-align: center;
}

.handwriting-legibility-value {
    font-family: var(--font-kinetic-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-kinetic-secondary);
    margin: 0.25rem 0 0;
    line-height: 1;
}

@media (max-width: 720px) {
    .handwriting-canvas {
        height: clamp(200px, calc(100dvh - 440px), 480px);
        max-height: calc(100dvh - 440px);
    }

    .handwriting-toolbar {
        gap: 0.35rem;
        padding: 0.6rem 0.75rem;
    }

    .handwriting-width-label input[type="range"] {
        width: 4.5rem;
    }
}

/* Hero actions row: aligns study-guide trigger pill + help (?) button */
.writing-practice-hero-actions-row {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}

.writing-practice-hero-actions-row .study-guide-trigger {
    margin: 0;
}

/* ── Handwriting page: onboarding, hints, tooltips ──────────────────── */

.writing-practice-page--handwriting .writing-practice-hero {
    align-items: flex-start;
    gap: 0.75rem;
}

.handwriting-help-button {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 999px;
    background: var(--color-kinetic-surface-low, #f1efff);
    color: var(--color-kinetic-on-surface, #282b51);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.handwriting-help-button:hover,
.handwriting-help-button:focus-visible {
    background: var(--color-kinetic-primary-surface, #e2e8ff);
    outline: none;
    transform: scale(1.04);
}

.handwriting-help-button:active {
    transform: scale(0.97);
}

.handwriting-help-button .material-symbols-outlined {
    font-size: 1.3rem;
}

.handwriting-onboarding-card {
    position: relative;
    flex: 0 0 auto;
    margin-bottom: 1rem;
    padding: 1.4rem 1.6rem 1.5rem;
    background: var(--color-kinetic-surface-lowest, #ffffff);
    border-radius: 1.5rem;
    box-shadow: 0 18px 36px rgba(40, 43, 81, 0.06);
    overflow: hidden;
}

.handwriting-onboarding-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #0050d4 0%, #006947 100%);
}

.handwriting-onboarding-dismiss {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 999px;
    background: rgba(40, 43, 81, 0.06);
    color: rgba(40, 43, 81, 0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.handwriting-onboarding-dismiss:hover,
.handwriting-onboarding-dismiss:focus-visible {
    background: rgba(40, 43, 81, 0.12);
    color: var(--color-kinetic-on-surface, #282b51);
    outline: none;
}

.handwriting-onboarding-dismiss .material-symbols-outlined {
    font-size: 1.15rem;
}

.handwriting-onboarding-head {
    margin-bottom: 1rem;
}

.handwriting-onboarding-title {
    margin: 0.2rem 0 0;
    font-family: var(--font-kinetic-display, "Plus Jakarta Sans", sans-serif);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-kinetic-on-surface, #282b51);
}

.handwriting-onboarding-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.handwriting-onboarding-step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: var(--color-kinetic-surface-low, #f1efff);
    border-radius: 1rem;
}

.handwriting-onboarding-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0050d4 0%, #0046bb 100%);
    color: #ffffff;
    font-family: var(--font-kinetic-display, "Plus Jakarta Sans", sans-serif);
    font-weight: 800;
    font-size: 1rem;
}

.handwriting-onboarding-step-title {
    margin: 0 0 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-kinetic-on-surface, #282b51);
}

.handwriting-onboarding-step-title .material-symbols-outlined {
    font-size: 1.1rem;
    color: #0050d4;
}

.handwriting-onboarding-step-copy {
    margin: 0;
    color: rgba(40, 43, 81, 0.72);
    font-size: 0.88rem;
    line-height: 1.55;
}

.handwriting-onboarding-tip {
    margin: 1rem 0 0;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 80, 212, 0.06);
    border-radius: 1rem;
    color: rgba(40, 43, 81, 0.78);
    font-size: 0.9rem;
    line-height: 1.55;
}

.handwriting-onboarding-tip .material-symbols-outlined {
    font-size: 1.2rem;
    color: #815100;
    flex: 0 0 auto;
}

@media (max-width: 820px) {
    .handwriting-onboarding-steps {
        grid-template-columns: 1fr;
    }

    .handwriting-onboarding-card {
        padding: 1.15rem 1.2rem 1.25rem;
    }
}

/* Inline hints */

.handwriting-audio-hint,
.handwriting-write-hint {
    margin: 0.25rem 0 0;
    color: rgba(40, 43, 81, 0.66);
    font-size: 0.88rem;
    line-height: 1.55;
}

.handwriting-canvas-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.85rem;
    color: rgba(40, 43, 81, 0.6);
    font-size: 0.82rem;
    line-height: 1.5;
}

.handwriting-canvas-hint .material-symbols-outlined {
    font-size: 1rem;
    color: rgba(0, 80, 212, 0.7);
}

.handwriting-submit-hint {
    margin: 0.75rem 0 0;
    text-align: center;
    color: rgba(40, 43, 81, 0.6);
    font-size: 0.82rem;
    line-height: 1.55;
}

/* Toolbar section labels */

.handwriting-toolbar-section-label {
    display: inline-flex;
    align-items: center;
    padding: 0 0.25rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(40, 43, 81, 0.5);
    user-select: none;
}

@media (max-width: 720px) {
    .handwriting-toolbar-section-label {
        display: none;
    }
}

/* CSS-only tooltip popovers (data-tooltip attribute) */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after,
[data-tooltip]::before {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    /* Must beat the sticky topbar (z-index: 50) so tooltips never get clipped. */
    z-index: 1000;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    transform: translate(-50%, 4px);
    padding: 0.45rem 0.7rem;
    background: rgba(40, 43, 81, 0.94);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.005em;
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: min(280px, calc(100vw - 24px));
    border-radius: 0.55rem;
    box-shadow: 0 8px 32px rgba(40, 43, 81, 0.22);
}

[data-tooltip]::before {
    content: "";
    bottom: calc(100% + 2px);
    transform: translate(-50%, 4px);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(40, 43, 81, 0.94);
}

/* Downward variant — for hosts that sit close to the top of the viewport
   or right under a sticky nav, where an upward tooltip would clip. */
[data-tooltip][data-tooltip-placement="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

[data-tooltip][data-tooltip-placement="bottom"]::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top: 0;
    border-bottom: 6px solid rgba(40, 43, 81, 0.94);
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-within::after,
[data-tooltip]:focus-within::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (hover: none) {
    [data-tooltip]::after,
    [data-tooltip]::before {
        display: none;
    }
}

/* ==========================================================================
   Study Guide drawer + onboarding card (shared across reading & writing pages)
   ========================================================================== */

.study-guide-trigger {
    cursor: pointer;
    border: none;
    background: rgba(212, 175, 55, 0.18);
    color: #815100;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.study-guide-trigger:hover,
.study-guide-trigger:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(40, 43, 81, 0.08);
    outline: none;
}

.study-guide-trigger:active {
    transform: scale(0.98);
}

.study-guide-root {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

/* Children inherit pointer-events:none while the drawer is closed so they
   never intercept clicks meant for the page underneath. */
.study-guide-root * {
    pointer-events: none;
}

.study-guide-root.is-open,
.study-guide-root.is-open * {
    pointer-events: auto;
}

.study-guide-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(40, 43, 81, 0.32);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.study-guide-root.is-open .study-guide-backdrop {
    opacity: 1;
}

.study-guide-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(28rem, 100%);
    background: #f8f5ff;
    box-shadow: -16px 0 48px rgba(40, 43, 81, 0.06);
    transform: translateX(100%);
    transition: transform 0.24s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.study-guide-root.is-open .study-guide-drawer {
    transform: translateX(0);
}

.study-guide-drawer-head {
    position: relative;
    padding: 1.6rem 1.6rem 1.2rem;
    background: #f1efff;
}

.study-guide-drawer-title {
    margin: 0.85rem 0 0.4rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #282b51;
}

.study-guide-drawer-copy {
    margin: 0;
    color: rgba(40, 43, 81, 0.78);
    font-size: 0.92rem;
    line-height: 1.45;
}

.study-guide-drawer-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #282b51;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.study-guide-drawer-close:hover,
.study-guide-drawer-close:focus-visible {
    background: #ffffff;
    outline: none;
}

.study-guide-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem;
    margin: 0.9rem 1.6rem 0;
    background: #ffffff;
    border-radius: 1rem;
    color: rgba(40, 43, 81, 0.62);
}

.study-guide-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: #282b51;
    font-family: inherit;
}

.study-guide-search-input::placeholder {
    color: rgba(40, 43, 81, 0.5);
}

.study-guide-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem 1.6rem 1.6rem;
}

.study-guide-loading,
.study-guide-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2.5rem 0;
    color: rgba(40, 43, 81, 0.62);
    text-align: center;
}

.study-guide-error {
    color: #815100;
}

.study-guide-groups {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.study-guide-group {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.1rem 1.2rem 1.25rem;
}

.study-guide-group-head {
    margin-bottom: 0.7rem;
}

.study-guide-group-label {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #282b51;
}

.study-guide-group-desc {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: rgba(40, 43, 81, 0.66);
    line-height: 1.4;
}

.study-guide-words {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.study-guide-word {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    background: #f1efff;
    color: #282b51;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.study-guide-drawer-foot {
    padding: 0.85rem 1.6rem 1.1rem;
    background: #f1efff;
    color: rgba(40, 43, 81, 0.6);
    font-size: 0.78rem;
}

.study-guide-drawer-foot p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.study-guide-drawer-foot .material-symbols-outlined {
    font-size: 1rem;
    color: #006947;
}

@media (max-width: 540px) {
    .study-guide-drawer {
        width: 100%;
    }
}

/* The reusable test-onboarding fragment reuses the existing
   .handwriting-onboarding-card styles defined earlier in this file.
   .test-onboarding-card is just a marker class for selector targeting. */
.test-onboarding-card {
    margin-bottom: 1.4rem;
}