/* MySchoolPortal
   Visual language from the original MySchoolPortal design: light slate canvas,
   deep emerald and kente gold, rounded cards, uppercase stat labels, pill tabs.
   Order: tokens, base, shell, page parts, components, public site, gateway. */

:root {
  --emerald-950: #022C22;
  --emerald-900: #064E3B;
  --emerald-800: #065F46;
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-100: #D1FAE5;
  --emerald-50:  #ECFDF5;
  --teal-700:    #0F766E;
  --gold-600:    #D97706;
  --gold-500:    #F59E0B;
  --gold-100:    #FEF3C7;
  --gold-50:     #FFFBEB;
  --cream:       #FAF7F2;

  --ink-900: #0F172A;
  --ink-800: #1E293B;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --line:    #E2E8F0;
  --line-strong: #CBD5E1;
  --canvas:  #F8FAFC;
  --surface: #FFFFFF;
  --soft:    #F1F5F9;

  --ok: #047857;   --ok-bg: #ECFDF5;  --ok-line: #A7F3D0;
  --bad: #B91C1C;  --bad-bg: #FEF2F2; --bad-line: #FECACA;
  --info: #1D4ED8; --info-bg: #EFF6FF; --info-line: #BFDBFE;
  --focus: #F59E0B;

  /* Role accent, set on <body data-accent="..."> */
  --accent: #065F46;
  --accent-soft: #ECFDF5;
  --accent-ink: #065F46;

  --brand: var(--emerald-800);
  --radius-lg: 16px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, .18);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Plus Jakarta Sans", "Outfit", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1216px;
}
body[data-accent="purple"]  { --accent: #7C3AED; --accent-soft: #F5F3FF; --accent-ink: #6D28D9; }
body[data-accent="emerald"] { --accent: #065F46; --accent-soft: #ECFDF5; --accent-ink: #065F46; }
body[data-accent="blue"]    { --accent: #2563EB; --accent-soft: #EFF6FF; --accent-ink: #1D4ED8; }
body[data-accent="rose"]    { --accent: #E11D48; --accent-soft: #FFF1F2; --accent-ink: #BE123C; }
body[data-accent="amber"]   { --accent: #D97706; --accent-soft: #FFFBEB; --accent-ink: #B45309; }
body[data-accent="teal"]    { --accent: #0F766E; --accent-soft: #F0FDFA; --accent-ink: #0F766E; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55;
  color: var(--ink-900); background: var(--canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { text-wrap: balance; font-family: var(--display); color: var(--ink-900); }
a { color: var(--emerald-700); }
label { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .4); border-radius: 999px; }

.icon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.125em; }
.gh-flag { width: 18px; height: 12px; border-radius: 2px; flex: 0 0 auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--surface);
  color: var(--ink-900); padding: 8px 12px; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.muted { color: var(--ink-400); }
.mono { font-family: var(--mono); font-size: .92em; }
.nowrap { white-space: nowrap; }
.optional { font-weight: 500; color: var(--ink-500); font-size: 12px; }

/* ---------- Brand mark ---------- */

.brand-mark {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--emerald-600), var(--teal-700) 55%, #155E75);
  box-shadow: 0 4px 10px -2px rgba(15, 118, 110, .35);
  font-weight: 800; font-size: 14px;
}
.brand-mark .icon { width: 22px; height: 22px; }
.brand-mark-gold { background: var(--emerald-900); color: var(--gold-500); box-shadow: 0 0 0 2px var(--gold-500); }
.brand-mark-lg { width: 56px; height: 56px; border-radius: 16px; }
.brand-mark-lg .icon { width: 30px; height: 30px; }
.brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 12px; background: #fff; border: 1px solid var(--line); }

.chip-gh {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px;
  background: var(--emerald-100); color: var(--emerald-800); font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ---------- Portal shell (signed-in) ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--emerald-800), var(--teal-700) 40%, var(--gold-600));
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.topbar-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.topbar-brand:hover .topbar-name { color: var(--emerald-700); }
.topbar-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar-name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { font-size: 12px; color: var(--ink-500); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.btn-front {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px;
  background: var(--gold-50); border: 1px solid #FCD34D; color: #78350F; font-size: 13px; font-weight: 700; text-decoration: none;
}
.btn-front:hover { background: var(--gold-100); color: #78350F; }
.user-chip { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--line); }
.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800;
  box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--line);
}
.user-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.user-chip-name { font-size: 13px; font-weight: 700; color: var(--ink-800); }
.user-chip-role { font-size: 11px; color: var(--ink-500); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: transparent; color: var(--ink-500); text-decoration: none; cursor: pointer;
}
.icon-btn:hover { background: var(--soft); color: var(--ink-900); }
.icon-btn .icon { width: 18px; height: 18px; }
@media (max-width: 900px) {
  .user-chip-text, .topbar-sub, .btn-front span { display: none; }
  .chip-gh { display: none; }
}

.portal { padding: 28px 0 40px; }
.portal-head {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.portal-head-main { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.portal-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent); flex: 0 0 auto;
}
.portal-icon .icon { width: 22px; height: 22px; }
.portal-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.portal-sub { color: var(--ink-500); margin: 4px 0 0; font-size: 14px; }
.portal-sub strong { color: var(--ink-700); }
.tenancy {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line);
  border-radius: 10px; font-size: 13px; color: var(--ink-500); background: var(--surface);
}
.tenancy strong { color: var(--ink-900); }
.tenancy .icon { color: var(--accent); }

.portal-tabs {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 12px; margin: 0 0 22px;
  border-bottom: 1px solid var(--line); scrollbar-width: thin;
}
.portal-tab {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 14px;
  border-radius: 10px; color: var(--ink-600); font-size: 14px; font-weight: 600; text-decoration: none;
}
.portal-tab .icon { width: 16px; height: 16px; opacity: .8; }
.portal-tab:hover { background: var(--soft); color: var(--ink-900); }
.portal-tab.is-active { background: var(--accent); color: #fff; box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .35); }
.portal-tab.is-active .icon { opacity: 1; }

.portal-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 18px 0; font-size: 13px; color: var(--ink-500); }
.portal-foot .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.portal-foot strong { color: var(--ink-800); }
.foot-ok { color: var(--emerald-700); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.dot-sep { margin: 0 8px; color: var(--ink-400); }

/* ---------- Page parts inside a portal ---------- */

.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 22px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 4px; }
.page-sub { color: var(--ink-500); margin: 0; font-size: 14px; max-width: 820px; }
.crumb { font-size: 13px; color: var(--ink-500); margin: 0 0 4px; font-weight: 500; }
.crumb a { color: var(--ink-500); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.sep { margin: 0 6px; color: var(--ink-400); }
.section-title { font-size: 18px; font-weight: 800; margin: 36px 0 4px; }
.section-text { color: var(--ink-500); margin: 0 0 16px; max-width: 760px; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 18px 16px; box-shadow: var(--shadow-sm);
}
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.stat-value {
  font-size: 26px; font-weight: 800; margin-top: 6px; line-height: 1.15; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ink-900);
}
.stat-note { font-size: 12px; font-weight: 600; margin-top: 6px; color: var(--emerald-700); }
.stat:nth-child(2) .stat-value { color: #7C3AED; }
.stat:nth-child(3) .stat-value { color: var(--gold-600); }
.stat:nth-child(4) .stat-value { color: var(--emerald-700); }
.stat:nth-child(3) .stat-note { color: var(--gold-600); }
.stat-grid-compact .stat-value { font-size: 22px; }
.stat-value-sm { font-size: 16px !important; font-weight: 700; color: var(--ink-900) !important; }

/* Panels */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.panel + .panel, .panel + section, .notice + .panel, .panel + form { margin-top: 18px; }
.panel-narrow { max-width: 520px; }
.panel-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.panel-title .icon { color: var(--accent); width: 18px; height: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-head .panel-title { margin: 0; }
.panel-head-pad { padding: 16px 22px; margin: 0; border-bottom: 1px solid var(--line); }
.panel-meta { font-size: 13px; color: var(--ink-500); }
.panel-text { color: var(--ink-500); margin: -6px 0 16px; font-size: 14px; }
.panel-foot { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.panel-flush { padding: 0; overflow: hidden; margin-bottom: 18px; }
.empty-panel { text-align: center; padding: 40px 20px; }
.empty { color: var(--ink-500); margin: 0; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-grid > .panel + .panel { margin-top: 0; }
.dash-col { display: grid; gap: 18px; align-content: start; }
.dash-col > .panel + .panel { margin-top: 0; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.split > .panel + .panel { margin-top: 0; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.scheme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.scheme-grid > .panel + .panel { margin-top: 0; }

.plain-list { list-style: none; margin: 0; padding: 0; }
.row-list { display: grid; gap: 10px; }
.row-list li {
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column;
}
.row-primary { font-weight: 700; font-size: 14px; color: var(--ink-900); }
.row-secondary { font-size: 13px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.attention-list { display: grid; gap: 10px; }
.attention-list li {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
  background: var(--gold-50); border: 1px solid #FDE68A; font-size: 14px; color: #78350F; font-weight: 600;
}
.attention-list li .icon { color: var(--gold-600); width: 18px; height: 18px; margin-top: 1px; }
.attention-list a { color: #78350F; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #F59E0B; }
.attention-list a:hover { color: #451A03; }
.all-clear { display: flex; gap: 10px; align-items: center; padding: 14px; border-radius: var(--radius); background: var(--emerald-50); border: 1px solid #A7F3D0; color: var(--emerald-900); font-weight: 600; font-size: 14px; }
.all-clear .icon { color: var(--emerald-600); width: 18px; height: 18px; }
.activity-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-500); }
.activity-top strong { color: var(--ink-800); }
.activity-action { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--ink-900); text-transform: uppercase; margin-top: 2px; }
.activity-text { font-size: 13px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Buttons */
.btn-primary-solid, .btn-accent, .btn-line, .btn-outline-brand, .btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; text-align: center; font-family: inherit; font-weight: 700; font-size: 15px;
  border-radius: 10px; padding: 10px 18px; line-height: 1.3; border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary-solid { background: var(--emerald-800); color: #fff; box-shadow: 0 6px 14px -6px rgba(6, 95, 70, .55); }
.btn-primary-solid:hover { background: var(--emerald-900); color: #fff; }
.btn-primary-solid:disabled { opacity: .65; }
.btn-accent { background: var(--gold-500); color: #1F2937; box-shadow: 0 6px 14px -6px rgba(217, 119, 6, .55); }
.btn-accent:hover { background: #FBBF24; color: #111827; }
.btn-outline-brand { background: var(--surface); color: var(--emerald-900); border: 2px solid var(--emerald-800); padding: 9px 17px; }
.btn-outline-brand:hover { background: var(--emerald-50); color: var(--emerald-900); }
.btn-white { background: #fff; color: var(--emerald-900); }
.btn-white:hover { background: var(--emerald-50); color: var(--emerald-900); }
.btn-line { background: var(--surface); color: var(--ink-800); border-color: var(--line-strong); font-weight: 600; }
.btn-line:hover { border-color: var(--ink-500); color: var(--ink-900); }
.btn-small { padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn-lg { padding: 13px 22px; font-size: 16px; border-radius: 12px; }
.btn-danger-line { color: var(--bad); border-color: var(--bad-line); }
.btn-danger-line:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-bg); }
.btn-primary-solid .icon, .btn-accent .icon, .btn-line .icon, .btn-outline-brand .icon, .btn-white .icon { width: 17px; height: 17px; }
.inline-form { display: inline; margin: 0; }
.form-actions { display: flex; gap: 10px; align-items: center; margin: 6px 0 24px; flex-wrap: wrap; }
.link-btn { background: none; border: 0; padding: 0; color: var(--emerald-700); font-size: 13px; font-weight: 700; cursor: pointer; }

/* Status: dot and text */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink-700); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400); }
.status-active, .status-approved { color: var(--emerald-700); }
.status-active::before, .status-approved::before { background: #10B981; }
.status-pending, .status-submitted, .status-under_review, .status-more_info { color: #B45309; }
.status-pending::before, .status-submitted::before, .status-under_review::before, .status-more_info::before { background: var(--gold-500); }
.status-suspended, .status-closed, .status-rejected { color: var(--bad); }
.status-suspended::before, .status-closed::before, .status-rejected::before { background: #EF4444; }
.panel-title .status { margin-left: 8px; }
.term-name + .status { margin-left: 10px; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--soft); color: var(--ink-700); }
.tag-emerald { background: var(--emerald-100); color: var(--emerald-800); }
.tag-blue { background: #DBEAFE; color: #1E40AF; }
.tag-gold { background: var(--gold-100); color: #92400E; }

/* Notices */
.notice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; font-weight: 500; }
.notice-success { background: var(--ok-bg); border-color: var(--ok-line); color: #065F46; }
.notice-error { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.notice-info { background: var(--info-bg); border-color: var(--info-line); color: #1E3A8A; }
.notice-action { justify-content: space-between; align-items: center; flex-wrap: wrap; }

/* Forms */
.field { margin-bottom: 16px; }
.field-label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--ink-800); }
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.field-hint { font-size: 12px; color: var(--ink-500); margin: -2px 0 6px; }
.field-input {
  display: block; width: 100%; padding: 10px 12px; font-size: 15px; font-family: inherit; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-input:hover { border-color: var(--ink-400); }
.field-input:focus { outline: none; border-color: var(--emerald-600); box-shadow: 0 0 0 3px rgba(16, 185, 129, .2); }
select.field-input { appearance: auto; }
textarea.field-input { min-height: 96px; }
.field-input-sm { padding: 7px 10px; font-size: 14px; border-radius: 8px; }
.field-input-auto { width: auto; min-width: 160px; }
.field-num { max-width: 100px; margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.field-color { width: 64px; height: 42px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); }

.form-stack { max-width: 1000px; }
.form-section { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 4px; }
.form-section-title { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.form-section-text { font-size: 13px; color: var(--ink-500); margin: 0; }
.form-section-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .form-section { grid-template-columns: 1fr; gap: 12px; } }

.check-group { border: 0; padding: 0; margin: 0 0 14px; }
.check-legend { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); margin-bottom: 8px; float: none; width: auto; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; margin: 0; font-weight: 500; }
.check input { width: 16px; height: 16px; accent-color: var(--emerald-700); }
.check-row .check { padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.check-row .check:has(input:checked) { border-color: var(--emerald-600); background: var(--emerald-50); color: var(--emerald-900); font-weight: 700; }
.check-inline { margin-top: 8px; }
.fact-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0 0 18px; }
.fact-list dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.fact-list dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }

/* Tabs and toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--soft); padding: 4px; border-radius: 12px; }
.tab { padding: 7px 12px; color: var(--ink-600); text-decoration: none; font-size: 13px; font-weight: 700; border-radius: 9px; }
.tab:hover { color: var(--ink-900); }
.tab.is-active { background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow); }
.tab-count { color: var(--ink-400); font-variant-numeric: tabular-nums; margin-left: 3px; }
.search-form { display: flex; gap: 8px; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
.data-table th, .data-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; position: relative; }
.data-table thead th { font-size: 11px; font-weight: 800; color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; background: var(--canvas); white-space: nowrap; }
.data-table tbody tr:last-child td, .data-table tbody tr:last-child th { border-bottom: 0; }
.data-table tbody tr:hover td { background: #FBFDFC; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table-form td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
.table-wrap:not(.panel) > .data-table { border: 1px solid var(--line); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.panel > .table-wrap { margin: 0 -22px; }
.panel-flush > .table-wrap { margin: 0; }
.data-table th:first-child, .data-table td:first-child { padding-left: 22px; }
.row-link { color: var(--ink-900); font-weight: 700; text-decoration: none; }
.row-link:hover { color: var(--emerald-700); text-decoration: underline; }
.cell-sub { font-size: 12px; color: var(--ink-500); margin-top: 2px; font-weight: 500; }
.actions-cell { text-align: right; white-space: nowrap; }
.actions-cell > * + * { margin-left: 6px; }
.check-col { width: 76px; text-align: center !important; }
.check-col input { accent-color: var(--emerald-700); width: 16px; height: 16px; }
.group-row th { background: var(--soft); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-600); padding-top: 8px !important; padding-bottom: 8px !important; }
.is-current-row td { background: var(--emerald-50); }
.is-muted-row th, .is-muted-row td { color: var(--ink-400); }
.mini-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.mini-table th { font-weight: 700; color: var(--ink-500); text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.mini-table td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.mini-table td.num { text-align: left; font-variant-numeric: tabular-nums; }
.grid-table th.grid-head, .grid-table td.grid-cell { text-align: center; padding-left: 6px; padding-right: 6px; }
.grid-cell input { width: 18px; height: 18px; accent-color: var(--emerald-700); }
.data-table .sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 210px; font-weight: 500; }
.grid-table thead .sticky-col { background: var(--canvas); }
.grid-table abbr { text-decoration: none; cursor: help; }

/* Misc blocks */
.logo-preview { height: 100%; min-height: 100px; border: 1px dashed var(--line-strong); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.logo-preview img { max-width: 96px; max-height: 96px; object-fit: contain; }
.logo-preview-note { font-size: 12px; color: var(--ink-500); }
.term-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 4px 0 20px; }
.term-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0; background: var(--canvas); }
.term-legend { font-size: 14px; font-weight: 800; padding: 0 6px; margin-left: -6px; float: none; width: auto; margin-bottom: 0; }
@media (max-width: 760px) { .term-grid { grid-template-columns: 1fr; } }
.subject-teacher-list { display: grid; gap: 10px; }
.subject-teacher-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; }
@media (max-width: 560px) { .subject-teacher-row { grid-template-columns: 1fr; gap: 4px; } }
.row-with-actions { flex-direction: row !important; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.row-with-actions > div:first-child { display: flex; flex-direction: column; }
.row-actions { display: flex; gap: 6px; }
.disclosure { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.disclosure summary { cursor: pointer; font-weight: 700; color: var(--emerald-700); font-size: 14px; }
.disclosure-body { margin-top: 14px; }
.credentials { border: 1px solid var(--ok-line); background: var(--ok-bg); border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 18px; }
.credentials-title { font-size: 15px; font-weight: 800; margin: 0 0 2px; color: var(--emerald-800); }
.credentials-text { font-size: 14px; color: var(--ink-700); margin: 0 0 12px; }
.credentials-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0; }
.credentials-list dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.credentials-list dd { margin: 0; word-break: break-all; }
.credentials-pass { font-size: 20px; font-weight: 700; letter-spacing: .04em; color: var(--emerald-900); }
.danger-zone { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid var(--bad-line); border-radius: var(--radius-lg); padding: 16px 22px; margin-top: 12px; max-width: 1000px; background: var(--surface); }
.danger-title { font-size: 15px; font-weight: 800; margin: 0; }
.danger-text { font-size: 14px; color: var(--ink-500); margin: 2px 0 0; }
.weights-total { font-variant-numeric: tabular-nums; }
.weights-total.is-off { color: var(--bad); }
.weights-total.is-ok { color: var(--emerald-700); }
.error-detail { background: var(--canvas); border: 1px solid var(--line); padding: 10px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; border-radius: var(--radius-sm); }

/* ---------- Public site ---------- */

.site-body { background: var(--surface); }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; position: relative; }
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-brand-name { display: block; font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--emerald-900); line-height: 1.1; }
.site-brand-tag { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--ink-500); margin-top: 3px; text-transform: uppercase; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-cta a { white-space: nowrap; }
.site-nav a.site-link { color: var(--ink-700); font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.site-nav a.site-link:hover { color: var(--emerald-700); }
.site-nav .icon { color: var(--gold-600); }
.site-cta { display: flex; gap: 10px; }
.site-menu-btn { display: none; }
@media (max-width: 1260px) {
  .site-menu-btn { display: inline-grid; }
  .site-nav { display: none; position: absolute; left: -24px; right: -24px; top: 100%; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .site-nav.is-open { display: flex; }
  .site-nav a.site-link { padding: 12px 4px; border-bottom: 1px solid var(--soft); }
  .site-cta { flex-direction: column; margin-top: 14px; }
}
@media (max-width: 640px) { .site-nav { left: -16px; right: -16px; padding: 8px 16px 18px; } }

.hero { background: linear-gradient(180deg, var(--cream), #fff); padding: 72px 0 80px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero { padding: 40px 0 56px; } }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--emerald-50); border: 1px solid #A7F3D0; color: var(--emerald-900); font-size: 13px; font-weight: 700; }
.eyebrow-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #10B981; }
.hero-title { font-size: clamp(36px, 5.2vw, 58px); font-weight: 800; letter-spacing: -.035em; line-height: 1.07; color: var(--emerald-950); margin: 26px 0 22px; }
.hero-lead { font-size: 18px; color: var(--ink-600); max-width: 640px; margin: 0 0 32px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 0; }
.hero-points li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-600); }
.hero-points .icon { color: var(--emerald-600); width: 16px; height: 16px; }

.hero-visual { display: grid; gap: 14px; }
.campus-card {
  position: relative; border-radius: 20px; overflow: hidden; min-height: 280px; padding: 24px;
  display: flex; flex-direction: column; justify-content: flex-end; color: #fff;
  background:
    linear-gradient(180deg, rgba(2, 44, 34, .1), rgba(2, 44, 34, .9) 75%),
    repeating-linear-gradient(90deg, #065F46 0 22px, #F59E0B 22px 30px, #065F46 30px 52px, #B91C1C 52px 58px, #064E3B 58px 82px, #FCD34D 82px 88px),
    #064E3B;
  box-shadow: var(--shadow-lg);
}
.campus-card::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(0, 0, 0, .28) 26px 30px); }
.campus-card > * { position: relative; }
.campus-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #FCD34D; text-transform: uppercase; }
.campus-title { font-size: 20px; font-weight: 800; margin: 4px 0 2px; color: #fff; }
.campus-text { font-size: 13px; color: rgba(255, 255, 255, .85); margin: 0; }
.ops-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); }
.ops-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 800; }
.ops-head-title { display: inline-flex; align-items: center; gap: 8px; }
.ops-head-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #10B981; }
.ops-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ops-cell { background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; text-align: center; }
.ops-cell-label { font-size: 11px; font-weight: 700; color: var(--ink-500); }
.ops-cell-value { font-size: 18px; font-weight: 800; color: var(--emerald-900); font-variant-numeric: tabular-nums; }
.ops-cell:nth-child(2) .ops-cell-value { color: var(--emerald-600); }
.ops-cell:nth-child(3) .ops-cell-value { color: var(--gold-600); }
.ops-cell:nth-child(4) .ops-cell-value { color: #2563EB; }
.ops-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gold-50); border: 1px solid #FDE68A; font-size: 12px; color: #78350F; }
.ops-foot strong { display: block; font-size: 13px; color: var(--ink-900); }
@media (max-width: 480px) { .ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.section { padding: 80px 0; }
.section-alt { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-cream { background: #F6F3EC; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--emerald-100); color: var(--emerald-800); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-title-lg { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.025em; color: var(--emerald-950); margin: 12px 0 10px; line-height: 1.15; }
.section-lead { font-size: 17px; color: var(--ink-600); margin: 0; }
.figures-label { display: flex; justify-content: center; margin-bottom: 22px; }
.figures-label span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-600); }
.figures-label .icon { color: var(--emerald-600); }
.figure-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .figure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figure { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px 16px; text-align: center; box-shadow: var(--shadow-sm); }
.figure .icon { width: 24px; height: 24px; color: var(--emerald-700); }
.figure-value { font-size: 34px; font-weight: 800; color: var(--emerald-950); letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.figure-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-700); }
.figure-note { font-size: 12px; color: var(--ink-500); margin-top: 2px; }

.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .solution-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .solution-grid, .figure-grid { grid-template-columns: 1fr; } }
.solution { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease; }
.solution:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.solution-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; }
.solution-icon .icon { width: 22px; height: 22px; }
.si-emerald { background: var(--emerald-50); color: var(--emerald-700); }
.si-blue { background: #EFF6FF; color: #2563EB; }
.si-rose { background: #FFF1F2; color: #E11D48; }
.si-amber { background: var(--gold-50); color: var(--gold-600); }
.si-teal { background: #F0FDFA; color: #0F766E; }
.si-purple { background: #F5F3FF; color: #7C3AED; }
.solution-title { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.solution-text { font-size: 14px; color: var(--ink-600); margin: 0 0 18px; flex: 1; }
.solution-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--soft); font-size: 12px; font-weight: 700; }
.solution-foot a { display: inline-flex; align-items: center; gap: 4px; color: var(--emerald-900); text-decoration: none; font-weight: 800; white-space: nowrap; }
.solution-foot a:hover { color: var(--emerald-600); }
.sf-emerald { color: var(--emerald-700); } .sf-blue { color: #2563EB; } .sf-rose { color: #E11D48; } .sf-amber { color: var(--gold-600); } .sf-teal { color: #0F766E; } .sf-purple { color: #7C3AED; }

.rate-banner { display: flex; justify-content: center; margin: -20px 0 32px; }
.rate-banner span { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 14px; border: 1px solid #FCD34D; background: var(--gold-50); border-radius: 12px; font-size: 14px; color: #78350F; }
.rate-banner strong.rate-tag { background: var(--gold-500); color: #1F2937; padding: 2px 8px; border-radius: 6px; font-size: 12px; }
.tutor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .tutor-grid { grid-template-columns: 1fr; } }
.tutor-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.tutor-name { font-weight: 800; font-size: 16px; margin: 0; }
.tutor-sub { font-size: 12px; color: var(--ink-500); margin: 0; }
.tutor-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--soft); }
.tutor-rate { font-weight: 800; color: var(--emerald-900); }
.tutor-empty { text-align: center; padding: 40px 24px; border: 1px dashed var(--line-strong); border-radius: 18px; background: #fff; }
.tutor-empty .icon { width: 30px; height: 30px; color: var(--emerald-600); }
.tutor-empty h3 { font-size: 18px; font-weight: 800; margin: 10px 0 6px; }
.tutor-empty p { color: var(--ink-600); margin: 0 auto; max-width: 560px; }
.notice-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 14px 18px; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line); font-size: 14px; color: var(--ink-600); }
.notice-strip .icon { color: var(--emerald-600); width: 18px; height: 18px; flex: 0 0 auto; }
.notice-strip-text { display: flex; gap: 10px; align-items: flex-start; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-sm); }
.step-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--emerald-800); color: #fff; font-weight: 800; margin-bottom: 14px; box-shadow: 0 0 0 3px var(--gold-500); }
.step-title { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.step-text { font-size: 14px; color: var(--ink-600); margin: 0; }

.directory-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.directory-head .section-title-lg { margin-top: 10px; }
.directory-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; padding: 14px; background: var(--canvas); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .directory-filter { grid-template-columns: 1fr; } }
.directory-table thead th { background: var(--emerald-900); color: #fff; }
.directory-note { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-500); margin-top: 12px; }

.cta-band { background: radial-gradient(circle at 20% 0%, #0B6B52, var(--emerald-950) 70%); color: #fff; text-align: center; padding: 84px 0; }
.cta-flag { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--gold-500); margin-bottom: 22px; }
.cta-flag .gh-flag { width: 30px; height: 20px; }
.cta-title { color: #fff; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 0 0 16px; }
.cta-text { color: rgba(255, 255, 255, .8); font-size: 17px; max-width: 620px; margin: 0 auto 30px; }
.cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn-gold-outline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 2px solid var(--gold-500); color: #FCD34D; font-weight: 800; text-decoration: none; }
.btn-gold-outline:hover { background: rgba(245, 158, 11, .12); color: #FDE68A; }

.site-footer { background: #071A15; color: rgba(255, 255, 255, .7); padding: 56px 0 28px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 16px; margin-bottom: 12px; }
.footer-brand .icon { color: var(--gold-500); width: 22px; height: 22px; }
.footer-motto { color: #FCD34D; font-family: var(--mono); font-size: 12px; margin-top: 12px; }
.footer-col h3 { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.footer-col a { display: block; color: rgba(255, 255, 255, .7); text-decoration: none; padding: 3px 0; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 36px; padding-top: 20px; font-size: 13px; }
.footer-bottom .gold { color: var(--gold-500); font-weight: 700; }

/* ---------- Gateway (sign in, register) ---------- */

.gateway-page { min-height: calc(100vh - 77px); background: linear-gradient(180deg, var(--cream), #EEF2EF); display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px 64px; }
.gateway { width: 100%; max-width: 580px; background: #fff; border-radius: 24px; box-shadow: var(--shadow-lg); padding: 28px; border: 1px solid var(--line); }
.gateway-wide { max-width: 860px; }
.gateway-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.gateway-head .brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--emerald-800); box-shadow: none; color: var(--gold-500); }
.gateway-title { font-size: 18px; font-weight: 800; margin: 0; color: var(--emerald-950); }
.gateway-sub { font-size: 13px; color: var(--ink-500); margin: 0; }
.gateway-tabs { display: flex; gap: 4px; background: var(--soft); padding: 4px; border-radius: 12px; margin-bottom: 20px; overflow-x: auto; }
.gateway-tab { flex: 1 0 auto; text-align: center; padding: 8px 12px; border-radius: 9px; border: 0; background: transparent; font-size: 13px; font-weight: 700; color: var(--ink-600); cursor: pointer; font-family: inherit; text-decoration: none; }
.gateway-tab[aria-selected="true"], .gateway-tab.is-active { background: #fff; color: var(--ink-900); box-shadow: var(--shadow); }
.role-label { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--ink-800); }
.role-set { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.role-set .role-label { float: none; width: auto; }
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.role-chip { position: relative; display: block; cursor: pointer; }
.role-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.role-chip > span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-800); background: #fff; }
.role-chip .icon { width: 17px; height: 17px; }
.role-chip input:checked + span { border: 2px solid var(--emerald-600); background: var(--emerald-50); padding: 9px 11px; font-weight: 800; color: var(--emerald-950); }
.role-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.rc-amber { color: var(--gold-600); } .rc-blue { color: #2563EB; } .rc-rose { color: #E11D48; } .rc-emerald { color: var(--emerald-700); } .rc-purple { color: #7C3AED; }
.gateway-note { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--line); font-size: 12px; color: var(--ink-500); margin-bottom: 16px; }
.gateway-note strong { color: var(--emerald-800); }
.gateway-foot { text-align: center; font-size: 14px; color: var(--ink-600); margin: 18px 0 0; }
.gateway-foot a { color: var(--emerald-800); font-weight: 800; }
.gateway-submit { width: 100%; padding: 13px 18px; font-size: 16px; border-radius: 12px; }
.gateway-school { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--emerald-50); border: 1px solid #A7F3D0; margin-bottom: 18px; }
.gateway-school img { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: #fff; }
.gateway-school-name { font-weight: 800; color: var(--emerald-950); }
.gateway-school-motto { font-size: 12px; color: var(--emerald-800); font-style: italic; }
.recovery-steps { margin: 0; padding-left: 20px; color: var(--ink-700); }
.recovery-steps li { margin-bottom: 10px; }
.ref-box { text-align: center; padding: 22px; border-radius: 16px; background: var(--emerald-50); border: 1px solid #A7F3D0; margin: 8px 0 18px; }
.ref-box .label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald-800); }
.ref-box .value { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--emerald-950); margin-top: 4px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Single-card pages (setup, errors) */
.auth-body { background: var(--canvas); }
.auth-single { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: linear-gradient(180deg, var(--cream), #EEF2EF); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 32px; box-shadow: var(--shadow-lg); }
.auth-card-wide { max-width: 580px; }
.auth-title { font-size: 24px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.02em; color: var(--emerald-950); }
.eyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--emerald-700); margin: 0 0 6px; }
.lead-text { color: var(--ink-600); margin: -6px 0 20px; }

@media (max-width: 640px) {
  .portal { padding-top: 18px; }
  .portal-head { padding: 18px; }
  .portal-title { font-size: 20px; }
  .panel { padding: 18px; }
  .panel > .table-wrap { margin: 0 -18px; }
  .gateway { padding: 20px; border-radius: 20px; }
  .section { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .solution { transition: none; }
}

/* Layout fixes */
.dash-col, .dash-grid > *, .split > *, .row-list li { min-width: 0; }
.site-header .wrap { max-width: 1400px; }
.site-header .site-cta .btn-outline-brand, .site-header .site-cta .btn-accent { padding: 9px 14px; font-size: 14px; }
.site-header .site-cta .btn-outline-brand { padding: 7px 12px; }
@media (min-width: 1381px) { .site-nav { gap: 18px; } }
@media (max-width: 1380px) {
  .site-menu-btn { display: inline-grid; }
  .site-nav { display: none; position: absolute; left: -24px; right: -24px; top: 100%; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  .site-nav.is-open { display: flex; }
  .site-nav a.site-link { padding: 12px 4px; border-bottom: 1px solid var(--soft); }
  .site-cta { flex-direction: column; margin-top: 14px; }
}

/* Attendance register */
.text-bad { color: var(--bad); }
.att-daybar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.att-dayform { display: flex; gap: 6px; align-items: center; }
.att-dayform .field-input { height: 34px; padding-top: 4px; padding-bottom: 4px; }
.att-state { font-size: 13px; color: var(--ink-600); margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.att-state strong { color: var(--ink-900); }
.att-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.att-hint { margin: 0; font-size: 13px; color: var(--ink-500); }

.att-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.att-row {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(170px, 240px); gap: 10px 18px; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
}
.att-row:last-child { border-bottom: 0; }
.att-row.is-late { border-left-color: var(--gold-500); background: #FFFDF5; }
.att-row.is-absent { border-left-color: #EF4444; background: #FFF8F8; }
.att-row.is-excused { border-left-color: #3B82F6; background: #F8FBFF; }
.att-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.att-num { width: 22px; text-align: right; font-size: 12px; font-weight: 700; color: var(--ink-400); font-variant-numeric: tabular-nums; flex: none; }
.att-photo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; flex: none; border: 1px solid var(--line); }
.att-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 800; }
.att-name { display: flex; flex-direction: column; min-width: 0; }
.att-name-main { font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; }

.att-choice { display: inline-grid; grid-template-columns: repeat(4, auto); gap: 4px; border: 0; margin: 0; padding: 3px; background: var(--soft); border-radius: 10px; }
.att-opt { position: relative; margin: 0; cursor: pointer; }
.att-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.att-opt span {
  display: block; padding: 6px 11px; border-radius: 8px; border: 1px solid transparent;
  font-size: 13px; font-weight: 700; color: var(--ink-600); text-align: center; white-space: nowrap; user-select: none;
}
.att-opt:hover span { color: var(--ink-900); background: rgba(255, 255, 255, .6); }
.att-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.att-opt input:disabled + span { cursor: default; }
.att-present input:checked + span { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.att-late input:checked + span { background: var(--gold-50); border-color: #FDE68A; color: #B45309; }
.att-absent input:checked + span { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad); }
.att-excused input:checked + span { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }
.att-note .field-input { width: 100%; }

.att-bar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 -6px 20px -12px rgba(15, 23, 42, .25);
}
.att-counts { display: flex; gap: 18px; margin: 0; flex-wrap: wrap; }
.att-count { display: flex; align-items: baseline; gap: 6px; }
.att-count dt { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.att-count dd { margin: 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.att-count-present dd { color: var(--ok); }
.att-count-late dd { color: #B45309; }
.att-count-absent dd { color: var(--bad); }
.att-count-excused dd { color: var(--info); }

.att-missing { display: flex; flex-wrap: wrap; gap: 6px; }
.att-missing a.tag { text-decoration: none; }
.att-missing a.tag:hover { text-decoration: underline; }
.att-rate { font-weight: 800; color: var(--ok); }
.att-rate.is-low { color: var(--bad); }
.att-term { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.att-term > div { background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.att-term dt { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.att-term dd { margin: 2px 0 0; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .att-row { grid-template-columns: 1fr; padding: 12px 14px; }
  .att-choice { display: grid; width: 100%; }
  .att-opt span { padding: 8px 4px; }
  .att-state { margin-left: 0; width: 100%; }
}
@media (max-width: 420px) {
  .att-opt span { font-size: 12px; }
  .att-counts { gap: 12px; }
  .att-count dd { font-size: 17px; }
  .att-bar .btn-primary-solid { width: 100%; justify-content: center; }
  .att-term { grid-template-columns: repeat(2, 1fr); }
}

/* Programmes */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.prog-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0; cursor: pointer;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.prog-card:hover { border-color: var(--line-strong); }
.prog-card.is-on, .prog-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.prog-card input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.prog-card:has(input:disabled) { cursor: default; }
.prog-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.prog-name { font-weight: 800; color: var(--ink-900); }
.prog-text { font-size: 13px; color: var(--ink-600); }
.prog-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.programme-row th { background: var(--ink-800); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; padding-top: 9px !important; padding-bottom: 9px !important; }
.form-actions .field-hint { align-self: center; }
.level-picker { display: flex; flex-direction: column; gap: 8px; }
.prog-pick { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.prog-pick > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; }
.prog-pick > summary::-webkit-details-marker { display: none; }
.prog-pick > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500); transform: rotate(45deg); margin-left: 4px; flex: none; }
.prog-pick[open] > summary::after { transform: rotate(-135deg); }
.prog-pick-name { font-weight: 800; color: var(--ink-900); flex: 1; }
.prog-pick-count { font-size: 12px; font-weight: 700; color: var(--ink-500); }
.prog-pick-body { padding: 4px 14px 6px; border-top: 1px solid var(--line); }
.term-box[hidden] { display: none; }

/* SBA gradebook */
.weights-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.weight-chip { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 170px; }
.weight-chip.is-empty { border-style: dashed; background: var(--canvas); }
.weight-chip-name { font-weight: 700; font-size: 13px; color: var(--ink-800); }
.weight-chip-val { font-weight: 800; font-size: 15px; color: var(--accent-ink); font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center; }
.weight-chip-sub { font-size: 12px; color: var(--ink-500); }
.weight-chip.is-empty .weight-chip-sub { color: #B45309; font-weight: 700; }
.add-task > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; }
.add-task > summary::-webkit-details-marker { display: none; }
.add-task[open] > summary { margin-bottom: 14px; }
.add-task-form .btn-primary-solid { margin-top: 4px; }
.gradebook { font-size: 13px; }
.gradebook th, .gradebook td { padding: 8px 10px; }
.gradebook thead th { text-transform: none; letter-spacing: 0; font-size: 12px; vertical-align: bottom; }
.gradebook .gb-group th { border-bottom: 1px solid var(--line); }
.gradebook th.gb-comp { text-align: center; background: var(--accent-soft); color: var(--accent-ink); border-left: 2px solid var(--surface); }
.gb-weight { font-weight: 600; opacity: .8; margin-left: 4px; }
.gradebook th.gb-task { text-align: right; min-width: 74px; white-space: normal; }
.gradebook th.gb-task a { color: var(--ink-800); font-weight: 700; text-decoration: none; display: block; }
.gradebook th.gb-task a:hover { color: var(--accent-ink); text-decoration: underline; }
.gb-max { display: block; font-size: 11px; font-weight: 600; color: var(--ink-400); }
.gradebook .gb-sub { background: var(--canvas); font-weight: 700; color: var(--ink-700); text-align: right; white-space: nowrap; }
.gradebook .gb-total { background: var(--soft); text-align: right; font-size: 14px; }
.gb-cell { font-variant-numeric: tabular-nums; }
.gb-none { color: var(--ink-400); }
.gb-abs { font-size: 11px; font-weight: 800; color: var(--bad); }
.grade-pill { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; text-align: center; font-family: var(--mono); }
.gradebook .sticky-col { min-width: 190px; }
.marks-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.marks-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--line); }
.marks-row:last-child { border-bottom: 0; }
.marks-row.is-absent { background: #FFF8F8; }
.marks-row.is-bad { background: var(--bad-bg); }
.marks-name { display: flex; flex-direction: column; min-width: 0; margin: 0; cursor: pointer; }
.marks-input { display: inline-flex; align-items: center; gap: 6px; }
.mark-box { width: 84px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.marks-row.is-bad .mark-box { border-color: var(--bad); color: var(--bad); }
.mark-of { font-size: 13px; color: var(--ink-500); white-space: nowrap; }
.marks-abs { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-600); cursor: pointer; }
.marks-abs input { width: 16px; height: 16px; accent-color: var(--bad); }
@media (max-width: 560px) {
  .marks-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 12px; }
  .marks-abs { grid-column: 2 / -1; }
}

/* Report cards */
.report-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.report-steps > .panel + .panel { margin-top: 0; }
.report-step { display: flex; flex-direction: column; }
.report-step form, .report-step > a, .report-step > .d-flex { margin-top: auto; }
.step-no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; }
.ready-list { margin: 0 0 12px; font-size: 13px; }
.ready-list li { padding: 3px 0; }
.btn-line.is-disabled { opacity: .45; pointer-events: none; }
@media (max-width: 900px) { .report-steps { grid-template-columns: 1fr; } }
.remark-list { display: flex; flex-direction: column; gap: 10px; }
.remark-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 18px; }
.remark-who { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.remark-name { font-size: 15px; font-weight: 800; margin: 0; }
.remark-meta { font-size: 13px; color: var(--ink-500); }
.verify-card { max-width: 620px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.verify-form { display: flex; gap: 8px; margin: 16px 0; }
.verify-form .field-input { flex: 1; letter-spacing: .08em; text-transform: uppercase; }
.ward-reports { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }

/* ---------- Sidebar shell ---------- */
:root { --side-w: 256px; --top-h: 67px; }
.topbar-full { padding: 0 20px; }
.side-toggle { display: none; }
.app-shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.sidebar {
  position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px 12px;
  scrollbar-width: thin;
}
.side-portal { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.side-portal .portal-icon { width: 36px; height: 36px; border-radius: 10px; }
.side-portal .portal-icon .icon { width: 18px; height: 18px; }
.side-portal-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.side-portal-name { font-weight: 800; font-size: 13.5px; color: var(--ink-900); }
.side-portal-sub { font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-close { display: none; }
.side-nav { flex: 1; }
.side-group { margin: 16px 10px 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px;
  color: var(--ink-600); font-size: 13.5px; font-weight: 600; text-decoration: none; position: relative;
}
.side-link .icon { width: 17px; height: 17px; opacity: .75; }
.side-link:hover { background: var(--soft); color: var(--ink-900); }
.side-link.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.side-link.is-active::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.side-link.is-active .icon { opacity: 1; color: var(--accent); }
.side-label { flex: 1; min-width: 0; }
.side-badge { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--gold-500); color: #1F1300; font-size: 11px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.side-foot { padding: 12px 10px 2px; border-top: 1px solid var(--line); margin-top: 12px; font-size: 12px; }
.side-scrim { display: none; }
.app-main { min-width: 0; display: flex; flex-direction: column; }
.app-main-inner { flex: 1; width: 100%; max-width: 1240px; padding: 26px 32px 40px; }
.app-foot { padding: 14px 32px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink-500); }
.app-foot strong { color: var(--ink-800); }

@media (max-width: 991px) {
  .side-toggle { display: inline-grid; margin-left: -6px; }
  .app-shell { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; width: min(300px, 86vw); height: 100vh;
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg);
  }
  .sidebar.is-open { transform: translateX(0); }
  .side-close { display: inline-grid; }
  .side-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, .4); }
  .side-scrim[hidden] { display: none; }
  .app-main-inner { padding: 20px 20px 32px; }
  .app-foot { padding: 14px 20px; }
}
@media (max-width: 640px) {
  .topbar-full { padding: 0 12px; }
  .app-main-inner { padding: 16px 16px 28px; }
  .app-foot { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
.howto { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink-700); }
.howto li { padding: 3px 0; }
@media (min-width: 992px) {
  .app-shell { background: linear-gradient(to right, var(--surface) var(--side-w), transparent var(--side-w)); }
}