/* Montserrat is self-hosted (SIL Open Font Licence): the portal makes no request to any
   third party, which keeps the privacy policy and the store privacy labels simple. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/montserrat-var.woff2") format("woff2");
}

:root {
  /* ============ TWO COLOURS ============
     1) Denning Purple, anchored on the logo ink #362E7E (sampled from the master lockup)
     2) Champagne Gold #F2CA50
     Everything else is neutral. One functional red exists for errors and absence only,
     because those meanings must not depend on a tint the eye has to decode.
     Ground / panel / gold roughly follows the brand book's 70 / 22 / 8 split.          */

  --p-900: #140E33;   /* deepest ground */
  --p-800: #1B1444;   /* dark surface: sidebar, app icon plate */
  --p-700: #241B5C;
  --p-600: #362E7E;   /* THE logo ink — brand purple */
  --p-500: #453BA0;   /* interactive accent */
  --p-400: #5B4FC0;
  --p-300: #9089D9;
  --p-200: #C9C4EC;
  --p-100: #E8E6F6;   /* accent tint */
  --p-50:  #F4F3FB;

  --g-700: #7A5A0F;   /* gold as text on light */
  --g-600: #A8790F;
  --g-500: #DCA92B;
  --g-400: #F2CA50;   /* brand gold */
  --g-200: #F7E2A6;
  --g-100: #FBF1D6;
  --g-50:  #FDF9EE;

  /* neutrals, faintly cooled toward the ink */
  --n-0:   #FFFFFF;
  --n-25:  #FBFAFD;
  --n-50:  #F6F5FA;
  --n-100: #F0EFF6;
  --n-150: #E7E5F0;
  --n-200: #DEDCEB;
  --n-300: #C6C3DA;
  --n-400: #6E6A8A;
  --n-500: #565273;
  --n-700: #363252;
  --n-900: #191634;

  /* the one functional colour */
  --alert: #B3261E;  --alert-tint: #FBEAE8;

  /* ---- roles ---- */
  --bg: var(--n-50);
  --card: var(--n-0);
  --surface-2: var(--n-25);
  --fill: var(--n-100);
  --fill-2: var(--n-150);
  --line: var(--n-200);
  --line-strong: var(--n-300);
  --text: var(--n-900);
  --text-2: var(--n-500);
  --muted: var(--n-500);
  --text-3: var(--n-400);
  --brand: var(--p-600);
  --accent: var(--p-500);
  --accent-hover: var(--p-600);
  --accent-tint: var(--p-100);
  --accent-ring: rgba(69, 59, 160, .22);
  --on-accent: #fff;

  /* ---- status, expressed in the two colours (+ the functional red) ---- */
  --success: var(--p-600);  --success-tint: var(--p-100);   /* complete, present, resolved */
  --warning: var(--g-700);  --warning-tint: var(--g-100);   /* due soon, pending, late */
  --danger:  var(--alert);  --danger-tint:  var(--alert-tint);
  --info:    var(--p-500);  --info-tint:    var(--p-100);
  --teal:    var(--n-500);  --teal-tint:    var(--n-150);
  --pink:    var(--g-600);  --pink-tint:    var(--g-100);

  /* ---- elevation (neutral) ---- */
  --shadow-xs: 0 1px 2px rgba(25, 22, 52, .05);
  --shadow-sm: 0 1px 3px rgba(25, 22, 52, .06), 0 1px 2px rgba(25, 22, 52, .03);
  --shadow-md: 0 6px 16px rgba(25, 22, 52, .08), 0 2px 5px rgba(25, 22, 52, .04);
  --shadow-lg: 0 24px 56px rgba(20, 14, 51, .20), 0 6px 16px rgba(20, 14, 51, .08);

  /* ---- shape ---- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --t: .18s var(--ease);

  --sidebar-w: 252px;
  --topbar-h: 62px;
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- legacy aliases ---- */
  --brand-900: var(--p-900); --brand-800: var(--p-800); --brand-700: var(--p-700);
  --brand-600: var(--p-600); --brand-500: var(--p-500); --brand-400: var(--p-400);
  --brand-200: var(--p-200); --brand-100: var(--p-100); --brand-50: var(--p-50);
  --gold-700: var(--g-700); --gold-600: var(--g-600); --gold-500: var(--g-500);
  --gold-400: var(--g-400); --gold-100: var(--g-100); --gold-50: var(--g-50);
  --indigo: var(--p-800); --indigo-2: var(--p-700); --indigo-3: var(--p-500);
  --violet: var(--p-500); --violet-2: var(--p-400);
  --gold: var(--g-400); --gold-dark: var(--g-600);
  --radius: var(--r-lg); --radius-sm: var(--r-sm);
  --shadow: var(--shadow-sm); --glow: var(--shadow-md);
  --grad: var(--accent);
  --grad-gold: var(--g-400);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.22; letter-spacing: -.012em; }
h2 { font-size: 18px; font-weight: 750; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0 0 .8em; }
a { color: var(--accent); text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- app frame ---------- */
.app { display: flex; min-height: 100dvh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); }
.content { flex: 1; padding: 26px 30px 90px; max-width: 1180px; width: 100%; margin: 0 auto; }

/* ---------- sidebar ---------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 50;
  background: var(--brand-900);
  border-right: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72); display: flex; flex-direction: column; padding: 16px 12px;
}
.sidebar-brand { display: flex; gap: 11px; align-items: center; padding: 8px 10px 22px; }
.brand-mark { width: 34px; height: 33px; flex: none; object-fit: contain; }
.topbar-mark { height: 25px; width: auto; flex: none; }
.only-mobile-inline { display: none; }
.brand-name { font-weight: 800; letter-spacing: .15em; color: #fff; font-size: 13.5px; }
.brand-sub { font-size: 11px; color: rgba(255, 255, 255, .45); letter-spacing: .02em; font-weight: 600; }
.nav { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .72); font-size: 13.5px; font-weight: 600; border: 0; background: none;
  cursor: pointer; width: 100%; text-align: left; transition: background var(--t), color var(--t);
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .11); color: #fff; font-weight: 700; }
.nav-item.active svg { opacity: 1; color: var(--gold-400); }
.nav-item.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--gold-400);
}
.nav-item .nav-count {
  margin-left: auto; background: var(--danger); color: #fff; border-radius: var(--r-pill);
  font-size: 10.5px; font-weight: 800; padding: 1px 7px; min-width: 20px; text-align: center;
}
.nav-item.active .nav-count { background: var(--danger); color: #fff; }
.sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; margin-top: 8px; }

/* ---------- topbar ---------- */
.topbar {
  height: var(--topbar-h); display: flex; align-items: center; gap: 14px;
  padding: 0 30px; background: rgba(247, 245, 252, .82); backdrop-filter: saturate(180%) blur(20px);
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line);
}
.page-title { font-size: 17px; font-weight: 750; margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.015em; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--text-2);
  position: relative; transition: background var(--t), color var(--t), border-color var(--t);
}
.icon-btn:hover { background: var(--fill); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.bell-badge {
  position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; border-radius: var(--r-pill); min-width: 17px; height: 17px;
  display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--bg);
}
.user-chip {
  display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: background var(--t);
}
.user-chip:hover { background: var(--fill); }
.user-chip .avatar { width: 28px; height: 28px; font-size: 11.5px; }
.user-chip .chip-name { font-size: 12.5px; font-weight: 700; max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .chip-role { font-size: 10.5px; color: var(--text-3); font-weight: 600; text-transform: capitalize; }

/* ---------- avatar ---------- */
.avatar {
  border-radius: 50%; background: var(--brand-500); color: #fff; font-weight: 700;
  display: inline-grid; place-items: center; width: 36px; height: 36px; font-size: 13px; flex: none;
  letter-spacing: .01em;
}

/* ---------- cards / layout ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs); padding: 20px;
}
a.card, .card.hoverable { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
a.card:hover, .card.hoverable:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.card + .card { margin-top: 16px; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-title h3 { margin: 0; }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-header .sub { color: var(--text-2); font-size: 13px; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* ---------- stats ---------- */
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 18px; box-shadow: var(--shadow-xs);
}
.stat .stat-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.stat .stat-value { font-size: 30px; font-weight: 780; margin-top: 5px; letter-spacing: -.028em; line-height: 1.1; }
.stat .stat-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px;
  border-radius: var(--r-sm); font-weight: 700; font-size: 13px; border: 1px solid transparent;
  cursor: pointer; background: var(--accent); color: var(--on-accent); text-decoration: none; line-height: 1.25;
  transition: background var(--t), border-color var(--t), color var(--t), transform .1s var(--ease);
}
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.985); }
.btn-gold { background: var(--gold-400); color: var(--brand-900); }
.btn-gold:hover { background: var(--gold-500); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--fill); border-color: var(--line-strong); }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #A81C42; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--r-xs); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-xs);
  font-size: 11px; font-weight: 700; background: var(--fill-2); color: var(--text-2); white-space: nowrap;
  letter-spacing: -.005em;
}
.badge-gold { background: var(--warning-tint); color: var(--gold-700); }
.badge-green { background: var(--success-tint); color: var(--success); }
.badge-red { background: var(--danger-tint); color: var(--danger); }
.badge-blue { background: var(--info-tint); color: var(--info); }
.badge-dark { background: var(--brand-800); color: #fff; }
.badge-cat { text-transform: capitalize; }
.chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card);
  font-size: 12.5px; font-weight: 650; cursor: pointer; color: var(--text-2);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.chip:hover { background: var(--fill); color: var(--text); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab {
  padding: 9px 15px; font-weight: 650; font-size: 13.5px; color: var(--text-2); cursor: pointer;
  border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 750; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-xs); }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap; font-weight: 700;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--fill); }

/* ---------- forms ---------- */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; color: var(--text); }
.form-field input, .form-field select, .form-field textarea, .input {
  width: 100%; padding: 10px 13px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  font-family: inherit; font-size: 13.5px; background: var(--card); color: var(--text); outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-3); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-field textarea { min-height: 96px; resize: vertical; }
.form-hint { font-size: 11.5px; color: var(--text-3); margin-top: 5px; }
.form-error { color: var(--danger); font-size: 12.5px; font-weight: 650; margin-top: 6px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-field { flex: 1; }

/* ---------- modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 14, 42, .40); backdrop-filter: blur(3px);
  z-index: 100; display: grid; place-items: center; padding: 18px; animation: fadeIn .15s var(--ease);
}
.modal {
  background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 88dvh; display: flex; flex-direction: column;
  animation: popIn .22s var(--ease);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 0; }
.modal-head h3 { margin: 0; font-size: 16.5px; font-weight: 750; }
.modal-body { padding: 14px 22px 22px; overflow-y: auto; }
.modal-close { border: 0; background: none; cursor: pointer; color: var(--text-3); padding: 6px; border-radius: var(--r-xs); transition: background var(--t), color var(--t); }
.modal-close:hover { background: var(--fill); color: var(--text); }
.modal-close svg { width: 18px; height: 18px; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { transform: translateY(8px) scale(.99); opacity: 0; } }

/* ---------- toast ---------- */
.toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; width: max-content; max-width: 92vw; }
.toast {
  background: var(--n-900); color: #fff; padding: 11px 20px; border-radius: var(--r-pill); font-size: 13px;
  font-weight: 650; box-shadow: var(--shadow-lg); animation: toastIn .22s var(--ease); max-width: 92vw;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } }

/* ---------- empty state ---------- */
/* Empty states carry the column-D as a quiet watermark. */
.empty { text-align: center; padding: 52px 20px; color: var(--text-2); position: relative; }
.empty::before {
  content: ''; display: block; width: 54px; height: 52px; margin: 0 auto 14px;
  background: url('/brand/mark.png') center/contain no-repeat; opacity: .16;
}
.empty svg { display: none; }
.empty .empty-title { font-weight: 750; color: var(--text); margin-bottom: 4px; font-size: 15px; }

/* ---------- list rows ---------- */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row .list-main { flex: 1; min-width: 0; }
.list-row .list-title { font-weight: 700; font-size: 13.5px; }
.list-row .list-sub { font-size: 12px; color: var(--text-2); }

/* ---------- sign in ---------- */
.login-wrap { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr .95fr; }

/* left: the institution */
.login-brand-panel {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 46px 52px; color: #fff;
  background:
    radial-gradient(900px 620px at 12% -10%, rgba(91, 79, 192, .55) 0%, transparent 62%),
    radial-gradient(700px 520px at 100% 104%, rgba(242, 202, 80, .14) 0%, transparent 60%),
    linear-gradient(158deg, var(--p-700) 0%, var(--p-800) 46%, var(--p-900) 100%);
}
/* the column-D as architecture, bleeding off the panel */
.login-brand-panel::before {
  content: ''; position: absolute; right: -14%; bottom: -22%;
  width: 92%; aspect-ratio: 512 / 496; opacity: .07; pointer-events: none;
  background: url('/brand/mark-white.png') center/contain no-repeat;
}
.login-brand-panel > * { position: relative; }
.lp-lockup { width: 268px; max-width: 62%; height: auto; }
.lp-middle { max-width: 520px; }
.lp-line {
  font-size: clamp(30px, 3.1vw, 46px); font-weight: 750; line-height: 1.08;
  letter-spacing: -.028em; margin: 0 0 18px;
}
.lp-line::after {
  content: ''; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: var(--g-400); margin-top: 22px;
}
.lp-sub { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; max-width: 42ch; }
.lp-foot {
  display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.lp-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--g-400); opacity: .8; }

/* right: the form */
.login-form-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 40px 24px; background: var(--card);
}
.login-card { width: 100%; max-width: 372px; animation: cardIn .45s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } }
.lc-lockup { display: none; width: 210px; height: auto; margin: 0 auto 4px; }
.login-portal-line {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3);
}
.login-hello { font-size: 30px; font-weight: 780; letter-spacing: -.028em; margin: 10px 0 4px; }
.login-tag { color: var(--text-2); font-size: 13.5px; margin-bottom: 26px; }
.login-submit { width: 100%; padding: 13px; font-size: 14px; margin-top: 4px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: none; cursor: pointer;
  color: var(--text-3); display: grid; place-items: center; border-radius: var(--r-xs);
}
.pw-toggle:hover { color: var(--text); background: var(--fill); }
.pw-toggle.is-on { color: var(--accent); }
.pw-toggle svg { width: 17px; height: 17px; }

.demo-accounts { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.demo-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.demo-accounts .demo-btn {
  display: flex; width: 100%; align-items: center; gap: 12px; text-align: left;
  background: var(--card); border: 1px solid var(--line); padding: 10px 12px;
  border-radius: var(--r-md); margin-top: 7px; cursor: pointer; color: var(--text);
  transition: border-color var(--t), background var(--t), transform .12s var(--ease);
}
.demo-accounts .demo-btn:hover { border-color: var(--accent); background: var(--p-50); transform: translateX(2px); }
.demo-accounts .demo-btn svg { width: 15px; height: 15px; margin-left: auto; color: var(--text-3); flex: none; }
.demo-role {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--p-100); padding: 4px 8px; border-radius: var(--r-xs); min-width: 58px; text-align: center;
}
.demo-who { display: flex; flex-direction: column; min-width: 0; }
.demo-who b { font-size: 13px; font-weight: 700; }
.demo-who span { font-size: 11.5px; color: var(--text-2); }
.login-foot { font-size: 11px; color: var(--text-3); margin: 0; text-align: center; }

@media (max-width: 900px) {
  /* the brand panel becomes a band the form sits under */
  .login-wrap { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-brand-panel { padding: 30px 22px 46px; gap: 16px; }
  .login-brand-panel::before { right: -22%; bottom: -60%; width: 74%; opacity: .09; }
  .lp-lockup { width: 216px; max-width: 70%; }
  .lp-middle { max-width: none; }
  .lp-line { font-size: 23px; margin: 0; }
  .lp-line::after { margin-top: 14px; width: 40px; height: 2px; }
  .lp-sub, .lp-foot { display: none; }
  .login-form-panel {
    justify-content: flex-start; padding: 28px 20px 34px; margin-top: -26px;
    border-radius: var(--r-xl) var(--r-xl) 0 0; position: relative; z-index: 1;
  }
  .lc-lockup { display: none; }
  .login-hello { font-size: 25px; }
  .login-card { animation: none; }
}

/* ---------- mobile tab bar ---------- */
.tabbar { display: none; }

/* ---------- responsive ---------- */
.only-mobile { display: none !important; }
.scrim { position: fixed; inset: 0; background: rgba(20, 14, 42, .45); z-index: 45; }

@media (max-width: 1120px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 980px) {
  .content { padding: 20px 18px 96px; }
}

@media (max-width: 760px) {
  .only-mobile { display: grid !important; }
  .main { margin-left: 0; }
  .sidebar { transform: translateX(-105%); transition: transform .28s var(--ease); width: 274px; box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .topbar { padding: 0 14px; }
  .user-chip .chip-text { display: none; }
  .only-mobile-inline { display: block; }
  .user-chip { padding: 4px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .form-row { flex-direction: column; gap: 0; }
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 44;
    background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 650; color: var(--text-3); padding: 5px 0; border-radius: var(--r-sm);
    transition: color var(--t);
  }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a.active { color: var(--accent); font-weight: 750; }
}

/* ---------- full-bleed layout (VLE takeover) ---------- */
.app.is-full .sidebar, .app.is-full .topbar, .app.is-full .tabbar, .app.is-full .scrim { display: none !important; }
.app.is-full .main { margin-left: 0; }
.app.is-full .content { padding: 0; max-width: none; }
body.full-layout { background: #0E0722; }

/* ---------- scrollbars ---------- */
/* Slim scrollbars for mouse and trackpad only. Styling ::-webkit-scrollbar switches Chromium to
   classic scrollbars, which on a phone steals width and draws desktop thumbs; touch devices
   keep their own overlay indicators. */
@media (hover: hover) and (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: var(--r-pill); border: 3px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--n-400); }
}

/* ---------- brand marks in context ---------- */
.mark-lockup { width: 100%; max-width: 260px; height: auto; display: block; }
.brand-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.brand-loading::before {
  content: ''; width: 42px; height: 40px; background: url('/brand/mark.png') center/contain no-repeat;
  animation: markPulse 1.5s var(--ease) infinite;
}
@keyframes markPulse { 0%, 100% { opacity: .22; transform: scale(.97); } 50% { opacity: .75; transform: scale(1); } }

/* ---------- safe areas (notch, status bar, home indicator) ----------
   The page opts into the full screen with viewport-fit=cover, so anything pinned to an
   edge has to keep clear of the system UI itself. In a desktop browser every inset is 0
   and nothing moves; in the iPhone and iPad app and the installed web app they are real. */
.topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
.sidebar { padding-top: calc(16px + env(safe-area-inset-top)); padding-left: calc(12px + env(safe-area-inset-left)); }
/* In the apps the status bar runs the full width, over the sidebar and the top bar alike. The
   sidebar starts below it, so the strip under the clock is light end to end and the dark
   status-bar text the portal asks for stays legible on iPad (and over the phone drawer). */
.in-app .sidebar { top: env(safe-area-inset-top); padding-top: 16px; }
.toast-root { bottom: calc(24px + env(safe-area-inset-bottom)); }
/* Where a bottom tab bar is showing (portal and VLE), toasts sit above it. */
@media (max-width: 760px) { .toast-root { bottom: calc(84px + env(safe-area-inset-bottom)); } }
.login-brand-panel { padding-top: calc(46px + env(safe-area-inset-top)); }
@media (max-width: 900px) {
  .login-brand-panel { padding-top: calc(30px + env(safe-area-inset-top)); }
  .login-form-panel { padding-bottom: calc(34px + env(safe-area-inset-bottom)); }
}