/* ================================================================
   educatIA Design System — Tesla-Inspired
   ================================================================
    Color Philosophy: Monochrome + one accent (Coursera Blue)
   Typography: Source Sans Pro
   Elevation: Subtle shadows. Depth via cards.
   Borders: Minimal. Separation via whitespace.
   ================================================================ */

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
    /* Primary */
    --electric-blue: #0056D2;
    --electric-blue-hover: #003E99;
    --electric-blue-light: #E8F0FE;
    --electric-blue-glow: rgba(0, 86, 210, 0.12);

    /* Surfaces */
    --white: #FFFFFF;
    --light-ash: #F5F5F5; /* Coursera section bg */
    --carbon-dark: #1F1F1F; /* Coursera black */
    --frosted-glass: #FFFFFF;
    --dark-surface-1: #272729;
    --dark-surface-2: #262628;
    --dark-surface-3: #28282a;

    /* Text */
    --text-primary: #1F1F1F;
    --text-secondary: #373A3C;
    --text-tertiary: #636363;
    --text-placeholder: #636363;
    --text-on-dark: #FFFFFF;
    --text-on-dark-secondary: #D9D9D9;

    /* Links */
    --link-light: #0056D2;
    --link-dark: #0056D2;

    /* Borders */
    --border-light: #D9D9D9;
    --border-subtle: #ECECEC;

    /* Typography */
    --font-display: "Source Sans Pro", Arial, sans-serif;
    --font-text: "Source Sans Pro", Arial, sans-serif;

    /* Sizing */
    --hero-title: 3.5rem; /* 56px */
    --section-title: 2.5rem; /* 40px */
    --card-title: 1.25rem; /* 20px */
    --nav-text: 0.875rem; /* 14px */
    --body-text: 1rem; /* 16px */
    --small-text: 0.875rem; /* 14px */
    --tiny-text: 0.75rem; /* 12px */

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;

    /* Layout */
    --max-width: 1200px;
    --nav-height: 104px; /* Taller for double header */
    --sidebar-width: 260px;
    --chat-width: 380px;

    /* Radius - Coursera uses sharp/square elements */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 4px; /* Override pill to be square */
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.4s ease;

    /* Shadows */
    --shadow-soft: 0 2px 4px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-text);
    font-size: var(--body-text);
    font-weight: 400;
    line-height: 1.43;
    color: var(--text-secondary);
    background-color: var(--white);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
    background: none;
}

/* ===== NAV POSITIONING ===== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
}

.dropdown-link:hover {
    color: var(--electric-blue) !important;
}

button {
    cursor: pointer;
}

/* Global SVG icon sizing — all inline SVGs default to 18px */
svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn--lg svg {
    width: 20px;
    height: 20px;
}

.btn--sm svg,
.btn--icon.btn--sm svg {
    width: 16px;
    height: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.016em;
}

/* ===== TYPOGRAPHY UTILITIES ===== */
.text-display {
    font-size: var(--hero-title);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -0.28px;
}

.text-section-title {
    font-size: var(--section-title);
    font-weight: 600;
    line-height: 1.1;
}

.text-card-title {
    font-family: var(--font-display);
    font-size: var(--card-title);
    font-weight: 700;
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.text-body {
    font-family: var(--font-text);
    font-size: var(--body-text);
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: -0.374px;
    color: var(--text-secondary);
}

.text-small {
    font-family: var(--font-text);
    font-size: var(--small-text);
    font-weight: 400;
    line-height: 1.29;
    letter-spacing: -0.224px;
    color: var(--text-tertiary);
}

.text-tiny {
    font-family: var(--font-text);
    font-size: var(--tiny-text);
    font-weight: 400;
    line-height: 1.33;
    letter-spacing: -0.12px;
    color: var(--text-placeholder);
}

/* ===== LAYOUT UTILITIES ===== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-4xl) 0;
}

.section--full {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section--alt {
    background-color: var(--light-ash);
}

.section--dark {
    background-color: var(--carbon-dark);
    color: var(--text-on-dark);
}

.grid {
    display: grid;
    gap: var(--space-lg);
}

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

.flex {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ===== NAVIGATION ===== */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Coursera subtle shadow */
}

/* We don't use transparent/solid toggle anymore */
.site-nav--transparent, .site-nav--solid {
    background-color: var(--white);
}

.site-nav__top {
    height: 40px;
    background-color: var(--carbon-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 13px;
    padding: 0 var(--space-xl);
}

.site-nav__top-links {
    display: flex;
    gap: var(--space-lg);
    width: 100%;
    max-width: var(--max-width);
}

.site-nav__top-link {
    color: var(--white);
    opacity: 0.8;
    cursor: pointer;
    text-transform: capitalize;
}

.site-nav__top-link.active, .site-nav__top-link:hover {
    opacity: 1;
    font-weight: 600;
}

.site-nav__inner {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-xl);
    background-color: var(--white);
}

.site-nav__inner--student {
    height: var(--nav-height);
    gap: 24px;
}

.site-nav__brand {
    display: flex;
    align-items: center;
    gap: 28px;
    min-width: 0;
}

.site-nav__student-links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-nav__student-link {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 8px 0;
}

.site-nav__student-link:hover,
.site-nav__student-link.active {
    color: var(--electric-blue);
}

.site-nav__student-link.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    height: 2px;
    border-radius: 999px;
    background: var(--electric-blue);
}

.site-nav__search--student {
    max-width: 380px;
}

.site-nav__search-button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 44px;
    border-radius: 0 20px 20px 0;
    background: var(--electric-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-nav__search--student input {
    padding-left: 16px;
    padding-right: 54px;
}

.site-nav__actions--student {
    gap: 6px;
}

.site-nav__logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--electric-blue);
    cursor: pointer;
}

.site-nav__links {
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: var(--space-lg);
}

.site-nav__explorer {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    margin-right: var(--space-lg);
    font-size: 14px;
}

.site-nav__search {
    flex: 1;
    max-width: 400px;
    position: relative;
    display: flex;
    align-items: center;
}

.site-nav__search input {
    width: 100%;
    border: 1px solid var(--text-primary);
    border-radius: 20px; /* Search input pill */
    padding: 8px 16px 8px 40px;
    font-size: 14px;
    color: var(--text-primary);
}

.site-nav__search svg {
    position: absolute;
    left: 12px;
    color: var(--text-primary);
    width: 16px;
    height: 16px;
}

.site-nav__search-button svg {
    position: static;
    left: auto;
    color: currentColor;
}

.site-nav__link {
    font-size: var(--small-text);
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    transition: color var(--transition-base);
    cursor: pointer;
}

.site-nav__link:hover {
    color: var(--electric-blue);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.site-nav__profile-menu {
    position: relative;
}

.site-nav__profile-trigger {
    width: auto;
    padding: 0 10px;
    gap: 4px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
}

.site-nav__profile-trigger-caret {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
}

.site-nav__profile-trigger-caret svg {
    width: 14px;
    height: 14px;
}

.site-nav__profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid var(--border-light);
    background: var(--white);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    display: none;
}

.site-nav__profile-dropdown.active {
    display: block;
}

.site-nav__profile-summary {
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 6px;
}

.site-nav__profile-summary strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.site-nav__profile-summary span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.site-nav__profile-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--text-secondary);
}

.site-nav__profile-link:hover {
    background: var(--light-ash);
    color: var(--electric-blue);
}

.site-nav__profile-link svg {
    width: 16px;
    height: 16px;
}

.site-nav__profile-link--button {
    border: none;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.site-nav__icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    position: relative;
}

.site-nav__icon-btn:hover {
    color: var(--electric-blue);
}

.site-nav--transparent .site-nav__icon-btn,
.site-nav--solid .site-nav__icon-btn {
    color: var(--text-on-dark);
}

.site-nav--transparent .site-nav__icon-btn:hover,
.site-nav--solid .site-nav__icon-btn:hover {
    color: var(--text-on-dark-secondary);
}

.site-nav__icon-btn svg {
    width: 20px;
    height: 20px;
}

.site-nav__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--electric-blue);
    border-radius: var(--radius-full);
}

.site-nav__mobile-toggle {
    display: none;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.site-nav__mobile-toggle svg {
    width: 22px;
    height: 22px;
}

/* Mobile menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    z-index: 999;
    padding: calc(var(--nav-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
    flex-direction: column;
    gap: var(--space-sm);
    overflow-y: auto;
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu__link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base);
}

.mobile-menu__link:hover {
    background-color: var(--electric-blue-light);
}

.mobile-menu__divider {
    height: 1px;
    background-color: var(--border-light);
    margin: var(--space-sm) 0;
}

/* ===== HERO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background-color: var(--carbon-dark); /* Apple typical hero bg */
    color: var(--text-on-dark);
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 980px;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__title {
    font-size: var(--hero-title);
    font-weight: 600;
    color: var(--text-on-dark);
    margin-bottom: var(--space-sm);
    line-height: 1.07;
    letter-spacing: -0.28px;
}

.hero__subtitle {
    font-size: 1.3125rem; /* 21px */
    font-weight: 400;
    color: var(--text-on-dark);
    margin-bottom: var(--space-xl);
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.hero__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== BUTTONS — Apple-inspired pill system ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 17px;
    font-weight: 400;
    padding: 8px 20px;
    border-radius: 980px;
    min-height: 40px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: -0.01em;
}

.btn:focus {
    outline: 2px solid var(--electric-blue);
    outline-offset: 2px;
}

.btn:active {
    opacity: 0.82;
}

.btn--primary {
    background-color: #0071e3;
    color: var(--white);
}

.btn--primary:hover {
    background-color: #0077ed;
}

.btn--secondary {
    background-color: #f5f5f7;
    color: #1d1d1f;
}

.btn--secondary:hover {
    background-color: #e8e8ed;
}

.btn--outline {
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
}

.btn--outline:hover {
    background-color: rgba(0, 102, 204, 0.06);
}

.btn--dark-outline {
    background-color: transparent;
    color: #1d1d1f;
    border: 1px solid #1d1d1f;
}

.btn--dark-outline:hover {
    background-color: rgba(29, 29, 31, 0.04);
}

.btn--ghost {
    background-color: transparent;
    color: #0066cc;
    font-weight: 400;
    padding: 8px 16px;
}

.btn--ghost:hover {
    text-decoration: underline;
}

.btn--dark {
    background-color: #1d1d1f;
    color: var(--white);
}

.btn--dark:hover {
    background-color: #000000;
}

.btn--sm {
    min-height: 32px;
    min-width: auto;
    padding: 5px 14px;
    font-size: 14px;
}

.btn--lg {
    min-height: 48px;
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 300;
}

.btn--icon {
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 0;
}

.btn--icon svg {
    width: 20px;
    height: 20px;
}

.btn--full {
    width: 100%;
}

/* ===== CARDS ===== */
.card {
    background-color: var(--light-ash);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: none; /* Apple flat by default */
}

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

.card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

.card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card__image img {
    transform: scale(1.03);
}

.card__badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    font-size: var(--tiny-text);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background-color: var(--frosted-glass);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
}

.card__body {
    padding: var(--space-lg);
}

.card__tag {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--card-title);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.19;
    letter-spacing: 0.231px;
}

.card__desc {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.card__meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card__meta-item svg {
    width: 14px;
    height: 14px;
}

/* Feature Card (for objectives section) */
.feature-card {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background-color: var(--light-ash);
    text-align: center;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.feature-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
}

.feature-card__icon svg {
    width: 28px;
    height: 28px;
}

.feature-card__title {
    font-family: var(--font-display);
    font-size: var(--card-title);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.14;
    letter-spacing: 0.196px;
}

.feature-card__desc {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Stat Card */
.stat-card {
    text-align: center;
    padding: var(--space-xl);
}

.stat-card__number {
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--electric-blue);
    margin-bottom: var(--space-xs);
    line-height: 1;
}

.stat-card__label {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

/* Course Card (in dashboard) */
.course-card {
    background: var(--light-ash);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: none;
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.course-card__image {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.course-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-card__progress-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-light);
}

.course-card__progress-fill {
    height: 100%;
    background: var(--electric-blue);
    transition: width 0.5s ease;
}

.course-card__body {
    padding: var(--space-md);
}

.course-card__category {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
    margin-bottom: 4px;
}

.course-card__title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.course-card__instructor {
    font-size: var(--tiny-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.course-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}

.course-card__stat {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    display: flex;
    align-items: center;
    gap: 4px;
}

.course-card__stat svg {
    width: 12px;
    height: 12px;
}

/* ===== FORMS ===== */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--small-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.form-input {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    font-size: var(--body-text);
    color: var(--text-primary);
    background-color: var(--white);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base);
}

.form-input:focus {
    border-color: var(--electric-blue);
}

.form-input::placeholder {
    color: var(--text-placeholder);
}

.form-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--space-md);
    font-size: var(--body-text);
    color: var(--text-primary);
    background-color: var(--white);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base);
    resize: vertical;
}

.form-textarea:focus {
    border-color: var(--electric-blue);
}

.form-select {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-md);
    font-size: var(--body-text);
    color: var(--text-primary);
    background-color: var(--white);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5E62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.form-select:focus {
    border-color: var(--electric-blue);
}

.form-hint {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    margin-top: var(--space-xs);
}

.form-error {
    font-size: var(--tiny-text);
    color: #D32F2F;
    margin-top: var(--space-xs);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--electric-blue);
    cursor: pointer;
}

.form-divider {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    color: var(--text-placeholder);
    font-size: var(--small-text);
}

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

/* File Upload */
.file-upload {
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.file-upload:hover {
    border-color: var(--electric-blue);
    background-color: var(--electric-blue-light);
}

.file-upload__icon {
    margin: 0 auto var(--space-md);
    color: var(--text-placeholder);
}

.file-upload__icon svg {
    width: 32px;
    height: 32px;
}

.file-upload__text {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

.file-upload__text span {
    color: var(--electric-blue);
    font-weight: 500;
}

/* ===== SIDEBAR ===== */
.layout-with-sidebar {
    display: flex;
    min-height: calc(100vh - var(--nav-height));
    padding-top: var(--nav-height);
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--white);
    border-right: 1px solid var(--border-light);
    padding: var(--space-lg) 0;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 100;
}

.sidebar__section {
    margin-bottom: var(--space-lg);
}

.sidebar__section-title {
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-sm);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 10px var(--space-lg);
    font-size: var(--body-text);
    font-weight: 400;
    color: var(--text-tertiary);
    transition: color var(--transition-base), background-color var(--transition-base);
    cursor: pointer;
    position: relative;
}

.sidebar__link:hover {
    color: var(--text-primary);
    background-color: var(--electric-blue-light);
}

.sidebar__link.active {
    color: var(--electric-blue);
    font-weight: 500;
}

.sidebar__link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background-color: var(--electric-blue);
    border-radius: 0 2px 2px 0;
}

.sidebar__link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__link-badge {
    margin-left: auto;
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--electric-blue);
    background-color: var(--electric-blue-light);
    padding: 2px 8px;
    border-radius: 10px;
}

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: var(--space-xl);
    min-height: calc(100vh - var(--nav-height));
}

/* ===== DASHBOARD ===== */
.dashboard-header {
    margin-bottom: var(--space-xl);
}

.dashboard-header__greeting {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.dashboard-header__subtitle {
    font-size: var(--body-text);
    color: var(--text-tertiary);
}

.dashboard-section {
    margin-bottom: var(--space-2xl);
}

.dashboard-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.learning-dashboard {
    min-height: calc(100vh - var(--nav-height));
    padding-top: var(--nav-height);
    background: #f6f8fb;
}

.learning-dashboard--loading {
    display: flex;
    align-items: center;
}

.learning-dashboard__inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px 40px;
}

.learning-dashboard__loading {
    min-height: calc(100vh - var(--nav-height) - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-secondary);
}

.learning-dashboard__loading-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--electric-blue-light);
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-dashboard__loading-icon svg {
    width: 24px;
    height: 24px;
}

.learning-dashboard__header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 24px;
}

.learning-dashboard__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #0a3a8f;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
    flex-shrink: 0;
}

.learning-dashboard__welcome {
    min-width: 0;
}

.learning-dashboard__welcome h1 {
    font-size: 2.1rem;
    line-height: 1.05;
    margin-bottom: 8px;
}

.learning-dashboard__welcome p {
    font-size: 15px;
    color: var(--text-secondary);
}

.learning-dashboard__welcome a {
    color: var(--electric-blue);
    font-weight: 600;
}

.learning-dashboard__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.learning-stat-card {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 18px 20px;
}

.learning-stat-card__value {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.learning-stat-card__label {
    font-size: 13px;
    color: var(--text-tertiary);
}

.learning-dashboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.learning-dashboard__main,
.learning-dashboard__coach {
    display: grid;
    gap: 20px;
    align-self: start;
}

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

.learning-dashboard__coach {
    position: sticky;
    top: calc(var(--nav-height) + 20px);
}

.learning-panel {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.03);
}

.learning-panel--soft {
    background: #f3f7ff;
    border-color: #dce7ff;
}

.learning-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.learning-panel__header h2 {
    font-size: 1.2rem;
    font-weight: 700;
}

.learning-panel__header span,
.learning-panel__header a {
    font-size: 13px;
    color: var(--electric-blue);
    font-weight: 600;
}

.learning-panel__header--stacked {
    align-items: flex-start;
}

.learning-panel__header--stacked p {
    margin-top: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.learning-panel__header--compact {
    margin-bottom: 18px;
}

.learning-goals {
    display: grid;
    gap: 14px;
}

.learning-goal {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.learning-goal__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid #d4dbe6;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.learning-goal__icon.completed {
    background: #e8f7eb;
    border-color: #91d9a7;
    color: #0f8c43;
}

.learning-goal__icon svg {
    width: 14px;
    height: 14px;
}

.learning-goal__body a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.learning-goal__body p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.learning-goal__counter {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.learning-plan-days {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}

.learning-plan-day {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-plan-day.active {
    border-color: #cfdcff;
    background: #eef4ff;
    color: var(--electric-blue);
}

.learning-calendar {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
}

.learning-calendar__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.learning-calendar__top strong {
    font-size: 15px;
    text-transform: capitalize;
}

.learning-calendar__arrows {
    display: flex;
    gap: 8px;
}

.learning-calendar__arrows button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-calendar__arrows button svg {
    width: 14px;
    height: 14px;
}

.learning-calendar__weekdays,
.learning-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

.learning-calendar__weekdays {
    margin-bottom: 8px;
}

.learning-calendar__weekdays span {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    text-transform: lowercase;
}

.learning-calendar__day {
    min-height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-secondary);
}

.learning-calendar__day--today {
    border: 2px solid #6c3fe3;
    color: #6c3fe3;
    font-weight: 700;
}

.learning-calendar__day--muted {
    background: transparent;
}

.learning-plan-notes {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.learning-plan-notes div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.learning-plan-notes span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6c3fe3;
    flex-shrink: 0;
}

.learning-summary-list {
    display: grid;
    gap: 14px;
}

.learning-summary-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.learning-summary-list__item span {
    color: var(--text-secondary);
}

.learning-summary-list__item strong {
    color: var(--text-primary);
}

.learning-coach-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.learning-coach-strip__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    text-transform: lowercase;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.learning-coach-strip h2 {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.learning-coach-strip p {
    font-size: 14px;
    color: var(--text-secondary);
}

.learning-coach-strip__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.learning-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.learning-tab {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--white);
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 700;
}

.learning-tab.active {
    background: #344054;
    border-color: #344054;
    color: var(--white);
}

.learning-course-list {
    display: grid;
}

.learning-course-row {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.9fr) auto auto;
    gap: 16px;
    align-items: center;
    padding: 22px 0;
    border-top: 1px solid var(--border-subtle);
}

.learning-course-row:first-child {
    border-top: none;
    padding-top: 8px;
}

.learning-course-row__details h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.learning-course-row__meta,
.learning-course-row__date {
    font-size: 13px;
    color: var(--text-secondary);
}

.learning-course-row__date {
    margin-top: 6px;
}

.learning-course-row__progress {
    margin-top: 14px;
}

.learning-course-row__progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.learning-course-row__progress-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #6c3fe3 0%, #0056D2 100%);
}

.learning-course-row__foot {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.learning-course-row__activity {
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: #fbfcfe;
    padding: 16px;
    display: grid;
    gap: 6px;
}

.learning-course-row__activity strong {
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.learning-course-row__activity span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.learning-course-row__button {
    min-width: 120px;
}

.learning-course-row__more {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--text-tertiary);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-course-row__more:hover {
    background: #f3f4f6;
}

.learning-coach-panel__icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}

.learning-coach-panel__hero {
    text-align: center;
    margin-bottom: 18px;
}

.learning-coach-panel__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: #eef4ff;
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-coach-panel__avatar svg {
    width: 28px;
    height: 28px;
}

.learning-coach-panel__hero h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.learning-coach-panel__hero p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.learning-coach-panel__quick-actions {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.learning-coach-panel__context {
    display: grid;
    gap: 4px;
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    margin-bottom: 16px;
}

.learning-coach-panel__context span {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.learning-coach-panel__context strong {
    font-size: 14px;
    color: var(--text-primary);
}

.learning-coach-panel__messages {
    display: grid;
    gap: 12px;
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.learning-coach-message {
    border-radius: 16px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
}

.learning-coach-message--bot {
    background: #f3f7ff;
    color: var(--text-primary);
}

.learning-coach-message--user {
    background: #0056D2;
    color: var(--white);
}

.learning-coach-panel__composer {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 8px 10px;
}

.learning-coach-panel__composer input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.learning-coach-panel__composer button {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--electric-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-coach-panel__composer button:disabled,
.learning-coach-panel__composer input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.learning-empty-state {
    padding: 42px 24px;
    text-align: center;
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    background: var(--white);
}

.learning-empty-state--compact {
    margin-top: 8px;
}

.learning-empty-state__icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #eef4ff;
    color: var(--electric-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.learning-empty-state__icon svg {
    width: 24px;
    height: 24px;
}

.learning-empty-state h2,
.learning-empty-state h3 {
    margin-bottom: 10px;
}

.learning-empty-state p {
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto 18px;
    line-height: 1.6;
}

.teacher-dashboard {
    display: grid;
    gap: 24px;
    max-width: 1400px;
}

.teacher-dashboard__header {
    justify-content: space-between;
}

.teacher-dashboard__header .learning-dashboard__welcome {
    flex: 1;
}

.teacher-dashboard__header-actions {
    margin-left: auto;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.teacher-dashboard__overview-copy {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.teacher-dashboard__course-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.teacher-dashboard__status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.teacher-dashboard__status-badge.is-active {
    color: #0f8c43;
    background: #edf9f0;
    border-color: #cde8d4;
}

.teacher-dashboard__status-badge.is-hidden {
    color: #5f6b7a;
    background: #f4f6f8;
    border-color: #dde3ea;
}

.teacher-dashboard__activity-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.teacher-dashboard__activity-meta span {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--text-tertiary);
    font-size: 12px;
    line-height: 1.2;
}

.teacher-dashboard__course-preview {
    text-decoration: none;
}

.teacher-dashboard__course-preview svg {
    width: 18px;
    height: 18px;
}

.teacher-dashboard__side-panel .learning-coach-panel__messages {
    max-height: none;
}

.dashboard-section__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
}

.dashboard-section__action {
    font-size: var(--small-text);
    color: var(--electric-blue);
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition-base);
}

.dashboard-section__action:hover {
    opacity: 0.8;
}

/* Resume Card (prominent) */
.resume-card {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    background: var(--light-ash);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    cursor: pointer;
    transition: transform var(--transition-base);
}

.resume-card:hover {
    transform: translateY(-2px);
}

.resume-card__image {
    width: 200px;
    height: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.resume-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.resume-card__content {
    flex: 1;
}

.resume-card__tag {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
    margin-bottom: var(--space-sm);
}

.resume-card__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.resume-card__lesson {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-md);
}

.resume-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.stats-row__item {
    padding: var(--space-lg);
    background: var(--light-ash);
    border-radius: var(--radius-md);
}

.stats-row__number {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.stats-row__label {
    font-size: var(--tiny-text);
    color: var(--text-tertiary);
}

/* ===== PROGRESS BAR ===== */
.progress-bar {
    height: 6px;
    background-color: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar__fill {
    height: 100%;
    background-color: var(--electric-blue);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-bar--lg {
    height: 8px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-xs);
}

.progress-info__text {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.progress-info__percent {
    font-size: var(--tiny-text);
    font-weight: 500;
    color: var(--electric-blue);
}

/* ===== CHATBOT ===== */
.chat-panel {
    width: var(--chat-width);
    background: var(--white);
    border-left: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height));
    position: fixed;
    top: var(--nav-height);
    right: 0;
    z-index: 100;
    transform: translateX(100%);
    transition: transform var(--transition-base);
}

.chat-panel.open {
    transform: translateX(0);
}

.chat-panel__header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chat-panel__title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chat-panel__title-dot {
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
    border-radius: var(--radius-full);
}

.chat-panel__messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.teacher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 20%, #fff 0%, #e8f0fe 42%, #b6d4fe 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 86, 210, 0.18);
    animation: teacher-float 3s ease-in-out infinite;
}

.teacher-avatar__svg {
    width: 34px;
    height: 34px;
}

@keyframes teacher-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.anti-cheat-banner {
    background: #e8f0fe;
    border: 1px solid rgba(0, 86, 210, 0.22);
    color: #0056D2;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.anti-cheat-banner--danger {
    background: #fff3f1;
    border-color: rgba(211, 47, 47, 0.25);
    color: #A72828;
}

.chat-message {
    max-width: 85%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--small-text);
    line-height: 1.5;
}

.chat-message--bot {
    background-color: var(--light-ash);
    color: var(--text-secondary);
    align-self: flex-start;
    border-bottom-left-radius: var(--radius-sm);
}

.chat-message--user {
    background-color: var(--electric-blue);
    color: var(--text-on-dark);
    align-self: flex-end;
    border-bottom-right-radius: var(--radius-sm);
}

.chat-message__time {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    margin-top: var(--space-xs);
}

.chat-panel__input-area {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.chat-panel__input {
    flex: 1;
    height: 40px;
    padding: 0 var(--space-md);
    font-size: var(--small-text);
    color: var(--text-primary);
    background: var(--light-ash);
    border-radius: 20px;
    border: none;
}

.chat-panel__input::placeholder {
    color: var(--text-placeholder);
}

.chat-panel__send {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--electric-blue);
    color: var(--text-on-dark);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-base);
    flex-shrink: 0;
}

.chat-panel__send:hover {
    background-color: var(--electric-blue-hover);
}

.chat-panel__send svg {
    width: 18px;
    height: 18px;
}

/* ===== TABLES ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--text-placeholder);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.data-table tbody td {
    font-size: var(--body-text);
    color: var(--text-secondary);
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.data-table tbody tr:hover {
    background-color: var(--electric-blue-light);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ===== NOTIFICATIONS ===== */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--transition-base);
    cursor: pointer;
}

.notification-item:hover {
    background-color: var(--electric-blue-light);
}

.notification-item--unread {
    background-color: var(--electric-blue-light);
}

.notification-item__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--light-ash);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.notification-item__icon--blue {
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
}

.notification-item__icon svg {
    width: 18px;
    height: 18px;
}

.notification-item__content {
    flex: 1;
}

.notification-item__title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.notification-item__body {
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.notification-item__time {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

/* ===== PROFILE ===== */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-2xl) 0;
}

.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--electric-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--electric-blue);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info__name {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.profile-info__role {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
}

.profile-info__meta {
    display: flex;
    gap: var(--space-lg);
}

.profile-info__meta-item {
    font-size: var(--small-text);
    color: var(--text-placeholder);
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile-info__meta-item svg {
    width: 14px;
    height: 14px;
}

/* ===== SETTINGS / TOGGLES ===== */
.settings-section {
    margin-bottom: var(--space-2xl);
}

.settings-section__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
}

.settings-item__info {
    flex: 1;
}

.settings-item__label {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.settings-item__desc {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

.toggle {
    width: 44px;
    height: 24px;
    background-color: var(--border-subtle);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-base);
    flex-shrink: 0;
}

.toggle.active {
    background-color: var(--electric-blue);
}

.toggle__handle {
    width: 20px;
    height: 20px;
    background-color: var(--white);
    border-radius: var(--radius-full);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-base);
}

.toggle.active .toggle__handle {
    transform: translateX(20px);
}

/* ===== BADGES ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tiny-text);
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
}

.badge--blue {
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
}

.badge--green {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
}

.badge--orange {
    background-color: rgba(0, 86, 210, 0.08);
    color: #0056D2;
}

.badge--red {
    background-color: rgba(211, 47, 47, 0.1);
    color: #D32F2F;
}

.badge--gray {
    background-color: var(--light-ash);
    color: var(--text-tertiary);
}

/* ===== TABS ===== */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xl);
}

.tab {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-tertiary);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover {
    color: var(--text-primary);
}

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

/* ===== SEARCH ===== */
.search-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--light-ash);
    border-radius: var(--radius-md);
    padding: 0 var(--space-md);
    height: 48px;
    transition: background-color var(--transition-base);
}

.search-bar:focus-within {
    background-color: var(--white);
    outline: 2px solid var(--electric-blue);
}

.search-bar__icon {
    color: var(--text-placeholder);
    flex-shrink: 0;
}

.search-bar__icon svg {
    width: 20px;
    height: 20px;
}

.search-bar__input {
    flex: 1;
    height: 100%;
    font-size: var(--body-text);
    color: var(--text-primary);
    background: transparent;
}

.search-bar__input::placeholder {
    color: var(--text-placeholder);
}

/* Filter Pills */
.filter-pills {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.filter-pill {
    padding: 6px 16px;
    font-size: var(--small-text);
    font-weight: 500;
    color: var(--text-tertiary);
    background: var(--light-ash);
    border-radius: 20px;
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}

.filter-pill:hover {
    background-color: var(--electric-blue-light);
    color: var(--text-primary);
}

.filter-pill.active {
    background-color: var(--electric-blue);
    color: var(--text-on-dark);
}

/* ===== FOOTER ===== */
.site-footer {
    background-color: var(--carbon-dark);
    color: var(--text-on-dark);
    padding: var(--space-4xl) 0 var(--space-xl);
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

.footer__brand {
    max-width: 280px;
}

.footer__logo {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-on-dark);
    margin-bottom: var(--space-md);
}

.footer__desc {
    font-size: var(--small-text);
    color: var(--text-on-dark-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.footer__social {
    display: flex;
    gap: var(--space-sm);
}

.footer__social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark-secondary);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.footer__social-link:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-on-dark);
}

.footer__social-link svg {
    width: 18px;
    height: 18px;
}

.footer__column-title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-on-dark);
    margin-bottom: var(--space-lg);
}

.footer__link {
    display: block;
    font-size: var(--small-text);
    color: var(--text-on-dark-secondary);
    padding: 4px 0;
    transition: color var(--transition-base);
}

.footer__link:hover {
    color: var(--text-on-dark);
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__copyright {
    font-size: var(--tiny-text);
    color: var(--text-on-dark-secondary);
}

.footer__bottom-links {
    display: flex;
    gap: var(--space-lg);
}

.footer__bottom-link {
    font-size: var(--tiny-text);
    color: var(--text-on-dark-secondary);
    transition: color var(--transition-base);
}

.footer__bottom-link:hover {
    color: var(--text-on-dark);
}

/* ===== AUTH PAGES ===== */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.auth-page__form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) var(--space-2xl);
}

.auth-page__form-container {
    width: 100%;
    max-width: 420px;
}

.auth-page__back {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--small-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-2xl);
    cursor: pointer;
    transition: color var(--transition-base);
}

.auth-page__back:hover {
    color: var(--text-primary);
}

.auth-page__back svg {
    width: 16px;
    height: 16px;
}

.auth-page__title {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.auth-page__subtitle {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    margin-bottom: var(--space-xl);
}

.auth-page__image-side {
    position: relative;
    overflow: hidden;
}

.auth-page__image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-page__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(23, 26, 32, 0.4), rgba(62, 106, 225, 0.2));
}

.auth-page__footer {
    margin-top: var(--space-xl);
    text-align: center;
}

.auth-page__footer-text {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

.auth-page__footer-link {
    color: var(--electric-blue);
    font-weight: 500;
    cursor: pointer;
}

.auth-page__footer-link:hover {
    text-decoration: underline;
}

/* Verification badge */
.verification-badge {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--electric-blue-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.verification-badge__icon {
    color: var(--electric-blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.verification-badge__icon svg {
    width: 20px;
    height: 20px;
}

.verification-badge__text {
    font-size: var(--small-text);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===== COURSE VIEW ===== */
.course-hero {
    position: relative;
    height: 280px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.course-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 26, 32, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    padding: var(--space-xl);
}

.course-hero__info {
    color: var(--text-on-dark);
}
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: background-color var(--transition-base), color var(--transition-base);
    position: relative;

.course-hero__title {
    font-size: var(--section-title);
    font-weight: 500;
    margin-bottom: var(--space-sm);
    color: var(--text-on-dark);
}

.course-hero__meta {
    display: flex;
    gap: var(--space-lg);
    font-size: var(--small-text);
    color: var(--text-on-dark-secondary);
}

/* Lesson Sidebar */
.lesson-sidebar {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.lesson-sidebar__module {
    border-bottom: 1px solid var(--border-light);
}

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

.lesson-sidebar__module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.lesson-sidebar__module-header:hover {
    background-color: var(--electric-blue-light);
}

.lesson-sidebar__module-title {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
}

.lesson-sidebar__module-count {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.lesson-sidebar__lessons {
    padding: 0 var(--space-lg) var(--space-md);
}

.lesson-sidebar__lesson {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--small-text);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.lesson-sidebar__lesson:hover {
    background-color: var(--electric-blue-light);
    color: var(--text-primary);
}

.lesson-sidebar__lesson.active {
    background-color: var(--electric-blue-light);
    color: var(--electric-blue);
    font-weight: 500;
}

.lesson-sidebar__lesson.completed {
    color: var(--text-placeholder);
}

.lesson-sidebar__lesson-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lesson-sidebar__lesson-icon svg {
    width: 16px;
    height: 16px;
}

/* ===== LESSON VIEW ===== */
.lesson-layout {
    display: grid;
    grid-template-columns: 1fr var(--chat-width);
    gap: 0;
    min-height: calc(100vh - var(--nav-height));
}

.lesson-content {
    padding: var(--space-xl) var(--space-2xl);
    max-width: 800px;
}

.lesson-content h2 {
    font-size: 1.375rem;
    margin-bottom: var(--space-lg);
}

.lesson-content p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
}

.lesson-nav {
    display: flex;
    justify-content: space-between;
    padding-top: var(--space-2xl);
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--border-light);
}

/* ===== PROFILE PAGE ===== */
.profile-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.08), transparent 26%),
        linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
}

.profile-page__inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 24px 48px;
    display: grid;
    gap: 24px;
}

.profile-hero,
.profile-card {
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.profile-hero {
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: center;
}

.profile-hero__identity {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.profile-hero__avatar {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0056d2 0%, #1d8cf8 100%);
    color: var(--white);
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-hero__eyebrow {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.profile-hero h1 {
    font-size: 40px;
    margin-bottom: 8px;
}

.profile-hero p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.profile-hero__actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.profile-stat {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid var(--border-subtle);
    background: #f8fafc;
}

.profile-stat strong {
    display: block;
    font-size: 30px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.profile-stat span {
    display: block;
    font-size: 13px;
    color: var(--text-tertiary);
}

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

.profile-card {
    padding: 24px;
}

.profile-card--loading,
.profile-card--error {
    padding: 40px;
    text-align: center;
}

.profile-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.profile-card__header h2 {
    font-size: 22px;
}

.profile-card__header span {
    display: inline-flex;
    color: var(--electric-blue);
}

.profile-card__empty {
    font-size: 14px;
    color: var(--text-secondary);
}

.profile-detail-list,
.profile-activity-list,
.profile-certificates {
    display: grid;
    gap: 12px;
}

.profile-detail-row,
.profile-activity-item,
.profile-certificate-item {
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 16px;
    background: #fbfdff;
}

.profile-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.profile-detail-row span {
    color: var(--text-tertiary);
    font-size: 14px;
}

.profile-detail-row strong,
.profile-activity-item strong,
.profile-certificate-item strong {
    color: var(--text-primary);
}

.profile-activity-item p,
.profile-certificate-item span {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* ===== COURSE DETAIL ===== */
.course-detail-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background: linear-gradient(180deg, #edf2fb 0%, #f8fafc 100%);
}

.course-detail-page--loading {
    display: block;
}

.course-detail__audiences {
    min-height: 40px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: #111827;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
}

.course-detail__audiences span {
    padding-top: 2px;
}

.course-detail__audiences .active {
    color: var(--white);
    border-bottom: 2px solid var(--white);
}

.course-detail__shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 18px 24px 48px;
}

.course-detail__loading {
    margin-top: 18px;
    padding: 32px;
    background: var(--white);
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    text-align: center;
}

.course-detail__loading--error {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.course-detail__breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 18px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.course-detail__breadcrumbs a:hover {
    color: var(--electric-blue);
}

.course-detail__breadcrumbs svg {
    width: 14px;
    height: 14px;
}

.course-detail__hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(135deg, #eef3ff 0%, #f8fbff 100%);
    padding: 38px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) 320px;
    gap: 24px;
}

.course-detail__hero-copy {
    position: relative;
    z-index: 2;
}

.course-detail__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 18px;
}

.course-detail__hero h1 {
    font-size: 52px;
    line-height: 1.02;
    max-width: 720px;
    margin-bottom: 16px;
}

.course-detail__hero p {
    max-width: 700px;
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.course-detail__instructor {
    margin-top: 16px;
    font-size: 15px;
    color: var(--text-secondary);
}

.course-detail__instructor a {
    color: var(--electric-blue);
    font-weight: 600;
}

.course-detail__hero-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.course-detail__hero-graphic {
    position: relative;
    min-height: 320px;
}

.course-detail__hero-ring {
    position: absolute;
    border-radius: 50%;
    border: 28px solid rgba(0, 86, 210, 0.08);
}

.course-detail__hero-ring--large {
    width: 360px;
    height: 360px;
    right: -120px;
    top: -10px;
}

.course-detail__hero-ring--medium {
    width: 240px;
    height: 240px;
    right: -40px;
    top: 60px;
    border-width: 22px;
}

.course-detail__hero-ring--small {
    width: 140px;
    height: 140px;
    right: 24px;
    top: 110px;
    border-width: 18px;
}

.course-detail__stats {
    margin: -28px auto 0;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.course-detail__stat {
    padding: 20px 22px;
    border-right: 1px solid var(--border-subtle);
}

.course-detail__stat:last-child {
    border-right: none;
}

.course-detail__stat strong {
    display: block;
    font-size: 26px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.course-detail__stat span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.course-detail__stat small {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.course-detail__tabs {
    margin-top: 28px;
    display: flex;
    gap: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
}

.course-detail__tabs a {
    padding-bottom: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.course-detail__tabs a.active,
.course-detail__tabs a:hover {
    color: var(--electric-blue);
    border-bottom-color: var(--electric-blue);
}

.course-detail__section {
    margin-top: 28px;
    padding: 28px;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
}

.course-detail__section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.course-detail__section-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-blue);
    margin-bottom: 8px;
}

.course-detail__section h2 {
    font-size: 30px;
}

.course-detail__section-badge {
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf4ff;
    color: var(--electric-blue);
    font-size: 12px;
    font-weight: 700;
}

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

.course-detail__outcome {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid var(--border-subtle);
}

.course-detail__outcome span {
    color: #059669;
}

.course-detail__outcome p {
    line-height: 1.7;
    color: var(--text-secondary);
}

.course-detail__info-grid,
.course-detail__modules,
.course-workspace__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.course-detail__info-card,
.course-detail__module-card,
.course-workspace__info-card {
    padding: 20px;
    border-radius: 20px;
    border: 1px solid var(--border-subtle);
    background: #fbfdff;
}

.course-detail__info-card strong,
.course-workspace__info-card h3 {
    display: block;
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.course-detail__info-card p,
.course-detail__module-card p,
.course-workspace__empty {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.course-detail__module-meta {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--electric-blue);
    margin-bottom: 10px;
}

.course-detail__module-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.course-detail__module-lessons {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.course-detail__module-lessons li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--text-secondary);
}

.course-detail__module-lessons li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--electric-blue);
}

.course-detail__empty-card,
.course-detail__review-placeholder {
    padding: 22px;
    border-radius: 20px;
    background: #f8fbff;
    border: 1px solid var(--border-subtle);
}

.course-detail__empty-card strong,
.course-detail__review-placeholder strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.course-detail__empty-card p,
.course-detail__review-placeholder p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ===== COURSE WORKSPACE ===== */
.course-workspace__document {
    display: grid;
    gap: 24px;
}

.course-workspace__hero-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.course-workspace__metric {
    padding: 18px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid var(--border-subtle);
}

.course-workspace__metric strong {
    display: block;
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.course-workspace__metric span {
    font-size: 13px;
    color: var(--text-tertiary);
}

.course-workspace__next,
.course-workspace__section {
    padding: 22px;
    border-radius: 20px;
    background: #fbfdff;
    border: 1px solid var(--border-subtle);
}

.course-workspace__next {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.course-workspace__next h2 {
    font-size: 28px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.course-workspace__next p,
.course-workspace__section p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.course-workspace__next-actions {
    flex-shrink: 0;
}

.course-workspace__bullet-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.course-workspace__bullet-list li {
    position: relative;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.course-workspace__bullet-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--electric-blue);
}

.course-workspace__info-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.course-workspace__info-card-head span {
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4ff;
    color: var(--electric-blue);
    font-size: 12px;
    font-weight: 700;
}

.course-workspace__action-list,
.course-workspace__resource-list,
.course-workspace__certificate-list {
    display: grid;
    gap: 10px;
}

.course-workspace__action-item,
.course-workspace__resource-item,
.course-workspace__certificate-item,
.lesson-rail__item--button {
    width: 100%;
    text-align: left;
    font: inherit;
    border: 1px solid var(--border-subtle);
    background: var(--white);
}

.course-workspace__action-item,
.course-workspace__resource-item {
    padding: 14px;
    border-radius: 16px;
    display: grid;
    gap: 4px;
}

.course-workspace__action-item strong,
.course-workspace__resource-item strong,
.course-workspace__certificate-item strong {
    color: var(--text-primary);
}

.course-workspace__action-item span,
.course-workspace__resource-item span,
.course-workspace__certificate-item span {
    font-size: 13px;
    color: var(--text-secondary);
}

.course-workspace__action-item:hover,
.course-workspace__resource-item:hover {
    border-color: rgba(0, 86, 210, 0.18);
    background: #f3f7ff;
}

.course-workspace__certificate-item {
    padding: 14px;
    border-radius: 16px;
    display: grid;
    gap: 4px;
}

.course-workspace__quiz-panel {
    min-height: 24px;
}

/* ===== LESSON WORKSPACE ===== */
.lesson-workspace {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background: linear-gradient(180deg, #edf2fb 0%, #f7f9fc 100%);
}

.lesson-workspace--loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-height) + 32px) 24px 40px;
}

.lesson-workspace__loading-card {
    width: min(560px, 100%);
    padding: 32px;
    border-radius: 24px;
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
    text-align: center;
}

.lesson-workspace__loading-card--error {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.lesson-workspace__top,
.lesson-workspace__grid {
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.lesson-workspace__top {
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.lesson-workspace__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-secondary);
}

.lesson-workspace__back:hover {
    color: var(--electric-blue);
}

.lesson-workspace__progress {
    min-width: 280px;
    display: grid;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
}

.lesson-workspace__progress span {
    font-size: 13px;
    color: var(--text-secondary);
}

.lesson-workspace__progress-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.lesson-workspace__progress-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0056d2 0%, #5ca9ff 100%);
    border-radius: inherit;
}

.lesson-workspace__grid {
    padding-top: 16px;
    padding-bottom: 32px;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.lesson-rail,
.lesson-stage__card,
.lesson-coach__panel {
    background: var(--white);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.lesson-rail,
.lesson-coach__panel {
    position: sticky;
    top: calc(var(--nav-height) + 16px);
    max-height: calc(100vh - var(--nav-height) - 28px);
    overflow: auto;
}

.lesson-rail__header {
    padding: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.lesson-rail__eyebrow,
.lesson-stage__eyebrow,
.lesson-stage__meta,
.lesson-rail__module-meta,
.lesson-stage__section-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.lesson-rail__header h2 {
    font-size: 28px;
    margin: 10px 0 8px;
}

.lesson-rail__header p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.lesson-rail__modules {
    padding: 18px;
    display: grid;
    gap: 14px;
}

.lesson-rail__module {
    padding: 16px;
    border-radius: 18px;
    background: #fafcff;
    border: 1px solid var(--border-subtle);
}

.lesson-rail__module h3 {
    font-size: 18px;
    margin: 8px 0 6px;
}

.lesson-rail__module p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

.lesson-rail__items {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.lesson-rail__item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: var(--white);
}

.lesson-rail__item:hover {
    border-color: rgba(0, 86, 210, 0.14);
    background: #f3f7ff;
}

.lesson-rail__item.active {
    border-color: rgba(0, 86, 210, 0.18);
    background: #edf4ff;
}

.lesson-rail__item.completed .lesson-rail__item-icon {
    color: #059669;
    background: #ecfdf3;
}

.lesson-rail__item-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: var(--electric-blue);
}

.lesson-rail__item-icon svg {
    width: 16px;
    height: 16px;
}

.lesson-rail__item-body {
    min-width: 0;
}

.lesson-rail__item-body small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.lesson-rail__item-body strong {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}

.lesson-rail__item-state {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.lesson-stage__card {
    padding: 34px;
}

.lesson-stage__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0 24px;
}

.lesson-stage__meta {
    margin-bottom: 10px;
}

.lesson-stage__header h1 {
    font-size: 56px;
    line-height: 1.02;
    margin-bottom: 12px;
}

.lesson-stage__summary {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.lesson-stage__status {
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 999px;
    background: #eef2f7;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.lesson-stage__status.completed {
    background: #dff7e9;
    color: #0f766e;
}

.lesson-stage__video {
    margin-bottom: 26px;
    border-radius: 18px;
    overflow: hidden;
    background: #0f172a;
}

.lesson-stage__video iframe,
.lesson-stage__video-player {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    border: 0;
    background: #000;
}

.lesson-stage__external-video {
    padding: 28px;
    display: flex;
    justify-content: center;
}

.lesson-stage__notice,
.lesson-stage__completion-box,
.lesson-stage__transcript {
    border-radius: 18px;
    border: 1px solid rgba(0, 86, 210, 0.12);
    background: #f8fbff;
}

.lesson-stage__notice {
    margin-bottom: 24px;
    padding: 18px;
    display: grid;
    gap: 6px;
}

.lesson-stage__notice strong {
    color: var(--text-primary);
}

.lesson-stage__notice span {
    color: var(--text-secondary);
    font-size: 14px;
}

.lesson-stage__transcript {
    margin-bottom: 24px;
    padding: 20px;
}

.lesson-stage__transcript-body {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.lesson-stage__content {
    display: grid;
    gap: 14px;
}

.lesson-stage__body {
    display: grid;
    gap: 14px;
}

.lesson-stage__body p,
.lesson-stage__empty {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.lesson-stage__actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lesson-stage__completion-box {
    margin-top: 24px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.lesson-stage__completion-box strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.lesson-stage__completion-box p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.lesson-coach__panel {
    padding: 0;
}

.lesson-coach__header {
    padding: 18px 18px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.lesson-coach__header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--text-tertiary);
}

.lesson-coach__intro {
    padding: 18px;
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.lesson-coach__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f0fe;
    color: var(--electric-blue);
}

.lesson-coach__avatar svg {
    width: 28px;
    height: 28px;
}

.lesson-coach__intro h3 {
    font-size: 22px;
    line-height: 1.25;
}

.lesson-coach__intro p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.lesson-coach__quick-actions {
    padding: 0 18px 18px;
    display: grid;
    gap: 8px;
}

.lesson-coach__quick-btn {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0, 86, 210, 0.3);
    border-radius: 12px;
    color: var(--electric-blue);
    font-weight: 600;
    text-align: left;
    background: var(--white);
}

.lesson-coach__quick-btn:hover {
    background: #f3f7ff;
}

.lesson-coach__messages {
    padding: 0 18px 18px;
    display: grid;
    gap: 10px;
    max-height: 280px;
    overflow: auto;
}

.lesson-coach__message {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
}

.lesson-coach__message--bot {
    background: #f4f7fb;
    color: var(--text-primary);
}

.lesson-coach__message--user {
    background: var(--electric-blue);
    color: var(--white);
}

.lesson-coach__composer {
    padding: 18px;
    border-top: 1px solid var(--border-subtle);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.lesson-coach__composer input {
    min-width: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f4f7fb;
    color: var(--text-primary);
}

.lesson-coach__composer button {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--electric-blue);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lesson-coach__composer button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== GRADE TABLE ===== */
.grade-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.grade-summary__card {
    padding: var(--space-xl);
    background: var(--light-ash);
    border-radius: var(--radius-md);
    text-align: center;
}

.grade-summary__value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.grade-summary__value--blue {
    color: var(--electric-blue);
}

.grade-summary__label {
    font-size: var(--small-text);
    color: var(--text-tertiary);
}

/* ===== TEACHER DASHBOARD ===== */
.analytics-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.analytics-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.analytics-card__title {
    font-size: var(--card-title);
    font-weight: 500;
    color: var(--text-primary);
}

.chart-placeholder {
    width: 100%;
    height: 200px;
    background: var(--light-ash);
    border-radius: var(--radius-md);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
}

.chart-bar {
    width: 32px;
    background: var(--electric-blue);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.5s ease;
    position: relative;
}

.chart-bar::after {
    content: attr(data-label);
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
    white-space: nowrap;
}

.chart-bar--secondary {
    background: var(--border-light);
}

/* Student Row (teacher view) */
.student-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border-light);
}

.student-row:last-child {
    border-bottom: none;
}

.student-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--electric-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--small-text);
    font-weight: 600;
    color: var(--electric-blue);
    flex-shrink: 0;
}

.student-row__info {
    flex: 1;
}

.student-row__name {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
}

.student-row__detail {
    font-size: var(--tiny-text);
    color: var(--text-tertiary);
}

.student-row__progress {
    width: 120px;
}

.student-row__grade {
    font-size: var(--body-text);
    font-weight: 500;
    min-width: 48px;
    text-align: center;
}

/* ===== EMPTY STATE ===== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4xl) var(--space-lg);
    text-align: center;
}

.empty-state__icon {
    width: 64px;
    height: 64px;
    color: var(--text-placeholder);
    margin-bottom: var(--space-lg);
}

.empty-state__icon svg {
    width: 100%;
    height: 100%;
}

.empty-state__title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.empty-state__desc {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    max-width: 400px;
    margin-bottom: var(--space-xl);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

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

.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-slide-in {
    animation: slideInRight 0.33s ease forwards;
}

.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }

/* Page transition */
#app {
    animation: fadeIn 0.3s ease;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-placeholder);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
    .footer__grid {
        grid-template-columns: 1fr repeat(2, 1fr);
        gap: var(--space-xl);
    }

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

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

    .learning-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .learning-dashboard__overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-dashboard__coach {
        grid-column: 1 / -1;
        position: static;
    }

    .learning-coach-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-hero {
        grid-template-columns: 1fr;
    }

    .lesson-workspace__grid {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .lesson-coach {
        grid-column: 1 / -1;
    }

    .lesson-coach__panel {
        position: static;
        max-height: none;
    }

    .course-detail__hero {
        grid-template-columns: 1fr;
    }

    .course-detail__hero-graphic {
        min-height: 180px;
    }

    .course-detail__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .course-detail__info-grid,
    .course-detail__modules,
    .course-workspace__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .chat-panel {
        width: 100%;
        max-width: 420px;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: 200;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

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

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

    .site-nav__student-links {
        display: none;
    }

    .site-nav__inner--student {
        gap: 16px;
    }

    .learning-dashboard__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-dashboard__grid {
        grid-template-columns: 1fr;
    }

    .learning-dashboard__overview {
        grid-template-columns: 1fr;
    }

    .learning-course-row {
        grid-template-columns: 1fr;
    }

    .learning-course-row__button,
    .learning-course-row__more {
        justify-self: start;
    }

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

    .lesson-workspace__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-workspace__progress {
        width: 100%;
    }

    .lesson-workspace__grid {
        grid-template-columns: 1fr;
    }

    .lesson-rail,
    .lesson-stage__card,
    .lesson-coach__panel {
        position: static;
        max-height: none;
    }

    .lesson-stage__header {
        flex-direction: column;
    }

    .lesson-stage__header h1 {
        font-size: 42px;
    }

    .course-detail__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-workspace__hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-workspace__next {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    :root {
        --hero-title: 1.75rem;
        --section-title: 1.375rem;
    }

    .site-nav__links {
        display: none;
    }

    .site-nav__mobile-toggle {
        display: flex;
    }

    .site-nav__search--student {
        max-width: none;
    }

    .site-nav__actions--student .site-nav__icon-btn {
        display: none;
    }

    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 280px;
    }

    .auth-page {
        grid-template-columns: 1fr;
    }

    .auth-page__image-side {
        display: none;
    }

    .auth-page__form-side {
        padding: var(--space-xl) var(--space-lg);
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

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

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

    .footer__brand {
        grid-column: 1 / -1;
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .resume-card {
        flex-direction: column;
    }

    .resume-card__image {
        width: 100%;
        height: 160px;
    }

    .profile-header {
        flex-direction: column;
        text-align: center;
    }

    .profile-info__meta {
        justify-content: center;
    }

    .grade-summary {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 0 var(--space-md);
    }

    .section {
        padding: var(--space-3xl) 0;
    }

    .learning-dashboard__inner {
        padding: 20px 16px 32px;
    }

    .learning-dashboard__header {
        flex-direction: column;
        gap: 14px;
    }

    .teacher-dashboard__header-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .learning-dashboard__stats {
        grid-template-columns: 1fr;
    }

    .learning-panel {
        padding: 18px;
        border-radius: 16px;
    }

    .learning-tabs {
        width: 100%;
    }

    .learning-tab {
        flex: 1;
        justify-content: center;
        text-align: center;
    }

    .learning-coach-strip__actions {
        width: 100%;
        justify-content: stretch;
    }

    .teacher-dashboard__header-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .teacher-dashboard__header-actions .btn {
        width: 100%;
    }

    .learning-coach-strip__actions .btn {
        flex: 1;
    }

    .site-nav__profile-dropdown {
        right: -12px;
    }

    .profile-page__inner {
        padding: 20px 16px 32px;
    }

    .profile-hero {
        padding: 20px;
    }

    .profile-hero__identity {
        flex-direction: column;
    }

    .profile-hero h1 {
        font-size: 30px;
    }

    .profile-hero__stats {
        grid-template-columns: 1fr;
    }

    .profile-detail-row,
    .lesson-stage__completion-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-workspace__top,
    .lesson-workspace__grid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .lesson-stage__card {
        padding: 20px;
    }

    .lesson-stage__header h1 {
        font-size: 34px;
    }

    .lesson-stage__actions .btn,
    .lesson-stage__completion-box .btn {
        width: 100%;
    }

    .course-detail__audiences {
        gap: 16px;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .course-detail__shell {
        padding: 16px 16px 32px;
    }

    .course-detail__hero {
        padding: 22px;
    }

    .course-detail__hero h1 {
        font-size: 34px;
    }

    .course-detail__stats,
    .course-detail__outcomes,
    .course-detail__info-grid,
    .course-detail__modules,
    .course-workspace__cards,
    .course-workspace__hero-metrics {
        grid-template-columns: 1fr;
    }

    .course-detail__tabs {
        gap: 16px;
    }

    .course-detail__section,
    .course-workspace__next,
    .course-workspace__section,
    .course-workspace__info-card {
        padding: 20px;
    }

    .course-detail__section-head {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr;
    }

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

    .site-nav {
        padding: 0 var(--space-md);
    }
}

/* ===== SECTION HEADERS ===== */
.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.section-header__tag {
    font-size: var(--tiny-text);
    font-weight: 600;
    color: var(--electric-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
}

.section-header__title {
    font-size: var(--section-title);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.section-header__title--white {
    color: var(--text-on-dark);
}

.section-header__desc {
    font-size: var(--body-text);
    color: var(--text-tertiary);
    line-height: 1.6;
}

.section-header__desc--white {
    color: var(--text-on-dark-secondary);
}

/* ===== COURSE CONTENT (Maestro) ===== */
.material-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--light-ash);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.material-item__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: var(--radius-sm);
    color: var(--electric-blue);
}

.material-item__icon svg {
    width: 20px;
    height: 20px;
}

.material-item__info {
    flex: 1;
}

.material-item__name {
    font-size: var(--body-text);
    font-weight: 500;
    color: var(--text-primary);
}

.material-item__size {
    font-size: var(--tiny-text);
    color: var(--text-placeholder);
}

.material-item__actions {
    display: flex;
    gap: var(--space-sm);
}

/* ===== INLINE CHART (SVG) ===== */
.mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 32px;
}

.mini-chart__bar {
    width: 4px;
    background: var(--electric-blue);
    border-radius: 2px;
    transition: height 0.3s ease;
}

.mini-chart__bar--muted {
    background: var(--border-light);
}

/* ===== STUDENT SHELLLESS PAGES ===== */
.student-content-page {
    padding-top: var(--nav-height);
    min-height: calc(100vh - var(--nav-height));
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 30%, #ffffff 100%);
}

.student-content-page__inner {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px 56px;
}

.student-content-page__inner--wide {
    max-width: 1240px;
}

.student-content-page__inner--narrow {
    max-width: 860px;
}

/* ===== EXPLORE CATALOG ===== */
.explore-page {
    background:
        radial-gradient(circle at top right, rgba(13, 110, 253, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f6f8fc 26%, #ffffff 100%);
}

.explore-context {
    display: grid;
    gap: 24px;
    margin-bottom: 36px;
}

.explore-context__breadcrumbs {
    margin-bottom: 0;
}

.explore-context__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.explore-context__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 86, 210, 0.08);
    color: var(--electric-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}

.explore-context__title {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    line-height: 0.98;
    max-width: 760px;
    margin-bottom: 12px;
}

.explore-context__description {
    max-width: 760px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.explore-context__save {
    flex-shrink: 0;
}

.explore-search-panel {
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 16px;
}

.explore-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 980px;
    background: #ffffff;
}

.explore-search__icon {
    color: var(--electric-blue);
}

.explore-search input {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

.explore-search input::placeholder {
    color: var(--text-placeholder);
}

.explore-search-panel__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.explore-meta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 980px;
    background: #eef3fb;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.explore-meta-pill--query {
    border: 1px solid rgba(0, 86, 210, 0.16);
    color: var(--electric-blue);
    background: #ffffff;
}

.explore-section {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
}

.explore-section--muted {
    padding: 32px;
    border-radius: 32px;
    background: #edf2fb;
}

.explore-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.explore-section__title {
    font-size: clamp(1.8rem, 2.5vw, 2.3rem);
    margin-bottom: 8px;
}

.explore-section__description {
    max-width: 760px;
    color: var(--text-secondary);
    line-height: 1.65;
}

.explore-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.explore-chip {
    padding: 10px 16px;
    border-radius: 980px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.explore-chip:hover {
    background: #f5f5f7;
    border-color: rgba(15, 23, 42, 0.18);
}

.explore-chip.active {
    background: var(--carbon-dark);
    border-color: var(--carbon-dark);
    color: var(--white);
}

.explore-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.explore-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.explore-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.10);
    border-color: rgba(0, 86, 210, 0.08);
}

.explore-card__media {
    position: relative;
    min-height: 172px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.explore-card__media::before {
    content: '';
    position: absolute;
    inset: auto -20% -25% auto;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    filter: blur(2px);
}

.explore-card__provider,
.explore-card__badge,
.explore-card__publish-id {
    position: relative;
    z-index: 1;
}

.explore-card__provider,
.explore-card__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.explore-card__provider {
    background: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.explore-card__badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
}

.explore-card__icon {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.94);
}

.explore-card__icon svg {
    width: 56px;
    height: 56px;
}

.explore-card__publish-id {
    font-size: 30px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}

.explore-card__body {
    display: grid;
    gap: 10px;
    padding: 20px;
    flex: 1;
}

.explore-card__meta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.explore-card__title {
    font-size: 22px;
    line-height: 1.18;
}

.explore-card__subtitle {
    color: var(--text-secondary);
    line-height: 1.6;
    min-height: 68px;
}

.explore-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.explore-card--cobalt .explore-card__media {
    background: linear-gradient(135deg, #0b56d8 0%, #1ca2ff 100%);
}

.explore-card--ember .explore-card__media {
    background: linear-gradient(135deg, #0f172a 0%, #f97316 100%);
}

.explore-card--aurora .explore-card__media {
    background: linear-gradient(135deg, #14532d 0%, #74d18c 100%);
}

.explore-card--slate .explore-card__media {
    background: linear-gradient(135deg, #1f2937 0%, #64748b 100%);
}

.explore-card--amber .explore-card__media {
    background: linear-gradient(135deg, #9a3412 0%, #fbbf24 100%);
}

.explore-card--mint .explore-card__media {
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%);
}

.explore-section__footer {
    display: flex;
    justify-content: flex-start;
}

.explore-show-more {
    border-radius: 999px;
}

.explore-spotlight {
    margin: 12px 0 32px;
    border-radius: 32px;
    background: linear-gradient(135deg, #05070d 0%, #111827 55%, #0b152c 100%);
    color: var(--white);
    overflow: hidden;
    box-shadow: 0 28px 56px rgba(5, 7, 13, 0.24);
}

.explore-spotlight__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 28px;
    padding: 36px;
    align-items: stretch;
}

.explore-spotlight__copy {
    display: grid;
    align-content: center;
    gap: 16px;
}

.explore-spotlight__eyebrow {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.explore-spotlight__title {
    font-size: clamp(2rem, 3vw, 3rem);
    color: var(--white);
    line-height: 1.02;
}

.explore-spotlight__description {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    max-width: 580px;
}

.explore-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

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

.explore-spotlight-card {
    min-height: 230px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    align-content: space-between;
    gap: 14px;
    transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.explore-spotlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
}

.explore-spotlight-card__type {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.explore-spotlight-card__title {
    color: var(--white);
    font-size: 24px;
    line-height: 1.14;
}

.explore-spotlight-card__description {
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.65;
}

.explore-spotlight-card__link {
    color: var(--white);
    font-weight: 700;
}

.explore-collection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.explore-collection-card {
    min-height: 240px;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.explore-collection-card__eyebrow {
    display: inline-flex;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.explore-collection-card__title {
    font-size: 24px;
    margin-bottom: 10px;
}

.explore-collection-card__description {
    color: var(--text-secondary);
    line-height: 1.65;
}

.explore-collection-card__action {
    align-self: flex-start;
    border-radius: 999px;
}

.explore-collection-card--cobalt {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.explore-collection-card--cobalt .explore-collection-card__eyebrow {
    color: #0b56d8;
}

.explore-collection-card--ember {
    background: linear-gradient(180deg, #fff8f5 0%, #ffffff 100%);
}

.explore-collection-card--ember .explore-collection-card__eyebrow {
    color: #ea580c;
}

.explore-collection-card--aurora {
    background: linear-gradient(180deg, #f5fff8 0%, #ffffff 100%);
}

.explore-collection-card--aurora .explore-collection-card__eyebrow {
    color: #15803d;
}

.explore-collection-card--slate {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.explore-collection-card--slate .explore-collection-card__eyebrow {
    color: #334155;
}

.explore-collection-card--amber {
    background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.explore-collection-card--amber .explore-collection-card__eyebrow {
    color: #b45309;
}

.explore-collection-card--mint {
    background: linear-gradient(180deg, #f2fffc 0%, #ffffff 100%);
}

.explore-collection-card--mint .explore-collection-card__eyebrow {
    color: #0f766e;
}

.explore-state-card {
    padding: 32px;
    border-radius: 24px;
    border: 1px dashed rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.explore-state-card h3 {
    margin-bottom: 8px;
    font-size: 22px;
}

.explore-state-card p {
    color: var(--text-secondary);
    line-height: 1.65;
}

@media (max-width: 1200px) {
    .explore-card-grid,
    .explore-card-grid--published,
    .explore-collection-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .student-content-page__inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .explore-context__head,
    .explore-section__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .explore-card-grid,
    .explore-card-grid--published,
    .explore-collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .explore-spotlight__layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .student-content-page__inner {
        padding: 24px 16px 40px;
    }

    .explore-search-panel,
    .explore-section--muted,
    .explore-spotlight__layout {
        padding: 20px;
    }

    .explore-card-grid,
    .explore-card-grid--published,
    .explore-spotlight__cards,
    .explore-collection-grid {
        grid-template-columns: 1fr;
    }

    .explore-card__subtitle {
        min-height: 0;
    }

    .explore-spotlight__actions {
        width: 100%;
    }

    .explore-spotlight__actions .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .explore-context__title {
        font-size: 2rem;
    }

    .explore-card__body,
    .explore-collection-card,
    .explore-state-card {
        padding: 18px;
    }
}

/* ===== LANDING HOME ===== */
.footer__brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-on-dark-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.footer__meta {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.footer__meta span {
    color: var(--text-on-dark-secondary);
    font-size: 13px;
}

.landing-home {
    background:
        radial-gradient(circle at top left, rgba(0, 86, 210, 0.06), transparent 24%),
        radial-gradient(circle at top right, rgba(24, 144, 255, 0.06), transparent 20%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 24%, #ffffff 100%);
}

.landing-home__hero,
.landing-section,
.landing-home__signal {
    scroll-margin-top: calc(var(--nav-height) + 24px);
}

.landing-home__hero {
    padding-top: calc(var(--nav-height) + 36px);
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

.landing-home__hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 246, 255, 0.8) 100%);
    pointer-events: none;
}

.landing-home__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: 48px;
    align-items: center;
}

.landing-home__hero-copy {
    display: grid;
    gap: 24px;
}

.landing-home__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 86, 210, 0.08);
    color: var(--electric-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.landing-home__eyebrow--dark {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

.landing-home__hero-title {
    font-size: clamp(3rem, 5.6vw, 4.9rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    max-width: 760px;
}

.landing-home__hero-subtitle {
    max-width: 720px;
    font-size: 18px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.landing-home__search {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 18px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
    max-width: 720px;
}

.landing-home__search-icon {
    color: var(--electric-blue);
}

.landing-home__search input {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
}

.landing-home__search input::placeholder {
    color: var(--text-placeholder);
}

.landing-home__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.landing-home__hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 820px;
}

.landing-home__hero-stat {
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.landing-home__hero-stat strong {
    display: block;
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.landing-home__hero-stat span {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.landing-home__hero-visual {
    position: relative;
    min-height: 640px;
}

.landing-home__hero-glow {
    position: absolute;
    inset: 14% 10% auto 10%;
    height: 360px;
    background: radial-gradient(circle, rgba(0, 86, 210, 0.26) 0%, rgba(0, 86, 210, 0.08) 35%, transparent 72%);
    filter: blur(8px);
}

.landing-home__hero-orb {
    position: absolute;
    top: 120px;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-home__hero-core {
    position: relative;
    z-index: 2;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b56d8 0%, #3aa0ff 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 24px 60px rgba(0, 86, 210, 0.28);
}

.landing-home__hero-core svg {
    width: 44px;
    height: 44px;
}

.landing-home__hero-ring {
    position: absolute;
    inset: 50%;
    border-radius: 50%;
    border: 1px solid rgba(0, 86, 210, 0.16);
    transform: translate(-50%, -50%);
    animation: landingOrbitPulse 8s ease-in-out infinite;
}

.landing-home__hero-ring--one {
    width: 180px;
    height: 180px;
}

.landing-home__hero-ring--two {
    width: 260px;
    height: 260px;
    animation-delay: 1.2s;
}

.landing-home__hero-ring--three {
    width: 340px;
    height: 340px;
    animation-delay: 2.4s;
}

.landing-home__hero-card,
.landing-home__hero-metric {
    position: absolute;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(16px);
}

.landing-home__hero-card {
    width: 260px;
    padding: 20px;
    display: grid;
    gap: 10px;
    animation: landingFloat 6s ease-in-out infinite;
}

.landing-home__hero-card--primary {
    top: 60px;
    left: 18px;
}

.landing-home__hero-card--secondary {
    right: 24px;
    bottom: 100px;
    animation-delay: 1.4s;
}

.landing-home__hero-card-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--electric-blue);
}

.landing-home__hero-card strong {
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1.15;
}

.landing-home__hero-card p,
.landing-home__hero-metric span {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 14px;
}

.landing-home__mini-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.landing-home__mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b56d8 0%, #3aa0ff 100%);
}

.landing-home__hero-metric {
    padding: 18px 20px;
    min-width: 170px;
}

.landing-home__hero-metric strong {
    display: block;
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 26px;
}

.landing-home__hero-metric--top {
    right: 32px;
    top: 68px;
}

.landing-home__hero-metric--bottom {
    left: 74px;
    bottom: 32px;
}

.landing-home__signal {
    padding: 26px 0 12px;
}

.landing-home__signal-inner {
    padding: 26px 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, #0d1d38 0%, #0b56d8 100%);
    color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 28px;
    align-items: center;
}

.landing-home__signal-copy h2 {
    color: var(--white);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
    margin-top: 12px;
}

.landing-home__signal-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.landing-home__signal-pills span {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 13px;
}

.landing-section {
    padding: 86px 0;
}

.landing-section--muted {
    background: linear-gradient(180deg, #f5f8fd 0%, #eef3fa 100%);
}

.landing-section__head {
    max-width: 780px;
    display: grid;
    gap: 12px;
    margin-bottom: 32px;
}

.landing-section__head h2 {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.02;
}

.landing-section__head p {
    color: var(--text-secondary);
    line-height: 1.75;
    font-size: 17px;
}

.landing-value-grid,
.landing-category-grid,
.landing-course-grid,
.landing-path-grid,
.landing-beginner-grid,
.landing-testimonial-grid,
.landing-project-grid {
    display: grid;
    gap: 14px;
}

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

.landing-value-card,
.landing-category-card,
.landing-course-card,
.landing-path-card,
.landing-beginner-card,
.landing-testimonial-card,
.landing-project-card {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.landing-value-card {
    border-radius: 26px;
    padding: 24px;
    display: grid;
    gap: 16px;
}

.landing-value-card__icon,
.landing-category-card__icon,
.landing-project-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 86, 210, 0.08);
    color: var(--electric-blue);
}

.landing-value-card__icon svg,
.landing-category-card__icon svg,
.landing-project-card__icon svg {
    width: 32px;
    height: 32px;
}

.landing-value-card h3,
.landing-category-card h3,
.landing-beginner-card h3,
.landing-project-card h3 {
    font-size: 24px;
    line-height: 1.14;
}

.landing-value-card p,
.landing-category-card p,
.landing-beginner-card p,
.landing-project-card p,
.landing-path-card p,
.landing-testimonial-card p {
    color: var(--text-secondary);
    line-height: 1.7;
}

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

.landing-category-card {
    text-align: left;
    border-radius: 24px;
    padding: 22px;
    display: grid;
    gap: 14px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-category-card:hover,
.landing-course-card:hover,
.landing-project-card:hover,
.landing-beginner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
    border-color: rgba(0, 86, 210, 0.08);
}

.landing-category-card span {
    color: var(--electric-blue);
    font-weight: 700;
    font-size: 13px;
}

.landing-course-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-course-card {
    text-align: left;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-course-card__media {
    min-height: 180px;
    padding: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.landing-course-card__provider,
.landing-course-card__badge,
.landing-beginner-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.landing-course-card__provider {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.96);
}

.landing-course-card__badge,
.landing-beginner-card__badge {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-primary);
}

.landing-course-card__body {
    padding: 20px;
    display: grid;
    gap: 10px;
}

.landing-course-card__body h3 {
    font-size: 24px;
    line-height: 1.14;
}

.landing-course-card__instructor {
    color: var(--text-secondary);
    font-size: 14px;
}

.landing-course-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.landing-course-card--cobalt .landing-course-card__media {
    background: linear-gradient(135deg, #0b56d8 0%, #2aa2ff 100%);
}

.landing-course-card--mint .landing-course-card__media {
    background: linear-gradient(135deg, #0f766e 0%, #2dd4bf 100%);
}

.landing-course-card--ember .landing-course-card__media {
    background: linear-gradient(135deg, #111827 0%, #f97316 100%);
}

.landing-course-card--slate .landing-course-card__media {
    background: linear-gradient(135deg, #1f2937 0%, #64748b 100%);
}

.landing-course-card--amber .landing-course-card__media {
    background: linear-gradient(135deg, #9a3412 0%, #fbbf24 100%);
}

.landing-course-card--aurora .landing-course-card__media {
    background: linear-gradient(135deg, #14532d 0%, #4ade80 100%);
}

.landing-path-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-path-card {
    padding: 24px;
    border-radius: 28px;
    display: grid;
    gap: 16px;
}

.landing-path-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.landing-path-card__eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--electric-blue);
}

.landing-path-card__head h3 {
    font-size: 26px;
    line-height: 1.08;
}

.landing-path-card__duration {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.landing-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.landing-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b56d8 0%, #2aa2ff 100%);
}

.landing-path-card__progress-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.landing-path-card__progress-label strong {
    font-size: 28px;
    color: var(--text-primary);
}

.landing-path-card__progress-label span {
    color: var(--text-secondary);
    font-size: 14px;
}

.landing-path-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.landing-path-card__chips span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.landing-path-card--cobalt {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.landing-path-card--slate {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.landing-path-card--mint {
    background: linear-gradient(180deg, #f2fffc 0%, #ffffff 100%);
}

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

.landing-beginner-card {
    padding: 22px;
    border-radius: 24px;
    display: grid;
    gap: 14px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-beginner-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-tertiary);
}

.landing-promo-block {
    padding: 34px;
    border-radius: 34px;
    background: linear-gradient(135deg, #06080d 0%, #10192d 52%, #111827 100%);
    color: var(--white);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 26px;
    box-shadow: 0 28px 58px rgba(5, 7, 13, 0.26);
}

.landing-promo-block__copy {
    display: grid;
    align-content: center;
    gap: 14px;
}

.landing-promo-block__copy h2,
.landing-testimonial-card__author strong {
    color: var(--white);
}

.landing-promo-block__copy h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.02;
}

.landing-promo-block__copy p,
.landing-promo-card p {
    color: rgba(255, 255, 255, 0.76);
    line-height: 1.72;
}

.landing-promo-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-promo-block__cards {
    display: grid;
    gap: 16px;
}

.landing-promo-card {
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 12px;
}

.landing-promo-card span {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.68);
}

.landing-promo-card strong {
    color: var(--white);
    font-size: 24px;
    line-height: 1.12;
}

.landing-testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-testimonial-card {
    padding: 26px;
    border-radius: 28px;
    background: linear-gradient(180deg, #0d1d38 0%, #13284b 100%);
    display: grid;
    gap: 18px;
}

.landing-testimonial-card__quote {
    font-size: 44px;
    line-height: 0.8;
    color: rgba(255, 255, 255, 0.32);
}

.landing-testimonial-card p {
    color: rgba(255, 255, 255, 0.8);
}

.landing-testimonial-card__author {
    display: grid;
    gap: 4px;
}

.landing-testimonial-card__author span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
}

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

.landing-project-card {
    padding: 24px;
    border-radius: 26px;
    display: grid;
    gap: 16px;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.landing-project-card__skills {
    color: var(--electric-blue);
    font-size: 13px;
    font-weight: 700;
}

.landing-register-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(5, 7, 13, 0.56);
    backdrop-filter: blur(6px);
    padding: 20px;
}

.landing-register-modal.active {
    display: flex;
}

.landing-register-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 36px;
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18);
    display: grid;
    gap: 18px;
}

.landing-register-modal__dialog h2 {
    font-size: 30px;
}

.landing-register-modal__dialog p {
    color: var(--text-secondary);
    line-height: 1.65;
}

.landing-register-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f6fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

.landing-register-modal__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.landing-register-modal__tab {
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: var(--text-primary);
    font-weight: 700;
}

.landing-register-modal__tab.active {
    background: var(--electric-blue);
    border-color: var(--electric-blue);
    color: var(--white);
}

.landing-register-modal__form {
    display: grid;
    gap: 14px;
}

.landing-register-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.landing-register-modal__form label {
    display: grid;
    gap: 6px;
}

.landing-register-modal__form label span {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.landing-register-modal__status {
    min-height: 18px;
    font-size: 13px;
    font-weight: 600;
}

.landing-register-modal__status--error {
    color: #d32f2f;
}

.landing-register-modal__status--info {
    color: var(--electric-blue);
}

.footer-info-modal__dialog {
    max-width: 640px;
}

.footer-info-modal__body {
    display: grid;
    gap: 12px;
}

.footer-info-modal__body p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

.footer-info-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

@keyframes landingFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes landingOrbitPulse {
    0%, 100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.03);
    }
}

@media (max-width: 1200px) {
    .landing-value-grid,
    .landing-category-grid,
    .landing-project-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .landing-beginner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .landing-home__hero-inner,
    .landing-home__signal-inner,
    .landing-promo-block {
        grid-template-columns: 1fr;
    }

    .landing-home__hero-visual {
        min-height: 560px;
    }

    .landing-home__signal-pills {
        justify-content: flex-start;
    }

    .landing-value-grid,
    .landing-category-grid,
    .landing-course-grid,
    .landing-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-path-grid,
    .landing-testimonial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .landing-home__hero {
        padding-bottom: 48px;
    }

    .landing-home__hero-title {
        font-size: 2.6rem;
    }

    .footer-info-modal__actions .btn {
        width: 100%;
    }

    .landing-home__hero-subtitle,
    .landing-section__head p {
        font-size: 16px;
    }

    .landing-home__search {
        flex-wrap: wrap;
        border-radius: 24px;
    }

    .landing-home__search .btn {
        width: 100%;
    }

    .landing-home__hero-actions,
    .landing-promo-block__actions {
        flex-direction: column;
    }

    .landing-home__hero-actions .btn,
    .landing-promo-block__actions .btn {
        width: 100%;
    }

    .landing-home__hero-stats,
    .landing-value-grid,
    .landing-category-grid,
    .landing-course-grid,
    .landing-beginner-grid,
    .landing-project-grid {
        grid-template-columns: 1fr;
    }

    .landing-home__hero-visual {
        min-height: 480px;
    }

    .landing-home__hero-orb {
        width: 240px;
        height: 240px;
        top: 110px;
    }

    .landing-home__hero-ring--one {
        width: 150px;
        height: 150px;
    }

    .landing-home__hero-ring--two {
        width: 210px;
        height: 210px;
    }

    .landing-home__hero-ring--three {
        width: 270px;
        height: 270px;
    }

    .landing-home__hero-card--primary {
        left: 0;
    }

    .landing-home__hero-card--secondary {
        right: 0;
        bottom: 86px;
    }

    .landing-home__hero-metric--top {
        right: 0;
        top: 28px;
    }

    .landing-home__hero-metric--bottom {
        left: 0;
        bottom: 12px;
    }

    .landing-section,
    .landing-home__signal {
        padding: 64px 0;
    }

    .landing-home__signal-inner,
    .landing-promo-block,
    .landing-register-modal__dialog {
        padding: 24px;
    }

    .landing-register-modal__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .landing-home__hero-title,
    .landing-section__head h2,
    .landing-promo-block__copy h2 {
        font-size: 2.05rem;
    }

    .landing-home__hero-card,
    .landing-home__hero-metric {
        position: static;
        width: 100%;
    }

    .landing-home__hero-visual {
        min-height: auto;
        display: grid;
        gap: 16px;
    }

    .landing-home__hero-orb,
    .landing-home__hero-glow {
        position: relative;
        inset: auto;
        top: auto;
        left: auto;
        transform: none;
        margin: 0 auto;
    }

    .landing-home__hero-orb {
        width: 220px;
        height: 220px;
    }

    .landing-course-card__body,
    .landing-path-card,
    .landing-beginner-card,
    .landing-testimonial-card,
    .landing-project-card {
        padding: 20px;
    }
}

/* ========================================================================
   educatIA — Revolut Inspired Global Redesign Override
   Flat surfaces, pill CTAs, bold typography, dark/light section rhythm
   ======================================================================== */

:root {
    --rui-dark: #191c1f;
    --rui-white: #ffffff;
    --rui-surface: #f4f4f4;
    --rui-blue: #494fdf;
    --rui-blue-strong: #4f55f1;
    --rui-blue-text: #376cd5;
    --rui-teal: #00a87e;
    --rui-pink: #e61e49;
    --rui-warning: #ec7e00;
    --rui-yellow: #b09000;
    --rui-success: #428619;
    --rui-danger: #e23b4a;
    --rui-brown: #936d62;

    --electric-blue: var(--rui-blue);
    --electric-blue-hover: #3c43c7;
    --electric-blue-light: #eef0ff;
    --electric-blue-glow: rgba(73, 79, 223, 0.14);

    --white: var(--rui-white);
    --light-ash: var(--rui-surface);
    --carbon-dark: var(--rui-dark);
    --frosted-glass: var(--rui-white);
    --dark-surface-1: var(--rui-dark);
    --dark-surface-2: #23272b;
    --dark-surface-3: #2d3338;

    --text-primary: var(--rui-dark);
    --text-secondary: #505a63;
    --text-tertiary: #8d969e;
    --text-placeholder: #8d969e;
    --text-on-dark: var(--rui-white);
    --text-on-dark-secondary: rgba(255, 255, 255, 0.72);
    --link-light: var(--rui-blue-text);
    --link-dark: var(--rui-blue-text);
    --border-light: #c9c9cd;
    --border-subtle: #dde1e6;

    --font-display: "Aeonik Pro", "Inter", Arial, sans-serif;
    --font-text: "Inter", Arial, sans-serif;

    --hero-title: clamp(3.4rem, 6.8vw, 6.2rem);
    --section-title: clamp(3rem, 5vw, 5rem);
    --card-title: 2rem;
    --nav-text: 1rem;
    --body-text: 1rem;
    --small-text: 0.9375rem;
    --tiny-text: 0.8125rem;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 80px;
    --space-5xl: 120px;

    --max-width: 1320px;
    --nav-height: 84px;
    --sidebar-width: 286px;

    --radius-sm: 12px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    --transition-fast: 0.18s ease;
    --transition-base: 0.22s ease;
    --transition-slow: 0.32s ease;
    --shadow-soft: none;
}

html,
body {
    background: var(--white);
}

body {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.015em;
    color: var(--text-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-display,
.text-section-title,
.text-card-title,
.dashboard-header__greeting,
.site-nav__logo,
.btn {
    font-family: var(--font-display);
    font-weight: 500 !important;
    letter-spacing: -0.02em;
}

h1,
.landing-home__hero-title,
.course-detail__hero h1 {
    line-height: 1;
}

p,
li,
label,
input,
textarea,
select,
.text-body,
.text-small,
.text-tiny,
.dashboard-header__subtitle,
.course-detail__hero p,
.landing-home__hero-subtitle,
.explore-context__description {
    font-family: var(--font-text);
    letter-spacing: 0.015em;
}

.container {
    max-width: var(--max-width);
    padding: 0 24px;
}

.section,
.landing-section,
.landing-home__signal,
.student-content-page,
.course-detail__shell,
.lesson-workspace,
.learning-dashboard {
    padding-top: max(48px, var(--space-4xl));
    padding-bottom: max(48px, var(--space-4xl));
}

.site-nav {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid rgba(25, 28, 31, 0.08);
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(18px);
}

.site-nav__top {
    display: none !important;
}

.site-nav__inner,
.site-nav__inner--student {
    height: var(--nav-height);
    min-height: var(--nav-height);
    padding: 0 24px;
}

.site-nav__top-link,
.site-nav__student-link,
.site-nav__link {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.site-nav__top-link.active,
.site-nav__top-link:hover,
.site-nav__student-link:hover,
.site-nav__student-link.active,
.site-nav__link:hover {
    color: var(--text-primary);
}

.site-nav__student-link.active::after {
    background: var(--text-primary);
    bottom: -18px;
    height: 2px;
}

.site-nav__logo {
    font-size: 1.9rem;
    color: var(--text-primary);
}

.site-nav__search,
.site-nav__search--student,
.landing-home__search,
.explore-search {
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.site-nav__search,
.site-nav__search--student {
    min-height: 48px;
    padding: 6px 6px 6px 14px;
}

.site-nav__search input,
.site-nav__search--student input,
.landing-home__search input,
.explore-search input,
.lesson-coach__composer input,
.learning-coach-panel__composer input {
    background: transparent !important;
    color: var(--text-primary);
    border: none !important;
    min-height: 40px;
    padding: 0 8px;
}

.site-nav__search-button {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--rui-dark);
    color: var(--rui-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.site-nav__icon-btn,
.site-nav__profile-trigger,
.site-nav__mobile-toggle {
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 4px !important;
    background: var(--white) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.site-nav__icon-btn:hover,
.site-nav__profile-trigger:hover,
.site-nav__mobile-toggle:hover {
    background: var(--light-ash) !important;
}

.site-nav__profile-dropdown,
.mobile-menu {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

.site-nav__badge,
.badge,
.footer__brand-badge,
.explore-card__provider,
.explore-card__badge,
.explore-meta-pill,
.landing-course-card__provider,
.landing-course-card__badge,
.landing-beginner-card__badge,
.course-detail__section-badge,
.course-detail__audiences span,
.course-detail__audiences .active {
    border-radius: 9999px !important;
}

.btn {
    min-height: 48px !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    font-size: 0.9375rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.btn:hover {
    opacity: 0.85;
    box-shadow: none !important;
    transform: none !important;
}

.btn:focus-visible,
.site-nav__search-button:focus-visible,
.site-nav__icon-btn:focus-visible,
.site-nav__mobile-toggle:focus-visible,
.site-nav__profile-trigger:focus-visible,
.explore-chip:focus-visible,
.landing-category-card:focus-visible,
.landing-course-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.125rem rgba(73, 79, 223, 0.24) !important;
}

.btn--primary {
    background: var(--rui-dark) !important;
    border-color: var(--rui-dark) !important;
    color: var(--rui-white) !important;
}

.btn--secondary {
    background: var(--rui-surface) !important;
    border-color: var(--rui-surface) !important;
    color: var(--rui-dark) !important;
}

.btn--outline {
    background: transparent !important;
    border-color: var(--rui-dark) !important;
    color: var(--rui-dark) !important;
}

.btn--dark,
.btn--ghost-dark {
    background: rgba(244, 244, 244, 0.1) !important;
    border-color: rgba(244, 244, 244, 0.72) !important;
    color: var(--rui-white) !important;
}

.btn--ghost {
    background: transparent !important;
    color: var(--rui-blue-text) !important;
    padding: 14px 22px !important;
    border-color: transparent !important;
}

.btn--sm {
    min-height: 36px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
}

.btn--lg {
    min-height: 52px !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.form-input,
.form-textarea,
.form-select,
textarea.form-input,
select.form-input {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 4px !important;
    border: 1px solid var(--border-light) !important;
    background: var(--white) !important;
    color: var(--text-primary);
    box-shadow: none !important;
}

.form-textarea,
textarea.form-input {
    min-height: 144px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
textarea.form-input:focus,
select.form-input:focus {
    border-color: var(--rui-blue) !important;
    box-shadow: 0 0 0 0.125rem rgba(73, 79, 223, 0.18) !important;
}

.card,
.feature-card,
.course-card,
.analytics-card,
.learning-panel,
.learning-stat-card,
.explore-search-panel,
.explore-card,
.explore-collection-card,
.explore-state-card,
.explore-spotlight,
.explore-spotlight-card,
.landing-value-card,
.landing-category-card,
.landing-course-card,
.landing-path-card,
.landing-beginner-card,
.landing-testimonial-card,
.landing-project-card,
.course-detail__hero,
.course-detail__stat,
.course-detail__info-card,
.course-detail__module-card,
.course-detail__empty-card,
.course-detail__review-placeholder,
.lesson-rail,
.lesson-stage__card,
.lesson-coach__panel,
.landing-register-modal__dialog,
.footer-info-modal__dialog,
.verification-badge,
.chat-panel {
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.analytics-card,
.learning-panel,
.explore-search-panel,
.explore-card,
.explore-collection-card,
.explore-state-card,
.explore-spotlight-card,
.landing-value-card,
.landing-category-card,
.landing-course-card,
.landing-path-card,
.landing-beginner-card,
.landing-testimonial-card,
.landing-project-card,
.course-detail__stat,
.course-detail__info-card,
.course-detail__module-card,
.course-detail__empty-card,
.course-detail__review-placeholder,
.lesson-rail,
.lesson-stage__card,
.lesson-coach__panel,
.landing-register-modal__dialog,
.footer-info-modal__dialog,
.verification-badge,
.chat-panel {
    background: var(--white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
}

.layout-with-sidebar {
    background: var(--white);
}

.sidebar {
    background: var(--rui-dark) !important;
    border-right: none !important;
    padding: 20px 10px;
}

.sidebar__section-title {
    color: rgba(255, 255, 255, 0.44) !important;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.sidebar__link {
    margin: 0 8px 4px;
    padding: 12px 14px;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
}

.sidebar__link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--white) !important;
}

.sidebar__link.active {
    background: var(--white) !important;
    color: var(--rui-dark) !important;
}

.sidebar__link.active::before {
    display: none;
}

.sidebar__link-badge {
    background: rgba(73, 79, 223, 0.18) !important;
    color: #d7dcff !important;
}

.main-content {
    background: var(--white) !important;
    padding: 40px !important;
}

.dashboard-header,
.learning-dashboard__header,
.course-detail__section-head,
.explore-context__head,
.landing-section__head {
    margin-bottom: 32px;
}

.dashboard-header__greeting,
.learning-dashboard__welcome h1,
.explore-context__title,
.course-detail__hero h1,
.landing-section__head h2 {
    font-size: clamp(2.8rem, 5vw, 5rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    color: var(--text-primary);
}

.dashboard-header__subtitle,
.landing-section__head p,
.course-detail__hero p,
.learning-dashboard__welcome p,
.lesson-stage__summary,
.lesson-coach__intro p,
.explore-context__description,
.landing-home__hero-subtitle {
    color: var(--text-secondary) !important;
    font-size: 1.0625rem;
    line-height: 1.56;
    max-width: 760px;
}

.learning-dashboard {
    background: var(--white);
}

.learning-dashboard__inner {
    max-width: var(--max-width);
}

.learning-dashboard__stats,
.landing-home__hero-stats,
.course-detail__stats {
    gap: 16px;
}

.learning-stat-card,
.landing-home__hero-stat {
    background: var(--rui-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
}

.learning-dashboard__coach,
.lesson-coach__panel,
.learning-coach-panel,
.explore-spotlight,
.landing-home__signal,
.landing-promo-block,
.site-footer {
    background: var(--rui-dark) !important;
    color: var(--rui-white) !important;
}

.learning-coach-panel,
.lesson-coach__panel,
.landing-promo-block,
.explore-spotlight,
.landing-home__signal {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.learning-coach-panel h2,
.learning-coach-panel h3,
.lesson-coach__panel h2,
.lesson-coach__panel h3,
.landing-promo-block h2,
.explore-spotlight__title,
.landing-home__signal h2,
.site-footer .footer__logo,
.site-footer .footer__column-title {
    color: var(--rui-white) !important;
}

.learning-coach-panel p,
.lesson-coach__panel p,
.landing-promo-block p,
.explore-spotlight__description,
.landing-home__signal-copy p,
.site-footer .footer__desc,
.site-footer .footer__link,
.site-footer .footer__bottom-link,
.site-footer .footer__copyright {
    color: rgba(255, 255, 255, 0.72) !important;
}

.landing-home {
    background: var(--white);
}

.landing-home__hero {
    padding-top: calc(var(--nav-height) + 28px);
    padding-bottom: 48px;
    background: var(--white);
}

.landing-home__hero::before {
    display: none !important;
}

.landing-home__hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    align-items: start;
    gap: 32px;
}

.landing-home__hero-copy {
    align-content: start;
}

.landing-home__eyebrow,
.lesson-rail__eyebrow,
.lesson-stage__eyebrow,
.lesson-stage__meta,
.course-detail__brand,
.explore-context__eyebrow,
.explore-spotlight__eyebrow,
.landing-path-card__eyebrow,
.landing-home__hero-card-label {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--rui-surface) !important;
    color: var(--text-primary) !important;
    border-radius: 9999px;
    letter-spacing: 0.04em !important;
    font-weight: 600;
}

.landing-home__hero-title {
    max-width: none;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 14px;
}

.landing-home__hero-actions,
.landing-promo-block__actions,
.explore-spotlight__actions,
.learning-coach-strip__actions,
.lesson-stage__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.landing-home__hero-stat strong,
.landing-home__hero-metric strong,
.landing-promo-card strong,
.learning-stat-card__value,
.course-detail__stat strong,
.explore-card__publish-id {
    font-family: var(--font-display);
    font-weight: 500 !important;
    letter-spacing: -0.03em;
    color: inherit;
}

.landing-home__hero-visual {
    min-height: auto;
    display: grid;
    align-items: start;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.landing-home__hero-glow,
.landing-home__hero-ring,
.landing-home__hero-orb {
    display: none !important;
}

.landing-home__hero-core {
    display: none;
}

.landing-home__hero-card,
.landing-home__hero-metric,
.landing-promo-card {
    position: static !important;
    width: auto !important;
    background: var(--white) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    animation: none !important;
    backdrop-filter: none !important;
}

.landing-home__hero-card {
    padding: 20px !important;
}

.landing-home__hero-card--primary {
    grid-column: 1 / -1;
}

.landing-home__hero-metric {
    padding: 16px 18px !important;
}

.landing-home__signal {
    border-radius: 0;
}

.landing-home__signal-pills span,
.landing-path-card__chips span,
.landing-project-card__skills,
.explore-chip,
.explore-meta-pill,
.learning-plan-day {
    border-radius: 9999px !important;
    border: 1px solid rgba(25, 28, 31, 0.1) !important;
    background: var(--white) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.landing-section--muted,
.explore-section--muted,
.student-content-page,
.course-detail-page,
.lesson-workspace,
.auth-shell--single {
    background: var(--rui-surface) !important;
}

.landing-value-grid,
.landing-category-grid,
.landing-course-grid,
.landing-path-grid,
.landing-beginner-grid,
.landing-testimonial-grid,
.landing-project-grid,
.explore-card-grid,
.explore-collection-grid {
    gap: 20px;
}

.landing-value-card,
.landing-category-card,
.landing-course-card,
.landing-path-card,
.landing-beginner-card,
.landing-testimonial-card,
.landing-project-card,
.explore-card,
.explore-collection-card,
.explore-state-card {
    transition: border-color var(--transition-base), background-color var(--transition-base), transform var(--transition-base);
}

.landing-category-card:hover,
.landing-course-card:hover,
.landing-project-card:hover,
.landing-beginner-card:hover,
.explore-card:hover,
.explore-collection-card:hover,
.explore-spotlight-card:hover,
.feature-card:hover,
.course-card:hover,
.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: none !important;
    border-color: rgba(25, 28, 31, 0.18) !important;
}

.landing-value-card__icon,
.landing-category-card__icon,
.landing-project-card__icon,
.feature-card__icon,
.explore-card__icon,
.learning-dashboard__avatar,
.lesson-coach__avatar {
    background: var(--rui-dark) !important;
    color: var(--rui-white) !important;
    border-radius: 20px !important;
}

.landing-value-card__icon svg,
.landing-category-card__icon svg,
.landing-project-card__icon svg,
.feature-card__icon svg,
.explore-card__icon svg,
.learning-dashboard__avatar svg,
.lesson-coach__avatar svg {
    width: 32px;
    height: 32px;
}

.landing-course-card__media,
.explore-card__media,
.explore-card__media::before,
.course-card__image {
    background-image: none !important;
}

.landing-course-card--cobalt .landing-course-card__media,
.explore-card--cobalt .explore-card__media {
    background: var(--rui-blue) !important;
}

.landing-course-card--mint .landing-course-card__media,
.explore-card--mint .explore-card__media {
    background: var(--rui-teal) !important;
}

.landing-course-card--ember .landing-course-card__media,
.explore-card--ember .explore-card__media {
    background: var(--rui-pink) !important;
}

.landing-course-card--slate .landing-course-card__media,
.explore-card--slate .explore-card__media {
    background: var(--rui-dark) !important;
}

.landing-course-card--amber .landing-course-card__media,
.explore-card--amber .explore-card__media {
    background: var(--rui-warning) !important;
}

.landing-course-card--aurora .landing-course-card__media,
.explore-card--aurora .explore-card__media {
    background: var(--rui-success) !important;
}

.explore-page {
    background: var(--white) !important;
}

.explore-search-panel,
.explore-section--muted {
    background: var(--rui-surface) !important;
}

.explore-card__title,
.landing-course-card__body h3,
.landing-value-card h3,
.landing-category-card h3,
.landing-beginner-card h3,
.landing-project-card h3,
.explore-collection-card__title,
.course-detail__module-card h3,
.lesson-rail__module h3,
.lesson-rail__header h2,
.lesson-stage__header h1,
.learning-course-row__details h3 {
    font-size: clamp(1.5rem, 2vw, 2rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em !important;
}

.course-detail-page {
    background: var(--white);
}

.course-detail__hero {
    background: var(--rui-dark) !important;
    color: var(--rui-white) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}

.course-detail__hero h1,
.course-detail__brand,
.course-detail__instructor,
.course-detail__instructor a,
.course-detail__stat,
.course-detail__hero p {
    color: var(--rui-white) !important;
}

.course-detail__tabs a {
    border-radius: 9999px;
    padding: 12px 18px;
    background: var(--rui-surface);
    color: var(--text-secondary);
}

.course-detail__tabs a.active,
.course-detail__tabs a:hover {
    background: var(--rui-dark);
    color: var(--rui-white);
}

.lesson-workspace {
    background: var(--rui-surface);
}

.lesson-workspace__top,
.lesson-workspace__grid {
    max-width: var(--max-width);
    margin: 0 auto;
}

.lesson-rail {
    background: var(--rui-dark) !important;
    color: var(--rui-white) !important;
}

.lesson-rail p,
.lesson-rail__module-meta,
.lesson-rail__item-state,
.lesson-stage__section-title,
.lesson-stage__transcript-body,
.lesson-stage__body,
.lesson-stage__notice,
.lesson-workspace__progress {
    color: inherit;
}

.lesson-rail__item {
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.72);
}

.lesson-rail__item.active,
.lesson-rail__item.completed,
.lesson-rail__item:hover {
    background: var(--white);
    color: var(--rui-dark);
}

.lesson-stage__card {
    background: var(--white) !important;
}

.site-footer {
    padding: 80px 0 32px;
}

.site-footer .footer__grid {
    gap: 32px;
}

.site-footer .footer__social-link {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

.site-footer .footer__social-link:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

.site-footer .footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.layout-with-sidebar .main-content > div[style*="linear-gradient"],
#app > div > div > div[style*="linear-gradient"] {
    background: var(--rui-dark) !important;
    background-image: none !important;
    color: var(--rui-white) !important;
    border-radius: 0 0 32px 32px !important;
    box-shadow: none !important;
}

.layout-with-sidebar [style*="box-shadow"],
.layout-with-sidebar [style*="backdrop-filter"],
#app [style*="box-shadow"],
#app [style*="backdrop-filter"] {
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.layout-with-sidebar .main-content[style],
.layout-with-sidebar .main-content > div[style*="background:var(--light-ash)"],
.layout-with-sidebar .main-content > div[style*="background: var(--light-ash)"] {
    background: var(--white) !important;
}

.auth-shell {
    min-height: 100vh;
    padding-top: var(--nav-height);
    display: grid;
    grid-template-columns: minmax(320px, 1.02fr) minmax(0, 0.98fr);
    background: var(--white);
}

.auth-shell--single {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-height) + 40px) 24px 40px;
    background: var(--rui-surface);
}

.auth-shell__aside {
    background: var(--rui-dark);
    color: var(--rui-white);
    padding: 64px 56px;
    display: grid;
    align-content: space-between;
    gap: 40px;
}

.auth-shell__brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    color: var(--rui-white);
    letter-spacing: -0.03em;
}

.auth-shell__eyebrow {
    display: inline-flex;
    width: fit-content;
    padding: 8px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.auth-shell__headline {
    font-size: clamp(3.2rem, 7vw, 6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--rui-white);
    max-width: 8ch;
}

.auth-shell__copy {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.74);
    max-width: 540px;
}

.auth-shell__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.auth-shell__stat {
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

.auth-shell__stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    color: var(--rui-white);
    letter-spacing: -0.03em;
    margin-bottom: 6px;
}

.auth-shell__stat span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.9rem;
}

.auth-shell__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 32px;
    background: var(--white);
}

.auth-card {
    width: 100%;
    max-width: 560px;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--white);
    display: grid;
    gap: 18px;
}

.auth-card__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-card__title {
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.auth-card__subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.auth-card__status {
    min-height: 22px;
    font-size: 0.92rem;
    line-height: 1.5;
}

.auth-card__status--error {
    color: var(--rui-danger);
}

.auth-card__status--success {
    color: var(--rui-teal);
}

.auth-card__status--info {
    color: var(--rui-blue-text);
}

.auth-card__divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

.auth-card__divider::before,
.auth-card__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(25, 28, 31, 0.1);
}

.auth-social-list {
    display: grid;
    gap: 12px;
}

.auth-inline-links,
.auth-legal {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

.auth-inline-links {
    display: grid;
    gap: 8px;
    padding-top: 20px;
    border-top: 1px solid rgba(25, 28, 31, 0.08);
}

.auth-inline-link {
    display: inline;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--rui-blue-text);
    font: inherit;
    font-weight: 600;
}

.auth-card .verification-badge {
    background: var(--rui-surface) !important;
    border-radius: 20px !important;
}

@media (max-width: 1200px) {
    .landing-home__hero-inner {
        grid-template-columns: 1fr;
    }

    .landing-home__hero-title {
        max-width: 13ch;
    }

    .landing-home__hero-visual {
        justify-items: center;
    }
}

@media (max-width: 1024px) {
    .site-nav__top {
        display: none;
    }

    :root {
        --nav-height: 80px;
        --sidebar-width: 100%;
    }

    .layout-with-sidebar {
        display: block;
    }

    .sidebar {
        position: static;
        width: 100%;
        top: auto;
        padding-top: calc(var(--nav-height) + 8px);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .main-content {
        margin-left: 0;
        padding: 24px !important;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-shell__aside {
        padding: 40px 24px;
    }

    .auth-shell__main {
        padding: 24px;
    }

    .auth-shell__stats {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .learning-dashboard__grid,
    .lesson-workspace__grid,
    .course-detail__hero,
    .course-detail__info-grid,
    .course-detail__modules,
    .course-detail__stats {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .container {
        padding: 0 16px;
    }

    .main-content {
        padding: 20px !important;
    }

    .sidebar {
        grid-template-columns: 1fr;
        padding-left: 8px;
        padding-right: 8px;
    }

    .btn,
    .btn--lg,
    .btn--sm {
        width: 100%;
    }

    .landing-home__hero-title,
    .explore-context__title,
    .dashboard-header__greeting,
    .learning-dashboard__welcome h1,
    .landing-section__head h2,
    .course-detail__hero h1,
    .auth-card__title,
    .auth-shell__headline {
        font-size: clamp(2.4rem, 12vw, 4rem) !important;
    }

    .landing-home__hero-orb {
        width: 100%;
        height: 320px;
    }

    .landing-home__hero-core {
        width: 120px;
        height: 120px;
    }

    .landing-home__hero-core svg {
        width: 64px;
        height: 64px;
    }

    .auth-card {
        padding: 28px 20px;
        border-radius: 24px;
    }

    .auth-shell__stats {
        grid-template-columns: 1fr;
    }
}