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

:root {
    --ink: #142d3c;
    --ink-soft: #526978;
    --muted: #768994;
    --line: #dce5e9;
    --line-strong: #c8d6dc;
    --paper: #ffffff;
    --canvas: #f2f6f7;
    --teal: #087c78;
    --teal-dark: #05615f;
    --teal-soft: #e5f5f2;
    --navy: #173648;
    --navy-light: #234c5f;
    --amber: #fff5d9;
    --amber-line: #efd78e;
    --red: #a63d3d;
    --red-soft: #fff0ef;
    --green: #176b51;
    --green-soft: #eaf7f1;
    --shadow: 0 8px 26px rgba(22, 52, 68, .055);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 13px; line-height: 1.5; }
button, input { font: inherit; }
a { color: inherit; }
code { padding: 1px 5px; border-radius: 5px; background: #edf2f4; color: #365360; font-size: .92em; }

.topbar { height: 66px; padding: 0 30px; display: flex; align-items: center; gap: 26px; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; min-width: 250px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 37px; height: 37px; display: grid; place-items: center; color: var(--teal); border: 1px solid #cde4e1; border-radius: 11px; background: var(--teal-soft); }
.brand-mark svg { width: 27px; height: 27px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.2; }
.brand-copy strong { font-size: 13px; letter-spacing: -.02em; }
.brand-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.topbar-center { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.topbar-dot, .secure-dot, .status-pip { width: 7px; height: 7px; border-radius: 50%; background: #36a984; box-shadow: 0 0 0 3px #e8f6f1; }
.secure-label { margin-left: auto; display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 11px; }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.user-avatar, .summary-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--teal-dark); background: #dff1ee; font-weight: 700; }
.user-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; }
.topbar-user form { margin-left: 10px; }
.logout-link, .text-link { padding: 0; border: 0; background: none; color: var(--teal-dark); text-decoration: none; font-size: 11px; font-weight: 600; cursor: pointer; }
.logout-link:hover, .text-link:hover { text-decoration: underline; }
.page-shell { width: min(100% - 52px, 1720px); margin: 0 auto; min-height: calc(100vh - 112px); padding: 30px 0 42px; }
.site-footer { min-height: 46px; padding: 12px 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: #82939b; background: #edf2f4; border-top: 1px solid var(--line); font-size: 10px; }

.eyebrow, .card-kicker { margin: 0; color: var(--teal); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: 25px; line-height: 1.2; letter-spacing: -.045em; }
h2 { margin-bottom: 5px; font-size: 15px; line-height: 1.3; letter-spacing: -.025em; }
h3 { margin-bottom: 6px; font-size: 14px; }
.muted { color: var(--muted); font-size: 11px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.button { min-height: 36px; padding: 0 14px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 7px; font-size: 11px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-primary { color: #fff; background: var(--teal); border-color: var(--teal); box-shadow: 0 3px 8px rgba(8, 124, 120, .14); }
.button-primary:hover:not(:disabled) { background: var(--teal-dark); border-color: var(--teal-dark); }
.button-outline { color: var(--ink); background: #fff; border-color: var(--line-strong); }
.button-outline:hover:not(:disabled), .button-quiet:hover:not(:disabled) { background: #f6fafb; border-color: #a9c4ca; }
.button-quiet { color: var(--teal-dark); background: var(--teal-soft); border-color: #cde8e3; }
.button-wide { width: 100%; min-height: 43px; margin-top: 7px; justify-content: space-between; padding: 0 16px; font-size: 12px; }
.button-search { min-height: 32px; padding: 0 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.flash { margin-bottom: 18px; padding: 12px 15px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid; border-radius: 9px; font-size: 11px; }
.flash-symbol { flex: 0 0 auto; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 700; }
.flash-success { color: var(--green); background: var(--green-soft); border-color: #cce8dc; }
.flash-success .flash-symbol { color: #fff; background: var(--green); }
.flash-error { color: #803e3e; background: var(--red-soft); border-color: #f0c9c6; }
.flash-error .flash-symbol { color: #fff; background: var(--red); }
.flash strong { display: block; margin-bottom: 2px; }
.flash ul { margin: 3px 0 0; padding-left: 16px; }

/* Login */
.login-layout { min-height: 530px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.login-intro { position: relative; min-height: 530px; padding: clamp(35px, 6vw, 74px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; color: #fff; background: linear-gradient(145deg, var(--navy) 0%, #1b4253 65%, #17635f 140%); }
.login-intro::after { content: ""; position: absolute; width: 390px; height: 390px; right: -192px; bottom: -230px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.02); }
.login-intro .eyebrow { color: #8bd3c8; }
.login-intro h1 { max-width: 540px; margin: 17px 0 16px; font-size: clamp(31px, 4vw, 46px); letter-spacing: -.055em; }
.intro-copy { max-width: 495px; margin-bottom: 32px; color: #c6d7de; font-size: 13px; line-height: 1.8; }
.intro-note { max-width: 465px; padding: 14px 15px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.07); }
.note-icon { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: #99ddd1; font-size: 12px; font-weight: 700; }
.intro-note div { display: flex; flex-direction: column; gap: 4px; }
.intro-note strong { font-size: 11px; }
.intro-note span:last-child { color: #bbced6; font-size: 10px; line-height: 1.55; }
.intro-bottom { position: absolute; bottom: 27px; display: flex; align-items: center; gap: 10px; color: #b1c9d2; font-size: 10px; }
.login-card { width: min(100%, 420px); margin: auto; padding: 44px 45px; }
.card-kicker { margin-bottom: 11px; }
.login-card h2 { margin-bottom: 7px; font-size: 23px; letter-spacing: -.04em; }
.login-card > .muted { margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; }
.login-form label { margin: 0 0 7px; color: #415866; font-size: 11px; font-weight: 600; }
.login-form input { height: 41px; margin-bottom: 18px; padding: 0 12px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; }
.login-form input:focus, .search-form input:focus { border-color: #49a9a1; box-shadow: 0 0 0 3px rgba(8,124,120,.1); }
.connection-note { margin-top: 19px; padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #e5e9e9; border-radius: 8px; color: #63777f; background: #f7f9f9; font-size: 9px; line-height: 1.55; }
.connection-note strong { color: #465c64; font-size: 10px; }
.connection-pending { background: #fff8e7; border-color: #eee1b3; }
.connection-pending strong { color: #795a12; }
.login-footnote { margin: 16px 0 0; color: #85949b; font-size: 9px; text-align: center; }

/* Workspace */
.workspace-heading { margin-bottom: 21px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.workspace-heading .eyebrow { margin-bottom: 7px; }
.workspace-heading h1 { font-size: 24px; }
.workspace-heading .muted { margin-bottom: 0; }
.heading-actions { display: flex; align-items: center; gap: 8px; }
.inline-alert { margin-bottom: 15px; padding: 11px 13px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #eddca6; border-radius: 9px; color: #735e24; background: #fff9e9; font-size: 10px; }
.inline-alert > div { display: flex; flex-direction: column; gap: 2px; }
.alert-icon { width: 17px; height: 17px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #c39126; font-size: 10px; font-weight: 700; }
.workspace-layout { display: grid; grid-template-columns: 252px minmax(0, 1fr) 192px; align-items: start; gap: 15px; }
.assignment-panel { position: sticky; top: 15px; overflow: hidden; }
.panel-heading { padding: 17px 16px 9px; display: flex; align-items: center; justify-content: space-between; }
.panel-heading .eyebrow { margin-bottom: 4px; }
.panel-heading h2 { margin-bottom: 0; }
.count-pill { min-width: 27px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 20px; color: var(--teal-dark); background: var(--teal-soft); font-size: 10px; font-weight: 700; }
.panel-help { margin: 0; padding: 0 16px 13px; color: var(--muted); font-size: 9px; }
.assignment-list { max-height: 560px; overflow-y: auto; border-top: 1px solid #edf1f2; }
.assignment-item { position: relative; min-height: 57px; padding: 10px 12px; display: grid; grid-template-columns: 55px minmax(0,1fr) 12px; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; border-bottom: 1px solid #edf1f2; transition: background .13s ease; }
.assignment-item:hover { background: #f5faf9; }
.assignment-item.is-active { background: #eaf7f4; box-shadow: inset 3px 0 var(--teal); }
.assignment-class { max-width: 55px; padding: 5px 5px; overflow: hidden; border: 1px solid #dbe6e9; border-radius: 5px; color: #425c69; background: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 700; }
.assignment-item.is-active .assignment-class { color: var(--teal-dark); border-color: #c3e5de; background: #f7fffc; }
.assignment-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.assignment-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.assignment-meta small { color: var(--muted); font-size: 8px; }
.assignment-arrow { color: #9babb2; font-size: 18px; }
.assignment-item.is-active .assignment-arrow { color: var(--teal); }
.empty-assignment { padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--muted); text-align: center; font-size: 9px; }
.empty-assignment strong { color: var(--ink-soft); font-size: 11px; }
.empty-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #91a7b0; background: #eef3f4; font-size: 18px; }
.panel-footnote { padding: 12px 14px; display: flex; align-items: center; gap: 8px; color: #80919a; background: #fbfcfc; font-size: 8px; }
.panel-footnote .status-pip { width: 6px; height: 6px; box-shadow: 0 0 0 2px #e8f6f1; }

.grade-area { min-width: 0; }
.context-strip { min-height: 74px; padding: 13px 16px; margin-bottom: 17px; display: flex; align-items: center; gap: 20px; }
.context-main { min-width: 145px; display: flex; flex-direction: column; gap: 2px; }
.context-label { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.context-main strong { color: var(--ink); font-size: 13px; }
.context-main > span:last-child { color: var(--teal-dark); font-size: 10px; font-weight: 600; }
.context-divider { width: 1px; height: 40px; background: var(--line); }
.context-teacher strong { font-size: 11px; }
.context-teacher > span:last-child { color: var(--muted); font-size: 9px; }
.context-term { margin-left: auto; padding: 6px 9px; border-radius: 5px; color: #56717d; background: #f3f7f8; white-space: nowrap; font-size: 9px; }
.context-term span { padding: 0 2px; color: #a3b1b7; }
.grade-toolbar { margin: 0 0 11px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.grade-toolbar h2 { margin-bottom: 3px; font-size: 15px; }
.grade-toolbar p { margin: 0; font-size: 9px; }
.subtle-count { margin-left: 7px; padding: 3px 7px; border-radius: 14px; color: #58727d; background: #e9f0f2; font-size: 9px; font-weight: 600; vertical-align: 2px; }
.search-form { min-width: 250px; height: 34px; padding-left: 10px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; }
.search-icon { color: #8397a0; font-size: 18px; line-height: 1; }
.search-form input { width: 100%; min-width: 70px; height: 30px; padding: 0; border: 1px solid transparent; outline: none; color: var(--ink); background: transparent; font-size: 10px; }
.search-form .button { margin-right: 3px; }
.table-wrap { max-width: 100%; overflow: auto; border-radius: 9px; }
.grade-table { width: 100%; min-width: 950px; border-collapse: separate; border-spacing: 0; font-size: 9px; }
.grade-table th { position: sticky; top: 0; z-index: 2; height: 37px; padding: 0 7px; color: #405967; background: #f1f5f6; border-bottom: 1px solid var(--line-strong); border-right: 1px solid #e4eaec; text-align: center; white-space: nowrap; font-size: 8px; font-weight: 700; }
.grade-table th:first-child { text-align: left; }
.grade-table td { height: 38px; padding: 4px 7px; color: #38515e; background: #fff; border-bottom: 1px solid #e8edef; border-right: 1px solid #eff2f3; white-space: nowrap; }
.grade-table tbody tr:nth-child(even) td { background: #fbfcfc; }
.grade-table tbody tr:hover td { background: #f5faf9; }
.grade-table tbody tr:last-child td { border-bottom: 0; }
.grade-table .sticky-col { position: sticky; z-index: 1; background: #fff; }
.grade-table tbody tr:nth-child(even) .sticky-col { background: #fbfcfc; }
.grade-table tbody tr:hover .sticky-col { background: #f5faf9; }
.grade-table .sticky-no { left: 0; min-width: 91px; width: 91px; }
.grade-table .sticky-name { left: 91px; min-width: 180px; width: 180px; box-shadow: 4px 0 7px rgba(18,43,54,.035); }
.grade-table thead .sticky-col { z-index: 4; background: #edf3f4; }
.student-id { color: #426170; font-variant-numeric: tabular-nums; font-weight: 600; }
.student-name { display: inline-block; max-width: 165px; overflow: hidden; color: #233f4d; text-overflow: ellipsis; vertical-align: middle; font-size: 9px; font-weight: 600; }
.class-tag { padding: 4px 6px; border-radius: 4px; color: #56717b; background: #eef3f4; font-size: 8px; }
.score-heading { min-width: 52px; }
.score-cell { padding: 3px !important; text-align: center; }
.score-remedial { background: #fffbec !important; }
.score-input { width: 44px; height: 27px; padding: 0 3px; border: 1px solid transparent; border-radius: 5px; color: #304d5a; background: transparent; text-align: center; font-size: 10px; font-variant-numeric: tabular-nums; outline: none; }
.score-input:hover { border-color: #d7e2e5; background: #fff; }
.score-input:focus { border-color: #37a29a; background: #fff; box-shadow: 0 0 0 2px rgba(8,124,120,.1); }
.score-cell.is-changed { background: var(--amber) !important; box-shadow: inset 0 0 0 1px var(--amber-line); }
.score-cell.is-changed .score-input { color: #755b18; font-weight: 700; }
.score-input::-webkit-inner-spin-button, .score-input::-webkit-outer-spin-button { margin: 0; }
.score-input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.table-actions { min-height: 52px; padding: 9px 2px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.change-hint { color: #87969d; font-size: 9px; }
.pagination-bar { padding: 0 2px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.pagination-links { display: flex; align-items: center; gap: 12px; }
.pagination-links a { color: var(--teal-dark); text-decoration: none; font-weight: 600; }
.pagination-links a:hover { text-decoration: underline; }
.empty-panel { min-height: 240px; padding: 40px 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-panel h2, .empty-panel h3 { margin: 13px 0 5px; }
.empty-panel p { max-width: 370px; margin: 0; color: var(--muted); font-size: 10px; }

.import-panel { margin-top: 4px; padding: 17px; }
.import-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.import-heading .eyebrow { margin-bottom: 4px; }
.import-heading h2 { margin-bottom: 3px; font-size: 13px; }
.import-heading p { margin-bottom: 0; font-size: 9px; }
.import-heading .text-link { margin-top: 5px; white-space: nowrap; }
.upload-form { margin-top: 14px; padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px dashed #b8ccd2; border-radius: 8px; background: #fbfdfd; }
.file-picker { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.file-picker .file-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cbe4df; border-radius: 7px; color: var(--teal); background: var(--teal-soft); font-size: 16px; }
.file-picker span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-picker strong { overflow: hidden; color: #385460; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.file-picker small { color: var(--muted); font-size: 8px; }
.file-picker input { width: 180px; max-width: 42%; color: #617780; font-size: 9px; }
.file-picker input::file-selector-button { padding: 6px 8px; margin-right: 5px; border: 1px solid #dae4e7; border-radius: 5px; color: #48616b; background: #fff; cursor: pointer; font-size: 8px; }
.preview-head { margin-top: 17px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eaf0f1; }
.preview-head > div { display: flex; flex-direction: column; gap: 3px; }
.preview-head strong { font-size: 10px; }
.preview-head span { color: var(--muted); font-size: 9px; }
.field-selector { margin: 13px 0; padding: 10px; display: flex; flex-wrap: wrap; gap: 7px; border: 1px solid #e3ebed; border-radius: 8px; }
.field-selector legend { padding: 0 5px; color: #506975; font-size: 9px; font-weight: 600; }
.check-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 25px; padding: 3px 7px; border: 1px solid #dce6e9; border-radius: 6px; color: #46606b; background: #fff; cursor: pointer; font-size: 8px; }
.check-chip:has(input:checked) { color: var(--teal-dark); border-color: #b6dfd7; background: var(--teal-soft); }
.check-chip input { width: 12px; height: 12px; accent-color: var(--teal); }
.preview-table-wrap { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.preview-table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; font-size: 8px; }
.preview-table th { position: sticky; top: 0; z-index: 1; padding: 8px 7px; color: #48606b; background: #f0f5f6; border-bottom: 1px solid var(--line-strong); text-align: left; white-space: nowrap; }
.preview-table td { padding: 7px; border-bottom: 1px solid #edf1f2; white-space: nowrap; }
.preview-table tr:last-child td { border-bottom: 0; }
.preview-table .row-invalid td { background: #fff7f6; }
.status-badge { display: inline-block; padding: 3px 6px; border-radius: 10px; font-size: 7px; font-weight: 700; }
.status-good { color: var(--green); background: var(--green-soft); }
.status-warn { color: #795d18; background: #fff6df; }
.status-bad { color: #913e3a; background: #fde9e7; }
.row-message { max-width: 180px; display: block; margin-top: 3px; color: #98635f; white-space: normal; }
.import-actions { padding-bottom: 0; }
.import-actions .change-hint { max-width: 65%; }

/* Compact teacher summary */
.summary-panel { display: flex; flex-direction: column; gap: 12px; }
.summary-card { padding: 15px 14px; display: flex; flex-direction: column; align-items: flex-start; }
.summary-card > .eyebrow { margin-bottom: 15px; }
.summary-avatar { width: 40px; height: 40px; margin-bottom: 10px; font-size: 15px; }
.summary-card > strong { max-width: 100%; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.summary-caption { margin-top: 3px; color: var(--muted); font-size: 8px; }
.summary-separator { width: 100%; height: 1px; margin: 13px 0; background: #e9eff1; }
.summary-subject { margin-top: 4px; color: #415c68 !important; white-space: normal !important; line-height: 1.5; }
.summary-class { margin-top: 3px; padding: 4px 7px; border-radius: 5px; color: var(--teal-dark) !important; background: var(--teal-soft); font-size: 9px !important; }
.safety-card { padding: 12px 11px; display: flex; align-items: flex-start; gap: 8px; border: 1px solid #d5e9e4; border-radius: 9px; background: #eef8f5; }
.safety-icon { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--teal); font-size: 9px; font-weight: 700; }
.safety-card div { display: flex; flex-direction: column; gap: 4px; }
.safety-card strong { color: #27675f; font-size: 9px; }
.safety-card span { color: #68857f; font-size: 8px; line-height: 1.55; }

@media (max-width: 1220px) {
    .workspace-layout { grid-template-columns: 230px minmax(0, 1fr); }
    .summary-panel { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr); }
    .summary-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; column-gap: 10px; }
    .summary-card > .eyebrow { grid-column: 1 / -1; margin-bottom: 6px; }
    .summary-avatar { grid-row: span 3; margin: 0; }
    .summary-separator { display: none; }
    .summary-caption:nth-last-of-type(2), .summary-caption:nth-last-of-type(1) { display: none; }
    .safety-card { align-self: stretch; }
}
@media (max-width: 860px) {
    .topbar { height: 58px; padding: 0 16px; }
    .brand { min-width: 0; }
    .topbar-center { display: none; }
    .user-name { display: none; }
    .page-shell { width: min(100% - 28px, 700px); padding-top: 22px; }
    .workspace-layout { grid-template-columns: minmax(0, 1fr); }
    .assignment-panel { position: static; }
    .assignment-list { max-height: 215px; }
    .summary-panel { grid-column: auto; }
    .context-strip { flex-wrap: wrap; }
    .context-term { margin-left: 0; }
    .login-layout { grid-template-columns: minmax(0, 1fr); }
    .login-intro { min-height: 330px; padding: 35px 28px 65px; }
    .login-intro h1 { max-width: 520px; font-size: 34px; }
    .login-intro::after { width: 250px; height: 250px; right: -115px; bottom: -160px; }
    .login-card { width: min(100%, 480px); padding: 34px 28px; }
    .intro-bottom { bottom: 20px; }
}
@media (max-width: 560px) {
    body { font-size: 12px; }
    .page-shell { width: calc(100% - 22px); padding-top: 18px; }
    .brand-copy small { display: none; }
    .brand-mark { width: 33px; height: 33px; }
    .workspace-heading { align-items: flex-start; flex-direction: column; }
    .heading-actions { width: 100%; }
    .heading-actions .button { flex: 1; padding: 0 8px; font-size: 9px; }
    .grade-toolbar { align-items: stretch; flex-direction: column; }
    .search-form { min-width: 0; }
    .context-strip { gap: 11px; padding: 12px; }
    .context-main { min-width: 110px; }
    .context-divider { height: 32px; }
    .context-term { width: 100%; }
    .summary-panel { grid-template-columns: minmax(0, 1fr); }
    .summary-card { min-height: 120px; }
    .upload-form { align-items: stretch; flex-direction: column; }
    .file-picker { flex-wrap: wrap; }
    .file-picker input { width: 100%; max-width: 100%; margin-left: 39px; }
    .import-heading { flex-direction: column; }
    .import-actions { align-items: flex-start; flex-direction: column; }
    .import-actions .change-hint { max-width: none; }
    .table-actions { align-items: flex-start; flex-direction: column; }
    .pagination-bar { align-items: flex-start; flex-direction: column; }
    .site-footer { padding: 12px; flex-direction: column; align-items: flex-start; gap: 3px; }
}
@media print {
    body { background: #fff; }
    .topbar, .site-footer, .assignment-panel, .summary-panel, .heading-actions, .search-form, .table-actions, .pagination-bar, .import-panel, .grade-toolbar .muted { display: none !important; }
    .page-shell { width: 100%; min-height: auto; padding: 0; }
    .workspace-heading { margin: 0 0 12px; }
    .workspace-layout { display: block; }
    .context-strip { margin-bottom: 10px; box-shadow: none; }
    .table-wrap { overflow: visible; border: 0; box-shadow: none; }
    .grade-table { min-width: 0; font-size: 7px; }
    .grade-table th, .grade-table td { position: static !important; padding: 3px; font-size: 7px; }
    .grade-table input { border: 0; color: #000; font-size: 7px; }
}