:root { --panel-sidebar: 248px; }
.panel-body { min-height: 100vh; background: #eef3ef; font-size: 15px; }
.panel-shell { display: grid; min-height: 100vh; grid-template-columns: var(--panel-sidebar) 1fr; }
.panel-sidebar { position: fixed; z-index: 80; inset: 0 auto 0 0; display: flex; width: var(--panel-sidebar); flex-direction: column; padding: 28px 19px 22px; background: var(--green); color: #fff; }
.panel-sidebar-close { position: absolute; top: 29px; right: 13px; display: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.4rem; cursor: pointer; }
.panel-sidebar .brand { padding: 0 8px 26px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.panel-sidebar .brand-mark { width: 44px; height: 44px; flex-basis: 44px; }
.panel-sidebar .brand-mark img { width: 88px; height: 45px; }
.panel-sidebar .brand-copy strong { font-size: .78rem; }
.panel-sidebar nav { display: grid; gap: 6px; margin-top: 28px; }
.panel-sidebar nav a { display: flex; gap: 12px; align-items: center; padding: 12px 13px; border-radius: 10px; color: #bcd0c7; font-weight: 600; }
.panel-sidebar nav a:hover, .panel-sidebar nav a.active { background: rgba(255, 255, 255, .1); color: #fff; }
.panel-sidebar nav a.active { background: var(--coral); }
.panel-sidebar nav .panel-nav-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; color: #fff; }
.panel-help { margin-top: auto; padding: 17px; border-radius: 13px; background: rgba(255, 255, 255, .08); }
.panel-help strong { display: block; font-size: .85rem; }
.panel-help p { margin: 6px 0 11px; color: #aec4ba; font-size: .72rem; line-height: 1.45; }
.panel-help a { color: #fff; font-size: .76rem; font-weight: 800; }
.panel-main { grid-column: 2; min-width: 0; }
.panel-topbar { position: sticky; z-index: 60; top: 0; display: flex; height: 76px; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid #dce4df; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); }
.panel-mobile-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 10px; background: #eff3f0; cursor: pointer; }
.panel-mobile-toggle lord-icon { width: 22px; height: 22px; pointer-events: none; }
.panel-title small { display: block; color: var(--muted); font-size: .68rem; }
.panel-title strong { font-family: "Manrope"; font-size: .98rem; }
.panel-user { position: relative; }
.panel-user-toggle { display: flex; gap: 12px; align-items: center; padding: 6px; margin-right: -6px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.panel-user-toggle:hover, .panel-user-toggle[aria-expanded="true"] { background: #f0f4f1; }
.panel-user-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.panel-user-menu { position: absolute; z-index: 100; top: calc(100% + 8px); right: 0; width: 180px; padding: 7px; border: 1px solid #dce4df; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(12, 35, 26, .14); }
.panel-user-menu[hidden] { display: none; }
.panel-user-menu a { display: flex; gap: 9px; align-items: center; padding: 10px 11px; border-radius: 8px; color: var(--ink); font-size: .78rem; font-weight: 700; }
.panel-user-menu a:hover, .panel-user-menu a:focus-visible { background: var(--coral-soft); color: var(--coral-dark); outline: none; }
.panel-user-menu span { color: var(--coral); font-size: 1rem; }
.panel-user-copy { text-align: right; }
.panel-user-copy strong, .panel-user-copy small { display: block; }
.panel-user-copy strong { font-size: .8rem; }
.panel-user-copy small { color: var(--muted); font-size: .66rem; }
.panel-avatar { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--coral-soft); color: var(--coral-dark); font-size: .75rem; font-weight: 800; }
.panel-content { width: min(calc(100% - 68px), 1120px); margin: 0 auto; padding: 42px 0 70px; }
.panel-heading { display: flex; gap: 24px; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; }
.panel-heading h1 { margin: 0; font-size: clamp(2rem, 3vw, 2.75rem); }
.panel-heading p { margin: 8px 0 0; color: var(--muted); }
.panel-heading .button { min-height: 44px; }
.panel-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.panel-card { padding: 24px; border: 1px solid #dce4df; border-radius: 18px; background: #fff; }
.panel-card h2 { margin-bottom: 18px; font-size: 1.25rem; }
.next-class-card { grid-column: span 7; position: relative; overflow: hidden; min-height: 270px; background: var(--green); color: #fff; }
.next-class-card::after { position: absolute; right: -85px; bottom: -120px; width: 310px; height: 310px; border: 45px solid rgba(255, 255, 255, .06); border-radius: 50%; content: ""; }
.class-label { display: inline-block; padding: 6px 9px; border-radius: 99px; background: rgba(255, 255, 255, .1); color: #bdd0c7; font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.next-class-card h2 { max-width: 470px; margin: 28px 0 10px; font-size: 2rem; }
.class-details { display: flex; flex-wrap: wrap; gap: 17px; color: #bfd1ca; font-size: .8rem; }
.class-actions { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; display: flex; align-items: center; justify-content: space-between; }
.class-actions small { color: #a8beb5; }
.class-actions .button { min-height: 44px; box-shadow: none; }
.progress-card { grid-column: span 5; }
.progress-ring-wrap { display: flex; gap: 26px; align-items: center; margin-top: 22px; }
.progress-ring { display: grid; width: 120px; height: 120px; flex: 0 0 120px; place-items: center; border-radius: 50%; background: conic-gradient(var(--coral) 0 72%, #edf1ee 72% 100%); }
.progress-ring::before { grid-area: 1 / 1; width: 90px; height: 90px; border-radius: 50%; background: #fff; content: ""; }
.progress-ring strong { z-index: 1; grid-area: 1 / 1; font-family: "Manrope"; font-size: 1.55rem; }
.progress-copy strong { display: block; margin-bottom: 5px; font-family: "Manrope"; }
.progress-copy p { margin: 0; color: var(--muted); font-size: .78rem; }
.quick-card { grid-column: span 4; min-height: 165px; }
.quick-icon { display: grid; width: 52px; height: 52px; margin-bottom: 22px; place-items: center; border-radius: 12px; background: var(--coral-soft); color: var(--coral); }
.quick-icon svg { width: 32px; height: 32px; pointer-events: none; }
.quick-card:nth-child(4) .quick-icon { background: var(--blue-soft); color: var(--blue); }
.quick-card:nth-child(5) .quick-icon { background: var(--green-soft); color: var(--green); }
.quick-card h3 { margin-bottom: 5px; font-size: 1rem; }
.quick-card p { margin: 0; color: var(--muted); font-size: .78rem; }
.materials-card { grid-column: span 8; }
.tasks-card { grid-column: span 4; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-head h2 { margin: 0; }
.card-head a { color: var(--coral); font-size: .72rem; font-weight: 800; }
.material-list { display: grid; gap: 9px; }
.material-row { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 11px; border-radius: 11px; background: #f5f7f5; }
.file-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; background: #fff; color: var(--coral); font-size: .7rem; font-weight: 800; }
.material-row strong, .material-row small { display: block; }
.material-row strong { font-size: .8rem; }
.material-row small { color: var(--muted); font-size: .66rem; }
.material-row > a { padding: 7px 10px; border-radius: 7px; background: #fff; font-size: .67rem; font-weight: 800; }
.task-list { display: grid; gap: 11px; }
.task-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.task-item:last-child { border: 0; }
.task-item input { margin-top: 4px; accent-color: var(--coral); }
.task-item label { font-weight: 700; font-size: .78rem; }
.task-item small { display: block; color: var(--muted); font-weight: 400; }
.task-item.done label { color: #9aa59f; text-decoration: line-through; }

.schedule-layout { display: grid; grid-template-columns: 1fr 300px; gap: 20px; }
.calendar-card { padding: 28px; border-radius: 20px; background: #fff; }
.calendar-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-top h2 { margin: 0; font-size: 1.35rem; }
.calendar-arrows { display: flex; gap: 7px; }
.calendar-arrows button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.calendar-arrows .calendar-today { width: auto; padding: 0 12px; font-size: .75rem; font-weight: 700; }
.calendar-hint { margin: 0 0 14px; color: var(--muted); font-size: .78rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.calendar-days { grid-column: 1 / -1; }
.calendar-grid > span { padding: 8px; color: var(--muted); font-size: .65rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.calendar-day { position: relative; display: flex; min-width: 0; min-height: 82px; align-items: flex-start; padding: 9px; border: 1px solid #edf0ee; border-radius: 9px; background: #fff; color: var(--ink); font-size: .8rem; cursor: pointer; }
.calendar-day.muted { color: #b9c2bd; background: #fafbfa; }
.calendar-day.today { border-color: var(--coral); box-shadow: inset 0 0 0 1px var(--coral); font-weight: 800; }
.calendar-day:hover, .calendar-arrows button:hover { background: #f0f4f1; border-color: var(--green); }
.calendar-day.selected { background: var(--green); border-color: var(--green); color: #fff; }
.calendar-day.selected.today { box-shadow: inset 0 0 0 2px var(--coral); }
.calendar-day:focus-visible, .calendar-arrows button:focus-visible { z-index: 1; outline: 2px solid var(--green); outline-offset: 2px; }
.calendar-day.has-class::after, .calendar-day.group-class::after { position: absolute; right: 8px; bottom: 8px; left: 8px; height: 6px; border-radius: 99px; background: var(--coral); content: ""; }
.calendar-day.group-class::after { background: var(--blue); }
.schedule-side { display: grid; align-content: start; gap: 14px; }
.schedule-day-details { display: grid; gap: 14px; }
.schedule-day-heading { margin: 0; padding: 4px 0; font-size: 1.05rem; line-height: 1.5; }
.schedule-events { display: grid; gap: 14px; }
.schedule-empty { margin: 0; padding: 20px; border: 1px dashed #cbd7cf; border-radius: 13px; color: var(--muted); font-size: .85rem; }
.schedule-event { padding: 18px; border-left: 4px solid var(--coral); border-radius: 4px 13px 13px 4px; background: #fff; }
.schedule-event.blue { border-color: var(--blue); }
.schedule-event small, .schedule-event strong { display: block; }
.schedule-event small { color: var(--muted); font-size: .68rem; }
.schedule-event strong { margin: 5px 0; }
.schedule-event span { font-size: .73rem; }

.panel-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 22px; }
.panel-field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.panel-field > span { color: var(--muted); font-size: .75rem; font-weight: 700; }
.panel-field-search { flex: 1 1 220px; }
.panel-search, .panel-select { width: 100%; min-width: 0; min-height: 45px; padding: 0 15px; border: 1px solid #d5ded8; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
.panel-select { padding-right: 46px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%2313271f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; font-weight: 700; cursor: pointer; }
#resource-type, #resource-sort { border-right-width: 1px; padding-right: 36px; background-position: right 12px center; }
.panel-search:focus-visible, .panel-select:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.resource-empty { padding: 24px; border: 1px solid #dce4df; border-radius: 17px; background: #fff; color: var(--muted); }
.resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.resource-card { overflow: hidden; border: 1px solid #dce4df; border-radius: 17px; background: #fff; }
.resource-cover { display: flex; height: 130px; flex-direction: column; align-items: center; justify-content: center; background: var(--coral-soft); color: var(--coral-dark); font-family: "Manrope"; font-weight: 800; }
.resource-card:nth-child(3n + 2) .resource-cover { background: var(--blue-soft); color: #316dc3; }
.resource-card:nth-child(3n + 3) .resource-cover { background: var(--green-soft); color: var(--green); }
.resource-cover span { font-size: 2rem; }
.resource-body { padding: 18px; }
.resource-body small { color: var(--muted); }
.resource-body h2 { min-height: 45px; margin: 7px 0 17px; font-size: 1rem; }
.resource-body a { color: var(--coral); font-size: .74rem; font-weight: 800; }

.assignment-list { display: grid; gap: 16px; }
.assignment-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px; border: 1px solid #dce4df; border-radius: 17px; background: #fff; }
.assignment-status { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: var(--coral-soft); color: var(--coral); font-weight: 800; }
.assignment-card.completed .assignment-status { background: var(--green-soft); color: var(--green); }
.assignment-copy h2 { margin: 0 0 6px; font-size: 1.06rem; }
.assignment-copy p { margin: 0; color: var(--muted); font-size: .76rem; }
.assignment-meta { text-align: right; }
.assignment-meta small { display: block; margin-bottom: 8px; color: var(--muted); }
.upload-demo { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: .72rem; font-weight: 800; cursor: pointer; }
.upload-message { display: none; margin-top: 7px; color: var(--green); font-size: .68rem; font-weight: 700; }
.upload-message.visible { display: block; }

html.assignment-modal-open, .assignment-modal-open body { overflow: hidden; }
.upload-demo:hover { border-color: var(--coral); background: var(--coral-soft); }
.upload-demo:focus-visible, .assignment-dialog :focus-visible:not(.tox, .tox *) { outline: 3px solid var(--coral); outline-offset: 3px; }
.assignment-dialog { width: min(620px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid #dce4df; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 100px rgba(12, 35, 26, .25); }
.assignment-dialog::backdrop { background: rgba(13, 35, 27, .58); backdrop-filter: blur(5px); }
.assignment-dialog [hidden] { display: none !important; }
.assignment-dialog-content { padding: 30px; }
.assignment-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.assignment-dialog-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: var(--coral-soft); color: var(--coral-dark); }
.assignment-dialog-icon svg, .assignment-file-picker > svg { width: 25px; height: 25px; }
.assignment-dialog-close { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--muted); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.assignment-dialog-close:hover { background: #f0f4f1; color: var(--green); }
.assignment-dialog .eyebrow { margin-bottom: 9px; font-size: .65rem; }
.assignment-dialog h2 { margin-bottom: 12px; font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.25; }
.assignment-dialog h2:focus { outline: none; }
.assignment-dialog-description { margin-bottom: 13px; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.assignment-dialog-date { display: inline-block; margin-bottom: 25px; padding: 5px 10px; border-radius: 7px; background: #f0f4f1; color: var(--green); font-size: .73rem; font-weight: 700; }
.assignment-field { margin-bottom: 20px; }
.assignment-field > label { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 700; }
.assignment-field textarea { display: block; width: 100%; min-height: 100px; padding: 13px 15px; resize: vertical; border: 1px solid #cbd7cf; border-radius: 11px; background: #fff; color: var(--ink); font: inherit; font-size: .88rem; line-height: 1.6; }
.assignment-field textarea::placeholder { color: #748178; }
.assignment-field .tox-tinymce, .assignment-field .tox.tox-tinymce .tox-editor-header { box-shadow: none; }
.assignment-field > small, .assignment-file-picker small { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; }
.assignment-file-picker { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 13px; align-items: center; padding: 18px; border: 1px dashed #b7c9bc; border-radius: 12px; background: #f6f8f5; }
.assignment-file-picker > svg { color: var(--green); }
.assignment-file-picker input { width: 100%; min-width: 0; color: var(--muted); font: inherit; font-size: .76rem; }
.assignment-file-picker input::file-selector-button { min-height: 38px; margin-right: 10px; padding: 7px 12px; border: 1px solid #cbd7cf; border-radius: 7px; background: #fff; color: var(--green); font: inherit; font-weight: 700; cursor: pointer; }
.assignment-file-picker small { grid-column: 2; margin: 0; }
.assignment-selected-file { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: var(--green-soft); font-size: .76rem; }
.assignment-selected-file span { min-width: 0; overflow-wrap: anywhere; }
.assignment-selected-file button { flex-shrink: 0; min-height: 32px; padding: 4px 7px; border: 0; border-radius: 5px; background: transparent; color: var(--green); font-size: .74rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.assignment-audio-preview { width: 100%; height: 42px; margin-top: 12px; }
.assignment-demo-note { margin: 20px 0 0; padding: 13px 15px; border-radius: 10px; background: #fff8ee; color: #776044; font-size: .74rem; line-height: 1.6; }
.assignment-form-error, .assignment-form-success { margin: 16px 0 0; padding: 12px 15px; border-radius: 10px; font-size: .8rem; font-weight: 600; }
.assignment-form-error { background: #fff0ee; color: #a72c27; }
.assignment-form-success { background: var(--green-soft); color: var(--green); }
.assignment-dialog [aria-invalid="true"] { outline: 2px solid #b53630; outline-offset: 2px; }
.assignment-dialog-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--line); }
.assignment-dialog-actions .button, .assignment-secondary-button { min-height: 46px; padding: 10px 19px; border-radius: 10px; font-size: .8rem; cursor: pointer; }
.assignment-dialog-actions .button { box-shadow: none; }
.assignment-secondary-button { border: 1px solid #cbd7cf; background: #fff; color: var(--green); font-weight: 700; }
.assignment-secondary-button:hover { background: #f0f4f1; }
.assignment-preview-label { display: inline-flex; gap: 7px; align-items: center; margin-bottom: 20px; color: var(--green); font-size: .75rem; font-weight: 700; }
.assignment-preview-label span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--green-soft); }
.assignment-dialog h3 { margin: 0 0 12px; font-size: .9rem; }
.assignment-answer-preview { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: #f6f8f5; font-size: .86rem; line-height: 1.8; }
.assignment-answer-preview p:last-child { margin-bottom: 0; }
.assignment-answer-preview ol { margin: 0; padding-left: 19px; }
.assignment-answer-preview li + li { margin-top: 14px; }
.assignment-answer-preview li p { margin: 3px 0 0; }

@media (max-width: 650px) {
  .assignment-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 18px; }
  .assignment-dialog-content { padding: 21px; }
  .assignment-dialog-header { margin-bottom: 15px; }
  .assignment-dialog-actions { flex-direction: column-reverse; }
  .assignment-dialog-actions > button { width: 100%; }
  .assignment-file-picker { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .assignment-file-picker > svg { display: none; }
  .assignment-file-picker small { grid-column: 1; }
  .assignment-answer-preview { padding: 15px; }
}

.login-body { min-height: 100vh; background: var(--cream); }
.login-shell { display: grid; min-height: 100vh; grid-template-columns: 1fr 1fr; }
.login-visual { position: relative; display: flex; padding: 55px; overflow: hidden; flex-direction: column; justify-content: space-between; background: var(--green); color: #fff; }
.login-visual::after { position: absolute; right: -170px; bottom: -140px; width: 540px; height: 540px; border: 70px solid rgba(255, 255, 255, .06); border-radius: 50%; content: ""; }
.login-visual .brand { position: relative; z-index: 2; align-self: flex-start; }
.login-quote { position: relative; z-index: 2; max-width: 530px; }
.login-quote span { display: block; margin-bottom: 18px; color: var(--coral); font-family: Georgia, serif; font-size: 5rem; line-height: .5; }
.login-quote h1 { margin-bottom: 18px; font-size: clamp(2.5rem, 4vw, 4.2rem); }
.login-quote p { color: #b8ccc3; }
.login-content { display: grid; padding: 45px; place-items: center; }
.login-box { width: min(100%, 430px); }
.login-box > a { display: inline-block; margin-bottom: 35px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.login-box h2 { margin-bottom: 10px; font-size: 2.2rem; }
.login-box > p { margin-bottom: 31px; color: var(--muted); }
.login-form { display: grid; gap: 17px; }
.login-form .button { width: 100%; margin-top: 4px; }
.login-helper { display: flex; align-items: center; justify-content: space-between; font-size: .73rem; }
.login-helper label { display: flex; gap: 9px; align-items: center; font-size: .82rem; line-height: 1; cursor: pointer; }
.login-helper a { color: var(--coral); font-weight: 700; }
.demo-access { margin-top: 27px; padding: 18px; border-radius: 13px; background: #f0f4f1; text-align: center; }
.demo-access p { margin: 0 0 10px; color: var(--muted); font-size: .75rem; }
.demo-access a { font-size: .82rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 960px) {
  .panel-shell { grid-template-columns: 1fr; }
  .panel-sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .panel-sidebar.open { transform: none; }
  .panel-sidebar-close { display: grid; place-items: center; }
  .panel-main { grid-column: 1; }
  .panel-mobile-toggle { display: grid; }
  .next-class-card, .progress-card { grid-column: span 12; }
  .quick-card { grid-column: span 4; }
  .schedule-layout { grid-template-columns: 1fr; }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
  .panel-topbar { height: 66px; padding: 0 15px; }
  .panel-user-copy { display: none; }
  .panel-content { width: min(calc(100% - 28px), 1120px); padding-top: 28px; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .panel-heading .button { width: 100%; }
  .quick-card, .materials-card, .tasks-card { grid-column: span 12; }
  .next-class-card { min-height: 320px; }
  .class-actions { align-items: flex-start; flex-direction: column; gap: 15px; }
  .calendar-card { padding: 18px 10px; }
  .calendar-top h2 { font-size: 1.15rem; }
  .calendar-grid { gap: 4px; }
  .calendar-grid > span { padding: 8px 0; font-size: .6rem; }
  .calendar-day { min-height: 52px; padding: 7px 5px; }
  .calendar-day.has-class::after, .calendar-day.group-class::after { right: 5px; bottom: 6px; left: 5px; height: 4px; }
  .panel-toolbar { flex-direction: column; align-items: stretch; }
  .panel-field-search { flex: auto; }
  .resources-grid { grid-template-columns: 1fr; }
  .assignment-card { grid-template-columns: auto 1fr; }
  .assignment-meta { grid-column: 1 / -1; text-align: left; }
  .login-shell { grid-template-columns: 1fr; }
  .login-visual { min-height: 330px; padding: 32px 25px; }
  .login-quote h1 { font-size: 2.4rem; }
  .login-content { padding: 45px 22px; }
}

.assignment-preview-label span { padding-top: 2px; line-height: 1; }