.auth-page,
.student-page {
    background:
        radial-gradient(circle at 12% 12%, rgba(246, 91, 134, 0.12), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(19, 41, 75, 0.08), transparent 30%),
        #f6f8fb;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
    gap: 42px;
    align-items: center;
    min-height: calc(100vh - 96px);
    padding: 64px 6vw;
}

.auth-shell-reverse {
    grid-template-columns: minmax(360px, 0.72fr) minmax(0, 1fr);
}

.auth-shell-reverse .auth-intro {
    order: 2;
}

.auth-logo {
    display: block;
    width: auto;
    height: 68px;
    max-width: 290px;
    margin-bottom: 28px;
    object-fit: contain;
}

.auth-intro h1 {
    max-width: 660px;
    margin: 0 0 18px;
    color: var(--navy);
    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.05;
}

.auth-intro p {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 19px;
    line-height: 1.75;
}

.auth-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 620px;
    margin-top: 28px;
}

.auth-benefits span {
    padding: 14px 16px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    font-weight: 800;
}

.auth-card {
    padding: 30px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 229, 239, 0.92);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.auth-card h2 {
    margin: 0 0 4px;
    color: var(--navy);
    font-size: 30px;
    line-height: 1.1;
}

.auth-card .button-pink {
    width: 100%;
}

.auth-card a,
.student-page a {
    font-weight: 800;
}

.auth-page .flash,
.student-page .flash {
    max-width: 1120px;
    margin: 20px auto 0;
}

.student-hero {
    padding: 52px 6vw 30px;
    background:
        radial-gradient(circle at 82% 16%, rgba(246, 91, 134, 0.18), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #fff5f8 52%, #eef5fb 100%);
}

.student-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.5fr);
    gap: 28px;
    align-items: stretch;
    max-width: 1180px;
    margin: 0 auto;
}

.student-hero h1 {
    max-width: 760px;
    margin: 0 0 14px;
    color: var(--navy);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
}

.student-hero p {
    max-width: 640px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

.student-hero-card,
.summary-card,
.continue-panel,
.lesson-preview,
.student-course-card,
.ai-card,
.readiness-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.student-hero-card {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 24px;
}

.student-hero-card h2 {
    margin: 0;
    color: var(--navy);
    font-size: 24px;
}

.student-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 6vw 64px;
}

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

.summary-card {
    padding: 20px;
}

.summary-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.summary-card strong {
    display: block;
    color: var(--navy);
    font-size: clamp(22px, 2.4vw, 31px);
    line-height: 1.1;
}

.summary-card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 800;
}

.student-layout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.38fr);
    gap: 24px;
    align-items: start;
}

.student-main-column,
.student-side-column {
    display: grid;
    gap: 22px;
}

.continue-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    gap: 24px;
    align-items: center;
    padding: 28px;
    background:
        radial-gradient(circle at 92% 14%, rgba(246, 91, 134, 0.12), transparent 28%),
        #ffffff;
}

.continue-panel h2,
.ai-card h2,
.readiness-card h2,
.section-heading-row h2 {
    margin: 0 0 10px;
    color: var(--navy);
    line-height: 1.15;
}

.continue-panel p,
.ai-card p,
.readiness-card p,
.student-course-card p {
    color: var(--muted);
}

.lesson-preview {
    padding: 18px;
}

.lesson-preview h3 {
    margin: 10px 0 4px;
    color: var(--navy);
}

.lesson-preview .progress {
    margin: 14px 0;
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
}

.section-heading-row p {
    margin: 0;
}

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

.student-course-card {
    display: grid;
    gap: 12px;
    padding: 22px;
}

.student-course-card h3 {
    margin: 0;
    color: var(--navy);
}

.student-course-card p {
    margin: 0;
}

.ai-card,
.readiness-card {
    padding: 24px;
}

.ai-card {
    color: var(--white);
    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.22), transparent 26%),
        linear-gradient(145deg, var(--navy), var(--navy-soft));
}

.ai-card h2,
.ai-card p {
    color: var(--white);
}

.ai-card .badge {
    color: var(--navy);
    background: var(--white);
}

.readiness-card ul {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 18px 0 0;
    list-style: none;
}

.readiness-card li {
    padding: 11px 12px;
    color: var(--navy);
    background: var(--pink-soft);
    border-radius: 8px;
    font-weight: 800;
}

.readiness-dashboard-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
    gap: 20px;
    align-items: stretch;
    padding: 24px;
    background:
        radial-gradient(circle at 92% 12%, rgba(246, 91, 134, 0.16), transparent 30%),
        linear-gradient(135deg, #ffffff, #fff5f8 58%, #eef5fb);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(19, 41, 75, 0.09);
}

.readiness-dashboard-copy,
.readiness-goto-mini {
    display: grid;
    gap: 12px;
    align-content: center;
}

.readiness-dashboard-copy h2,
.readiness-goto-mini h3 {
    margin: 0;
    color: var(--navy);
}

.readiness-dashboard-copy p,
.readiness-goto-mini p {
    margin: 0;
    color: var(--muted);
}

.readiness-dashboard-stats,
.readiness-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.readiness-dashboard-stats span {
    padding: 8px 11px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.readiness-dashboard-panel .progress {
    max-width: 520px;
}

.readiness-goto-mini {
    padding: 20px;
    color: var(--white);
    background: linear-gradient(145deg, var(--navy), var(--navy-soft));
    border-radius: 8px;
}

.readiness-goto-mini h3,
.readiness-goto-mini p {
    color: var(--white);
}

.readiness-goto-mini .badge {
    width: fit-content;
    color: var(--navy);
    background: var(--white);
}

.empty-state-card {
    grid-column: 1 / -1;
}

.learning-hero,
.course-detail-hero,
.lesson-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
    gap: 28px;
    align-items: center;
    padding: 52px 6vw 34px;
    background:
        radial-gradient(circle at 84% 18%, rgba(246, 91, 134, 0.16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff5f8 52%, #eef5fb 100%);
}

.learning-hero h1,
.course-detail-hero h1,
.lesson-header h1 {
    max-width: 820px;
    margin: 0 0 14px;
    color: var(--navy);
    font-size: clamp(34px, 4.4vw, 58px);
    line-height: 1.05;
}

.learning-hero p,
.course-detail-hero p,
.lesson-header p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

.learning-content {
    display: grid;
    gap: 24px;
}

.course-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px;
    width: fit-content;
    background: var(--white);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.course-filter-strip span {
    padding: 9px 13px;
    color: var(--muted);
    border-radius: 8px;
    font-weight: 800;
}

.course-filter-strip .is-active {
    color: var(--white);
    background: var(--navy);
}

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

.catalog-card,
.course-status-card,
.course-overview-card,
.module-card,
.course-sidebar-card,
.lesson-progress-card,
.lesson-card,
.lesson-actions-panel,
.sensei-companion-card,
.lesson-outline-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.catalog-card {
    display: grid;
    gap: 14px;
    align-content: start;
    min-height: 310px;
    padding: 24px;
}

.catalog-card h3 {
    margin: 0;
    color: var(--navy);
    font-size: 24px;
    line-height: 1.15;
}

.catalog-card p {
    margin: 0;
    color: var(--muted);
}

.course-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.course-card-meta span {
    padding: 7px 10px;
    color: var(--navy);
    background: var(--pink-soft);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.inline-action-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.course-status-card,
.lesson-progress-card {
    display: grid;
    gap: 12px;
    padding: 24px;
    background:
        radial-gradient(circle at 92% 10%, rgba(246, 91, 134, 0.12), transparent 32%),
        rgba(255, 255, 255, 0.98);
}

.course-status-card strong,
.lesson-progress-card strong {
    color: var(--pink);
    font-size: 44px;
    line-height: 1;
}

.course-detail-content,
.lesson-content-shell {
    padding-top: 28px;
}

.course-detail-grid,
.lesson-content-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
    gap: 24px;
    align-items: start;
}

.course-outline-column,
.course-side-column,
.lesson-main,
.lesson-side {
    display: grid;
    gap: 22px;
}

.course-overview-card,
.course-sidebar-card,
.lesson-card,
.lesson-actions-panel,
.sensei-companion-card,
.lesson-outline-card {
    padding: 24px;
}

.course-overview-card,
.module-card,
.lesson-card {
    box-shadow: 0 18px 50px rgba(19, 41, 75, 0.09);
}

.course-overview-card h2,
.course-sidebar-card h2,
.sensei-companion-card h2,
.lesson-outline-card h2 {
    margin: 0 0 14px;
    color: var(--navy);
}

.lesson-path-pill {
    display: inline-flex;
    width: fit-content;
    margin-left: 8px;
    padding: 8px 11px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.readiness-lesson-note {
    display: grid;
    gap: 4px;
    max-width: 640px;
    margin-top: 18px;
    padding: 14px 16px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.readiness-lesson-note span {
    color: var(--muted);
    font-weight: 800;
}

.overview-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.overview-points span {
    padding: 16px;
    color: var(--muted);
    background: var(--blush);
    border: 1px solid rgba(246, 91, 134, 0.14);
    border-radius: 8px;
}

.overview-points strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy);
}

.module-list {
    display: grid;
    gap: 16px;
}

.module-card {
    overflow: hidden;
}

.module-card-header {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    background:
        radial-gradient(circle at 96% 10%, rgba(246, 91, 134, 0.14), transparent 28%),
        linear-gradient(135deg, #ffffff, var(--blush));
    border-bottom: 1px solid rgba(220, 229, 239, 0.9);
}

.module-card-header h3 {
    margin: 0;
    color: var(--navy);
}

.module-progress-pill {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: var(--pink-deep);
    background: var(--pink-soft);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.module-lessons {
    display: grid;
}

.module-lesson-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(220, 229, 239, 0.72);
}

.module-lesson-row.is-complete {
    background: rgba(255, 245, 248, 0.62);
}

.module-lesson-row:last-child {
    border-bottom: 0;
}

.module-lesson-row strong,
.module-lesson-row span {
    display: block;
}

.lesson-status-badge {
    width: fit-content;
    margin-top: 6px;
    padding: 4px 9px;
    color: var(--navy);
    background: var(--gray);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.lesson-status-badge.is-complete {
    color: var(--pink-deep);
    background: var(--pink-soft);
}

.course-sidebar-card {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 14px;
}

.lesson-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.lesson-breadcrumb a {
    color: var(--navy);
}

.lesson-copy {
    color: var(--text);
    font-size: 18px;
    line-height: 1.9;
    max-width: 78ch;
}

.lesson-actions-panel {
    display: grid;
    gap: 18px;
}

.lesson-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.complete-lesson-form {
    display: flex;
    justify-content: flex-end;
}

.lesson-complete-state {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    color: var(--navy);
    background: var(--pink-soft);
    border: 1px solid rgba(246, 91, 134, 0.18);
    border-radius: 8px;
}

.lesson-complete-state strong,
.lesson-complete-state span {
    display: block;
}

.lesson-complete-state span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.sensei-companion-card {
    color: var(--white);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(145deg, var(--navy), var(--navy-soft));
}

.sensei-companion-card h2,
.sensei-companion-card p {
    color: var(--white);
}

.sensei-companion-card .badge {
    color: var(--navy);
    background: var(--white);
}

.sensei-chip-list {
    display: grid;
    gap: 9px;
    margin: 18px 0;
}

.sensei-chip-list span {
    padding: 10px 12px;
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-weight: 800;
}

.mini-lesson-list {
    display: grid;
    gap: 8px;
}

.mini-lesson-list a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    color: var(--navy);
    background: var(--gray);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
}

.mini-lesson-list a.is-current {
    color: var(--white);
    background: var(--navy);
}

.mini-lesson-list small {
    color: inherit;
    opacity: 0.72;
    font-weight: 800;
}

.sensei-hero,
.readiness-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 28px;
    align-items: center;
    padding: 56px 6vw 36px;
    background:
        radial-gradient(circle at 82% 14%, rgba(246, 91, 134, 0.18), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff5f8 52%, #eef5fb 100%);
}

.sensei-hero h1,
.readiness-hero h1 {
    max-width: 840px;
    margin: 0 0 14px;
    color: var(--navy);
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.04;
}

.sensei-hero p,
.readiness-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

.sensei-beta-card,
.readiness-hero-card,
.sensei-profile-card,
.prompt-panel,
.mock-chat-card,
.practice-context-card,
.practice-mode-card,
.suggested-practice-card,
.readiness-path-card,
.readiness-checklist-card,
.goto-readiness-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.sensei-beta-card,
.readiness-hero-card {
    display: grid;
    gap: 12px;
    padding: 24px;
}

.readiness-hero-card h2 {
    margin: 0;
    color: var(--navy);
}

.sensei-content,
.readiness-content {
    display: grid;
    gap: 26px;
}

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

.sensei-profile-card {
    display: grid;
    gap: 15px;
    align-content: start;
    padding: 28px;
    overflow: hidden;
    position: relative;
}

.sensei-profile-card.is-selected {
    border-color: rgba(246, 91, 134, 0.44);
    box-shadow: 0 22px 60px rgba(246, 91, 134, 0.18);
}

.sensei-profile-card::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -42px;
    width: 148px;
    height: 148px;
    background: rgba(246, 91, 134, 0.12);
    border-radius: 50%;
}

.goto-card::after {
    background: rgba(19, 41, 75, 0.1);
}

.sensei-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.sensei-avatar {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    color: var(--white);
    background: linear-gradient(145deg, var(--pink), var(--navy));
    border-radius: 24px 24px 8px 8px;
    box-shadow: var(--shadow-soft);
    font-size: 38px;
    font-weight: 900;
}

.goto-card .sensei-avatar {
    background: linear-gradient(145deg, var(--navy), var(--navy-soft));
}

.sensei-profile-card h2,
.prompt-panel h2,
.practice-context-card h2,
.practice-mode-card h3,
.mock-chat-card h2,
.suggested-practice-card h2,
.readiness-path-card h3,
.readiness-checklist-card h2,
.goto-readiness-card h2 {
    margin: 0;
    color: var(--navy);
}

.sensei-profile-card p,
.sensei-profile-card small,
.practice-context-card p,
.practice-mode-card p,
.suggested-practice-card p,
.readiness-path-card p,
.goto-readiness-card p {
    margin: 0;
    color: var(--muted);
}

.sensei-focus-list,
.prompt-card-grid,
.readiness-path-grid,
.readiness-checklist {
    display: grid;
    gap: 10px;
}

.sensei-focus-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sensei-focus-list span {
    padding: 10px 12px;
    color: var(--navy);
    background: var(--pink-soft);
    border-radius: 8px;
    font-weight: 800;
}

.sensei-workspace-grid,
.ai-workspace-layout,
.readiness-grid {
    display: grid;
    gap: 22px;
}

.sensei-workspace-grid,
.readiness-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-workspace-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
    align-items: start;
}

.ai-workspace-main,
.ai-workspace-side {
    display: grid;
    gap: 22px;
}

.prompt-panel,
.mock-chat-card,
.practice-context-card,
.suggested-practice-card,
.readiness-path-card,
.readiness-checklist-card,
.goto-readiness-card {
    padding: 24px;
}

.practice-context-card {
    display: grid;
    gap: 8px;
    background:
        radial-gradient(circle at 94% 16%, rgba(246, 91, 134, 0.12), transparent 30%),
        rgba(255, 255, 255, 0.96);
}

.prompt-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.prompt-card-grid button {
    justify-content: flex-start;
    min-height: 58px;
    color: var(--navy);
    background: var(--blush);
    border: 1px solid rgba(246, 91, 134, 0.18);
    box-shadow: none;
    text-align: left;
}

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

.practice-mode-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 18px;
    background:
        radial-gradient(circle at 94% 12%, rgba(246, 91, 134, 0.1), transparent 28%),
        #ffffff;
}

.practice-mode-card.is-active {
    border-color: rgba(246, 91, 134, 0.38);
}

.practice-mode-card small {
    color: var(--muted);
    line-height: 1.5;
}

.practice-mode-card button {
    justify-content: center;
    width: fit-content;
    margin-top: 4px;
    padding: 10px 13px;
    color: var(--navy);
    background: var(--pink-soft);
    border: 1px solid rgba(246, 91, 134, 0.2);
    box-shadow: none;
}

.ai-composer-card {
    background:
        radial-gradient(circle at 96% 10%, rgba(246, 91, 134, 0.14), transparent 30%),
        linear-gradient(135deg, #ffffff, #fff8fa);
}

.ai-composer-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}

.ai-composer-header h2 {
    margin: 8px 0 6px;
}

.ai-beta-pill {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: var(--navy);
    background: var(--pink-soft);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.ai-practice-form {
    display: grid;
}

.ai-practice-form label {
    color: var(--navy);
    font-weight: 900;
}

.ai-practice-form textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
}

.ai-practice-form button {
    width: fit-content;
}

.ai-integration-note {
    padding: 13px 14px;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    font-weight: 800;
}

.ai-integration-note code {
    color: var(--navy);
    font-weight: 900;
}

.ai-integration-note.is-error {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.28);
    background: #fff5f4;
}

.ai-live-response {
    display: grid;
    gap: 10px;
    padding: 16px;
    color: var(--navy);
    background: var(--white);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.ai-live-response[hidden] {
    display: none;
}

.ai-live-response p {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.65;
}

.ai-practice-form button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.mock-chat-card {
    display: grid;
    gap: 18px;
}

.mock-chat-thread {
    display: grid;
    gap: 10px;
}

.chat-bubble {
    max-width: 760px;
    padding: 13px 15px;
    color: var(--navy);
    background: var(--gray);
    border-radius: 8px;
    font-weight: 700;
}

.chat-bubble.user {
    justify-self: end;
    color: var(--white);
    background: var(--pink);
}

.chat-bubble.goto {
    background: var(--pink-soft);
}

.chat-bubble.hana {
    background: #fff7fb;
}

.suggested-practice-card .sensei-chip-list span {
    color: var(--navy);
    background: var(--pink-soft);
}

.mock-chat-form {
    display: flex;
    gap: 10px;
}

.mock-chat-form.ai-practice-form {
    display: grid;
}

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

.readiness-path-card {
    display: grid;
    gap: 12px;
    align-content: start;
}

.readiness-path-card strong {
    color: var(--navy);
}

.readiness-grid {
    align-items: start;
}

.readiness-checklist label {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 13px;
    color: var(--navy);
    background: var(--blush);
    border: 1px solid rgba(246, 91, 134, 0.14);
    border-radius: 8px;
    font-weight: 800;
}

.readiness-checklist input {
    width: auto;
}

.goto-readiness-card {
    color: var(--white);
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(145deg, var(--navy), var(--navy-soft));
}

.goto-readiness-card h2,
.goto-readiness-card p {
    color: var(--white);
}

.goto-readiness-card .badge {
    color: var(--navy);
    background: var(--white);
}

.readiness-path-hero {
    padding: 56px 6vw 36px;
    background:
        radial-gradient(circle at 82% 14%, rgba(246, 91, 134, 0.18), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #fff5f8 52%, #eef5fb 100%);
}

.readiness-path-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
    gap: 28px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
}

.readiness-path-hero h1 {
    max-width: 840px;
    margin: 0 0 14px;
    color: var(--navy);
    font-size: clamp(34px, 4.6vw, 60px);
    line-height: 1.04;
}

.readiness-path-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
}

.sensei-note {
    display: grid;
    gap: 3px;
    width: fit-content;
    margin-top: 18px;
    padding: 13px 15px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.sensei-note span {
    color: var(--muted);
    font-weight: 800;
}

.path-progress-card,
.path-overview-card,
.path-sidebar-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(220, 229, 239, 0.9);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
}

.path-progress-card {
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    justify-self: end;
}

.path-progress-card strong {
    color: var(--pink);
    font-size: 44px;
    line-height: 1;
}

.readiness-path-content {
    padding-top: 28px;
}

.readiness-path-content-inner {
    max-width: 1180px;
    margin: 0 auto;
}

.readiness-path-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.36fr);
    gap: 24px;
    align-items: start;
}

.readiness-path-main,
.readiness-path-side {
    display: grid;
    gap: 22px;
}

.path-overview-card,
.path-sidebar-card {
    padding: 24px;
}

.path-overview-card h2,
.path-sidebar-card h2 {
    margin: 0 0 16px;
    color: var(--navy);
}

.path-gain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.path-gain-grid span {
    padding: 13px 14px;
    color: var(--navy);
    background: var(--blush);
    border: 1px solid rgba(246, 91, 134, 0.14);
    border-radius: 8px;
    font-weight: 800;
}

.readiness-module-card .module-card-header {
    align-items: flex-start;
}

.path-sidebar-card {
    position: sticky;
    top: 120px;
    display: grid;
    gap: 14px;
}

.path-sidebar-card .progress,
.path-progress-card .progress {
    max-width: 320px;
}

@media (max-width: 1080px) {
    .auth-shell,
    .auth-shell-reverse,
    .student-hero,
    .student-hero-inner,
    .student-layout-grid,
    .readiness-dashboard-panel,
    .continue-panel,
    .learning-hero,
    .course-detail-hero,
    .lesson-header,
    .course-detail-grid,
    .lesson-content-shell,
    .sensei-hero,
    .readiness-hero,
    .ai-workspace-layout,
    .readiness-path-grid,
    .readiness-path-hero,
    .readiness-path-hero-inner,
    .readiness-path-layout {
        grid-template-columns: 1fr;
    }

    .auth-shell-reverse .auth-intro {
        order: 0;
    }

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

    .catalog-grid,
    .overview-points,
    .sensei-profile-grid,
    .sensei-workspace-grid,
    .practice-mode-grid,
    .readiness-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .course-sidebar-card,
    .path-sidebar-card {
        position: static;
    }

    .path-progress-card {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 720px) {
    .auth-shell,
    .student-hero,
    .student-content,
    .learning-hero,
    .course-detail-hero,
    .lesson-header,
    .sensei-hero,
    .readiness-hero,
    .readiness-path-hero {
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .auth-shell {
        gap: 28px;
        min-height: auto;
        padding-top: 38px;
        padding-bottom: 48px;
    }

    .auth-logo {
        height: 48px;
        max-width: 210px;
    }

    .auth-benefits,
    .overview-grid,
    .student-course-grid,
    .catalog-grid,
    .overview-points,
    .sensei-profile-grid,
    .sensei-workspace-grid,
    .readiness-grid,
    .prompt-card-grid,
    .practice-mode-grid,
    .sensei-focus-list,
    .path-gain-grid {
        grid-template-columns: 1fr;
    }

    .auth-card,
    .continue-panel,
    .student-hero-card {
        padding: 20px;
    }

    .section-heading-row {
        display: grid;
        align-items: start;
    }

    .module-lesson-row,
    .lesson-nav-buttons,
    .complete-lesson-form,
    .lesson-complete-state,
    .module-card-header {
        display: grid;
        justify-content: stretch;
    }

    .lesson-nav-buttons .button,
    .complete-lesson-form .button-pink,
    .readiness-dashboard-actions .button,
    .inline-action-form .button,
    .inline-action-form button {
        width: 100%;
    }

    .lesson-path-pill {
        margin: 8px 0 0;
    }

    .sensei-card-topline,
    .ai-composer-header {
        display: grid;
    }

    .ai-practice-form button,
    .practice-mode-card button {
        width: 100%;
    }

    .mock-chat-form {
        display: grid;
    }
}