:root {
  color-scheme: light;
  --ink: #1b2b28;
  --muted: #74817d;
  --muted-2: #97a19d;
  --green: #1f6656;
  --green-dark: #194f44;
  --green-soft: #eaf3ef;
  --gold: #d7a65a;
  --line: #e9ede9;
  --surface: #fff;
  --surface-alt: #f7f9f7;
  --canvas: #f7f8f6;
  --sidebar: #153c35;
  --sidebar-muted: #a7bdb5;
  --red: #c75850;
  --amber: #bf8736;
  --shadow: rgba(31,53,41,.12);
  font-family: 'DM Sans', 'Segoe UI', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf3f1;
  --muted: #a3b4af;
  --muted-2: #889893;
  --green: #64c7a9;
  --green-dark: #8fe0c2;
  --green-soft: #15322e;
  --gold: #f0c777;
  --line: #243734;
  --surface: #101b1b;
  --surface-alt: #171f20;
  --canvas: #0b1213;
  --sidebar: #0d1718;
  --sidebar-muted: #9db1ad;
  --red: #ff8d7e;
  --amber: #f2b663;
  --shadow: rgba(3,7,7,.62);
}

body[data-theme="midnight"] {
  color-scheme: dark;
  --ink: #edf3ff;
  --muted: #a4b2d0;
  --muted-2: #7d8bb1;
  --green: #80ccff;
  --green-dark: #9ad8ff;
  --green-soft: #101d33;
  --gold: #ffd68a;
  --line: #24324d;
  --surface: #0a1222;
  --surface-alt: #111d31;
  --canvas: #050b16;
  --sidebar: #0a162a;
  --sidebar-muted: #b0c6ff;
  --red: #ff8a8a;
  --amber: #ffcc75;
  --shadow: rgba(8,12,23,.72);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column;
  width: 252px; padding: 21px 14px 14px; color: #fff; background: var(--sidebar);
}
.brand { display: flex; align-items: center; gap: 11px; height: 45px; padding: 0 9px; text-decoration: none; }
.brand-mark { display: grid; width: 29px; height: 29px; padding: 5px; grid-template-columns: repeat(2, 1fr); gap: 3px; border: 1px solid #9bbaad; border-radius: 9px; transform: rotate(-4deg); }
.brand-mark span { border-radius: 2px; background: #e0b768; }
.brand-mark span:nth-child(2), .brand-mark span:nth-child(3) { background: #78aa8f; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font: 800 17px/1 'Manrope', sans-serif; letter-spacing: -.5px; }
.brand-copy small { color: #96b0a7; font-size: 8px; font-weight: 700; letter-spacing: 1.18px; }
.school-switch { display: flex; align-items: center; gap: 10px; min-height: 61px; margin: 25px 1px 21px; padding: 9px; border: 1px solid #355c53; border-radius: 9px; background: #1b493f; }
.school-avatar { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #285643; background: #e4c990; font: 800 11px 'Manrope', sans-serif; }
.school-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.school-copy strong { overflow: hidden; color: #fff; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.school-copy > span { color: #abc0b8; font-size: 10px; }
.flag { margin-left: 4px; padding: 1px 4px; border-radius: 3px; color: #d9e7dc; background: #315c4d; font-size: 8px; font-weight: 700; }
.switch-chevron, .term-chevron { color: #9db7ad; font-size: 16px; }
.navigation { min-height: 0; flex: 1; overflow-y: auto; scrollbar-color: #376055 transparent; scrollbar-width: thin; }
.nav-label { margin: 4px 10px 9px; color: #87a59a; font-size: 9px; font-weight: 700; letter-spacing: 1.12px; }
.nav-label-spaced { margin-top: 21px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 37px; margin: 2px 0; padding: 0 10px; border-radius: 6px; color: #c5d5ce; font-size: 12px; text-decoration: none; transition: background .16s, color .16s; }
.nav-link:hover { color: #fff; background: #21483e; }
.nav-link.active { color: #fff; background: #2a5b4c; font-weight: 600; }
.nav-link.active::before { position: absolute; top: 9px; bottom: 9px; left: 0; width: 2px; border-radius: 3px; background: #dfb86e; content: ''; }
.nav-icon { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; }
.nav-icon svg, .icon-button svg, .top-date svg, .button-icon svg, .search-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.nav-count { margin-left: auto; color: #b7ccc2; font-size: 10px; }
.nav-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #e4b85e; }
.sidebar-bottom { padding-top: 14px; }
.term-card { display: flex; align-items: center; gap: 9px; min-height: 49px; margin-bottom: 12px; padding: 8px 9px; border: 1px solid #355c53; border-radius: 8px; background: #1b493f; }
.term-icon { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 7px; color: #e2c47e; background: #315d4e; font-size: 14px; }
.term-card > div, .profile-copy { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.term-card strong, .profile-copy strong { font-size: 10px; font-weight: 600; }
.term-card > div > span, .profile-copy small { color: #a6bcb3; font-size: 9px; }
.profile-button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 5px 2px; border: 0; border-top: 1px solid #34594f; text-align: left; background: transparent; cursor: pointer; }
.profile-avatar { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 2px solid rgba(255,255,255,.55); border-radius: 50%; color: #234f42; background: #c9dbc6; font-size: 10px; font-weight: 700; }
.profile-menu { color: #b8ccc2; font-weight: 700; letter-spacing: 1px; }
.sidebar-account-action { width: 100%; padding: 8px 0 0 44px; border: 0; color: #b0c5ba; text-align: left; background: transparent; font-size: 9px; cursor: pointer; }
.sidebar-account-action:hover { color: #fff; text-decoration: underline; }

.main-area { display: flex; min-width: 0; min-height: 100vh; flex: 1; flex-direction: column; margin-left: 252px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; height: 62px; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
body[data-theme="dark"] .topbar,
body[data-theme="midnight"] .topbar { background: rgba(16,27,27,.9); }
body[data-theme="midnight"] .topbar { background: rgba(10,18,34,.9); }
.theme-picker { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-alt); }
.theme-option { min-width: 60px; min-height: 26px; padding: 0 10px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; letter-spacing: .45px; cursor: pointer; text-transform: uppercase; }
.theme-option.active { color: #fff; background: var(--green); box-shadow: 0 2px 8px rgba(31,102,86,.18); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.breadcrumbs strong { color: #35433e; font-weight: 600; }
.crumb-divider { color: #c4ccc7; }
.topbar-actions { display: flex; height: 100%; align-items: center; gap: 17px; }
.top-date { display: flex; align-items: center; gap: 8px; color: #687670; font-size: 10px; }
.date-icon { display: flex; color: #829089; }
.date-icon svg { width: 15px; height: 15px; }
.icon-button { position: relative; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #65756e; background: transparent; cursor: pointer; }
.icon-button:hover { border-color: var(--line); background: #f7f9f7; }
.notification-button i { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #d39b46; }
.topbar-divider { width: 1px; height: 24px; background: var(--line); }
.top-profile { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; color: #3c4a45; background: transparent; cursor: pointer; }
.profile-avatar.small { width: 28px; height: 28px; border: 0; font-size: 9px; }
.top-profile-name { font-size: 10px; font-weight: 600; }
.top-profile-chevron { color: #83918a; font-size: 10px; font-weight: 700; }
.mobile-menu { display: none; }
.page-content { width: 100%; max-width: 1440px; flex: 1; align-self: center; padding: 29px 36px 35px; }
.platform-access-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid #d5c28e; border-radius: 9px; color: #574a28; background: #fbf7e9; font-size: 11px; }
.platform-access-banner strong { color: #443715; }
.app-footer { display: flex; justify-content: space-between; padding: 13px 36px 15px; border-top: 1px solid #ebefeb; color: #929d97; font-size: 9px; }
.footer-dot { padding: 0 4px; color: #c4cbc6; }
.loading-state { display: flex; min-height: 240px; align-items: center; justify-content: center; gap: 11px; color: var(--muted); font-size: 13px; }
.loader { width: 17px; height: 17px; border: 2px solid #dfe9e3; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-screen { display: grid; min-height: 100vh; min-height: 100svh; place-items: center; padding: 28px; background: #f3f5f0; }
.auth-layout { display: grid; width: min(100%, 1370px); min-height: min(820px, calc(100vh - 56px)); min-height: min(820px, calc(100svh - 56px)); grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); overflow: hidden; border: 1px solid #e7ebe4; border-radius: 18px; background: #fff; box-shadow: 0 28px 90px rgba(31,53,41,.12); }
.auth-story { position: relative; display: flex; min-height: 650px; flex-direction: column; overflow: hidden; padding: 34px 46px 25px; color: #fff; background: radial-gradient(ellipse at 6% 3%, rgba(116,164,119,.24), transparent 40%), linear-gradient(145deg, #183d33 0%, #1c493b 50%, #234a3b 100%); }
.auth-story::before, .auth-story::after { position: absolute; border: 1px solid rgba(220,192,128,.13); border-radius: 50%; content: ''; pointer-events: none; }
.auth-story::before { top: -190px; right: -130px; width: 500px; height: 500px; }
.auth-story::after { top: -120px; right: -60px; width: 360px; height: 360px; }
.auth-story-brand { position: relative; z-index: 2; width: fit-content; color: #fff; }
.auth-story-brand .brand-copy small { color: #b6c8b7; }
.auth-story-copy { position: relative; z-index: 2; width: min(100%, 460px); margin: clamp(52px, 11vh, 105px) 0 0 4px; }
.auth-story-kicker { display: inline-flex; align-items: center; gap: 9px; color: #d3c28f; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.auth-story-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #d9b866; box-shadow: 0 0 0 4px rgba(217,184,102,.14); }
.auth-story-copy h2 { margin: 22px 0 14px; color: #fffdf6; font: 600 clamp(34px, 4vw, 51px)/1.12 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -1.8px; }
.auth-story-copy h2 em { color: #dfc786; font-style: normal; }
.auth-story-copy > p { max-width: 355px; margin: 0; color: #c2d0c3; font-size: 13px; line-height: 1.8; }
.auth-illustration { position: absolute; inset: auto 0 28px; height: min(45%, 340px); min-height: 235px; color: #fff; }
.auth-illustration svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.auth-sun { position: absolute; right: 16%; bottom: 49%; width: 67px; height: 67px; border: 1px solid rgba(232,198,121,.38); border-radius: 50%; background: rgba(224,186,105,.11); box-shadow: 0 0 0 12px rgba(224,186,105,.045), 0 0 60px rgba(224,186,105,.12); }
.auth-cloud { position: absolute; width: 64px; height: 15px; border: 1px solid rgba(232,239,222,.2); border-radius: 99px; opacity: .8; }
.auth-cloud::before, .auth-cloud::after { position: absolute; bottom: 3px; border: 1px solid rgba(232,239,222,.2); border-bottom: 0; border-radius: 30px 30px 0 0; background: #214638; content: ''; }
.auth-cloud::before { left: 13px; width: 22px; height: 17px; }
.auth-cloud::after { left: 29px; width: 21px; height: 22px; }
.cloud-one { top: 24%; left: 12%; }
.cloud-two { top: 39%; right: 10%; transform: scale(.7); }
.illustration-ground { fill: #294d3d; }
.illustration-building-shadow { fill: #173a30; }
.illustration-roof { fill: #d2ae66; }
.illustration-building { fill: #f0dfb8; }
.illustration-facade { fill: #f8edcf; }
.illustration-entrance { fill: #b9884c; }
.illustration-door { fill: #285643; }
.illustration-knob { fill: #e7c977; }
.illustration-window { fill: #71958a; stroke: #285643; stroke-width: 5; }
.illustration-window-cross { fill: none; stroke: #e0d1a7; stroke-width: 3; }
.illustration-steps { fill: none; stroke: #e8d8ae; stroke-width: 5; stroke-linecap: round; }
.illustration-flag { fill: #d9b866; stroke: #e6d5aa; stroke-width: 2; }
.illustration-tree { fill: none; stroke: #a4b67f; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.illustration-path { fill: none; stroke: rgba(232,216,174,.36); stroke-width: 2; }
.illustration-note { position: absolute; right: 27px; bottom: 18px; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(225,229,205,.18); border-radius: 9px; background: rgba(17,48,38,.68); backdrop-filter: blur(8px); }
.illustration-note-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #f0d48d; background: rgba(215,166,90,.16); }
.illustration-note > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.illustration-note strong { color: #f4eedc; font-size: 9px; font-weight: 600; }
.illustration-note small { color: #b6c7b5; font-size: 8px; }
.auth-story-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 19px; border-top: 1px solid rgba(233,237,221,.16); color: #b9c9b9; font-size: 8px; letter-spacing: .55px; }
.auth-story-bottom > span:first-child { font-weight: 700; letter-spacing: 1px; }
.auth-story-bottom b { margin-right: 7px; color: #dfbf72; font-size: 7px; }
.auth-story-bottom i { margin: 0 4px; color: #d2b96f; font-style: normal; }
.auth-panel { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 56px clamp(35px, 6vw, 86px) 28px; background: var(--surface); }
.auth-card { width: min(100%, 405px); }
body[data-theme="dark"] .auth-panel,
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .auth-portal-card,
body[data-theme="dark"] .demo-login-box,
body[data-theme="dark"] .auth-legal,
body[data-theme="dark"] .auth-legal-panel,
body[data-theme="dark"] .auth-legal-item,
body[data-theme="dark"] .registration-pending,
body[data-theme="dark"] .registration-form-intro,
body[data-theme="dark"] .button,
body[data-theme="dark"] .page-content,
body[data-theme="dark"] .topbar .theme-picker,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .table-card,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .summary-card,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .modal-panel,
body[data-theme="dark"] .stats-card {
  background: var(--surface);
  color: var(--ink);
}
body[data-theme="dark"] .auth-portal-card,
body[data-theme="dark"] .demo-login-box,
body[data-theme="dark"] .auth-legal,
body[data-theme="dark"] .auth-legal-panel,
body[data-theme="dark"] .auth-legal-item,
body[data-theme="dark"] .registration-pending,
body[data-theme="dark"] .registration-form-intro,
body[data-theme="dark"] .auth-card,
body[data-theme="dark"] .button,
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .table-card,
body[data-theme="dark"] .metric-card,
body[data-theme="dark"] .summary-card,
body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .modal-panel,
body[data-theme="dark"] .stats-card {
  border-color: var(--line);
}
body[data-theme="midnight"] .auth-panel,
body[data-theme="midnight"] .auth-card,
body[data-theme="midnight"] .auth-portal-card,
body[data-theme="midnight"] .demo-login-box,
body[data-theme="midnight"] .auth-legal,
body[data-theme="midnight"] .auth-legal-panel,
body[data-theme="midnight"] .auth-legal-item,
body[data-theme="midnight"] .registration-pending,
body[data-theme="midnight"] .registration-form-intro,
body[data-theme="midnight"] .button,
body[data-theme="midnight"] .page-content,
body[data-theme="midnight"] .panel,
body[data-theme="midnight"] .table-card,
body[data-theme="midnight"] .metric-card,
body[data-theme="midnight"] .summary-card,
body[data-theme="midnight"] .form-control,
body[data-theme="midnight"] .modal-card,
body[data-theme="midnight"] .modal-panel,
body[data-theme="midnight"] .stats-card {
  background: var(--surface);
  color: var(--ink);
}
body[data-theme="midnight"] .auth-portal-card,
body[data-theme="midnight"] .demo-login-box,
body[data-theme="midnight"] .auth-legal,
body[data-theme="midnight"] .auth-legal-panel,
body[data-theme="midnight"] .auth-legal-item,
body[data-theme="midnight"] .registration-pending,
body[data-theme="midnight"] .registration-form-intro,
body[data-theme="midnight"] .button,
body[data-theme="midnight"] .form-control,
body[data-theme="midnight"] .panel,
body[data-theme="midnight"] .table-card,
body[data-theme="midnight"] .metric-card,
body[data-theme="midnight"] .summary-card,
body[data-theme="midnight"] .modal-card,
body[data-theme="midnight"] .modal-panel,
body[data-theme="midnight"] .stats-card {
  border-color: var(--line);
}
.auth-brand { display: none; width: fit-content; color: var(--ink); padding: 0; }
.auth-heading { margin: 0 0 29px; }
.auth-eyebrow { color: #78937d; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; }
.auth-heading h1 { margin: 11px 0 8px; color: #21372e; font: 700 30px/1.2 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.9px; }
.auth-heading p { margin: 0; color: #7d8a82; font-size: 12px; line-height: 1.7; }
.auth-portals { display: grid; gap: 12px; }
.auth-portal-card { display: grid; grid-template-columns: 39px minmax(0, 1fr) 18px; align-items: center; gap: 13px; padding: 14px; border: 1px solid #e4ebe3; border-radius: 9px; color: #355342; background: #fff; text-align: left; cursor: pointer; transition: border-color .16s, background .16s, transform .16s; }
.auth-portal-card:hover { transform: translateY(-1px); border-color: #9eb9a3; background: #f8faf7; }
.auth-portal-card:focus-visible { outline: 2px solid #4a8062; outline-offset: 2px; }
.auth-portal-card > span:nth-child(2) { display: grid; gap: 4px; }
.auth-portal-card strong { color: #2b4034; font-size: 12px; }
.auth-portal-card small { color: #829087; font-size: 10px; }
.auth-portal-card > span:last-child { color: #648471; font-size: 17px; }
.auth-form { display: grid; gap: 19px; }
.auth-field { display: grid; gap: 8px; color: #45594d; font-size: 11px; font-weight: 700; }
.auth-field .form-control { height: 48px; padding: 0 14px; border-color: #e1e8e1; border-radius: 7px; color: #34443c; font-size: 12px; transition: border-color .16s, box-shadow .16s; }
.auth-field .form-control::placeholder { color: #a5aea6; }
.auth-field .form-control:focus { border-color: #4a8062; box-shadow: 0 0 0 3px rgba(55,112,79,.1); }
.auth-password-wrap { position: relative; display: block; }
.auth-password-wrap .form-control { padding-right: 65px; }
.auth-password-toggle { position: absolute; top: 50%; right: 12px; padding: 6px; transform: translateY(-50%); border: 0; border-radius: 4px; color: #537662; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-password-toggle:hover { color: #234f3d; background: #f0f5f0; }
.auth-password-toggle:focus-visible { outline: 2px solid #4a8062; outline-offset: 2px; }
.auth-help { color: #8c9890; font-size: 9px; font-weight: 400; line-height: 1.5; }
.setup-notice { display: grid; gap: 5px; padding: 12px 13px; border: 1px solid #e5ece2; border-radius: 7px; color: #637766; background: #f5f8f2; font-size: 10px; line-height: 1.55; }
.setup-notice strong { color: #42644b; font-size: 11px; }
.auth-submit { display: flex; width: 100%; min-height: 49px; align-items: center; justify-content: center; gap: 10px; margin-top: 1px; border-radius: 7px; font-size: 12px; }
.auth-submit span { font-size: 16px; transition: transform .16s; }
.auth-submit:hover span { transform: translateX(3px); }
.auth-error { display: none; padding: 11px 12px; border-radius: 6px; color: #9d5149; background: #fcf1ef; font-size: 11px; line-height: 1.5; }
.auth-error.visible { display: block; }
.auth-support { margin: -4px 0 0; color: #858f87; text-align: center; font-size: 10px; }
.auth-support-link { justify-self: center; padding: 3px 8px; border: 0; color: var(--green); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-support-link:hover { color: var(--green-dark); text-decoration: underline; }
.demo-login-box { display: grid; gap: 10px; margin-top: 12px; padding: 14px 12px; border: 1px solid #dde9df; border-radius: 9px; background: #f5faf6; }
.demo-login-header { display: flex; align-items: center; gap: 8px; color: #2c4b3a; font-size: 11px; }
.demo-login-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; color: #53665c; font-size: 10px; }
.demo-login-row code { padding: 3px 6px; border: 1px solid #dfe9e0; border-radius: 5px; background: #fff; color: #233f35; font-family: 'Consolas', 'SFMono-Regular', monospace; font-size: 10px; }
.demo-login-button { width: 100%; margin-top: 4px; }
.auth-legal { margin-top: 12px; padding: 8px 10px; border: 1px solid #e3e8e3; border-radius: 7px; background: #f8faf8; }
.auth-legal p { margin: 0; color: #6d7d75; font-size: 9px; line-height: 1.6; text-align: center; }
.auth-legal a { color: var(--green); font-weight: 700; text-decoration: none; }
.auth-legal a:hover { text-decoration: underline; }
.auth-legal-panel { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #e4ece4; border-radius: 8px; background: #f7faf7; }
.auth-legal-item { display: grid; gap: 5px; padding: 9px 10px; border-radius: 6px; border: 1px solid #e7efe7; background: #fff; }
.auth-legal-item strong { color: #284b3d; font-size: 10px; letter-spacing: .18px; }
.auth-legal-item p { margin: 0; color: #72827a; font-size: 9px; line-height: 1.6; }
.registration-pending { margin: 0; padding: 14px; border: 1px solid #dfeadd; border-radius: 7px; color: #47664e; background: #f3f8f1; font-size: 11px; line-height: 1.65; }
.registration-pending strong { display: inline-block; margin-top: 6px; color: #284f38; letter-spacing: .3px; }
.registration-form-intro { padding: 11px 12px; border: 1px solid #e4ebe3; border-radius: 7px; color: #69786d; background: #f7f9f6; font-size: 10px; line-height: 1.55; }
.registration-section-label { padding-top: 12px; border-top: 1px solid #e9eee8; color: #355342; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.registration-lookup-form { margin-top: 14px; }
.platform-review-note { display: block; margin-top: 6px; white-space: normal; }
.auth-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 27px 0 0; color: #7f8b82; font-size: 9px; }
.auth-footer i { width: 3px; height: 3px; border-radius: 50%; background: #b2bdb2; }
.secure-mark { display: grid; width: 15px; height: 15px; place-items: center; border-radius: 50%; color: #2e7450; background: #e6f3e8; font-size: 9px; font-weight: 800; }
.auth-panel-caption { margin: auto 0 0; padding-top: 30px; color: #a0aaa2; text-align: center; font-size: 9px; letter-spacing: .2px; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 23px; }
.eyebrow { margin-bottom: 5px; color: var(--green); font-size: 9px; font-weight: 700; letter-spacing: 1.05px; text-transform: uppercase; }
.page-heading h1 { margin: 0; color: #1d2c28; font: 700 24px/1.2 'Manrope', 'Segoe UI', sans-serif; letter-spacing: -.7px; }
.page-heading p { margin: 6px 0 0; color: #818d87; font-size: 11px; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #e3e9e4; border-radius: 6px; color: #495952; background: #fff; font-size: 10px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
.button:hover { border-color: #c9d6ce; background: #f8faf8; }
.button:active { transform: translateY(1px); }
.button-primary { border-color: var(--green); color: #fff; background: var(--green); box-shadow: 0 2px 5px rgba(31,102,86,.12); }
.button-primary:hover { border-color: var(--green-dark); color: #fff; background: var(--green-dark); }
.button-soft { border-color: #dce8df; color: var(--green); background: #f5faf6; }
.button-danger { border-color: #f0dbd9; color: var(--red); }
.button.small { min-height: 28px; padding: 0 9px; font-size: 9px; }
.button-icon { display: flex; }
.button-icon svg { width: 14px; height: 14px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.section-title h2 { margin: 0; color: #293a34; font: 700 13px 'Manrope', sans-serif; letter-spacing: -.2px; }
.chart-section-title { margin-bottom: 0; }
.chart-legend { margin-top: 12px; }
.section-title p { margin: 4px 0 0; color: #89948e; font-size: 10px; }
.section-link { border: 0; color: var(--green); background: transparent; font-size: 10px; font-weight: 600; cursor: pointer; }
.section-link:hover { text-decoration: underline; }

.welcome-banner { position: relative; display: flex; min-height: 142px; overflow: hidden; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 23px 27px; border: 1px solid #e4ece4; border-radius: 10px; background: linear-gradient(106deg, #f1f5ec 0%, #f5f4e8 55%, #f8f1df 100%); }
.welcome-copy { position: relative; z-index: 1; }
.welcome-copy .eyebrow { color: #78906f; }
.welcome-copy h1 { margin: 5px 0 6px; color: #254439; font: 700 23px 'Manrope', sans-serif; letter-spacing: -.8px; }
.welcome-copy p { margin: 0; color: #748379; font-size: 11px; }
.welcome-copy p strong { color: #52664f; font-weight: 600; }
.welcome-copy .welcome-date { margin-top: 5px; font-size: 9px; }
.welcome-actions { position: relative; z-index: 2; display: flex; gap: 8px; }
.welcome-art { position: absolute; top: -50px; right: 16%; width: 247px; height: 230px; opacity: .46; pointer-events: none; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 20px; }
.metric-card { min-height: 107px; padding: 14px 15px 12px; border: 1px solid #e9ede9; border-radius: 8px; background: var(--surface); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-label { color: #78857f; font-size: 10px; font-weight: 500; }
.metric-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: var(--green); background: #eff5f0; }
.metric-icon.gold { color: #ac7c35; background: #f9f4e9; }
.metric-icon.blue { color: #57778a; background: #edf3f6; }
.metric-icon.rose { color: #a66c60; background: #f8efeb; }
.metric-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.metric-value { margin-top: 10px; color: #22332d; font: 700 22px/1 'Manrope', sans-serif; letter-spacing: -.6px; }
.metric-foot { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: #89948e; font-size: 9px; }
.trend-up { color: #398366; font-weight: 700; }
.trend-neutral { color: #6f7f76; font-weight: 600; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .95fr); gap: 15px; margin-bottom: 17px; }
.panel { min-width: 0; border: 1px solid #e9ede9; border-radius: 8px; background: #fff; }
.panel-pad { padding: 16px; }
.chart-panel { min-height: 248px; }
.chart-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.chart-total { margin-top: 12px; color: #24352e; font: 700 21px 'Manrope', sans-serif; letter-spacing: -.6px; }
.chart-total small { margin-left: 4px; color: #86918a; font: 500 9px 'DM Sans', sans-serif; }
.legend { display: flex; align-items: center; gap: 12px; color: #839088; font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 7px; height: 7px; border-radius: 50%; background: #4b8d71; }
.legend span + span i { background: #dec17b; }
.chart-select { padding: 6px 9px; border: 1px solid #e8ede8; border-radius: 5px; color: #66756d; background: #fff; font-size: 9px; }
.chart-svg { display: block; width: 100%; height: 136px; margin-top: 9px; overflow: visible; }
.chart-svg text { fill: #97a19b; font: 9px 'DM Sans', sans-serif; }
.attendance-panel { min-height: 248px; }
.attendance-summary { display: flex; align-items: center; gap: 15px; padding: 13px 0 9px; }
.donut-wrap { position: relative; display: grid; width: 82px; height: 82px; flex: 0 0 auto; place-items: center; }
.donut { width: 82px; height: 82px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 9; }
.donut .donut-track { stroke: #edf1ec; }
.donut .donut-value { stroke: #568b71; stroke-linecap: round; transition: stroke-dasharray .4s; }
.donut-label { position: absolute; display: flex; flex-direction: column; align-items: center; }
.donut-label strong { color: #293b33; font: 700 17px 'Manrope', sans-serif; }
.donut-label span { color: #9aa39d; font-size: 8px; }
.attendance-copy strong { display: block; color: #34443d; font-size: 11px; }
.attendance-copy span { display: block; margin-top: 4px; color: #8d9992; font-size: 9px; }
.attendance-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.attendance-stat { display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid #eef0ec; border-radius: 5px; color: #76827b; font-size: 9px; }
.attendance-stat strong { margin-left: auto; color: #394840; font-size: 10px; }
.status-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #5b9b76; }
.status-dot.absent { background: #cb7770; }
.status-dot.late { background: #d5a74d; }
.status-dot.excused { background: #8297a4; }
.bottom-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 15px; }
.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f2ef; }
.activity-item:first-child { border-top: 0; }
.activity-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #4f775f; background: #eef4ed; font-size: 9px; font-weight: 700; }
.activity-avatar.gold { color: #9c7538; background: #f8f2e7; }
.activity-avatar.blue { color: #607d8e; background: #edf2f4; }
.activity-copy { min-width: 0; flex: 1; }
.activity-copy strong { display: block; overflow: hidden; color: #3c4b44; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy span { display: block; margin-top: 3px; color: #97a19b; font-size: 9px; }
.activity-amount { color: #44735c; font-size: 10px; font-weight: 700; white-space: nowrap; }
.event-card { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid #f0f2ef; }
.event-date { display: flex; width: 38px; height: 39px; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; color: #527d66; background: #eff5ef; }
.event-date strong { font: 700 14px 'Manrope', sans-serif; }
.event-date span { font-size: 7px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.event-copy { min-width: 0; flex: 1; }
.event-copy strong { display: block; color: #384940; font-size: 10px; font-weight: 600; }
.event-copy span { display: block; margin-top: 3px; color: #909b94; font-size: 9px; }
.event-tag { padding: 4px 6px; border-radius: 4px; color: #70836f; background: #f3f6ef; font-size: 8px; }

.table-panel { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #edf0ed; }
.table-toolbar-left, .table-toolbar-right { display: flex; align-items: center; gap: 8px; }
.search-box { position: relative; display: flex; width: 218px; align-items: center; }
.search-icon { position: absolute; left: 10px; display: flex; color: #9aa49f; pointer-events: none; }
.search-icon svg { width: 14px; height: 14px; }
.search-input { width: 100%; height: 32px; padding: 0 10px 0 32px; border: 1px solid #e6ebe7; border-radius: 5px; outline: 0; color: #384941; background: #fff; font-size: 10px; }
.search-input:focus, .form-control:focus { border-color: #7eaa94; box-shadow: 0 0 0 3px rgba(69,131,97,.1); }
.filter-select { height: 32px; max-width: 150px; padding: 0 9px; border: 1px solid #e6ebe7; border-radius: 5px; outline: none; color: #718078; background: #fff; font-size: 9px; }
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.data-table th { height: 35px; padding: 0 14px; color: #8b9690; background: #fafbf9; font-size: 9px; font-weight: 600; }
.data-table th.table-actions-heading { text-align: right; }
.data-table td { height: 48px; padding: 0 14px; border-top: 1px solid #f0f2ef; color: #536159; font-size: 10px; }
.data-table tbody tr:hover { background: #fcfdfb; }
.student-cell { display: flex; align-items: center; gap: 9px; }
.student-avatar { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: #50775e; background: #edf4ed; font-size: 8px; font-weight: 700; }
.student-avatar.tone-1 { color: #9b7643; background: #f8f1e5; }
.student-avatar.tone-2 { color: #687b91; background: #eef2f6; }
.student-avatar.tone-3 { color: #8c6577; background: #f5edf1; }
.student-name strong { display: block; color: #35443c; font-size: 10px; font-weight: 600; }
.student-name span { display: block; margin-top: 3px; color: #9aa39e; font-size: 8px; }
.id-code { color: #819087; font: 9px 'DM Sans', sans-serif; }
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 19px; padding: 0 7px; border-radius: 4px; color: #59715e; background: #eef5ee; font-size: 8px; font-weight: 600; }
.badge::before { width: 5px; height: 5px; border-radius: 50%; background: #69a17b; content: ''; }
.badge.warning { color: #96713c; background: #faf4e8; }
.badge.warning::before { background: #d1a34b; }
.badge.danger { color: #a95f56; background: #f9eeec; }
.badge.danger::before { background: #cb7970; }
.badge.info { color: #587689; background: #eef3f6; }
.badge.info::before { background: #7895a6; }
.badge.neutral { color: #6f7e75; background: #f1f3f0; }
.badge.neutral::before { background: #a5aea8; }
.table-actions { display: flex; justify-content: flex-end; gap: 5px; }
.icon-action { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid transparent; border-radius: 5px; color: #829087; background: transparent; cursor: pointer; }
.icon-action:hover { border-color: #e5eae5; color: var(--green); background: #f5f8f5; }
.icon-action.danger:hover { color: var(--red); background: #fbf3f2; }
.icon-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.table-footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 15px; border-top: 1px solid #edf0ed; color: #919b95; font-size: 9px; }
.empty-state { padding: 40px 15px; color: #8b9690; text-align: center; font-size: 11px; }
.table-note { margin: 10px 2px 0; color: #99a29c; font-size: 9px; }
.placeholder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.placeholder-card { padding: 16px; border: 1px solid #e9ede9; border-radius: 8px; background: #fff; }
.placeholder-card strong { display: block; color: #34443c; font: 700 14px 'Manrope', sans-serif; }
.placeholder-card strong.placeholder-heading { margin-top: 12px; }
.placeholder-card span { display: block; margin-top: 6px; color: #87938c; font-size: 10px; line-height: 1.5; }
.coming-soon { display: inline-flex; margin-top: 11px; padding: 4px 7px; border-radius: 4px; color: #7c8269; background: #f5f4eb; font-size: 8px; font-weight: 600; }
.report-card { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid #eff1ee; }
.report-card:first-child { border-top: 0; }
.report-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; color: #588066; background: #edf4ed; }
.report-card strong { display: block; color: #394a40; font-size: 10px; }
.report-card span { display: block; margin-top: 3px; color: #929d96; font-size: 9px; }
.report-card .button { margin-left: auto; }
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(18,34,29,.46); backdrop-filter: blur(3px); }
.modal { width: min(100%, 440px); max-height: min(90vh, 700px); overflow-y: auto; border: 1px solid #e8ece8; border-radius: 10px; background: #fff; box-shadow: 0 22px 65px rgba(20,37,29,.2); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 19px 21px 15px; border-bottom: 1px solid #edf0ed; }
.modal-header h2 { margin: 0; color: #25372f; font: 700 16px 'Manrope', sans-serif; }
.modal-header p { margin: 5px 0 0; color: #88948d; font-size: 10px; }
.modal-close { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 5px; color: #7b8881; background: transparent; font-size: 19px; cursor: pointer; }
.modal-close:hover { background: #f3f5f2; }
.modal-form { padding: 17px 21px 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 11px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #56655c; font-size: 9px; font-weight: 600; }
.form-control { width: 100%; height: 35px; padding: 0 10px; border: 1px solid #e4e9e4; border-radius: 5px; outline: 0; color: #34443c; background: #fff; font-size: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #eff1ee; }
.form-error { display: none; margin-top: 12px; padding: 9px 10px; border-radius: 5px; color: #9d5149; background: #fcf1ef; font-size: 10px; }
.form-error.visible { display: block; }
.form-success { color: #39704e; font-size: 10px; font-weight: 700; }
.toast-region { position: fixed; right: 22px; bottom: 21px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 9px; max-width: 360px; padding: 11px 14px; border: 1px solid #e3ebe3; border-radius: 7px; color: #3f5747; background: #fff; box-shadow: 0 8px 28px rgba(33,54,42,.12); font-size: 10px; animation: toast-in .18s ease-out; }
.toast::before { width: 7px; height: 7px; border-radius: 50%; background: #5d9b70; content: ''; }
.toast.error { color: #98554d; }
.toast.error::before { background: #ca7168; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sidebar-scrim { display: none; }

@media (min-width: 1500px) {
  .page-content { padding-right: 45px; padding-left: 45px; }
}
@media (max-width: 1100px) {
  .sidebar { width: 226px; }
  .main-area { margin-left: 226px; }
  .topbar { padding-right: 25px; padding-left: 25px; }
  .page-content { padding-right: 25px; padding-left: 25px; }
  .app-footer { padding-right: 25px; padding-left: 25px; }
  .metric-grid { gap: 9px; }
  .metric-card { padding-right: 11px; padding-left: 11px; }
}
@media (max-width: 860px) {
  .sidebar { z-index: 40; transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-scrim.visible { position: fixed; inset: 0; z-index: 30; display: block; background: rgba(15,35,28,.32); }
  .main-area { margin-left: 0; }
  .mobile-menu { display: grid; margin-right: 9px; }
  .topbar { justify-content: flex-start; padding-right: 19px; padding-left: 14px; }
  .breadcrumbs { flex: 1; }
  .topbar-actions { gap: 10px; }
  .top-profile-name, .top-profile-chevron { display: none; }
  .page-content { padding: 24px 20px 30px; }
  .app-footer { padding-right: 20px; padding-left: 20px; }
  .welcome-art { right: 15%; }
  .auth-screen { padding: 18px; }
  .auth-layout { width: min(100%, 620px); min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .auth-story { min-height: 315px; padding: 24px 30px 19px; }
  .auth-story-copy { width: 53%; margin: 35px 0 26px 3px; }
  .auth-story-copy h2 { margin: 13px 0 8px; font-size: 34px; }
  .auth-story-copy > p { max-width: 290px; font-size: 11px; }
  .auth-illustration { right: 0; bottom: 5px; left: 55%; height: 195px; min-height: 0; opacity: .73; }
  .auth-illustration svg { opacity: .85; }
  .illustration-note { display: none; }
  .auth-story-bottom { display: none; }
  .auth-panel { padding: 37px 38px 23px; }
  .auth-card { width: min(100%, 430px); }
  .auth-panel-caption { padding-top: 21px; }
}
@media (max-width: 650px) {
  .top-date { display: none; }
  .topbar { height: 56px; }
  .page-content { padding: 19px 14px 25px; }
  .app-footer { gap: 7px; padding: 12px 14px; font-size: 8px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 17px; }
  .page-heading h1 { font-size: 21px; }
  .heading-actions { width: 100%; }
  .welcome-banner { min-height: 162px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 16px; padding: 19px; }
  .welcome-copy h1 { font-size: 20px; }
  .welcome-art { top: -34px; right: -42px; opacity: .21; }
  .welcome-actions { flex-wrap: wrap; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .metric-card { min-height: 100px; }
  .metric-value { font-size: 20px; }
  .dashboard-grid, .bottom-grid { grid-template-columns: 1fr; }
  .chart-panel, .attendance-panel { min-height: auto; }
  .chart-svg { height: 125px; }
  .placeholder-grid { grid-template-columns: 1fr; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-toolbar-left, .table-toolbar-right { width: 100%; }
  .search-box { width: 100%; }
  .filter-select { flex: 1; }
  .table-toolbar-right .button { flex: 0 0 auto; }
  .data-table th, .data-table td { padding-right: 11px; padding-left: 11px; }
}
@media (max-width: 520px) {
  .auth-screen { display: block; min-height: 100vh; min-height: 100svh; padding: 0; background: #fff; }
  .auth-layout { width: 100%; min-height: 100vh; min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }
  .auth-story { min-height: 225px; padding: 19px 21px 14px; }
  .auth-story-copy { width: 72%; margin: 26px 0 0 2px; }
  .auth-story-kicker { font-size: 8px; }
  .auth-story-copy h2 { margin: 11px 0 7px; font-size: 29px; letter-spacing: -.8px; }
  .auth-story-copy > p { max-width: 305px; font-size: 10px; line-height: 1.55; }
  .auth-illustration { left: 55%; height: 135px; opacity: .3; }
  .auth-illustration .auth-cloud, .auth-illustration .auth-sun { display: none; }
  .auth-panel { align-items: stretch; padding: 25px 22px 18px; }
  .auth-card { width: 100%; }
  .auth-brand { display: flex; margin-bottom: 24px; }
  .auth-brand .brand-mark { width: 26px; height: 26px; padding: 4px; }
  .auth-brand .brand-copy strong { font-size: 15px; }
  .auth-heading { margin-bottom: 22px; }
  .auth-heading h1 { font-size: 25px; }
  .auth-form { gap: 16px; }
  .auth-field .form-control { height: 46px; }
  .auth-footer { margin-top: 21px; font-size: 8px; }
  .auth-panel-caption { display: none; }
  .auth-portals { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .assessment-load-form, .report-generate-form { grid-template-columns: 1fr; }
  .report-generate-form .button, .assessment-load-button { width: 100%; }
  .report-card-preview { padding: 20px 16px; }
  .report-card-brand { grid-template-columns: 42px 1fr; }
  .report-term-chip { grid-column: 1 / -1; justify-self: start; }
  .report-student-block { flex-direction: column; align-items: flex-start; }
  .report-student-details dl { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .auth-story-copy { width: 100%; }
  .auth-illustration { display: none; }
  .auth-panel { padding-right: 18px; padding-left: 18px; }
  .auth-portal-card { grid-template-columns: 32px minmax(0, 1fr) 14px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.student-avatar-photo { overflow: hidden; object-fit: cover; }
.photo-upload-preview { display: flex; align-items: center; gap: 12px; }
.photo-upload-preview img { width: 62px; height: 74px; border: 1px solid var(--line); border-radius: 6px; object-fit: cover; }
.reporting-notice { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid #dfeae2; border-radius: 7px; color: #607066; background: #f0f6f1; font-size: 10px; }
.reporting-notice strong { flex: 0 0 auto; color: #315d4a; font-size: 11px; }
.reporting-notice a { flex: 0 0 auto; color: var(--green); font-weight: 700; }
.report-tool-panel { margin-bottom: 17px; }
.assessment-load-form, .report-generate-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 17px; }
.assessment-load-button { min-height: 35px; }
.assessment-roster { margin-top: 19px; }
.assessment-roster-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.assessment-roster-heading > div { display: flex; flex-direction: column; gap: 4px; }
.assessment-roster-heading strong { color: #35443c; font-size: 12px; }
.assessment-roster-heading > div > span, .table-note { color: #89958e; font-size: 9px; }
.assessment-entry-table .form-control { min-width: 115px; }
.assessment-entry-table td:first-child { min-width: 190px; }
.assessment-entry-table td:last-child .form-control { min-width: 180px; }
.assessment-save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; }
.report-generate-form { grid-template-columns: 2fr 1fr 1fr auto; }
.report-generate-form .button { min-height: 35px; }
.report-feedback { display: none; margin-top: 12px; color: #a14c45; font-size: 10px; }
.report-feedback.visible { display: block; }
.generated-report { margin-top: 20px; scroll-margin-top: 78px; }
.report-card-preview { max-width: 960px; margin: 0 auto; padding: 34px 38px; border: 1px solid #dce5dd; border-radius: 8px; background: #fff; box-shadow: 0 8px 26px rgba(37,60,44,.08); color: #263b32; }
.report-card-brand { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; padding-bottom: 17px; border-bottom: 2px solid var(--school-primary, #285b49); }
.report-brand-mark { display: grid; width: 43px; height: 43px; place-items: center; border: 2px solid var(--school-secondary, #d3b16c); border-radius: 50%; color: var(--school-primary, #285b49); font: 800 13px 'Manrope', sans-serif; }
.report-brand-logo { width: 46px; height: 46px; object-fit: contain; }
.report-school-heading > span { color: var(--school-secondary, #9c7941); font-size: 8px; font-weight: 800; letter-spacing: 1.4px; }
.report-school-heading h2 { margin: 4px 0 2px; color: var(--school-primary, #214f40); font: 800 19px 'Manrope', sans-serif; }
.report-school-heading p { margin: 0; color: #77857d; font-size: 9px; }
.report-term-chip { padding: 7px 10px; border: 1px solid var(--school-secondary, #d3b16c); border-radius: 5px; color: var(--school-primary, #315d4a); text-align: center; background: #eff5f0; font-size: 9px; font-weight: 700; line-height: 1.6; }
.report-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 14px; }
.report-title-row h3 { margin: 0; color: #293d34; font: 700 16px 'Manrope', sans-serif; }
.sample-watermark { color: #ab7544; font-size: 8px; font-weight: 800; letter-spacing: .9px; }
.report-student-block { display: flex; align-items: center; gap: 18px; padding: 14px; border: 1px solid #e8eee8; border-radius: 6px; background: #fbfcfa; }
.report-portrait { width: 90px; height: 108px; flex: 0 0 auto; border: 1px solid #dce5dd; border-radius: 4px; object-fit: cover; }
.photo-placeholder { display: grid; place-content: center; color: #88948d; text-align: center; background: #f0f3ef; font-size: 8px; font-weight: 700; line-height: 1.7; }
.report-student-details { min-width: 0; flex: 1; }
.report-identity-name { margin-bottom: 10px; color: #233d31; font: 800 17px 'Manrope', sans-serif; }
.report-student-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; margin: 0; }
.report-student-details dl > div { display: flex; gap: 7px; font-size: 9px; }
.report-student-details dt { color: #849087; }
.report-student-details dd { margin: 0; color: #344a3d; font-weight: 700; }
.report-curriculum-note { margin: 13px 0; color: #7e8a82; font-size: 9px; line-height: 1.6; }
.report-curriculum-note strong { color: #586b5c; }
.report-table-wrap { overflow-x: auto; }
.report-subject-table { width: 100%; border-collapse: collapse; }
.report-subject-table th { padding: 9px 8px; color: #52635a; text-align: left; background: #eff4ef; font-size: 8px; letter-spacing: .35px; }
.report-subject-table td { padding: 8px; border-bottom: 1px solid #edf0ed; color: #49584e; font-size: 9px; }
.report-subject-table td:first-child { color: #304338; font-weight: 600; }
.report-subject-table .report-mark { color: var(--school-primary, #285c49); font-weight: 800; }
.report-summary-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.report-summary-grid > div { display: flex; min-width: 115px; flex: 1; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #e7ece7; border-radius: 5px; }
.report-summary-grid span, .report-attendance > span { color: #839087; font-size: 7px; font-weight: 700; letter-spacing: .6px; }
.report-summary-grid strong, .report-attendance strong { color: #345747; font-size: 10px; }
.report-attendance { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 13px 0; padding: 10px; border-radius: 5px; background: #f5f7f4; }
.report-remark { margin-top: 13px; padding: 11px 12px; border-left: 3px solid #d1ad66; background: #faf9f5; }
.report-remark strong { color: #596b5f; font-size: 8px; letter-spacing: .5px; }
.report-remark p { margin: 6px 0 0; color: #46564b; font-size: 9px; line-height: 1.55; }
.report-card-signoff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 29px; }
.report-card-signoff > div { display: flex; flex-direction: column; gap: 5px; }
.report-card-signoff span { color: #59695e; font-size: 7px; font-weight: 700; }
.report-card-signoff i { height: 18px; border-bottom: 1px solid #aeb9af; }
.report-card-signoff small { color: #8d9890; font-size: 7px; }
.report-card-footnote { margin: 18px 0 0; padding-top: 9px; border-top: 1px solid #edf0ed; color: #8b968e; font-size: 7px; line-height: 1.5; }
.report-compact { padding: 23px 26px; }
.report-compact .report-title-row { margin: 13px 0 10px; }
.report-compact .report-subject-table td { padding-top: 5px; padding-bottom: 5px; }
.report-template-settings { margin: 18px 0; }
.template-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 15px; }
.template-editor { display: flex; flex-direction: column; gap: 12px; padding: 15px; border: 1px solid #e8ede8; border-radius: 7px; }
.template-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.template-editor-heading h3 { margin: 4px 0 0; color: #304238; font: 700 13px 'Manrope', sans-serif; }
.template-list-input { height: 118px; min-height: 75px; padding: 8px 10px; resize: vertical; line-height: 1.5; }
.template-editor textarea.form-control { height: auto; }
.template-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.template-options label { display: flex; align-items: center; gap: 6px; color: #58675e; font-size: 9px; }
.template-options input { accent-color: var(--green); }
.template-editor .form-error { margin: 0; }
.template-editor .button { align-self: flex-start; }
@media (max-width: 860px) {
  .assessment-load-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-generate-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-editor-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .reporting-notice { align-items: flex-start; flex-direction: column; gap: 7px; }
  .assessment-load-form, .report-generate-form { grid-template-columns: 1fr; }
  .assessment-save-row { align-items: flex-start; flex-direction: column; }
  .report-card-preview { padding: 19px 14px; }
  .report-card-brand { grid-template-columns: 36px 1fr auto; gap: 8px; }
  .report-brand-mark { width: 34px; height: 34px; }
  .report-school-heading h2 { font-size: 14px; }
  .report-term-chip { padding: 6px; font-size: 8px; }
  .report-portrait { width: 68px; height: 82px; }
  .report-student-block { gap: 10px; padding: 9px; }
  .report-student-details dl { grid-template-columns: 1fr; gap: 6px; }
  .report-identity-name { font-size: 14px; }
  .report-card-signoff { gap: 10px; }
}
@page { size: A4 portrait; margin: 12mm; }
@media print {
  body, .app-shell, .main-area { min-width: 0; margin: 0; background: #fff; }
  body * { visibility: hidden !important; }
  #generated-report, #generated-report * { visibility: visible !important; }
  #generated-report { position: absolute; inset: 0; width: 100%; margin: 0; }
  body.printing-letterhead #generated-report, body.printing-letterhead #generated-report * { visibility: hidden !important; }
  body.printing-letterhead .school-letterhead-document, body.printing-letterhead .school-letterhead-document * { visibility: visible !important; }
  body.printing-letterhead .school-letterhead-document { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; padding: 30px; border: 0; border-radius: 0; }
  body.printing-letterhead .school-letterhead-document > .button { display: none; }
  .report-card-preview { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .report-card-preview, .report-subject-table, .report-summary-grid, .report-card-signoff { break-inside: avoid; }
  .report-table-wrap { overflow: visible; }
  .report-subject-table { font-size: 8pt; }
  .report-subject-table th, .report-subject-table td { padding: 5px; }
}
.attendance-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.attendance-summary-grid .metric-card { min-width: 0; }
.attendance-register-panel { margin-bottom: 17px; }
.attendance-load-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(170px, .7fr) auto; align-items: end; gap: 12px; margin-top: 16px; }
.attendance-load-form .button { min-height: 35px; }
.attendance-roster { margin-top: 20px; }
.attendance-entry-table td:first-child { min-width: 220px; }
.attendance-entry-table select.form-control { min-width: 150px; }
.attendance-class-summary { margin-top: 22px; padding-top: 18px; border-top: 1px solid #edf0ed; }
.attendance-class-summary h3 { margin: 0 0 11px; color: #35443c; font: 700 12px 'Manrope', sans-serif; }
.attendance-class-summary > .table-note { margin: 0; }
.attendance-history-panel { overflow: hidden; }
.student-folder-detail { margin-top: 17px; }
.student-folder-detail > .metric-grid { margin-top: 15px; }
.student-folder-detail .metric-card { gap: 7px; }
.student-folder-detail .metric-card strong { color: #30483b; font-size: 13px; }
.student-folder-detail .metric-card > span:last-child { color: #7d8981; font-size: 10px; }
.student-folder-section { margin-top: 20px; }
.student-folder-section h3 { margin: 0 0 10px; color: #35443c; font: 700 12px 'Manrope', sans-serif; }
.student-folder-section .data-table { min-width: 560px; }
.admissions-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.admissions-summary-grid .metric-card { min-width: 0; }
.admissions-pipeline { overflow: hidden; }
.admissions-pipeline .table-toolbar-left { flex-wrap: wrap; }
.admissions-pipeline .search-box { min-width: 190px; }
.admissions-pipeline .data-table td:first-child { min-width: 205px; }
.admissions-pipeline .data-table td:nth-child(5) { min-width: 130px; }
.admission-notes { height: 100px; padding: 9px 10px; resize: vertical; }
.platform-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 17px; }
.platform-summary-grid .metric-card { min-width: 0; }
.school-profile-settings { margin-bottom: 18px; }
.school-profile-settings .form-grid { align-items: end; }
.school-profile-settings .form-grid .form-error { grid-column: 1 / -1; margin: 0; }
.school-profile-settings .form-grid .form-success { align-self: center; }
.school-profile-settings .form-grid .form-field.full { grid-column: 1 / -1; }
.color-control { width: 84px; height: 38px; padding: 4px; cursor: pointer; }
.school-logo-upload-preview { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.school-logo-upload-preview img { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 6px; object-fit: contain; }
.school-letterhead-document { max-width: 760px; margin: 20px auto 0; padding: 32px; border: 1px solid #e8ece8; border-radius: 7px; background: #fff; }
.school-letterhead-header { display: flex; align-items: center; gap: 16px; }
.school-letterhead-header img, .school-letterhead-mark { width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; }
.school-letterhead-mark { display: grid; place-items: center; border: 2px solid var(--school-secondary, #d3b16c); border-radius: 50%; color: var(--school-primary, #285b49); font-weight: 800; }
.school-letterhead-header h2 { margin: 0; color: var(--school-primary, #285b49); font: 800 21px 'Manrope', sans-serif; }
.school-letterhead-header p { margin: 5px 0 0; color: #77857d; font-size: 11px; }
.school-letterhead-rule { height: 4px; margin: 20px 0; background: var(--school-primary, #285b49); border-bottom: 2px solid var(--school-secondary, #d3b16c); }
.school-letterhead-body { min-height: 180px; padding: 14px 0; color: #66746b; font-size: 11px; }
.school-letterhead-document footer { padding-top: 10px; border-top: 1px solid var(--school-secondary, #d3b16c); color: #77857d; font-size: 9px; }
.school-letterhead-document > .button { margin-top: 15px; }
.communication-compose { margin-bottom: 18px; }
.provider-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 15px 0; }
.provider-status { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px; border: 1px solid #e8ede8; border-radius: 6px; color: #536258; font-size: 10px; }
.communication-form { margin-top: 15px; }
.communication-form .form-field.full, .communication-form .form-error.full { grid-column: 1 / -1; }
.communication-message { min-height: 120px; resize: vertical; }
.communication-history { overflow: hidden; }
.communication-history .data-table td:first-child { min-width: 180px; }
.communication-history .data-table td:nth-child(4) { min-width: 230px; }
.platform-schools, .platform-recovery { overflow: hidden; }
.platform-schools .table-toolbar-left { flex-wrap: wrap; }
.platform-schools .search-box { min-width: 220px; }
.platform-schools .data-table td:first-child { min-width: 205px; }
.platform-schools .data-table td:nth-child(2) { min-width: 220px; }
.platform-schools .data-table td:last-child { min-width: 190px; }
.platform-actions { flex-wrap: wrap; gap: 6px; }
@media (max-width: 860px) {
  .attendance-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-load-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .attendance-load-form .button { grid-column: 1 / -1; }
  .admissions-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-status-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .attendance-summary-grid { gap: 8px; }
  .attendance-load-form { grid-template-columns: 1fr; }
  .attendance-load-form .button { grid-column: auto; }
  .attendance-history-panel .table-toolbar-right { align-items: stretch; flex-direction: column; }
  .admissions-summary-grid { gap: 8px; }
  .admissions-pipeline .table-toolbar-left { display: grid; grid-template-columns: 1fr 1fr; }
  .admissions-pipeline .search-box { grid-column: 1 / -1; min-width: 0; }
  .admissions-pipeline .filter-select { max-width: none; }
  .platform-summary-grid { gap: 8px; }
  .platform-schools .table-toolbar-left { display: grid; grid-template-columns: 1fr; }
  .platform-schools .search-box { min-width: 0; }
}