/* ===== NYU Perstare (official NYU typeface) ===== */
@font-face {
  font-family: "NYU Perstare Condensed";
  src: url("fonts/NYUPerstareCondensed-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NYU Perstare";
  src: url("fonts/NYUPerstare-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NYU Perstare";
  src: url("fonts/NYUPerstare-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NYU Perstare";
  src: url("fonts/NYUPerstare-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ===== Tokens ===== */
:root {
  --brand-color: #57068C;
  --brand-color-soft: color-mix(in srgb, var(--brand-color) 10%, var(--surface, #fff));
  --brand-color-border: color-mix(in srgb, var(--brand-color) 28%, var(--surface, #fff));
  --ink: #19141F;
  --paper: #F5F3F7;
  --surface: #FFFFFF;
  --surface-2: #FAF8FB;
  --border: #E4DEEA;
  --muted: #6E6577;
  --good: #1E8E5A;
  --good-soft: #E6F5EE;
  --warn: #B7791F;
  --warn-soft: #FBF1E0;
  --shadow: 0 1px 2px rgba(25,20,31,.06), 0 10px 28px -16px rgba(25,20,31,.28);
  --radius: 10px;
  --font-headline: "Brand Display", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Brand Display", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

/* ===== Super Admin theme — uMentor's own brand (deliberately distinct from
   any university's branding, since this is the platform-owner view) ===== */
body.theme-superadmin {
  --brand-color: #1E3A5F;
  --brand-color-soft: color-mix(in srgb, var(--brand-color) 12%, var(--surface, #fff));
  --brand-color-border: color-mix(in srgb, var(--brand-color) 30%, var(--surface, #fff));
  --ink: #17233A;
  --paper: #F8F9FB;
  --surface: #FFFFFF;
  --surface-2: #F3F5F8;
  --border: #E3E6ED;
  --muted: #5D6B82;
}
body.theme-superadmin .topbar-title { font-weight: 600; }

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; }

/* ===== Top bar (NYU-style) ===== */
.topbar {
  background: var(--brand-color); color: #fff;
}
.topbar-inner {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: 12px 28px;
  min-height: var(--topbar-height, 60px);
}
.topbar-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.topbar-logo { height: auto; width: auto; max-height: calc(var(--topbar-height, 60px) - 20px); max-width: 260px; display: block; }
.topbar-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.topbar-title em { font-style: normal; font-weight: 400; opacity: .85; }
.topbar-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.topbar-nav a {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 600;
  padding: 7px 11px; border-radius: 999px; transition: background .15s, color .15s;
}
.topbar-nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.topbar-nav a.is-active { background: #fff; color: var(--brand-color); }
.topbar-spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.topbar-subbar { background: var(--paper); border-top: 1px solid var(--border); }
.topbar-subbar-inner { max-width: 1080px; margin: 0 auto; padding: 8px 28px; display: flex; justify-content: flex-end; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; cursor: pointer;
}
.pill-btn:hover { background: rgba(255,255,255,.12); }
.pill-btn.solid { background: #fff; color: var(--brand-color); border-color: #fff; }
.pill-btn.solid:hover { background: #F0E6F7; }
.topbar-email {
  font-size: 11px; color: rgba(255,255,255,.75); font-family: var(--font-mono);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== Tools nav dropdown (Reports / Safety / Export / Import CSV) ===== */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-menu {
  display: none; flex-direction: column; gap: 2px; position: fixed; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
  min-width: 170px; padding: 6px; z-index: 200;
}
.nav-dropdown-menu.is-open { display: flex; }
.nav-dropdown-menu a {
  padding: 8px 12px; border-radius: 8px; text-decoration: none; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; color: var(--ink) !important; background: transparent !important;
}
.nav-dropdown-menu a:hover { background: var(--surface-2) !important; }
.nav-dropdown-menu a.is-active { color: var(--brand-color) !important; background: var(--brand-color-soft) !important; }

.program-switcher { display: inline-flex; align-items: center; gap: 7px; }
.program-switcher-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.program-switcher select {
  appearance: none; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink); font-size: 13px; font-weight: 600; padding: 6px 26px 6px 13px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%2319141F'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 10px;
}
.program-switcher select:hover { background-color: var(--surface-2); }
.program-switcher select option { color: var(--ink); }

/* ===== Light header style (thin colored strip + white nav row) ===== */
.topbar-accent-strip {
  background: var(--brand-color); color: #fff; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  padding: 6px 12px;
}
.topbar-light {
  background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--border);
}
.topbar-light .topbar-brand { color: var(--ink); }
.topbar-light .topbar-nav a { color: var(--ink); }
.topbar-light .topbar-nav a:hover { background: var(--surface-2); color: var(--ink); }
.topbar-light .topbar-nav a.is-active { background: var(--brand-color); color: #fff; }
.topbar-light .pill-btn { color: var(--ink); border-color: var(--border); }
.topbar-light .pill-btn:hover { background: var(--surface-2); }
.topbar-light .pill-btn.solid { background: var(--brand-color); color: #fff; border-color: var(--brand-color); }
.topbar-light .pill-btn.solid:hover { filter: brightness(0.9); }
.topbar-light .topbar-email { color: var(--muted); }

/* ===== Top bar: mobile layout ===== */
/* Below this width the nav can hold more pills than a phone can show in one
   row (8 on the admin dashboard, up to 4 on the portal) — wrapping them
   turned into a ragged multi-line mess. Instead: brand + right-side content
   share one row, and nav becomes its own full-width horizontally-scrollable
   strip (same "swipeable tabs" pattern iOS apps use), so it always reads as
   one clean line regardless of how many items it holds. */
@media (max-width: 640px) {
  .topbar-inner { justify-content: space-between; gap: 10px 14px; padding: 12px 16px; }
  .topbar-spacer { display: none; }
  .topbar-right { order: 2; flex-wrap: nowrap; }
  .topbar-email { display: none; }
  .topbar-right .pill-btn.solid { display: none; } /* role chip (Mentor/Mentee) — already shown below the page title */
  .topbar-nav {
    order: 3; flex-basis: 100%; flex-wrap: nowrap; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 2px -16px -4px; padding: 0 16px 6px;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }
  .topbar-nav a { flex-shrink: 0; white-space: nowrap; }
}

/* ===== Hero photo (landing page) ===== */
.hero {
  width: 100%; height: 320px; overflow: hidden; position: relative;
  border-bottom: 4px solid var(--brand-color);
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; display: block; }
@media (max-width: 700px) { .hero { height: 190px; } }

/* ===== Page shell ===== */
.page { max-width: 1080px; margin: 0 auto; padding: 34px 28px 70px; }
.eyebrow { margin: 0; color: var(--brand-color); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.page-title {
  font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 1.08;
  letter-spacing: -.02em; margin: 6px 0 8px; color: var(--ink);
}
.lede { margin: 6px 0 26px; color: var(--ink); font-size: 15px; max-width: 64ch; line-height: 1.6; }
.lede.muted { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
h2.section-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.section { margin-bottom: 42px; }
.section-sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* ===== Banners / flash ===== */
.banner {
  display: block; padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 20px;
  border: 1px solid var(--border);
}
.banner-good { background: var(--good-soft); color: #146643; border-color: #BFE6D3; }
.banner-warn { background: var(--warn-soft); color: #8A5A14; border-color: #EFD9A6; }
.banner-error { background: #FBEAEA; color: #97281F; border-color: #F0C4C0; }
.banner strong { font-weight: 700; }

/* ===== Stat tiles ===== */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 6px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat-label { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.stat-value { font-family: var(--font-mono); font-size: 30px; font-weight: 600; margin-top: 6px; color: var(--ink); }
.stat-value.accent { color: var(--brand-color); }
.stat-caption { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* ===== Card / table ===== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.table-scroll { overflow-x: auto; }
/* Mentees/Mentors list tables (Name/School/Year/Degree/Interests/Preference/
   Status) default to the browser's automatic column-width algorithm, which
   sizes every column off the total content across BOTH tables at once — so
   "Wants mentor from X" (mentees) being longer than "Supports X" (mentors)
   was enough to steal width from School on the mentee page only, wrapping
   "Johnson School of Management" to two lines there but not on Mentors.
   Fixed percentage widths make both pages lay out identically regardless of
   which page's text happens to be longer. */
.people-table { table-layout: fixed; width: 100%; }
.people-table th:nth-child(1), .people-table td:nth-child(1) { width: 14%; }
.people-table th:nth-child(2), .people-table td:nth-child(2) { width: 24%; }
.people-table th:nth-child(3), .people-table td:nth-child(3) { width: 8%; }
.people-table th:nth-child(4), .people-table td:nth-child(4) { width: 7%; }
.people-table th:nth-child(5), .people-table td:nth-child(5) { width: 18%; }
.people-table th:nth-child(6), .people-table td:nth-child(6) { width: 19%; }
.people-table th:nth-child(7), .people-table td:nth-child(7) { width: 10%; }
.table-scroll-tall { max-height: 420px; overflow-y: auto; }
.table-scroll-tall thead th { position: sticky; top: 0; z-index: 1; }
table { border-collapse: collapse; width: 100%; min-width: 680px; }
th, td { text-align: left; padding: 7px 13px; border-bottom: 1px solid var(--border); font-size: 13.3px; vertical-align: middle; }
th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-color); font-weight: 700; background: var(--brand-color-soft); }
tbody tr:last-child td { border-bottom: none; }
td.name-cell strong { display: block; font-size: 13.6px; }
td.name-cell span { font-size: 11.5px; color: var(--muted); }

/* Meeting confirmation status — confirmed outranks pending (solid accent
   border, not just a tint) so the two don't read as equally "settled". */
.meeting-row-pending td { background: var(--warn-soft); }
.meeting-row-confirmed td { background: var(--good-soft); }
.meeting-row-confirmed td:first-child { border-left: 3px solid var(--good); }
.badge-declined { background: #FBEAEA; color: #97281F; }
.badge-cancelled { background: var(--surface-2); color: var(--muted); }

.table-search { padding: 14px 18px 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.table-search input {
  flex: 1; min-width: 180px; max-width: 320px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; font-size: 16px; color: var(--ink);
}
.table-search select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--ink);
}
.table-search input:focus, .table-search select:focus { border-color: var(--brand-color); outline: none; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--brand-color-soft); color: var(--brand-color); border: 1px solid var(--brand-color-border);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 4px; max-width: 230px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.chip-more { font-size: 11px; color: var(--muted); }

.hover-trigger { cursor: help; border-bottom: 1px dotted var(--muted); }
.hover-tooltip-box {
  display: none; position: fixed; z-index: 200; width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.32); padding: 14px 16px; text-align: left;
}
.hover-tooltip-box strong { font-size: 14px; display: block; margin-bottom: 3px; }
.hover-tooltip-box .hover-meta { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.hover-tooltip-box .chip-row { max-width: none; margin-bottom: 8px; }
.hover-tooltip-box .hover-note { font-size: 11.5px; color: var(--muted); }
.hover-tooltip-box .hover-bio { font-size: 12px; color: var(--ink); margin-top: 8px; line-height: 1.4; }

.loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(25, 20, 31, .55); align-items: center; justify-content: center;
}
.loading-overlay.is-visible { display: flex; }
.loading-card {
  background: var(--surface); border-radius: 14px; padding: 32px 40px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); text-align: center; max-width: 320px;
}
.loading-spinner {
  width: 38px; height: 38px; margin: 0 auto 16px;
  border: 4px solid var(--brand-color-soft); border-top-color: var(--brand-color);
  border-radius: 50%; animation: loading-spin .8s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
.loading-card strong { display: block; font-size: 14.5px; margin-bottom: 6px; }
.loading-card span { font-size: 12.5px; color: var(--muted); }
.loading-divider { height: 1px; background: var(--border); margin: 18px 0 14px; }
.loading-powered-by { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); }
.loading-powered-by svg { color: #E8635C; }

.confirm-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(25, 20, 31, .55); align-items: center; justify-content: center;
}
.confirm-modal-overlay.is-visible { display: flex; }
.confirm-modal-card {
  background: var(--surface); border-radius: 14px; padding: 28px 32px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); text-align: center; max-width: 320px;
}
.confirm-modal-card strong { display: block; font-size: 14.5px; margin-bottom: 8px; }
.confirm-modal-card p { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }

.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge-pending { background: var(--warn-soft); color: var(--warn); }
.badge-matched { background: var(--good-soft); color: var(--good); }
.badge-overdue { background: #FBEAEA; color: #97281F; }
.badge-inactive { background: var(--surface-2); color: var(--muted); }
.badge-approval { background: var(--brand-color-soft); color: var(--brand-color); }

input[type="radio"].row-radio, input[type="checkbox"].row-radio { width: 16px; height: 16px; accent-color: var(--brand-color); }

/* ===== Buttons ===== */
.btn {
  appearance: none; border: 1px solid transparent; border-radius: 8px; padding: 10px 18px;
  font-size: 13.8px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.btn-primary { background: var(--brand-color); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(0.86); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-ai {
  background: linear-gradient(135deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 55%, #1a1a2e));
  color: #fff; text-decoration: none; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand-color) 60%, transparent);
}
.btn-ai:hover { filter: brightness(1.08); }

.match-bar { display: flex; align-items: center; justify-content: flex-start; gap: 16px; padding: 15px 16px; flex-wrap: wrap; }
.match-bar-hint { font-size: 12.5px; color: var(--muted); flex-basis: 100%; }
.empty-state { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

.show-more-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.show-more-hint { font-size: 12px; color: var(--muted); }

/* ===== Forms ===== */
.auth-card { max-width: 420px; margin: 40px auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px; padding: 22px; }
.form-grid.single { grid-template-columns: 1fr; max-width: 420px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 16px; color: var(--ink); width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-color); }
.field textarea { resize: vertical; min-height: 70px; }
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 14px; }
.check-item { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.check-item input { accent-color: var(--brand-color); width: 16px; height: 16px; }

/* ===== Weekly availability grid (2D version of .check-grid) ===== */
.availability-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 52px repeat(7, minmax(0,1fr));
  gap: 3px;
  overflow-x: auto;
}
.availability-corner { grid-column: 1; }
.availability-day-label, .availability-hour-label {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em;
  display: flex; align-items: center; justify-content: center; padding: 2px 0;
}
.availability-hour-label { justify-content: flex-end; padding-right: 6px; white-space: nowrap; }
.availability-cell {
  display: block; height: 22px; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--border);
  cursor: pointer;
}
.availability-cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.availability-cell:has(input:checked), .availability-cell.is-checked {
  background: var(--brand-color); border-color: var(--brand-color);
}
.availability-grid.is-readonly .availability-cell { cursor: default; height: 16px; }

/* Suggested-meeting-time calendar — deliberately green/.good-toned rather
   than brand-purple like .availability-grid above, so it reads as "pick a
   time" rather than "edit your weekly availability", even though it's the
   same grid shape. */
.schedule-calendar { grid-column: 1/-1; display: flex; flex-direction: column; gap: 16px; }
.schedule-week-label { font-size: 12.5px; font-weight: 700; color: var(--brand-color); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.schedule-calendar-grid { grid-template-columns: 56px repeat(7, minmax(0,1fr)); }
.schedule-calendar-grid .availability-day-label { line-height: 1.35; font-size: 10.5px; }
.schedule-calendar-grid .availability-cell {
  height: 32px; background: var(--good-soft); border: 1px solid var(--good);
}
.schedule-calendar-grid .availability-cell.is-empty { background: transparent; border-color: transparent; cursor: default; }
.schedule-calendar-grid .availability-cell:has(input:checked) { background: var(--good); border-color: var(--good); }
details.field summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
details.field[open] summary { margin-bottom: 4px; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding-top: 6px; flex-wrap: wrap; }
.form-actions .hint { font-size: 11.5px; color: var(--muted); }
.hint { font-size: 11.5px; color: var(--muted); }
.form-error { color: #97281F; font-size: 12.5px; margin: -8px 0 4px; }

/* ===== Rich text editor ===== */
.richtext-toolbar { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.richtext-toolbar button {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 10px; font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.richtext-toolbar button:hover { border-color: var(--brand-color); color: var(--brand-color); }
.richtext-editor {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; color: var(--ink); min-height: 110px;
  max-height: 320px; overflow-y: auto;
}
.richtext-editor:focus { outline: none; border-color: var(--brand-color); }
.richtext-editor ul, .richtext-editor ol { padding-left: 22px; margin: 6px 0; }
.richtext-editor p { margin: 0 0 8px; }
.richtext-editor p:last-child { margin-bottom: 0; }

/* ===== Reports charts ===== */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.chart-block { padding: 18px 20px; }
.chart-block h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 14px; }
.chart-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.chart-row:last-child { margin-bottom: 0; }
.chart-row-label { width: 42%; flex-shrink: 0; font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-row-track { flex: 1; height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.chart-row-fill { display: block; height: 100%; background: var(--brand-color); border-radius: 999px; }
.chart-row-fill.is-alt { background: var(--warn); }
.chart-row-value { width: 26px; text-align: right; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.trend-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 10px 4px 0; }
.trend-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.trend-bar-value { font-size: 10.5px; color: var(--muted); margin-bottom: 4px; font-family: var(--font-mono); }
.trend-bar-fill { width: 100%; max-width: 32px; background: var(--brand-color); border-radius: 5px 5px 0 0; min-height: 3px; }
.trend-bar-label { font-size: 10px; color: var(--muted); margin-top: 7px; white-space: nowrap; }
.health-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.health-active { background: var(--good); }
.health-starting { background: var(--warn); }
.health-attention { background: #C0392B; }
@media (max-width: 760px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* ===== Program hero / rich description (public display) ===== */
.program-hero-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; display: block; }
.program-description { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.program-description ul, .program-description ol { padding-left: 20px; margin: 6px 0; }
.program-description p { margin: 0 0 8px; }
.program-description p:last-child { margin-bottom: 0; }

/* ===== Profile / connection ===== */
.profile-card { display: flex; justify-content: space-between; gap: 20px; padding: 22px; flex-wrap: wrap; }
.profile-main strong { font-size: 22px; }
.profile-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.profile-bio { margin-top: 10px; font-size: 13.5px; max-width: 48ch; white-space: pre-line; }

.connection-card { padding: 24px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.connection-avatar {
  width: 54px; height: 54px; border-radius: 50%; background: var(--brand-color-soft); color: var(--brand-color);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700;
  font-size: 19px; flex-shrink: 0; object-fit: cover;
}
.connection-note { margin-top: 12px; font-size: 12.5px; color: var(--muted); }

/* ===== Landing chooser ===== */
.chooser-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 22px; }
.chooser-card {
  display: flex; flex-direction: column; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.chooser-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(67,22,107,.35); }
.chooser-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-color); }
.chooser-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 6px 0 8px; }
.chooser-desc { font-size: 13px; color: var(--muted); line-height: 1.5; flex: 1; }
.chooser-cta { margin-top: 18px; justify-content: center; text-decoration: none; }
.chooser-login {
  display: block; text-align: center; margin-top: 10px; font-size: 12px; font-weight: 600;
  color: var(--brand-color); text-decoration: none;
}
.chooser-login:hover { text-decoration: underline; }

/* ===== University block (landing) ===== */
.university-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.university-block-head .pill { margin-left: auto; font-family: var(--font-mono); }
.university-block-logo { height: 34px; width: auto; border-radius: 4px; }

/* ===== Program list (landing) ===== */
.program-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.program-card {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.program-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(87,6,140,.25); }
.program-card-info { min-width: 220px; }
.program-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.program-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.program-card-actions .btn { white-space: nowrap; text-decoration: none; }

/* ===== License usage ===== */
.license-panel { padding: 18px 20px; margin-bottom: 14px; }
.license-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }
.license-head strong { font-size: 15px; }
.license-count { font-family: var(--font-mono); font-size: 15px; color: var(--brand-color); font-weight: 600; }
.license-bar { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.license-bar-fill { height: 100%; background: var(--brand-color); border-radius: 999px; transition: width .3s; }
.license-bar-fill.is-warn { background: var(--warn); }
.license-bar-fill.is-over { background: #C0392B; }
.license-caption { font-size: 11.5px; color: var(--muted); margin-top: 8px; }

/* ===== Chat / conversation ===== */
.chat-thread { max-height: 380px; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--border); }
.chat-msg { display: flex; }
.chat-msg-mine { justify-content: flex-end; }
.chat-bubble { max-width: 72%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.chat-msg-mine .chat-bubble { background: var(--brand-color-soft); border-color: var(--brand-color-border); }
.chat-sender { font-size: 10.5px; font-weight: 700; color: var(--brand-color); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .03em; }
.chat-body { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-time { font-size: 10.5px; color: var(--muted); margin-top: 4px; text-align: right; }
.chat-report-btn { background: none; border: none; padding: 0; font-size: 10.5px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.chat-report-btn:hover { color: var(--brand-color); }
.chat-report-btn:disabled { cursor: default; text-decoration: none; }
.chat-identity { padding: 10px 18px 0; font-size: 11.5px; color: var(--muted); }
.chat-identity strong { color: var(--brand-color); }
.chat-compose { display: flex; gap: 10px; padding: 10px 18px 14px; align-items: flex-end; }
.chat-compose textarea {
  flex: 1; min-height: 44px; max-height: 140px; resize: vertical; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13.5px;
}
.chat-compose textarea:focus { border-color: var(--brand-color); }

/* ===== Video call room ===== */
.call-room { max-width: 760px; margin: 0 auto; }
.call-status { text-align: center; font-size: 14px; color: var(--ink); margin-bottom: 14px; min-height: 20px; }
.call-status strong { color: var(--brand-color); }
.call-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 9; background: #14141A; border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border);
}
.call-stage video { width: 100%; height: 100%; object-fit: cover; background: #14141A; }
#remote-video { position: absolute; inset: 0; }
.call-remote-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: 13.5px; text-align: center; padding: 20px;
}
#local-video {
  position: absolute; right: 14px; bottom: 14px; width: 26%; max-width: 180px; aspect-ratio: 16 / 9;
  border-radius: 10px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transform: scaleX(-1);
}
.call-controls { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.call-note { max-width: 60ch; margin: 18px auto 0; text-align: center; font-size: 11.5px; color: var(--muted); }

/* ===== Timeline ===== */
.timeline { list-style: none; margin: 0; padding: 6px 4px; }
.timeline-item {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: start;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--muted); }
.timeline-dot-registered { background: var(--brand-color); }
.timeline-dot-matched { background: var(--good); }
.timeline-dot-profile_updated { background: var(--warn); }
.timeline-dot-meeting_scheduled { background: #2B6CB0; }
.timeline-dot-unmatched { background: #C0392B; }
.timeline-label { font-weight: 700; font-size: 13.5px; }
.timeline-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.timeline-time { font-size: 11.5px; color: var(--muted); text-align: right; line-height: 1.4; white-space: nowrap; }

.site-footer { border-top: 1px solid var(--border); margin-top: 8px; }
.footer-brand {
  max-width: 1080px; margin: 0 auto; padding: 22px 28px 4px; font-size: 12px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.footer-brand a { color: var(--brand-color); text-decoration: none; display: inline-flex; align-items: center; }
.footer-brand-logo { height: 24px; width: auto; display: block; }
.disclaimer { max-width: 1080px; margin: 0 auto; padding: 0 28px 24px; font-size: 10.5px; color: var(--muted); }

@media (max-width: 860px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .chooser-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .page { padding: 26px 16px 56px; }
}