/* Tuition presentation layer. Local assets; no framework JavaScript required. */
:where(.tuition-body, .tuition-public, .spay-redirect) {
  --ui-surface: #fff;
  --ui-subtle: #f5f7fb;
  --ui-shadow: 0 4px 20px rgb(24 39 66 / 4%);
  --line: #e2e8f0;
  --ink: #18253d;
  --text: #384860;
  --muted: #63738a;
  --ui-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.tuition-body { background: var(--tuition-page); }
.tuition-body[data-theme=dark] {
  --ui-surface: #1c2739;
  --ui-subtle: #152032;
  --line: #344258;
  --ink: #edf3fc;
  --text: #d2dceb;
  --muted: #a8b8cf;
  --ui-shadow: 0 4px 20px rgb(0 0 0 / 12%);
  background: #111b2b;
}
:where(.tuition-body, .tuition-public, .spay-redirect) :where(button, input, select, textarea) { font: inherit; }
:where(.tuition-body, .tuition-public, .spay-redirect) [hidden] { display: none !important; }
:where(.tuition-body, .tuition-public, .spay-redirect) :focus-visible { outline: 3px solid color-mix(in srgb, var(--tuition) 42%, transparent); outline-offset: 3px; }
:where(.tuition-body, .tuition-public) :where(h1, h2, h3, h4) { line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.tuition-body h1 { font-size: clamp(28px, 2.8vw, 38px); }
.tuition-body h2 { font-size: 21px; }
.tuition-body h3 { font-size: 17px; }
.tuition-body p, .tuition-public p { font-size: 14px; line-height: 1.65; }
.tuition-body small, .tuition-public small { font-size: 12px !important; line-height: 1.55; }
.tuition-body .eyebrow, .tuition-public .eyebrow { font-size: 10px !important; font-weight: 750; letter-spacing: .12em; }
.tuition-body .main-content { max-width: 1440px; padding: 36px 36px 0; gap: 24px; }
.tuition-body .main-content > * { flex-shrink: 0; }
.tuition-body .main-content > :where(.page-heading, .stats-grid, .section-space, .attendance-filters, .report-filters, .class-section, .staff-summary, .student-hero, .calendar-legend, .family-payment, .parent-attendance-filters, .attendance-summary-grid) { margin-top: 0; margin-bottom: 0; }
.tuition-body .page-heading { align-items: center; gap: 24px; padding: 0 0 24px; border-color: var(--line); }
.tuition-body .page-heading h1 { margin: 8px 0 10px; }
.tuition-body .page-heading p { max-width: 760px; margin: 0; color: var(--muted); }
.tuition-body .page-heading > :is(form, a, button) { flex-shrink: 0; }
.tuition-body .panel, .tuition-public .registration-card, .tuition-public .auth-card {
  border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface); box-shadow: var(--ui-shadow);
}
.tuition-body .pad { padding: 26px; }
.tuition-body .panel-heading { gap: 18px; padding: 24px 26px; background: transparent; }
.tuition-body .pad > .panel-heading { padding: 0 0 20px; }
.tuition-body .panel-heading h2, .tuition-body .panel-heading h3 { margin: 0 0 6px; }
.tuition-body .panel-heading p { margin: 0; color: var(--muted); }
.tuition-body .detail-grid, .tuition-body .dashboard-columns, .tuition-body .settings-grid { gap: 24px; align-items: start; }
.tuition-body .stack { gap: 24px; }
.tuition-body .app-footer { gap: 14px; padding: 28px 0 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

/* Comfortable navigation and distinct, lightweight SVG icons. */
.tuition-sidebar { padding: 24px 16px; box-shadow: none; }
.tuition-sidebar .workspace-brand { padding-inline: 8px; }
.tuition-sidebar .school-switch { gap: 10px; padding: 15px 12px; margin-block: 26px 22px; border-color: #ffffff24; background: #ffffff09; }
.tuition-sidebar .school-switch b { font-size: 13px; line-height: 1.45; }
.tuition-sidebar .school-switch small { color: #c4d4ef; }
.tuition-sidebar .school-switch .school-mark { width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; background: #ffffff1f; color: white; }
.tuition-sidebar .nav-label { margin: 24px 12px 10px; color: #b3c8e6; font-size: 10px; letter-spacing: .12em; }
.tuition-sidebar .nav-item { min-height: 46px; gap: 12px; margin-bottom: 5px; padding: 11px 14px; border-radius: 11px; color: #d1e0f7; font-size: 13px; font-weight: 550; }
.tuition-sidebar .nav-item.active { background: #fff; color: var(--tuition-deep); box-shadow: 0 4px 12px #071c3520; }
.tuition-sidebar .nav-item:hover:not(.active) { background: #ffffff12; color: white; }
.tuition-sidebar .nav-group { margin: 0 0 5px; }
.tuition-sidebar .nav-group > summary { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 14px; border-radius: 11px; color: #d1e0f7; font-size: 13px; font-weight: 550; list-style: none; cursor: pointer; }
.tuition-sidebar .nav-group > summary::-webkit-details-marker { display: none; }
.tuition-sidebar .nav-group > summary::marker { content: ''; }
.tuition-sidebar .nav-group > summary span { flex: 1; }
.tuition-sidebar .nav-group > summary::after { content: ''; width: 6px; height: 6px; flex-shrink: 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }
.tuition-sidebar .nav-group[open] > summary::after { transform: rotate(45deg); }
.tuition-sidebar .nav-group > summary:hover, .tuition-sidebar .nav-group.current > summary { color: #fff; background: #ffffff12; }
.tuition-sidebar :is(.nav-item, .nav-group > summary):focus-visible { outline: 2px solid #d2e5ff; outline-offset: 2px; }
.tuition-sidebar .nav-submenu { display: grid; gap: 3px; margin: 6px 0 12px 24px; padding-left: 12px; border-left: 1px solid #ffffff24; }
.tuition-sidebar .nav-submenu .nav-item { min-height: 40px; margin: 0; padding: 10px 12px; border-radius: 9px; font-size: 12px; line-height: 1.5; }
.tuition-body .icon { flex-shrink: 0; stroke-width: 1.8; }
.tuition-sidebar .sidebar-bottom { color: #c2d5ed; }
.tuition-body .sidebar-toggle { width: 40px; height: 40px; color: var(--ink); border-color: var(--line); cursor: pointer; }
.tuition-body .sidebar-toggle .icon { transform: rotate(180deg); }
@media (min-width: 761px) {
  .tuition-body.sidebar-collapsed { --sidebar: 80px; }
  .tuition-body.sidebar-collapsed .tuition-sidebar { padding: 24px 12px; }
  .tuition-body.sidebar-collapsed .workspace-brand { justify-content: center; padding: 0; margin-bottom: 28px; }
  .tuition-body.sidebar-collapsed .workspace-brand > span,
  .tuition-body.sidebar-collapsed .school-switch,
  .tuition-body.sidebar-collapsed .nav-label,
  .tuition-body.sidebar-collapsed .sidebar-bottom,
  .tuition-body.sidebar-collapsed .nav-submenu,
  .tuition-body.sidebar-collapsed .nav-group > summary::after { display: none; }
  .tuition-body.sidebar-collapsed .tuition-sidebar :is(nav > .nav-item, .nav-group > summary) { justify-content: center; padding: 12px; min-height: 48px; }
  .tuition-body.sidebar-collapsed .tuition-sidebar :is(nav > .nav-item, .nav-group > summary) > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tuition-body.sidebar-collapsed .sidebar-toggle .icon { transform: none; }
}
@media (max-width: 760px) { .tuition-body .topbar .sidebar-toggle { display: none; } }
.tuition-body .topbar { padding-inline: 30px; background: var(--ui-surface); border-color: var(--line); box-shadow: none; }
.tuition-body .guide-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.tuition-body .guide-contents { position: sticky; top: 100px; padding: 22px 18px; }
.tuition-body .guide-contents h2 { font-size: 16px; margin: 0 10px 16px; }
.tuition-body .guide-contents a { display: flex; align-items: start; gap: 12px; padding: 12px 10px; border-radius: 9px; color: var(--text); font-size: 13px; line-height: 1.5; }
.tuition-body .guide-contents a:hover { background: var(--ui-subtle); color: var(--tuition); }
.tuition-body .guide-contents .icon { margin-top: 1px; }
.tuition-body .guide-sections { display: grid; gap: 24px; min-width: 0; }
.tuition-body .guide-section { padding: 28px; scroll-margin-top: 100px; }
.tuition-body .guide-section header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tuition-body .guide-section h2 { margin: 0; font-size: 20px; }
.tuition-body .guide-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--ui-subtle); color: var(--tuition); }
.tuition-body .guide-section ol { display: grid; gap: 16px; padding-left: 24px; margin: 0 0 24px; }
.tuition-body .guide-section li { padding-left: 6px; color: var(--text); line-height: 1.7; }
.tuition-body .guide-section li::marker { font-weight: 700; color: var(--tuition); }
.tuition-body .audit-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; padding: 24px; }
.tuition-body .audit-filters label:first-child { flex: 2 1 240px; }
.tuition-body .audit-filters label { flex: 1 1 150px; min-width: 0; margin: 0; }
.tuition-body .audit-filters :is(input, select) { width: 100%; max-width: none; }
.tuition-body .audit-action { display: block; margin-top: 8px; overflow-wrap: anywhere; font-size: 12px; }
.tuition-body .audit-path { overflow-wrap: anywhere; }
.tuition-body .audit-table td { vertical-align: top; }
.tuition-body .audit-table td:first-child { white-space: nowrap; }
.tuition-body .audit-table td:nth-child(3) { width: 29%; }
.tuition-body .audit-table td:nth-child(4) { width: 26%; }
@media (max-width: 1000px) { .tuition-body .guide-layout { grid-template-columns: minmax(0, 1fr); } .tuition-body .guide-contents { position: static; } }
@media (max-width: 760px) { .tuition-body .guide-section { padding: 20px; scroll-margin-top: 84px; } .tuition-body .audit-table td { width: auto !important; } .tuition-body .audit-filters label, .tuition-body .audit-filters label:first-child { flex-basis: 100%; } }
.tuition-body .topbar-right { gap: 16px; }
.tuition-body .breadcrumb { color: var(--muted); font-size: 12px; }
.tuition-body .breadcrumb b { color: var(--ink); }
.tuition-body .account b { font-size: 12px; }
.tuition-body .account small { font-size: 11px !important; }
.tuition-body .account-trigger { gap: 10px; }
.tuition-body :is(.topbar-bell, .theme-toggle, .language-toggle) { min-height: 40px; border-color: var(--line); box-shadow: none; background: var(--ui-surface); }
.tuition-body .topbar-dropdown { max-width: calc(100vw - 24px); border-radius: 16px; border-color: var(--line); background: var(--ui-surface); box-shadow: 0 16px 48px #14274224; }
.tuition-body .topbar-dropdown > header, .tuition-body .account-card { padding: 20px; }
.tuition-body .account-dropdown > a, .tuition-body .dropdown-logout, .tuition-body .notification-menu-item { padding: 15px 20px; font-size: 13px; gap: 12px; }
.tuition-body .topbar-dropdown { max-height: calc(100dvh - 110px); }
.tuition-body .notification-dropdown:not([hidden]) { display: flex; flex-direction: column; }
.tuition-body .notification-dropdown > header { flex-shrink: 0; flex-wrap: wrap; }
.tuition-body .dropdown-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.tuition-body .account-dropdown { overflow-y: auto; overscroll-behavior: contain; }
.tuition-body :is(.notification-menu-item > span:last-child, .account-card > span:last-child) { min-width: 0; overflow-wrap: anywhere; }
.tuition-body .notification-menu-item { grid-template-columns: 36px minmax(0, 1fr); background: var(--ui-surface); color: var(--text); }
.tuition-body .notification-menu-item:hover { background: var(--ui-subtle); }
.tuition-body .notification-menu-item b { font-size: 13px; }
.tuition-body .notification-menu-item small { font-size: 12px; }
.tuition-body .dropdown-text-button { min-height: 44px; font-size: 12px; }
.tuition-body .account-card { background: var(--ui-subtle); }

/* One form rhythm across registration, profiles, filters and account editors. */
:where(.tuition-body, .tuition-public) .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
:where(.tuition-body, .tuition-public) .form-grid > * { min-width: 0; }
:where(.tuition-body, .tuition-public) .form-span { grid-column: 1 / -1; }
:where(.tuition-body, .tuition-public) .stack-form { gap: 22px; }
.tuition-body label, .tuition-public label { color: var(--ink); font-size: 13px; }
:where(.tuition-body, .tuition-public) :is(.stack-form label, .form-field > label, .form-grid > label, .inline-payment label) { display: grid; gap: 8px; margin: 0; font-weight: 600; }
:where(.tuition-body, .tuition-public) .field-label { display: block; font-size: 13px; line-height: 1.4; font-weight: 600; }
:where(.tuition-body, .tuition-public) .required-mark { display: inline; margin-left: 3px; color: #c34044; font-size: inherit; vertical-align: baseline; }
:where(.tuition-body, .tuition-public) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]):not([type=range]), select, textarea) {
  min-width: 0; min-height: 44px; padding: 11px 13px; border: 1px solid #cdd7e4; border-radius: 10px;
  background: var(--ui-surface); color: var(--ink); font-size: 14px; font-weight: 400; box-shadow: 0 1px 2px #18253d03;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(.tuition-body, .tuition-public) :is(.form-grid, .form-field, .stack-form, .inline-editor, .inline-payment) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { width: 100%; }
:where(.tuition-body, .tuition-public) textarea { resize: vertical; min-height: 100px; line-height: 1.65; }
:where(.tuition-body, .tuition-public) :is(input, select, textarea):focus { border-color: var(--tuition); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tuition) 13%, transparent); outline: none; }
:where(.tuition-body, .tuition-public) input::placeholder, :where(.tuition-body, .tuition-public) textarea::placeholder { color: #8290a3; opacity: 1; }
:where(.tuition-body, .tuition-public) :is(label > small, .form-field > small) { color: var(--muted); font-size: 12px !important; font-weight: 400; }
:where(.tuition-body, .tuition-public) input[type=file] { padding: 7px; font-size: 12px; }
:where(.tuition-body, .tuition-public) input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--ui-subtle); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
:where(.tuition-body, .tuition-public) input[type=checkbox], :where(.tuition-body, .tuition-public) input[type=radio] { accent-color: var(--tuition); }
.tuition-body .form-panel { max-width: 1040px; width: 100%; align-self: center; padding: 0; }
.tuition-body .form-section { padding: 28px 30px; border-bottom: 1px solid var(--line); }
.tuition-body .form-section:last-of-type { border-bottom: 0; }
.form-section-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 24px; }
.form-section-heading .section-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tuition-soft); color: var(--tuition-deep); }
.tuition-body .form-section-heading h2 { margin: 0 0 5px; font-size: 18px; }
.tuition-body .form-section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.tuition-body .form-panel > .stack-form { gap: 0; }
.tuition-body .student-form .row { --bs-gutter-y: 22px; --bs-gutter-x: 24px; }
:where(.tuition-body, .tuition-public) .form-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.tuition-body .form-panel .form-actions { margin: 0; padding: 20px 30px; background: var(--ui-subtle); }
.tuition-body :is(.parent-lifecycle-actions, .student-lifecycle-actions) { gap: 12px; flex-wrap: wrap; margin-block: 20px; }
.tuition-body .profile-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); }
.tuition-body .profile-layout .form-actions .button { width: auto; }

/* Clear actions with enough room for touch and keyboard use. */
.tuition-body .button, .tuition-public .button, .spay-redirect .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 11px 18px;
  border-radius: 10px; font-size: 13px; font-weight: 650; line-height: 1.4; text-align: center; text-decoration: none;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--tuition) 12%, transparent); transition: background .15s ease, border-color .15s ease;
}
.tuition-body .button.secondary, .tuition-public .button.secondary { background: var(--ui-surface); border-color: #cdd7e4; color: var(--ink); box-shadow: 0 1px 2px #18253d05; }
:where(.tuition-body, .tuition-public) .button.secondary:hover { background: var(--ui-subtle); border-color: #a7b8ce; }
.tuition-body .small-button { min-height: 36px; padding: 8px 12px; font-size: 12px; }
:where(.tuition-body, .tuition-public) .text-button { min-height: 36px; padding: 7px 10px; border-radius: 8px; font-size: 12px; text-underline-offset: 3px; }
.tuition-body .staff-edit-button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.tuition-body .icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-size: 22px; }
.tuition-body .mobile-menu { display: none; }
.tuition-body .button:disabled, .tuition-public .button:disabled { box-shadow: none; opacity: .55; cursor: not-allowed; }
.tuition-body .back-link, .tuition-public .auth-back { font-size: 13px; text-underline-offset: 4px; }
.tuition-body .pill { max-width: 100%; padding: 5px 10px; font-size: 11px; font-weight: 650; line-height: 1.5; white-space: normal; }
.tuition-body .alert, .tuition-body .notice, .tuition-public .alert, .tuition-public .notice { padding: 15px 18px; border-radius: 12px; font-size: 14px; line-height: 1.6; }

/* Readable records with mobile card presentation; schedules retain their grid. */
.tuition-body .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.tuition-body table { font-size: 13px; }
.tuition-body table th { padding: 14px 20px; background: var(--ui-subtle); color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
.tuition-body table td { padding: 18px 20px; border-color: var(--line); color: var(--text); font-size: 13px; line-height: 1.6; vertical-align: top; }
.tuition-body table td b { color: var(--ink); font-weight: 650; }
.tuition-body table td small { margin-top: 5px; font-size: 12px !important; }
.tuition-body tbody tr:hover { background: color-mix(in srgb, var(--tuition-soft) 35%, var(--ui-surface)); }
.tuition-body td a { text-underline-offset: 4px; }
.tuition-body td.money { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tuition-body .cell-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tuition-body .payment-actions { gap: 10px; min-width: 200px; }
.tuition-body .manual-payment { margin-top: 10px; }
.tuition-body .manual-payment summary { width: fit-content; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--tuition-deep); font-size: 12px; font-weight: 600; }
.tuition-body .manual-payment[open] summary { margin-bottom: 12px; }
.tuition-body .inline-payment { gap: 12px; min-width: 220px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--ui-subtle); }
.tuition-body .review-form { gap: 12px; }
.tuition-body .review-form > div { gap: 8px; flex-wrap: wrap; }
.tuition-body .quran-placement { flex-wrap: wrap; gap: 8px; }
.tuition-body .quran-placement select { max-width: none; }
.tuition-body .record-grid { grid-template-columns: minmax(110px, .65fr) minmax(0, 1fr); gap: 0 22px; margin: 16px 0 0; }
.tuition-body .record-grid dt, .tuition-body .record-grid dd { padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.tuition-body .record-grid dt { color: var(--muted); font-weight: 400; }
.tuition-body .record-grid dd { color: var(--ink); font-weight: 550; }

/* Dashboards, calendars and class schedules. */
.tuition-body .welcome-banner { min-height: 220px; padding: 30px 34px; border-radius: 20px; box-shadow: none; }
.tuition-body .main-content > .welcome-banner { margin-bottom: 0; }
.tuition-body .welcome-banner h2 { font-size: clamp(27px, 2.8vw, 36px); }
.tuition-body .welcome-banner a { display: inline-flex; gap: 12px; align-items: center; margin-top: 10px; padding: 9px 14px; border-radius: 9px; background: #ffffff16; font-size: 13px; }
.tuition-body .tuition-orbit { width: 150px; height: 140px; margin: 0 0 0 20px; border-radius: 18px; background: #ffffff10; border: 1px solid #ffffff28; box-shadow: none; }
.tuition-body .tuition-orbit b { font-size: 42px; }
.tuition-body .tuition-orbit span { color: #e1ebff; font-size: 11px; line-height: 1.6; }
.tuition-body .stats-grid { gap: 18px; }
.tuition-body .stat-card, .tuition-body .attendance-summary-card { padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.tuition-body .stat-card > div { font-size: 13px; color: var(--muted); }
.tuition-body .stat-card > strong { display: block; margin-block: 14px 6px; color: var(--ink); font-size: 30px; line-height: 1.3; letter-spacing: -.035em; }
.tuition-body .stat-card .stat-money { font-size: clamp(21px, 2vw, 29px) !important; }
.tuition-body .stat-icon { width: 36px; height: 36px; border-radius: 11px; }
.tuition-body .dashboard-calendar article { padding-block: 15px; gap: 13px; }
.tuition-body .dashboard-calendar article > div b { font-size: 13px; }
.tuition-body .section-heading { gap: 20px; margin-bottom: 20px; }
.tuition-body .section-heading p { font-size: 13px; }
.tuition-body .section-count { padding: 7px 12px; font-size: 12px; }
.tuition-body .weekly-timetable th { padding: 16px; }
.tuition-body .weekly-timetable thead th { background: var(--tuition-deep); color: white; text-transform: none; font-size: 13px; letter-spacing: 0; }
.tuition-body .weekly-timetable tbody > tr > th { background: var(--ui-subtle); color: var(--ink); font-size: 13px; }
.tuition-body .weekly-timetable td { padding: 12px; }
.tuition-body .timetable-lesson { gap: 7px; min-height: 150px; padding: 14px; background: var(--tuition-soft); }
.tuition-body .timetable-lesson strong { color: var(--ink); font-size: 14px; }
.tuition-body .timetable-lesson span, .tuition-body .timetable-lesson a { font-size: 12px; }
.tuition-body .quran-lesson { min-height: 110px; background: #fff9e9; }
.tuition-body .calendar-toolbar { gap: 16px; padding: 18px 24px; }
.tuition-body .calendar-toolbar h2 { margin: 3px 0 0; font-size: 23px; }
.tuition-body .calendar-shell { overflow-x: auto; overscroll-behavior-x: contain; }
.tuition-body .calendar-weekdays, .tuition-body .calendar-grid { min-width: 720px; }
.tuition-body .calendar-weekdays { background: var(--ui-subtle); }
.tuition-body .calendar-weekdays span { padding: 14px 10px; color: var(--muted); font-size: 12px; font-weight: 650; }
.tuition-body .calendar-day { min-height: 150px; padding: 12px; background: var(--ui-surface); }
.tuition-body .calendar-day header > span { font-size: 14px; }
.tuition-body .calendar-day.outside { background: var(--ui-subtle); opacity: .7; }
.tuition-body .calendar-day.today { background: color-mix(in srgb, var(--tuition-soft) 55%, var(--ui-surface)); }
.tuition-body .calendar-event { padding: 8px 10px; margin-top: 8px; border-radius: 8px; }
.tuition-body .calendar-event b { font-size: 11px; line-height: 1.5; }
.tuition-body .calendar-event small { font-size: 10px !important; }
.tuition-body .calendar-legend { gap: 16px; flex-wrap: wrap; font-size: 12px; }

/* Attendance, filters, staff and settings. */
.tuition-body :is(.toolbar, .attendance-filters, .parent-attendance-filters) { gap: 14px; padding: 20px 24px; align-items: end; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.tuition-body .toolbar label { display: grid; gap: 7px; font-size: 12px; }
.tuition-body .toolbar :is(input, select) { min-height: 44px; }
.tuition-body .filters > div { min-width: 0; }
.tuition-body .filters label { display: block; margin-bottom: 8px; font-size: 13px; }
.tuition-body .attendance-filters > div:first-of-type { flex: 1 1 240px; }
.tuition-body .attendance-filters select { width: 100%; max-width: 100%; }
.tuition-body .attendance-sheet-head { padding: 26px; background: var(--ui-subtle); }
.tuition-body .attendance-guidance { gap: 12px; margin: 20px 24px; padding: 14px 16px; }
.tuition-body .attendance-guidance b, .tuition-body .attendance-progress strong { font-size: 13px; }
.tuition-body .attendance-roster-head { padding: 13px 26px; font-size: 10px; background: var(--ui-subtle); }
.tuition-body .attendance-roster-row { padding: 20px 26px; gap: 24px; }
.tuition-body .attendance-student b { font-size: 14px; }
.tuition-body .attendance-status-options { gap: 12px; }
.tuition-body .attendance-option-control { min-height: 44px; gap: 8px; font-size: 13px; }
.tuition-body .attendance-actions { gap: 18px; padding: 20px 26px; background: var(--ui-subtle); }
.tuition-body .attendance-sheet-meta dt { font-size: 10px; }
.tuition-body .attendance-sheet-meta dd { font-size: 13px; }
.tuition-body .attendance-reflection-body textarea { font-size: 15px; }
.tuition-body .report-filters { gap: 16px; padding: 22px; border-radius: var(--ui-radius); background: var(--ui-surface); }
.tuition-body .report-filters label { font-size: 12px; }
.tuition-body .staff-layout { gap: 24px; grid-template-columns: minmax(0, 1fr) 380px; }
.tuition-body .staff-summary { gap: 14px; }
.tuition-body .staff-summary span { padding: 18px; box-shadow: var(--ui-shadow); background: var(--ui-surface); }
.tuition-body .staff-directory-toolbar { gap: 16px; padding: 18px 22px; background: var(--ui-subtle); }
.tuition-body .staff-directory-toolbar label { font-size: 10px; }
.tuition-body .staff-directory-total { background: var(--ui-subtle); }
.tuition-body .class-option-list { padding: 8px; background: var(--ui-subtle); }
.tuition-body .class-option-group h3 { font-size: 11px; padding: 10px; background: var(--ui-subtle); }
.tuition-body .class-assignment-option, .tuition-body .compact-class-option { background: var(--ui-surface); }
.tuition-body .class-assignment-option b { font-size: 12px; }
.tuition-body .staff-action-stack { gap: 9px; }
.tuition-body .staff-create { top: 100px; }
.tuition-body :is(.preference-choice, .density-control, .preset-picker) legend { font-size: 13px; margin-bottom: 12px; }
.tuition-body .staff-classes legend > span b { font-size: 13px; }
.tuition-body .preset-card-body > b { font-size: 13px; }
.tuition-body .density-preview-copy b { font-size: 13px; }
.tuition-body .settings-row .remove-builder-row { align-self: end; }
.tuition-body .settings-grid .panel { padding: 26px; }
.tuition-body .settings-grid label { font-size: 13px; }
.tuition-body .system-settings .registration-card { padding: 26px; background: var(--ui-surface); }
.tuition-body .builder-list { gap: 14px; }
.tuition-body .builder-row { padding: 18px; border-radius: 12px; background: var(--ui-subtle); gap: 14px; }
.tuition-body .system-settings { display: grid; gap: 24px; }
.tuition-body .system-settings > .section-space { margin-top: 0; }
.tuition-body .settings-list { gap: 16px; }
.tuition-body [data-event-list] { max-height: 560px; overflow-y: auto; overscroll-behavior-y: contain; padding-right: 8px; scrollbar-width: thin; }
.tuition-body .settings-row { padding: 18px; gap: 14px; border-radius: 12px; background: var(--ui-subtle); }
.tuition-body .settings-row label { display: grid; gap: 8px; font-size: 12px; }
.tuition-body .settings-row .setting-toggle { display: flex; align-items: center; gap: 8px; }
.tuition-body .remove-builder-row { min-width: 36px; min-height: 40px; border-radius: 8px; font-size: 20px; }
.tuition-body .intake-review-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.tuition-body .intake-review-form > label { display: grid; flex: 1 0 100%; gap: 8px; margin-bottom: 4px; }
.tuition-body .parent-list-toolbar .inline-editor { grid-template-columns: minmax(200px, 1fr) auto; }
.tuition-body .parent-state-tabs { gap: 10px; }
.tuition-body .notification-list { min-width: 0; padding: 0; grid-template-columns: minmax(0, 1fr); }
.tuition-body .notification-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 18px; padding: 24px; border-radius: var(--ui-radius); background: var(--ui-surface); }
.tuition-body .notification-item > div { min-width: 0; overflow-wrap: anywhere; }
.tuition-body .notification-item.unread { background: color-mix(in srgb, var(--tuition-soft) 30%, var(--ui-surface)); border-left-color: var(--tuition); }
.tuition-body .notification-item h3 { margin: 8px 0; font-size: 17px; }
.tuition-body .notification-item p { white-space: pre-line; }
.tuition-body .student-hero { padding: 28px; background: linear-gradient(120deg, var(--tuition-deep), var(--tuition)); }
.tuition-body .student-hero-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }
.tuition-body .student-hero-avatar { width: 72px; height: 72px; border: 3px solid #ffffff40; border-radius: 18px; object-fit: cover; background: #ffffff20; }
.tuition-body .student-hero h1 { font-size: 30px; overflow-wrap: anywhere; }
.tuition-body .student-document-link { margin-top: 20px; }
.tuition-body .student-placement-head { padding: 24px; background: var(--ui-subtle); }
.tuition-body .student-placement-form { padding: 24px; gap: 22px; }
.tuition-body .placement-fee-summary { background: var(--ui-surface); }
.tuition-body .placement-level-field > span, .tuition-body .placement-programme legend > span b { font-size: 13px; }
.tuition-body .placement-subject-option { padding: 14px; min-height: 68px; background: var(--ui-surface); }
.tuition-body .placement-subject-copy b { font-size: 13px; }
.tuition-body .placement-actions { gap: 16px; flex-wrap: wrap; }

/* Registration and checkout are equally readable outside the signed-in shell. */
.tuition-public { background: #f5f7fb; }
.tuition-public .public-header { background: white; border-color: var(--line); }
.tuition-public .public-footer { padding: 24px; font-size: 12px; }
.tuition-public .login-grid { max-width: 1060px; margin: 48px auto; border-radius: 24px; box-shadow: 0 16px 60px #18253d0b; }
.tuition-public .login-story { padding: 48px; }
.tuition-public .login-form { padding: 44px 48px; }
.tuition-public .login-form h2 { font-size: 30px; }
.tuition-public .login-form form > label { display: block; margin: 18px 0 8px; }
.tuition-public .login-form .password-field { margin-bottom: 8px; }
.tuition-public .auth-forgot { margin: 10px 0 20px; font-size: 13px; }
.tuition-public .login-form .small { margin-top: 24px; }
.tuition-public .auth-card { padding: 36px; }
.tuition-public .auth-card h1 { font-size: 29px; }
.tuition-public .auth-card .stack-form { margin-top: 24px; }
:where(.tuition-body, .tuition-public) .registration-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 14px; }
:where(.tuition-body, .tuition-public) .registration-steps span { padding: 16px; font-size: 12px; }
:where(.tuition-body, .tuition-public) .registration-steps b { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--tuition-soft); font-size: 11px; }
:where(.tuition-body, .tuition-public) .registration-card { padding: 28px; margin-top: 20px; }
:where(.tuition-body, .tuition-public) .registration-card > header { margin-bottom: 24px; gap: 14px; }
:where(.tuition-body, .tuition-public) .student-entry { padding: 24px; border-radius: 14px; background: var(--ui-subtle); }
:where(.tuition-body, .tuition-public) .student-entry-head { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px; gap: 12px; }
:where(.tuition-body, .tuition-public) .subject-picker { gap: 12px; margin-block: 24px; }
:where(.tuition-body, .tuition-public) .subject-picker label { position: relative; display: block; }
:where(.tuition-body, .tuition-public) .subject-picker input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
:where(.tuition-body, .tuition-public) .subject-picker > p { margin-bottom: 2px; }
:where(.tuition-body, .tuition-public) .subject-picker label > span { padding: 14px 18px; border-radius: 11px; background: var(--ui-surface); font-size: 13px; }
:where(.tuition-body, .tuition-public) .subject-picker label small { margin-top: 6px; font-size: 11px !important; font-weight: 400; }
:where(.tuition-body, .tuition-public) .subject-picker input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--tuition) 40%, transparent); outline-offset: 3px; }
:where(.tuition-body, .tuition-public) .subject-picker label:has(input:disabled) { opacity: .6; cursor: not-allowed; }
:where(.tuition-body, .tuition-public) .enrolment-month-field { max-width: 560px; margin-bottom: 24px; }
:where(.tuition-body, .tuition-public) .registration-submit { padding: 26px; }
:where(.tuition-body, .tuition-public) .fee-preview { flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; }
:where(.tuition-body, .tuition-public) .fee-preview > div { width: 100%; }
:where(.tuition-body, .tuition-public) .fee-preview p { max-width: none; }
.tuition-public .public-payment-checkout { max-width: 1080px; }
.tuition-public .public-payment-checkout .payment-confirmation { margin-top: 24px; }
.tuition-public .public-payment-checkout .panel { border: 1px solid var(--line); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.tuition-public .public-payment-checkout .pad { padding: 28px; }
.tuition-public .public-payment-checkout .payment-confirmation-summary { top: 24px; }
.tuition-public .public-payment-checkout .checkout-line { padding-block: 16px; }
.tuition-public .public-payment-checkout .checkout-line-heading { margin-top: 20px; }
:where(.tuition-body, .tuition-public) .registration-submit .check-row span { font-size: 13px; }
:where(.tuition-body, .tuition-public) .registration-submit .form-actions a { font-size: 13px; }
.tuition-body .family-payment { padding: 26px; background: linear-gradient(120deg, var(--tuition-deep), var(--tuition)); }
.tuition-body .family-payment .eyebrow { color: #d4e4ff; }
.tuition-body .family-payment p { color: #e2ebff; }
.tuition-body .checkout-modal, .tuition-body .attendance-reflection-modal { padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--ui-surface); box-shadow: 0 24px 100px #07172f40; }
.tuition-body .attendance-reflection-modal { width: min(760px, calc(100% - 32px)); max-height: 92dvh; }
html:has(.tuition-body dialog[open]) { overflow: hidden; }
.tuition-body .attendance-reflection-modal form { max-height: calc(92dvh - 2px); }
.tuition-body .attendance-reflection-body { min-height: 0; overscroll-behavior: contain; }
.tuition-body dialog::backdrop { background: #0d1b35a6; backdrop-filter: blur(3px); }
.tuition-body .modal-header { gap: 20px; padding: 24px 28px; background: var(--ui-subtle); }
.tuition-body .modal-header p { margin: 8px 0 0; font-size: 13px; }
.tuition-body .modal-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; font-size: 24px; }
.tuition-body .checkout-main, .tuition-body .checkout-summary { padding: 26px; }
.tuition-body .checkout-summary { background: var(--ui-subtle); }
.tuition-body .checkout-summary .button + .button { margin-top: 12px; }
.tuition-body .checkout-choice { padding: 16px; background: var(--ui-surface); }
.tuition-body .checkout-choice b { font-size: 13px; }
.tuition-body .payment-confirmation { gap: 24px; }
.tuition-body .payment-confirmation-summary { padding: 26px; }
.tuition-body .checkout-invoice-meta > span, .tuition-body .checkout-addon-option { background: var(--ui-subtle); }
.spay-redirect { background: #f5f7fb; }
.spay-redirect main { padding: 36px; border-radius: 24px; box-shadow: var(--ui-shadow); }
.spay-redirect main > small { font-size: 12px; }

/* Theme and density preferences continue to apply to the shared presentation. */
.tuition-body[data-theme=dark] :is(.button.secondary, input, select, textarea, .attendance-option-control, .class-assignment-option, .compact-class-option, .staff-edit-close, .staff-readonly-role, .student-entry, .checkout-choice, .registration-submit, .registration-card, .field-hint) { background: var(--ui-surface); border-color: var(--line); color: var(--ink); }
.tuition-body[data-theme=dark] :is(.attendance-actions, .attendance-sheet-head, .attendance-roster-head, .student-placement-head, .staff-directory-toolbar, .modal-header, .checkout-summary, .checkout-invoice-meta > span, .checkout-addon-option, .inline-payment, .builder-row, .class-option-list, .class-option-group h3, .staff-directory-total) { background: var(--ui-subtle); }
.tuition-body[data-theme=dark] .attendance-roster-row:hover { background: var(--ui-subtle); }
.tuition-body[data-theme=dark] .tuition-soft, .tuition-body[data-theme=dark] .timetable-lesson { background: #233651; }
.tuition-body[data-theme=dark] .quran-lesson { background: #343025; }
.tuition-body[data-theme=dark] :is(.back-link, .eyebrow, .topbar-bell, .dropdown-text-button, .confirmation-total strong, .checkout-total strong, .placement-fee-summary strong, .paid-method) { color: #a0c8ff; }
.tuition-body[data-theme=dark] td a:not(.button), .tuition-body[data-theme=dark] .dashboard-widget-head > a { color: #a0c8ff; }
.tuition-body[data-theme=dark] :is(.settings-preview .preview-card, .density-live-preview, .preset-card-body) { background: var(--ui-subtle); border-color: var(--line); }
.tuition-body .document-notice { border-color: #e9d5a6; background: #fffaf0; }
.tuition-body .document-notice ul { display: grid; gap: 8px; margin-bottom: 0; padding-left: 20px; }
.tuition-body[data-theme=dark] .document-notice { background: #302c21; border-color: #665936; }
.tuition-body[data-theme=dark] .document-notice a { color: #f3d58c; }
.tuition-body[data-density=compact] .main-content { padding-top: 26px; gap: 18px; }
.tuition-body[data-density=compact] :is(.pad, .stat-card) { padding: 20px; }
.tuition-body[data-density=compact] td { padding-block: 13px; }
.tuition-body[data-density=spacious] .main-content { gap: 30px; }
.tuition-body[data-density=spacious] :is(.pad, .form-section) { padding: 32px; }
.tuition-body[data-density=spacious] :is(input, select, .button) { min-height: 48px; }
.tuition-body[data-density=spacious] .field-label { font-size: 15px; }
.tuition-body[data-density=compact] .field-label { font-size: 12px; }

@media (max-width: 1400px) {
  .tuition-body .staff-layout { grid-template-columns: minmax(0, 1fr); }
  .tuition-body .staff-create { position: static; }
  .tuition-body .staff-create .stack-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuition-body .staff-create .stack-form > :is(fieldset, .button, .staff-edit-actions, .staff-readonly-role, .notice) { grid-column: 1 / -1; }
}
@media (max-width: 1200px) {
  .tuition-body .main-content { padding-inline: 26px; }
  .tuition-body .report-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .tuition-body .topbar-menu { position: static; }
  .tuition-body .topbar-dropdown { right: 12px; top: calc(100% + 8px); max-width: calc(100% - 24px); }
  .tuition-body .topbar .account-trigger > span:not(.avatar) { display: none; }
}
@media (max-width: 1000px) {
  .tuition-body .staff-layout, .tuition-body .profile-layout, .tuition-body .student-profile-grid { grid-template-columns: minmax(0, 1fr); }
  .tuition-body .staff-create { position: static; }
  .tuition-body .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuition-public .login-grid { margin: 30px 24px; }
  .tuition-public .login-story, .tuition-public .login-form { padding: 32px; }
}
@media (max-width: 760px) {
  .tuition-body .main-content, .tuition-body[data-density] .main-content { padding: 24px 16px 0; gap: 20px; }
  .tuition-body .topbar { padding-inline: 16px; }
  :where(.tuition-body, .tuition-public) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea), .tuition-body[data-density] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]), select, textarea) { font-size: 16px; }
  .tuition-body .button, .tuition-body[data-density] .button, .tuition-public .button { min-height: 44px; white-space: normal; }
  .tuition-body .mobile-menu { display: inline-grid; }
  .tuition-body .topbar-right { gap: 10px; }
  .tuition-body .topbar-menu { position: static; }
  .tuition-body .topbar-dropdown { left: 12px; right: 12px; top: calc(100% + 8px); width: auto; max-width: none; max-height: calc(100dvh - 90px); }
  .tuition-body .account-dropdown { width: auto; }
  .tuition-body .notification-dropdown > header { gap: 8px; padding: 14px 16px; }
  .tuition-body .notification-menu-item { padding: 16px; }
  .tuition-body .topbar .account-trigger > span:not(.avatar) { display: none; }
  .tuition-body .topbar-left { min-width: 0; }
  .tuition-body .breadcrumb { max-width: 165px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tuition-body .theme-toggle { display: none; }
  .tuition-body .page-heading { align-items: flex-start; flex-direction: column; gap: 18px; padding-bottom: 20px; }
  .tuition-body h1 { font-size: 28px; }
  .tuition-body .pad, .tuition-body[data-density=spacious] .pad { padding: 20px; }
  .tuition-body .panel-heading { padding: 20px; align-items: flex-start; flex-wrap: wrap; }
  .tuition-body .detail-grid, .tuition-body .dashboard-columns, .tuition-body .settings-grid, .tuition-body .payment-confirmation { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  :where(.tuition-body, .tuition-public) .form-grid, .tuition-body .admin-family-registration .form-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tuition-body .form-section, .tuition-body[data-density=spacious] .form-section { padding: 22px 20px; }
  .tuition-body .form-panel .form-actions { padding: 18px 20px; }
  .tuition-body .form-section-heading h2 { font-size: 17px; }
  .tuition-body .welcome-banner { padding: 26px; }
  .tuition-body .welcome-banner h2 { font-size: 29px; }
  .tuition-body .tuition-orbit { display: none; }
  .tuition-body .stats-grid { gap: 12px; }
  .tuition-body .stat-card { padding: 17px; }
  .tuition-body .stat-icon { width: 28px; height: 28px; }
  .tuition-body .stat-card > strong { font-size: 28px; }
  .tuition-body .stat-card > small { font-size: 11px !important; }
  .tuition-body .toolbar, .tuition-body .report-filters { display: grid; grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .tuition-body .toolbar :is(input, select, button, a.button) { width: 100%; max-width: none; }
  .tuition-body .attendance-reflection-trigger { margin-left: 0; }
  .tuition-body :is(.attendance-filters, .parent-attendance-filters) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; }
  .tuition-body :is(.attendance-filters, .parent-attendance-filters) > div { grid-column: 1 / -1; min-width: 0; }
  .tuition-body :is(.attendance-filters, .parent-attendance-filters) :is(input, select) { width: 100%; max-width: none; }
  .tuition-body :is(.attendance-reflection-trigger, .parent-attendance-filters > button) { grid-column: 1 / -1; width: 100%; }
  .tuition-body .attendance-sheet-head { padding: 20px; align-items: flex-start; flex-wrap: wrap; }
  .tuition-body .attendance-guidance { margin: 16px; align-items: flex-start; }
  .tuition-body .attendance-roster-head { display: none; }
  .tuition-body .attendance-roster-row { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; }
  .tuition-body .attendance-actions { flex-direction: column; align-items: stretch; padding: 20px; }
  .tuition-body .attendance-actions > .button { width: 100%; }
  .tuition-body .attendance-remarks input { min-height: 44px; }
  .tuition-body .calendar-toolbar { gap: 10px; padding: 16px; }
  .tuition-body .calendar-toolbar h2 { font-size: 19px; }
  .tuition-body .calendar-toolbar .small-button { padding-inline: 10px; }
  .tuition-body .inline-editor { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tuition-body .parent-list-toolbar .inline-editor, .tuition-body .settings-row { grid-template-columns: minmax(0, 1fr); }
  .tuition-body .staff-create .stack-form { grid-template-columns: minmax(0, 1fr); }
  .tuition-body .student-hero { padding: 24px; }
  .tuition-body .student-hero-identity { align-items: flex-start; }
  .tuition-body .student-hero h1 { font-size: 25px; }
  .tuition-body .student-hero-avatar { width: 52px; height: 52px; border-radius: 13px; }
  .tuition-body .student-placement-head { flex-wrap: wrap; gap: 16px; }
  .tuition-body .placement-fee-summary { text-align: left; }
  .tuition-body .placement-programme legend { flex-wrap: wrap; }
  .tuition-body .placement-subject-grid { grid-template-columns: minmax(0, 1fr); }
  .tuition-body .placement-actions .button { width: 100%; }
  .tuition-body .record-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tuition-body .record-grid dt { border-bottom: 0; padding: 14px 0 3px; font-size: 12px; }
  .tuition-body .record-grid dd { padding: 0 0 14px; }
  .tuition-body .family-payment { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px; }
  .tuition-body .notification-item { padding: 20px; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .tuition-body .notification-item > :is(form, a) { grid-column: 2; }
  .tuition-body .notification-item h3 { font-size: 16px; }
  .tuition-body .notification-item .notification-mark { width: 36px; height: 36px; }
  .tuition-body .checkout-modal .modal-header, .tuition-body .checkout-main, .tuition-body .checkout-summary { padding: 20px; }
  .tuition-body .checkout-layout { grid-template-columns: minmax(0, 1fr); max-height: none; overflow: visible; }
  .tuition-body .checkout-summary { position: static; }
  .tuition-body .checkout-modal { max-height: 92dvh; overflow-y: auto; }
  .tuition-body .attendance-reflection-actions { flex-wrap: wrap; gap: 10px; }
  .tuition-body .ui-record-table, .tuition-body .ui-record-table tbody, .tuition-body .ui-record-table tr, .tuition-body .ui-record-table td { display: block; width: 100%; min-width: 0; }
  .tuition-body .ui-record-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tuition-body .ui-record-table tr { padding: 14px 20px; border-bottom: 1px solid var(--line); }
  .tuition-body .ui-record-table tr:last-child { border-bottom: 0; }
  .tuition-body .ui-record-table td { display: grid; grid-template-columns: minmax(90px, .45fr) minmax(0, 1fr); gap: 16px; padding: 9px 0 !important; border: 0; }
  .tuition-body .ui-record-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: 0; }
  .tuition-body .ui-record-table td[colspan] { display: block; }
  .tuition-body .ui-record-table td[colspan]::before { display: none; }
  .tuition-body .ui-record-table .cell-content { min-width: 0; overflow-wrap: anywhere; }
  .tuition-body .ui-record-table .payment-actions, .tuition-body .ui-record-table .inline-payment, .tuition-body .ui-record-table .review-form { min-width: 0; }
  .tuition-body .ui-record-table :is(.quran-placement, .cell-actions, .inline-payment) { width: 100%; }
  .tuition-body .ui-record-table .cell-content > .button { white-space: normal; }
  .tuition-public .login-grid { display: block; margin: 24px 16px; }
  .tuition-public .login-story { padding: 28px; }
  .tuition-public .login-story h1 { font-size: 32px; }
  .tuition-public .story-lines { display: none; }
  .tuition-public .login-form { padding: 28px; }
  .tuition-public .public-header-note { display: none; }
  .tuition-public .tuition-registration { width: calc(100% - 32px); margin-top: 24px; }
  .tuition-public .registration-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px; }
  .tuition-public .registration-hero h1 { font-size: 34px; }
  :where(.tuition-body, .tuition-public) .registration-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.tuition-body, .tuition-public) .registration-steps span { padding: 12px; gap: 8px; font-size: 11px; }
  :where(.tuition-body, .tuition-public) .registration-card { padding: 20px; }
  :where(.tuition-body, .tuition-public) .student-entry { padding: 18px; }
  :where(.tuition-body, .tuition-public) .subject-picker label { flex: 1 1 135px; }
  :where(.tuition-body, .tuition-public) .subject-picker label > span { min-width: 0; height: 100%; }
  :where(.tuition-body, .tuition-public) .registration-summary { grid-template-columns: minmax(0, 1fr); }
  .tuition-public .auth-simple { padding: 24px 16px; }
  .tuition-public .auth-card { padding: 28px 24px; }
  .tuition-body .app-footer { flex-direction: column; align-items: flex-start; padding-block: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.tuition-body, .tuition-public) *, :where(.tuition-body, .tuition-public) *::before, :where(.tuition-body, .tuition-public) *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .tuition-body .main-content { display: block; padding: 0 !important; }
  .tuition-body .main-content > * { margin-bottom: 20px; }
  .tuition-body .panel { border-radius: 0; box-shadow: none; overflow: visible; }
  .tuition-body .calendar-grid, .tuition-body .calendar-weekdays { min-width: 0; }
  .tuition-body .ui-record-table { display: table; }
  .tuition-body .ui-record-table tbody { display: table-row-group; }
  .tuition-body .ui-record-table tr { display: table-row; }
  .tuition-body .ui-record-table td { display: table-cell; width: auto; padding: 10px !important; }
  .tuition-body .ui-record-table thead { position: static; width: auto; height: auto; clip-path: none; }
  .tuition-body .ui-record-table td::before { display: none; }
  .tuition-body .attendance-roster-head, .tuition-body .attendance-roster-row { display: grid; grid-template-columns: 30% 45% 25%; gap: 10px; padding: 9px 0; }
  .tuition-body .table-scroll { overflow: visible; }
}

/* Monthly attendance, billing records and class collection. */
.tuition-body .invoice-filters{flex-wrap:wrap;align-items:flex-end;gap:16px}.tuition-body .invoice-filters label{min-width:150px}.tuition-body .filter-search{flex:1;min-width:220px}.tuition-body label.filter-all{display:flex;flex-direction:row;align-items:center;gap:9px;min-width:auto;min-height:44px;margin:0}.tuition-body .filter-all input{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--tuition)}
.tuition-body .invoice-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 24px;border-top:1px solid var(--line,#dce4ec)}.tuition-body .invoice-pagination p{margin:0;color:var(--muted,#718096)}.tuition-body .page-position{padding:8px;color:var(--muted,#718096)}.tuition-body [aria-disabled=true]{opacity:.45;pointer-events:none}
.tuition-body .monthly-grid-scroll{overflow:auto;max-height:650px;overscroll-behavior:contain}.tuition-body .monthly-attendance-grid{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}.tuition-body .monthly-attendance-grid th,.tuition-body .monthly-attendance-grid td{text-align:center;min-width:38px;padding:12px 8px;border-bottom:1px solid var(--line,#dce4ec);white-space:nowrap}.tuition-body .monthly-attendance-grid thead th{position:sticky;top:0;z-index:2;background:var(--tuition-soft);color:var(--text,#172b4d);font-weight:600}.tuition-body .monthly-attendance-grid th:first-child{text-align:left;min-width:240px;max-width:300px;white-space:normal;position:sticky;left:0;background:var(--ui-surface,#fff);z-index:1;padding-left:24px}.tuition-body .monthly-attendance-grid thead th:first-child{z-index:3;background:var(--tuition-soft)}.tuition-body .monthly-attendance-grid th small{display:block;margin:4px 0 0;font-weight:400}.tuition-body .monthly-attendance-grid tbody tr:hover{background:var(--tuition-soft)}.tuition-body .attendance-dot{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;font-weight:700}.tuition-body .attendance-dot.present{background:#e7f8ee;color:#16824c}.tuition-body .attendance-dot.absent{background:#fff0f1;color:#c9344b}.tuition-body .attendance-unmarked{color:#91a1b7}.tuition-body .attendance-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.tuition-body .insights-modal{width:min(1120px,calc(100vw - 48px));max-width:none;max-height:90dvh;padding:0;border:1px solid var(--line,#dce4ec);border-radius:22px;background:var(--ui-surface,#fff);color:var(--text,#172b4d);box-shadow:0 24px 80px #10284e40;overflow:auto}.tuition-body .insights-modal::backdrop{background:#10284e70;backdrop-filter:blur(4px)}.tuition-body .insights-modal .modal-header{position:sticky;top:0;z-index:2;background:var(--tuition-soft);padding:24px;border-bottom:1px solid var(--line,#dce4ec)}.tuition-body .insights-modal .modal-header h2{margin:0 0 8px;font-size:22px}.tuition-body .insights-modal .modal-header p{margin:0}.tuition-body .insights-modal-body{padding:24px}.tuition-body .fee-summary-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:24px}.tuition-body .fee-summary-card{padding:16px;border:1px solid var(--line,#dce4ec);border-top:3px solid var(--tuition);border-radius:14px;text-align:center}.tuition-body .fee-summary-card strong{display:block;font-size:25px}.tuition-body .fee-summary-card small{display:block;margin-top:8px;color:var(--muted,#718096)}.tuition-body .fee-status-line{display:grid;gap:5px;margin-bottom:10px}.tuition-body .fee-status-line .pill{justify-self:start;white-space:normal}.tuition-body [data-fee-rows] .cell-content>small{display:block;min-height:24px;margin:0 0 6px}
.tuition-body .collection-controls{display:grid;gap:14px;margin-top:20px}.tuition-body .collection-controls label{display:grid;gap:8px}.tuition-body .collection-chart{position:relative;width:200px;height:200px;margin:20px auto}.tuition-body .collection-chart svg{width:200px;height:200px}.tuition-body .chart-track,.tuition-body .chart-segment{fill:none;stroke-width:26}.tuition-body .chart-track{stroke:var(--line,#e5eaf2)}.tuition-body .chart-segment{transform:rotate(-90deg);transform-origin:100px 100px;cursor:pointer;transition:stroke-width .15s;stroke-dasharray:0 453}.tuition-body .chart-segment.paid{stroke:#18a66a}.tuition-body .chart-segment.pending{stroke:#e6ac0b}.tuition-body .chart-segment.unpaid{stroke:#e34563}.tuition-body .chart-segment:hover,.tuition-body .chart-segment:focus-visible{stroke-width:32;outline:none;filter:drop-shadow(0 0 3px #10284e60)}.tuition-body .chart-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.tuition-body .chart-centre strong{font-size:27px;color:#15834b}.tuition-body .chart-centre span{margin-top:4px;color:var(--muted,#718096)}.tuition-body .collection-legend button{display:flex;align-items:center;gap:12px;width:100%;border:0;border-top:1px solid var(--line,#dce4ec);background:transparent;color:inherit;padding:16px 4px;text-align:left;border-radius:0}.tuition-body .collection-legend button b{margin-left:auto}.tuition-body .legend-dot{width:12px;height:12px;border-radius:50%;background:#18a66a}.tuition-body .legend-dot.pending{background:#e6ac0b}.tuition-body .legend-dot.unpaid{background:#e34563}.tuition-body .collection-details{width:min(650px,calc(100vw - 48px))}.tuition-body .collection-students{list-style:none;padding:0;margin:0}.tuition-body .collection-students li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line,#dce4ec)}
.tuition-body[data-theme=dark] .monthly-attendance-grid th:first-child,.tuition-body[data-theme=dark] .insights-modal{background:#162338;color:#ecf3ff}.tuition-body[data-theme=dark] .monthly-attendance-grid thead th,.tuition-body[data-theme=dark] .insights-modal .modal-header{background:#20324e;color:#ecf3ff}.tuition-body[data-theme=dark] .chart-centre strong{color:#7de0ad}
@media(max-width:760px){.tuition-body .invoice-filters label{width:100%;min-width:0}.tuition-body .invoice-filters .filter-all{width:auto}.tuition-body .invoice-pagination{padding:18px;justify-content:center}.tuition-body .invoice-pagination .cell-actions{justify-content:center;gap:10px}.tuition-body .page-position{font-size:12px}.tuition-body .insights-modal,.tuition-body .collection-details{width:calc(100vw - 20px);max-height:94dvh;border-radius:16px}.tuition-body .insights-modal .modal-header,.tuition-body .insights-modal-body{padding:18px}.tuition-body .fee-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tuition-body .monthly-attendance-grid th:first-child{min-width:180px;max-width:180px;padding-left:14px}.tuition-body .collection-students li{flex-direction:column;align-items:flex-start}}
@media print{.tuition-body .monthly-grid-scroll{overflow:visible;max-height:none}.tuition-body .monthly-attendance-grid{font-size:8px}.tuition-body .monthly-attendance-grid th,.tuition-body .monthly-attendance-grid td{min-width:0;padding:4px}.tuition-body .monthly-attendance-grid th:first-child{min-width:110px;position:static}.tuition-body .attendance-dot{width:16px;height:16px}.tuition-body .invoice-pagination{display:none}}

.tuition-body .monthly-attendance-grid :is(th,td):last-child{position:sticky;right:0;min-width:76px;z-index:1;background:var(--ui-surface)}.tuition-body .monthly-attendance-grid :is(th,td):nth-last-child(2){position:sticky;right:76px;min-width:70px;z-index:1;background:var(--ui-surface)}.tuition-body .monthly-attendance-grid :is(th,td):nth-last-child(3){position:sticky;right:146px;min-width:54px;z-index:1;background:var(--ui-surface);border-left:1px solid var(--line)}.tuition-body .monthly-attendance-grid thead :is(th):nth-last-child(-n+3){background:var(--tuition-soft);z-index:2}.tuition-body .monthly-attendance-grid tbody :is(th,td):nth-last-child(-n+3){font-weight:600}
@media(max-width:760px){.tuition-body .monthly-attendance-grid :is(th,td):nth-last-child(-n+3){position:static;min-width:54px}}

.tuition-body .insights-modal td{padding:12px 14px}.tuition-body .insights-modal [data-fee-rows] .cell-content>small{min-height:18px;margin-bottom:3px}.tuition-body .fee-summary-card{padding:12px}.tuition-body .fee-summary-card small{margin-top:4px}.tuition-body .fee-summary-grid{margin-bottom:18px}.tuition-body .fee-status-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:0}.tuition-body .fee-payment-reference{flex-basis:100%;margin:0;font-size:11px!important}.tuition-body .fee-receipt-link{font-size:11px;text-decoration:underline;text-underline-offset:3px;color:var(--tuition)}.tuition-body[data-theme=dark] .fee-receipt-link{color:#9bbfff}.tuition-body[data-theme=dark] .monthly-attendance-grid thead th:nth-last-child(-n+3){background:#20324e}

.tuition-body .invoice-filters .filter-search{min-width:240px;flex:1 1 240px}@media(max-width:760px){.tuition-body .invoice-filters .filter-search{min-width:0;flex-basis:100%}}

.tuition-body .collection-widget{display:grid;grid-template-columns:minmax(280px,1fr) 200px minmax(190px,.7fr);align-items:center;gap:28px}.tuition-body .collection-controls{grid-template-columns:minmax(0,1fr) 160px}.tuition-body .collection-chart{margin:0 auto}.tuition-body .collection-key>p{margin-bottom:0}@media(max-width:1100px){.tuition-body .collection-widget{grid-template-columns:minmax(0,1fr) 200px}.tuition-body .collection-key{grid-column:1/-1}.tuition-body .collection-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}@media(max-width:760px){.tuition-body .collection-widget{grid-template-columns:minmax(0,1fr);gap:20px}.tuition-body .collection-controls{grid-template-columns:minmax(0,1fr)}.tuition-body .collection-legend{grid-template-columns:minmax(0,1fr);gap:0}}

.tuition-body .insights-filters{display:flex;flex-wrap:wrap;gap:16px;align-items:end}.tuition-body .insights-filters>label{flex:1 1 200px;min-width:0;margin:0}.tuition-body .insights-filters>label:first-child{flex:0 1 180px}.tuition-body .insights-filters :is(input,select){width:100%;max-width:none}.tuition-body .insights-filters .field-label{margin-bottom:8px}@media(max-width:760px){.tuition-body .insights-filters>label,.tuition-body .insights-filters>label:first-child{flex:1 1 100%}.tuition-body .insights-filters>button{width:100%}}

.tuition-body[data-theme=dark] :is(input,select,textarea){color-scheme:dark}

html:has(.insights-modal[open]){overflow:hidden}.tuition-body .insights-modal{overscroll-behavior:contain}@media(max-width:760px){.tuition-body .attendance-filters .attendance-reflection-trigger{grid-column:auto;white-space:normal}}@media print{.tuition-body .monthly-attendance-grid :is(th,td){position:static!important;min-width:0!important}.tuition-body .monthly-attendance-grid :is(th,td):nth-last-child(-n+3){width:40px;background:transparent!important}}

.tuition-body .monthly-attendance-grid th:first-child{overflow-wrap:anywhere}.tuition-body .monthly-attendance-grid thead th:nth-last-child(2){width:70px;max-width:70px;white-space:normal}