:root {
  font-family: "DM Sans", sans-serif;
  color: #20243b;
  background: #f6f8fc;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --ink: #20243b;
  --muted: #8b90a3;
  --line: #edf0f6;
  --purple: #6958e8;
  --green: #36b88a;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 360px; min-height: 100vh; background: #f6f8fc; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
.sidebar { width: 250px; position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; flex-direction: column; padding: 29px 17px 16px; background: #fff; border-right: 1px solid #edf0f5; }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 52px 12px; color: #24233c; font: 800 23px Manrope, sans-serif; letter-spacing: -1.1px; text-decoration: none; }
.brand-logo { display: block; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.workspace-label { margin: 0 0 12px 13px; color: #a6a9b8; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.primary-nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; height: 43px; padding: 0 13px; gap: 12px; border-radius: 8px; color: #777c90; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.nav-item:hover { background: #f7f6ff; color: var(--purple); }
.nav-item.active { color: #6756e3; background: #f2f0ff; }
.nav-icon { display: inline-flex; width: 18px; justify-content: center; font-size: 17px; }
.nav-count { margin-left: auto; font-size: 11px; color: #a2a5b5; }
.sidebar-bottom { margin-top: auto; }
.help-card { margin: 0 4px 19px; padding: 17px 14px 15px; background: #f8f7ff; border: 1px solid #f0eeff; border-radius: 10px; }
.help-icon { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 11px; background: #e9e5ff; border-radius: 8px; color: #715be9; }
.help-card strong { font-size: 12px; }.help-card p { margin: 6px 0 10px; color: #898da0; font-size: 10px; line-height: 1.5; }
.help-card a { color: #6554df; font-size: 10px; font-weight: 700; text-decoration: none; }.help-card a span { margin-left: 3px; }
.profile-button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 4px 1px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
.avatar { display: inline-grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 700; }
.avatar-purple { color: #674dd0; background: #eae5ff; }
.profile-copy { display: grid; gap: 3px; }.profile-copy strong { font-size: 11px; }.profile-copy small { color: #9a9eae; font-size: 9px; }
.profile-more { margin-left: auto; color: #9297a9; font-size: 20px; }
.account-create-form { max-width: 520px; padding: 18px 0; }
.account-management-record { display: flex; align-items: end; gap: 8px; padding: 8px 0; }
.account-management-row { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(120px, 1fr)) auto; align-items: end; gap: 8px; }
.account-management-row.student-account-row { grid-template-columns: repeat(2, minmax(120px, 1fr)) auto; }
.account-management-row .form-field { min-width: 0; }
.account-management-row .form-field input { min-width: 0; }
.account-remove-form { flex: 0 0 auto; }
.main-content { margin-left: 250px; min-height: 100vh; }
.topbar { position: sticky; z-index: 4; top: 0; height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 39px; background: rgba(255,255,255,.92); border-bottom: 1px solid #edf0f5; backdrop-filter: blur(12px); }
.breadcrumb { color: #999eae; font-size: 11px; }.breadcrumb span { margin: 0 10px; color: #d1d3dd; }.breadcrumb strong { color: #454a60; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 18px; }.term-pill { padding: 8px 11px; border: 1px solid #eceef4; border-radius: 6px; color: #777c90; font-size: 10px; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: #45bd8e; }
.icon-button { position: relative; width: 30px; height: 30px; border: 0; color: #7c8194; background: transparent; font-size: 20px; }.icon-button i { position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #f18d74; border: 1px solid #fff; }
.notification-wrap { position: relative; }.icon-button .notification-badge { top: 0; right: 0; width: auto; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border: 1px solid #fff; border-radius: 10px; color: #fff; background: #e78372; font: 700 8px "DM Sans", sans-serif; }.notification-panel { position: absolute; z-index: 8; top: calc(100% + 13px); right: -25px; width: min(340px, calc(100vw - 24px)); overflow: hidden; border: 1px solid #edf0f5; border-radius: 9px; background: #fff; box-shadow: 0 12px 35px #25243b1c; }.notification-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 15px; border-bottom: 1px solid #edf0f5; color: #292b42; font-size: 12px; }.notification-enable, .notification-mark-read { border: 0; color: #6756e3; background: transparent; font-size: 9px; font-weight: 600; }.notification-permission { margin: 0; padding: 8px 15px 0; color: #898da0; font-size: 9px; line-height: 1.5; }.notification-list { max-height: 300px; overflow-y: auto; }.notification-item { padding: 11px 15px; border-bottom: 1px solid #f0f1f5; }.notification-item.unread { background: #faf9ff; }.notification-item strong { display: block; color: #41455b; font-size: 10px; }.notification-item p { margin: 4px 0; color: #777c90; font-size: 9px; line-height: 1.5; }.notification-item time { color: #a1a5b2; font-size: 8px; }.notification-empty { margin: 0; padding: 18px 15px; color: #898da0; font-size: 10px; text-align: center; }.notification-mark-read { width: 100%; padding: 11px; border-top: 1px solid #edf0f5; }.notification-mark-read:disabled { opacity: .6; cursor: wait; }
.top-avatar { width: 31px; height: 31px; }.menu-button { display: none; border: 0; background: none; color: #555b72; }
.page-wrap { max-width: 1500px; margin: 0 auto; padding: 34px 39px 20px; }
.welcome-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 8px; color: #9b9faf; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 6px; color: #24263d; font: 700 25px Manrope, sans-serif; letter-spacing: -.8px; }
h1 span { color: #e6b04e; font-size: 19px; }.subtitle { margin: 0; color: #9398a9; font-size: 12px; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 13px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; font-weight: 600; transition: transform .12s, box-shadow .12s; }
.button:hover { transform: translateY(-1px); }.button-primary { color: #fff; background: #6d5be7; box-shadow: 0 4px 10px #6d5be72a; }.button-primary:hover { background: #5f4ed9; box-shadow: 0 5px 13px #6d5be744; }.button-secondary { color: #666b7f; background: #fff; border-color: #e8eaf1; }.button-secondary:hover { background: #fafaff; }
.button span { font-size: 15px; line-height: 0; }
.drawing-challenge { display: grid; justify-items: center; gap: 8px; min-width: 0; margin: 0; padding: 12px; border: 1px solid #edf0f5; border-radius: 7px; }.drawing-challenge legend { padding: 0 5px; color: #34384b; font-size: 11px; font-weight: 600; }.drawing-challenge > p { margin: 0; color: #898da0; font-size: 10px; line-height: 1.5; text-align: center; }.drawing-reference, .drawing-board { display: block; width: min(100%, 190px); aspect-ratio: 1; overflow: visible; }.drawing-reference { padding: 5px; border-radius: 8px; background: #f7f6ff; }.drawing-reference polyline { fill: none; stroke: #6d5be7; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; }.drawing-reference circle { fill: #fff; stroke: #a9a0ed; stroke-width: 3; }.drawing-reference circle.drawing-start { fill: #6d5be7; stroke: #6d5be7; }.drawing-board { touch-action: none; border: 1px solid #edf0f5; border-radius: 8px; background: #fff; }.drawing-line { fill: none; stroke: #6d5be7; stroke-linecap: round; stroke-linejoin: round; stroke-width: 6; pointer-events: none; }.drawing-hit { fill: transparent; cursor: crosshair; outline: none; }.drawing-dot { fill: #c6c9d4; pointer-events: none; }.drawing-hit:hover + .drawing-dot, .drawing-hit:focus + .drawing-dot { fill: #6d5be7; }.drawing-status { min-height: 14px; }.drawing-reset { border: 0; padding: 4px 8px; background: transparent; color: #6d5be7; font: inherit; font-size: 10px; cursor: pointer; }.drawing-reset:hover { text-decoration: underline; }.drawing-challenge noscript { color: #a44242; font-size: 10px; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 17px; }
.metric-card, .panel { position: relative; background: #fff; border: 1px solid #edf0f5; border-radius: 9px; box-shadow: 0 2px 7px #1e2b4b04; }
.metric-card { min-height: 145px; overflow: hidden; padding: 16px 17px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #878c9f; font-size: 11px; }
.metric-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; font-size: 14px; }.metric-icon.green { color: #35af84; background: #e7f8f1; }.metric-icon.orange { color: #e49a48; background: #fff4e8; }.metric-icon.purple { color: #755fe1; background: #f0edff; }.metric-icon.blue { color: #4a9cd6; background: #eaf6ff; }
.metric-value { display: block; margin: 9px 0 7px; color: #25273e; font: 700 25px Manrope, sans-serif; letter-spacing: -.7px; }
.metric-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; color: #9a9eae; font-size: 9px; }
.trend { display: inline-flex; align-items: center; padding: 3px 5px; border-radius: 4px; font-size: 9px; font-weight: 700; }.trend.up { color: #35a97f; background: #e8f8f1; }.trend.down { color: #e09156; background: #fff5e9; }.trend.neutral { color: #6958e8; background: #f1efff; }
.sparkline { position: absolute; width: 39%; height: 40px; right: 12px; bottom: 13px; opacity: .75; }.sparkline svg { width: 100%; height: 100%; overflow: visible; }.sparkline path { fill: none; stroke-width: 2.2; stroke-linecap: round; }.spark-green path { stroke: #45c294; }.spark-orange path { stroke: #efa858; }
.mini-avatars { position: absolute; right: 15px; bottom: 19px; display: flex; }.mini-avatars .avatar { width: 23px; height: 23px; margin-left: -6px; border: 2px solid #fff; font-size: 7px; }
.month-bars { position: absolute; right: 14px; bottom: 14px; height: 40px; width: 91px; display: flex; align-items: end; gap: 3px; }.month-bars i { flex: 1; border-radius: 2px 2px 0 0; background: #c8eafc; }.month-bars i.bar-current { background: #61b9e8; }
.middle-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(270px, 1fr); gap: 15px; margin-bottom: 17px; }
.panel { padding: 19px 20px; }.collection-panel, .breakdown-panel { min-height: 288px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }.panel-heading h2, .records-heading h2 { margin: 0; color: #292b42; font: 700 13px Manrope, sans-serif; }.panel-heading p, .records-heading p { margin: 5px 0 0; color: #999eae; font-size: 10px; }
.select-control { min-height: 31px; max-width: 160px; padding: 0 26px 0 9px; border: 1px solid #e9ebf2; border-radius: 5px; outline: 0; color: #777c8f; background: #fff; font-size: 9px; cursor: pointer; }.select-control:focus, input:focus { border-color: #a89df4; box-shadow: 0 0 0 3px #7663e716; }
.chart-summary { margin: 17px 0 0; }.chart-summary strong { font: 700 20px Manrope, sans-serif; letter-spacing: -.5px; }.chart-summary .trend { margin-left: 5px; }.chart-summary-note { color: #a1a5b3; font-size: 9px; }
.chart-legend { display: flex; gap: 15px; margin-top: 7px; color: #969aaa; font-size: 9px; }.legend-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; }.collected-dot { background: #6857e4; }.pending-dot { background: #d9d5fa; }.overdue-dot { background: #f3a170; }
.chart { height: 126px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; align-items: end; position: relative; margin-top: 6px; padding: 12px 3px 19px; border-bottom: 1px solid #eff0f5; background: repeating-linear-gradient(to bottom, transparent 0, transparent 30px, #f1f2f7 31px, transparent 32px); }
.chart-column { height: 100%; display: flex; align-items: end; justify-content: center; gap: 3px; position: relative; }.chart-column i { display: block; width: min(13px, 40%); border-radius: 3px 3px 0 0; background: #dedafb; }.chart-column i.collected-bar { background: #7867ea; }.chart-column.current i.collected-bar { background: #5f4cdd; }.chart-column.current i:not(.collected-bar) { background: #aaa0f2; }
.chart-month { position: absolute; top: calc(100% + 7px); color: #a4a8b5; font-size: 8px; white-space: nowrap; }.chart-column.current .chart-month { color: #6655db; font-weight: 700; }
.more-button { border: 0; color: #8c90a0; background: transparent; font-size: 19px; line-height: 14px; }
.donut-wrap { height: 122px; display: grid; place-items: center; }.donut { width: 108px; height: 108px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#6d5be7 0deg 180deg, #d9d5fa 180deg 285deg, #f4aa7a 285deg 360deg); }.donut-center { width: 75px; height: 75px; display: grid; align-content: center; justify-items: center; gap: 2px; border-radius: 50%; background: white; }.donut-center strong { color: #2d2e43; font: 700 19px Manrope, sans-serif; }.donut-center span { color: #9a9ead; font-size: 8px; }
.breakdown-legend { display: grid; gap: 10px; }.breakdown-legend > div { display: flex; justify-content: space-between; align-items: center; }.legend-label { color: #83889b; font-size: 9px; }.breakdown-legend strong { color: #37394f; font-size: 10px; }.breakdown-legend small { color: #a1a5b2; font-size: 8px; font-weight: 400; }
.records-panel { padding: 18px 19px 0; }.records-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 16px; }.title-with-count { display: flex; align-items: center; gap: 8px; }.count-pill { padding: 3px 6px; color: #6554dc; background: #f0edff; border-radius: 5px; font-size: 9px; font-weight: 700; }
.payment-history-panel { margin-top: 16px; }.payment-history-panel .panel-heading { margin-bottom: 15px; }
.records-actions { display: flex; align-items: center; gap: 8px; }.search-box { width: 176px; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid #e9ebf2; border-radius: 5px; color: #969aab; }.search-box span { font-size: 17px; }.search-box input { width: 100%; border: 0; outline: 0; color: #4a4e63; background: transparent; font-size: 9px; }.search-box input:focus { box-shadow: none; }.search-box input::placeholder { color: #a6a9b6; }
.filter-select { height: 32px; min-width: 100px; }.filter-button { height: 32px; width: 32px; border: 1px solid #e9ebf2; border-radius: 5px; color: #73788b; background: #fff; font-size: 15px; }
.statement-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; margin: 0 0 13px; padding: 11px; border: 1px solid #f0eff7; border-radius: 7px; background: #fcfbff; }
.statement-filters label { display: grid; flex: 1 1 120px; min-width: 105px; gap: 4px; color: #777c90; font-size: 9px; font-weight: 600; }
.statement-filters .dashboard-search { flex: 2 1 200px; }
.statement-filters input, .statement-filters select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #e8eaf1; border-radius: 5px; outline: 0; color: #555b70; background: #fff; font-size: 10px; }
.statement-filters input::placeholder { color: #a6a9b6; }
.statement-filters input:focus, .statement-filters select:focus { border-color: #9c90ee; box-shadow: 0 0 0 3px #7564e51a; }
.dashboard-filter-clear { height: 34px; padding: 0 11px; border: 1px solid #e8eaf1; border-radius: 5px; color: #6554df; background: #fff; font-size: 10px; font-weight: 600; }
.dashboard-filter-clear:hover { background: #f8f7ff; }
.dashboard-filter-count { margin: 0 0 9px auto; color: #9297a8; font-size: 9px; white-space: nowrap; }
.table-scroll { overflow-x: auto; }table { width: 100%; min-width: 790px; border-collapse: collapse; text-align: left; }thead { background: #fafbfe; }th { height: 34px; padding: 0 9px; color: #9da1b0; font-size: 8px; font-weight: 700; letter-spacing: .45px; }td { height: 52px; padding: 5px 9px; border-bottom: 1px solid #f0f1f5; color: #6d7286; font-size: 9px; white-space: nowrap; }tbody tr:last-child td { border-bottom: 0; }.student-cell { display: flex; align-items: center; gap: 8px; }.student-cell .avatar { width: 29px; height: 29px; font-size: 8px; }.student-copy { display: grid; gap: 3px; }.student-copy strong { color: #44485e; font-size: 9px; font-weight: 600; }.student-copy small { color: #a1a5b2; font-size: 8px; }.student-id { color: #83889b; font-size: 9px; }.program-cell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: #858a9c; }.money-cell { color: #565b70; font-weight: 600; }.balance-cell { color: #e0915a; font-weight: 700; }.balance-cell.zero { color: #36aa80; }.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 4px; font-size: 8px; font-weight: 600; }.status-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status-paid { color: #32a47a; background: #eaf8f2; }.status-partial { color: #d28a43; background: #fff5e8; }.status-unpaid { color: #df806d; background: #fff0ed; }
.row-actions { display: flex; justify-content: end; gap: 5px; }.row-action { padding: 5px 7px; border: 1px solid #e9ebf2; border-radius: 4px; color: #74798c; background: #fff; font-size: 8px; }.row-action:hover { color: #6756e3; border-color: #d6d0ff; }.row-action.more-row { padding: 3px 6px; font-size: 14px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; min-height: 47px; border-top: 1px solid #eff0f5; color: #9a9eac; font-size: 9px; }.pagination { display: flex; gap: 4px; }.pagination button { width: 24px; height: 24px; border: 1px solid #eceef3; border-radius: 4px; color: #a1a5b2; background: #fff; font-size: 11px; }.pagination button:disabled { opacity: .5; cursor: default; }.pagination .current-page { color: #fff; border-color: #6d5be7; background: #6d5be7; }
.empty-state { padding: 38px 15px; text-align: center; }.empty-state > span { display: block; margin-bottom: 7px; color: #8a7bea; font-size: 25px; }.empty-state strong { font-size: 13px; }.empty-state p { margin: 5px 0 13px; color: #999eae; font-size: 10px; }
.page-footer { display: flex; justify-content: space-between; padding: 19px 2px 0; color: #a5a8b5; font-size: 9px; }.page-footer a { color: #7465d8; text-decoration: none; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: #20243b75; backdrop-filter: blur(3px); }.modal-backdrop[hidden] { display: none; }.modal { width: min(100%, 480px); max-height: min(90vh, 700px); overflow: auto; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 20px 70px #1d204133; }.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }.modal-heading .eyebrow { margin-bottom: 5px; }.modal-heading h2 { margin: 0; font: 700 19px Manrope,sans-serif; }.close-button { width: 29px; height: 29px; border: 0; border-radius: 6px; color: #85899b; background: #f6f7fa; font-size: 21px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }.form-field { display: grid; gap: 6px; color: #666b7f; font-size: 10px; font-weight: 600; }.full-field { grid-column: 1 / -1; }.form-field input, .form-field select { width: 100%; height: 37px; padding: 0 10px; border: 1px solid #e6e8ef; border-radius: 5px; outline: none; color: #44495d; background: #fff; font-size: 11px; font-weight: 400; }.form-field input::placeholder { color: #b2b5c0; }.input-prefix { position: relative; }.input-prefix b { position: absolute; left: 10px; top: 11px; color: #989cac; font-size: 11px; font-weight: 500; }.input-prefix input { padding-left: 25px; }.form-error { min-height: 14px; margin: 9px 0 0; color: #cf564e; font-size: 10px; }.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 10px; padding-top: 15px; border-top: 1px solid #f0f1f5; }.payment-student-card { display: flex; justify-content: space-between; align-items: center; margin: -5px 0 18px; padding: 11px; border-radius: 7px; background: #f8f7ff; color: #777c8f; font-size: 10px; }.payment-student-card strong { color: #36394f; }.payment-student-card small { display: block; margin-top: 3px; color: #999eae; font-size: 9px; }.toast { position: fixed; z-index: 20; right: 24px; bottom: 22px; padding: 12px 17px; color: white; border-radius: 7px; background: #282b41; box-shadow: 0 6px 22px #20243b33; font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s ease; }.toast.visible { opacity: 1; transform: translateY(0); }

@media (min-width: 1500px) { .page-wrap { padding-top: 42px; }.metric-card { min-height: 157px; }.collection-panel, .breakdown-panel { min-height: 310px; }.chart { height: 142px; } }
@media (max-width: 1150px) { .sidebar { width: 220px; }.main-content { margin-left: 220px; }.topbar { padding-inline: 25px; }.page-wrap { padding-inline: 25px; }.metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.middle-grid { grid-template-columns: minmax(0,1.5fr) minmax(240px,1fr); }.metric-card { min-height: 137px; } }
@media (max-width: 800px) { .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 8px 0 20px #1e2b4b0d; }.sidebar.open { transform: translateX(0); }.main-content { margin-left: 0; }.menu-button { display: block; font-size: 17px; }.topbar { justify-content: flex-start; gap: 13px; height: 58px; padding-inline: 19px; }.topbar-right { margin-left: auto; gap: 10px; }.term-pill { font-size: 0; }.term-pill .status-dot { margin: 0; }.page-wrap { padding: 27px 19px 20px; }.middle-grid { grid-template-columns: 1fr; }.collection-panel, .breakdown-panel { min-height: auto; }.breakdown-panel { padding-bottom: 18px; }.donut-wrap { height: 118px; } }
@media (max-width: 570px) { .welcome-row { align-items: flex-start; flex-direction: column; margin-bottom: 19px; }.welcome-actions { width: 100%; }.welcome-actions .button { flex: 1; }.metrics-grid { gap: 9px; }.metric-card { min-height: 130px; padding: 12px; }.metric-top { font-size: 9px; }.metric-value { font-size: 21px; }.metric-foot { flex-wrap: wrap; font-size: 8px; }.middle-grid { gap: 10px; }.panel { padding: 15px; }.records-panel { padding: 15px 12px 0; }.records-heading { align-items: flex-start; flex-direction: column; }.records-actions { width: 100%; }.search-box { flex: 1; width: auto; }.filter-select { min-width: 88px; }.chart { gap: 5px; }.chart-column i { width: 40%; }.chart-month { font-size: 7px; }.topbar { padding-inline: 13px; }.breadcrumb { font-size: 10px; }.topbar-right { gap: 4px; }.top-avatar { width: 28px; height: 28px; }.page-footer { font-size: 8px; }.modal { padding: 19px; }.form-grid { gap: 11px 8px; } }
@media (max-width: 800px) { .account-management-record { align-items: stretch; flex-direction: column; }.account-management-row, .account-management-row.student-account-row { grid-template-columns: 1fr; }.account-remove-form { align-self: flex-start; } }

.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; }
.requirements-page { min-width: 360px; color: var(--ink); }
.requirements-topbar { position: sticky; z-index: 4; top: 0; display: flex; height: 65px; align-items: center; justify-content: space-between; padding: 0 max(24px, calc((100vw - 1060px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.requirements-brand { margin: 0; }
.requirements-topbar .button { text-decoration: none; }
.requirements-content { width: min(100% - 48px, 900px); margin: 0 auto; padding: 48px 0 30px; }
.requirements-hero { padding: 0 0 27px; border-bottom: 1px solid var(--line); }
.requirements-hero h1 { margin-bottom: 10px; font-size: 32px; }
.requirements-hero .subtitle { max-width: 650px; font-size: 13px; line-height: 1.7; }
.requirements-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.requirements-meta span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 20px; color: #777c90; background: #fff; font-size: 10px; }
.requirements-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 17px; padding: 16px 0; border-bottom: 1px solid var(--line); color: #777c90; font-size: 11px; }
.requirements-toc strong { color: #41455b; }
.requirements-toc a, .requirements-footer a { color: #6554df; font-weight: 600; text-decoration: none; }
.requirements-toc a:hover, .requirements-footer a:hover { text-decoration: underline; }
.requirements-sections { display: grid; gap: 15px; padding-top: 19px; }
.requirements-section { scroll-margin-top: 82px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 2px 7px #1e2b4b04; }
.requirements-section .eyebrow { margin-bottom: 7px; color: #8173d6; }
.requirements-section h2 { margin-bottom: 12px; color: #24263d; font: 700 19px Manrope, sans-serif; letter-spacing: -.4px; }
.requirements-section p:not(.eyebrow) { color: #777c90; font-size: 12px; line-height: 1.75; }
.requirements-section h3 { margin: 0 0 8px; color: #41455b; font-size: 12px; }
.requirements-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.requirements-card { padding: 15px; border: 1px solid #f0f1f6; border-radius: 7px; background: #fcfcfe; }
.requirements-card p { margin: 0; }
.requirements-card ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #777c90; font-size: 11px; line-height: 1.6; }
.requirements-list { display: grid; gap: 11px; margin: 0; padding-left: 23px; color: #777c90; font-size: 12px; line-height: 1.7; }
.requirements-list strong { color: #41455b; }
.requirements-list-bullets { gap: 7px; }
.requirements-callout { display: grid; gap: 5px; margin-top: 16px; padding: 14px 16px; border: 1px solid #f0eeff; border-radius: 7px; color: #777c90; background: #f8f7ff; font-size: 11px; line-height: 1.6; }
.requirements-callout strong { color: #5546c8; }
.requirements-note { margin: 13px 0 0; padding: 11px 13px; border-left: 3px solid #e8b44e; border-radius: 3px; background: #fffaf0; }
.requirements-footer { padding: 20px 2px 0; font-size: 11px; }
@media (max-width: 600px) {
  .requirements-topbar { height: 59px; padding: 0 16px; }
  .requirements-content { width: min(100% - 28px, 900px); padding-top: 30px; }
  .requirements-hero h1 { font-size: 27px; }
  .requirements-section { padding: 18px 16px; }
  .requirements-grid { grid-template-columns: 1fr; }
  .requirements-toc { gap: 9px 13px; }
}
.term-picker { margin: 0; }.term-picker .select-control { max-width: 210px; }.term-add-button { min-height: 31px; padding: 0 8px; border: 1px solid #e9ebf2; border-radius: 5px; color: #6756e3; background: #fff; font-size: 9px; font-weight: 600; white-space: nowrap; }.term-add-button:hover { border-color: #cfc9ff; background: #faf9ff; }
.records-filter { display: flex; align-items: center; gap: 8px; margin: 0; }.enroll-button { min-height: 32px; padding-inline: 9px; font-size: 9px; white-space: nowrap; }.enroll-button:disabled, .row-action:disabled { opacity: .45; cursor: not-allowed; }
.logout-button { padding: 4px 7px; border: 0; border-radius: 4px; color: #777c90; background: #f6f7fa; font-size: 9px; }.profile-button form { margin-left: auto; }.profile-button .profile-more { display: none; }.account-settings-link { color: #6756e3; font-size: 9px; text-decoration: none; }.account-settings-link:hover { text-decoration: underline; }
.avatar-tone-0 { color: #625a8e; background: #eae5ff; }.avatar-tone-1 { color: #3f826b; background: #e3f4ed; }.avatar-tone-2 { color: #a2693d; background: #fff0e4; }.avatar-tone-3 { color: #477999; background: #e4f1fb; }.avatar-tone-4 { color: #a45f78; background: #fbe8ed; }.avatar-tone-5 { color: #657e46; background: #e8f1dc; }
.modal-heading .modal-term { margin: 5px 0 0; color: #999eae; font-size: 10px; }.modal-heading .auth-intro { max-width: 340px; margin: 8px 0 0; color: #898da0; font: 400 11px "DM Sans", sans-serif; letter-spacing: 0; }
.alert { margin: 0 0 17px; padding: 10px 13px; border: 1px solid transparent; border-radius: 6px; font-size: 11px; }.alert-success { color: #287c60; border-color: #d7f0e5; background: #edfaf4; }.alert-error { color: #a4473f; border-color: #f4d8d4; background: #fff2f0; }
.auth-page { min-width: 320px; min-height: 100vh; display: grid; place-items: center; padding: 22px; background: radial-gradient(ellipse at top, #f0edff 0, #f6f8fc 58%); }.auth-card { width: min(100%, 430px); padding: 32px; border: 1px solid #edf0f5; border-radius: 13px; background: white; box-shadow: 0 18px 60px #25243b10; }.auth-brand { margin: 0 0 30px; }.auth-card h1 { font-size: 22px; }.auth-intro { margin: 0 0 21px; color: #8b90a3; font-size: 12px; line-height: 1.6; }.auth-form { display: grid; gap: 14px; }.auth-form .form-field { font-size: 11px; }.auth-form .form-field small { color: #999eae; font-size: 9px; font-weight: 400; }.auth-submit { width: 100%; min-height: 40px; margin-top: 3px; font-size: 11px; }.auth-note { margin: 20px 0 0; padding-top: 15px; border-top: 1px solid #f0f1f5; color: #999eae; font-size: 9px; line-height: 1.6; text-align: center; }
.demo-credentials { margin: 0 0 18px; padding: 12px 14px 11px; border: 1px solid #ece7ff; border-radius: 12px; background: linear-gradient(180deg, #faf9ff 0%, #f6f3ff 100%); box-shadow: 0 8px 18px rgba(111, 97, 191, 0.05); color: #68627e; font-size: 10px; }
.demo-credentials-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.demo-credentials-badge { display: inline-flex; align-items: center; justify-content: center; padding: 4px 8px; border-radius: 999px; background: #efeaff; color: #5647b9; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.demo-credentials-header small, .demo-credentials > small { color: #8a8fa4; font-size: 9px; }
.demo-credentials dl { display: grid; gap: 6px; margin: 0; }
.demo-credentials dl div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #f1effd; border-radius: 8px; background: rgba(255,255,255,0.85); }
.demo-credentials dt { color: #8a8fa4; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-credentials dd { margin: 0; color: #2f3143; font-weight: 700; text-align: right; }
.demo-credentials code { display: inline-block; padding: 2px 6px; border-radius: 5px; background: #f6f4ff; color: #3e356a; font: 600 10px "DM Sans", sans-serif; }
.demo-credentials > small { display: block; margin-top: 10px; line-height: 1.5; }
.role-choice-list { gap: 10px; }.role-choice { flex-direction: column; align-items: flex-start; gap: 4px; padding: 11px 13px; color: #34384b; text-align: left; text-decoration: none; }.role-choice span { color: #898da0; font-size: 9px; font-weight: 400; }
.role-chooser-page { background: #f0edff; }
.role-chooser-page { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 18% 18%, #fff 0, #f8f6ff 25%, transparent 58%), linear-gradient(135deg, #f2efff 0%, #e8e3ff 52%, #f8f5ff 100%); }
.role-chooser-page::before, .role-chooser-page::after { position: fixed; z-index: -1; width: 280px; height: 280px; border-radius: 50%; content: ""; pointer-events: none; filter: blur(2px); }
.role-chooser-page::before { top: -105px; right: -70px; background: #b7aaff45; }
.role-chooser-page::after { bottom: -155px; left: -85px; width: 360px; height: 360px; background: #9c8bff35; }
.role-chooser-page .auth-card { animation: chooser-arrive .55s cubic-bezier(.2,.8,.2,1) both; border-color: #ffffffc9; box-shadow: 0 24px 70px #6555bd24, 0 3px 12px #3930630a; }
.role-chooser-page .auth-brand { margin-bottom: 27px; }
.role-chooser-page .eyebrow { color: #7969dc; letter-spacing: 1.5px; }
.role-chooser-page h1 { margin-bottom: 23px; font-size: 27px; letter-spacing: -1px; }
.role-chooser-page .role-choice-list { gap: 11px; }
.role-chooser-page .role-choice { min-height: 58px; flex-direction: row; align-items: center; gap: 13px; padding: 10px 14px; border-color: #ece9fa; border-radius: 9px; background: linear-gradient(110deg, #fff, #fcfbff); color: #38354f; font-size: 12px; box-shadow: 0 3px 10px #5949a00a; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.role-chooser-page .role-choice:hover { transform: translateY(-2px); border-color: #c9c0ff; background: #fff; box-shadow: 0 9px 20px #5949a01c; }
.role-chooser-page .role-choice:focus-visible { outline: 3px solid #7663e74a; outline-offset: 3px; }
.role-chooser-page .role-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: #f0edff; color: #6d5be7; font-size: 17px; transition: transform .18s ease, background .18s ease; }
.role-chooser-page .role-choice:hover .role-icon { transform: rotate(-6deg) scale(1.08); background: #e8e3ff; }
@keyframes chooser-arrive { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .role-chooser-page .auth-card { animation: none; }.role-chooser-page .role-choice, .role-chooser-page .role-icon { transition: none; } }
.auth-footer-actions { display: grid; gap: 8px; margin-top: 18px; text-align: center; }.auth-footer-actions p { margin: 0; color: #898da0; font-size: 10px; }.auth-footer-actions .button { text-decoration: none; }.auth-footer-actions + .auth-note { margin-top: 15px; }
.backup-card { width: min(100%, 620px); }.backup-card .auth-brand { margin-bottom: 25px; }.backup-section { margin-top: 20px; padding: 17px; border: 1px solid #edf0f5; border-radius: 9px; }.backup-section h2 { margin: 0 0 8px; color: #34384b; font-size: 14px; }.backup-section > p { margin: 0 0 14px; color: #777d90; font-size: 11px; line-height: 1.6; }.backup-section .alert-warning { padding: 11px; }.backup-restore { border-color: #f0dfb7; }.backup-section .auth-submit { margin-top: 0; }.backup-card .alert-success a { color: #4b3bb8; font-weight: 700; }
.alert-warning { margin: 0 0 17px; color: #785c20; border-color: #f0dfb7; background: #fffaf0; line-height: 1.6; }
.term-add-button:focus-visible, .button:focus-visible, .row-action:focus-visible, .logout-button:focus-visible { outline: 3px solid #7663e74a; outline-offset: 2px; }
.icon-button:focus-visible, .notification-enable:focus-visible, .notification-mark-read:focus-visible { outline: 3px solid #7663e74a; outline-offset: 2px; }
@media (max-width: 570px) { .records-filter { width: 100%; }.records-actions { flex-wrap: wrap; }.statement-filters { padding: 9px; }.enroll-button { width: 100%; }.term-picker .select-control { max-width: 126px; }.term-add-button { padding-inline: 6px; font-size: 8px; }.auth-card { padding: 24px 20px; }.topbar-right { min-width: 0; }.term-picker { min-width: 0; }.term-picker .select-control { width: 110px; padding-right: 5px; font-size: 8px; }.icon-button { display: grid; place-items: center; }.notification-panel { right: -45px; } }

.report-filters { display: grid; grid-template-columns: minmax(190px, 2fr) repeat(3, minmax(120px, 1fr)) auto; align-items: end; gap: 10px; padding: 0 0 16px; border-bottom: 1px solid #eff0f5; }
.report-filter { display: grid; min-width: 0; gap: 5px; color: #777c90; font-size: 9px; font-weight: 600; }
.report-filter input, .report-filter select { width: 100%; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid #e9ebf2; border-radius: 5px; outline: 0; color: #555a70; background: #fff; font-size: 10px; }
.report-filter input:focus, .report-filter select:focus { border-color: #a89df4; box-shadow: 0 0 0 3px #7663e716; }
.report-filter input::placeholder { color: #a6a9b6; }
.report-filter-actions { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.report-filter-actions .button { min-height: 34px; white-space: nowrap; }
.report-filter-actions a { color: #777c90; font-size: 9px; text-decoration: none; white-space: nowrap; }
.report-filter-actions a:hover { color: #6756e3; }
@media (max-width: 1150px) { .report-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }.search-report-filter, .report-filter-actions { grid-column: span 2; } }
@media (max-width: 570px) { .report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.search-report-filter { grid-column: 1 / -1; }.report-filter-actions { grid-column: 1 / -1; justify-content: flex-start; } }