* {
    box-sizing: border-box;
}

body {
    color-scheme: light;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f2f4f6;
    color: #2d3b45;
    line-height: 1.55;
}
body.font-large { font-size: 112.5%; }
body.font-x-large { font-size: 125%; }
body.high-contrast { background: #fff; color: #000; }
body.high-contrast a { color: #003c9e; text-decoration: underline; }
body.high-contrast .card { border-color: #000; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }

a {
    color: #176b9a;
    text-decoration: none;
}

:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
}

.header {
    background: #2d3b45;
    border-bottom: 0;
    padding: 12px clamp(18px, 4vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.logo {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    letter-spacing: 0;
    font-weight: bold;
}

.header nav a { padding: 8px 10px; border-radius: 3px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: .9rem; }
.header nav a:hover, .header nav a:focus-visible { background: #415563; color: #fff; }
.header nav .notification-bell { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.notification-count { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #c84b3c; color: #fff; font: 700 .72rem Arial, sans-serif; }

nav {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.container {
    width: min(94%, 1200px);
    margin: 28px auto;
}

.card {
    background: #fff;
    border: 1px solid #d4dbe0;
    border-radius: 3px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: none;
}

h1, h2, h3 { line-height: 1.25; color: #2d3b45; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 14px; font-weight: 600; }
h2 { margin-top: 0; font-size: 1.55rem; font-weight: 600; }
h3 { font-weight: 600; }

.page-header {
    margin-bottom: 24px;
    padding: 22px 24px;
    border: 1px solid #d4dbe0;
    border-radius: 3px;
    background: #fff;
}

.small-card {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

.google-signin-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: visible;
}
.google-signin-wrap > * { margin-inline: auto !important; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

input,
textarea,
select {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #aeb8bf;
    border-radius: 3px;
    margin-top: 5px;
    margin-bottom: 15px;
    font: inherit;
}
input:focus, textarea:focus, select:focus { border-color: #176b9a; outline: 2px solid rgba(23, 107, 154, .2); }

textarea {
    resize: vertical;
}

label {
    display: block;
    font-weight: bold;
}
.checkbox-label { display: flex; align-items: center; gap: 8px; margin: 12px 0; cursor: pointer; font-weight: normal; }
.checkbox-label input[type="radio"],
.checkbox-label input[type="checkbox"] { display: inline-block; width: auto; margin: 0; padding: 0; border: 0; flex: 0 0 auto; }
.checkbox-label span { flex: 1 1 auto; }
.danger { background: #b42318; }
.status-badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 0.85em; font-weight: 700; }
.status-submitted { background: #dcfce7; color: #166534; }
.status-graded, .status-returned { background: #dbeafe; color: #1e40af; }
.status-late { background: #fef3c7; color: #92400e; }
.status-missing { background: #fee2e2; color: #991b1b; }
.status-draft, .status-not-started { background: #f3f4f6; color: #374151; }
.list { display: grid; gap: 0; }
.list-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid #e0e5e8; }
.list-item:last-child { border-bottom: 0; }
.table-wrap { overflow-x: auto; border: 1px solid #d4dbe0; border-radius: 3px; background: #fff; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #e0e5e8; vertical-align: top; }
th { background: #edf1f3; color: #394b57; font-weight: 700; }

button,
.button {
    display: inline-block;
    background: #176b9a;
    color: #fff;
    border: 0;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}
button:hover, .button:hover { background: #12577e; color: #fff; }

.button.secondary {
    border: 1px solid #aeb8bf;
    background: #fff;
    color: #2d3b45;
}
.button.secondary:hover { background: #edf1f3; color: #2d3b45; }

.hero-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 28px; align-items: stretch; margin-bottom: 28px; }
.hero-copy { background: #fff; color: #2d3b45; border: 1px solid #d4dbe0; border-radius: 3px; padding: clamp(28px, 5vw, 56px); }
.hero-copy h1 { color: #2d3b45; }
.hero-lede { max-width: 650px; font-size: clamp(1.05rem, 2vw, 1.25rem); color: #52616b; }
.eyebrow, .feature-number { font: 700 .78rem/1.2 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: #176b9a; }
.feature-number { color: #765000; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { background: #fff; border: 1px solid #d4dbe0; border-radius: 3px; padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-note strong { font-size: 1.4rem; line-height: 1.2; color: #2d3b45; }
.hero-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: auto; border: 1px solid #176b9a; border-radius: 3px; color: #176b9a; font: 700 1rem Arial, sans-serif; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-grid article { padding: 20px; border: 1px solid #d4dbe0; border-top: 3px solid #176b9a; border-radius: 3px; background: #fff; }
.feature-grid h2 { font-size: 1.35rem; margin: 12px 0 6px; }
body.personal-landing,
body.education-landing { background: #f2f4f6; color: #2d3b45; font-family: Arial, Helvetica, sans-serif; }
body.personal-landing .header,
body.education-landing .header { min-height: 64px; padding: 12px clamp(18px, 5vw, 64px); background: #2d3b45; border-bottom: 0; }
body.personal-landing .logo,
body.education-landing .logo { font-family: Arial, Helvetica, sans-serif; font-size: 22px; letter-spacing: 0; }
body.personal-landing .header nav,
body.education-landing .header nav { align-items: center; gap: 8px; }
body.personal-landing .header nav a,
body.education-landing .header nav a { padding: 9px 12px; border-radius: 3px; color: #fff; }
body.personal-landing .header nav a:hover,
body.personal-landing .header nav a:focus-visible,
body.education-landing .header nav a:hover,
body.education-landing .header nav a:focus-visible { background: #415563; color: #fff; }
body.personal-landing .container,
body.education-landing .container { width: min(94%, 1120px); margin: 26px auto; }
.app-welcome,
.personal-welcome { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 28px 32px; border: 1px solid #d4dbe0; border-radius: 3px; background: #fff; }
.app-welcome > div:first-child { max-width: 720px; }
.app-kicker { margin: 0 0 8px; color: #52616b; font: 700 .72rem/1.3 Arial, Helvetica, sans-serif; letter-spacing: .08em; }
.app-welcome h1,
.personal-welcome h1 { margin: 0 0 10px; color: #2d3b45; font: 600 clamp(1.85rem, 3vw, 2.5rem)/1.18 Arial, Helvetica, sans-serif; letter-spacing: -.02em; }
.app-welcome > div:first-child > p:last-child,
.welcome-copy > p:last-child { max-width: 680px; margin: 0; color: #52616b; font-size: 1.02rem; line-height: 1.5; }
.app-welcome-actions { min-width: 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.app-welcome-actions > p { margin: 0; color: #52616b; font-size: .84rem; line-height: 1.4; }
.personal-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; }
body.personal-landing .button,
body.education-landing .button { padding: 10px 17px; border: 0; border-radius: 3px; background: #176b9a; color: #fff; font: 700 .95rem Arial, Helvetica, sans-serif; text-align: center; }
body.personal-landing .button:hover,
body.education-landing .button:hover { background: #12577e; color: #fff; }
.app-text-link { color: #176b9a; font: 600 .94rem Arial, Helvetica, sans-serif; }
.workspace-tabs { display: flex; gap: 0; margin-top: 20px; border-bottom: 1px solid #aeb8bf; }
.workspace-tabs a { min-width: 145px; padding: 12px 18px 10px; border-bottom: 4px solid transparent; color: #394b57; font: 1rem Arial, Helvetica, sans-serif; text-align: center; }
.workspace-tabs a[aria-current="location"] { border-bottom-color: #176b9a; color: #12577e; font-weight: 700; }
.workspace-tabs a:hover { background: #e7ecef; }
.workspace-demo { margin-top: 22px; padding: 22px; border: 1px solid #d4dbe0; border-radius: 3px; background: #fff; }
.workspace-demo-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #dfe4e8; }
.workspace-demo-heading .app-kicker { margin-bottom: 4px; }
.workspace-demo-heading h2 { margin: 0; color: #2d3b45; font: 600 1.38rem/1.3 Arial, Helvetica, sans-serif; }
.demo-label { padding: 5px 8px; border: 1px solid #cbd4da; border-radius: 3px; color: #52616b; font: 700 .68rem Arial, Helvetica, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.personal-preview-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr); gap: 18px; }
.work-preview,
.writing-preview { border: 1px solid #d9dee3; border-radius: 3px; }
.work-preview { padding: 0 18px; }
.preview-section-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #e2e6e9; }
.preview-section-title h3 { margin: 0; color: #2d3b45; font: 600 1.05rem Arial, Helvetica, sans-serif; }
.preview-section-title span { color: #52616b; font-size: .82rem; }
.work-preview-item { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid #e7eaec; }
.work-preview-item:last-child { border-bottom: 0; }
.task-check { width: 16px; height: 16px; border: 1px solid #81919a; border-radius: 2px; }
.work-preview-item strong { color: #344955; font-size: .94rem; }
.work-preview-item p { margin: 4px 0 0; color: #66757d; font-size: .82rem; }
.task-status { color: #52616b; font-size: .78rem; white-space: nowrap; }
.writing-preview { padding: 18px; background: #f9fafb; }
.writing-preview h3 { margin: 0 0 8px; color: #2d3b45; font: 600 1.05rem Arial, Helvetica, sans-serif; }
.writing-preview > p:not(.app-kicker) { margin: 0 0 14px; color: #52616b; font-size: .9rem; line-height: 1.45; }
.feedback-example { padding: 12px; border-left: 3px solid #176b9a; background: #fff; color: #394b57; font-size: .86rem; }
.feedback-example ul { margin: 8px 0 0; padding-left: 18px; }
.feedback-example li + li { margin-top: 5px; }
.sample-chat { display: grid; gap: 9px; margin-top: 14px; }
.sample-chat-message { max-width: 96%; padding: 10px 12px; border: 1px solid #d9dee3; border-radius: 4px; background: #fff; color: #394b57; font-size: .82rem; line-height: 1.45; }
.sample-chat-message span { display: block; margin-bottom: 4px; color: #52616b; font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.sample-chat-message p { margin: 0; }
.sample-chat-learner { justify-self: end; background: #eaf3f8; }
.sample-chat-note { margin-top: 12px !important; font-size: .8rem !important; }
.personal-coach-card > p:not(.eyebrow) { max-width: 760px; }
.coach-prompt-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.coach-prompt { min-height: 36px; padding: 7px 11px; border: 1px solid #b8c7d0; border-radius: 18px; background: #f4f7f9; color: #315b76; font: 600 .82rem Arial, Helvetica, sans-serif; cursor: pointer; }
.coach-prompt:hover { background: #e5eff5; }
.coach-prompt:disabled { cursor: not-allowed; opacity: .65; }
.coach-chat { display: grid; gap: 12px; max-height: 430px; overflow-y: auto; margin: 16px 0; padding: 16px; border: 1px solid #d4dbe0; border-radius: 3px; background: #f7f9fa; }
.coach-message { width: fit-content; max-width: min(88%, 760px); padding: 12px 14px; border: 1px solid #d9dee3; border-radius: 4px; background: #fff; color: #394b57; line-height: 1.5; overflow-wrap: anywhere; }
.coach-message-learner { justify-self: end; border-color: #b9d0df; background: #eaf3f8; }
.coach-message-label { display: block; margin-bottom: 5px; color: #52616b; font-size: .72rem; font-weight: 700; }
.coach-message p { margin: 0; white-space: pre-wrap; }
.coach-message p + p { margin-top: 9px; }
.coach-message-example p + p { margin-top: 7px; }
.coach-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.coach-form-actions button { margin: 0; }
.coach-status { margin: 12px 0 0; color: #9b2929; font-weight: 600; }
.coach-status[hidden] { display: none; }
.personal-assignment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.personal-assignment-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid #d4dbe0; border-top: 3px solid #176b9a; border-radius: 3px; background: #fff; }
.personal-assignment-card h3 { margin: 0; color: #2d3b45; font: 600 1.12rem/1.35 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.personal-assignment-card p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.personal-assignment-card .button { margin-top: auto; }
.personal-assignment-card-heading,
.assignment-heading,
.assignment-preview-meta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; }
.personal-assignment-card-heading .eyebrow { margin: 0; font-size: .68rem; }
.assignment-workspace { max-width: 920px; margin: 0 auto; }
.assignment-workspace > .text-link { display: inline-block; margin: 0 0 16px; }
.assignment-details h1 { margin: 0; overflow-wrap: anywhere; }
.assignment-heading { align-items: flex-start; margin-bottom: 18px; }
.assignment-details > p { margin: 12px 0 0; }
.assignment-instructions { margin-top: 18px; padding: 16px; border-left: 3px solid #176b9a; background: #f4f7f9; }
.assignment-instructions p { margin: 8px 0 0; }
.assignment-coach-card .dashboard-section-heading { align-items: flex-start; }
.assignment-coach-card .dashboard-section-heading h2 { margin-bottom: 6px; }
.assignment-coach-card .dashboard-section-heading p:last-child { margin: 0; color: #52616b; line-height: 1.45; }
.assignment-chat { min-height: 180px; max-height: 520px; }
.assignment-chat-note { margin: 12px 0 0; color: #52616b; font-size: .82rem; }
.writing-review-workspace .dashboard-section-heading { align-items: flex-start; }
.writing-review-workspace .dashboard-section-heading h2 { margin-bottom: 6px; }
.writing-review-workspace .dashboard-section-heading p:last-child { margin: 0; color: #52616b; line-height: 1.45; }
.draft-save-status { flex: 0 0 auto; color: #52616b; font-size: .82rem; font-weight: 600; }
.writing-review-workspace textarea,
.draft-highlight-content {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.7;
    letter-spacing: normal;
    tab-size: 4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}
.draft-editor { position: relative; margin: 5px 0 15px; border: 1px solid #aeb8bf; border-radius: 3px; background: #fff; }
.draft-editor:focus-within { border-color: #176b9a; box-shadow: 0 0 0 2px rgba(23, 107, 154, .2); }
.draft-editor textarea#writing-draft {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 320px;
    margin: 0;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #2d3b45;
    resize: vertical;
}
.draft-highlight-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 2px; pointer-events: none; }
.draft-highlight-content { padding: 12px; color: transparent; }
.draft-highlight { background: rgba(255, 214, 102, .55); color: transparent; text-decoration: underline wavy #b06a00; text-decoration-skip-ink: none; text-underline-offset: 3px; }
.draft-highlight.priority-high { background: rgba(255, 160, 145, .5); text-decoration-color: #b42318; }
.draft-highlight.priority-medium { background: rgba(255, 214, 102, .55); text-decoration-color: #8a5a00; }
.draft-highlight.priority-low { background: rgba(160, 205, 235, .5); text-decoration-color: #176b9a; }
.draft-popover {
    position: fixed;
    z-index: 40;
    width: min(360px, calc(100vw - 24px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    border: 1px solid #aeb8bf;
    border-left: 4px solid #176b9a;
    border-radius: 4px;
    background: #fff;
    color: #2d3b45;
    box-shadow: 0 10px 28px rgba(20, 35, 45, .22);
}
.draft-popover[hidden] { display: none; }
.draft-popover-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.draft-popover-category { font-weight: 700; }
.draft-popover p { margin: 8px 0; overflow-wrap: anywhere; }
.draft-popover-excerpt q { color: #8b1e1e; text-decoration: underline wavy; text-underline-offset: 3px; }
.draft-popover-suggestion { padding: 9px 11px; border-left: 3px solid #27864a; background: #f0f8f2; }
.draft-popover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.draft-popover-actions button { margin: 0; }
.draft-editor-meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.draft-editor-meta p { margin-top: 0; }
.draft-editor-meta #draft-count { flex: 0 0 auto; white-space: nowrap; }
.writing-review-results { margin-top: 24px; padding-top: 20px; border-top: 1px solid #d4dbe0; }
.writing-review-results.is-empty { display: none; }
.writing-review-results.is-loading { opacity: .6; pointer-events: none; }
.writing-review-stale-note { display: block; margin: 0 0 16px; padding: 10px 12px; border-left: 3px solid #8a5a00; background: #fff7e6; color: #49320b; font-weight: 600; }
.writing-review-summary { padding: 14px 16px; border-left: 4px solid #176b9a; background: #f4f7f9; }
.writing-review-summary .eyebrow { margin: 0 0 5px; font-size: .68rem; }
.writing-review-summary p:last-child { margin: 0; }
.writing-review-strengths { margin: 20px 0; }
.writing-review-strengths h3, .writing-review-issues-heading h3 { margin: 0; font-size: 1.05rem; }
.writing-review-strengths ul { margin-bottom: 0; padding-left: 22px; }
.writing-review-issues-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 20px 0 10px; }
.writing-review-issues-heading span { color: #52616b; font-size: .82rem; }
.writing-issue-list { display: grid; gap: 12px; }
.writing-issue { min-width: 0; padding: 16px; border: 1px solid #d4dbe0; border-left: 4px solid #176b9a; border-radius: 3px; }
.writing-issue-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.writing-issue-category { font-weight: 700; }
.writing-issue-priority { padding: 3px 7px; border-radius: 3px; background: #eef2f4; color: #394b57; font-size: .72rem; font-weight: 700; }
.writing-issue-priority.priority-high { background: #fee2e2; color: #8b1e1e; }
.writing-issue-priority.priority-medium { background: #fff2cc; color: #704900; }
.writing-issue-priority.priority-low { background: #e8f2f8; color: #24516a; }
.writing-issue-excerpt, .writing-issue-suggestion { margin: 10px 0; overflow-wrap: anywhere; }
.writing-issue-excerpt q { color: #8b1e1e; text-decoration: underline wavy; text-underline-offset: 3px; }
.writing-issue-suggestion { padding: 10px; border-left: 3px solid #27864a; background: #f0f8f2; }
.writing-issue-explanation { margin: 10px 0; color: #52616b; }
.writing-issue-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.writing-issue-actions button { margin: 0; }
.writing-review-disclaimer { margin: 16px 0 0; color: #52616b; font-size: .82rem; }
.writing-review-placeholder { padding: 20px; border: 1px dashed #aeb8bf; text-align: center; }
.writing-review-placeholder h3 { margin-top: 0; }
.writing-review-placeholder p { margin-bottom: 0; }
.assignment-question-panel > summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; }
.assignment-question-panel[open] > summary { margin-bottom: 12px; }
.assignment-question-panel > p { color: #52616b; }
.personal-assignment-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.assignment-preview-card { min-width: 0; padding: 16px; border: 1px solid #d9dee3; border-radius: 3px; background: #fff; }
.assignment-preview-meta { color: #52616b; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.assignment-preview-card h3 { margin: 10px 0 5px; color: #2d3b45; font: 600 1.03rem Arial, Helvetica, sans-serif; }
.assignment-preview-card > p { margin: 0 0 12px; color: #52616b; font-size: .84rem; line-height: 1.45; }
.assignment-preview-chat { padding: 11px; border: 1px solid #d9dee3; border-radius: 3px; background: #f7f9fa; color: #394b57; font-size: .78rem; line-height: 1.45; }
.assignment-preview-chat > span { display: block; margin-bottom: 7px; color: #52616b; font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.assignment-preview-chat p { margin: 0; }
.assignment-preview-chat p + p { margin-top: 8px; }
.personal-overview { padding: 26px 0 10px; }
.personal-section-heading { margin-bottom: 14px; }
.personal-section-heading h2,
.personal-how-it-works h2 { margin: 0; color: #2d3b45; font: 600 1.42rem/1.3 Arial, Helvetica, sans-serif; }
.personal-cards,
.education-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.personal-card,
.education-preview-card { min-width: 0; border: 1px solid #d4dbe0; border-radius: 3px; background: #fff; }
.personal-card { padding: 18px; border-top: 3px solid #176b9a; }
.personal-card h3,
.education-preview-card h3 { margin: 0 0 8px; color: #2d3b45; font: 600 1.05rem/1.3 Arial, Helvetica, sans-serif; }
.personal-card p,
.education-preview-card p { margin: 0; color: #52616b; font-size: .9rem; line-height: 1.45; }
.personal-how-it-works { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 18px 20px; border: 1px solid #d4dbe0; border-radius: 3px; background: #fff; }
.personal-how-it-works .app-kicker { margin-bottom: 4px; }
.personal-how-it-works h2 { font-size: 1.15rem; }
.personal-how-it-works > p { max-width: 600px; margin: 0; color: #52616b; font-size: .9rem; line-height: 1.45; }
.education-preview-card { overflow: hidden; padding: 0 17px 16px; }
.course-band { margin: 0 -17px 15px; padding: 11px 17px; color: #fff; font: 700 .74rem Arial, Helvetica, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.course-band-blue { background: #376a8a; }
.course-band-green { background: #3e7065; }
.course-band-gold { background: #87672e; }
.preview-detail { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e2e6e9; font-size: .82rem; }
.preview-detail strong { color: #394b57; }
.preview-detail span { color: #66757d; }
.teacher-demo { margin-bottom: 22px; }
.teacher-tool-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.teacher-tool-list article { display: flex; gap: 12px; padding: 16px; border: 1px solid #d9dee3; border-radius: 3px; }
.tool-icon { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: #e7eef3; color: #315b76; font: 700 .7rem Arial, Helvetica, sans-serif; }
.teacher-tool-list h3 { margin: 0 0 6px; color: #2d3b45; font: 600 .97rem Arial, Helvetica, sans-serif; }
.teacher-tool-list p { margin: 0; color: #52616b; font-size: .85rem; line-height: 1.4; }
.muted { color: #61726b; }
.grade-average { color: #143d36; font-size: 2rem; font-weight: 700; margin: 8px 0; }

.dashboard-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid #d4dbe0;
    border-left: 4px solid #176b9a;
    border-radius: 3px;
    background: #fff;
    box-shadow: none;
}
.dashboard-page-header h1 { margin: 4px 0 8px; font-size: clamp(2rem, 4vw, 3.25rem); }
.dashboard-page-header p { margin: 0; }
.dashboard-page-header > div:first-child > p:last-child { max-width: 640px; color: #52616b; font-size: 1.02rem; }
.dashboard-eyebrow { margin: 0 0 8px; color: #52616b; }
.dashboard-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; max-width: 430px; justify-content: flex-end; }
.dashboard-actions .button { text-align: center; }
.dashboard-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dashboard-section-heading h2 { margin: 0; font-size: 1.55rem; }
.dashboard-section-heading .dashboard-eyebrow { font-size: .72rem; }
.dashboard-section-heading > .text-link { flex: 0 0 auto; }
.text-link { color: #176b9a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dashboard-class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.dashboard-class { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 165px; padding: 20px; border: 1px solid #d4dbe0; border-radius: 3px; background: #fff; }
.dashboard-class h3 { margin: 0 0 10px; font-size: 1.25rem; overflow-wrap: anywhere; }
.dashboard-class p { margin: 0; font-size: .9rem; }
.dashboard-join-code { display: inline-block; margin-left: 5px; color: #2d3b45; font: 700 .9rem Arial, sans-serif; letter-spacing: .06em; }
.dashboard-class-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.dashboard-work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.dashboard-work-card { min-width: 0; }
.dashboard-work-card .dashboard-section-heading { align-items: flex-start; }
.dashboard-list .list-item { gap: 16px; align-items: center; }
.dashboard-list .list-item > div { min-width: 0; overflow-wrap: anywhere; }
.dashboard-list .list-item .button { flex: 0 0 auto; text-align: center; }
.dashboard-empty { padding: 18px; border: 1px solid #d9dee3; border-radius: 3px; background: #f5f6f7; }
.dashboard-empty p { margin: 0 0 12px; }
.dashboard-empty p:last-child { margin-bottom: 0; }
.dashboard-inline-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

.error {
    background: #ffe2e2;
    border: 1px solid #dd9999;
    padding: 10px;
    margin-bottom: 15px;
}

.success {
    background: #e1f5e7;
    border: 1px solid #9bcaa7;
    padding: 10px;
    margin-bottom: 15px;
}

.join-code {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 3px;
}

.preline {
    white-space: pre-wrap;
    line-height: 1.6;
}

.rubric {
    background: #f5f5f5;
    padding: 15px;
    white-space: pre-wrap;
    overflow-x: auto;
}

.feedback {
    white-space: pre-wrap;
    line-height: 1.7;
}

.footer {
    text-align: center;
    padding: 30px;
    color: #61726b;
    border-top: 1px solid #cbd9d1;
    margin-top: 50px;
}

/* Lesson library & lesson UI */
.lesson-card { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid #176b9a; }
.lesson-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78em; font-weight: 700; background: #eef2ff; color: #2457d6; }
.tag.tag-skill { background: #fef3c7; color: #92400e; }
.tag.tag-standard { background: #dcfce7; color: #166534; }
.lesson-card.skill-card { border-left-color: #b7791f; }
.library-section-title { margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #ddd; }
.progress-track { background: #e5e7eb; border-radius: 999px; height: 10px; overflow: hidden; margin: 10px 0; }
.progress-fill { background: #2457d6; height: 100%; transition: width 0.3s ease; }
.question-card { border-top: 3px solid #176b9a; }
.question-card.answered-correct { border-top-color: #15803d; background: #f7fdf9; }
.question-card.answered-incorrect { border-top-color: #b42318; background: #fff8f7; }
.question-number { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 3px; background: #176b9a; color: #fff; font-size: 0.85em; margin-right: 8px; }
.lesson-meta-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.mark-result { font-weight: 700; }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 15px 0; background: #000; }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 700px) {
    .header {
        display: block;
    }
    nav {
        margin-top: 15px;
    }

    .hero-panel, .feature-grid { grid-template-columns: 1fr; }
    body.personal-landing .header,
    body.education-landing .header { display: flex; align-items: flex-start; flex-direction: column; }
    body.personal-landing .header nav,
    body.education-landing .header nav { margin-top: 4px; }
    .personal-cards,
    .education-preview-grid,
    .teacher-tool-list { grid-template-columns: 1fr; gap: 12px; }
    .personal-preview-grid { grid-template-columns: 1fr; }
    .personal-assignment-preview { grid-template-columns: 1fr; }
    .personal-card { min-height: 0; }
    .workspace-tabs a { min-width: 0; flex: 1; }
    .app-welcome,
    .personal-welcome { align-items: flex-start; flex-direction: column; padding: 22px; gap: 18px; }
    .app-welcome-actions { min-width: 0; }
    .personal-actions { flex-wrap: wrap; }
    .workspace-demo { padding: 16px; }
    .workspace-demo-heading { align-items: flex-start; flex-direction: column; }
    .work-preview-item { grid-template-columns: 18px minmax(0, 1fr); }
    .task-status { grid-column: 2; }
    .personal-how-it-works { align-items: flex-start; flex-direction: column; }
    .container { margin-top: 22px; }
    .dashboard-page-header { display: block; }
    .dashboard-actions { justify-content: flex-start; margin-top: 22px; }
    .dashboard-work-grid { grid-template-columns: 1fr; }
    .dashboard-section-heading { align-items: flex-start; }
    .dashboard-list .list-item { align-items: flex-start; flex-direction: column; }
    .dashboard-list .list-item .button { align-self: flex-start; }
    .draft-editor textarea#writing-draft { min-height: 240px; height: 38vh; }
    .draft-popover { width: calc(100vw - 24px); }
}


body.high-contrast .feature-number { color: #000; }
body.high-contrast.personal-landing,
body.high-contrast.education-landing { background: #fff; color: #000; }
body.high-contrast.personal-landing .header,
body.high-contrast.education-landing .header { background: #000; }
body.high-contrast.personal-landing .header nav a,
body.high-contrast.education-landing .header nav a { color: #fff; }
body.high-contrast.personal-landing .app-welcome,
body.high-contrast.personal-landing .workspace-demo,
body.high-contrast.personal-landing .personal-card,
body.high-contrast.education-landing .app-welcome,
body.high-contrast.education-landing .workspace-demo,
body.high-contrast.education-landing .education-preview-card { border-color: #000; }
body.high-contrast.personal-landing h1,
body.high-contrast.personal-landing h2,
body.high-contrast.personal-landing h3,
body.high-contrast.education-landing h1,
body.high-contrast.education-landing h2,
body.high-contrast.education-landing h3 { color: #000; }
body.high-contrast.personal-landing a:not(.button),
body.high-contrast.education-landing a:not(.button) { color: #003c9e; }
body.high-contrast.personal-landing .button,
body.high-contrast.education-landing .button { background: #000; color: #fff; }
body.high-contrast .coach-chat { border: 2px solid #000; background: #fff; }
body.high-contrast .coach-message,
body.high-contrast .coach-message-learner { border: 1px solid #000; background: #fff; color: #000; }
body.high-contrast .coach-message-label { color: #000; }
body.high-contrast .coach-prompt { border: 2px solid #000; background: #fff; color: #000; }
body.high-contrast .personal-assignment-card,
body.high-contrast .assignment-preview-card,
body.high-contrast .assignment-preview-chat,
body.high-contrast .assignment-instructions { border: 2px solid #000; background: #fff; color: #000; }
body.high-contrast .assignment-coach-card .dashboard-section-heading p:last-child,
body.high-contrast .assignment-chat-note { color: #000; }
body.high-contrast .writing-review-results { border-color: #000; }
body.high-contrast .writing-review-summary,
body.high-contrast .writing-issue,
body.high-contrast .writing-issue-suggestion,
body.high-contrast .writing-review-placeholder { border: 2px solid #000; background: #fff; color: #000; }
body.high-contrast .writing-review-stale-note { border: 2px solid #000; background: #fff; color: #000; }
body.high-contrast .eyebrow,
body.high-contrast .writing-review-summary .eyebrow { color: #000; }
body.high-contrast .draft-editor { border: 2px solid #000; background: #fff; }
body.high-contrast .draft-editor textarea#writing-draft { background: transparent; color: #000; }
body.high-contrast .draft-highlight,
body.high-contrast .draft-highlight.priority-high,
body.high-contrast .draft-highlight.priority-medium,
body.high-contrast .draft-highlight.priority-low { background: #ffe066; text-decoration-color: #000; }
body.high-contrast .draft-popover { border: 2px solid #000; background: #fff; color: #000; box-shadow: none; }
body.high-contrast .draft-popover-excerpt q { color: #000; }
body.high-contrast .draft-popover-suggestion { border: 2px solid #000; background: #fff; }
body.high-contrast .writing-issue-excerpt q { color: #000; }
body.high-contrast .writing-issue-priority,
body.high-contrast .writing-issue-priority.priority-high,
body.high-contrast .writing-issue-priority.priority-medium,
body.high-contrast .writing-issue-priority.priority-low { border: 1px solid #000; background: #fff; color: #000; }
body.high-contrast .writing-issue-explanation,
body.high-contrast .writing-review-disclaimer,
body.high-contrast .writing-review-issues-heading span,
body.high-contrast .draft-save-status,
body.high-contrast .assignment-question-panel > p { color: #000; }

.calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.calendar-heading h1 { margin-bottom: 8px; }
.calendar-heading p { margin: 0; }
.calendar-navigation, .message-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { font: 700 .84rem Arial, sans-serif; }
.calendar-weekdays > div { padding: 8px; text-align: center; }
.calendar-day { min-width: 0; min-height: 120px; padding: 8px; border: 1px solid #d4dbe0; background: #fff; }
.calendar-day h2 { display: inline-grid; place-items: center; width: 30px; height: 30px; margin: 0 0 6px; border-radius: 50%; font: 700 .9rem Arial, sans-serif; }
.calendar-day-outside { background: #f4f7f5; color: #84928c; }
.calendar-day-today h2 { background: #176b9a; color: #fff; }
.calendar-event { display: block; margin: 4px 0; padding: 5px 7px; border-left: 3px solid #176b9a; border-radius: 3px; background: #eaf2f7; color: #2d3b45; font-size: .78rem; overflow-wrap: anywhere; }
.calendar-event strong, .calendar-event span { display: block; }
.calendar-event span { color: #61726b; font-size: .72rem; }
.message-compose { margin: 16px 0; }
.message-thread { display: flex; flex-direction: column; gap: 10px; max-height: 520px; margin: 18px 0; overflow-y: auto; }
.message-bubble { position: relative; max-width: min(85%, 680px); padding: 12px 16px; border: 1px solid #d4dbe0; border-radius: 6px; background: #f5f6f7; }
.message-bubble.message-own { align-self: flex-end; border-color: #9bbdd0; background: #eaf2f7; }
.message-bubble p { margin: 6px 0; }
.message-bubble small { color: #61726b; }
.message-item h3 { margin: 0; }
.message-author { display: flex; align-items: center; gap: 10px; color: #61726b; font-size: .9rem; }
.message-author small { display: block; margin-top: 3px; }
.notification-item { align-items: center; }
.notification-unread { border-left: 4px solid #176b9a; }
.notification-item > div { min-width: 0; overflow-wrap: anywhere; }
.profile-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; vertical-align: middle; }
.profile-avatar-large { width: 88px; height: 88px; margin-bottom: 14px; }

.cookie-consent {
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: flex;
    max-width: 920px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding: 16px 18px;
    border: 1px solid #aeb8bf;
    border-radius: 8px;
    background: #fff;
    color: #2d3b45;
    box-shadow: 0 8px 32px rgba(25, 39, 48, .2);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent > p { margin: 0; font-size: .9rem; }
.cookie-consent-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; }
.cookie-consent-actions button { margin: 0; font-size: .88rem; }
.mobile-sticky-cta { display: none; }
.policy-page { max-width: 860px; margin-right: auto; margin-left: auto; }
.policy-page h1 { margin-bottom: 20px; }
.policy-page h2 { margin: 28px 0 8px; font-size: 1.2rem; }
.policy-page p { line-height: 1.65; }
.thank-you-card { max-width: 720px; margin-right: auto; margin-left: auto; padding: clamp(26px, 5vw, 48px); }
.thank-you-card > p:not(.app-kicker) { margin: 0 0 22px; }
body.has-cookie-banner .mobile-sticky-cta { display: none; }
body.high-contrast .cookie-consent { border: 2px solid #000; background: #fff; color: #000; box-shadow: none; }

.english-diagnostic { max-width: 900px; margin: 0 auto; }
.english-diagnostic-form { display: grid; gap: 16px; }
.diagnostic-question { min-width: 0; margin: 0; }
.diagnostic-question legend { padding: 0 5px; font-size: 1.1rem; font-weight: 700; }
.diagnostic-choice { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 3px; font-weight: 400; cursor: pointer; }
.diagnostic-choice:hover { background: #f2f6f8; }
.diagnostic-choice input[type="radio"] { display: inline-block; width: auto; margin: 5px 0 0; flex: 0 0 auto; }
.diagnostic-passage { margin: 0; border-left: 4px solid #176b9a; }
.diagnostic-passage p { margin-bottom: 0; }
body.high-contrast .diagnostic-passage { border-left-color: #000; }

@media (max-width: 700px) {
    .calendar-heading { display: block; }
    .calendar-navigation { margin-top: 16px; }
    .calendar-card { padding: 8px; overflow-x: auto; }
    .calendar-grid { min-width: 650px; }
    .calendar-day { min-height: 100px; }
    .english-diagnostic .card { padding: 18px; }
}

@media (max-width: 700px) {
    body.personal-landing,
    body.education-landing { padding-bottom: 82px; }
    body.personal-landing .header,
    body.education-landing .header { align-items: flex-start; flex-direction: column; gap: 8px; }
    body.personal-landing .header nav,
    body.education-landing .header nav { width: 100%; gap: 4px; }
    body.personal-landing .header nav a,
    body.education-landing .header nav a { padding: 8px; }
    .personal-welcome,
    .app-welcome { align-items: flex-start; flex-direction: column; padding: 22px; gap: 18px; }
    .mobile-sticky-cta {
        position: fixed;
        z-index: 900;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        border-top: 1px solid #d4dbe0;
        background: rgba(255, 255, 255, .97);
    }
    .mobile-sticky-cta .button { display: block; width: 100%; }
    .cookie-consent {
        right: 8px;
        bottom: 8px;
        left: 8px;
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }
    .cookie-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .cookie-consent-actions button { padding: 9px 8px; }
    body.personal-landing .footer,
    body.education-landing .footer { margin-bottom: 8px; }
}


/* Shared product UI: calmer surfaces, compact navigation, and aligned actions. */
body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f5f7f9;
    color: #263746;
}
.header {
    min-height: 68px;
    padding: 10px clamp(18px, 4vw, 56px);
    background: #fff;
    border-bottom: 1px solid #e1e7ec;
}
.logo { color: #183b56; font-size: 21px; letter-spacing: -.025em; }
.header nav { align-items: center; justify-content: flex-end; gap: 4px; }
.header nav a,
.nav-menu > summary {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #405363;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
}
.header nav a:hover,
.header nav a:focus-visible,
.nav-menu > summary:hover,
.nav-menu > summary:focus-visible { background: #f0f4f7; color: #173c58; }
.nav-menu { position: relative; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after { content: "▾"; margin-left: 7px; color: #718291; font-size: .72rem; }
.nav-menu-panel,
.class-tools-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    right: 0;
    display: grid;
    min-width: 210px;
    gap: 3px;
    padding: 7px;
    border: 1px solid #dce4ea;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(22, 42, 58, .13);
}
.header nav .nav-menu-panel a,
.class-tools-panel a { justify-content: flex-start; color: #33495a; }
.header nav .nav-menu-panel a:hover,
.class-tools-panel a:hover { background: #f2f6f8; }
.container { width: min(94%, 1160px); margin: 30px auto 48px; }
.card,
.page-header,
.workspace-demo,
.app-welcome,
.personal-welcome {
    border: 1px solid #e0e7ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(23, 43, 58, .035);
}
.card { padding: 24px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 28px; }
.page-header > div { min-width: 0; }
.page-header > div > p:last-child { margin-bottom: 0; }
.eyebrow { color: #597184; font-size: .72rem; letter-spacing: .08em; }
h1, h2, h3 { color: #243b4d; letter-spacing: -.018em; }
h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.08rem; }
button,
.button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 7px;
    background: #176b9a;
    color: #fff;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
}
button:hover, .button:hover { background: #12577e; color: #fff; }
button.secondary, .button.secondary {
    border: 1px solid #cbd6de;
    background: #fff;
    color: #334b5d;
}
button.secondary:hover, .button.secondary:hover { background: #f3f6f8; }
.dashboard-actions,
.class-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.dashboard-section-heading,
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.section-heading { margin: 30px 0 14px; }
.section-heading h2,
.section-heading .eyebrow { margin-bottom: 4px; }
.section-heading .muted { white-space: nowrap; }
.dashboard-classes-shortcut > p { margin: 4px 0 16px; }
.grid { align-items: stretch; }
.grid > .card { display: flex; flex-direction: column; align-items: flex-start; }
.grid > .card .button { margin-top: auto; }
.class-page-heading { align-items: flex-start; }
.class-page-heading h1 { margin-bottom: 8px; }
.class-page-heading .class-actions { flex: 0 0 auto; }
.class-tools { position: relative; }
.class-tools > summary {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid #cbd6de;
    border-radius: 7px;
    background: #fff;
    color: #334b5d;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.class-tools > summary::-webkit-details-marker { display: none; }
.class-tools-panel { min-width: 245px; }
.class-tools-panel p { margin: 6px 9px; color: #405363; }
.class-content-section { margin-top: 26px; }
.class-assignment-list { overflow: hidden; border: 1px solid #e0e7ec; border-radius: 10px; background: #fff; }
.class-assignment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 22px;
}
.class-assignment-item + .class-assignment-item { border-top: 1px solid #e8edf1; }
.class-assignment-copy { min-width: 0; }
.class-assignment-copy h3 { margin: 0 0 5px; }
.class-assignment-copy p { margin: 5px 0 0; }
.class-assignment-item > .button { flex: 0 0 auto; }
.class-empty-state { margin-bottom: 0; color: #536777; }
.class-empty-state p { margin: 0; }
.status-badge { padding: 4px 9px; border-radius: 5px; font-size: .78rem; }
.footer { margin-top: 48px; padding: 22px 16px; border-top-color: #e0e7ec; color: #617381; }
.edition-disclaimer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 15px max(3%, calc((100% - 1160px) / 2));
    border-bottom: 1px solid #d8dfdf;
    background: #f3f5f4;
    color: #33434b;
}
.edition-disclaimer p { margin: 0; font-size: .88rem; line-height: 1.55; }
.edition-disclaimer strong { color: #25313a; }
.edition-disclaimer a { flex: 0 0 auto; color: #8b2e3d; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.edition-disclaimer a:hover { color: #661d29; }

@media (max-width: 820px) {
    .header { align-items: flex-start; flex-direction: column; gap: 6px; }
    .header nav { width: 100%; justify-content: flex-start; }
    .header nav a,
    .nav-menu > summary { min-height: 38px; padding: 8px 9px; }
    .class-page-heading { flex-direction: column; }
    .class-page-heading .class-actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 600px) {
    .edition-disclaimer { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px 4%; }
    .edition-disclaimer p { font-size: .8rem; }
    .container { width: min(94%, 540px); margin-top: 18px; }
    .card { padding: 18px; }
    .page-header { align-items: flex-start; flex-direction: column; padding: 20px; gap: 14px; }
    .page-header > .button,
    .page-header > .class-actions { width: 100%; }
    .class-actions > .button { flex: 1 1 auto; }
    .class-assignment-item { align-items: flex-start; flex-direction: column; gap: 12px; padding: 17px; }
    .class-assignment-item > .button { width: 100%; }
    .dashboard-section-heading,
    .section-heading { align-items: flex-start; }
    .dashboard-actions { width: 100%; justify-content: flex-start; }
    .nav-menu-panel { right: auto; left: 0; }
}

/* Keep server-rendered feature pages visually continuous with the Angular shell. */
body {
    background: #f6f5f3;
    color: #272932;
}
body:not(.high-contrast) a:not(.button) { color: #a92d40; }
.header {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: 78px;
    padding: 0 clamp(22px, 6.2vw, 104px);
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #ece9e8;
    backdrop-filter: blur(18px);
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #301014;
    font-size: 1.13rem;
    font-weight: 700;
    letter-spacing: -.035em;
}
body:not(.high-contrast) a.logo { color: #301014; }
.brand-mark {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: #da3e52;
    color: #fff;
    font-size: .83rem;
    font-weight: 800;
    letter-spacing: -.04em;
}
.brand-edition {
    margin-left: 3px;
    padding: 5px 8px;
    border-radius: 99px;
    background: #f7edef;
    color: #8e3543;
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .12em;
}
.header nav { align-items: center; gap: 4px; }
.header nav a,
.nav-menu > summary {
    min-height: 40px;
    padding: 8px 11px;
    border-radius: 7px;
    color: #666b75;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 620;
}
.header nav a:hover,
.header nav a:focus-visible,
.nav-menu > summary:hover,
.nav-menu > summary:focus-visible {
    background: #fbf2f3;
    color: #a92d40;
}
.header nav .nav-menu-panel a { color: #5f616a; }
.header nav .nav-menu-panel a:hover { background: #fbf2f3; color: #a53345; }
.notification-count { background: #da3e52; }
.container { color: #272932; }
h1, h2, h3 { color: #301014; }
button,
.button {
    border-radius: 7px;
    background: #da3e52;
    color: #fff;
}
button:hover,
.button:hover { background: #bd3044; color: #fff; }
button.secondary,
.button.secondary {
    border-color: #deddda;
    background: #fff;
    color: #272932;
}
button.secondary:hover,
.button.secondary:hover { background: #f6f5f3; color: #272932; }
.card,
.page-header,
.table-wrap {
    border-color: #e8e4e2;
    border-radius: 10px;
}
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 24px clamp(22px, 6.2vw, 104px);
    border-top-color: #ece9e8;
    background: #fff;
    color: #828a95;
    text-align: left;
}
.footer p { margin: 0; }
.footer a { color: #828a95; }
body:not(.high-contrast) .footer a { color: #828a95; }
.footer a:hover { color: #da3e52; }
body.high-contrast .header,
body.high-contrast .footer { background: #000; color: #fff; border-color: #fff; }
body.high-contrast a.logo,
body.high-contrast .brand-edition { color: #fff; }
body.high-contrast .brand-edition { border: 1px solid #fff; background: #000; }
body.high-contrast .header nav a,
body.high-contrast .nav-menu > summary,
body.high-contrast .footer a { color: #fff; }
body.high-contrast .header nav a:hover,
body.high-contrast .header nav a:focus-visible,
body.high-contrast .nav-menu > summary:hover,
body.high-contrast .nav-menu > summary:focus-visible { background: #333; color: #fff; }
body.high-contrast button,
body.high-contrast .button { border: 1px solid #fff; background: #000; color: #fff; }

@media (max-width: 820px) {
    .header { align-items: center; flex-direction: row; gap: 12px; }
    .header nav { width: auto; justify-content: flex-end; }
}
@media (max-width: 600px) {
    .header { align-items: flex-start; flex-direction: column; gap: 8px; padding: 12px 20px; }
    .header nav { width: 100%; justify-content: flex-start; }
    .footer { align-items: flex-start; flex-direction: column; padding: 22px 20px; }
}