/* ============================================
   My Band Plan — AI IELTS LMS
   Theme: My Band Plan Teal + IELTS Computer-Based
   Mobile-first, clean, functional
   ============================================ */

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

/* ============================================
   CSS VARIABLES — THEME
   ============================================ */
:root {
    /* My Band Plan Teal identity */
    --primary: #1E3A8A;
    --primary-dark: #172554;
    --primary-light: #DBEAFE;

    --secondary: #0EA5E9;
    --secondary-dark: #1D4ED8;
    --secondary-light: #E0F2FE;

    --gold: #D97706;
    --gold-light: #FEF3C7;

    --error: #DC2626;
    --error-light: #FEE2E2;

    --success: #059669;
    --success-light: #D1FAE5;

    --xp-purple: #ce82ff;

    /* Neutral palette */
    --bg: #F8FAFC;
    --bg-card: #ffffff;
    --bg-dark: #0F172A;

    --text: #0F172A;
    --text-secondary: #64748B;
    --text-light: #94A3B8;

    --border: #E2E8F0;
    --border-dark: #CBD5E1;

    /* Sizing */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
    --shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.05), 0 2px 4px -1px rgba(30, 58, 138, 0.03);
    --shadow-md: 0 12px 24px rgba(30, 58, 138, 0.08);
    --shadow-lg: 0 20px 35px rgba(30, 58, 138, 0.12);

    --nav-height: 64px;
    --max-width: 860px;
}

html[data-theme="dark"] {
    /* Reading and writing surfaces stay light for IELTS-style work.
       Dark chrome is used only as an accent so inputs never become low-contrast. */
    --bg: #F5F7FB;
    --bg-card: #FFFFFF;
    --text: #0F172A;
    --text-secondary: #475569;
    --text-light: #64748B;
    --border: #D6DEE8;
    --border-dark: #94A3B8;
    --primary-light: #DBEAFE;
    --secondary-light: #E0F2FE;
    --gold-light: #FEF3C7;
    --error-light: #FEE2E2;
    --success-light: #D1FAE5;
    color-scheme: light;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

[dir="rtl"] {
    font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
    line-height: 1.8;
}

a { color: var(--secondary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-weight: 800; line-height: 1.3; color: var(--text); }
h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }

/* ============================================
   NAVIGATION
   ============================================ */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-bottom: 2px solid var(--border);
    padding: 0 1.25rem;
    height: var(--nav-height);
    position: sticky;
    top: 0;
    z-index: 100;
}

html[data-theme="dark"] .main-nav {
    background: #111827;
    border-bottom-color: #243044;
}

html[data-theme="dark"] .nav-title,
html[data-theme="dark"] .nav-link {
    color: #E5EDF7;
}

html[data-theme="dark"] .nav-link.active {
    background: var(--primary);
    color: #FFFFFF;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-crown { font-size: 1.5rem; }
.nav-title { font-weight: 800; font-size: 1.1rem; color: var(--bg-dark); }

.nav-links {
    display: flex;
    gap: 0.25rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.nav-link:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
    text-decoration: none;
}

.nav-link.active {
    background: var(--primary);
    color: white;
}

.nav-link svg { flex-shrink: 0; }

.nav-admin {
    color: var(--gold);
}
.nav-admin:hover {
    background: var(--gold-light);
    color: var(--gold);
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.trial-badge {
    background: var(--gold-light);
    color: var(--gold);
    border: 1px solid rgba(255, 150, 0, 0.25);
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.trial-badge.active {
    background: var(--success-light);
    color: var(--primary-dark);
}

.trial-badge.expired {
    background: var(--error-light);
    color: var(--error);
}

.nav-username {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text);
}

.btn-logout {
    background: none;
    border: 2px solid var(--border);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-xs);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-logout:hover {
    border-color: var(--error);
    color: var(--error);
}

/* ============================================
   LAYOUT
   ============================================ */
#app-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem;
    min-height: calc(100vh - var(--nav-height));
}

.landing-shell #app-main {
    max-width: none;
    padding: 0;
    min-height: 100vh;
}

.landing-shell {
    background: #F8FAFC;
}

/* ============================================
   PUBLIC LANDING PAGE — TAWFEEQ BLUE
   ============================================ */
.landing-page {
    direction: rtl;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 12%, rgba(14, 165, 233, 0.13), transparent 28rem),
        radial-gradient(circle at 86% 5%, rgba(59, 130, 246, 0.11), transparent 24rem),
        #F8FAFC;
    color: #0F172A;
}

html[dir="ltr"] .landing-page {
    direction: ltr;
}

html[dir="ltr"] .landing-page .landing-nav,
html[dir="ltr"] .landing-page .landing-actions,
html[dir="ltr"] .landing-page .hero-buttons,
html[dir="ltr"] .landing-page .trust-bar {
    flex-direction: row;
}

html[dir="ltr"] .landing-page .hero-copy,
html[dir="ltr"] .landing-page .section-head,
html[dir="ltr"] .landing-page .feature-card,
html[dir="ltr"] .landing-page .step-card,
html[dir="ltr"] .landing-page .price-card,
html[dir="ltr"] .landing-page .faq-list,
html[dir="ltr"] .landing-page .final-cta {
    text-align: left;
}

html[dir="rtl"] .landing-page .hero-copy,
html[dir="rtl"] .landing-page .section-head,
html[dir="rtl"] .landing-page .feature-card,
html[dir="rtl"] .landing-page .step-card,
html[dir="rtl"] .landing-page .price-card,
html[dir="rtl"] .landing-page .faq-list,
html[dir="rtl"] .landing-page .final-cta {
    text-align: right;
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 1rem 0;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.landing-nav.scrolled {
    width: 100%;
    padding: 0.75rem max(1rem, calc((100vw - 1280px) / 2));
    background: rgba(255,255,255,0.84);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.08);
}

.landing-logo,
.landing-links,
.landing-actions,
.hero-buttons,
.trust-bar {
    display: flex;
    align-items: center;
}

.landing-logo {
    gap: 0.7rem;
    color: #1E3A8A;
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: white;
    background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
    box-shadow: 0 14px 30px rgba(30, 58, 138, 0.22);
}

.landing-links {
    gap: 1.4rem;
}

.landing-links button {
    border: 0;
    background: transparent;
    color: #334155;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    padding: 0.35rem 0;
}

.landing-links button:hover,
.landing-login-link:hover {
    color: #1D4ED8;
}

.landing-actions {
    gap: 0.65rem;
}

.landing-login-link {
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    padding: 0.62rem 0.85rem;
    color: #1E3A8A;
    background: #FFFFFF;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(30, 58, 138, 0.06);
}

.lang-toggle,
.landing-ghost,
.landing-cta,
.price-card button {
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

.landing-cta,
.price-card button {
    padding: 0.95rem 1.25rem;
    color: white;
    background: linear-gradient(135deg, #0EA5E9, #1D4ED8);
    box-shadow: 0 16px 30px rgba(14, 165, 233, 0.25);
}

.landing-cta.small {
    padding: 0.7rem 1rem;
    animation: ctaPulse 2.8s infinite;
}

.landing-cta:hover,
.landing-ghost:hover,
.price-card button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    text-decoration: none;
}

.landing-ghost,
.lang-toggle {
    padding: 0.85rem 1rem;
    color: #1E3A8A;
    background: white;
    border: 1px solid #DBEAFE;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
    gap: 4rem;
    width: min(1280px, calc(100% - 32px));
    min-height: calc(100vh - 74px);
    margin: 0 auto;
    padding: 4rem 0 5rem;
}

.hero-copy {
    max-width: 680px;
}

.hero-kicker,
.section-head span,
.onboarding-hook > div > span {
    display: inline-flex;
    margin-bottom: 1rem;
    color: #0EA5E9;
    font-weight: 800;
    letter-spacing: 0;
}

.hero-copy h1 {
    margin: 0;
    color: #0F172A;
    font-size: clamp(2rem, 4.6vw, 3.5rem);
    line-height: 1.18;
    letter-spacing: 0;
}

.hero-copy p {
    max-width: 620px;
    margin: 1.25rem 0 0;
    color: #475569;
    font-size: 1.12rem;
}

.hero-buttons {
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.trust-bar {
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
}

.trust-bar span {
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: white;
    color: #1E3A8A;
    font-weight: 800;
    font-size: 0.88rem;
    box-shadow: var(--shadow);
}

.hero-visual {
    position: relative;
    min-height: 540px;
    display: grid;
    place-items: center;
}

.hero-visual::before {
    content: "";
    position: absolute;
    inset: 4rem 0 2rem;
    border-radius: 42px;
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.1), rgba(14, 165, 233, 0.16));
    transform: rotate(-4deg);
}

.hero-phone {
    position: relative;
    width: min(330px, 80vw);
    padding: 1.2rem;
    border: 10px solid #0F172A;
    border-radius: 34px;
    background: #F8FAFC;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.22);
}

.phone-top {
    width: 88px;
    height: 8px;
    margin: 0 auto 1rem;
    border-radius: 99px;
    background: #CBD5E1;
}

.phone-card {
    padding: 1rem;
    border-radius: 16px;
    background: white;
    box-shadow: var(--shadow);
}

.phone-card span,
.phone-card em {
    display: block;
    color: #64748B;
    font-size: 0.82rem;
    font-style: normal;
}

.phone-card strong {
    display: block;
    margin: 0.2rem 0 0.4rem;
    color: #1E3A8A;
    font-size: 1.2rem;
}

.phone-progress {
    height: 10px;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 99px;
    background: #E2E8F0;
}

.phone-progress i,
.profile-preview i,
.modal-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0EA5E9, #1D4ED8);
}

.phone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}

.phone-grid b {
    padding: 0.75rem;
    border-radius: 12px;
    background: #DBEAFE;
    color: #1E3A8A;
    text-align: center;
}

.band-badge {
    position: absolute;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: white;
    color: #1E3A8A;
    font-weight: 900;
    box-shadow: 0 18px 35px rgba(30, 58, 138, 0.16);
}

.badge-a { top: 86px; right: 36px; }
.badge-b { bottom: 92px; left: 20px; }
.badge-c { top: 190px; left: 34px; }

.proof-band {
    overflow: hidden;
    background: #1E3A8A;
    color: white;
}

.proof-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    padding: 1rem 0;
    font-weight: 800;
    animation: marquee 24s linear infinite;
}

.landing-section,
.onboarding-hook,
.final-cta {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
    padding: 5rem 0;
}

.section-head {
    max-width: 760px;
    margin-bottom: 2rem;
}

.section-head h2,
.onboarding-hook h2,
.final-cta h2 {
    color: #0F172A;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.25;
}

.steps-grid,
.feature-grid,
.pricing-grid {
    display: grid;
    gap: 1.5rem;
}

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

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

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

.step-card,
.feature-card,
.price-card,
.onboarding-hook,
.faq-list details {
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: rgba(255,255,255,0.88);
    box-shadow: var(--shadow);
}

.step-card,
.feature-card,
.price-card {
    padding: 1.5rem;
}

.step-card span {
    color: #0EA5E9;
    font-weight: 900;
}

.step-card h3,
.feature-card h3,
.price-card h3 {
    margin-top: 0.5rem;
    color: #0F172A;
}

.step-card p,
.feature-card p,
.price-card p,
.faq-list p,
.onboarding-hook p,
.final-cta p {
    color: #64748B;
}

.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #DBEAFE, #E0F2FE);
    border: 1px solid #BFDBFE;
}

.onboarding-hook {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
}

.profile-preview {
    display: grid;
    gap: 0.9rem;
}

.profile-preview div {
    display: grid;
    gap: 0.35rem;
}

.profile-preview span {
    color: #334155;
    font-weight: 800;
}

.profile-preview div::after {
    content: "";
    display: block;
    height: 10px;
    margin-top: -10px;
    border-radius: 99px;
    background: #E2E8F0;
    z-index: 0;
}

.profile-preview i {
    height: 10px;
    z-index: 1;
}

.price-card {
    display: grid;
    gap: 0.85rem;
}

.price-card.featured {
    border-color: #0EA5E9;
    box-shadow: 0 20px 35px rgba(14, 165, 233, 0.16);
}

.price-card > span {
    color: #0EA5E9;
    font-weight: 900;
}

.price-card strong {
    color: #1E3A8A;
    font-size: 2rem;
}

.price-card ul {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.price-card li::before {
    content: "✓";
    margin-left: 0.45rem;
    color: #059669;
    font-weight: 900;
}

.faq-list {
    display: grid;
    gap: 0.9rem;
}

.faq-list details {
    padding: 1rem 1.2rem;
}

.faq-list summary {
    cursor: pointer;
    color: #0F172A;
    font-weight: 900;
}

.final-cta {
    width: 100%;
    max-width: none;
    padding: 5rem 1rem;
    text-align: center;
    color: white;
    background: linear-gradient(135deg, #1E3A8A, #1D4ED8);
}

.final-cta h2,
.final-cta p {
    color: white;
}

.final-cta .inverse {
    margin-top: 1rem;
    background: #0EA5E9;
}

.final-cta footer {
    margin-top: 2rem;
    opacity: 0.95;
}

.landing-contact-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-contact-links a,
.landing-contact-links button {
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    padding: 8px 12px;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}

.landing-contact-links a:hover,
.landing-contact-links button:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, .2);
}

.onboarding-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(10px);
}

.onboarding-card {
    position: relative;
    width: min(600px, 100%);
    padding: 2rem;
    border-radius: 20px;
    background: white;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.34);
}

.modal-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    color: #475569;
    background: #F1F5F9;
    font-size: 1.4rem;
    cursor: pointer;
}

.modal-progress {
    height: 9px;
    margin-bottom: 1.6rem;
    overflow: hidden;
    border-radius: 99px;
    background: #E2E8F0;
}

.modal-progress.active i {
    width: 100%;
    animation: buildBar 3s ease both;
}

.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.choice-chip {
    min-height: 46px;
    padding: 0.75rem 1rem;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    color: #1E3A8A;
    background: #EFF6FF;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.2s;
}

.choice-chip.active {
    color: white;
    background: #1D4ED8;
    box-shadow: 0 12px 26px rgba(29, 78, 216, 0.22);
    transform: scale(1.03);
}

.choice-chip.wide {
    width: 100%;
    margin-top: 0.9rem;
}

/* ============================================
   CODEX ORGANIC SEPTEMBER CAMPAIGN
   ============================================ */
.codex-campaign {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.02), rgba(14, 165, 233, 0.08)),
        #F8FAFC;
}

.codex-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: 3rem;
    width: min(1180px, calc(100% - 32px));
    min-height: calc(100vh - 74px);
    margin: 0 auto;
    padding: 3rem 0 4rem;
}

.codex-hero-copy h1 {
    max-width: 780px;
    margin: 0;
    color: #0F172A;
    font-size: clamp(2.1rem, 5vw, 4rem);
    line-height: 1.15;
}

.codex-hero-copy p {
    max-width: 680px;
    margin-top: 1.2rem;
    color: #475569;
    font-size: 1.15rem;
}

.codex-target-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.4rem;
}

.codex-target-strip strong,
.codex-target-strip span {
    border-radius: 999px;
    padding: 0.5rem 0.75rem;
    font-weight: 900;
    box-shadow: var(--shadow);
}

.codex-target-strip strong {
    color: white;
    background: #0F172A;
}

.codex-target-strip span {
    color: #1E3A8A;
    background: white;
}

.codex-hero-panel {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid rgba(30, 58, 138, 0.14);
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.codex-cover-image {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 12;
    object-fit: cover;
    object-position: center;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
}

.codex-countdown,
.codex-skill-card {
    border-radius: 14px;
    padding: 1rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.codex-countdown span,
.codex-skill-card span {
    display: block;
    color: #64748B;
    font-weight: 800;
    font-size: 0.8rem;
}

.codex-countdown strong {
    display: block;
    color: #1E3A8A;
    font-size: 2.4rem;
    line-height: 1;
    margin: 0.35rem 0;
}

.codex-countdown em {
    color: #475569;
    font-style: normal;
    font-weight: 700;
}

.codex-skill-card strong {
    display: block;
    margin-top: 0.15rem;
    color: #0F172A;
    font-size: 1.35rem;
}

.codex-skill-card p {
    margin-top: 0.35rem;
    color: #64748B;
    font-size: 0.95rem;
}

.codex-skill-card.danger {
    border-color: rgba(220, 38, 38, 0.2);
    background: #FFF7ED;
}

.codex-mini-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: 0.7rem;
    height: 140px;
    padding: 1rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #1E3A8A, #0EA5E9);
}

.codex-mini-chart i {
    display: block;
    border-radius: 999px 999px 8px 8px;
    background: rgba(255, 255, 255, 0.86);
}

.codex-alert {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid #BFDBFE;
    border-radius: 14px;
    background: #EFF6FF;
    color: #1E3A8A;
}

.codex-alert strong {
    white-space: nowrap;
    font-weight: 900;
}

.codex-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.codex-proof-grid article {
    min-height: 210px;
    padding: 1.4rem;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    box-shadow: var(--shadow);
}

.codex-proof-grid span {
    color: #0EA5E9;
    font-weight: 900;
}

.codex-proof-grid strong {
    display: block;
    margin-top: 0.45rem;
    color: #0F172A;
    font-size: 1.35rem;
}

.codex-proof-grid p {
    margin-top: 0.65rem;
    color: #64748B;
}

.codex-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.codex-blog-card {
    display: grid;
    gap: 0.6rem;
    min-height: 230px;
    padding: 1.2rem;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow: var(--shadow);
}

.codex-blog-card span {
    color: #0EA5E9;
    font-size: 0.8rem;
    font-weight: 900;
}

.codex-blog-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.codex-blog-card p {
    color: #64748B;
    font-size: 0.93rem;
}

.codex-search-link {
    margin-top: 1rem;
}

.codex-search-link a {
    display: inline-flex;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    padding: 0.65rem 0.9rem;
    background: #EFF6FF;
    color: #1D4ED8;
    font-weight: 900;
}

.codex-offer {
    border-color: #BFDBFE;
    background: linear-gradient(135deg, #FFFFFF, #EFF6FF);
}

.landing-input,
.hours-slider {
    width: 100%;
    margin-top: 1rem;
}

.landing-input {
    height: 52px;
    padding: 0 1rem;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    font: inherit;
}

.modal-hint,
.hours-readout {
    margin-top: 1rem;
    color: #64748B;
    font-weight: 700;
}

.modal-subhead {
    margin: 1.2rem 0 0;
    color: #0F172A;
    font-size: 0.95rem;
    font-weight: 900;
}

.modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.modal-actions button {
    flex: 1;
}

.modal-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.building-profile {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 0;
    color: white;
}

.building-profile h2,
.building-profile p {
    color: white;
}

.onboarding-card:has(.building-profile) {
    background: #0F172A;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14,165,233,0.28); }
    50% { box-shadow: 0 0 0 8px rgba(14,165,233,0); }
}

@keyframes buildBar {
    from { width: 0; }
    to { width: 100%; }
}

.page-card {
    background: var(--bg-card);
    color: var(--text);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.onboarding-page {
    display: grid;
    gap: 1rem;
}

.onboarding-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 1rem;
    align-items: stretch;
    background: var(--bg-dark);
    color: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
}

.onboarding-hero h2,
.onboarding-hero p {
    color: white;
}

.onboarding-hero h2 {
    max-width: 680px;
}

.onboarding-hero p {
    margin-top: 0.5rem;
    opacity: 0.9;
}

.onboarding-trial {
    background: white;
    color: var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: grid;
    align-content: center;
    text-align: center;
}

.onboarding-trial span {
    color: var(--gold);
    display: block;
    font-size: 3rem;
    line-height: 1;
    font-weight: 800;
}

.onboarding-trial strong {
    display: block;
    margin: 0.35rem 0;
}

.onboarding-trial p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.onboarding-path-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.onboarding-path {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: grid;
    gap: 0.4rem;
    cursor: pointer;
    background: white;
}

.onboarding-path.active,
.onboarding-path:has(input:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.18);
}

.onboarding-path input {
    accent-color: var(--primary);
}

.onboarding-path .path-label {
    font-weight: 800;
    color: var(--bg-dark);
}

.onboarding-path p,
.onboarding-path em {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.onboarding-path em {
    color: var(--secondary-dark);
    font-style: normal;
    font-weight: 700;
}

.onboarding-hours {
    display: grid;
    grid-template-columns: 180px 120px;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.onboarding-step-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.onboarding-step-list div {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem;
    background: var(--bg);
}

.onboarding-step-list strong,
.onboarding-step-list span {
    display: block;
}

.onboarding-step-list span {
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 0 var(--primary-dark);
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(1px);
    box-shadow: 0 3px 0 #3a8a02;
}
.btn-primary:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--primary-dark);
}

.btn-secondary {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    box-shadow: 0 3px 0 #c0e8fc;
}
.btn-secondary:hover {
    background: #c0e8fc;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
}
.btn-ghost:hover { background: var(--bg); }

.btn-lg { padding: 0.85rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.btn-full { width: 100%; }

/* ============================================
   FORMS & INPUTS
   ============================================ */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.form-group input,
.text-input,
.chat-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--bg-card);
    transition: border-color 0.2s;
}

textarea,
input,
select {
    color: #0F172A;
    background: #FFFFFF;
}

textarea::placeholder,
input::placeholder {
    color: #64748B;
    opacity: 1;
}

.form-group input:focus,
.text-input:focus,
.chat-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--secondary-light);
}

/* ============================================
   OPTION LABELS (MCQ)
   ============================================ */
.option-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

.option-label:hover {
    border-color: var(--secondary);
    background: var(--secondary-light);
}

.option-label input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.question-options {
    margin: 1rem 0;
}

/* ============================================
   AUTH PAGES
   ============================================ */
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.auth-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 420px;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-crown { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }

.auth-header h1 {
    font-size: 1.75rem;
    color: var(--bg-dark);
}

.auth-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-switch {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress-bar-container {
    width: 100%;
    height: 14px;
    background: var(--bg);
    border-radius: 7px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.progress-bar-container.small { height: 8px; }

.progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 7px;
    transition: width 0.6s ease;
}

/* ============================================
   PLACEMENT TEST
   ============================================ */
.placement-intro {
    text-align: center;
}

.placement-icon { font-size: 3rem; margin-bottom: 1rem; }

.placement-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    max-width: 500px;
    margin: 0 auto 1.5rem;
}

.placement-info {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.info-item {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.info-item strong {
    display: block;
    font-size: 1.5rem;
    color: var(--primary);
}

.placement-note {
    color: var(--text-light);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.nav-link.locked {
    opacity: 0.55;
}

.diagnostic-page {
    display: grid;
    gap: 1rem;
}

.diagnostic-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 1rem;
    align-items: stretch;
    background: linear-gradient(135deg, #172554, #1E3A8A);
    color: white;
    border-radius: var(--radius);
    padding: 1.4rem;
    box-shadow: var(--shadow-md);
}

.ielts-placement-page {
    max-width: 1180px;
    margin: 0 auto;
}

.ielts-test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    box-shadow: var(--shadow);
}

.ielts-test-header div:first-child {
    display: grid;
    gap: 0.15rem;
}

.ielts-test-header span {
    color: #64748B;
    font-weight: 700;
    font-size: 0.86rem;
}

.ielts-test-header strong {
    color: #0F172A;
    font-size: 1.05rem;
}

.ielts-test-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ielts-test-meta span {
    border-radius: 999px;
    background: #EFF6FF;
    color: #1E3A8A;
    padding: 0.35rem 0.65rem;
}

.placement-focus-hero {
    background: linear-gradient(135deg, #1E3A8A, #2563EB);
}

.ielts-test-section {
    border-color: #CBD5E1;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.ielts-test-section h3 {
    color: #0F172A;
}

.placement-instructions {
    border-radius: var(--radius);
    padding: 1.3rem 1.5rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1E3A8A, #2563EB);
    color: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.placement-instructions h2,
.placement-instructions p,
.placement-instructions small {
    color: #FFFFFF;
}

.placement-instructions small {
    display: block;
    opacity: 0.82;
    margin-top: 0.5rem;
}

.ielts-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ielts-section-title span {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.34rem 0.7rem;
    background: #DBEAFE;
    color: #1E3A8A;
    font-weight: 900;
    font-size: 0.8rem;
}

.reading-test-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.reading-passage {
    max-height: 680px;
    overflow: auto;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-sm);
    background: #F8FAFC;
    padding: 1rem;
    color: #0F172A;
    line-height: 1.78;
}

.reading-passage p {
    margin-bottom: 0.9rem;
    color: #0F172A;
}

.reading-passage b {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    margin-inline-end: 0.35rem;
    background: #1E3A8A;
    color: #FFFFFF;
    font-size: 0.78rem;
}

/* IELTS computer-based exam shell */
.ielts-exam-shell {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    gap: 1.25rem;
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    overflow-x: clip;
}

.ielts-exam-shell *,
.ielts-exam-shell input,
.ielts-exam-shell textarea,
.ielts-exam-shell button {
    direction: ltr;
    unicode-bidi: isolate;
}

.ielts-exam-shell p,
.ielts-exam-shell h1,
.ielts-exam-shell h2,
.ielts-exam-shell h3,
.ielts-exam-shell h4,
.ielts-exam-shell h5,
.ielts-exam-shell label,
.ielts-exam-shell input {
    text-align: left;
}

.ielts-exam-header {
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
    background: #16243D;
    color: #FFFFFF;
    border: 1px solid #2E3F5C;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}

.ielts-exam-topline {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 1fr);
    align-items: center;
    min-height: 58px;
    padding: 0 1.25rem;
    border-bottom: 1px solid #34445F;
}

.ielts-exam-topline strong {
    font-size: 1.05rem;
    letter-spacing: 0;
    text-align: left;
}

.ielts-exam-topline span {
    justify-self: center;
    font-size: 0.98rem;
    font-weight: 900;
}

.ielts-exam-topline time {
    justify-self: end;
    min-width: 94px;
    text-align: center;
    border: 1px solid #64748B;
    border-radius: 5px;
    padding: 0.45rem 0.8rem;
    background: #25334E;
    font-size: 1.1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}

.ielts-exam-qnav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem;
    overflow-x: auto;
    justify-content: flex-start;
    background: #20304D;
    direction: ltr;
}

.ielts-exam-qnav > span {
    margin-right: 0.45rem;
    color: #CBD5E1;
    font-weight: 900;
}

.ielts-qnav-button {
    width: 30px;
    height: 30px;
    border: 2px solid #64748B;
    border-radius: 2px;
    background: #243653;
    color: #E5E7EB;
    font-weight: 900;
    cursor: pointer;
}

.ielts-qnav-button:hover,
.ielts-qnav-button.answered {
    background: #FFFFFF;
    color: #16243D;
    border-color: #FFFFFF;
}

.ielts-start-card {
    max-width: 760px;
    margin: 0 auto 0.5rem;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.ielts-start-band {
    background: #16243D;
    color: #FFFFFF;
    padding: 2.2rem 1.5rem;
    text-align: center;
}

.ielts-start-band h2 {
    margin: 0 0 0.7rem;
    color: #FFFFFF;
    font-size: 1.9rem;
}

.ielts-start-band p {
    color: #D1D5DB;
    margin: 0;
}

.ielts-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    padding: 2rem 2rem 1rem;
}

.ielts-stat-grid div {
    min-height: 92px;
    display: grid;
    place-items: center;
    gap: 0.2rem;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #F3F4F6;
    text-align: center;
}

.ielts-stat-grid strong {
    color: #16243D;
    font-size: 1.6rem;
    font-weight: 900;
}

.ielts-stat-grid span {
    color: #4B5563;
    font-weight: 800;
}

.ielts-start-card > p {
    margin: 0;
    padding: 0 2rem 1rem;
    color: #374151;
}

.ielts-start-card > .btn {
    margin: 0 2rem 2rem;
}

.ielts-exam-form {
    display: grid;
    gap: 1rem;
}

.ielts-exam-section[hidden],
.ielts-qnav-button[hidden],
#exam-next-section[hidden],
#exam-submit-button[hidden] {
    display: none;
}

.ielts-exam-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #16243D;
    color: #FFFFFF;
    border-radius: 4px 4px 0 0;
    padding: 1rem 1.35rem;
}

.ielts-exam-band h3 {
    color: #FFFFFF;
    margin: 0;
    font-size: 1.05rem;
}

.ielts-exam-band span {
    border: 1px solid #64748B;
    border-radius: 5px;
    padding: 0.35rem 0.7rem;
    background: #25334E;
    font-weight: 900;
}

.ielts-reading-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.96fr);
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-top: 0;
}

.ielts-pane {
    background: #FFFFFF;
    color: #111827;
}

.ielts-passage-pane,
.ielts-answer-pane {
    height: min(760px, calc(100vh - 240px));
    min-height: 560px;
    overflow: auto;
    padding: 1.45rem 1.65rem;
}

.ielts-passage-pane {
    border-right: 1px solid #D1D5DB;
}

.ielts-pane h4 {
    margin: 0 0 1rem;
    color: #16243D;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 3px solid #16243D;
    padding-bottom: 0.75rem;
}

.ielts-pane h5 {
    margin: 0 0 1rem;
    color: #222222;
    font-size: 1rem;
    font-weight: 900;
}

.ielts-passage-pane p {
    margin: 0 0 1rem;
    color: #1F2937;
    font-size: 1.02rem;
    line-height: 1.72;
    text-align: left;
}

.ielts-passage-pane b {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.45rem;
    background: #16243D;
    color: #FFFFFF;
    border-radius: 2px;
    font-size: 0.76rem;
}

.ielts-question-list {
    display: grid;
}

.ielts-question-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid #E5E7EB;
    scroll-margin-top: 140px;
}

.ielts-question-number {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    background: #16243D;
    color: #FFFFFF;
    font-weight: 900;
}

.ielts-question-body p {
    margin: 0 0 0.75rem;
    color: #111827;
    font-size: 1.02rem;
    line-height: 1.55;
    text-align: left;
}

.ielts-question-instruction {
    color: #64748B !important;
    font-size: 0.88rem !important;
    font-weight: 800;
}

.ielts-option-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ielts-option {
    position: relative;
    cursor: pointer;
}

.ielts-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ielts-option span {
    display: inline-grid;
    place-items: center;
    min-width: 86px;
    min-height: 42px;
    padding: 0.45rem 0.9rem;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #222222;
    font-weight: 900;
}

.ielts-option input:checked + span {
    border-color: #16243D;
    background: #16243D;
    color: #FFFFFF;
}

.ielts-answer-input {
    width: min(230px, 100%);
    height: 44px;
    border: 2px solid #D1D5DB;
    border-radius: 4px;
    padding: 0 0.85rem;
    font-size: 1rem;
    font-weight: 800;
    background: #FFFFFF;
    text-align: left;
    direction: ltr;
}

.ielts-answer-input:focus {
    outline: 3px solid rgba(22, 36, 61, 0.16);
    border-color: #16243D;
}

.ielts-listening-panel {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1.45rem;
    border: 1px solid #D1D5DB;
    border-top: 0;
    background: #16243D;
    color: #FFFFFF;
}

.ielts-listening-panel h4,
.ielts-listening-panel p {
    margin: 0;
    color: #FFFFFF;
    text-align: left;
}

.ielts-listening-panel p {
    color: #D1D5DB;
    margin-top: 0.35rem;
}

.ielts-listening-panel strong {
    color: #FACC15;
}

.ielts-play-button {
    color: #16243D;
    background: #FFFFFF;
}

.ielts-audio-track {
    grid-column: 1 / -1;
    height: 7px;
    overflow: hidden;
    border-radius: 99px;
    background: #475569;
}

.ielts-audio-track span {
    display: block;
    width: 0;
    height: 100%;
    background: #FFFFFF;
}

.ielts-listening-sheet,
.ielts-writing-sheet {
    border: 1px solid #D1D5DB;
    border-top: 0;
    padding: 1.45rem 1.65rem;
}

.ielts-writing-sheet {
    max-width: 980px;
    margin: 0 auto;
    border-top: 1px solid #D1D5DB;
}

.ielts-exam-footer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid #D1D5DB;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.08);
}

.ielts-question strong {
    line-height: 1.5;
}

.listening-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-sm);
    background: #F8FAFC;
    padding: 0.85rem;
    margin: 0.75rem 0;
}

.real-listening-player audio {
    width: min(560px, 100%);
}

.ielts-answer-input {
    margin-top: 0.85rem;
    max-width: 360px;
    background: #FFFFFF;
    color: #0F172A;
    border-color: #CBD5E1;
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 36px;
}

.audio-wave i {
    display: block;
    width: 7px;
    height: 18px;
    border-radius: 999px;
    background: #3B82F6;
    animation: wavePulse 1s infinite ease-in-out;
}

.audio-wave i:nth-child(2) { height: 26px; animation-delay: 0.1s; }
.audio-wave i:nth-child(3) { height: 34px; animation-delay: 0.2s; }
.audio-wave i:nth-child(4) { height: 24px; animation-delay: 0.3s; }
.audio-wave i:nth-child(5) { height: 16px; animation-delay: 0.4s; }

.listening-transcript {
    margin: 0.75rem 0 1rem;
    color: #475569;
}

.listening-transcript summary {
    cursor: pointer;
    font-weight: 800;
    color: #1E3A8A;
}

@keyframes wavePulse {
    0%, 100% { transform: scaleY(0.7); opacity: 0.65; }
    50% { transform: scaleY(1); opacity: 1; }
}

.diagnostic-hero h2,
.diagnostic-hero p {
    color: white;
}

.diagnostic-lock {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    display: grid;
    align-content: center;
    gap: 0.35rem;
}

.diagnostic-lock strong {
    font-size: 1.8rem;
    line-height: 1;
}

.diagnostic-grid,
.construct-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.diagnostic-card,
.diagnostic-item,
.construct-card,
.taxonomy-hit {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: #0F172A;
    padding: 0.9rem;
}

.diagnostic-card {
    display: grid;
    gap: 0.65rem;
}

.diagnostic-card textarea,
.diagnostic-submit textarea {
    width: 100%;
    border: 2px solid #CBD5E1;
    border-radius: var(--radius-xs);
    padding: 0.7rem;
    font: inherit;
    resize: vertical;
    color: #0F172A;
    background: #FFFFFF;
    min-height: 112px;
    line-height: 1.7;
}

.diagnostic-card textarea:focus,
.diagnostic-submit textarea:focus {
    outline: none;
    border-color: #0EA5E9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.22);
}

.diagnostic-actions,
.diagnostic-options,
.diagnostic-list {
    display: grid;
    gap: 0.55rem;
}

.diagnostic-actions {
    grid-template-columns: auto auto 1fr;
    align-items: center;
}

.diagnostic-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.diagnostic-options label {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.45rem 0.55rem;
    display: flex;
    gap: 0.35rem;
    align-items: center;
    cursor: pointer;
    background: #FFFFFF;
    color: #0F172A;
}

.optional-speaking-section {
    border-color: rgba(14, 165, 233, 0.35);
    background: linear-gradient(180deg, #FFFFFF, #F8FBFF);
}

.optional-speaking-section h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.optional-speaking-section h3 span {
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    background: var(--secondary-light);
    color: var(--secondary-dark);
    font-size: 0.78rem;
}

.construct-card {
    text-align: center;
}

.construct-card span,
.construct-card em,
.taxonomy-hit span,
.taxonomy-hit em {
    display: block;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-style: normal;
}

.construct-card strong {
    display: block;
    color: var(--secondary-dark);
    font-size: 2rem;
}

.taxonomy-list {
    display: grid;
    gap: 0.7rem;
}

.taxonomy-hit {
    display: grid;
    gap: 0.3rem;
}

.taxonomy-hit strong {
    color: var(--error);
}

/* ============================================
   QUESTION CARD
   ============================================ */
.question-card { max-width: 700px; margin: 0 auto; }

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.question-counter {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.question-category, .question-diff {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 600;
}

.question-prompt {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.question-prompt-ar {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.question-actions { margin-top: 1rem; }

/* ============================================
   FEEDBACK
   ============================================ */
.exercise-feedback {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.feedback-correct {
    background: var(--success-light);
    border: 2px solid var(--success);
    color: var(--primary-dark);
}

.feedback-wrong {
    background: var(--error-light);
    border: 2px solid var(--error);
    color: #b91c1c;
}

.fb-explain {
    font-weight: 400;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    color: var(--text);
}

.ai-explanation {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--secondary-light);
    border-radius: var(--radius-xs);
    font-weight: 400;
    font-size: 0.9rem;
}

.ai-placeholder-note {
    font-size: 0.75rem;
    color: var(--gold);
    font-style: italic;
    margin-top: 0.5rem;
}

.mastery-change {
    font-size: 0.85rem;
    color: var(--xp-purple);
    margin-top: 0.25rem;
}

.xp-earned {
    font-size: 0.85rem;
    color: var(--gold);
}

.badge-earned {
    font-size: 0.9rem;
    color: var(--xp-purple);
}

/* ============================================
   RESULTS
   ============================================ */
.results-card { text-align: center; max-width: 700px; margin: 0 auto; }

.results-header { margin-bottom: 1.5rem; }
.results-icon { font-size: 3rem; }

.results-overall {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
}

.results-level, .results-accuracy { text-align: center; }

.results-level-num, .results-accuracy-num {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
}

.results-level-label, .results-accuracy-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.results-categories {
    text-align: left;
    margin-bottom: 1.5rem;
}

.result-category {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.result-cat-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.9rem;
}

.result-cat-level {
    font-size: 0.75rem;
    color: var(--text-light);
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard { max-width: var(--max-width); margin: 0 auto; }

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.dash-level {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.dash-xp-area {
    text-align: right;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.xp-display, .streak-display {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.xp-icon, .streak-icon { font-size: 1.1rem; }
.xp-value { color: var(--gold); }
.streak-value { color: var(--error); }

.dash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    text-align: center;
    padding: 1.25rem 1rem;
}

.stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--secondary);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.dash-section {
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}

.badges-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-icon {
    font-size: 1.5rem;
    background: var(--bg);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-none { font-size: 0.85rem; color: var(--text-light); }

.trust-mission {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    border: 2px solid rgba(14, 165, 233, 0.22);
    background: linear-gradient(135deg, #FFFFFF, #EFF6FF);
}

.trust-mission ul {
    margin-top: 0.75rem;
    padding-inline-start: 1.25rem;
    color: var(--text-secondary);
}

.trust-mission-actions {
    display: grid;
    gap: 0.75rem;
    min-width: 240px;
}

.focused-nav .nav-links {
    justify-content: center;
}

.focused-nav-links .nav-link {
    opacity: 1;
    pointer-events: auto;
}

.weak-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.weak-tag {
    background: var(--error-light);
    color: var(--error);
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.weak-none {
    background: var(--success-light);
    color: var(--primary-dark);
}

.dash-categories { margin-top: 0.5rem; }

.dash-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

.dash-category:hover { background: var(--bg); border-radius: var(--radius-xs); }

.dash-cat-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-cat-status { font-size: 1.25rem; }
.dash-cat-name { display: block; font-weight: 700; font-size: 0.9rem; }
.dash-cat-name-ar { display: block; font-size: 0.8rem; color: var(--text-light); }
.dash-cat-right { text-align: right; min-width: 100px; }
.dash-cat-acc { font-weight: 800; font-size: 1rem; color: var(--secondary); }

.dash-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.path-choice {
    cursor: pointer;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 170px;
}

.path-choice input {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
}

.path-choice.active {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}

.path-choice span {
    color: var(--text-secondary);
}

.path-choice p {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

.diagnostic-row {
    align-items: stretch;
    cursor: default;
}

.diagnostic-fields {
    display: grid;
    grid-template-columns: 120px minmax(220px, 1fr);
    gap: 0.75rem;
    width: min(620px, 100%);
}

.diagnostic-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.diagnostic-fields input {
    width: 100%;
}

.coach-panel {
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary));
    color: white;
    border-radius: var(--radius);
    padding: 1.25rem;
    display: grid;
    gap: 1rem;
}

.coach-panel h3,
.coach-panel p {
    color: white;
}

.coach-panel h3 {
    margin: 0.25rem 0 0.5rem;
}

.coach-kicker {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    opacity: 0.82;
}

.coach-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-xs);
    padding: 0.85rem 1rem;
}

.coach-action .btn {
    min-width: 120px;
}

.coach-panel ol {
    margin: 0;
    padding-right: 1.25rem;
    line-height: 1.8;
}

.motivation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.mini-panel {
    padding: 1rem;
}

.mini-panel h4 {
    margin-bottom: 0.75rem;
}

.leader-row,
.activity-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
}

.activity-row {
    grid-template-columns: minmax(100px, 0.5fr) 1fr;
}

.leader-row:last-child,
.activity-row:last-child {
    border-bottom: 0;
}

.leader-row span {
    background: var(--gold-light);
    color: var(--gold);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.leader-row em,
.activity-row span {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 0.85rem;
}

.trial-mission {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    background: var(--gold-light);
    border: 1px solid rgba(255, 150, 0, 0.28);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
}

.trial-mission h3 {
    margin: 0.25rem 0 0.4rem;
}

.trial-mission p {
    margin: 0.25rem 0;
    color: var(--text-secondary);
}

/* ============================================
   SKILL GYMS
   ============================================ */
.gyms-page {
    display: grid;
    gap: 1rem;
}

.achievement-ticker {
    overflow: hidden;
    background: var(--bg-dark);
    color: white;
    border-radius: var(--radius-sm);
    padding: 0.65rem 0;
    white-space: nowrap;
}

.achievement-ticker div {
    display: inline-flex;
    gap: 2rem;
    min-width: 200%;
    animation: tickerMove 26s linear infinite;
}

.achievement-ticker span {
    font-weight: 800;
    color: var(--primary-light);
}

@keyframes tickerMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.gyms-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1rem;
    align-items: stretch;
    background: white;
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.gyms-hero p {
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.gyms-inventory {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: grid;
    align-content: center;
    text-align: center;
}

.gyms-inventory strong {
    font-size: 3rem;
    line-height: 1;
}

.gyms-inventory span {
    font-weight: 800;
}

.gyms-inventory p {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.build-order {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.build-order span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    font-weight: 800;
}

.build-order b {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: white;
}

.gym-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.gym-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem;
    box-shadow: var(--shadow);
    display: grid;
    gap: 0.65rem;
}

.gym-card.ready_seed {
    border-color: var(--primary);
}

.gym-card.backend_needed {
    border-color: var(--gold);
}

.gym-card-head,
.gym-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.gym-skill,
.gym-status,
.gym-meta span {
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
}

.gym-skill {
    background: var(--secondary-light);
    color: var(--secondary-dark);
}

.gym-status {
    background: var(--gold-light);
    color: var(--gold);
}

.gym-title-ar,
.gym-why {
    color: var(--text-secondary);
}

.gym-why {
    background: var(--bg);
    border-radius: var(--radius-xs);
    padding: 0.75rem;
}

.gym-meta span {
    background: var(--success-light);
    color: var(--primary-dark);
}

.gym-drills,
.gym-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gym-drills span {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.gym-sources {
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
}

.gym-sources strong {
    width: 100%;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.gym-sources em {
    font-style: normal;
    color: var(--text-light);
    font-size: 0.76rem;
}

.content-policy p {
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

/* ============================================
   DAILY MISSION & STRATEGIES
   ============================================ */
.daily-mission,
.strategy-page {
    display: grid;
    gap: 1rem;
}

.daily-mission-head,
.strategy-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}

.daily-mission-head h4,
.strategy-hero h2 {
    margin: 0.25rem 0 0.5rem;
}

.daily-mission-head p,
.mission-rule,
.strategy-hero p {
    color: var(--text-secondary);
}

.mission-blocks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.mission-block {
    text-align: left;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    background: white;
    cursor: pointer;
    font-family: inherit;
    display: grid;
    gap: 0.25rem;
    min-height: 150px;
}

.mission-block:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(88, 204, 2, 0.15);
}

.mission-block strong,
.mission-block span,
.mission-block em {
    display: block;
}

.mission-block span,
.mission-block p {
    color: var(--text-secondary);
}

.mission-block em {
    color: var(--gold);
    font-style: normal;
    font-weight: 800;
}

.strategy-hero {
    background: var(--bg-dark);
    color: white;
    border-radius: var(--radius);
    padding: 1.5rem;
}

.strategy-hero h2,
.strategy-hero p {
    color: white;
}

.strategy-hero .mission-rule {
    background: rgba(255,255,255,0.12);
    border-radius: var(--radius-xs);
    padding: 0.75rem;
}

.module-steering {
    min-width: 220px;
    background: white;
    color: var(--bg-dark);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: grid;
    gap: 0.45rem;
}

.module-steering span {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    border-radius: 999px;
    padding: 0.35rem 0.55rem;
    font-weight: 800;
    font-size: 0.8rem;
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.strategy-list {
    display: grid;
    gap: 1rem;
}

.strategy-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: white;
    display: grid;
    gap: 0.6rem;
}

.strategy-card h4 {
    margin: 0;
}

.strategy-card p,
.strategy-card em {
    color: var(--text-secondary);
}

.strategy-card em {
    font-style: normal;
    font-weight: 800;
}

.strategy-tags,
.speed-row,
.strategy-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.strategy-tags span,
.strategy-ladder span {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    font-weight: 700;
    font-size: 0.82rem;
}

.strategy-ladder span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.strategy-ladder b,
.section-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: white;
    font-weight: 800;
}

.strategy-ladder b {
    width: 22px;
    height: 22px;
}

.section-pill {
    width: fit-content;
    padding: 0.3rem 0.6rem;
}

.trap-box {
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.trap-box strong {
    width: 100%;
    color: var(--error);
}

.trap-box em {
    background: var(--error-light);
    color: var(--error);
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
}

.speed-row button {
    border: 0;
    border-radius: 999px;
    background: var(--gold-light);
    color: var(--gold);
    padding: 0.35rem 0.6rem;
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
}

.trap-ar {
    background: var(--bg);
    border-radius: var(--radius-xs);
    padding: 0.65rem;
}

/* ============================================
   CONTENT BANK
   ============================================ */
.content-bank-page,
.backbone-list {
    display: grid;
    gap: 1rem;
}

.backbone-step {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 0.8rem;
    align-items: center;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    background: white;
}

.backbone-step b {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--secondary-light);
    color: var(--secondary-dark);
}

.backbone-step.done {
    border-color: var(--primary);
    background: var(--success-light);
}

.backbone-step.locked {
    opacity: 0.62;
}

.backbone-step span,
.backbone-step p,
.backbone-step em {
    display: block;
    color: var(--text-secondary);
}

.backbone-step em {
    font-style: normal;
    font-weight: 800;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.grammar-grid {
    max-height: 680px;
    overflow: auto;
    padding-right: 0.25rem;
}

.content-item,
.spell-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
}

.content-item {
    padding: 1rem;
    display: grid;
    gap: 0.65rem;
}

.content-item.done,
.spell-card.done {
    border-color: var(--primary);
    background: var(--success-light);
}

.content-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.content-item-head span,
.content-item-head em {
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 800;
    font-style: normal;
}

.content-item-head span {
    background: var(--secondary-light);
    color: var(--secondary-dark);
}

.content-item-head em {
    background: var(--gold-light);
    color: var(--gold);
}

.content-item p,
.content-item li,
.mini-script {
    color: var(--text-secondary);
}

.content-item ul {
    padding-left: 1rem;
}

.mini-script {
    background: var(--bg);
    border-radius: var(--radius-xs);
    padding: 0.65rem;
    font-size: 0.85rem;
}

.audio-practice,
.listening-form,
.listening-feedback {
    display: grid;
    gap: 0.55rem;
}

.audio-practice {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.75rem;
    background: var(--bg);
}

.audio-meta,
.listening-actions,
.speed-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.audio-meta {
    justify-content: space-between;
}

.audio-meta a {
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.audio-practice audio {
    width: 100%;
    min-height: 42px;
}

.audio-fallback {
    font-size: 0.8rem;
    margin: 0;
}

.speed-chip {
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
}

.speed-chip.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.listening-answer {
    display: grid;
    gap: 0.25rem;
}

.listening-answer span,
.listening-answer small {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 800;
}

.listening-answer input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.65rem;
    font: inherit;
}

.listening-feedback {
    border-radius: var(--radius-xs);
    background: var(--gold-light);
    padding: 0.75rem;
}

.listening-feedback.passed {
    background: var(--success-light);
}

.listening-feedback ul {
    margin: 0;
}

.listening-feedback li.ok {
    color: var(--success);
}

.listening-feedback li.fix {
    color: var(--error);
}

.spell-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    max-height: 520px;
    overflow: auto;
    padding-right: 0.25rem;
}

.spell-card {
    padding: 0.75rem;
    display: grid;
    gap: 0.4rem;
}

.spell-card strong {
    font-size: 1rem;
}

.spell-card span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* ============================================
   CURRICULUM & LESSONS
   ============================================ */
.levels-container {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.level-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: border-color 0.2s;
}

.level-card.level-current {
    border-color: var(--primary);
}

.level-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.level-badge {
    background: var(--primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
}

.level-name-ar {
    color: var(--text-light);
    font-size: 0.85rem;
}

.level-progress-num {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--primary);
}

.level-meta {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.lessons-section { margin-top: 1.5rem; }

.lessons-list { margin-top: 0.5rem; }

.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    transition: border-color 0.2s;
}

.lesson-item:hover { border-color: var(--secondary); }
.lesson-item.lesson-completed { border-color: var(--success); background: var(--success-light); }

.lesson-item-left { display: flex; align-items: center; gap: 0.75rem; }
.lesson-check { font-size: 1.1rem; }
.lesson-title { display: block; font-weight: 700; font-size: 0.9rem; }
.lesson-title-ar { display: block; font-size: 0.8rem; color: var(--text-light); }
.lesson-category { font-size: 0.75rem; color: var(--text-secondary); }
.lesson-item-right { display: flex; align-items: center; gap: 0.75rem; }
.lesson-score { font-weight: 800; color: var(--primary); }

/* ============================================
   LESSON PAGE
   ============================================ */
.lesson-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.lesson-category-badge {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

.lesson-title-ar { color: var(--text-light); font-size: 0.95rem; }

.lesson-section {
    margin-top: 1.5rem;
}

.rule-box {
    background: var(--secondary-light);
    border: 2px solid var(--secondary);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    line-height: 1.7;
}

.rule-ar { color: var(--text-secondary); margin-top: 0.75rem; }

.examples-list {
    list-style: none;
    padding: 0;
}

.examples-list li {
    padding: 0.5rem 0.75rem;
    background: var(--gold-light);
    border-left: 4px solid var(--gold);
    margin-bottom: 0.5rem;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    font-size: 0.95rem;
}

.lesson-actions { margin-top: 2rem; text-align: center; }

.lesson-complete-card {
    background: var(--success-light);
    border: 2px solid var(--success);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    margin-top: 1.5rem;
}

/* ============================================
   PRACTICE INTRO
   ============================================ */
.practice-intro { text-align: center; }

.session-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* ============================================
   CHAT TUTOR
   ============================================ */
.chat-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height) - 3rem);
    overflow: hidden;
}

.chat-header {
    padding: 1rem 1.5rem;
    border-bottom: 2px solid var(--border);
}

.chat-header p {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chat-msg { display: flex; }
.chat-msg.student { justify-content: flex-end; }
.chat-msg.tutor { justify-content: flex-start; }

.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    line-height: 1.5;
}

.chat-msg.student .chat-bubble {
    background: var(--primary);
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-msg.tutor .chat-bubble {
    background: var(--bg);
    border-bottom-left-radius: 2px;
}

.chat-input-area {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 2px solid var(--border);
}

.chat-input {
    flex: 1;
    border-radius: 20px !important;
    padding-left: 1.25rem !important;
}

.chat-send {
    border-radius: 20px;
    padding: 0.65rem 1.5rem;
}

/* ============================================
   ADMIN
   ============================================ */
.admin-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    max-width: 1320px;
    margin: 0 auto;
}

.admin-sidebar {
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
    display: grid;
    gap: 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.admin-brand {
    display: grid;
    gap: 0.1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.admin-brand strong {
    color: var(--primary);
}

.admin-brand span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.admin-nav-btn {
    width: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 0.75rem 0.9rem;
    text-align: right;
    color: var(--text-secondary);
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.admin-nav-btn.active,
.admin-nav-btn:hover {
    color: white;
    background: var(--primary);
}

.admin-main {
    min-width: 0;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-kpi-grid,
.admin-chart-grid,
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.admin-kpi,
.admin-chart,
.setting-card,
.admin-empty {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.admin-kpi span,
.admin-kpi em,
.setting-card p {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 0.85rem;
}

.admin-kpi strong {
    display: block;
    margin: 0.35rem 0;
    color: var(--primary);
    font-size: 1.65rem;
}

.admin-chart {
    min-height: 210px;
}

.sparkline {
    display: flex;
    align-items: end;
    gap: 0.45rem;
    height: 130px;
    margin-top: 1rem;
}

.sparkline i {
    flex: 1;
    min-width: 8px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, var(--secondary), var(--primary));
}

.admin-bar {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 48px;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.65rem;
}

.admin-bar b {
    display: block;
    height: 10px;
    border-radius: 99px;
    background: var(--secondary);
}

.admin-bar em,
.admin-pie-list em {
    color: var(--text-secondary);
    font-style: normal;
}

.admin-pie-list {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.admin-pie-list span {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.45rem;
}

.admin-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-toolbar input,
.admin-toolbar select,
.admin-modal-card input,
.admin-modal-card select {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font: inherit;
}

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

.admin-table.wide {
    min-width: 1120px;
}

.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15,23,42,0.64);
}

.admin-modal-card {
    position: relative;
    display: grid;
    gap: 0.85rem;
    width: min(680px, 100%);
    max-height: 86vh;
    overflow: auto;
    border-radius: var(--radius);
    padding: 1.25rem;
    background: var(--bg-card);
}

.admin-modal-card > button:first-child {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    border: 0;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.admin-modal-card label {
    display: grid;
    gap: 0.3rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.admin-section {
    margin-top: 1.5rem;
}

.admin-drive-sync {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
}

.admin-muted {
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.admin-drive-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.admin-sync-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.admin-sync-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    background: var(--bg-card);
}

.admin-sync-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.admin-sync-card strong {
    display: block;
    font-size: 1rem;
}

.admin-pill-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.admin-pill {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.55rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.admin-sync-report {
    margin-top: 0.9rem;
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #101820;
    color: #d6f5e3;
    overflow-x: auto;
    font-size: 0.82rem;
    line-height: 1.45;
}

.drill-ai-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
}

.drill-ai-feedback p {
    margin: 0.35rem 0;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.admin-table th, .admin-table td {
    padding: 0.65rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.admin-table th {
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================
   WRITING LAB
   ============================================ */
.writing-hero {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: flex-start;
    background: linear-gradient(120deg, #f7fff0 0%, #eef8ff 100%);
}

.writing-hero p {
    color: var(--text-secondary);
    max-width: 600px;
}

.writing-hero-metrics {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.writing-kpi {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    min-width: 110px;
}

.writing-kpi .label {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.writing-kpi strong {
    font-size: 1.15rem;
    line-height: 1.3;
}

.writing-kpi small {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
}

.writing-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 1rem;
}

.writing-column-left,
.writing-column-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.writing-section-sub {
    color: var(--text-secondary);
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
}

.writing-lessons-list {
    display: grid;
    gap: 0.6rem;
}

.writing-lesson-item {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.writing-lesson-item.is-complete {
    border-color: var(--success);
    background: var(--success-light);
}

.writing-lesson-title {
    font-weight: 800;
    font-size: 0.9rem;
}

.writing-lesson-title-ar {
    font-size: 0.82rem;
    color: var(--text-light);
}

.writing-lesson-objective {
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.writing-task-list {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.writing-task-chip {
    border: 1px solid var(--border-dark);
    background: white;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    display: inline-flex;
    gap: 0.35rem;
    align-items: baseline;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.writing-task-chip small {
    color: var(--text-light);
    font-weight: 600;
}

.writing-task-chip.active {
    background: var(--secondary-light);
    border-color: var(--secondary);
    color: var(--secondary-dark);
}

.writing-task-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
}

.writing-task-meta span {
    background: var(--bg);
    border-radius: 20px;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
}

.writing-prompt {
    font-weight: 700;
    margin: 0.45rem 0;
}

.writing-prompt-ar,
.writing-task-ar {
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
}

.writing-outline {
    background: var(--gold-light);
    border: 1px solid #ffe3ab;
    border-radius: var(--radius-xs);
    padding: 0.75rem;
    margin-bottom: 0.8rem;
}

.writing-outline h4 {
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.writing-outline ul {
    margin-left: 1rem;
    font-size: 0.84rem;
}

.writing-helper-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.65rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.writing-phrase-btn {
    border: 1px solid var(--border);
    background: white;
    border-radius: 14px;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.writing-phrase-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary-dark);
}

.writing-essay-input {
    width: 100%;
    min-height: 280px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.9rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    line-height: 1.6;
    color: #0F172A;
    background: #FFFFFF;
}

.writing-essay-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px var(--secondary-light);
}

.writing-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.rewrite-badge {
    background: var(--secondary-light);
    color: var(--secondary-dark);
    border: 1px solid var(--secondary);
    border-radius: 14px;
    padding: 0.2rem 0.5rem;
    font-weight: 700;
}

.writing-submit-actions {
    display: flex;
    gap: 0.65rem;
    margin-top: 0.85rem;
    flex-wrap: wrap;
}

.writing-feedback-empty {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.writing-score-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.8rem;
}

.writing-score-grid div {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 0.55rem;
    text-align: center;
}

.writing-score-grid span {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.writing-score-grid strong {
    display: block;
    font-size: 1rem;
}

.writing-feedback-ar {
    background: #f3f8ff;
    border: 1px solid #d8e8ff;
    border-radius: var(--radius-xs);
    padding: 0.65rem;
    margin-bottom: 0.8rem;
}

.writing-feedback-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.writing-feedback-columns h4 {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.writing-feedback-columns ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.writing-feedback-columns li {
    background: var(--bg);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    padding: 0.55rem;
    font-size: 0.82rem;
}

.writing-feedback-columns li p {
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.writing-next-steps {
    margin-top: 0.8rem;
}

.writing-next-steps h4 {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.writing-next-steps ol {
    margin-left: 1rem;
    font-size: 0.84rem;
}

.writing-next-steps li {
    margin-bottom: 0.45rem;
}

.writing-next-steps li p {
    margin-top: 0.15rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.writing-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    border-radius: 14px;
    border: 1px solid var(--primary);
    background: var(--primary-light);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
}

.writing-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.writing-history th,
.writing-history td {
    padding: 0.45rem 0.4rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.writing-history th {
    font-size: 0.74rem;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.curriculum-first .writing-grid {
    grid-template-columns: 1.05fr 1.2fr;
}

.roadmap-wrap {
    display: grid;
    gap: 0.85rem;
}

.roadmap-stage h4 {
    margin-bottom: 0.15rem;
    font-size: 0.92rem;
}

.roadmap-stage p {
    color: var(--text-light);
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
}

.roadmap-stage-modules {
    display: grid;
    gap: 0.45rem;
}

.weekly-plan {
    display: grid;
    gap: 0.7rem;
}

.weekly-rules {
    background: #f7fbff;
    border: 1px solid #dcecff;
    border-radius: var(--radius-xs);
    padding: 0.55rem 0.65rem;
    font-size: 0.8rem;
}

.weekly-rules ul {
    margin: 0.35rem 0 0 1rem;
}

.weekly-days {
    display: grid;
    gap: 0.45rem;
    max-height: 420px;
    overflow: auto;
    padding-right: 0.2rem;
}

.weekly-day {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: #fff;
    padding: 0.55rem 0.65rem;
    font-size: 0.78rem;
}

.weekly-day-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.weekly-day-head span {
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.weekly-focus {
    margin: 0.2rem 0;
    color: var(--secondary-dark);
    font-weight: 700;
}

.weekly-day ul {
    margin: 0.25rem 0 0 1rem;
}

.roadmap-module {
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: #fff;
    padding: 0.55rem 0.65rem;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

.roadmap-module .rm-title {
    display: block;
    font-size: 0.86rem;
    font-weight: 800;
}

.roadmap-module .rm-title-ar {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
}

.roadmap-module .rm-status {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.roadmap-module.is-locked {
    opacity: 0.65;
    background: #f9f9f9;
}

.roadmap-module.is-unlocked {
    border-color: #9dd4f7;
    background: #f4fbff;
}

.roadmap-module.is-mastered {
    border-color: #7dcf47;
    background: #f5ffef;
}

.roadmap-module.is-selected {
    border-width: 2px;
    border-color: var(--secondary-dark);
}

.drill-header .small-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

.drill-card {
    margin-top: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem;
    background: #fff;
}

.essay-locked {
    border: 1px solid #f0c8c8;
    background: #fff8f8;
    border-radius: var(--radius-sm);
    padding: 0.8rem;
}

.essay-locked h4 {
    font-size: 0.92rem;
}

.essay-locked ul {
    margin: 0.35rem 0 0.35rem 1rem;
}

.essay-panel h4 {
    margin-top: 0.8rem;
}

/* ============================================
   ERROR & LOADING
   ============================================ */
.error-msg {
    background: var(--error-light);
    color: var(--error);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.error-msg.small { font-size: 0.8rem; padding: 0.5rem 0.75rem; }

.error-card { border: 2px solid var(--error); }

.loading {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-secondary);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .main-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar { display: none; }

    .nav-link { white-space: nowrap; font-size: 0.8rem; padding: 0.4rem 0.65rem; }
    .nav-link svg { width: 14px; height: 14px; }

    .page-card { padding: 1.25rem; }

    .dash-grid { grid-template-columns: 1fr; }

    .dash-header { flex-direction: column; gap: 0.75rem; }

    .dash-actions { flex-direction: column; }
    .onboarding-hero,
    .diagnostic-hero,
    .reading-test-layout,
    .onboarding-path-grid,
    .onboarding-step-list { grid-template-columns: 1fr; }
    .ielts-test-header,
    .ielts-section-title,
    .listening-player {
        align-items: flex-start;
        flex-direction: column;
    }
    .ielts-exam-shell {
        width: 100%;
        margin-top: 0;
    }
    .ielts-exam-topline {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        padding: 0.75rem;
        text-align: left;
    }
    .ielts-exam-topline span,
    .ielts-exam-topline time {
        justify-self: start;
    }
    .ielts-exam-qnav {
        padding: 0.5rem 0.75rem;
    }
    .ielts-start-card {
        max-width: 100%;
    }
    .ielts-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 1rem;
        gap: 0.75rem;
    }
    .ielts-start-card > p,
    .ielts-start-card > .btn {
        margin-left: 1rem;
        margin-right: 1rem;
        padding-left: 0;
        padding-right: 0;
    }
    .ielts-exam-band,
    .ielts-listening-panel,
    .ielts-exam-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .ielts-reading-grid {
        grid-template-columns: 1fr;
    }
    .ielts-passage-pane,
    .ielts-answer-pane {
        height: auto;
        min-height: 0;
        max-height: none;
        border-right: 0;
        padding: 1rem;
    }
    .ielts-passage-pane {
        border-bottom: 1px solid #D1D5DB;
    }
    .ielts-listening-panel {
        grid-template-columns: 1fr;
    }
    .ielts-listening-sheet,
    .ielts-writing-sheet {
        padding: 1rem;
    }
    .ielts-option-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .ielts-option span {
        width: 100%;
    }
    .ielts-test-meta { justify-content: flex-start; }
    .diagnostic-options { grid-template-columns: 1fr; }
    .onboarding-hours { grid-template-columns: 1fr; }
    .diagnostic-row { flex-direction: column; gap: 0.75rem; }
    .diagnostic-fields { grid-template-columns: 1fr; }
    .motivation-grid { grid-template-columns: 1fr; }
    .leader-row,
    .activity-row { grid-template-columns: 1fr; gap: 0.25rem; }
    .trial-mission { flex-direction: column; align-items: flex-start; }

    .results-overall { flex-direction: column; gap: 1rem; }

    .lesson-item { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .lesson-item-right { align-self: flex-end; }

    .chat-container { height: calc(100vh - 140px); }

    .writing-hero { flex-direction: column; }
    .writing-grid { grid-template-columns: 1fr; }
    .writing-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .writing-feedback-columns { grid-template-columns: 1fr; }
    .curriculum-first .writing-grid { grid-template-columns: 1fr; }
    .gyms-hero,
    .gym-grid { grid-template-columns: 1fr; }
    .daily-mission-head,
    .strategy-hero,
    .mission-blocks,
    .strategy-grid,
    .diagnostic-grid,
    .construct-grid,
    .diagnostic-options,
    .content-grid,
    .spell-grid,
    .backbone-step { grid-template-columns: 1fr; }
    .diagnostic-actions { grid-template-columns: 1fr; }
    .achievement-ticker div { animation-duration: 18s; }
    .admin-shell { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; display: flex; overflow-x: auto; }
    .admin-brand { min-width: 160px; border-bottom: 0; border-left: 1px solid var(--border); padding-left: 0.75rem; margin: 0; }
    .admin-nav-btn { white-space: nowrap; min-width: max-content; }
    .admin-header { flex-direction: column; align-items: flex-start; }
    .landing-nav { width: calc(100% - 24px); }
    .landing-links { display: none; }
    .landing-actions { gap: 0.4rem; }
    .landing-login-link,
    .lang-toggle,
    .landing-cta.small {
        min-height: 44px;
        padding: 0.65rem 0.75rem;
        font-size: 0.88rem;
        white-space: nowrap;
    }
    .landing-logo span:last-child {
        display: none;
    }
    .landing-cta.small { display: none; }
    .landing-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 1.5rem;
        padding: 2rem 0 3rem;
    }
    .hero-visual { min-height: 420px; }
    .steps-grid,
    .feature-grid,
    .pricing-grid,
    .onboarding-hook { grid-template-columns: 1fr; }
    .onboarding-hook { padding: 1.25rem; }
    .hero-buttons,
    .modal-actions { flex-direction: column; align-items: stretch; }
    .landing-section,
    .onboarding-hook { padding: 3rem 0; }
    .onboarding-card { padding: 1.4rem; }
}

@media (max-width: 480px) {
    .placement-info { flex-direction: column; gap: 1rem; }
    .auth-card { padding: 1.5rem 1.25rem; }
    h2 { font-size: 1.3rem; }
}

.nav-bell-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--error);
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
    margin-left: 2px;
}

.lms-hub { max-width: 1280px; margin: 0 auto; padding: 24px; }

.lms-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30, 58, 138, .95), rgba(14, 165, 233, .9));
    color: white;
    box-shadow: 0 22px 48px rgba(30, 58, 138, .18);
}

.lms-hero h2 { margin: 6px 0 8px; font-size: 34px; }
.lms-hero p { max-width: 760px; margin: 0; opacity: .92; line-height: 1.8; }

.lms-bell {
    width: 112px;
    aspect-ratio: 1;
    border-radius: 16px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    display: grid;
    place-items: center;
    text-align: center;
}

.lms-bell span { display: block; font-size: 38px; font-weight: 800; }
.lms-bell small { display: block; font-weight: 700; opacity: .8; }

.lms-search-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin: 20px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
}

.lms-search-results { grid-column: 1 / -1; display: grid; gap: 10px; }

.lms-result,
.lms-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}

.lms-result strong,
.lms-list-row strong { display: block; color: var(--text); }

.lms-result span,
.lms-list-row span { display: block; color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.lms-result p { margin: 6px 0 0; color: var(--text-secondary); font-size: 14px; }

.lms-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.lms-panel {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--shadow);
}

.lms-panel.mission { grid-column: 1 / -1; }
.lms-panel h3 { margin: 0 0 14px; color: var(--text); }
.lms-panel h4 { margin: 0 0 8px; font-size: 22px; color: var(--primary); }

.mission-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.mission-steps button,
.lms-notification {
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    padding: 12px;
    cursor: pointer;
    transition: all .2s ease;
}

.mission-steps button:hover,
.lms-notification:hover { transform: translateY(-1px); border-color: var(--primary-light); }
.mission-steps strong,
.lms-notification span,
.lms-notification small { display: block; }
.mission-steps span,
.lms-notification small { color: var(--text-secondary); margin-top: 4px; }

.lms-notifications,
.lms-list,
.lms-notes { display: grid; gap: 10px; }

.lms-notification.unread { border-color: var(--secondary); box-shadow: inset 4px 0 0 var(--secondary); }

.note-composer,
.calendar-composer { display: grid; gap: 10px; margin-bottom: 14px; }

.lms-note { padding: 12px; border-radius: 10px; border: 1px solid var(--border); }
.lms-note.yellow { background: rgba(217, 119, 6, .12); }
.lms-note.green { background: rgba(5, 150, 105, .12); }
.lms-note.blue { background: rgba(59, 130, 246, .12); }
.lms-note span { display: block; font-weight: 700; color: var(--text); }
.lms-note p { margin: 6px 0 0; color: var(--text-secondary); }

.certificate-box {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30, 58, 138, .1), rgba(14, 165, 233, .12));
    border: 1px solid rgba(59, 130, 246, .24);
}

.certificate-box span { color: var(--text-secondary); }

.referral-box {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(5, 150, 105, .1), rgba(14, 165, 233, .1));
    border: 1px solid rgba(5, 150, 105, .24);
}

.referral-box strong { color: var(--text); }
.referral-box span { color: var(--text-secondary); }

.referral-link-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.coupon-box,
.preferences-box {
    display: grid;
    gap: 10px;
}

.theme-toggle {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    padding: 7px 9px;
    font-weight: 800;
    cursor: pointer;
}

.support-bubble {
    position: fixed;
    left: 22px;
    bottom: 22px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 0;
    background: var(--secondary);
    color: white;
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 18px 40px rgba(14, 165, 233, .35);
    cursor: pointer;
    z-index: 50;
}

.support-drawer {
    position: fixed;
    left: 22px;
    bottom: 90px;
    width: min(380px, calc(100vw - 44px));
    max-height: 70vh;
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 49;
}

.support-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.support-thread {
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow: auto;
    margin: 12px 0;
}

.support-message {
    padding: 10px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.support-message.ai {
    border-color: var(--secondary);
}

.support-message p {
    margin: 4px 0 0;
    color: var(--text-secondary);
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
}

.dashboard-layout > aside,
.dashboard-layout > main,
.node-player,
.command-search,
.calendar-widget,
.bulk-action-bar,
.subscription-manager-form,
.settings-form {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.track-progress-column {
    display: grid;
    gap: 12px;
}

.track-node {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.track-node > span {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    margin-top: 4px;
    background: var(--text-light);
}

.track-node.mastered > span { background: var(--success); }
.track-node.active > span,
.track-node.learning > span { background: var(--secondary); }
.track-node.locked > span { background: var(--border-dark); }
.track-node strong,
.track-node small { display: block; }
.track-node small { color: var(--text-secondary); }

.node-player {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.node-player header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.node-player header button,
.notification-bell {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
}

.notification-bell {
    position: relative;
    width: 42px;
    height: 42px;
}

.notification-bell::before {
    content: "";
    display: block;
    width: 16px;
    height: 18px;
    margin: 0 auto;
    border: 2px solid currentColor;
    border-radius: 10px 10px 6px 6px;
}

.notification-bell span {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--error);
    color: white;
    font-size: 11px;
    font-weight: 800;
    display: grid;
    place-items: center;
}

.command-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.command-search kbd {
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
}

.calendar-widget {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.calendar-widget div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.calendar-widget span { color: var(--text-secondary); }

.subscription-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 999px;
    padding: 5px 10px;
    background: var(--secondary-light);
    color: var(--secondary-dark);
    font-size: 12px;
    font-weight: 800;
}

.subscription-badge.expired,
.subscription-badge.cancelled {
    background: var(--error-light);
    color: var(--error);
}

.bulk-action-bar,
.subscription-manager-form,
.settings-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
}

.launch-strip {
    margin: 1rem 0;
}

.launch-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.launch-check {
    text-align: start;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
}

.launch-check strong,
.launch-check span {
    display: block;
}

.launch-check span,
.admin-action-list em {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.launch-check.done,
.admin-status.done {
    border-color: rgba(5, 150, 105, 0.45);
    background: rgba(5, 150, 105, 0.1);
}

.launch-check.blocked,
.admin-status.blocked {
    border-color: rgba(220, 38, 38, 0.45);
    background: rgba(220, 38, 38, 0.1);
}

.admin-status {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
}

.admin-action-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-inline-start: 1rem;
}

@media (max-width: 860px) {
    .codex-hero {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        min-height: auto;
        padding: 2rem 0 3rem;
    }
    .codex-hero-panel {
        order: -1;
    }
    .codex-alert {
        align-items: flex-start;
        flex-direction: column;
    }
    .codex-proof-grid,
    .codex-blog-grid,
    .codex-campaign .steps-grid {
        grid-template-columns: 1fr;
    }
    .codex-campaign .landing-links {
        display: none;
    }
    .codex-campaign .landing-nav {
        align-items: stretch;
    }
    .lms-hero,
    .lms-result,
    .lms-list-row { align-items: stretch; flex-direction: column; }
    .lms-search-panel,
    .lms-grid,
    .mission-steps,
    .referral-link-row,
    .dashboard-layout { grid-template-columns: 1fr; }
    .lms-panel.mission { grid-column: auto; }
    .support-bubble { left: 50%; transform: translateX(-50%); }
    .support-drawer { left: 12px; bottom: 84px; width: calc(100vw - 24px); }
}

@media (max-width: 768px) {
    .codex-campaign .landing-actions .landing-cta.small {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0.55rem 0.7rem;
        font-size: 0.78rem;
    }

    .codex-campaign .landing-actions {
        margin-inline-start: auto;
    }

    .codex-campaign .landing-login-link {
        min-height: 38px;
        padding: 0.5rem 0.65rem;
        font-size: 0.78rem;
    }
}