/* ==========================================================================
   Nexxtlearn – design system (green "Donezo"-style theme)
   ========================================================================== */
:root {
  --g-900: #234b36;
  --g-800: #2e6347;
  --g-700: #3a7d5a;
  --g-600: #448d67;
  --g-500: #52a278;
  --g-400: #79b696;
  --g-300: #a8cbb9;
  --g-100: #e9f0ed;
  --g-50:  #f5f8f6;

  --bg: #f3f4f3;
  --surface: #ffffff;
  --surface-2: #f7f8f7;
  --ink: #111814;
  --ink-2: #3e4943;
  --muted: #8a938e;
  --line: #e7eae8;

  --warn: #c98a12;
  --warn-bg: #fff6e0;
  --danger: #d8412f;
  --danger-bg: #fdecea;
  --info: #2d6cdf;
  --info-bg: #eaf1fe;

  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 20, .04), 0 8px 24px rgba(16, 24, 20, .04);
  --shadow-lg: 0 24px 60px rgba(16, 24, 20, .18);

  --sidebar-w: 264px;
  --font: "Proza Libre", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--g-700); text-decoration: none; }
a:hover { color: var(--g-600); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-sm { width: 16px; height: 16px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0 !important; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; padding: 16px; gap: 16px; }
.sidebar {
  width: var(--sidebar-w); flex: none; background: var(--surface-2); border-radius: var(--radius-lg);
  padding: 24px 0 18px; display: flex; flex-direction: column; position: sticky; top: 16px;
  height: calc(100vh - 32px); overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 26px 26px; color: var(--ink); }
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--g-700); color: var(--g-700);
}
.brand-mark span { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--g-700); }
.brand-name { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.brand-name small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; margin-top: -2px; }
.nav { flex: 1; overflow-y: auto; padding-bottom: 10px; scrollbar-width: thin; }
.nav-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 18px 26px 8px; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 26px; color: var(--muted);
  font-weight: 500; font-size: 15px; transition: color .15s;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); font-weight: 600; }
.nav a.active .i { color: var(--g-700); }
.nav a.active::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 0 6px 6px 0; background: var(--g-700);
}
.nav .badge-count { margin-left: auto; background: var(--g-800); color: #fff; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 6px; }
.sidebar-card {
  margin: 12px 16px 0; padding: 18px; border-radius: 18px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, var(--g-600) 0%, transparent 55%), linear-gradient(160deg, color-mix(in srgb, var(--g-900) 75%, #000) 0%, color-mix(in srgb, var(--g-900) 45%, #000) 100%);
}
.sidebar-card::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%;
  border: 22px solid color-mix(in srgb, var(--g-400) 16%, transparent);
}
.sidebar-card .sc-icon { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--g-800); display: grid; place-items: center; margin-bottom: 10px; }
.sidebar-card h4 { font-size: 17px; font-weight: 500; line-height: 1.25; }
.sidebar-card p { margin: 4px 0 14px; font-size: 12px; opacity: .75; }
.sidebar-card .btn { position: relative; z-index: 1; width: 100%; justify-content: center; background: var(--g-700); border-color: var(--g-700); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.topbar {
  display: flex; align-items: center; gap: 12px; background: var(--surface-2); border-radius: var(--radius-lg); padding: 14px 18px;
}
.icon-btn.menu-toggle { display: none; }
.search {
  flex: 0 1 360px; display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 999px; padding: 10px 14px; color: var(--muted);
}
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); }
.search kbd { font: 600 11px var(--font); background: var(--surface-2); border-radius: 6px; padding: 2px 7px; color: var(--ink-2); }
.topbar-spacer { flex: 1; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); display: grid; place-items: center;
  cursor: pointer; color: var(--ink); position: relative; transition: background .15s;
}
.icon-btn:hover { background: var(--g-50); }
.icon-btn .dot { position: absolute; top: 11px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }
.user-chip { display: flex; align-items: center; gap: 12px; padding-left: 6px; background: none; border: 0; cursor: pointer; text-align: left; position: relative; }
.avatar { position: relative;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: var(--g-800);
  background: linear-gradient(135deg, #f8d9c9, #f3b9a8); flex: none; overflow: hidden; font-size: 14px;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 36px; height: 36px; font-size: 12px; }
.avatar.g { background: linear-gradient(135deg, #cdeedd, #9fdcbc); }
.avatar.b { background: linear-gradient(135deg, #d9e4ff, #b5c9fb); color: #23408e; }
.avatar.y { background: linear-gradient(135deg, #fde9c3, #f8d38d); color: #7a4d00; }
.user-meta b { display: block; font-weight: 600; font-size: 15px; }
.user-meta span { color: var(--muted); font-size: 13px; }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 8px; z-index: 60; display: none;
}
.dropdown.open { display: block; animation: pop .15s ease-out; }
.dropdown a, .dropdown button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; font-weight: 500; text-align: left;
}
.dropdown a:hover, .dropdown button:hover { background: var(--g-50); color: var(--ink); }

.content { background: var(--surface-2); border-radius: var(--radius-lg); padding: 26px; flex: 1; position: relative; min-height: 60vh; }
.content.loading::after {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--g-500), transparent); background-size: 50% 100%; animation: bar 1s linear infinite;
}
@keyframes bar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page { animation: fadeIn .25s ease-out; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 36px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font-weight: 600; font-size: 14px;
  border: 1.5px solid var(--g-800); background: var(--g-800); color: #fff; cursor: pointer; transition: all .15s; white-space: nowrap; line-height: 1.2;
}
.btn:hover { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.btn-lg { padding: 14px 26px; font-size: 15px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-outline { background: transparent; color: var(--g-800); }
.btn-outline:hover { background: var(--g-50); color: var(--g-800); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--g-50); border-color: transparent; color: var(--ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #bf3222; border-color: #bf3222; }
.btn[disabled], .btn.busy { opacity: .6; pointer-events: none; }
.btn.busy::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.link-btn { background: none; border: 0; padding: 6px; border-radius: 8px; color: var(--ink-2); cursor: pointer; display: inline-grid; place-items: center; }
.link-btn:hover { background: var(--g-50); color: var(--g-800); }
.link-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
.circle-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; color: var(--ink); background: #fff; flex: none; }
.circle-btn:hover { background: var(--ink); color: #fff; }

/* ---------- Cards & grid ---------- */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-head h3 { font-size: 18px; font-weight: 600; }
.card-head .sub { color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { position: relative; overflow: hidden; }
.stat-title { font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stat-value { font-size: 46px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; margin: 16px 0 12px; }
.stat-foot { font-size: 12px; color: var(--g-600); display: flex; align-items: center; gap: 6px; }
.stat-foot .chip-mini { border: 1px solid currentColor; border-radius: 5px; padding: 0 4px; font-size: 10px; font-weight: 600; }
.stat.primary { color: #fff; background: radial-gradient(120% 120% at 100% 0%, #2e8b58 0%, transparent 60%), linear-gradient(145deg, #1a6a40, #0e4127); }
.stat.primary .stat-foot { color: #c6f3d9; }
.stat.primary .circle-btn { border-color: #fff; color: var(--g-800); }
.stat.primary .circle-btn:hover { background: var(--g-100); }
.stat.skeleton .stat-value { color: transparent; background: var(--line); border-radius: 10px; width: 60%; }

.dash-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "chart chart chart chart chart chart remind remind remind list list list"
    "team team team team team prog prog prog prog list list list"
    "team team team team team prog prog prog prog time time time";
}
.a-chart { grid-area: chart; } .a-remind { grid-area: remind; } .a-list { grid-area: list; }
.a-team { grid-area: team; } .a-prog { grid-area: prog; } .a-time { grid-area: time; }

/* Pill bar chart */
.pills { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; height: 170px; padding-top: 24px; }
.pill-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; min-width: 0; position: relative; }
.pill {
  width: 100%; max-width: 56px; border-radius: 999px; min-height: 22px; transition: height .6s cubic-bezier(.2,.8,.2,1);
  background: repeating-linear-gradient(135deg, #fff 0 4px, #8b9a91 4px 6px); border: 1.5px solid #8b9a91; position: relative;
}
.pill.s1 { background: var(--g-700); border-color: var(--g-700); }
.pill.s2 { background: var(--g-400); border-color: var(--g-400); }
.pill.s3 { background: var(--g-900); border-color: var(--g-900); }
.pill-col label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pill-tip {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; padding: 1px 7px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; white-space: nowrap;
}

/* Reminder */
.reminder h4 { font-size: 24px; color: var(--g-700); line-height: 1.2; font-weight: 600; margin-top: 6px; }
.reminder .when { color: var(--muted); margin: 8px 0 18px; }
.reminder .btn { width: 100%; justify-content: center; }

/* Mini list (Project list look) */
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mini-list li { display: flex; gap: 12px; align-items: center; }
.mini-list .ml-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.mini-list b { display: block; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list small { color: var(--muted); font-size: 11px; }
.mini-list .ml-body { min-width: 0; flex: 1; }

/* People list (Team collaboration look) */
.people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.people li { display: flex; align-items: center; gap: 12px; }
.people .p-body { flex: 1; min-width: 0; }
.people b { font-weight: 500; display: block; }
.people small { color: var(--muted); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.people small strong { color: var(--ink); font-weight: 600; }

/* Gauge */
.gauge { position: relative; width: 100%; max-width: 280px; margin: 6px auto 0; }
.gauge svg { width: 100%; display: block; }
.gauge-val { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.gauge-val b { font-size: 46px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.gauge-val span { display: block; color: var(--g-600); font-size: 12px; }
.legend { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.legend i.hatch { border-radius: 3px; background: repeating-linear-gradient(135deg, #fff 0 2px, #8b9a91 2px 4px); }

/* Time tracker look */
.tracker {
  color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px;
  background:
    repeating-radial-gradient(circle at 110% 120%, color-mix(in srgb, var(--g-400) 18%, transparent) 0 2px, transparent 2px 14px),
    radial-gradient(90% 90% at 90% 100%, var(--g-700) 0%, transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--g-900) 75%, #000) 0%, color-mix(in srgb, var(--g-900) 45%, #000) 100%);
}
.tracker h3 { font-size: 18px; font-weight: 500; }
.tracker .t-val { font-size: clamp(26px, 2.6vw, 40px); white-space: nowrap; font-weight: 600; letter-spacing: -.02em; text-align: center; font-variant-numeric: tabular-nums; }
.tracker .t-sub { text-align: center; font-size: 12px; opacity: .75; margin-top: -4px; }
.tracker .t-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 12px; }
.tracker .t-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--g-400), #bff0d4); border-radius: 99px; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.badge.ok { color: var(--g-600); background: var(--g-50); border-color: var(--g-100); }
.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: #f6e2b0; }
.badge.bad { color: var(--danger); background: var(--danger-bg); border-color: #f7cbc5; }
.badge.info { color: var(--info); background: var(--info-bg); border-color: #cddcfb; }
.badge.neutral { color: var(--ink-2); background: var(--surface-2); border-color: var(--line); }

/* ---------- Toolbar, filters, tables ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .search { flex: 1 1 260px; background: var(--surface-2); max-width: 420px; }
.toolbar .select, .toolbar .input { width: auto; min-width: 150px; flex: 0 1 190px; }
.table-wrap { overflow-x: auto; margin: 0 -22px; padding: 0 22px; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 640px; }
table.data th {
  text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface);
}
table.data th.sortable { cursor: pointer; user-select: none; }
table.data th.sortable:hover { color: var(--ink); }
table.data th.sorted-asc::after { content: " ↑"; } table.data th.sorted-desc::after { content: " ↓"; }
table.data td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr { transition: background .1s; }
table.data tbody tr:hover { background: var(--g-50); }
table.data td.actions { text-align: right; white-space: nowrap; width: 1%; }
table.data tfoot td { font-weight: 600; border-bottom: 0; }
.cell-person { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.cell-person b { font-weight: 600; display: block; }
.cell-person small { color: var(--muted); font-size: 12px; }
.empty { text-align: center; padding: 48px 12px; color: var(--muted); }
.empty .i { width: 40px; height: 40px; color: var(--g-300); margin-bottom: 8px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.pager-btns { display: flex; gap: 6px; }
.pager-btns button { min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.pager-btns button.on { background: var(--g-800); border-color: var(--g-800); color: #fff; }
.pager-btns button:disabled { opacity: .4; cursor: default; }
.skeleton-row td span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--line), #f4f6f5, var(--line)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--ink-2); }
.field label .req { color: var(--danger); }
.input, .select, textarea.input {
  width: 100%; border: 1.5px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 14px; outline: 0; transition: border .15s, box-shadow .15s;
  min-height: 44px;
}
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a938e' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.input:focus, .select:focus { border-color: var(--g-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-500) 12%, transparent); }
.field.has-error .input, .field.has-error .select { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; display: none; }
.field.has-error .field-error { display: block; }
.form-section { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-700); margin: 8px 0 -2px; grid-column: 1 / -1; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--g-700); }
.photo-pick { display: flex; align-items: center; gap: 14px; }
.photo-pick .avatar { width: 64px; height: 64px; font-size: 20px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(9, 20, 14, .45); backdrop-filter: blur(3px); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; animation: fadeIn .15s;
}
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 640px; box-shadow: var(--shadow-lg); animation: pop .2s ease-out; }
.modal.lg { max-width: 880px; } .modal.sm { max-width: 440px; } .modal.xl { max-width: 1180px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 0; }
.modal-head h3 { font-size: 20px; }
.modal-body { padding: 20px 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; flex-wrap: wrap; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 40px); }
.toast {
  display: flex; gap: 10px; align-items: flex-start; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 14px;
  box-shadow: var(--shadow-lg); min-width: 260px; max-width: 420px; animation: pop .2s; font-size: 14px;
}
.toast.ok .i { color: var(--g-300); } .toast.err { background: #3a1410; } .toast.err .i { color: #ff9c8f; }

/* ---------- Profile / detail ---------- */
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.profile-head .avatar { width: 84px; height: 84px; font-size: 26px; }
.profile-head h2 { font-size: 24px; }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; }
.dl div small { display: block; color: var(--muted); font-size: 12px; }
.dl div span { font-weight: 500; word-break: break-word; }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin: 18px 0 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 14px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--g-800); border-bottom-color: var(--g-700); }
.summary-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.summary-row .card { padding: 16px 18px; box-shadow: none; border: 1px solid var(--line); }
.summary-row small { color: var(--muted); display: block; }
.summary-row b { font-size: 22px; letter-spacing: -.02em; }
.split { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.select-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.select-list li { padding: 12px 14px; border-radius: 12px; cursor: pointer; border: 1px solid transparent; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.select-list li:hover { background: var(--g-50); }
.select-list li.on { background: var(--g-50); border-color: var(--g-100); }
.select-list li b { font-weight: 600; display: block; }
.select-list li small { color: var(--muted); }

/* ---------- Auth pages ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; padding: 16px; gap: 16px; }
.auth-art {
  border-radius: var(--radius-lg); color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  background: repeating-radial-gradient(circle at 100% 110%, color-mix(in srgb, var(--g-400) 16%, transparent) 0 2px, transparent 2px 18px), radial-gradient(80% 70% at 85% 100%, var(--g-700) 0%, transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--g-900) 75%, #000) 0%, color-mix(in srgb, var(--g-900) 45%, #000) 100%);
}
.auth-art .brand { padding: 0; color: #fff; }
.auth-art .brand-mark, .auth-art .brand-mark span { border-color: #fff; }
.auth-art h2 { font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.03em; max-width: 480px; }
.auth-art p { opacity: .75; max-width: 440px; font-size: 15px; }
.auth-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.auth-stats div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px 18px; min-width: 130px; }
.auth-stats b { display: block; font-size: 22px; }
.auth-stats small { opacity: .7; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-box { width: 100%; max-width: 420px; }
.auth-box h1 { font-size: 34px; letter-spacing: -.03em; }
.auth-box .lead { color: var(--muted); margin: 8px 0 28px; }
.auth-box .field { margin-bottom: 16px; }
.auth-box .btn { width: 100%; justify-content: center; }
.auth-alert { background: var(--danger-bg); color: var(--danger); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; display: none; }
.pw-wrap { position: relative; }
.pw-wrap .link-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* ---------- Report card ---------- */
.report { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; }
.report-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px dashed var(--line); padding-bottom: 14px; margin-bottom: 14px; }
@media print {
  body { background: #fff; }
  .sidebar, .topbar, .page-head .page-actions, .toolbar, .no-print, .toasts { display: none !important; }
  .app { padding: 0; } .content { padding: 0; background: #fff; }
  .card { box-shadow: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1360px) {
  .dash-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "chart chart chart chart remind remind"
      "list list list prog prog prog"
      "team team team team time time";
  }
}
@media (max-width: 1100px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; z-index: 90;
    transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--shadow-lg); background: var(--surface);
  }
  body.nav-open .sidebar { transform: none; }
  /* the dimmer lives inside .app (a stacking context, z-index 1) next to the drawer (90) – on body it covered the drawer
     too, so the menu could not be tapped */
  body.nav-open .app::after { content: ""; position: fixed; inset: 0; background: rgba(9,20,14,.4); z-index: 80; }
  .icon-btn.menu-toggle { display: grid; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { padding: 10px; gap: 10px; }
  .content { padding: 18px 16px; border-radius: 18px; }
  .topbar { padding: 10px 12px; border-radius: 18px; gap: 8px; }
  .topbar .search { display: none; }
  .user-meta { display: none; }
  .icon-btn { width: 40px; height: 40px; }
  .page-head h1 { font-size: 28px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }
  .stat-value { font-size: 36px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "chart" "remind" "prog" "list" "team" "time"; }
  .form-grid, .form-grid.cols-3, .dl, .summary-row { grid-template-columns: minmax(0, 1fr); }
  .toolbar .select, .toolbar .input { flex: 1 1 140px; min-width: 0; }
  .hide-sm { display: none !important; }
  .card { padding: 18px; border-radius: 18px; }
  .table-wrap { margin: 0 -18px; padding: 0 18px; }
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { border-radius: 22px 22px 0 0; max-height: 92vh; overflow-y: auto; }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .pills { gap: 6px; }
}
/* the period card stays on laptop screens (the menu above it scrolls); only very short windows drop it */
@media (min-width: 1101px) and (max-height: 600px) {
  .sidebar-card { display: none; }
}

/* ==========================================================================
   Collapsible sidebar groups
   ========================================================================== */
.nav-group { margin-bottom: 2px; }
.nav-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 16px 26px 6px; }
.nav-toggle:hover { color: var(--ink); }
.nav-toggle .chev { transition: transform .2s; opacity: .7; }
.nav-group.collapsed .chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-items { display: none; }
.nav-hint { margin: 12px 20px 0; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); color: #7a5a0f; font-size: 12px; line-height: 1.4; }
.nav-hint a { color: #7a5a0f; text-decoration: underline; }

/* ==========================================================================
   Living background: soft mesh gradients, flowing contour swirls and
   floating blobs. Purely decorative – sits behind everything, never
   intercepts clicks, and stops moving for users who prefer reduced motion.
   ========================================================================== */
body {
  background:
    radial-gradient(1200px 600px at 110% -10%, color-mix(in srgb, var(--g-400) 16%, transparent), transparent 60%),
    radial-gradient(900px 520px at -10% 110%, rgba(30, 122, 74, .12), transparent 60%),
    radial-gradient(700px 400px at 60% 50%, rgba(255, 214, 170, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.bg-art { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-art svg { position: absolute; }
.bg-art .swirl-a { right: -160px; top: -120px; width: 820px; opacity: .55; animation: drift 38s ease-in-out infinite alternate; }
.bg-art .swirl-b { left: -220px; bottom: -200px; width: 900px; opacity: .45; animation: drift 46s ease-in-out infinite alternate-reverse; }
.bg-art .dots { right: 6%; bottom: 8%; width: 220px; opacity: .5; }
.bg-art .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .35; animation: float 24s ease-in-out infinite alternate; }
.bg-art .blob.b1 { width: 360px; height: 360px; right: 18%; top: 30%; background: #9fe3bf; }
.bg-art .blob.b2 { width: 280px; height: 280px; left: 22%; top: -80px; background: #ffe0b8; animation-duration: 30s; }
.bg-art .blob.b3 { width: 320px; height: 320px; left: 40%; bottom: -120px; background: #bfe9d4; animation-duration: 34s; }
@keyframes drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(-40px, 30px) rotate(8deg); } }
@keyframes float { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.12); } }
.app, .auth { position: relative; z-index: 1; }

/* translucent, glassy surfaces so the art glows through */
.sidebar, .topbar, .content { background: rgba(247, 248, 247, .78); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, .6); }
.card { border: 1px solid rgba(231, 234, 232, .7); }

/* page header flourish */
.content::before {
  content: ""; position: absolute; right: 0; top: 0; width: 420px; height: 220px; border-top-right-radius: var(--radius-lg); pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 220' fill='none' stroke='%232a9660' stroke-width='1.2'%3E%3Cpath opacity='.18' d='M420 20C330 40 300 110 220 120S80 90 0 150'/%3E%3Cpath opacity='.14' d='M420 50C340 70 310 140 230 150S90 120 10 180'/%3E%3Cpath opacity='.10' d='M420 80C350 100 320 170 240 180S100 150 20 210'/%3E%3Ccircle cx='360' cy='60' r='36' opacity='.12'/%3E%3Ccircle cx='360' cy='60' r='56' opacity='.08'/%3E%3C/svg%3E") no-repeat right top / contain;
}
.content > * { position: relative; }

/* stat cards: soft contour lines in the corner */
.stat::after {
  content: ""; position: absolute; right: -30px; bottom: -40px; width: 170px; height: 170px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%231e7a4a' stroke-width='1'%3E%3Ccircle cx='50' cy='50' r='18' opacity='.14'/%3E%3Ccircle cx='50' cy='50' r='30' opacity='.10'/%3E%3Ccircle cx='50' cy='50' r='42' opacity='.07'/%3E%3C/svg%3E") no-repeat center / contain;
}
.stat.primary::after { filter: brightness(3); opacity: .5; }
.card:hover { box-shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 14px 34px rgba(16, 24, 20, .07); transition: box-shadow .2s; }

/* login art: animated flowing lines */
.auth-art .flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.auth-art .flow path { stroke-dasharray: 6 10; animation: dash 18s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -400; } }
.auth-art > *:not(.flow) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .bg-art *, .auth-art .flow path { animation: none !important; }
}
@media (max-width: 760px) {
  .bg-art .swirl-a { width: 520px; } .bg-art .swirl-b { width: 560px; } .bg-art .dots { display: none; }
  .content::before { width: 240px; height: 130px; }
}
@media print { .bg-art { display: none; } .sidebar, .topbar, .content { backdrop-filter: none; } }

/* ==========================================================================
   Colour pass (v2.2) – multicolour accents so the app is not all green.
   Green stays the brand colour for primary buttons; everything else gets a palette.
   ========================================================================== */
:root {
  --c-violet: var(--g-600); --c-violet-bg: var(--g-50);   /* was purple: follows the Branding colour */
  --c-sky:    #2f9be8; --c-sky-bg:    #e8f4fe;
  --c-amber:  #f5a524; --c-amber-bg:  #fff4e0;
  --c-coral:  #f26b5b; --c-coral-bg:  #feeeec;
  --c-pink:   #ec4899; --c-pink-bg:   #fdebf4;
  --c-teal:   #14b8a6; --c-teal-bg:   #e3f8f5;
  --c-green:  var(--g-500); --c-green-bg:  #e6f5ed;
}

/* page background: soft multicolour mesh instead of green haze */
body {
  background:
    radial-gradient(760px 480px at 105% -5%, color-mix(in srgb, var(--g-600) 12%, transparent), transparent 60%),
    radial-gradient(820px 520px at -10% 108%, rgba(47, 155, 232, .12), transparent 60%),
    radial-gradient(600px 420px at 55% 55%, rgba(245, 165, 36, .08), transparent 70%),
    radial-gradient(520px 360px at 20% 20%, rgba(236, 72, 153, .06), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
.bg-art .blob.b1 { background: var(--g-300); }
.bg-art .blob.b2 { background: #ffd9a8; }
.bg-art .blob.b3 { background: #b9e1ff; }
.bg-art .blob.b4 { width: 260px; height: 260px; left: 6%; top: 45%; background: #ffc2dc; animation-duration: 28s; }
.bg-art .swirl-a { opacity: .75; } .bg-art .swirl-b { opacity: .65; } .bg-art .dots { opacity: .7; }

/* floating school doodles and numbers */
.bg-art .doodle { width: 64px; height: 64px; opacity: .30; animation: bob 14s ease-in-out infinite alternate; }
.bg-art .d-book   { left: 3%;   top: 14%; width: 78px; height: 78px; transform: rotate(-12deg); }
.bg-art .d-pencil { right: 4%;  top: 44%; width: 70px; height: 70px; animation-duration: 17s; }
.bg-art .d-globe  { left: 46%;  top: 3%;  width: 72px; height: 72px; animation-duration: 19s; }
.bg-art .d-stetho { right: 22%; bottom: 5%; width: 76px; height: 76px; animation-duration: 16s; }
.bg-art .d-atom   { left: 30%;  bottom: 8%; animation-duration: 21s; }
.bg-art .d-flask  { right: 36%; top: 10%; width: 58px; height: 58px; animation-duration: 15s; }
.bg-art .d-bulb   { left: 12%;  bottom: 22%; width: 60px; height: 60px; animation-duration: 18s; }
.bg-art .d-ruler  { right: 10%; top: 12%; width: 60px; height: 60px; animation-duration: 20s; }
.bg-art .d-cap    { left: 62%;  bottom: 16%; width: 70px; height: 70px; animation-duration: 22s; }
.bg-art .d-calc   { left: 22%;  top: 34%; width: 52px; height: 52px; opacity: .22; animation-duration: 23s; }
.bg-art .d-abc    { right: 3%;  bottom: 26%; width: 62px; height: 62px; animation-duration: 18s; }
.bg-art .num { position: absolute; font-weight: 800; line-height: 1; opacity: .22; font-family: Georgia, "Times New Roman", serif; animation: bob 16s ease-in-out infinite alternate; user-select: none; }
.bg-art .n1  { left: 8%;  top: 40%; font-size: 64px; color: var(--c-sky); }
.bg-art .n2  { left: 38%; top: 20%; font-size: 44px; color: var(--c-pink); animation-duration: 19s; }
.bg-art .n3  { right: 28%; top: 30%; font-size: 56px; color: var(--c-amber); animation-duration: 13s; }
.bg-art .n4  { left: 54%; top: 46%; font-size: 48px; color: var(--c-teal); }
.bg-art .n5  { right: 14%; top: 64%; font-size: 60px; color: var(--c-violet); animation-duration: 21s; }
.bg-art .n6  { left: 4%;  bottom: 6%; font-size: 58px; color: var(--c-coral); animation-duration: 17s; }
.bg-art .n7  { left: 70%; top: 6%;  font-size: 40px; color: var(--c-green); }
.bg-art .n8  { left: 44%; bottom: 3%; font-size: 52px; color: var(--c-violet); animation-duration: 15s; }
.bg-art .n9  { right: 44%; bottom: 30%; font-size: 46px; color: var(--c-sky); animation-duration: 20s; }
.bg-art .n10 { right: 6%; top: 3%; font-size: 42px; color: var(--c-pink); }
.bg-art .n11 { left: 18%; top: 6%; font-size: 40px; color: var(--c-amber); animation-duration: 18s; }
.bg-art .n12 { left: 84%; bottom: 10%; font-size: 40px; color: var(--c-teal); animation-duration: 22s; }
@keyframes bob { from { translate: 0 0; rotate: -4deg; } to { translate: 12px -18px; rotate: 6deg; } }

/* sidebar: each menu group gets its own accent colour */
.nav-group { --acc: var(--c-green); }
.nav-group[data-group="Menu"]          { --acc: var(--c-violet); }
.nav-group[data-group="Results"]       { --acc: var(--c-amber); }
.nav-group[data-group="Teaching"]      { --acc: var(--c-sky); }
.nav-group[data-group="Formative Assessment"] { --acc: var(--g-700); }
.nav-group[data-group="Brain Games"] { --acc: var(--c-amber); }
.nav-group[data-group="Academics"]     { --acc: var(--c-teal); }
.nav-group[data-group="Finance"]       { --acc: var(--c-green); }
.nav-group[data-group="Operations"]    { --acc: var(--c-coral); }
.nav-group[data-group="Welfare"]       { --acc: var(--c-pink); }
.nav-group[data-group="Campus"]        { --acc: #0ea5e9; }
.nav-group[data-group="School life"]   { --acc: var(--g-600); }
.nav-group[data-group="Communication"] { --acc: #f97316; }
.nav-group[data-group="Administration"]{ --acc: #64748b; }
.nav-group .nav-label { color: var(--acc); opacity: .9; }
.nav-group .nav-items a .i { color: var(--acc); opacity: .75; }
.nav-group .nav-items a:hover .i, .nav-group .nav-items a.active .i { opacity: 1; color: var(--acc); }
.nav-group .nav-items a.active::before { background: var(--acc); }
.nav-group .nav-items a.active { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 12%, transparent), transparent 80%); }
.brand-mark { border-color: var(--c-violet); color: var(--c-violet); }
.brand-mark span { border-color: var(--c-amber); }
.sidebar-card { background: radial-gradient(120% 90% at 100% 0%, var(--g-500) 0%, transparent 55%), linear-gradient(160deg, var(--g-900) 0%, color-mix(in srgb, var(--g-900) 55%, #000) 100%); }
.sidebar-card::after { border-color: rgba(245, 165, 36, .22); }
.sidebar-card .btn { background: var(--c-amber); border-color: var(--c-amber); color: #1f1300; }

/* stat cards: rotate through the palette */
.stats > .stat:nth-child(4n+1) { --acc: var(--c-violet); --acc-bg: var(--c-violet-bg); }
.stats > .stat:nth-child(4n+2) { --acc: var(--c-sky);    --acc-bg: var(--c-sky-bg); }
.stats > .stat:nth-child(4n+3) { --acc: var(--c-amber);  --acc-bg: var(--c-amber-bg); }
.stats > .stat:nth-child(4n+4) { --acc: var(--c-coral);  --acc-bg: var(--c-coral-bg); }
.stat { border-top: 4px solid var(--acc, var(--c-green)); }
.stat:not(.primary) .stat-foot { color: var(--acc, var(--c-green)); }
.stat:not(.primary) .circle-btn { border-color: var(--acc, var(--c-green)); color: var(--acc, var(--c-green)); }
.stat.primary { border-top-color: transparent; background: radial-gradient(120% 120% at 100% 0%, var(--g-400) 0%, transparent 60%), linear-gradient(145deg, var(--g-600), var(--g-900)); }
.stat.primary .stat-foot { color: var(--g-100); }
.stat::after { filter: hue-rotate(var(--hue, 0deg)); }
.stats > .stat:nth-child(4n+2)::after { --hue: 150deg; } .stats > .stat:nth-child(4n+3)::after { --hue: -110deg; } .stats > .stat:nth-child(4n+4)::after { --hue: -150deg; }

/* card headings get a small coloured marker, cycling through the palette */
.card-head h3 { display: inline-flex; align-items: center; gap: 10px; }
.card-head h3::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c-violet); transform: rotate(45deg); flex: none; }
.grid > .card:nth-child(5n+2) .card-head h3::before { background: var(--c-sky); }
.grid > .card:nth-child(5n+3) .card-head h3::before { background: var(--c-amber); }
.grid > .card:nth-child(5n+4) .card-head h3::before { background: var(--c-pink); }
.grid > .card:nth-child(5n+5) .card-head h3::before { background: var(--c-teal); }

/* tabs, table hover, badges, links */
.tabs button.on { color: var(--c-violet); border-color: var(--c-violet); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--g-600) 5%, transparent); }
.badge.info { color: var(--c-sky); background: var(--c-sky-bg); border-color: #cfe7fb; }
.badge.warn { color: #b86e00; background: var(--c-amber-bg); }
a { color: var(--g-700); } a:hover { color: var(--g-600); }
.btn-outline { color: var(--g-700); border-color: var(--g-700); } .btn-outline:hover { background: var(--g-50); color: var(--g-800); }
.form-section { color: var(--c-violet); }
.input:focus, .select:focus { border-color: var(--c-violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-600) 14%, transparent); }
.empty .i { color: var(--c-sky); }
.tracker .t-bar span { background: linear-gradient(90deg, var(--c-violet), var(--c-sky)); }
.content::before { filter: hue-rotate(115deg) saturate(1.4); }

@media (max-width: 760px) {
  .bg-art .doodle { width: 44px !important; height: 44px !important; opacity: .22; }
  .bg-art .num { font-size: 34px !important; }
  .bg-art .d-calc, .bg-art .d-abc, .bg-art .n9, .bg-art .n12, .bg-art .n4 { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bg-art .doodle, .bg-art .num { animation: none !important; } }
/* let the doodles show through the glass panels */
.sidebar, .topbar, .content { background: rgba(250, 250, 252, .58); backdrop-filter: blur(3px) saturate(1.15); -webkit-backdrop-filter: blur(3px) saturate(1.15); }
.bg-art .doodle { opacity: .42; } .bg-art .num { opacity: .30; }
.sidebar, .topbar, .content { background: rgba(250, 250, 252, .5); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.bg-art .doodle { opacity: .5; } .bg-art .num { opacity: .34; }

/* ==========================================================================
   Help centre & in-app guides (v2.3)
   ========================================================================== */
.help-btn .help-q { font-weight: 800; font-size: 19px; line-height: 1; color: var(--c-violet); }
.help-btn:hover { background: var(--c-violet-bg); }

/* group accents (same palette as the sidebar groups) */
[data-group] { --acc: var(--c-green); --acc-bg: var(--c-green-bg); }
[data-group="Start here"]    { --acc: var(--c-violet); --acc-bg: var(--c-violet-bg); }
[data-group="Menu"]          { --acc: var(--c-violet); --acc-bg: var(--c-violet-bg); }
[data-group="Results"]       { --acc: var(--c-amber);  --acc-bg: var(--c-amber-bg); }
[data-group="Teaching"]      { --acc: var(--c-sky);    --acc-bg: var(--c-sky-bg); }
[data-group="Formative Assessment"] { --acc: var(--g-700); --acc-bg: var(--g-50); }
[data-group="Brain Games"] { --acc: var(--c-amber); --acc-bg: var(--c-amber-bg); }
[data-group="Academics"]     { --acc: var(--c-teal);   --acc-bg: var(--c-teal-bg); }
[data-group="Finance"]       { --acc: var(--c-green);  --acc-bg: var(--c-green-bg); }
[data-group="Operations"]    { --acc: var(--c-coral);  --acc-bg: var(--c-coral-bg); }
[data-group="Welfare"]       { --acc: var(--c-pink);   --acc-bg: var(--c-pink-bg); }
[data-group="Campus"]        { --acc: #0ea5e9; --acc-bg: #e0f4fd; }
[data-group="School life"]   { --acc: var(--g-600); --acc-bg: var(--g-50); }
[data-group="Communication"] { --acc: #f97316; --acc-bg: #fff0e5; }
[data-group="Administration"]{ --acc: #64748b; --acc-bg: #eef1f5; }
[data-group="More guides"]   { --acc: var(--c-teal);   --acc-bg: var(--c-teal-bg); }

/* hero */
.help-hero {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 30px 32px; margin-bottom: 26px; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: center;
  background: radial-gradient(90% 120% at 100% 0%, var(--g-400) 0%, transparent 60%), radial-gradient(70% 90% at 0% 100%, color-mix(in srgb, var(--g-300) 55%, transparent) 0%, transparent 60%), linear-gradient(140deg, var(--g-700), var(--g-900));
}
.help-hero .crumbs, .help-hero .crumbs a { color: rgba(255,255,255,.75); }
.help-hero h1 { font-size: 38px; letter-spacing: -.03em; line-height: 1.1; }
.help-hero p { margin: 10px 0 18px; max-width: 640px; opacity: .85; font-size: 15px; }
.help-search { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 6px 6px 16px; max-width: 620px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.help-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px; padding: 8px 0; }
.help-search .btn { flex: none; }
.help-search.inline { box-shadow: none; border: 1.5px solid var(--line); max-width: none; margin-bottom: 8px; }
.help-search.inline:focus-within { border-color: var(--c-violet); }
.help-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: 13px; opacity: .9; }
.help-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.help-hero-meta kbd, .help-doc kbd { font: 700 12px var(--font); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 1px 7px; }
.help-hero-art { position: relative; height: 170px; }
.help-hero-art .hb { position: absolute; width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); animation: bob 12s ease-in-out infinite alternate; }
.help-hero-art .hb .i { width: 28px; height: 28px; }
.help-hero-art .hb1 { left: 10px; top: 8px; color: #ffd98a; }
.help-hero-art .hb2 { right: 8px; top: 30px; width: 76px; height: 76px; color: #fff; animation-duration: 15s; }
.help-hero-art .hb2 .i { width: 36px; height: 36px; }
.help-hero-art .hb3 { left: 40px; bottom: 6px; color: #9fe3bf; animation-duration: 17s; }
.help-hero-art .hb4 { right: 70px; bottom: 0; width: 48px; height: 48px; color: #ffc2dc; animation-duration: 13s; }

/* groups and cards */
.help-group { margin-bottom: 26px; }
.help-h { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 12px; }
.help-h small { font-size: 12px; font-weight: 500; color: var(--muted); }
.help-dot { width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg); background: var(--acc); flex: none; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.help-card {
  background: var(--surface); border-radius: var(--radius); padding: 16px 16px 14px; border: 1px solid var(--line); border-top: 4px solid var(--acc);
  display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.help-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16, 24, 20, .09); }
.help-card-top { display: flex; gap: 12px; align-items: flex-start; }
.help-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--acc-bg, var(--c-violet-bg)); color: var(--acc, var(--c-violet)); }
.help-ic.lg { width: 46px; height: 46px; border-radius: 14px; vertical-align: middle; margin-right: 12px; display: inline-grid; }
.help-card h3 { font-size: 16px; line-height: 1.3; }
.help-card h3 a { color: var(--ink); }
.help-card h3 a:hover { color: var(--acc); }
.help-card p { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.help-card-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.help-card-foot .btn:not(.btn-outline) { background: var(--acc); border-color: var(--acc); }
.help-card-foot .btn:not(.btn-outline):hover { filter: brightness(.92); }
.help-card-foot .btn-outline { color: var(--ink-2); border-color: var(--line); }
.help-card-foot .btn-outline:hover { background: var(--acc-bg); color: var(--ink); border-color: var(--acc); }
.help-group.start .help-card { background: linear-gradient(160deg, var(--surface) 55%, var(--acc-bg)); }
.help-group.start .help-card:nth-child(2) { --acc: var(--c-sky); --acc-bg: var(--c-sky-bg); }
.help-group.start .help-card:nth-child(3) { --acc: var(--c-amber); --acc-bg: var(--c-amber-bg); }
.help-group.start .help-card:nth-child(4) { --acc: var(--c-coral); --acc-bg: var(--c-coral-bg); }
.help-card.locked { opacity: .62; filter: grayscale(.85); }
.help-card.locked:hover { opacity: .85; }
.help-card.missing .help-card-body p { color: var(--muted); }
.help-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); line-height: 1.3; }
.help-lock.pill { background: var(--warn-bg); color: #7a5a0f; border-radius: 999px; padding: 9px 14px; font-weight: 600; }
.help-note { display: flex; gap: 8px; align-items: flex-start; background: var(--warn-bg); color: #7a5a0f; border-radius: 14px; padding: 12px 14px; font-size: 13px; margin: -8px 0 22px; }

/* guide page */
.help-page .page-head h1 { display: flex; align-items: center; }
.help-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: 13px; }
.help-meta span { display: inline-flex; align-items: center; gap: 6px; }
.help-meta .badge.info { color: var(--acc); background: var(--acc-bg); border-color: transparent; }
.help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
.help-layout.no-nav { grid-template-columns: minmax(0, 1fr) 210px; }
.help-nav, .help-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
.help-nav details { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); padding: 6px 6px 10px; }
.help-nav summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 8px 10px; font-size: 13px; }
.help-nav summary::-webkit-details-marker { display: none; }
.help-nav-home { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.help-nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--acc, var(--muted)); font-weight: 700; padding: 12px 10px 4px; }
.help-nav-group a { display: block; padding: 5px 10px 5px 12px; border-radius: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.35; border-left: 3px solid transparent; }
.help-nav-group a:hover, .help-nav-home:hover { background: var(--acc-bg, var(--g-50)); color: var(--ink); }
.help-nav-group a.on { background: var(--acc-bg); color: var(--ink); font-weight: 700; border-left-color: var(--acc); }
.help-nav-group a.missing { color: var(--muted); }
.help-nav-group a.locked::after { content: " \1F512"; font-size: 10px; opacity: .6; }
.help-toc-inner { border-left: 2px solid var(--line); padding: 2px 0 4px; }
.help-toc .help-nav-label { color: var(--muted); padding: 2px 14px 6px; }
.help-toc a { display: block; padding: 4px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--muted); font-size: 13px; line-height: 1.35; }
.help-toc a.lvl3 { padding-left: 26px; font-size: 12px; }
.help-toc a:hover { color: var(--ink); }
.help-toc a.on { color: var(--acc); border-left-color: var(--acc); font-weight: 600; }
.help-toc .help-top { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; }
.help-toc .help-top .i { transform: rotate(-90deg); }
.help-print-title { display: none; }

/* rendered markdown */
.help-doc { padding: 28px 34px; font-size: 15px; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.help-doc > :first-child, .help-doc > .help-print-title + * { margin-top: 0; }
.help-doc h1, .help-doc h2, .help-doc h3, .help-doc h4 { color: var(--ink); scroll-margin-top: 18px; position: relative; }
.help-doc h2 { font-size: 23px; margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.help-doc h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); background: var(--acc, var(--c-violet)); flex: none; }
.help-doc h3 { font-size: 18px; margin: 26px 0 8px; }
.help-doc h4 { font-size: 15px; margin: 20px 0 6px; }
.help-doc .anchor { margin-left: 8px; color: var(--line); font-weight: 400; opacity: 0; transition: opacity .15s; text-decoration: none; }
.help-doc h2:hover .anchor, .help-doc h3:hover .anchor, .help-doc h4:hover .anchor { opacity: 1; color: var(--muted); }
.help-doc p { margin: 0 0 14px; }
.help-doc ul, .help-doc ol { margin: 0 0 14px; padding-left: 24px; }
.help-doc li { margin: 4px 0; }
.help-doc li > ul, .help-doc li > ol { margin: 4px 0 6px; }
.help-doc ol > li::marker { color: var(--acc, var(--c-violet)); font-weight: 700; }
.help-doc ul > li::marker { color: var(--acc, var(--c-violet)); }
.help-doc strong { color: var(--ink); font-weight: 700; }
.help-doc a { color: var(--g-700); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--g-700) 30%, transparent); text-underline-offset: 3px; }
.help-doc a:hover { text-decoration-color: currentColor; }
.help-doc a.ext::after { content: " \2197"; font-size: .8em; }
.help-doc a.anchor { text-decoration: none; }
.help-doc code { font: 500 .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--g-50); color: var(--g-800); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.help-doc pre.code { background: color-mix(in srgb, var(--g-900) 60%, #000); color: #eef2ef; border-radius: 14px; padding: 16px 18px; overflow-x: auto; margin: 0 0 16px; line-height: 1.55; }
.help-doc pre.code code { background: none; color: inherit; padding: 0; font-size: 13px; overflow-wrap: normal; }
.help-doc hr { border: 0; border-top: 1px dashed var(--line); margin: 26px 0; }
.help-doc .table-scroll { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 14px; }
.help-doc table.md-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.help-doc table.md-table th { background: var(--surface-2); text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.help-doc table.md-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.help-doc table.md-table tr:last-child td { border-bottom: 0; }
.help-doc table.md-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--g-600) 3%, transparent); }
.help-doc table.md-table td:first-child { color: var(--ink); font-weight: 600; }
.callout { display: flex; gap: 12px; align-items: flex-start; border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; border-left: 5px solid var(--ck, var(--muted)); background: var(--ck-bg, var(--surface-2)); }
.callout .callout-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #fff; color: var(--ck, var(--muted)); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.callout .callout-body { flex: 1; min-width: 0; }
.callout .callout-body > :last-child { margin-bottom: 0; }
.callout .callout-body > :first-child strong:first-child { color: var(--ck, var(--ink)); }
.callout.tip { --ck: var(--c-green); --ck-bg: var(--c-green-bg); }
.callout.note { --ck: var(--c-sky); --ck-bg: var(--c-sky-bg); }
.callout.important { --ck: var(--c-coral); --ck-bg: var(--c-coral-bg); }
.callout.quote { --ck: var(--c-violet); --ck-bg: var(--c-violet-bg); }
.help-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.help-pager a { display: block; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; }
.help-pager a:hover { border-color: var(--acc, var(--c-violet)); background: var(--acc-bg, var(--c-violet-bg)); }
.help-pager a small { display: block; color: var(--muted); font-size: 12px; }
.help-pager a b { font-weight: 600; }
.help-pager .next { text-align: right; grid-column: 2; }

/* search results */
.help-results { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.help-results li { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.help-results li:last-child { border-bottom: 0; }
.help-result-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.help-result-title:hover { color: var(--acc); }
.help-result-path { font-size: 12px; color: var(--acc); font-weight: 600; margin: 2px 0 4px; }
.help-results p { margin: 0; color: var(--ink-2); font-size: 14px; }
mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 2px; }

@media (max-width: 1360px) {
  .help-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .help-layout.no-nav { grid-template-columns: minmax(0, 1fr); }
  .help-toc { display: none; }
}
@media (max-width: 1100px) {
  .help-layout, .help-layout.no-nav { grid-template-columns: minmax(0, 1fr); }
  .help-nav { position: static; max-height: none; }
  .help-nav details:not([open]) { padding-bottom: 6px; }
  .help-nav-inner { max-height: 50vh; overflow-y: auto; }
}
@media (max-width: 760px) {
  .help-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .help-hero-art { display: none; }
  .help-hero h1 { font-size: 30px; }
  .help-search { padding-left: 12px; }
  .help-search .btn { padding: 7px 12px; }
  .help-doc { padding: 20px 18px; font-size: 14.5px; }
  .help-doc h2 { font-size: 20px; }
  .help-pager { grid-template-columns: minmax(0, 1fr); }
  .help-pager .next { grid-column: 1; }
  .help-page .page-head h1 { font-size: 26px; }
  .help-ic.lg { width: 38px; height: 38px; }
}
@media print {
  .help-layout { display: block; }
  .help-doc { box-shadow: none; border: 0; padding: 0; font-size: 12pt; }
  .help-print-title { display: block; font-size: 24pt; margin-bottom: 12px; }
  .help-doc .anchor { display: none; }
  .help-doc a.ext::after { content: " (" attr(href) ")"; font-size: 9pt; color: var(--muted); }
  .callout, .help-doc pre.code { break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) { .help-hero-art .hb { animation: none; } .help-card:hover { transform: none; } }

/* ---------- KPI rows inside panels (CBT test detail: overview, live monitor, results) ----------
   Equal columns for however many cards the row has (--n), 2 per row on small screens; one value size; label on top. */
.summary-row.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .summary-row.kpis { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } }
.summary-row.kpis .card { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 86px; margin: 0; }
.summary-row.kpis small { font-size: 12px; font-weight: 600; }
.summary-row.kpis b { display: flex; align-items: center; gap: 4px; min-height: 30px; font-size: 22px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-row.kpis b small { display: inline; font-size: 13px; font-weight: 500; }
.summary-row.kpis b .badge { font-size: 12px; }

/* stat value that holds a badge (e.g. "Frozen – ready"): same height as a number so the row lines up */
.stats > .stat .stat-value.badge-value { display: flex; align-items: center; min-height: 1.1em; }
.stats > .stat .stat-value.badge-value .badge { font-size: 13px; letter-spacing: 0; }

/* ==========================================================================
   Restored UI rules (v2.11) – re-applied on top of the v2.3 help-centre stylesheet
   ========================================================================== */

/* readable menu: solid white sidebar, bold dark-grey text AND icons (light on a dark sidebar – see /theme/css) */
:root { --menu-ink: #333333; }
.sidebar { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--line); }
.nav a, .nav a:hover, .nav a.active { color: var(--menu-ink); font-weight: 700; opacity: 1; }
.nav-label, .nav-toggle, .nav-toggle:hover, .nav-group .nav-label { color: var(--menu-ink); font-weight: 700; opacity: 1; }
.sidebar .nav .i, .sidebar .nav a .i, .sidebar .nav a:hover .i, .sidebar .nav a.active .i,
.nav-group .nav-items a .i, .nav-group .nav-items a:hover .i, .nav-group .nav-items a.active .i,
.sidebar .nav-toggle .chev { color: var(--menu-ink); opacity: 1; }
.sidebar .brand-name, .sidebar .brand-name small { color: var(--menu-ink); }
.auth-art .brand-name, .auth-art .brand-name small { color: #fff; }

/* top bar above the page: topbar and content both use backdrop-filter (own stacking contexts), so the user dropdown
   was painted under the content. Below the mobile menu overlay (80), drawer (90), modals (100) and toasts (200). */
.topbar { position: relative; z-index: 75; }
.dropdown { z-index: 1000; }

/* toggle switch (use for yes/no instead of a dropdown) */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #c9cfcc; transition: background .2s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input:checked ~ .switch-track { background: var(--g-600); }
.switch input:checked ~ .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--g-600); outline-offset: 2px; }
.switch input:disabled ~ .switch-track { opacity: .5; cursor: not-allowed; }
.switch-text { font-weight: 600; min-width: 24px; }
/* switch field (FormUi.Switch): settings row – title + description left, caption + toggle right */
.switch-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .15s; }
.switch-field:hover { border-color: #d3d8d5; }
.switch-field:focus-within { border-color: var(--g-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-600) 14%, transparent); }
.switch-copy { min-width: 0; }
.field .switch-copy label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.switch-copy small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.field label.switch { display: inline-flex; flex: none; margin: 0; font-size: 13px; color: var(--ink-2); }
.switch-field .switch-text { text-align: right; white-space: nowrap; }
.switch-field .field-error { flex-basis: 100%; }
@media (max-width: 480px) { .switch-field { flex-wrap: wrap; } }

/* toolbar search = a normal text box, not a pill; stacked (column) toolbars must not stretch it to 260px tall */
.toolbar .search { background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; min-height: 44px; gap: 8px; transition: border .15s, box-shadow .15s; }
.toolbar .search input { height: 41px; padding: 0; }
.toolbar .search:focus-within { border-color: var(--c-violet); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-600) 14%, transparent); }
.toolbar.stack .search { flex: 0 0 auto; max-width: none; }

/* login: link to the public admission portal */
.auth-apply { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding: 12px 14px;
  border: 1.5px dashed var(--line); border-radius: 12px; font-size: 14px; color: var(--ink-2); }
.auth-apply a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }

/* stat card rows – the "col-md-3" rule: every stats row is a grid (with or without .grid), 4 equal cards per row from
   768px, one per row below; equal heights with the footer on the bottom; long values shrink instead of overflowing */
.stats { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats > .stat { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.stats > .stat .stat-foot { margin-top: auto; min-height: 18px; }
.stats > .stat .stat-value { font-size: clamp(28px, 2.4vw, 46px); overflow-wrap: anywhere; }
/* Results summary cards (Results & Report Cards, Result Approval, Transcripts) follow the same rule */
.summary-row.cols-md-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .summary-row.cols-md-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Page-loading overlay (v2.12) – translucent dark layer, white-outline animation in the middle (Shared/_Loader.cshtml)
   ========================================================================== */
.page-loader { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; align-content: center; gap: 14px;
  background: rgba(10, 14, 18, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 1; visibility: visible; transition: opacity .35s ease, visibility .35s ease; }
.page-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.pl-stage { width: 132px; height: 132px; display: grid; place-items: center; }
.pl-caption { color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.pl-art { display: none; width: 132px; height: 132px; }
.page-loader[data-loader="beaker"] .pl-beaker, .page-loader[data-loader="brain"] .pl-brain { display: block; }
.page-loader[data-loader="cube"] .pl-cube { display: grid; place-items: center; }
.pl-art path, .pl-art .pl-line { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-art .pl-line.thin { stroke-width: 1.6; opacity: .7; }

/* beaker: liquid rises and falls while it sloshes; bubbles float up */
.pl-beaker .pl-liquid { fill: rgba(255, 255, 255, .32); stroke: none; animation: pl-slosh 1.6s linear infinite; }
.pl-beaker .pl-level { animation: pl-fill 3.2s ease-in-out infinite; }
.pl-beaker .pl-bubble { fill: none; stroke: #fff; stroke-width: 1.2; opacity: 0; animation: pl-bubble 2.4s ease-in infinite; }
.pl-beaker .b2 { animation-delay: .8s; } .pl-beaker .b3 { animation-delay: 1.6s; }
@keyframes pl-slosh { from { transform: translateX(0); } to { transform: translateX(50px); } }
@keyframes pl-fill { 0% { transform: translateY(28px); } 50% { transform: translateY(-14px); } 100% { transform: translateY(28px); } }
@keyframes pl-bubble { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-44px); opacity: 0; } }

/* brain: outline draws itself, then neurons fire */
.pl-brain .pl-draw path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: pl-draw 2.6s ease-in-out infinite; }
.pl-brain .pl-draw path:nth-child(n+3) { animation-delay: .35s; }
.pl-brain .pl-neuron { fill: #fff; opacity: 0; animation: pl-fire 2.6s ease-in-out infinite; }
.pl-brain .n1 { animation-delay: .9s; } .pl-brain .n2 { animation-delay: 1.1s; } .pl-brain .n3 { animation-delay: 1.3s; } .pl-brain .n4 { animation-delay: 1.5s; } .pl-brain .n5 { animation-delay: 1.7s; }
@keyframes pl-draw { 0% { stroke-dashoffset: 140; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -140; } }
@keyframes pl-fire { 0%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.4); } 60% { opacity: .2; transform: scale(1); } }
.pl-brain .pl-neuron { transform-box: fill-box; transform-origin: center; }

/* Rubik's cube: a 3-D cube with 3x3 white-outline faces, turning while its squares flash */
.pl-cube { perspective: 480px; }
.pl-cube-3d { position: relative; width: 66px; height: 66px; transform-style: preserve-3d; animation: pl-turn 3.6s cubic-bezier(.6, .05, .35, 1) infinite; }
.pl-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px;
  border: 2px solid #fff; border-radius: 8px; background: #20262c; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pl-face i { border: 1.6px solid #fff; border-radius: 3px; animation: pl-tile 1.8s ease-in-out infinite; animation-delay: calc(var(--d) * .2s); }
.pl-face.front  { transform: translateZ(33px); }
.pl-face.back   { transform: rotateY(180deg) translateZ(33px); }
.pl-face.right  { transform: rotateY(90deg) translateZ(33px); }
.pl-face.left   { transform: rotateY(-90deg) translateZ(33px); }
.pl-face.top    { transform: rotateX(90deg) translateZ(33px); }
.pl-face.bottom { transform: rotateX(-90deg) translateZ(33px); }
@keyframes pl-turn {
  0%   { transform: rotateX(-24deg) rotateY(30deg); }
  25%  { transform: rotateX(-24deg) rotateY(120deg); }
  50%  { transform: rotateX(66deg) rotateY(120deg); }
  75%  { transform: rotateX(66deg) rotateY(210deg); }
  100% { transform: rotateX(-24deg) rotateY(390deg); }
}
@keyframes pl-tile { 0%, 100% { background: transparent; } 50% { background: rgba(255, 255, 255, .55); } }

@media (prefers-reduced-motion: reduce) {
  .page-loader *, .page-loader *::before { animation-duration: 6s !important; }
  .pl-cube-3d { animation: none; transform: rotateX(-24deg) rotateY(30deg); }
}
@media print { .page-loader { display: none !important; } }
/* logo loader (default): the Nexxtlearn rings draw themselves, then the name is written out underneath */
.page-loader[data-loader="logo"] .pl-logo { display: block; }
.page-loader[data-loader="logo"] .pl-caption { display: none; }
.pl-word { display: none; width: 260px; height: auto; overflow: visible; }
.page-loader[data-loader="logo"] .pl-word { display: block; }
.pl-logo .pl-ring { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: 50% 50%; transform-box: fill-box; animation: pl-ring 3.2s ease-in-out infinite; }
.pl-logo .pl-ring.outer { stroke-width: 9; }
.pl-logo .pl-ring.inner { stroke-width: 8; animation-name: pl-ring-inner; }
@keyframes pl-ring       { 0% { stroke-dashoffset: 100; opacity: 0; } 2% { stroke-dashoffset: 98; opacity: 1; } 30%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pl-ring-inner { 0%, 18% { stroke-dashoffset: 100; opacity: 0; } 20% { stroke-dashoffset: 98; opacity: 1; } 42%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.pl-word text { font-family: var(--font); font-size: 46px; font-weight: 700; letter-spacing: .02em;
  fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round;
  stroke-dasharray: 300; stroke-dashoffset: 300; animation: pl-write 3.2s ease-in-out infinite; }
@keyframes pl-write {
  0%, 22% { stroke-dashoffset: 300; fill-opacity: 0; opacity: 1; }
  62%     { stroke-dashoffset: 0;   fill-opacity: 0; }
  74%, 82% { stroke-dashoffset: 0;  fill-opacity: 1; opacity: 1; }
  96%, 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-logo .pl-ring, .pl-word text { animation: none; stroke-dashoffset: 0; fill-opacity: 1; }
}
/* busy buttons (S.busy): spinner + disabled while an action runs. Icon-only buttons swap their icon for the spinner. */
.btn.busy, .link-btn.busy, .icon-btn.busy, [aria-busy="true"] { cursor: progress; }
.btn.busy .i { display: none; }
.link-btn.busy, .icon-btn.busy { position: relative; pointer-events: none; opacity: .7; }
.link-btn.busy > .i, .icon-btn.busy > .i { visibility: hidden; }
.link-btn.busy::after, .icon-btn.busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
/* any other button the app makes busy (small arrows, chips, toolbar buttons): greyed out and not clickable */
button.busy:not(.btn):not(.link-btn):not(.icon-btn) { opacity: .55; pointer-events: none; }
/* ==========================================================================
   Login left panel (v2.16.2) – fills the left half; brand rings ripple outwards; small shapes and line icons drift.
   ========================================================================== */
.auth.auth-half { padding: 0; gap: 0; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .auth.auth-half { grid-template-columns: 1fr; padding: 16px; } }
.auth-half .auth-art { border-radius: 0; min-height: 100vh; position: sticky; top: 0; height: 100vh; }
.auth-art.ls { padding: 48px 56px; justify-content: space-between;
  background: radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--g-500) 45%, transparent) 0%, transparent 65%), radial-gradient(50% 40% at 0% 0%, color-mix(in srgb, var(--g-300) 10%, transparent) 0%, transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--g-900) 75%, #000) 0%, color-mix(in srgb, var(--g-900) 45%, #000) 100%); }
.auth-art.ls > .ls-rings { position: absolute; z-index: 0; width: 640px; height: 640px; right: -220px; bottom: -220px; pointer-events: none; overflow: visible; }
.ls-wave { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ls-ripple 10s cubic-bezier(.25,.6,.35,1) infinite; }
.ls-wave.w2 { animation-delay: -2s; } .ls-wave.w3 { animation-delay: -4s; } .ls-wave.w4 { animation-delay: -6s; } .ls-wave.w5 { animation-delay: -8s; }
.ls-core { transform-box: fill-box; transform-origin: center; opacity: .5; animation: ls-breathe 5s ease-in-out infinite; }
@keyframes ls-ripple { 0% { transform: scale(.1); opacity: 0; } 12% { opacity: .32; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ls-breathe { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.18); opacity: .7; } }
.auth-art.ls > .ls-bits { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ls-b { position: absolute; color: rgba(255,255,255,.28); animation: ls-drift var(--t, 10s) ease-in-out infinite; }
.ls-b.g { color: color-mix(in srgb, var(--g-300) 55%, transparent); } .ls-b.a { color: rgba(245,165,36,.6); } .ls-b.ic { color: rgba(255,255,255,.2); }
.ls-b.spin { animation: ls-drift calc(var(--t, 10s) / 2) ease-in-out infinite, ls-spin var(--t, 20s) linear infinite; }
.ls-b.spin.rev { animation-direction: normal, reverse; }
.ls-b.tw { animation: ls-twinkle var(--t, 5s) ease-in-out infinite; }
.ls-b:nth-child(3n) { animation-delay: -3s; } .ls-b:nth-child(3n+1) { animation-delay: -6s; }
@keyframes ls-drift { 0%, 100% { translate: 0 0; } 50% { translate: 6px -10px; } }
@keyframes ls-spin { to { rotate: 360deg; } }
@keyframes ls-twinkle { 0%, 100% { opacity: .25; scale: .8; } 50% { opacity: 1; scale: 1.2; } }
.ls-copy { max-width: 460px; }
.ls-copy h2 { font-size: clamp(30px, 3vw, 46px); line-height: 1.1; font-weight: 700; letter-spacing: -.03em; margin: 0 0 14px; }
.ls-copy h2 em { font-style: normal; color: var(--g-300); }
/* typed headline: every line sits in the same grid cell; the hidden ones set the height so nothing jumps */
.ls-type { display: grid; }
.ls-type > span, .ls-type-size > span { grid-area: 1 / 1; }
.ls-type-size { display: grid; visibility: hidden; }
.ls-caret { display: inline-block; width: .08em; min-width: 3px; height: .9em; margin-left: .06em; vertical-align: -.08em; background: var(--g-300); border-radius: 2px;
  animation: ls-caret 1s steps(1) infinite; }
.ls-type.typing .ls-caret { animation: none; opacity: 1; }
@keyframes ls-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ls-caret { display: none; } }
.ls-copy p { opacity: .75; font-size: 16px; line-height: 1.55; margin: 0; }
.ls-school b { display: block; font-size: 17px; font-weight: 700; }
.ls-school small { opacity: .65; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ls-wave, .ls-core, .ls-b { animation: none !important; } .ls-wave { opacity: .15; } .ls-wave.w2 { transform: scale(.75); } .ls-wave.w3 { transform: scale(.5); } .ls-wave.w4 { transform: scale(.3); } }
/* ==========================================================================
   Fonts (v2.17) – Luxora is self-hosted (licensed; not on Google Fonts). Drop its files in /Content/fonts/luxora/;
   when a school picks it before the files are there, the stack falls through to Proza Libre (the default).
   ========================================================================== */
@font-face { font-family: "Luxora"; font-weight: 400; font-style: normal; font-display: swap; src: local("Luxora"), local("Luxora Regular"), url("../fonts/luxora/Luxora-Regular.woff2") format("woff2"); }
@font-face { font-family: "Luxora"; font-weight: 500; font-style: normal; font-display: swap; src: local("Luxora Medium"), url("../fonts/luxora/Luxora-Medium.woff2") format("woff2"); }
@font-face { font-family: "Luxora"; font-weight: 700; font-style: normal; font-display: swap; src: local("Luxora Bold"), url("../fonts/luxora/Luxora-Bold.woff2") format("woff2"); }

/* Branding → font picker */
.font-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.font-tools .search { flex: 1 1 220px; }
.font-groups { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.font-groups button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: 500 12.5px var(--font); color: var(--ink-2); cursor: pointer; }
.font-groups button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.font-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; text-align: left; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.font-card b { font-size: 24px; font-weight: 500; line-height: 1.1; }
.font-card span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.font-card small { font-size: 10.5px; color: var(--ink-2); font-family: var(--font); }
.font-card:hover { border-color: var(--g-300); }
.font-card.on { border-color: var(--g-700); box-shadow: 0 0 0 3px var(--g-100); }
.font-sample { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); margin-top: 6px; }
.font-sample b { font-size: 16px; font-weight: 700; }
.font-sample span { font-size: 13px; }
.font-sample small { font-size: 11px; color: var(--ink-2); font-family: var(--font); }
/* approval workflow picker (Views/Shared/_WorkflowPicker.cshtml) */
.wf-path { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.wf-path:empty { display: none; }
.wf-path b { color: var(--ink); margin-right: 2px; }
.wf-path .wf-step { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.wf-path .wf-step i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--g-700); }
.wf-path .wf-arrow { color: var(--muted); }
/* ==========================================================================
   Public pages (v2.18) – /apply, /pay and other forms without sign-in. Views/Shared/_PublicLayout.cshtml.
   Brand-gradient header with the rippling rings of the sign-in page, raised cards overlapping it. Branding colour + font only.
   ========================================================================== */
body.pub { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.pub-wrap { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 20px; }
.pub-hero { position: relative; overflow: hidden; color: #fff; padding: 22px 0 96px;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--g-500) 55%, transparent) 0%, transparent 60%),
              linear-gradient(150deg, var(--g-800) 0%, color-mix(in srgb, var(--g-900) 70%, #000) 100%); }
.pub-hero > .pub-rings { position: absolute; width: 560px; height: 560px; right: -180px; top: -200px; pointer-events: none; }
.pub-hero .pub-wrap { position: relative; }
.pub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 30px; }
.pub-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.pub-brand .brand-mark, .pub-brand .brand-mark span { border-color: #fff; }
.pub-brand b { display: block; font-size: 17px; line-height: 1.2; }
.pub-brand small { display: block; font-size: 12px; opacity: .75; letter-spacing: .04em; text-transform: uppercase; }
.pub-top-actions { display: flex; gap: 8px; }
.pub-top-actions .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.pub-top-actions .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.pub-hero-text h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 38px); line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.pub-hero-text p { margin: 0; max-width: 640px; font-size: 15px; line-height: 1.55; opacity: .85; }
.pub-main { margin-top: -64px; flex: 1; position: relative; z-index: 1; padding-bottom: 32px; }
.pub-card { background: var(--surface); border-radius: 20px; box-shadow: 0 1px 2px rgba(16,24,20,.05), 0 18px 44px rgba(16,24,20,.10); padding: 24px; margin-bottom: 16px; }
.pub-card > h2, .pub-card > h3 { margin-top: 0; }
.pub-card-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.pub-card-head .pub-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--g-50); color: var(--g-700); flex: none; }
.pub-card-head h2 { margin: 0; font-size: 18px; } .pub-card-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pub-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 18px 20px 28px; font-size: 12px; color: var(--muted); }
.pub-foot .i { vertical-align: -2px; }
/* step indicator */
.pub-steps { display: flex; gap: 0; margin: 0 0 16px; padding: 14px 18px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); overflow-x: auto; }
.pub-steps .st { display: flex; align-items: center; gap: 8px; flex: 1; min-width: max-content; font-size: 13px; color: var(--muted); font-weight: 500; }
.pub-steps .st + .st::before { content: ""; flex: 1; min-width: 18px; height: 2px; background: var(--line); margin: 0 10px; border-radius: 2px; }
.pub-steps .st i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); flex: none; }
.pub-steps .st.done { color: var(--g-700); } .pub-steps .st.done i { background: var(--g-100); color: var(--g-800); border-color: var(--g-100); }
.pub-steps .st.done + .st::before, .pub-steps .st.now::before { background: var(--g-400); }
.pub-steps .st.now { color: var(--ink); font-weight: 700; } .pub-steps .st.now i { background: var(--g-700); color: #fff; border-color: var(--g-700); box-shadow: 0 0 0 4px var(--g-50); }
/* option tiles (cycles, schools, payment methods) */
.pub-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pub-tile { border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.pub-tile:hover { border-color: var(--g-300); box-shadow: 0 0 0 4px var(--g-50); }
.pub-tile b { font-size: 15px; } .pub-tile small { color: var(--muted); font-size: 12.5px; }
.pub-tile .btn { margin-top: auto; align-self: flex-start; }
.pub-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.pub-otp { letter-spacing: 10px; font-size: 26px; font-weight: 700; text-align: center; max-width: 260px; }
.pub-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--g-50); color: var(--ink-2); font-size: 13px; }
.pub-note .i { color: var(--g-700); flex: none; margin-top: 1px; }
.pub-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
@media (max-width: 640px) { .pub-hero { padding-bottom: 84px; } .pub-card { padding: 18px; border-radius: 18px; } .pub-top { margin-bottom: 22px; } }
@media print { body.pub { background: #fff; } .pub-main { margin-top: 0; } .pub-card { box-shadow: none; padding: 0; } }
/* visually hidden, still read by screen readers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }