.payroll-toolbar { flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 20px; }
.payroll-toolbar .field { margin: 0; min-width: 180px; }
.payroll-toolbar .search-field { flex: 1; min-width: 180px; }
.payroll-guidance { display: flex; align-items: center; gap: 8px; margin: 16px 0; line-height: 1.5; }
.payroll-guidance > [data-icon] { width: 17px; height: 17px; flex: 0 0 17px; }
.payroll-register > .surface-head { align-items: center; min-height: 68px; margin: 0; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.payroll-register > .surface-head h3 { font-size: .96rem; }
.payroll-register > .surface-head p { margin: 4px 0 0; color: var(--ink-500); font-size: .69rem; line-height: 1.4; }
.payroll-register-table th { height: 40px; padding-inline: 10px; font-size: .61rem; }
.payroll-register-table td { min-height: 0; height: 60px; padding: 10px; }
.payroll-register-table { min-width: 860px; table-layout: fixed; }
.payroll-register-table th:nth-child(1) { width: 18%; }
.payroll-register-table th:nth-child(2) { width: 18%; }
.payroll-register-table th:nth-child(3) { width: 14%; }
.payroll-register-table th:nth-child(4) { width: 14%; }
.payroll-register-table th:nth-child(5) { width: 11%; }
.payroll-register-table th:nth-child(6) { width: 13%; }
.payroll-register-table th:nth-child(7) { width: 12%; }
.payroll-register-table td:nth-child(n+3) { white-space: nowrap; }
.payroll-register-table .table-primary { min-width: 150px; }
.payroll-register-table .table-primary strong { font-size: .75rem; }
.payroll-number-heading, .payroll-number { text-align: right !important; }
.payroll-net { color: var(--ink-950); }
.payroll-control-heading { text-align: right !important; }
.payroll-register-table td:last-child { text-align: right; }
.payroll-attendance { display: grid; gap: 4px; color: var(--ink-600); white-space: nowrap; }
.payroll-attendance strong { color: var(--ink-900); font-weight: 800; }
.payroll-attendance i { margin: 0 3px; color: var(--ink-400); font-style: normal; }
.payroll-attendance small { color: var(--ink-500); font-size: .61rem; font-weight: 700; }
.payroll-muted { color: var(--ink-400); font-weight: 600; }
.payroll-row-action { min-width: 82px; }
.surface.payroll-formula { min-height: 0; margin-top: 16px; padding: 14px 18px; }
.payroll-formula summary, .payroll-evidence summary { cursor: pointer; font-weight: 700; padding: 10px 0; }
.payroll-formula p, .payroll-evidence p { line-height: 1.65; color: var(--ink-700); overflow-wrap: anywhere; }
.payroll-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
.payroll-evidence { border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; }
.payroll-work-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 4px 0 14px; }
.payroll-work-summary span { display: grid; gap: 5px; padding: 11px; border-radius: 12px; background: var(--surface-muted); }
.payroll-work-summary small { color: var(--ink-500); font-size: .62rem; }
.payroll-work-summary strong { color: var(--ink-950); font-size: .8rem; font-variant-numeric: tabular-nums; }
.payroll-work-log { max-height: 270px; overflow-y: auto; border-block: 1px solid var(--line); }
.payroll-work-log > div { display: grid; grid-template-columns: 96px minmax(110px,1fr) 70px 70px; gap: 8px; align-items: center; min-height: 38px; border-top: 1px solid var(--line); font-size: .65rem; }
.payroll-work-log > div:first-child { border-top: 0; }
.payroll-work-log time, .payroll-work-log strong { font-variant-numeric: tabular-nums; }
.payroll-work-log span, .payroll-work-log small { color: var(--ink-500); }
.payroll-calculation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; background: var(--surface-muted); border: 1px solid var(--line); border-radius: 16px; }
.payroll-calculation .compact-metric { min-width: 0; border: 0; padding: 4px; }
.payroll-calculation strong { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.payroll-calculation p { grid-column: 1 / -1; line-height: 1.6; }
.payroll-confirm { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.payroll-confirm input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 3px; accent-color: var(--accent); }
.payroll-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.payroll-actions .button { flex: 1; min-height: 48px; }
.payroll-reopen { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
#payroll .data-table { font-variant-numeric: tabular-nums; }
#payroll .mobile-record-card > p { color: var(--ink-600); line-height: 1.6; }
@media (max-width: 640px) {
  .payroll-toolbar .field, .payroll-toolbar .search-field { width: 100%; }
  .payroll-actions { flex-direction: column; }
  .payroll-calculation { padding: 12px; gap: 8px; }
  .payroll-register > .surface-head { min-height: 0; padding: 14px 16px; }
  .payroll-work-summary { grid-template-columns: 1fr; }
  .payroll-work-log > div { grid-template-columns: 82px minmax(90px,1fr) 58px; }
  .payroll-work-log > div small { display: none; }
}

:root {
  /* Lakshya brand palette: premium navy, yellow, red and warm neutrals. */
  --forest-950: #11133d;
  --forest-900: #181b4b;
  --forest-800: #22265f;
  --forest-700: #303578;
  --forest-100: #e4e5f2;
  --forest-50: #f3f3f9;
  --gold-700: #77620d;
  --gold-600: #9d8110;
  --gold-500: #d6b91e;
  --gold-400: #e1c833;
  --gold-300: #ead85a;
  --gold-200: #f4e998;
  --gold-100: #fbf5ce;
  --ink-950: #171821;
  --ink-900: #22232c;
  --ink-800: #2b2d38;
  --ink-700: #424450;
  --ink-600: #555765;
  --ink-500: #747582;
  --ink-400: #8b8d98;
  --canvas: #f7f6f0;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-strong: #ffffff;
  --surface-muted: #fbfaf5;
  --line: #e6e2d8;
  --line-strong: #d4cfc2;
  --accent: #303578;
  --accent-strong: #22265f;
  --accent-soft: #f3f3f9;
  --accent-border: #c9cce5;
  --control-bg: #ffffff;
  --control-text: #171821;
  --placeholder: #747582;
  --muted: #747582;
  --ink-on-gold: #11133d;
  --gold-soft-ink: #5d4c08;
  --success: #303578;
  --success-bg: #ececf6;
  --warning: #77620d;
  --warning-bg: #fbf5ce;
  --danger: #a72d3f;
  --danger-action: #a72d3f;
  --danger-bg: #fbeaec;
  --info: #303578;
  --info-bg: #ececf6;
  --shadow-xs: 0 1px 2px rgba(17, 19, 61, .045);
  --shadow-sm: 0 8px 24px rgba(17, 19, 61, .07);
  --shadow-lg: 0 28px 80px rgba(17, 19, 61, .18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --sidebar-width: 264px;
  --header-height: 76px;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

[data-theme="dark"] {
  --ink-950: #f7f5eb;
  --ink-900: #eeece4;
  --ink-800: #e4e1d7;
  --ink-700: #cdcbd2;
  --ink-600: #b4b2bd;
  --ink-500: #a6a8b5;
  --ink-400: #bdc0cc;
  --canvas: #0d0e1a;
  --surface: #141625;
  --surface-raised: #191b2d;
  --surface-strong: #23263a;
  --surface-muted: #111320;
  --line: #343951;
  --line-strong: #5c6481;
  --forest-50: #202342;
  --forest-100: #292d52;
  --gold-700: #f0d568;
  --gold-600: #e7ca50;
  --gold-500: #dcc13e;
  --gold-400: #e8ce45;
  --gold-300: #6b5d1c;
  --gold-200: #514819;
  --gold-100: #332d16;
  --accent: #aeb6ff;
  --accent-strong: #d1d5ff;
  --accent-soft: #202342;
  --accent-border: #59649a;
  --control-bg: #191b2d;
  --control-text: #f7f5eb;
  --placeholder: #a6a8b5;
  --muted: #a6a8b5;
  --gold-soft-ink: #f0d568;
  --success: #75d5aa;
  --success-bg: #202342;
  --warning: #f0d568;
  --warning-bg: #332d16;
  --danger: #ff91a5;
  --danger-action: #9d2940;
  --danger-bg: #361c25;
  --info: #aeb6ff;
  --info-bg: #202342;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .32);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, .34);
  --shadow-lg: 0 30px 84px rgba(0, 0, 0, .52);
  color-scheme: dark;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea { color-scheme: dark; }
[data-theme="dark"] option { color: var(--control-text); background: var(--control-bg); }
[data-theme="dark"] .button-primary { border-color: #59649a; background: #343a82; box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }
[data-theme="dark"] .button-primary:hover { background: #454c98; }
[data-theme="dark"] .timetable-date-tab.active,
[data-theme="dark"] .student-batch-tab.active { border-color: #6972b1; background: #343a82; }
[data-theme="dark"] .metric-card-featured,
[data-theme="dark"] .profile-hero { background: linear-gradient(135deg, #22265f, #303578); }
[data-theme="dark"] .program-row:nth-child(3) .program-fill { background: var(--danger); }

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink-950); background: var(--canvas); overflow-x: hidden; }
body.no-scroll { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, [role="button"] { touch-action: manipulation; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(214, 185, 30, .42); outline-offset: 2px; }
.hidden { display: none !important; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 1000; transform: translateY(-150%); padding: 12px 16px; border-radius: 10px; background: var(--surface); color: var(--accent-strong); font-weight: 700; box-shadow: var(--shadow-lg); transition: transform var(--motion-fast); }
.skip-link:focus { transform: translateY(0); }
.overline { margin: 0 0 6px; color: var(--ink-500); font: 700 .7rem/1.2 "Manrope", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #e3c62b; box-shadow: 0 0 0 4px rgba(227,198,43,.15); flex: 0 0 auto; }

/* Authentication */
.boot-screen { min-height: 100dvh; display: grid; place-items: center; padding: 28px; background: var(--surface); }
.boot-card { width: min(100%, 360px); display: grid; justify-items: center; text-align: center; }
.boot-card .official-logo-card img { width: 190px; }
.boot-spinner { width: 28px; height: 28px; margin-top: 30px; border: 3px solid var(--forest-100); border-top-color: var(--accent); border-radius: 50%; animation: boot-spin .8s linear infinite; }
.boot-card strong { margin-top: 18px; font: 800 1rem/1.3 "Manrope", sans-serif; }
.boot-card p { margin: 7px 0 0; color: var(--ink-500); font-size: .82rem; }
.boot-card .button { margin-top: 22px; min-width: 120px; }
.boot-screen.has-error .boot-spinner { display: none; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
.auth-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); background: var(--surface); }
.auth-brand-panel { position: relative; overflow: hidden; display: flex; min-height: 100dvh; padding: 52px clamp(36px, 5vw, 84px); color: #fff; background: var(--forest-950); isolation: isolate; }
.auth-brand-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .32; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
.auth-brand-panel::after { content: ""; position: absolute; width: 520px; height: 520px; right: -220px; top: -210px; z-index: -1; border-radius: 50%; background: rgba(214,185,30,.18); filter: blur(2px); }
.auth-brand-content { display: flex; width: 100%; align-items: center; justify-content: center; position: relative; z-index: 2; }
.auth-brand-stack { width: min(100%, 680px); display: grid; gap: 44px; align-content: center; }
.official-logo-card { width: fit-content; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.official-logo-card img { width: 220px; height: auto; display: block; }
.auth-official-logo { align-self: center; }
.auth-statement { max-width: 700px; margin: auto 0; padding: 80px 0; }
.auth-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.76); background: rgba(255,255,255,.06); font-size: .78rem; font-weight: 600; }
.auth-statement h1 { margin: 0; max-width: 680px; font: 700 clamp(2.8rem, 5vw, 4.6rem)/1.02 "Manrope", sans-serif; letter-spacing: -.055em; }
.auth-statement p { margin: 0; max-width: 590px; color: rgba(255,255,255,.68); font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.7; }
.auth-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.1); overflow: hidden; }
.auth-proof-grid div { padding: 20px; background: rgba(17,19,61,.84); }
.auth-proof-grid strong { display: block; font: 700 1.35rem/1.2 "Manrope",sans-serif; color: #f0d653; }
.auth-proof-grid span { display: block; margin-top: 5px; color: rgba(255,255,255,.55); font-size: .75rem; }
.auth-orbit { position: absolute; border: 1px solid rgba(214,185,30,.28); border-radius: 50%; pointer-events: none; }
.auth-orbit-one { width: 500px; height: 500px; left: -330px; bottom: -280px; }
.auth-orbit-two { width: 360px; height: 360px; left: -260px; bottom: -210px; }
.auth-form-panel { display: grid; place-items: center; padding: 48px clamp(28px,6vw,96px); background: var(--surface); }
.auth-form-wrap { width: min(100%, 430px); }
.mobile-auth-brand { display: none; margin-bottom: 38px; border-color: var(--line); box-shadow: var(--shadow-sm); }
.mobile-auth-brand img { width: 190px; }
.auth-heading h2 { margin: 0; font: 800 clamp(1.9rem, 3vw, 2.5rem)/1.15 "Manrope",sans-serif; letter-spacing: -.04em; }
.auth-heading > p:last-child { margin: 12px 0 0; color: var(--ink-600); line-height: 1.6; }
.auth-form { display: grid; gap: 20px; margin-top: 34px; }
.field { display: grid; gap: 8px; }
.field > span:first-child, .field > label:first-child { font-weight: 700; font-size: .84rem; }
.field input, .field select, .field textarea, .toolbar select, .toolbar input { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--control-bg); color: var(--control-text); padding: 0 14px; transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast); }
.field input, .field select, .toolbar select, .toolbar input { height: 48px; }
.field textarea { min-height: 84px; padding: 12px 14px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover, .toolbar select:hover, .toolbar input:hover { border-color: var(--accent); }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar select:focus, .toolbar input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); }
.field input::placeholder, .field textarea::placeholder, .toolbar input::placeholder { color: var(--placeholder); opacity: 1; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 54px; }
.password-toggle { position: absolute !important; right: 3px; top: 2px; }
.field-help, .field-error { min-height: 16px; color: var(--ink-500); font-size: .73rem; line-height: 1.4; }
.auth-mode-toggle { min-height: 44px; justify-self: start; margin-top: -10px; padding: 0; border: 0; color: var(--accent); background: transparent; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.auth-mode-toggle:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.auth-mode-toggle:focus-visible { border-radius: 5px; outline: 3px solid rgba(48,53,120,.22); outline-offset: 3px; }
.field-error { color: var(--danger); }
.auth-error { padding: 12px 14px; border-radius: var(--radius-md); color: var(--danger); background: var(--danger-bg); font-size: .84rem; line-height: 1.5; }
.auth-footnote { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 0; color: var(--ink-500); font-size: .75rem; text-align: center; }

/* Buttons and icons */
.icon-button { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 11px; background: transparent; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.icon-button:hover { background: var(--surface-muted); }
.icon-button svg, .button svg, [data-icon] svg, .metric-icon svg, .attention-item svg, .icon-tile svg, .empty-icon svg, .module-ready-icon svg, .command-item svg, .issue-list svg, .immutable-record-note > svg { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border: 1px solid transparent; border-radius: 11px; font-weight: 700; font-size: .84rem; cursor: pointer; white-space: nowrap; transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), opacity var(--motion-fast); }
.button svg { width: 18px; height: 18px; }
.button-primary { color: #fff; background: var(--forest-800); box-shadow: 0 8px 18px rgba(17,19,61,.16); }
.button-primary:hover { background: var(--forest-700); box-shadow: 0 10px 24px rgba(17,19,61,.24); }
.button-secondary { border-color: var(--line-strong); color: var(--ink-800); background: var(--surface); }
.button-secondary:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.button-danger { color: #fff; background: var(--danger-action); box-shadow: 0 8px 18px rgba(183,44,65,.18); }
.button-danger:hover { background: #9e2639; box-shadow: 0 10px 24px rgba(183,44,65,.24); }
.button-quiet { padding: 0 6px; color: var(--accent); background: transparent; }
.button-large { min-height: 52px; border-radius: 13px; font-size: .92rem; }
.button-small { min-height: 38px; padding: 0 12px; font-size: .78rem; }
.button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Application shell */
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); display: flex; flex-direction: column; z-index: 60; overflow-y: auto; padding: 24px 18px 18px; color: rgba(255,255,255,.82); background: var(--forest-950); }
.sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 18px 18px; }
.sidebar > * { position: relative; }
.sidebar-brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 22px; }
.sidebar-official-logo { padding: 4px 7px; border-radius: 11px; box-shadow: none; }
.sidebar-official-logo img { width: 158px; }
.sidebar-close { display: none; color: #fff; }
.branch-switcher { min-height: 62px; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 22px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.055); }
.branch-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #f0d653; background: rgba(214,185,30,.14); }
.branch-switcher small, .system-health small, .user-card small { display: block; color: rgba(255,255,255,.46); font-size: .67rem; }
.branch-switcher strong, .system-health strong, .user-card strong { display: block; margin-top: 3px; color: #fff; font-size: .78rem; }
.branch-switcher strong, .system-health strong { margin-top: 0; }
.primary-nav { display: grid; gap: 4px; }
.nav-label { margin: 0 10px 6px; color: rgba(255,255,255,.33); font: 700 .62rem/1 "Manrope",sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.nav-label-spaced { margin-top: 18px; }
.nav-item { position: relative; min-height: 44px; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; padding: 0 11px; border: 0; border-radius: 11px; color: rgba(255,255,255,.64); background: transparent; text-align: left; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast); }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 3px 0 #e3c62b; }
.nav-item.active > [data-icon] { color: #f0d653; }
.nav-item > span:nth-child(2) { font-size: .81rem; font-weight: 600; }
.nav-item em { min-width: 22px; padding: 3px 6px; border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); font-size: .62rem; font-style: normal; text-align: center; }
.sidebar-footer { display: grid; gap: 14px; margin-top: auto; padding-top: 26px; }
.system-health { display: flex; align-items: center; gap: 11px; padding: 0 8px; }
.user-card { min-height: 58px; display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 10px; padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; color: inherit; background: rgba(255,255,255,.04); text-align: left; cursor: pointer; }
.user-card:hover { background: rgba(255,255,255,.08); }
.user-avatar { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 11px; color: var(--forest-950); background: #e3c62b; font: 800 .75rem/1 "Manrope",sans-serif; }
.main-panel { grid-column: 2; min-height: 100dvh; }
.topbar { height: var(--header-height); position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px,3vw,40px); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(16px); }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.menu-button { display: none; }
.breadcrumb { margin: 0 0 3px; color: var(--ink-500); font-size: .68rem; }
.topbar h1 { margin: 0; font: 800 1.02rem/1.2 "Manrope",sans-serif; letter-spacing: -.02em; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.search-trigger { width: min(31vw, 330px); min-height: 42px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-500); background: var(--surface); text-align: left; cursor: pointer; }
.search-trigger span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
kbd { padding: 3px 6px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); border-radius: 6px; color: var(--ink-500); background: var(--surface-muted); font: 600 .64rem/1 "DM Sans",sans-serif; }
.notification-dot { position: absolute; right: 9px; top: 8px; width: 7px; height: 7px; border: 2px solid var(--canvas); border-radius: 50%; background: var(--danger); }
.topbar-profile { width: 44px; height: 44px; display: grid; place-items: center; margin-left: 3px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.page-container { width: min(100%, 1540px); margin: 0 auto; padding: 32px clamp(20px,3vw,40px) 64px; }
.app-view { display: none; animation: view-enter var(--motion-base) var(--ease); }
.app-view.active { display: block; }
@keyframes view-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Page headings and metrics */
.welcome-row, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.welcome-row h2, .page-heading h2 { margin: 0; font: 800 clamp(1.65rem,3vw,2.25rem)/1.15 "Manrope",sans-serif; letter-spacing: -.045em; }
.welcome-row h2 span { color: var(--accent); }
.welcome-row > div > p:last-child, .page-heading > div > p:last-child { margin: 9px 0 0; color: var(--ink-600); line-height: 1.55; }
.dashboard-quick-actions { display: grid; grid-template-columns: minmax(170px,.32fr) minmax(0,1fr); align-items: stretch; gap: 14px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.quick-actions-heading { display: flex; align-items: center; gap: 11px; padding: 4px 8px; }
.quick-actions-heading > span:last-child { display: grid; gap: 3px; }
.quick-actions-heading strong { font: 800 .9rem/1.2 "Manrope",sans-serif; }
.quick-actions-heading small { max-width: 210px; color: var(--ink-500); font-size: .75rem; line-height: 1.4; }
.quick-actions-icon { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--gold-soft-ink); background: var(--gold-100); }
.quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 8px; }
.quick-action { min-height: 68px; display: grid; grid-template-columns: 36px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-800); background: var(--surface-muted); text-align: left; cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast); }
.quick-action:hover { border-color: var(--line-strong); background: var(--surface); box-shadow: var(--shadow-sm); }
.quick-action > [data-icon] { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.quick-action > span:last-child { min-width: 0; display: grid; gap: 3px; }
.quick-action strong { font-size: .8rem; line-height: 1.3; }
.quick-action small { color: var(--ink-500); font-size: .75rem; line-height: 1.35; }
.quick-action:active { opacity: .78; }
.inventory-quantity { display: grid; gap: 3px; }
.inventory-quantity strong { color: var(--ink-900); font-size: .84rem; }
.inventory-quantity small { color: var(--ink-500); font-size: .68rem; }
.inventory-movement-surface { margin-top: 18px; }
.metric-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 126px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.metric-card-featured { color: #fff; border-color: transparent; background: var(--forest-900); }
.metric-card-featured::after { content: ""; position: absolute; width: 150px; height: 150px; right: -60px; bottom: -78px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 26px rgba(255,255,255,.025), 0 0 0 52px rgba(255,255,255,.018); }
.metric-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.metric-label { color: var(--ink-500); font-size: .73rem; font-weight: 700; }
.metric-card-featured .metric-label { color: rgba(255,255,255,.64); }
.metric-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }
.metric-card-featured .metric-icon { color: #f0d653; background: rgba(255,255,255,.08); }
.metric-value { margin: 18px 0 0; font: 800 clamp(1.55rem,2.5vw,2.05rem)/1 "Manrope",sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.metric-note { color: var(--ink-500); font-size: .71rem; }
.metric-card-featured .metric-note { color: rgba(255,255,255,.58); }
.compact-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.compact-metric { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.compact-metric span { color: var(--ink-500); font-size: .7rem; font-weight: 600; }
.compact-metric strong { display: block; margin-top: 7px; font: 800 1.3rem/1 "Manrope",sans-serif; font-variant-numeric: tabular-nums; }

/* Surfaces and dashboard */
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr); gap: 18px; }
.surface { min-height: 200px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.surface-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.surface-head h3 { margin: 0; font: 800 1.05rem/1.25 "Manrope",sans-serif; letter-spacing: -.025em; }
.count-badge { min-width: 32px; padding: 5px 8px; border-radius: 999px; color: var(--warning); background: var(--warning-bg); font-size: .71rem; font-weight: 800; text-align: center; }
.icon-tile { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.program-chart { display: grid; gap: 14px; }
.program-row { display: grid; grid-template-columns: 120px 1fr 38px; align-items: center; gap: 13px; }
.program-row > span { color: var(--ink-600); font-size: .78rem; font-weight: 600; }
.program-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-muted); }
.program-fill { height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: bar-in 500ms var(--ease) both; }
.program-row:nth-child(2) .program-fill { background: #d6b91e; }
.program-row:nth-child(3) .program-fill { background: #a72d3f; }
.program-row:nth-child(4) .program-fill { background: var(--ink-950); }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.program-row strong { font-size: .76rem; font-variant-numeric: tabular-nums; text-align: right; }
.attention-list { display: grid; gap: 10px; }
.attention-item { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; padding: 10px; border: 0; border-radius: 12px; color: inherit; background: var(--surface-muted); text-align: left; cursor: pointer; }
.attention-item > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--warning); background: var(--warning-bg); }
.attention-item strong, .record-item strong { display: block; font-size: .78rem; }
.attention-item small, .record-item small { display: block; margin-top: 3px; color: var(--ink-500); font-size: .68rem; }
.attention-item em { font-size: .69rem; color: var(--ink-500); font-style: normal; }
.record-list { display: grid; }
.record-item { width: 100%; min-height: 60px; display: grid; grid-template-columns: 38px 1.2fr .7fr .6fr auto; align-items: center; gap: 12px; padding: 9px 4px; border: 0; border-top: 1px solid var(--line); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.record-item:first-child { border-top: 0; }
.record-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-strong); background: var(--accent-soft); font: 800 .68rem/1 "Manrope",sans-serif; }
.record-program, .record-date { color: var(--ink-600); font-size: .73rem; }
.finance-pulse-body { display: grid; gap: 16px; }
.finance-total { font: 800 2rem/1 "Manrope",sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.finance-total small { display: block; margin-top: 8px; color: var(--ink-500); font: 500 .72rem/1.4 "DM Sans",sans-serif; letter-spacing: 0; }
.reconcile-bar { display: grid; gap: 8px; }
.reconcile-track { height: 10px; overflow: hidden; display: flex; border-radius: 999px; background: var(--surface-muted); }
.reconcile-track span:first-child { background: var(--success); }
.reconcile-track span:last-child { background: var(--warning); }
.reconcile-labels { display: flex; justify-content: space-between; color: var(--ink-500); font-size: .69rem; }
.skeleton-card, .skeleton-line { position: relative; overflow: hidden; background: var(--surface-muted); }
.skeleton-card::after, .skeleton-line::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation: shimmer 1.25s infinite; }
.skeleton-line { height: 70px; border-radius: 12px; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* Data workspaces */
.table-surface { min-height: auto; padding: 0; overflow: hidden; }
.attendance-view-tabs { margin-bottom: 18px; }
.attendance-panel[hidden] { display: none !important; }
.staff-attendance-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-xs); }
.staff-date-copy { display: grid; gap: 3px; }
.staff-date-copy span { color: var(--ink-500); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.staff-date-copy strong { color: var(--ink-950); font: 800 .9rem/1.2 "Manrope",sans-serif; }
.staff-date-actions { display: flex; align-items: center; gap: 8px; }
.staff-date-actions .icon-button { width: 40px; height: 40px; }
.staff-date-actions .icon-button:disabled { opacity: .35; cursor: not-allowed; }
.staff-date-picker input { width: 154px; height: 40px; padding: 0 11px; font-size: .72rem; }
.staff-attendance-surface > .surface-head { align-items: center; margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.staff-attendance-surface > .surface-head p { margin: 5px 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.45; }
.director-attendance-surface { margin-bottom: 20px; }
.director-attendance-surface[hidden] { display: none !important; }
.staff-register-count { padding: 6px 10px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); font-size: .66rem; font-weight: 800; }
.staff-attendance-table td { height: 68px; }
.staff-person { display: flex; align-items: center; gap: 11px; min-width: 210px; }
.staff-person-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 12px; color: var(--accent-strong); background: var(--accent-soft); font: 800 .68rem/1 "Manrope",sans-serif; }
.staff-person > span:last-child { display: grid; gap: 4px; }
.staff-person strong { color: var(--ink-950); font: 800 .78rem/1.15 "Manrope",sans-serif; }
.staff-person small { display: flex; align-items: center; gap: 7px; color: var(--ink-500); font-size: .65rem; }
.staff-person small i { padding-left: 7px; border-left: 1px solid var(--line); font-style: normal; }
.staff-time { color: var(--ink-900); font-size: .76rem; font-variant-numeric: tabular-nums; }
.staff-time-muted { color: var(--ink-400); font-weight: 600; }
.staff-duration { display: grid; gap: 4px; color: var(--ink-600); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.staff-duration strong { color: var(--ink-900); }
.staff-duration small { max-width: 210px; color: var(--ink-500); font-size: .6rem; font-weight: 650; white-space: normal; }
.staff-mobile-card .mobile-record-card-head { align-items: center; }
.staff-mobile-card .staff-person { min-width: 0; }
.toolbar { min-height: 72px; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.toolbar select { width: auto; min-width: 160px; height: 44px; padding-right: 34px; font-size: .78rem; }
.search-field { width: 250px; position: relative; display: block; }
.search-field-wide { width: min(420px, 42vw); }
.search-field > [data-icon] { position: absolute; left: 13px; top: 12px; z-index: 1; color: var(--ink-500); }
.search-field input { height: 44px; padding-left: 42px; font-size: .79rem; }
.table-meta { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink-500); font-size: .7rem; }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.data-table th { height: 44px; padding: 0 16px; color: var(--ink-500); background: var(--surface); font-size: .65rem; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { min-height: 58px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink-800); vertical-align: middle; }
.data-table tbody tr { transition: background var(--motion-fast); }
.data-table tbody tr:hover { background: var(--forest-50); }
.table-primary { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.table-primary strong { display: block; color: var(--ink-950); font-size: .78rem; }
.table-primary small { display: block; margin-top: 3px; color: var(--ink-500); font-size: .66rem; }
.table-action { width: 36px; height: 36px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: .65rem; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-ready, .status-active, .status-converted, .status-submitted, .status-published, .status-scheduled, .status-present { color: var(--success); background: var(--success-bg); }
.status-review, .status-follow-up-scheduled, .status-interested, .status-documents-pending, .status-draft, .status-not-started, .status-late, .status-excused, .status-overdue { color: var(--warning); background: var(--warning-bg); }
.status-needs-date, .status-needs-mode { color: var(--warning); background: var(--warning-bg); }

.student-picker-control { position: relative; display: block; }
.student-picker-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(17, 19, 61, .18);
}
.student-picker-option {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  color: var(--ink-950);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.student-picker-option:hover, .student-picker-option.active { background: var(--surface-muted); }
.student-picker-option strong { font-size: .94rem; }
.student-picker-option small { color: var(--muted); font-size: .78rem; }
.student-picker-empty { display: block; padding: 14px 12px; color: var(--muted); font-size: .86rem; }
.status-blocked, .status-lost, .status-not-interested, .status-inactive, .status-absent { color: var(--danger); background: var(--danger-bg); }
.status-neutral, .status-new-enquiry, .status-contacted { color: var(--info); background: var(--info-bg); }
.currency { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.owner-edit-button { min-height: 34px; gap: 6px; white-space: nowrap; }
.owner-edit-button svg { width: 14px; height: 14px; }
.owner-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: -4px 0 14px; }
.immutable-record-note { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink-800); background: var(--surface-muted); font-size: .78rem; font-weight: 700; }
.immutable-record-note > svg { width: 38px; height: 38px; padding: 9px; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.immutable-record-note small { display: block; margin-top: 5px; color: var(--ink-500); font-size: .68rem; font-weight: 500; line-height: 1.45; }
.mobile-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mobile-card-actions .button { flex: 1; margin-top: 0; }
.mobile-records { display: none; }
.teaching-register { margin-bottom: 18px; }
.operations-timetable { margin-bottom: 18px; padding: 0; overflow: hidden; }
.operations-timetable-head { min-height: 76px; align-items: center; margin: 0; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.operations-timetable-head h3 { margin: 0; font: 800 1rem/1.25 "Manrope", sans-serif; letter-spacing: -.02em; }
.operations-timetable-head p { margin: 5px 0 0; color: var(--ink-500); font-size: .72rem; line-height: 1.45; }
.timetable-date-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-muted); scrollbar-width: none; }
.timetable-date-tabs::-webkit-scrollbar { display: none; }
.timetable-date-tab { min-width: 88px; min-height: 52px; display: grid; place-content: center; gap: 3px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-600); background: var(--surface); text-align: center; cursor: pointer; transition: border-color var(--motion-fast), color var(--motion-fast), background var(--motion-fast); }
.timetable-date-tab span { font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.timetable-date-tab strong { font-size: .76rem; }
.timetable-date-tab:hover { border-color: var(--line-strong); color: var(--accent-strong); }
.timetable-date-tab.active { border-color: var(--forest-800); color: #fff; background: var(--forest-800); box-shadow: var(--shadow-xs); }
.operations-timetable-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; }
.timetable-batch-lane { min-width: 0; padding: 18px; }
.timetable-batch-lane + .timetable-batch-lane { border-left: 1px solid var(--line); }
.timetable-batch-lane > header { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.timetable-batch-mark { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: var(--forest-900); background: var(--gold-400); font: 800 .8rem/1 "Manrope", sans-serif; }
.timetable-batch-lane header strong, .timetable-batch-lane header small { display: block; }
.timetable-batch-lane header strong { color: var(--ink-950); font-size: .84rem; }
.timetable-batch-lane header small { margin-top: 3px; color: var(--ink-500); font-size: .65rem; }
.timetable-slot-list { display: grid; gap: 8px; }
.timetable-slot { min-height: 66px; display: grid; grid-template-columns: 78px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.timetable-slot time { color: var(--accent-strong); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timetable-slot time small { display: block; margin-top: 3px; color: var(--ink-500); font-size: .59rem; font-weight: 600; }
.timetable-slot > span > strong, .timetable-slot > span > small { display: block; }
.timetable-slot > span > strong { color: var(--ink-950); font-size: .78rem; }
.timetable-slot > span > small { margin-top: 4px; color: var(--ink-500); font-size: .64rem; line-height: 1.4; }
.timetable-slot .owner-edit-button { min-width: 34px; padding-inline: 9px; }
.teaching-register-head { min-height: 72px; align-items: center; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.teaching-register-head p { margin: 4px 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.45; }
.teaching-assignment-table td:last-child, .teaching-assignment-table th:last-child { width: 1%; text-align: right; }
.teaching-assignment-table td:last-child .button { margin-left: auto; }
.workspace-switcher { width: 100%; margin-bottom: 14px; }
.workspace-switcher button { flex: 1; }
.timetable-workspace-panel { display: none; }
.timetable-workspace-panel.active { display: block; }
.timetable-workspace-panel .teaching-register, .timetable-workspace-panel .operations-timetable { margin-bottom: 0; }
.empty-state { display: grid; place-items: center; min-height: 240px; padding: 32px; text-align: center; }
.empty-state .empty-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; color: var(--accent); background: var(--accent-soft); }
.empty-state h3 { margin: 16px 0 6px; font: 800 1rem/1.3 "Manrope",sans-serif; }
.empty-state p { max-width: 420px; margin: 0; color: var(--ink-500); line-height: 1.5; }

/* Student directory */
.student-directory-surface { background: var(--surface); }
.student-directory-search { min-height: 64px; padding: 10px 14px; background: var(--surface); }
.student-directory-search .search-field { flex: 1; max-width: 520px; }
.toolbar-count { margin-left: auto; padding: 6px 10px; border-radius: 999px; color: var(--ink-600); background: var(--surface-muted); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.student-hierarchy { display: grid; background: var(--surface); }
.student-hierarchy > .empty-state { min-height: 220px; }
.student-batch-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-muted); scrollbar-width: none; }
.student-batch-tabs::-webkit-scrollbar, .student-program-chips::-webkit-scrollbar { display: none; }
.student-batch-tab { min-height: 42px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; color: var(--ink-600); background: transparent; font-size: .76rem; font-weight: 700; cursor: pointer; }
.student-batch-tab:hover { color: var(--accent); background: var(--surface); }
.student-batch-tab strong { min-width: 25px; padding: 4px 7px; border-radius: 999px; color: var(--ink-600); background: var(--surface); font-size: .65rem; font-variant-numeric: tabular-nums; text-align: center; }
.student-batch-tab.active { border-color: var(--forest-100); color: #fff; background: var(--forest-800); box-shadow: var(--shadow-xs); }
.student-batch-tab.active strong { color: var(--forest-800); background: #fff; }
.student-batch-tab.review:not(.active) { color: var(--danger); }
.student-batch-tab.inactive:not(.active) { color: var(--danger); background: var(--danger-bg); }
.student-directory-bar { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.student-program-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.student-program-chip { min-height: 34px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-600); background: var(--surface); font-size: .7rem; font-weight: 700; cursor: pointer; }
.student-program-chip:hover { border-color: var(--line-strong); color: var(--accent); }
.student-program-chip strong { color: var(--ink-500); font-size: .62rem; font-variant-numeric: tabular-nums; }
.student-program-chip.active { border-color: var(--accent-border); color: var(--accent-strong); background: var(--accent-soft); }
.student-program-chip.active strong { color: var(--accent); }
.student-directory-list { display: grid; }
.student-directory-list > .empty-state { min-height: 260px; }
.student-directory-row { width: 100%; min-height: 68px; display: grid; grid-template-columns: 36px minmax(210px,1.25fr) minmax(160px,.9fr) minmax(170px,.9fr) auto 18px; align-items: center; gap: 12px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); color: inherit; background: var(--surface); text-align: left; cursor: pointer; transition: background var(--motion-fast), box-shadow var(--motion-fast); }
.student-directory-row:last-child { border-bottom: 0; }
.student-directory-row:hover { background: var(--forest-50); box-shadow: inset 3px 0 var(--gold-500); }
.student-directory-row strong, .student-directory-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-directory-row strong { color: var(--ink-950); font-size: .76rem; }
.student-directory-row small { margin-top: 4px; color: var(--ink-500); font-size: .65rem; }
.student-directory-context strong, .student-directory-contact strong { color: var(--ink-800); font-weight: 650; }
.student-directory-status { justify-self: end; }
.student-directory-open { color: var(--ink-500); }
.student-directory-open svg { width: 16px; height: 16px; }

.segmented-control { width: fit-content; display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.segmented-control button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; color: var(--ink-500); background: transparent; font-size: .75rem; font-weight: 700; cursor: pointer; }
.segmented-control button.active { color: var(--accent-strong); background: var(--accent-soft); }
.segmented-control button span { padding: 2px 6px; margin-left: 5px; border-radius: 999px; }
.segmented-control .tab-count { color: var(--accent-strong); background: var(--accent-soft); }
.segmented-control button.active .tab-count { color: #fff; background: var(--forest-800); }
.segmented-control .tab-review-count { color: var(--warning); background: var(--warning-bg); }
.finance-tab { display: none; }
.finance-tab.active { display: block; }
.inline-notice { display: flex; align-items: center; gap: 8px; margin-right: auto; color: var(--info); font-size: .75rem; }
.payment-student-filter { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--ink-700); background: var(--forest-50); font-size: .76rem; }
.payment-student-filter strong { color: var(--ink-950); }
.view-payments-button svg { width: 14px; height: 14px; }
.receivables-table { min-width: 860px; table-layout: fixed; }
.receivables-col-student { width: 35%; }
.receivables-col-fee { width: 17%; }
.receivables-col-outstanding { width: 17%; }
.receivables-col-status { width: 15%; }
.receivables-col-actions { width: 16%; }
.receivables-table th { height: 44px; padding-inline: 16px; }
.receivables-table td { height: 68px; padding: 10px 16px; vertical-align: middle; }
.receivables-table th.numeric-heading,
.receivables-table .receivable-outstanding { text-align: right; }
.receivable-fee-summary strong, .receivable-fee-summary small { display: block; }
.receivable-fee-summary small { margin-top: 5px; color: var(--ink-500); font-size: .65rem; }
.receivable-student .table-primary { min-width: 0; }
.receivable-student .table-primary > span:last-child { min-width: 0; }
.receivable-student .table-primary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receivable-outstanding > strong { display: block; }
.receivable-outstanding .ledger-balance-state { margin: 4px 0 0 auto; }
.receivable-reconciliation .status { max-width: 100%; }
.receivable-actions { padding-inline: 10px !important; }
.receivable-actions .cell-actions { justify-content: flex-end; flex-wrap: nowrap; }
.receivable-edit-button { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid var(--line); color: var(--ink-600); background: var(--surface); }
.receivable-edit-button:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.receivable-edit-button svg { width: 16px; height: 16px; }
.ledger-balance-state { display: block; width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 999px; font-size: .61rem; font-weight: 800; text-transform: uppercase; }
.ledger-balance-due { color: var(--danger); background: var(--danger-bg); }
.ledger-balance-settled { color: var(--success); background: var(--success-bg); }
.ledger-balance-credit { color: var(--info); background: var(--info-bg); }
.open-ledger-button { min-width: 76px; white-space: nowrap; }
#finance .segmented-control { width: 100%; gap: 24px; margin-bottom: 12px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#finance .segmented-control button { min-height: 46px; padding: 0 4px; border-radius: 0; }
#finance .segmented-control button.active { color: var(--accent-strong); background: transparent; box-shadow: inset 0 -2px var(--gold-500); }
#finance .segmented-control button.active .tab-count { color: var(--accent-strong); background: var(--accent-soft); }
#finance-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
#finance .toolbar { min-height: 64px; padding: 10px 14px; background: var(--surface); }
#finance .table-meta { min-height: 38px; padding: 0 16px; }
.finance-toolbar .search-field { flex: 1; }
.finance-context-action { flex: 0 0 auto; white-space: nowrap; }
.open-ledger-button svg, .ledger-heading .button svg, .ledger-control-card .button svg { width: 15px; height: 15px; }

/* Student fee ledger */
.student-ledger-view { min-width: 0; display: grid; gap: 16px; }
.ledger-heading { min-height: 92px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.ledger-heading > *, .ledger-heading-copy, .ledger-heading-actions { min-width: 0; }
.ledger-heading-copy > span, .ledger-statement-head span, .ledger-control-copy > span { color: var(--accent); font-size: .65rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.ledger-heading-copy h2 { margin: 3px 0 2px; overflow-wrap: anywhere; color: var(--ink-950); font: 800 1.35rem/1.2 "Manrope", sans-serif; letter-spacing: -.025em; }
.ledger-heading-copy p { margin: 0; color: var(--ink-500); font-size: .73rem; }
.ledger-heading-actions { display: flex; align-items: center; gap: 8px; }
.ledger-heading-actions > span:empty { display: none; }
.ledger-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.ledger-summary-card { min-height: 116px; display: flex; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-xs); }
.ledger-summary-card > span { color: var(--ink-500); font-size: .67rem; font-weight: 700; }
.ledger-summary-card > strong { margin-top: 6px; color: var(--ink-950); font: 800 1.25rem/1.1 "Manrope",sans-serif; font-variant-numeric: tabular-nums; }
.ledger-summary-card > small { margin-top: 7px; color: var(--ink-500); font-size: .65rem; }
.ledger-summary-featured { border-color: rgba(167,45,63,.18); background: linear-gradient(145deg, var(--surface), var(--danger-bg)); }
.ledger-summary-featured > strong { color: var(--danger); }
.ledger-statement { overflow: hidden; }
.ledger-statement-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ledger-statement-head h3, .ledger-control-copy h3 { margin: 4px 0 0; color: var(--ink-950); font: 800 .95rem/1.2 "Manrope",sans-serif; }
.ledger-period { color: var(--ink-500) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.ledger-table th.numeric-heading, .ledger-number { text-align: right; }
.ledger-table td:nth-child(2) { min-width: 210px; }
.ledger-table td:nth-child(2) strong { display: block; color: var(--ink-950); }
.ledger-table td:nth-child(2) small { display: block; max-width: 260px; margin-top: 3px; overflow: hidden; color: var(--ink-500); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.ledger-running-balance { color: var(--accent-strong); font-weight: 800; }
.unknown-date { color: var(--warning); font-weight: 700; white-space: nowrap; }
.payment-mode { text-transform: capitalize; }
.ledger-control-card { display: grid; grid-template-columns: minmax(250px,1.1fr) minmax(360px,1.3fr) auto; align-items: center; gap: 22px; padding: 20px; }
.ledger-control-copy p { max-width: 480px; margin: 7px 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.5; }
.ledger-control-values { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ledger-control-values div { min-height: 68px; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; border-right: 1px solid var(--line); background: var(--surface-muted); }
.ledger-control-values div:last-child { border-right: 0; }
.ledger-control-values span { color: var(--ink-500); font-size: .6rem; }
.ledger-control-values strong { margin-top: 4px; color: var(--ink-950); font-size: .73rem; font-variant-numeric: tabular-nums; }
.ledger-control-values .control-difference { color: var(--warning); }
.ledger-mobile-balance { color: var(--accent-strong); font-size: .75rem; white-space: nowrap; }
.ledger-mobile-note { padding: 9px 10px; border-radius: 8px; background: var(--surface-muted); }

/* Operational modules */
.heading-actions, .drawer-actions { display: flex; align-items: center; gap: 10px; }
.settings-page-heading { align-items: flex-end; }
.settings-heading-actions { display: flex; width: auto; }
.settings-heading-actions .button { width: auto; justify-content: center; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check-field { display: flex; align-items: center; gap: 10px; color: var(--ink-600); font-size: .78rem; font-weight: 700; }
.check-field input { width: 18px; height: 18px; accent-color: var(--accent); }
.choice-fieldset { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.choice-fieldset legend { padding: 0 5px; color: var(--ink-800); font-size: .78rem; font-weight: 800; }
.choice-fieldset > small { color: var(--ink-500); font-size: .72rem; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.inline-notice-danger { padding: 12px; border-radius: 12px; color: var(--danger); background: var(--danger-bg); }
.notice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.communication-inbox { margin-bottom: 28px; }
.communication-inbox .surface-head p, .section-heading p { margin: 5px 0 0; color: var(--ink-500); font-size: .72rem; line-height: 1.5; }
.communication-thread-list { display: grid; }
.communication-thread { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink-900); text-align: left; cursor: pointer; }
.communication-thread:last-child { border-bottom: 0; }
.communication-thread:hover { background: var(--surface-muted); }
.thread-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-soft); color: var(--accent-strong); font: 800 .72rem/1 "Manrope",sans-serif; }
.thread-copy, .thread-copy > span, .thread-meta { min-width: 0; display: flex; }
.thread-copy { flex-direction: column; gap: 4px; }
.thread-copy > span { align-items: center; gap: 8px; }
.thread-copy strong, .thread-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-copy strong { font-size: .78rem; }
.thread-copy b { font-size: .73rem; }
.thread-copy em { padding: 3px 7px; border-radius: 99px; background: var(--surface-muted); color: var(--ink-500); font-size: .61rem; font-style: normal; }
.thread-copy small { overflow: hidden; color: var(--ink-500); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.thread-meta { flex-direction: column; align-items: flex-end; gap: 7px; }
.thread-meta time { color: var(--ink-500); font-size: .62rem; white-space: nowrap; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 14px; }
.section-heading h3 { margin: 0; font: 800 1.05rem/1.25 "Manrope",sans-serif; }
.conversation-context { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); }
.conversation-context > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); }
.conversation-context svg { width: 19px; }
.conversation-context strong, .conversation-context small { display: block; }
.conversation-context small { margin-top: 4px; color: var(--ink-500); font-size: .68rem; }
.conversation-messages { display: grid; gap: 10px; margin: 18px 0; }
.conversation-message { max-width: 90%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 15px 15px 15px 4px; background: var(--surface-muted); }
.conversation-message.is-mine { justify-self: end; border-radius: 15px 15px 4px 15px; background: var(--forest-50); }
.conversation-message header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.conversation-message header strong { font-size: .7rem; }
.conversation-message header span, .conversation-message header time { color: var(--ink-500); font-size: .6rem; text-transform: capitalize; }
.conversation-message header time { margin-left: auto; }
.conversation-message p { margin: 8px 0 0; font-size: .76rem; line-height: 1.6; white-space: pre-wrap; }
.conversation-status-button { width: 100%; margin-top: 10px; }
.notice-card { min-height: 230px; display: flex; flex-direction: column; }
.notice-card-head { display: flex; align-items: center; justify-content: space-between; }
.notice-card h3 { margin: 20px 0 8px; font: 800 1rem/1.3 "Manrope",sans-serif; }
.notice-card > p { margin: 0; color: var(--ink-600); font-size: .78rem; line-height: 1.6; white-space: pre-wrap; }
.notice-card footer { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 20px; color: var(--ink-500); font-size: .66rem; text-transform: capitalize; }
.settings-tabs { width: max-content; display: flex; gap: 4px; margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-muted); }
.settings-tabs button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px; color: var(--ink-500); background: transparent; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }
.settings-tabs button:hover { color: var(--ink-900); }
.settings-tabs button.active { color: var(--accent-strong); background: var(--surface); box-shadow: var(--shadow-xs); }
.settings-panel[hidden] { display: none !important; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.settings-audit { grid-column: 1 / -1; }
.settings-account-surface { min-height: 0; overflow: hidden; padding: 0; }
.settings-account-surface > .surface-head { align-items: center; margin: 0; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.settings-account-surface > .surface-head p, .settings-audit .surface-head p { margin: 5px 0 0; color: var(--ink-500); font-size: .7rem; line-height: 1.45; }
.settings-account-toolbar { border-bottom: 1px solid var(--line); }
.settings-account-head, .settings-account-row { display: grid; grid-template-columns: minmax(250px,1.35fr) minmax(145px,.72fr) minmax(175px,.85fr) 88px 224px; align-items: center; gap: 16px; }
.settings-account-head { min-height: 42px; padding: 0 20px; color: var(--ink-500); background: var(--surface); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.settings-account-list { max-height: min(620px,calc(100dvh - 380px)); overflow-y: auto; overscroll-behavior: contain; }
.settings-account-row { min-height: 70px; padding: 11px 20px; border-top: 1px solid var(--line); transition: background var(--motion-fast); }
.settings-account-row:hover { background: var(--forest-50); }
.settings-account-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.settings-account-identity > i { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 11px; color: var(--accent-strong); background: var(--accent-soft); font: 800 .66rem/1 "Manrope",sans-serif; font-style: normal; }
.settings-account-identity > span, .settings-account-access, .settings-account-login { min-width: 0; }
.settings-account-row strong, .settings-account-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-account-row strong { color: var(--ink-900); font-size: .75rem; }
.settings-account-row small { margin-top: 4px; color: var(--ink-500); font-size: .64rem; }
.settings-account-edit { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.permission-form { display: grid; gap: 20px; }
.permission-person { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); }
.permission-person > span { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--gold-soft-ink); background: var(--gold-300); font: 800 .72rem/1 "Manrope",sans-serif; }
.permission-person strong, .permission-person small { display: block; }
.permission-person strong { color: var(--ink-900); font-size: .82rem; }
.permission-person small { margin-top: 4px; color: var(--ink-500); font-size: .68rem; }
.permission-mode { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.permission-mode legend { margin-bottom: 10px; color: var(--ink-900); font: 800 .8rem/1.3 "Manrope",sans-serif; }
.permission-mode-card { min-height: 76px; display: grid; grid-template-columns: 20px 42px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast); }
.permission-mode-card:hover { border-color: var(--line-strong); background: var(--forest-50); }
.permission-mode-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.permission-mode-card input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.permission-mode-card > span:nth-of-type(1) { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--gold-soft-ink); background: var(--gold-100); }
.permission-mode-card > span:nth-of-type(1) svg { width: 18px; height: 18px; }
.permission-mode-card strong, .permission-mode-card small { display: block; }
.permission-mode-card strong { color: var(--ink-900); font-size: .76rem; }
.permission-mode-card small { margin-top: 4px; color: var(--ink-500); font-size: .66rem; line-height: 1.45; }
.permission-custom { display: grid; gap: 12px; }
.permission-custom[hidden] { display: none; }
.permission-custom-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.permission-custom-head strong, .permission-custom-head small { display: block; }
.permission-custom-head strong { color: var(--ink-900); font-size: .8rem; }
.permission-custom-head small { margin-top: 4px; color: var(--ink-500); font-size: .66rem; line-height: 1.45; }
.permission-presets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.permission-matrix { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.permission-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,220px); align-items: center; gap: 18px; margin: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.permission-row:last-child { border-bottom: 0; }
.permission-row:hover { background: var(--forest-50); }
.permission-row > span { min-width: 0; }
.permission-row strong, .permission-row small { display: block; }
.permission-row strong { color: var(--ink-800); font-size: .74rem; font-weight: 800; }
.permission-row small { margin-top: 3px; color: var(--ink-500); font-size: .63rem; line-height: 1.4; }
.permission-row select { width: 100%; min-height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink-900); background: var(--surface); font: 700 .7rem/1 "Inter",sans-serif; cursor: pointer; }
.permission-row select:focus-visible { border-color: var(--accent); outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.permission-help { margin: -2px 0 0; color: var(--ink-500); font-size: .68rem; line-height: 1.55; }
.operations-account-form { margin-top: 0; }
.account-form-section { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.account-form-section-head { display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.account-form-section-head > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--gold-soft-ink); background: var(--gold-200); font: 800 .7rem/1 "Manrope",sans-serif; }
.account-form-section-head strong, .account-form-section-head small { display: block; }
.account-form-section-head strong { color: var(--ink-900); font: 800 .82rem/1.3 "Manrope",sans-serif; }
.account-form-section-head small { margin-top: 3px; color: var(--ink-500); font-size: .66rem; line-height: 1.4; }
.account-form-section .permission-mode { gap: 8px; }
.account-form-section .permission-mode-card { min-height: 70px; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
.settings-access-picker { display: grid; gap: 8px; }
.settings-access-picker > p { margin: 0 0 8px; color: var(--ink-500); font-size: .78rem; line-height: 1.5; }
.settings-access-picker > button { width: 100%; min-height: 70px; display: grid; grid-template-columns: 42px minmax(0,1fr) 20px; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink-900); background: var(--surface); text-align: left; cursor: pointer; transition: border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast); }
.settings-access-picker > button:hover { border-color: var(--line-strong); background: var(--forest-50); transform: translateY(-1px); }
.settings-access-picker > button > span:first-child { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--gold-soft-ink); background: var(--gold-100); }
.settings-access-picker > button > span:nth-child(2) { min-width: 0; }
.settings-access-picker strong, .settings-access-picker small { display: block; }
.settings-access-picker strong { font-size: .8rem; }
.settings-access-picker small { margin-top: 4px; color: var(--ink-500); font-size: .68rem; line-height: 1.4; }
.settings-access-picker svg { width: 18px; height: 18px; }
.master-list, .audit-list { display: grid; gap: 2px; }
.master-row, .audit-row { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.master-row:last-child, .audit-row:last-child { border-bottom: 0; }
.master-row strong, .master-row small, .audit-row strong, .audit-row small { display: block; }
.master-row strong, .audit-row strong { font-size: .77rem; text-transform: capitalize; }
.master-row small, .audit-row small { margin-top: 4px; color: var(--ink-500); font-size: .66rem; }
.master-empty { padding: 26px 0; color: var(--ink-500); font-size: .75rem; text-align: center; }
.import-file-button { width: 100%; justify-content: center; margin-top: 14px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .settings-account-head { display: none; }
  .settings-account-row { grid-template-columns: minmax(0,1fr) minmax(150px,.7fr) auto; grid-template-areas: "identity status edit" "access login login"; gap: 9px 14px; padding-block: 14px; }
  .settings-account-identity { grid-area: identity; }
  .settings-account-access { grid-area: access; }
  .settings-account-login { grid-area: login; }
  .settings-account-status { grid-area: status; justify-self: end; }
  .settings-account-edit { grid-area: edit; }
  .permission-mode-card { grid-template-columns: 18px 38px minmax(0,1fr); gap: 10px; padding: 12px; }
  .permission-mode-card > span:nth-of-type(1) { width: 36px; height: 36px; }
  .permission-custom-head { align-items: stretch; flex-direction: column; }
  .permission-presets { justify-content: flex-start; }
  .permission-presets .button { flex: 1; }
  .permission-row { grid-template-columns: 1fr; gap: 9px; padding: 13px; }
  .permission-row select { font-size: 16px; }
  .account-form-section { padding: 14px; }
}
.settings-helper { margin: 10px 0 0; color: var(--ink-500); font-size: .74rem; line-height: 1.5; }
.settings-helper.error { color: var(--danger); font-weight: 700; }
.audit-row { display: grid; grid-template-columns: 38px 1fr auto; }
.audit-row .icon-tile { width: 34px; height: 34px; }
.audit-row em { color: var(--ink-500); font-size: .65rem; font-style: normal; text-transform: capitalize; }
.setup-forms { display: grid; gap: 28px; }
.setup-forms .auth-form { margin: 0; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.setup-forms .auth-form:last-of-type { border-bottom: 0; }
.setup-forms h3 { margin: 0; font: 800 1rem/1.2 "Manrope",sans-serif; }
.attendance-form { display: grid; gap: 10px; }
.attendance-form-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--ink-500); font-size: .72rem; }
.attendance-student { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.attendance-student strong, .attendance-student small { display: block; }
.attendance-student strong { font-size: .78rem; }
.attendance-student small { margin-top: 3px; color: var(--ink-500); font-size: .65rem; }
.attendance-student select { height: 40px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; color: var(--ink-950); background: var(--surface); }
.attendance-form .field { margin-top: 14px; }
.drawer-actions { justify-content: flex-end; margin-top: 16px; }
.reports-grid { margin-top: 18px; }

/* Examinations */
.examination-table { min-width: 930px; table-layout: fixed; }
.examination-table th:nth-child(1) { width: 20%; }
.examination-table th:nth-child(2) { width: 12%; }
.examination-table th:nth-child(3) { width: 16%; }
.examination-table th:nth-child(4) { width: 9%; }
.examination-table th:nth-child(5) { width: 15%; }
.examination-table th:nth-child(6) { width: 9%; }
.examination-table th:nth-child(7) { width: 19%; }
.examination-table td { vertical-align: middle; }
.examination-table td > strong,
.examination-table td > small { display: block; }
.examination-table td > small { margin-top: 4px; color: var(--ink-500); }
.exam-progress-copy { min-width: 126px; }
.exam-progress-copy strong { display: block; overflow: hidden; color: var(--ink-800); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.exam-progress { height: 5px; display: block; overflow: hidden; margin-top: 9px; border-radius: 999px; background: var(--surface-strong); }
.exam-progress i { height: 100%; display: block; border-radius: inherit; background: var(--accent); }
.examination-actions { flex-wrap: nowrap; justify-content: flex-end; }
.examination-actions .button { min-width: 112px; padding-inline: 12px; white-space: nowrap; }
.exam-edit-button { flex: 0 0 38px; width: 38px; height: 40px; border: 1px solid var(--line-strong); background: var(--surface); }
.exam-edit-button:hover { border-color: var(--accent); color: var(--accent-strong); background: var(--accent-soft); }
.exam-edit-button svg { width: 16px; height: 16px; }
.detail-drawer.detail-drawer-wide { width: min(820px, 100vw); }
.exam-detail-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-muted); }
.exam-detail-summary > div { min-height: 82px; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px; border-right: 1px solid var(--line); }
.exam-detail-summary > div:last-child { border-right: 0; }
.exam-detail-summary span { color: var(--ink-500); font-size: .67rem; font-weight: 700; }
.exam-detail-summary strong { margin-top: 6px; overflow: hidden; color: var(--ink-950); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.exam-published-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 11px 13px; border-radius: var(--radius-md); color: var(--success); background: var(--success-bg); font-size: .72rem; font-weight: 700; }
.exam-published-note svg { flex: 0 0 auto; width: 16px; height: 16px; }
.exam-roster-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 0 2px; border-bottom: 1px solid var(--line); color: var(--ink-500); font-size: .7rem; }
.exam-roster-head strong { color: var(--warning); font-size: .68rem; }
.exam-marks-list, .exam-results-list { display: grid; }
.exam-mark-row { display: grid; grid-template-columns: minmax(170px,1.1fr) 116px 92px minmax(150px,1fr); align-items: end; gap: 12px; min-height: 82px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.exam-mark-student { align-self: center; min-width: 0; }
.exam-mark-student strong, .exam-mark-student small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exam-mark-student strong { color: var(--ink-950); font-size: .76rem; }
.exam-mark-student small { margin-top: 4px; color: var(--ink-500); font-size: .65rem; }
.exam-mark-row label { min-width: 0; }
.exam-mark-row label > span { display: block; margin-bottom: 5px; color: var(--ink-500); font-size: .62rem; font-weight: 700; }
.exam-mark-row input,
.exam-mark-row select { width: 100%; height: 42px; min-width: 0; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 10px; outline: 0; color: var(--ink-950); background: var(--surface); font: inherit; font-size: .73rem; }
.exam-mark-row input:focus,
.exam-mark-row select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.exam-mark-row input:disabled { color: var(--ink-400); background: var(--surface-muted); }
.exam-result-row { min-height: 70px; display: grid; grid-template-columns: minmax(190px,1fr) 110px 100px minmax(120px,.8fr); align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.exam-result-row > strong { font-size: .76rem; font-variant-numeric: tabular-nums; }
.exam-result-row > small { overflow: hidden; color: var(--ink-500); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.exam-drawer-actions { position: sticky; bottom: -24px; z-index: 2; margin-inline: -24px; margin-bottom: -24px; padding: 14px 24px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
.status-marks-entry { color: var(--warning); background: var(--warning-bg); }
.status-published, .status-graded { color: var(--success); background: var(--success-bg); }
.status-absent, .status-cancelled { color: var(--danger); background: var(--danger-bg); }
.status-withheld { color: var(--warning); background: var(--warning-bg); }

/* Detail drawer, command palette and toast */
.detail-drawer { width: min(480px, 100vw); position: fixed; inset: 0 0 0 auto; z-index: 110; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(105%); transition: transform var(--motion-base) var(--ease); }
.detail-drawer.open { transform: translateX(0); }
.drawer-overlay { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; background: rgba(10,11,27,.48); backdrop-filter: blur(3px); transition: opacity var(--motion-base); }
.drawer-overlay.open { pointer-events: auto; opacity: 1; }
.detail-drawer-head { min-height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.detail-drawer-head h2 { margin: 0; font: 800 1.25rem/1.2 "Manrope",sans-serif; }
.detail-drawer-body { overflow-y: auto; padding: 24px; }
.profile-hero { padding: 20px; border-radius: 16px; color: #fff; background: var(--forest-900); }
.profile-hero .record-avatar { width: 46px; height: 46px; color: var(--forest-950); background: #e3c62b; }
.profile-hero h3 { margin: 16px 0 4px; font: 800 1.3rem/1.2 "Manrope",sans-serif; }
.profile-hero p { margin: 0; color: rgba(255,255,255,.62); font-size: .76rem; }
.detail-section { margin-top: 26px; }
.detail-section h4 { margin: 0 0 12px; font: 800 .77rem/1.2 "Manrope",sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-field { padding: 12px; border-radius: 11px; background: var(--surface-muted); }
.detail-field span { display: block; color: var(--ink-500); font-size: .66rem; }
.detail-field strong { display: block; margin-top: 5px; font-size: .77rem; line-height: 1.4; }
.detail-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.detail-section-heading h4 { margin-bottom: 4px; }
.detail-section-heading p { margin: 0; color: var(--ink-500); font-size: .68rem; }
.student-stock-section { padding-top: 24px; border-top: 1px solid var(--line); }
.student-stock-summary { display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-muted); }
.student-stock-summary span { min-width: 0; padding: 12px; border-right: 1px solid var(--line); }
.student-stock-summary span:last-child { border-right: 0; }
.student-stock-summary strong, .student-stock-summary small { display: block; }
.student-stock-summary strong { color: var(--ink-950); font-size: .9rem; font-variant-numeric: tabular-nums; }
.student-stock-summary small { margin-top: 3px; color: var(--ink-500); font-size: .58rem; line-height: 1.3; }
.student-stock-list { display: grid; gap: 8px; }
.student-stock-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.student-stock-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--accent-strong); background: var(--accent-soft); }
.student-stock-icon svg { width: 18px; }
.student-stock-copy, .student-stock-copy strong, .student-stock-copy small { min-width: 0; }
.student-stock-copy strong, .student-stock-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-stock-copy strong { color: var(--ink-900); font-size: .72rem; }
.student-stock-copy small { margin-top: 3px; color: var(--ink-500); font-size: .6rem; }
.student-stock-quantity { min-width: 44px; text-align: right; }
.student-stock-quantity strong, .student-stock-quantity small { display: block; }
.student-stock-quantity strong { color: var(--ink-950); font-size: .78rem; font-variant-numeric: tabular-nums; }
.student-stock-quantity small { color: var(--ink-500); font-size: .58rem; }
.student-stock-empty { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-500); background: var(--surface-muted); }
.student-stock-empty > svg { width: 22px; flex: 0 0 auto; }
.student-stock-empty strong, .student-stock-empty small { display: block; }
.student-stock-empty strong { color: var(--ink-800); font-size: .72rem; }
.student-stock-empty small { margin-top: 3px; font-size: .61rem; line-height: 1.45; }
.student-stock-history { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.student-stock-history summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: var(--ink-800); font-size: .68rem; font-weight: 800; cursor: pointer; list-style: none; }
.student-stock-history summary::-webkit-details-marker { display: none; }
.student-stock-history summary span { min-width: 28px; padding: 3px 7px; border-radius: 999px; color: var(--accent-strong); background: var(--accent-soft); text-align: center; }
.student-stock-history[open] summary { border-bottom: 1px solid var(--line); }
.student-stock-history-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.student-stock-history-row:last-child { border-bottom: 0; }
.student-stock-history-mark { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; font-size: .8rem; font-weight: 900; }
.student-stock-history-mark.is-issue { color: var(--danger); background: var(--danger-bg); }
.student-stock-history-mark.is-return { color: var(--success); background: var(--success-bg); }
.student-stock-history-row strong, .student-stock-history-row small { display: block; }
.student-stock-history-row strong { color: var(--ink-800); font-size: .65rem; }
.student-stock-history-row small { margin-top: 3px; color: var(--ink-500); font-size: .58rem; }
.student-stock-history-row em { color: var(--ink-700); font-size: .62rem; font-style: normal; font-weight: 800; }
.student-stock-unavailable { display: grid; justify-items: center; gap: 12px; padding: 36px 18px; text-align: center; }
.student-stock-unavailable > svg { width: 42px; color: var(--accent); }
.student-stock-unavailable h3, .student-stock-unavailable p { margin: 0; }
.student-stock-unavailable p { color: var(--ink-500); font-size: .76rem; line-height: 1.55; }
.issue-list { display: grid; gap: 8px; }
.issue-list div { display: flex; gap: 9px; padding: 10px; border-radius: 10px; color: var(--warning); background: var(--warning-bg); font-size: .73rem; line-height: 1.45; }
.command-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding-top: min(18vh,160px); background: rgba(10,11,27,.56); backdrop-filter: blur(6px); }
.command-palette { width: min(620px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-lg); }
.command-palette > label { height: 62px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.command-palette input { height: 100%; border: 0; outline: 0; color: var(--ink-950); background: transparent; font-size: 1rem; }
.command-results { max-height: 350px; overflow-y: auto; padding: 10px; }
.command-results > p { margin: 8px 10px; color: var(--ink-500); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.command-item { width: 100%; min-height: 48px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 10px; color: var(--ink-800); background: transparent; text-align: left; cursor: pointer; }
.command-item:hover { background: var(--surface-muted); }
.command-item > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.command-item strong { display: block; font-size: .78rem; }
.command-item small { display: block; color: var(--ink-500); font-size: .66rem; }
.command-palette footer { min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: .65rem; }
.account-menu { position: fixed; right: 22px; top: 68px; z-index: 180; width: min(280px, calc(100vw - 28px)); overflow: hidden; padding: 8px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-lg); transform-origin: top right; animation: account-menu-in var(--motion-fast) var(--ease); }
.account-menu.from-sidebar { right: auto; top: auto; left: 18px; bottom: 86px; transform-origin: bottom left; }
.account-menu-profile { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 11px; padding: 10px; border-bottom: 1px solid var(--line); }
.account-menu-profile .user-avatar { width: 40px; height: 40px; }
.account-menu-profile strong, .account-menu-profile small, .account-menu-action strong, .account-menu-action small { display: block; }
.account-menu-profile strong, .account-menu-action strong { color: var(--ink-950); font-size: .78rem; }
.account-menu-profile small, .account-menu-action small { margin-top: 3px; color: var(--ink-500); font-size: .67rem; }
.account-menu-action { width: 100%; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 10px; margin-top: 7px; padding: 9px 10px; border: 0; border-radius: 10px; color: var(--danger); background: transparent; text-align: left; cursor: pointer; }
.account-menu-action:hover, .account-menu-action:focus-visible { background: var(--danger-bg); }
.account-menu-action > [data-icon] { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--danger-bg); }
@keyframes account-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 8px; }
.toast { min-width: 280px; display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink-800); background: var(--surface); box-shadow: var(--shadow-lg); animation: toast-in var(--motion-base) var(--ease); font-size: .76rem; }
.toast-error { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); color: var(--danger); }
@keyframes toast-in { from { opacity:0; transform: translateY(8px); } }
.drawer-scrim { display: none; }

/* Responsive */
@media (max-width: 1180px) {
  :root { --sidebar-width: 240px; }
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .compact-metrics { grid-template-columns: repeat(2,1fr); }
  .notice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-quick-actions { grid-template-columns: 1fr; }
  .quick-actions-heading small { max-width: none; }
  .quick-actions-grid { grid-template-columns: repeat(3,minmax(150px,1fr)); }
}

@media (max-width: 920px) {
  .auth-screen { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { min-height: 100dvh; }
  .mobile-auth-brand { display: flex; }
  .app-shell { display: block; }
  .sidebar { width: min(320px, 88vw); overscroll-behavior: contain; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-105%); transition: transform var(--motion-base) var(--ease); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close, .menu-button { display: inline-grid; }
  .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: 0; background: rgba(10,11,27,.5); transition: opacity var(--motion-base); }
  .drawer-scrim.open { pointer-events: auto; opacity: 1; }
  .main-panel { min-height: 100dvh; }
  .topbar-left { display: flex; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .surface-wide { grid-column: auto; }
  .ledger-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ledger-control-card { grid-template-columns: 1fr; }
  .ledger-control-card > .button { width: 100%; }
}

@media (max-width: 700px) {
  :root { --header-height: 68px; }
  .communication-thread { grid-template-columns: 38px minmax(0,1fr); }
  .thread-avatar { width: 38px; height: 38px; }
  .thread-meta { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; }
  .topbar { height: calc(var(--header-height) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); }
  .topbar-left { gap: 8px; }
  .topbar-actions { gap: 1px; }
  .search-trigger { width: 44px; display: grid; grid-template-columns: 1fr; place-items: center; padding: 0; }
  .search-trigger span:nth-child(2), .search-trigger kbd, #theme-toggle { display: none; }
  .page-container { padding: 22px max(14px, env(safe-area-inset-right)) max(48px, calc(32px + env(safe-area-inset-bottom))) max(14px, env(safe-area-inset-left)); }
  .welcome-row, .page-heading { align-items: stretch; flex-direction: column; margin-bottom: 20px; }
  .welcome-row h2, .page-heading h2 { display: none; }
  .welcome-row .button, .page-heading .button { width: 100%; }
  .dashboard-quick-actions { gap: 12px; padding: 12px; border-radius: 15px; }
  .quick-actions-heading { padding: 2px 4px; }
  .quick-actions-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-action { min-height: 72px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 132px; padding: 16px; }
  .compact-metrics { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .compact-metric { min-width: 150px; scroll-snap-align: start; }
  .staff-attendance-toolbar { align-items: stretch; flex-direction: column; padding: 13px; }
  .staff-date-actions { display: grid; grid-template-columns: 40px minmax(0,1fr) auto 40px; }
  .staff-date-picker input { width: 100%; font-size: 16px; }
  .staff-attendance-surface > .surface-head { align-items: flex-start; padding: 16px; }
  .staff-person { min-width: 0; }
  .staff-person small { flex-wrap: wrap; }
  .surface { padding: 16px; border-radius: 15px; }
  .settings-page-heading > div:first-child { display: none; }
  .settings-heading-actions { grid-template-columns: 1fr 1fr; }
  .settings-tabs { width: 100%; overflow-x: auto; }
  .settings-tabs button { min-width: max-content; flex: 1; }
  .settings-account-surface { padding: 0; }
  .settings-account-surface > .surface-head { padding: 16px; }
  .settings-account-toolbar { padding: 12px; }
  .settings-account-head { display: none; }
  .settings-account-list { max-height: none; }
  .settings-account-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "identity edit" "access status" "login login"; gap: 10px 12px; padding: 14px 16px; }
  .settings-account-identity { grid-area: identity; }
  .settings-account-access { grid-area: access; }
  .settings-account-login { grid-area: login; padding-top: 9px; border-top: 1px dashed var(--line); }
  .settings-account-status { grid-area: status; justify-self: end; }
  .settings-account-edit { grid-area: edit; }
  .dashboard-grid { gap: 12px; }
  .program-row { grid-template-columns: 84px 1fr 32px; gap: 8px; }
  .record-item { grid-template-columns: 36px 1fr auto; }
  .record-item .record-program, .record-item .record-date { display: none; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar select, .search-field, .search-field-wide { width: 100%; }
  .finance-context-action { width: 100%; }
  .field input, .field select, .field textarea, .toolbar select, .toolbar input, .command-palette input { font-size: 16px; }
  .table-meta { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
  .data-table-wrap { display: none; }
  .mobile-records { display: grid; gap: 10px; padding: 12px; }
  .mobile-record-card { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
  .mobile-record-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .mobile-record-card h3 { margin: 0; font: 800 .86rem/1.25 "Manrope",sans-serif; }
  .mobile-record-card p { margin: 4px 0 0; color: var(--ink-500); font-size: .7rem; }
  .mobile-record-card, .mobile-record-card * { overflow-wrap: anywhere; }
  .mobile-record-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
  .mobile-record-meta div { padding: 9px; border-radius: 9px; background: var(--surface-muted); }
  .mobile-record-meta span { display: block; color: var(--ink-500); font-size: .61rem; }
  .mobile-record-meta strong { display: block; margin-top: 3px; font-size: .7rem; }
  .mobile-record-card .button { width: 100%; margin-top: 12px; }
  .mobile-record-card .mobile-card-actions .button { margin-top: 0; }
  .teaching-register-head { min-height: 58px; padding: 0 14px; }
  .operations-timetable-head { align-items: flex-start; flex-direction: column; gap: 10px; padding: 15px; }
  .timetable-date-tabs { padding: 10px 12px; }
  .timetable-date-tab { min-width: 78px; }
  .operations-timetable-grid { grid-template-columns: 1fr; }
  .timetable-batch-lane { padding: 14px; }
  .timetable-batch-lane + .timetable-batch-lane { border-top: 1px solid var(--line); border-left: 0; }
  .timetable-slot { grid-template-columns: 70px minmax(0,1fr) auto; gap: 9px; }
  .timetable-slot .owner-edit-button { width: 34px; margin: 0; padding: 0; font-size: 0; }
  .timetable-slot .owner-edit-button svg { width: 15px; height: 15px; }
  .teaching-register .mobile-record-card > .button { margin-top: 12px; }
  .student-directory-search { padding: 12px; }
  .student-directory-search .toolbar-count { align-self: flex-start; margin-left: 0; }
  .student-batch-tabs { padding: 9px 12px; }
  .student-batch-tab { min-height: 40px; padding-inline: 12px; }
  .student-directory-bar { padding: 10px 12px; }
  .student-directory-row { min-height: 60px; grid-template-columns: 36px minmax(0,1fr) auto 18px; gap: 10px; padding: 9px 12px; }
  .student-directory-context, .student-directory-contact { display: none; }
  .student-directory-status { grid-column: 3; }
  .student-directory-open { grid-column: 4; }
  .student-directory-row .status { padding: 5px 6px; font-size: .58rem; }
  .segmented-control { width: 100%; }
  .segmented-control button { flex: 1; }
  #finance .tab-review-count { display: none !important; }
  .payment-student-filter { align-items: stretch; flex-direction: column; }
  .payment-student-filter .button { width: 100%; }
  .ledger-heading { grid-template-columns: 1fr; align-items: stretch; gap: 13px; padding: 16px; }
  .ledger-heading-copy { order: -1; }
  .ledger-heading-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .ledger-heading-actions .button, .ledger-heading > .button { width: 100%; }
  .ledger-summary-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .ledger-summary-card { min-height: 108px; padding: 14px; }
  .ledger-summary-card > strong { font-size: 1rem; }
  .ledger-statement-head { align-items: flex-start; flex-direction: column; }
  .ledger-control-values { grid-template-columns: 1fr 1fr; }
  .ledger-control-values div:nth-child(2) { border-right: 0; }
  .ledger-control-values div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ledger-mobile-records { padding: 10px; }
  .inline-notice { align-items: flex-start; }
  .heading-actions, .drawer-actions { width: 100%; }
  .heading-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .heading-actions .button, .drawer-actions .button { width: 100%; }
  .settings-heading-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .settings-heading-actions .button { width: 100%; justify-content: center; }
  .notice-grid, .settings-grid { grid-template-columns: 1fr; }
  .settings-audit { grid-column: auto; }
  .form-pair { grid-template-columns: 1fr; }
  .attendance-student { grid-template-columns: 1fr 120px; }
  .exam-detail-summary { grid-template-columns: 1fr 1fr; }
  .exam-detail-summary > div:nth-child(2) { border-right: 0; }
  .exam-detail-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .exam-mark-row { grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; padding: 15px 0; }
  .exam-mark-student { grid-column: 1 / -1; padding-bottom: 2px; }
  .exam-mark-row label:last-child { grid-column: 1 / -1; }
  .exam-result-row { grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; padding: 14px 0; }
  .exam-result-row > span { justify-self: end; }
  .exam-result-row > small { grid-column: 1 / -1; }
  .exam-drawer-actions { bottom: -28px; margin-inline: max(-16px, calc(-1 * env(safe-area-inset-right))) max(-16px, calc(-1 * env(safe-area-inset-left))); margin-bottom: -28px; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-drawer { width: 100%; padding-bottom: env(safe-area-inset-bottom); }
  .detail-drawer-head { min-height: calc(76px + env(safe-area-inset-top)); padding: max(16px, env(safe-area-inset-top)) 18px 16px; }
  .detail-drawer-body { padding: 18px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); }
  .command-overlay { padding: max(12px, calc(env(safe-area-inset-top) + 12px)) 14px max(12px, env(safe-area-inset-bottom)); place-items: start center; }
  .command-palette { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
  .command-results { max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .account-menu { top: calc(var(--header-height) + env(safe-area-inset-top) - 2px); right: max(10px, env(safe-area-inset-right)); width: min(300px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
  .account-menu.from-sidebar { right: auto; top: auto; left: max(10px, env(safe-area-inset-left)); bottom: max(82px, calc(70px + env(safe-area-inset-bottom))); }
  .toast-region { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
  .toast { width: 100%; min-width: 0; }
  .auth-form-panel { min-height: 100dvh; padding: max(28px, calc(20px + env(safe-area-inset-top))) max(22px, env(safe-area-inset-right)) max(28px, calc(20px + env(safe-area-inset-bottom))) max(22px, env(safe-area-inset-left)); }
  .auth-form-wrap { max-width: 440px; }
}

@media (min-width: 921px) {
  .topbar-left { display: none; }
}

@media (max-width: 420px) {
  .quick-actions-grid { grid-template-columns: 1fr; }
  .quick-action { min-height: 64px; }
  .heading-actions:not(.settings-heading-actions) { grid-template-columns: 1fr; }
  .settings-heading-actions { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 112px; padding: 14px; }
  .topbar h1 { font-size: .9rem; }
  .breadcrumb { display: none; }
  .topbar-profile { display: none; }
  .surface-head { flex-wrap: wrap; }
  .surface-head .button { min-height: 44px; }
  .segmented-control { overflow-x: auto; justify-content: stretch; }
  .segmented-control button { min-width: max-content; }
  .mobile-auth-brand { margin-bottom: 28px; }
  .mobile-auth-brand img { width: min(170px, 58vw); }
  .auth-form { gap: 16px; margin-top: 26px; }
}

@media (max-width: 360px) {
  .staff-date-actions { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .staff-date-picker { grid-column: 1 / -1; grid-row: 1; }
  .staff-date-actions .icon-button { width: 44px; height: 44px; }
  .notification-button { display: none; }
  .topbar h1 { max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-container { padding-left: 12px; padding-right: 12px; }
  .surface, .metric-card { border-radius: 14px; }
}

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { color: #151622; background: #fff; }
  .sidebar, .topbar, .drawer-scrim, .detail-drawer, .detail-overlay, .account-menu, .toast-region, #finance-workspace, #ledger-back, .ledger-heading-actions, #ledger-payment-register { display: none !important; }
  .app-shell, .main-panel, .page-container, .app-view#finance, #student-ledger-view { display: block !important; width: 100% !important; min-height: 0; margin: 0; padding: 0; }
  .main-panel { grid-column: auto; }
  .app-view:not(#finance) { display: none !important; }
  .ledger-heading, .ledger-summary-card, .ledger-statement, .ledger-control-card { break-inside: avoid; box-shadow: none; }
  .ledger-heading { grid-template-columns: 1fr; padding: 12px 0 14px; border: 0; border-bottom: 2px solid #181b4b; border-radius: 0; }
  .ledger-summary-grid { grid-template-columns: repeat(4,1fr); margin: 12px 0; }
  .ledger-summary-card { min-height: 88px; padding: 12px; }
  .ledger-statement { border: 1px solid #d8d9e2; }
  .ledger-statement-head { min-height: 58px; padding: 10px 12px; }
  .ledger-statement .data-table-wrap { display: block !important; }
  .ledger-mobile-records { display: none !important; }
  .ledger-table { font-size: 9pt; }
  .ledger-table th, .ledger-table td { padding: 8px 10px; }
  .ledger-control-card { grid-template-columns: 1fr 1.5fr; margin-top: 12px; padding: 14px; }
  .ledger-control-values { grid-template-columns: repeat(4,1fr); }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Production typography and interaction baseline */
body { font-size: 1rem; line-height: 1.5; }
h1, h2, h3, h4, .metric-value, .compact-metric strong { font-family: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
p, li, td, th, label, input, select, textarea, button { line-height: 1.45; }
.sidebar-brand-copy small, .sidebar-section-label, .breadcrumb, .eyebrow, .metric-label,
.compact-metric span, .table-meta, .data-table th, .student-primary small, .status-pill,
.detail-field span, .mobile-record-meta span, .command-results > p, .field-help, .overline,
.count-badge, .finance-total small, .reconcile-labels, .search-trigger kbd { font-size: .75rem; }
.nav-item, .button, .toolbar select, .toolbar input, .search-field input, .field,
.field input, .field select, .field textarea, .data-table, .record-item, .notice-card p,
.mobile-record-card p, .mobile-record-meta strong, .detail-field strong, .toast { font-size: .875rem; }
.field > span, .check-field { font-size: .875rem; font-weight: 700; }
.data-table th { letter-spacing: .055em; line-height: 1.35; }
.data-table td { line-height: 1.45; }
.data-table td, .currency, time, .metric-value, .compact-metric strong { font-variant-numeric: tabular-nums; }
.student-primary strong, .student-primary small { line-height: 1.4; }
.notice-card p, .inline-notice p, .detail-section p { max-width: 68ch; line-height: 1.6; }
.segmented-control button, .table-action { min-width: 44px; min-height: 44px; }
.search-trigger { min-height: 44px; }
.button:active, .icon-button:active, .nav-item:active, .segmented-control button:active { opacity: .78; }

@media (max-width: 700px) {
  .field input, .field select, .field textarea, .toolbar select, .toolbar input, .command-palette input { font-size: 16px; }
  .button-small { min-height: 44px; }
  .mobile-record-card h3 { font-size: .875rem; }
  .mobile-record-card p, .mobile-record-meta strong { font-size: .8125rem; }
  .mobile-record-meta span { font-size: .75rem; }
  .compact-metric { min-width: 168px; }
}
/* Concise collection controls */
.collection-more-row td { padding: 0 !important; background: var(--surface, #fff); }
.collection-more-button { width: 100%; min-height: 52px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--primary); font: inherit; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.collection-more-button:hover { background: var(--surface-soft); }
.collection-more-button span { color: var(--muted); font-size: .78rem; font-weight: 650; }
.attendance-register-toolbar { min-height: 72px; padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.attendance-register-toolbar label { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; font-weight: 750; }
.attendance-register-toolbar select { min-width: 210px; height: 44px; padding: 0 38px 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 700; }
.attendance-register-toolbar p { margin: 0; color: var(--muted); font-size: .86rem; }
.attendance-monitor-summary { display: grid; gap: 18px; }
.attendance-roster-details { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.attendance-roster-details summary { min-height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--text); font-weight: 800; list-style: none; }
.attendance-roster-details summary::-webkit-details-marker { display: none; }
.attendance-roster-details summary span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.attendance-readonly-list { max-height: 58vh; overflow-y: auto; padding: 0 16px 8px; border-top: 1px solid var(--border); }
.attendance-readonly-list .attendance-student { grid-template-columns: minmax(0,1fr) auto; }

@media (max-width: 720px) {
  .attendance-register-toolbar { align-items: stretch; flex-direction: column; }
  .attendance-register-toolbar label { align-items: stretch; flex-direction: column; }
  .attendance-register-toolbar select { width: 100%; min-width: 0; }
  .attendance-register-toolbar p { padding-left: 2px; }
}
.report-downloads { margin-bottom: 24px; padding: 20px; }
.report-downloads > .surface-head { margin-bottom: 16px; padding: 0; }
.report-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.report-filters .field { margin: 0; flex: 1; min-width: 150px; }
.report-filters [hidden] { display: none; }
.report-scope-help { color: var(--ink-500); font-size: .76rem; line-height: 1.6; margin: 12px 0 20px; }
.report-result-count { margin: 12px 0; color: var(--ink-500); font-size: .76rem; }
.report-search .field:first-child { flex: 2; }
.report-card summary:focus-visible { outline: 2px solid var(--primary, #34357b); outline-offset: 3px; border-radius: 4px; }
.report-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.report-card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.report-card h4 { font-size: .9rem; margin: 0 0 7px; }
.report-card p { font-size: .76rem; line-height: 1.6; color: var(--ink-500); margin: 0 0 10px; }
.report-card summary { cursor: pointer; font-size: .72rem; min-height: 44px; padding-block: 10px; }
.report-card ul { margin: 0 0 8px; padding-left: 20px; font-size: .74rem; line-height: 1.7; }
.report-card > button { align-self: start; min-height: 44px; }
@media (max-width: 640px) { .report-catalog { grid-template-columns: 1fr; } .report-downloads { padding: 14px; } .report-filters .field { min-width: min(100%, 180px); } .report-card > button { width: 100%; } }