:root { --ink:#17212b; --muted:#687887; --line:#e3ebf2; --blue:#1769aa; --blue-dark:#125486; --bg:#f4f7fa; --card:#fff; --green:#177245; --red:#a12626; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); }
a { color:var(--blue); }
.topbar { min-height:68px; display:flex; justify-content:space-between; align-items:center; padding:0 28px; background:#fff; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:850; letter-spacing:-.02em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--blue); color:#fff; font-size:.75rem; letter-spacing:.02em; }
.topbar-user { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.92rem; }
.app-layout { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 69px); }
.sidebar { padding:26px 14px; background:#fff; border-right:1px solid var(--line); }
.sidebar-heading { margin:8px 12px 10px; color:var(--muted); font-size:.7rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.school-label { margin:18px 12px 6px; color:var(--ink); font-size:.82rem; font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-link { display:flex; align-items:center; gap:10px; margin:2px 0; padding:10px 12px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:700; }
.side-link:hover, .side-link:focus { background:#f0f6fa; color:var(--blue); }
.side-icon { display:inline-grid; place-items:center; width:20px; color:var(--blue); font-size:1rem; }
.nav-link { color:var(--blue); text-decoration:none; font-weight:750; } .nav-link:hover { text-decoration:underline; }
.user-pill { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:#f8fbfd; }
.role-pill { padding:7px 11px; border-radius:999px; background:#eaf4fb; color:var(--blue); font-size:.78rem; font-weight:850; }
.link-button { border:0; padding:0; background:none; color:var(--blue); cursor:pointer; font:inherit; font-weight:700; }
.page-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:38px 0 60px; min-width:0; }
.eyebrow { margin:0 0 7px; color:var(--blue); font-size:.78rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { letter-spacing:-.025em; } h1 { margin:0 0 8px; font-size:clamp(1.8rem,4vw,2.5rem); } h2 { margin:0 0 8px; font-size:1.15rem; }
.subtle { color:var(--muted); } .hero { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 12px 30px rgba(20,45,70,.055); }
.card-link { display:block; color:inherit; text-decoration:none; transition:transform .15s,box-shadow .15s; } .card-link:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(20,45,70,.12); }
.card-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:18px; border-radius:12px; background:#eaf4fb; color:var(--blue); font-weight:900; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:0; border-radius:9px; padding:11px 15px; background:var(--blue); color:#fff; text-decoration:none; font-weight:800; cursor:pointer; } .button:hover { background:var(--blue-dark); }
.button.secondary { background:#fff; color:var(--blue); border:1px solid #cbdbe7; } .button.danger { background:#fff; color:var(--red); border:1px solid #edcaca; }
.button.small { padding:7px 10px; font-size:.85rem; }
.table-card { overflow-x:auto; padding:0; } table { width:100%; border-collapse:collapse; } th,td { padding:15px 18px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; } th { color:var(--muted); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } tr:last-child td { border-bottom:0; }
.status { display:inline-flex; align-items:center; gap:6px; font-size:.87rem; font-weight:750; } .status::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .status.active { color:var(--green); } .status.inactive { color:var(--red); }
.actions { display:flex; align-items:center; gap:7px; }
.date-filter { display:flex; align-items:flex-end; gap:8px; }
.date-filter label { margin:0; }
.date-filter input { width:auto; }
.staff-attendance-form { display:flex; align-items:center; gap:7px; min-width:390px; }
.staff-attendance-form input { min-width:130px; }
.staff-attendance-form select { width:auto; min-width:105px; padding:8px; }
.teacher-face-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.teacher-face-card { display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:10px; background:#f8fbfd; }
.teacher-face-card input { padding:8px; font-size:.82rem; }
.camera-card { display:grid; gap:12px; }
.camera-picker { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }
.secure-camera-list { display:grid; gap:10px; padding-left:20px; }
.camera-settings-grid { align-items:start; }
.teacher-directory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; }
.teacher-profile-card { display:grid; gap:16px; }
.teacher-profile-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.teacher-profile-head h2 { margin:0 0 4px; }
.teacher-profile-section { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding-top:12px; border-top:1px solid var(--line); font-size:.88rem; }
.teacher-profile-section strong { flex-basis:100%; font-size:.78rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.teacher-profile-section > span:not(.status):not(.subtle) { padding:5px 8px; border-radius:7px; background:#f0f6fa; }
.teacher-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.teacher-metrics div { padding:10px 7px; border-radius:8px; background:#f7fafc; text-align:center; }
.teacher-metrics strong,.teacher-metrics span { display:block; }
.teacher-metrics strong { font-size:1.2rem; }
.teacher-metrics span { color:var(--muted); font-size:.72rem; }
.permission-chip { font-size:.8rem; }
.teacher-profile-actions { display:flex; flex-wrap:wrap; gap:7px; }
.teacher-filter-card { margin-bottom:16px; }
.teacher-filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto auto; gap:8px; align-items:end; }
.directory-list { display:grid; gap:4px; min-width:120px; }
.directory-list span { font-size:.82rem; }
.permission-help { margin-top:16px; }
.permission-guide-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.permission-guide-grid div { display:grid; gap:5px; padding:12px; border-radius:9px; background:#f7fafc; }
.permission-guide-grid span { color:var(--muted); font-size:.82rem; }
.permission-list { display:grid; gap:8px; }
.permission-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#f7fafc; }
.audit-filters { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:10px; align-items:end; }
.audit-filters label { margin:0; }
.audit-details { display:grid; gap:3px; min-width:180px; white-space:normal; font-size:.8rem; }
.audit-action { display:inline-flex; padding:5px 8px; border-radius:7px; background:#eaf4fb; color:var(--blue); font-size:.8rem; font-weight:800; }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; color:var(--muted); }
.snapshot-school-list { display:grid; gap:9px; margin-top:14px; }
.snapshot-school-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#f7fafc; }
.snapshot-school-row strong { margin-right:auto; }
.superadmin-hero { align-items:flex-start; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.school-search-card { margin-bottom:18px; }
.school-search-form { display:grid; grid-template-columns:minmax(260px,1fr) auto auto; gap:12px; align-items:end; }
.search-field { margin:0; }
.search-field span { display:block; margin-bottom:7px; color:var(--muted); font-size:.78rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.school-card-list { display:grid; gap:18px; margin-top:18px; }
.school-management-card { display:grid; gap:18px; padding:0; overflow:hidden; }
.school-card-main { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:24px 26px 18px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff 0%,#f9fcfe 100%); }
.school-card-main h2 { margin-bottom:4px; }
.school-status-stack { display:grid; justify-items:end; gap:8px; min-width:220px; }
.school-card-body { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(240px,.8fr); gap:18px; padding:0 26px 26px; }
.school-admin-panel,.school-actions-panel { display:grid; align-content:start; gap:12px; }
.school-admin-panel > strong,.school-actions-panel > strong { color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.school-member-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fbfd; }
.member-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; }
.school-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.school-action-grid .button,.school-action-grid form,.school-action-grid form .button { width:100%; }
.school-action-grid form { margin:0; }
.snapshot-consent-card { margin-bottom:16px; border-color:#c9dced; background:#f5fbff; }
.academic-overview-grid { align-items:start; gap:24px; margin-top:10px; }
.academic-card { display:flex; flex-direction:column; min-height:380px; padding:0; overflow:hidden; }
.academic-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:26px 26px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff 0%,#f9fcfe 100%); }
.academic-card-head h2 { margin-bottom:4px; }
.academic-card-head .actions { flex-wrap:wrap; justify-content:flex-end; }
.academic-scroll-list { max-height:340px; overflow:auto; padding:16px 18px 20px; scrollbar-gutter:stable; }
.academic-scroll-list::-webkit-scrollbar { width:10px; }
.academic-scroll-list::-webkit-scrollbar-thumb { background:#c9d7e2; border-radius:999px; border:3px solid transparent; background-clip:content-box; }
.academic-year-list { display:grid; gap:8px; margin:0; list-style:none; }
.academic-year-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.academic-year-row span { display:grid; gap:3px; min-width:0; }
.academic-year-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.academic-year-row small { color:var(--muted); font-size:.78rem; font-weight:800; }
.academic-year-row form { flex:0 0 auto; margin:0; }
.class-division-list { display:grid; gap:10px; }
.class-division-row { display:grid; gap:10px; padding:13px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.class-title { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.class-title strong { font-size:1rem; }
.class-title span { color:var(--muted); font-size:.78rem; font-weight:800; white-space:nowrap; }
.division-chip-list { display:flex; flex-wrap:wrap; gap:6px; }
.division-chip { display:inline-flex; align-items:center; min-height:26px; padding:5px 9px; border-radius:999px; background:#eef6fb; color:var(--blue); font-size:.8rem; font-weight:800; }
.division-chip.muted { background:#f3f6f8; color:var(--muted); }
.compact-empty { padding:24px 12px; }
.snapshot-admin-card { border-color:#c9dced; background:#f5fbff; }
.invitation-link-card { background:#f4f7fa; word-break:break-all; margin:18px 0; }
.permission-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.permission-lane { min-height:360px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#f7fafc; }
.permission-lane-granted { background:#eef8f4; }
.permission-lane-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:12px; }
.permission-lane-head h2 { margin:0; }
.permission-dropzone { display:grid; gap:10px; min-height:290px; padding:4px; border:2px dashed #cbd8e3; border-radius:10px; }
.permission-dropzone.drag-over { border-color:var(--blue); background:#eaf4fb; }
.permission-card { display:grid; gap:5px; padding:14px; border:1px solid #d5e1e8; border-radius:11px; background:#fff; box-shadow:0 4px 12px rgba(20,45,70,.06); cursor:grab; }
.permission-card span { color:var(--muted); font-size:.82rem; }
.permission-card.granted { border-color:#b7dfca; }
.permission-card.dragging { opacity:.45; }
.permission-revoke-form { margin-top:4px; }
.permission-fallback { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.coverage-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; align-items:start; }
.coverage-column { min-height:300px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#eef4f8; }
.affected-column { background:#fff8df; }
.coverage-dropzone { display:grid; gap:9px; min-height:245px; padding:3px; }
.coverage-card { display:grid; gap:4px; padding:12px; border:1px solid #dbe5ec; border-radius:10px; background:#fff; box-shadow:0 4px 12px rgba(20,45,70,.06); cursor:grab; }
.coverage-card span { color:var(--muted); font-size:.78rem; }
.coverage-card.dragging { opacity:.45; }
.coverage-actions { display:flex; gap:8px; margin-top:16px; }
.coverage-actions input { max-width:320px; }
.face-status { display:grid; gap:4px; min-width:170px; }
.face-register-form { display:flex; align-items:center; gap:7px; margin-top:8px; }
.face-register-form input { max-width:190px; padding:7px; font-size:.78rem; }
.consent-check { display:flex; align-items:center; gap:6px; margin:0; color:var(--muted); font-size:.78rem; font-weight:600; }
.consent-check input { width:auto; }
.promotion-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.promotion-toolbar p { margin:5px 0 0; }
.promotion-toolbar select { width:auto; min-width:190px; }
.kanban-board { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); align-items:start; gap:14px; padding-bottom:12px; }
.kanban-column { min-width:0; min-height:330px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#eef4f8; }
.kanban-unplaced { background:#f7f8fa; }
.kanban-column-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:2px 3px 10px; }
.kanban-column-head h2 { margin:0; font-size:.98rem; }
.kanban-count { display:grid; place-items:center; min-width:25px; height:25px; padding:0 7px; border-radius:999px; background:#fff; color:var(--muted); font-size:.8rem; font-weight:850; }
.kanban-dropzone { display:grid; gap:9px; min-height:270px; padding:3px; border-radius:10px; }
.kanban-dropzone:empty { border:2px dashed #c7d5df; }
.student-card { display:grid; gap:4px; padding:12px; border:1px solid #dbe5ec; border-radius:10px; background:#fff; box-shadow:0 4px 12px rgba(20,45,70,.06); cursor:grab; }
.student-card:active { cursor:grabbing; }
.student-card.dragging { opacity:.45; }
.student-card span,.student-card small { color:var(--muted); font-size:.78rem; }
.enrollment-help { margin:10px 0 18px; padding:11px 13px; border:1px solid #d7e5ef; border-radius:10px; background:#f6fbff; }
.form-card { width:min(650px,100%); margin:0 auto; } label { display:block; margin:16px 0 7px; font-weight:750; font-size:.9rem; } input,textarea,select { width:100%; border:1px solid #cbd8e3; border-radius:9px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; } input:focus,textarea:focus,select:focus { outline:3px solid rgba(23,105,170,.16); border-color:var(--blue); } .helptext { color:var(--muted); font-size:.85rem; } .errorlist { margin:6px 0; padding:0; color:var(--red); list-style:none; font-size:.88rem; }
.flash-stack { display:grid; gap:10px; margin-bottom:20px; } .flash { padding:12px 15px; border-radius:10px; background:#e9f7ef; color:var(--green); } .flash.warning { margin-bottom:16px; background:#fff8df; color:#7a5a00; border:1px solid #f0d98a; } .flash.error { background:#fff0f0; color:var(--red); }
.empty { padding:42px 20px; text-align:center; color:var(--muted); }
.login-page { display:grid; place-items:center; background:linear-gradient(135deg,#edf5fb 0%,#f7fafc 100%); } .login-card { width:min(430px,calc(100% - 32px)); padding:34px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 22px 55px rgba(20,45,70,.12); } .login-card .brand { margin-bottom:28px; } .login-card h1 { margin-bottom:8px; } .login-card .subtle { margin-bottom:24px; }
.role-super_admin { --blue:#6b46c1; --blue-dark:#55329f; } .role-super_admin .brand-mark, .role-super_admin .button:not(.secondary):not(.danger) { background:#6b46c1; } .role-super_admin .role-pill { background:#f0eaff; color:#6b46c1; }
.role-school_admin { --blue:#1769aa; --blue-dark:#125486; } .role-school_admin .role-pill { background:#eaf4fb; color:#1769aa; }
.role-teacher { --blue:#0f766e; --blue-dark:#0b5d57; } .role-teacher .brand-mark, .role-teacher .button:not(.secondary):not(.danger) { background:#0f766e; } .role-teacher .role-pill { background:#e5f7f4; color:#0f766e; }
@media (max-width:760px) { .topbar { padding:0 16px; min-height:62px; gap:10px; } .brand span:last-child { display:none; } .topbar-user { gap:7px; } .role-pill { display:none; } .app-layout { display:block; min-height:0; } .sidebar { display:flex; gap:5px; padding:8px 12px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); } .sidebar-heading,.school-label { display:none; } .side-link { flex:0 0 auto; margin:0; padding:8px 10px; font-size:.8rem; background:#f7fafc; } .side-icon { display:none; } .page-shell { width:min(100% - 24px,1120px); padding-top:24px; } .hero { display:block; } .hero .button { margin-top:18px; } .grid,.grid-2 { grid-template-columns:1fr; } .user-pill { max-width:130px; overflow:hidden; text-overflow:ellipsis; } }
@media (max-width:760px) { .promotion-toolbar { display:block; } .promotion-toolbar .actions { display:grid; margin-top:14px; } .promotion-toolbar select { width:100%; } .kanban-board { display:flex; overflow-x:auto; } .kanban-column { flex:0 0 235px; } }
@media (max-width:760px) { .date-filter { margin-top:18px; } .staff-attendance-form { min-width:340px; } }
@media (max-width:900px) { .teacher-filters { grid-template-columns:1fr 1fr; } .permission-guide-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) { .audit-filters { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) { .school-search-form,.school-card-body { grid-template-columns:1fr; } .school-card-main { display:grid; gap:14px; padding:20px; } .school-status-stack { justify-items:start; min-width:0; } .school-action-grid { grid-template-columns:1fr; } .hero-actions { justify-content:flex-start; margin-top:18px; } }
@media (max-width:760px) { .academic-card { min-height:0; } .academic-card-head { display:grid; gap:12px; } .academic-card-head .actions { justify-content:flex-start; } .academic-scroll-list { max-height:300px; padding:10px; } .class-title { display:grid; gap:3px; } }
@media (max-width:760px) { .permission-board { grid-template-columns:1fr; } }
@media (max-width:760px) { .coverage-board { display:flex; overflow-x:auto; } .coverage-column { flex:0 0 240px; } .coverage-actions { display:grid; } .coverage-actions input { max-width:none; } }
@media (max-width:760px) { .camera-picker { grid-template-columns:1fr; } }

/* Accessible dark mode. The selected role controls the accent colour. */
.theme-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:7px 10px; background:var(--card); color:var(--ink); font:inherit; font-size:.78rem; font-weight:800; cursor:pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color:var(--blue); color:var(--blue); outline:3px solid color-mix(in srgb, var(--blue) 20%, transparent); }
.theme-icon { font-size:1rem; line-height:1; }
html[data-theme="dark"] { --ink:#edf2f7; --muted:#a9b6c5; --line:#2d3a49; --bg:#0d141d; --card:#151f2b; --green:#52d394; --red:#ff8585; color-scheme:dark; }
html[data-theme="dark"] body { background:var(--bg); color:var(--ink); }
html[data-theme="dark"] .topbar, html[data-theme="dark"] .sidebar { background:#111a24; border-color:var(--line); }
html[data-theme="dark"] .brand, html[data-theme="dark"] .school-label { color:var(--ink); }
html[data-theme="dark"] .side-link { color:#a9b6c5; }
html[data-theme="dark"] .side-link:hover, html[data-theme="dark"] .side-link:focus { background:#1c2a39; color:var(--blue); }
html[data-theme="dark"] .user-pill, html[data-theme="dark"] .button.secondary { background:#1b2734; border-color:var(--line); color:var(--ink); }
html[data-theme="dark"] .card, html[data-theme="dark"] .login-card { background:var(--card); border-color:var(--line); box-shadow:0 14px 34px rgba(0,0,0,.22); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background:#0f1822; border-color:#3a4b5c; color:var(--ink); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:#7f91a4; }
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color:var(--line); }
html[data-theme="dark"] .school-card-main, html[data-theme="dark"] .academic-card-head { background:linear-gradient(180deg,#151f2b 0%,#172331 100%); border-color:var(--line); }
html[data-theme="dark"] .school-member-card, html[data-theme="dark"] .academic-year-row, html[data-theme="dark"] .class-division-row { background:#172331; border-color:#35485a; }
html[data-theme="dark"] .division-chip { background:#1b344b; color:var(--blue); }
html[data-theme="dark"] .division-chip.muted { background:#1b2734; color:var(--muted); }
html[data-theme="dark"] .permission-lane, html[data-theme="dark"] .coverage-column, html[data-theme="dark"] .kanban-column, html[data-theme="dark"] .teacher-profile-section > span:not(.status):not(.subtle), html[data-theme="dark"] .teacher-metrics div, html[data-theme="dark"] .permission-guide-grid div { background:#1b2836; }
html[data-theme="dark"] .snapshot-admin-card, html[data-theme="dark"] .snapshot-consent-card, html[data-theme="dark"] .invitation-link-card { background:#1b2d3d; border-color:#36566d; color:var(--ink); }
html[data-theme="dark"] .snapshot-school-row { background:#172331; border-color:#35485a; }
html[data-theme="dark"] .permission-lane-granted { background:#153126; }
html[data-theme="dark"] .permission-card, html[data-theme="dark"] .coverage-card, html[data-theme="dark"] .student-card, html[data-theme="dark"] .teacher-face-card { background:#172331; border-color:#35485a; }
html[data-theme="dark"] .enrollment-help { background:#142234; border-color:#30485f; }
html[data-theme="dark"] .permission-dropzone.drag-over { background:#1b344b; }
html[data-theme="dark"] .flash { background:#173426; color:#7de2ab; }
html[data-theme="dark"] .flash.warning { background:#3b3115; color:#f6d777; border-color:#806923; }
html[data-theme="dark"] .flash.error { background:#3b1e24; color:#ff9b9b; }
html[data-theme="dark"] .login-page { background:radial-gradient(circle at top right,#202b38 0,#0d141d 55%); }
html[data-theme="dark"] .clock-checking::before { background:#0d141d; color:#edf2f7; }

/* Role accents: Super Admin = gold, School Admin = blue, Teacher = green. */
html[data-theme="dark"] body.role-super_admin { --blue:#e5b84b; --blue-dark:#bd8c25; }
html[data-theme="dark"] body.role-school_admin { --blue:#64b5f6; --blue-dark:#3187c8; }
html[data-theme="dark"] body.role-teacher { --blue:#58d6be; --blue-dark:#24aa93; }
html[data-theme="dark"] body.role-super_admin .button:not(.secondary):not(.danger) { background:#b88722; color:#171109; }
html[data-theme="dark"] body.role-super_admin .button:not(.secondary):not(.danger):hover { background:#e5b84b; }
html[data-theme="dark"] body.role-school_admin .button:not(.secondary):not(.danger) { background:#3187c8; color:#fff; }
html[data-theme="dark"] body.role-school_admin .button:not(.secondary):not(.danger):hover { background:#64b5f6; color:#071522; }
html[data-theme="dark"] body.role-teacher .button:not(.secondary):not(.danger) { background:#168f7d; color:#061b18; }
html[data-theme="dark"] body.role-teacher .button:not(.secondary):not(.danger):hover { background:#58d6be; }
html[data-theme="dark"] body.role-super_admin .brand-mark { background:#b88722; color:#171109; }
html[data-theme="dark"] body.role-super_admin .role-pill { background:#3e3218; color:#f5ce68; }
html[data-theme="dark"] body.role-school_admin .role-pill { background:#173452; color:#8bcaff; }
html[data-theme="dark"] body.role-teacher .role-pill { background:#143c38; color:#7ce5d2; }
@media (max-width:760px) { .theme-label { display:none; } .theme-toggle { padding:8px 10px; } }

/* Spacious, low-noise layout refinements. */
body { line-height:1.55; }
.page-shell { padding-top:46px; padding-bottom:80px; }
.hero { margin-bottom:36px; }
.hero .subtle { max-width:680px; margin-top:10px; }
.grid { gap:22px; }
.card { padding:28px; }
.card-icon { margin-bottom:22px; }
.button { min-height:44px; padding:12px 18px; }
.actions { gap:10px; flex-wrap:wrap; }
.table-card { border-radius:16px; }
th,td { padding:17px 20px; }
.teacher-directory-grid, .teacher-face-grid, .coverage-board { gap:20px; }
.teacher-profile-card { gap:20px; }
.permission-board { gap:22px; }
.permission-lane { padding:18px; }
.kanban-board { gap:20px; }
.kanban-column { padding:16px; }
.form-card { width:min(700px,100%); }
.form-card > .card { padding:32px; }
.subtle { font-size:.92rem; }
.eyebrow { opacity:.9; }
@media (max-width:760px) { .page-shell { padding-top:30px; padding-bottom:48px; } .card, .form-card > .card { padding:22px; } th,td { padding:13px 15px; } }