/* ========================================
   Scholarship Tracker — Apple Notes Style
   ======================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Canonical palette + theme variants live in /css/tokens.css.
   This file declares ONLY app-shell-specific layout + special-surface tokens
   that have no equivalent in tokens.css (toast / modal translucent surfaces,
   --font / --transition aliases for legacy selectors, --sidebar-width). */
:root {
  --sidebar-width: 320px;
  --font: var(--font-body);
  --transition: var(--motion-base) var(--motion-ease);
  --bg-modal:  rgba(255, 255, 255, 0.95);
  --bg-toast:  rgba(20, 20, 20, 0.92);
  --shadow-modal: var(--shadow-lg);
}
:root[data-theme="dark"] {
  --bg-modal: rgba(23, 23, 23, 0.95);
  --bg-toast: rgba(50, 50, 50, 0.92);
}

html, body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  scroll-behavior: smooth;
}

.skip-link {
  position: fixed;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 1000;
  transform: translateY(calc(-100% - 16px));
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--motion-ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Full-viewport scroll lock — belongs to the SPA shell ONLY. #app fills the
   flex-resolved app view and its panes scroll internally, so the document itself
   must never scroll there.
   `class="app-shell"` is on <html> in index.html.
   This used to sit on the bare `html, body` selector above, which also caught
   the five auth pages that load this file. `overflow:hidden` on the ROOT
   element propagates to the viewport and kills USER scrolling (wheel, trackpad,
   scrollbar) while leaving programmatic scroll working — so any auth form
   taller than the viewport had its submit button permanently out of reach, with
   zooming out the only way to reach it. auth-pages.css reset `body` but not
   `html`, so the lock survived.
   Keep this scoped: a new page that loads style.css must be scrollable by
   default rather than needing a counter-patch. Guarded by
   tests/auth-page-scrollable.test.js. */
html.app-shell,
html.app-shell body {
  height: 100%;
  overflow: hidden;
}

.sidebar,
.main-content,
.right-panel,
.modal-body,
.cv-left-rail,
.cv-right-sections,
.cv-editor-body,
.resource-list,
.resource-reader-body,
.alumni-main,
.discover-main,
.settings-shell {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .sidebar,
  .main-content,
  .right-panel,
  .modal-body,
  .cv-left-rail,
  .cv-right-sections,
  .cv-editor-body,
  .resource-list,
  .resource-reader-body,
  .alumni-main,
  .discover-main,
  .settings-shell {
    scroll-behavior: auto;
  }
}

/* --- App Layout --- */
.app-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app-content:focus,
[data-main-content-target]:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

#app {
  display: flex;
  height: 100%;
  width: 100vw;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  min-height: 0;
  background: var(--bg-sidebar);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px 8px;
}

.sidebar-title {
  /* Mirror the .main-nav-brand wordmark — same display font + gap as the
     top-nav ScholarshipHub mark, so the two read as part of one unified
     brand system. Size is 25% smaller than the top wordmark (15 vs 20px)
     so the heading defers visually to the nav brand. Weight 500 keeps the
     sans display face restrained at this smaller size. */
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.program-limit-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.program-limit-badge:empty {
  display: none;
}

/* Unlimited / infinity glyph — ∞ at body size reads thinner than digits.
 * Bump its visual weight so "7 / ∞" balances optically and the symbol
 * reads as a deliberate cap rather than a typo. */
.program-limit-badge.is-unlimited {
  padding-right: 10px;
  font-size: 12px;
  letter-spacing: 0;
}
.program-limit-badge.is-unlimited::after { content: ''; }
.usage-infinite {
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  font-weight: 700;
  transform: translateY(1px);
  letter-spacing: 0;
}

.sidebar-icon {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
}

.sidebar-search {
  padding: 8px 16px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: box-shadow var(--transition);
}

.search-input::placeholder { color: var(--text-tertiary); }
.search-input:focus { box-shadow: 0 0 0 2px var(--accent); }

/* Stats bar — also acts as the filter selector (Active / Done / Missed) */
.sidebar-stats {
  display: flex;
  gap: 6px;
  padding: 8px 16px 12px;
}

/* Application readiness meter (Wave 3.5). Sits between the stat buttons and
   the filters: it is a status readout first and a shortcut second, so it gets
   the quieter treatment — no fill colour competing with the stat numbers. */
.sidebar-readiness {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 9px 11px 10px;
  text-align: left;
  font-family: var(--font);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.sidebar-readiness:hover  { border-color: var(--accent); }
.sidebar-readiness:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.sidebar-readiness[hidden] { display: none; }

.sidebar-readiness-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.sidebar-readiness-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-readiness-pct {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.sidebar-readiness-track {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.sidebar-readiness-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--transition);
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-readiness-fill { transition: none; }
}

/* Smart filters (deadline window + pipeline stage) */
.sidebar-filters {
  display: flex;
  gap: 6px;
  padding: 0 16px 10px;
}
.sidebar-filter-select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--text-secondary);
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: all var(--transition);
}
.sidebar-filter-select:hover { border-color: var(--accent); color: var(--text-primary); }
.sidebar-filter-select:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }

.stat {
  flex: 1;
  text-align: center;
  padding: 9px 4px;
  background: var(--bg-hover);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.stat:hover { background: var(--bg-hover); }
.stat[data-filter="active"]:hover    { background: var(--accent-soft); }
.stat[data-filter="completed"]:hover { background: var(--green-light); }
.stat[data-filter="missed"]:hover    { background: var(--red-light); }
.stat:active { transform: scale(0.96); }

.stat-num {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-active-num { color: var(--accent); }
.stat-done       { color: var(--green); }
.stat-missed     { color: var(--red); }

.stat-label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.stat.active[data-filter="active"]    { border-color: var(--accent);  background: var(--accent-soft); }
.stat.active[data-filter="completed"] { border-color: var(--green); background: var(--green-light); }
.stat.active[data-filter="missed"]    { border-color: var(--red);   background: var(--red-light); }
.stat.active .stat-label              { color: var(--text-secondary); }

/* Deadline urgency countdown badge — red (≤7d), amber (8–30d), green (>30d) */
.urgency-badge {
  flex-shrink: 0;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 99px;
  white-space: nowrap;
}
.urgency-red   { background: var(--red-light);    color: var(--red); }
.urgency-amber { background: var(--warning-soft); color: var(--warning); }
.urgency-green { background: var(--green-light);  color: var(--green); }
:root[data-theme="dark"] .urgency-amber {
  background: rgba(255, 204, 0, 0.18);
  color: #fbbf24;
}

/* Program List */
.program-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 16px;
}

.program-list::-webkit-scrollbar { width: 4px; }
.program-list::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 2px; }

.program-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  margin-bottom: 2px;
}

.program-item:hover { background: var(--bg-hover); }

.program-item.active {
  background: var(--bg-active);
  border-color: rgba(37, 110, 91, 0.2);
}

.program-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.program-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.program-item-dot.active { background: var(--accent); }
.program-item-dot.due-soon { background: var(--yellow); animation: pulse 2s ease-in-out infinite; }
.program-item-dot.overdue { background: var(--red); animation: pulse 1.5s ease-in-out infinite; }
.program-item-dot.completed { background: var(--text-tertiary); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

.program-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-item.completed .program-item-name {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.program-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
}

.program-item-org {
  font-size: 11px;
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-item-deadline {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.deadline-ok { background: var(--green-light); color: var(--green); }
.deadline-completed { background: var(--green-light); color: var(--green); font-weight: 600; }
.deadline-soon { background: var(--yellow-light); color: var(--warning); }
.deadline-overdue { background: var(--red-light); color: var(--red); }
.deadline-none { background: var(--bg-hover); color: var(--text-tertiary); }

/* --- Main Content --- */
.main-content {
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  background: var(--bg-primary);
}

.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 3px; }

/* --- This Week application planner (FEATURE_WEEKLY_PLAN) --- */
.weekly-plan {
  margin: 24px 32px 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-secondary);
}
.weekly-plan.hidden { display: none; }
.weekly-plan-header { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.weekly-plan-heading h2 { margin: 2px 0 0; font-size: 24px; line-height: 1.15; color: var(--text-primary); }
.weekly-plan-eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
.weekly-plan-summary { margin: 0; max-width: 430px; color: var(--text-secondary); font-size: 13px; text-align: right; }
.weekly-plan-collapse-toggle { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-primary); color: var(--text-secondary); font: inherit; font-size: 16px; cursor: pointer; }
.weekly-plan-collapse-toggle:hover { color: var(--accent); border-color: var(--accent); }
.weekly-plan-collapse-toggle:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.weekly-plan-body[hidden] { display: none; }
.weekly-plan-digest-return { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 11px; background: color-mix(in srgb, var(--accent-light) 42%, var(--bg-primary)); }
.weekly-plan-digest-return-copy { display: grid; gap: 2px; min-width: 0; }
.weekly-plan-digest-return-copy strong { color: var(--text-primary); font-size: 13px; }
.weekly-plan-digest-return-copy span { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.weekly-plan-item[data-digest-return-target] { scroll-margin-block: 24px; }
.weekly-plan-item[data-digest-return-target]:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.weekly-plan-review { display: grid; gap: 7px; margin: 0 0 16px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-primary); }
.weekly-plan-review.is-in_progress { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent-light) 35%, var(--bg-primary)); }
.weekly-plan-review.is-completed { border-color: var(--green); background: var(--green-light); }
.weekly-plan-review-eyebrow { margin: 0; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.weekly-plan-review h3 { margin: 0; color: var(--text-primary); font-size: 16px; line-height: 1.35; }
.weekly-plan-review-description, .weekly-plan-review-status p, .weekly-plan-review-no-commitment { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.weekly-plan-review-actions, .weekly-plan-review-start-error, .weekly-plan-review-load-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.weekly-plan-review-start-error, .weekly-plan-review-load-error { margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--border); }
.weekly-plan-review-start-error p, .weekly-plan-review-load-error p { flex: 1 1 260px; margin: 0; color: var(--red); font-size: 12px; line-height: 1.45; }
.weekly-plan-review-start-error [role="alert"]:focus, .weekly-plan-review-status:focus { outline: 2px solid var(--accent-light); outline-offset: 3px; border-radius: 4px; }
.weekly-plan-review-commitment { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; margin-top: 3px; padding: 10px 11px; border-radius: 8px; background: var(--bg-primary); overflow-wrap: anywhere; }
.weekly-plan-review-program { width: 100%; margin: 0; color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.weekly-plan-review-commitment strong { color: var(--text-primary); font-size: 13px; }
.weekly-plan-review-commitment span { color: var(--text-secondary); font-size: 11px; }
.weekly-plan-review button { min-height: 44px; }
.weekly-plan-onboarding { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.weekly-plan-step { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 9px; background: var(--bg-primary); color: var(--text-secondary); font-size: 12px; }
.weekly-plan-step-mark { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--border); border-radius: 50%; font-size: 11px; font-weight: 700; }
.weekly-plan-step.is-done { color: var(--green); }
.weekly-plan-step.is-done .weekly-plan-step-mark { border-color: var(--green); background: var(--green-light); }
.weekly-plan-activation { display: grid; grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); gap: 20px; margin-bottom: 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-primary); }
.weekly-plan-activation-progress { min-width: 0; padding: 2px 2px 2px 0; }
.weekly-plan-activation-eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.weekly-plan-activation-progress h3 { margin: 0; color: var(--text-primary); font-size: 17px; line-height: 1.3; }
.weekly-plan-activation-intro { margin: 7px 0 14px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.weekly-plan-activation-steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.weekly-plan-activation-step { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-tertiary); font-size: 12px; line-height: 1.35; }
.weekly-plan-activation-step[aria-current="step"] { color: var(--text-primary); font-weight: 650; }
.weekly-plan-activation-step.is-done { color: var(--green); }
.weekly-plan-activation-step-mark { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-secondary); color: inherit; font-size: 10px; font-weight: 750; }
.weekly-plan-activation-step[aria-current="step"] .weekly-plan-activation-step-mark { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.weekly-plan-activation-step.is-done .weekly-plan-activation-step-mark { border-color: var(--green); background: var(--green-light); }
.weekly-plan-activation-task { min-width: 0; }
.weekly-plan-activation-task-heading { margin: 0 0 9px; }
.weekly-plan-activation-task-heading h4 { margin: 0 0 3px; color: var(--text-primary); font-size: 14px; line-height: 1.35; }
.weekly-plan-activation-task-heading p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.weekly-plan-activation .weekly-plan-item { height: auto; padding: 14px; background: var(--bg-secondary); }
.weekly-plan-activation .weekly-plan-item-top { margin-bottom: 10px; }
.weekly-plan-activation-deadline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 10px; }
.weekly-plan-activation-deadline-form label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 650; }
.weekly-plan-activation-deadline-form input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 12px; }
.weekly-plan-activation-deadline-form input:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 1px; border-color: var(--accent); }
.weekly-plan-form-status, .weekly-plan-form-error { grid-column: 1 / -1; margin: 0; font-size: 11px; line-height: 1.45; }
.weekly-plan-form-status { color: var(--text-secondary); }
.weekly-plan-form-error { padding: 7px 9px; border-radius: var(--radius-sm); background: var(--red-light); color: var(--red); }
.weekly-plan-form-error.hidden { display: none; }
.weekly-plan-form .weekly-plan-form-error { grid-column: 1 / -1; }
.weekly-plan-activation-refresh { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--red-light); color: var(--red); font-size: 11px; }
.weekly-plan-activation-refresh.hidden { display: none; }
.weekly-plan-activation-success { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 9px; margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--green); border-radius: var(--radius-md); background: var(--green-light); color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.weekly-plan-activation-success strong { color: var(--green); }
.portfolio-risk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-bottom: 14px; padding: 14px 15px; border: 1px solid var(--border); border-radius: 11px; background: var(--bg-primary); }
.portfolio-risk.is-entitled { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent-light) 45%, var(--bg-primary)); }
.portfolio-risk-eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.portfolio-risk-copy h3 { margin: 0 0 4px; color: var(--text-primary); font-size: 15px; line-height: 1.3; }
.portfolio-risk-copy > p:last-child { margin: 0; max-width: 700px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.portfolio-risk-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.portfolio-risk-results { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; }
.portfolio-risk-results.hidden { display: none; }
.portfolio-risk-summary { margin: 0 0 8px; color: var(--text-primary); font-weight: 650; }
.portfolio-risk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.portfolio-risk-item { display: grid; gap: 3px; padding: 9px 10px; border-left: 3px solid var(--warning); border-radius: 7px; background: var(--bg-secondary); }
.portfolio-risk-item.is-high { border-left-color: var(--red); }
.portfolio-risk-item strong { color: var(--text-primary); font-size: 12px; }
.portfolio-risk-item span { overflow-wrap: anywhere; }
.weekly-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.weekly-plan-item { min-width: 0; padding: 15px; border: 1px solid var(--border); border-top: 3px solid var(--border); border-radius: 12px; background: var(--bg-primary); }
.weekly-plan-item.priority-high { border-top-color: var(--red); }
.weekly-plan-item.priority-medium { border-top-color: var(--warning); }
.weekly-plan-item.priority-low { border-top-color: var(--green); }
.weekly-plan-item-top { display: flex; align-items: start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.weekly-plan-program { min-width: 0; border: 0; padding: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.weekly-plan-program:hover, .weekly-plan-program:focus-visible { color: var(--accent); }
.weekly-plan-priority, .weekly-plan-state { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 7px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.weekly-plan-priority.is-high { color: var(--red); background: var(--red-light); }
.weekly-plan-priority.is-medium { color: var(--warning); background: var(--yellow-light); }
.weekly-plan-priority.is-low { color: var(--green); background: var(--green-light); }
.weekly-plan-state { margin-bottom: 7px; color: var(--accent); background: var(--accent-light); }
.weekly-plan-state.is-waiting { color: var(--warning); background: var(--yellow-light); }
.weekly-plan-action-title { margin: 0 0 6px; font-size: 15px; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.weekly-plan-action-meta, .weekly-plan-blocker, .weekly-plan-completed { margin: 0 0 10px; color: var(--text-secondary); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.weekly-plan-blocker { padding: 7px 9px; border-radius: 7px; background: var(--yellow-light); color: var(--warning); }
.weekly-plan-completed { color: var(--green); }
.weekly-plan-suggestion-context { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.weekly-plan-suggestion-badge { padding: 3px 7px; border-radius: 999px; background: var(--accent-light); color: var(--accent); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.weekly-plan-suggestion-mode { color: var(--text-tertiary); font-size: 10px; }
.weekly-plan-suggestion-ai-badge { padding: 3px 7px; border-radius: 999px; background: var(--purple-light, #f1ebff); color: var(--purple, #6f4cc3); font-size: 9px; font-weight: 750; letter-spacing: .02em; }
.weekly-plan-suggestion-reason { margin: -2px 0 11px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.weekly-plan-suggestion-status { width: 100%; margin: 0 0 8px; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.weekly-plan-ai-refine { border: 1px solid var(--accent); border-radius: var(--radius-sm, 6px); padding: 5px 10px; background: var(--accent-light); color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.weekly-plan-ai-refine:hover, .weekly-plan-ai-refine:focus-visible { background: var(--accent); color: #fff; }
.weekly-plan-ai-refine:disabled { opacity: .55; cursor: wait; }
.weekly-plan-ai-note { margin: 9px 0 0; color: var(--text-tertiary); font-size: 9.5px; line-height: 1.45; overflow-wrap: anywhere; }
.weekly-plan-ai-note.is-warning { color: var(--warning); }
.weekly-plan .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.weekly-plan-manual-link { border: 0; padding: 6px 2px; background: transparent; color: var(--text-tertiary); font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.weekly-plan-manual-link:hover, .weekly-plan-manual-link:focus-visible { color: var(--accent); }
.weekly-plan-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.weekly-plan-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.weekly-plan-reasons span { padding: 3px 6px; border-radius: 6px; background: var(--bg-hover); color: var(--text-tertiary); font-size: 10px; }
.weekly-plan-editor { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.weekly-plan-editor.hidden { display: none; }
.weekly-plan-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.weekly-plan-form label { display: grid; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.weekly-plan-form label:first-child, .weekly-plan-form label:nth-child(4), .weekly-plan-form .weekly-plan-buttons { grid-column: 1 / -1; }
.weekly-plan-suggestion-form label:nth-child(2) { grid-column: auto; }
.weekly-plan-suggestion-form .weekly-plan-suggestion-status, .weekly-plan-suggestion-form .weekly-plan-buttons { grid-column: 1 / -1; }
.weekly-plan-form input, .weekly-plan-form select, .weekly-plan-form textarea { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 12px; }
.weekly-plan-form input:focus, .weekly-plan-form select:focus, .weekly-plan-form textarea:focus { outline: 2px solid var(--accent-light); border-color: var(--accent); }
.weekly-plan-later { margin-top: 12px; }
.weekly-plan-later > summary { width: fit-content; padding: 6px 2px; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; }
.weekly-plan-later-list { margin-top: 8px; }

@media (max-width: 900px) {
  .weekly-plan-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .weekly-plan { margin: 16px 14px 6px; padding: 16px; border-radius: 13px; }
  .weekly-plan-header { align-items: start; flex-wrap: wrap; gap: 7px; }
  .weekly-plan-heading { flex: 1 1 calc(100% - 40px); }
  .weekly-plan-collapse-toggle { margin-left: auto; }
  .weekly-plan-summary { text-align: left; }
  .weekly-plan-review-actions, .weekly-plan-review-start-error, .weekly-plan-review-load-error { align-items: stretch; flex-direction: column; }
  .weekly-plan-review-actions button, .weekly-plan-review-start-error button, .weekly-plan-review-load-error button { width: 100%; justify-content: center; }
  .weekly-plan-review-start-error p, .weekly-plan-review-load-error p { flex-basis: auto; overflow-wrap: anywhere; }
  .weekly-plan-onboarding { grid-template-columns: 1fr; }
  .weekly-plan-activation { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .weekly-plan-activation-deadline-form { grid-template-columns: 1fr; }
  .weekly-plan-activation button, .weekly-plan-activation input { min-height: 44px; }
  .weekly-plan-activation .btn-primary[type="submit"] { width: 100%; justify-content: center; }
  .weekly-plan-activation-refresh { align-items: stretch; flex-direction: column; }
  .weekly-plan-collapse-toggle { width: 44px; height: 44px; flex-basis: 44px; }
  .portfolio-risk { grid-template-columns: 1fr; }
  .portfolio-risk-actions { justify-content: flex-start; }
  .portfolio-risk-list { grid-template-columns: 1fr; }
  .weekly-plan-form { grid-template-columns: 1fr; }
  .weekly-plan-form label, .weekly-plan-form label:first-child, .weekly-plan-form label:nth-child(4), .weekly-plan-form .weekly-plan-buttons { grid-column: 1; }
}

@media (max-width: 620px) {
  .weekly-plan-digest-return { align-items: stretch; flex-direction: column; gap: 10px; }
  .weekly-plan-digest-return .btn-primary { width: 100%; min-height: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .weekly-plan-digest-return, .weekly-plan-item[data-digest-return-target] { transition: none; }
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--text-tertiary);
}

.empty-illustration { margin-bottom: 8px; }
.empty-state h2 { font-size: 20px; font-weight: 600; color: var(--text-secondary); }
.empty-state p { font-size: 14px; }
.empty-state-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.empty-state.has-discover-preview {
  justify-content: flex-start;
  height: auto;
  min-height: 100%;
  padding: 32px;
}
.empty-state-discover-preview {
  width: min(100%, 920px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  color: var(--text-primary);
}

@media (max-width: 700px) {
  .empty-state.has-discover-preview { padding: 24px 16px; }
  .empty-state-discover-preview { grid-template-columns: 1fr; }
}

/* --- Program Detail --- */
.program-detail { padding: 0; }
.program-detail.hidden { display: none; }
.program-detail-focus-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.detail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 32px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 10;
  backdrop-filter: blur(20px);
}

.detail-toolbar-left, .detail-toolbar-right { display: flex; align-items: center; gap: 8px; }

.detail-body { padding: 24px 32px 48px; max-width: 1280px; }

/* Two-column layout: Eligibility + Checklist on the left, Notes on the right.
   Left column flex-stacks the two sections; right Notes column stretches to match. */
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px 28px;
  align-items: start;
}
.detail-grid-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.detail-section-elig,
.detail-section-notes,
.detail-section-checklist { margin-bottom: 0; }

/* Notes right column — same default height as Eligibility, independently resizable */
.detail-section-notes textarea {
  resize: vertical;
}

@media (max-width: 1280px) {
  .detail-grid { grid-template-columns: 1fr; gap: 24px; }
}

.detail-name {
  width: 100%;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  outline: none;
  padding: 0 0 16px;
  resize: none;
  line-height: 1.25;
  overflow: hidden;
  display: block;
  word-break: break-word;
}

.detail-name::placeholder { color: var(--text-tertiary); }

/* Meta fields */
.detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.meta-field { display: flex; flex-direction: column; gap: 4px; }
.meta-field:last-child { grid-column: 1 / -1; }

.meta-field label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.meta-field input {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  padding: 4px 0;
}

.meta-field input::placeholder { color: var(--text-tertiary); }

.url-field { display: flex; align-items: center; gap: 8px; }
.url-field input { flex: 1; }

.url-open-btn {
  color: var(--accent);
  text-decoration: none;
  padding: 4px;
  border-radius: 4px;
  transition: background var(--transition);
}

.url-open-btn:hover { background: var(--accent-light); }

/* Detail sections */
.detail-section { margin-bottom: 24px; }

.detail-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.detail-section textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition);
}

.detail-section textarea:focus { border-color: var(--accent); }
.detail-section textarea::placeholder { color: var(--text-tertiary); }

/* --- Checklist --- */
.checklist-progress {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: auto;
}

.checklist-progress-bar {
  height: 4px;
  background: var(--bg-input);
  border-radius: 2px;
  margin-bottom: 12px;
  overflow: hidden;
}

.checklist-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  width: 0%;
}

.checklist { list-style: none; }

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  transition: opacity var(--transition);
}

.checklist-item:last-child { border-bottom: none; }

.checklist-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
}

.checklist-checkbox:hover { border-color: var(--accent); }

.checklist-checkbox.checked {
  background: var(--green);
  border-color: var(--green);
}

.checklist-checkbox.checked svg { display: block; }
.checklist-checkbox svg { display: none; }

.checklist-label {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary);
  transition: all var(--transition);
}

.checklist-item.checked .checklist-label {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.checklist-label-edit {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--accent);
  outline: none;
  font-size: 14px;
  font-family: var(--font);
  color: var(--text-primary);
  padding: 0 0 1px;
  width: 100%;
}

.checklist-delete {
  opacity: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all var(--transition);
}

.checklist-item:hover .checklist-delete { opacity: 1; }
.checklist-delete:hover { color: var(--red); background: var(--red-light); }

.checklist-add {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  align-items: center;
}

.checklist-add-field {
  flex: 1;
  position: relative;
}

.checklist-new-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13.5px;
  outline: none;
  resize: none;
  overflow-y: hidden;
  line-height: 1.6;
  min-height: 36px;
  max-height: 220px;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.checklist-new-input:focus {
  border-color: var(--accent);
  border-style: solid;
  background: var(--bg-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.checklist-new-input::placeholder { color: var(--text-tertiary); font-style: italic; }

.checklist-item-count {
  position: absolute;
  right: 10px;
  bottom: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-primary));
  padding: 2px 8px;
  border-radius: 10px;
  pointer-events: none;
  line-height: 1.6;
}
.checklist-item-count.hidden { display: none; }

.checklist-bulk-hint {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
}
.checklist-bulk-hint .hint-sep {
  opacity: 0.4;
  font-size: 10px;
  user-select: none;
  flex-shrink: 0;
}
.checklist-bulk-hint kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font);
  font-size: 10.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  box-shadow: 0 1px 0 var(--border);
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
}

.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245, 166, 35, 0.4); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
/* .btn-danger styling now lives in /css/tokens.css §5.1 (status colors).
   Old override removed so the new red token cascades correctly. */

.btn-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-ai-settings { color: var(--accent); }
.btn-ai-settings:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

.btn-small {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-small:hover { background: var(--accent-hover); }

/* --- Status badges --- */
.status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-active { background: var(--green-light); color: var(--green); }
.status-due-soon { background: var(--yellow-light); color: var(--warning); }
.status-overdue { background: var(--red-light); color: var(--red); }
.status-completed { background: var(--bg-hover); color: var(--text-tertiary); }

.reminder-menu-wrap {
  position: relative;
}

.reminder-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  /* Default: no reminder set — muted style */
  color: var(--text-tertiary);
  background: var(--bg-secondary);
}
.reminder-badge:hover { background: var(--bg-hover); color: var(--text-secondary); }
.reminder-badge.reminder-set {
  color: var(--accent);
  background: var(--accent-light);
}
.reminder-badge.reminder-set:hover { background: rgba(245, 166, 35, 0.2); }

/* ── Reminder dropdown ────────────────────────────────────────────────── */

.reminder-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 300;
  overflow: hidden;
}

.reminder-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition);
  color: var(--text-primary);
  font-family: var(--font);
}
.reminder-opt:hover { background: var(--bg-hover); }

.reminder-opt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.reminder-opt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reminder-opt-title { font-size: 13px; font-weight: 500; }
.reminder-opt-sub { font-size: 11px; color: var(--text-tertiary); }

.reminder-mac-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.reminder-divider {
  height: 1px;
  background: var(--border);
  margin: 0 14px;
}

/* --- Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal-overlay.hidden { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-modal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  backdrop-filter: blur(40px);
  animation: modalSlideUp 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 2px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
}

.modal-header h2 { font-size: 18px; font-weight: 700; }
.modal-heading { min-width: 0; }
.program-limit-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}
.program-limit-notice .btn-link { min-height: 32px; padding: 0; font-size: inherit; }

.modal-header-right { display: flex; flex-direction: row; align-items: center; gap: 4px; }

.modal-tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  margin-bottom: 16px;
}

.modal-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.modal-tab:hover { background: var(--bg-hover); }
.modal-tab.active { background: var(--accent-light); color: var(--accent); font-weight: 600; }

.modal-tab-content { padding: 0 24px; display: none; }
.modal-tab-content.active { display: block; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 20px;
}

/* Form elements */
.form-group { margin-bottom: 14px; }

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus { border-color: var(--accent); }

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-tertiary); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.url-fetch-row { display: flex; gap: 8px; }
.url-fetch-row input { flex: 1; }

.ai-url-bulk { font-family: var(--font-mono, monospace); font-size: 0.8rem; resize: vertical; }
.field-hint { margin: 4px 0 0; font-size: 0.75rem; color: var(--text-tertiary); }

/* AI confidence warning badge — injected next to labels of uncertain fields */
.ai-flag-badge {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 6px; border-radius: 4px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  background: var(--yellow-light); color: #a07000;
  cursor: default; vertical-align: middle;
}
.dark-mode .ai-flag-badge { color: var(--yellow); }

/* Auth page submit spinner */
.auth-submit-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 6px;
  border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.url-preview { margin-top: 12px; }
.url-preview h4 { font-size: 14px; margin-bottom: 4px; }
.url-preview-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.url-preview-content-wrapper { margin-bottom: 12px; }

.url-preview textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
}

.url-hint { font-size: 12px; color: var(--accent); margin-bottom: 12px; font-style: italic; }

/* Spinner */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.spinner.hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Toast --- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 20px;
  /* Theme-aware surface + text: elevated bg + primary text guarantees
   * AA contrast in both light + dark. Previously used --bg-toast (which
   * was never defined → transparent bg) + --text-inverse (which flips to
   * near-black in dark mode → unreadable). */
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  max-width: 360px;
}

.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--accent); }
.toast.warn,
.toast.warning { border-left: 3px solid var(--warning, #E0B062); }

/* Toast with an action button (CV Undo). */
.toast.has-action { display: flex; align-items: center; gap: 12px; }
.toast-action {
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.toast-action:hover { background: var(--bg-input); }
.toast-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

/* --- Utilities --- */
.hidden { display: none !important; }

/* Program list skeleton. Visible until Sidebar.render() replaces the
   <ul> contents on first boot. Removes the "empty sidebar then snap to
   list" flash. Shimmer keyframes reused below. */
.program-skeleton {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  list-style: none;
}
.program-skeleton-line {
  height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-hover) 0%, var(--bg-secondary) 50%, var(--bg-hover) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s ease-in-out infinite;
}
.program-skeleton-line-short { width: 60%; }
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Pre-boot view gate. view-preload.js stamps <html data-boot-view="X"> from
   the same source app.js#_restoreView() uses. We hide every .app-view that
   isn't the target so the user never sees the wrong section flash before
   switchView() runs. app.js still toggles .hidden after boot — these rules
   only govern the FIRST PAINT.
   Selector specificity (attribute + id) beats the default .app-view rules
   but stays below .hidden's !important so JS view-switching still works.
   IMPORTANT: reveal MUST use display:flex (matches the base .app-view rule
   above, line 3026). Earlier versions used display:block which broke the
   row-flex layout of #view-resources / #view-alumni / etc (sidebar would
   stack above the main pane instead of sitting beside it). */
html[data-boot-view] .app-view             { display: none; }
html[data-boot-view="programs"]    #view-programs,
html[data-boot-view="discover"]    #view-discover,
html[data-boot-view="resources"]   #view-resources,
html[data-boot-view="alumni"]      #view-alumni,
html[data-boot-view="services"]    #view-services,
html[data-boot-view="marketplace"] #view-marketplace,
html[data-boot-view="cv"]          #view-cv,
html[data-boot-view="community"]   #view-community,
html[data-boot-view="settings"]    #view-settings { display: flex; }
.btn-full { width: 100%; justify-content: center; }
.btn-link { background: none; border: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }

/* ── Bulk Import ─────────────────────────────────────────────────────────── */
.bulk-progress-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.bulk-progress-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 6px;
  font-size: 12.5px;
  background: var(--bg-primary);
}
.bulk-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.bulk-url {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 11.5px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.bulk-status {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.bulk-pending  .bulk-status { color: var(--text-tertiary); }
.bulk-fetching .bulk-status { color: var(--accent); }
.bulk-success  { background: var(--green-light); border-color: transparent; }
.bulk-success  .bulk-status { color: var(--green); }
.bulk-failed   { background: var(--red-light); border-color: transparent; }
.bulk-failed   .bulk-status { color: var(--red); }

/* ── Program Comparison ─────────────────────────────────────────────────── */
.sidebar-header-actions { display: flex; gap: 4px; align-items: center; }
.btn-icon.active { background: var(--accent); color: #fff; }

.compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-active);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-primary);
}
.compare-bar-actions { display: flex; gap: 6px; }
.btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: var(--radius-sm, 6px); }
.btn-primary.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }

.program-item.compare-mode { cursor: pointer; }
.program-item.compare-checked { background: var(--bg-active); border-color: var(--accent); }
.program-item-compare {
  margin: 0 4px 0 0;
  cursor: pointer;
  flex-shrink: 0;
}

.compare-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.compare-modal {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  max-width: 1100px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.compare-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.compare-modal-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.compare-modal-body { overflow: auto; padding: 16px 20px 20px; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.compare-table th, .compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.compare-row-label {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 130px;
  background: var(--bg-secondary);
}
.compare-deadline-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--bg-hover);
  font-size: 10.5px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .compare-modal { max-height: 100vh; border-radius: 0; }
  .compare-overlay { padding: 0; }
  .compare-table th, .compare-table td { padding: 8px; font-size: 12px; }
  .compare-row-label { min-width: 90px; }
}

/* ── Application Pipeline Stepper ───────────────────────────────────────── */
.status-pipeline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.pipeline-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: 99px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.pipeline-step:hover { border-color: var(--accent); color: var(--text-primary); }
.pipeline-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-hover);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
}
.pipeline-step.done {
  background: var(--green-light);
  color: var(--green);
  border-color: transparent;
}
.pipeline-step.done .pipeline-step-num { background: var(--green); color: #fff; }
.pipeline-step.current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 6px rgba(245, 166, 35, 0.25);
}
.pipeline-step.current .pipeline-step-num { background: rgba(255,255,255,0.25); color: #fff; }
.pipeline-connector {
  flex: 0 0 18px;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  transition: background var(--transition);
}
.pipeline-connector.done { background: var(--green); }

/* ── Per-Program preparation evidence ───────────────────────────────────── */
.application-preparation {
  padding: 18px 24px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.application-preparation-frame {
  max-width: 1280px;
  min-width: 0;
  margin: 0 auto;
  padding: 18px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.application-preparation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.application-preparation-frame.is-collapsed .application-preparation-header { margin-bottom: 0; }
.application-preparation-heading { min-width: 0; }
.application-preparation-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 8px;
}
.application-preparation-eyebrow {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.application-preparation-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1.25;
}
.application-preparation-description {
  max-width: 640px;
  margin: 5px 0 0;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.5;
}
.application-preparation-summary {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.application-preparation-progress {
  display: block;
  width: min(100%, 440px);
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--bg-hover);
}
.application-preparation-progress::-webkit-progress-bar { background: var(--bg-hover); }
.application-preparation-progress::-webkit-progress-value { background: var(--accent); }
.application-preparation-progress::-moz-progress-bar { background: var(--accent); }
.application-preparation-body[hidden] { display: none; }
.application-preparation-collapse-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font: 600 16px/1 var(--font);
  cursor: pointer;
}
.application-preparation-collapse-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.application-preparation-collapse-toggle:active { transform: translateY(1px); }
.application-preparation-collapse-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.application-preparation-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 12px;
}
.application-preparation-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.application-preparation-completed {
  margin-top: 12px;
  border-top: 1px solid var(--border);
}
.application-preparation-completed-summary {
  display: flex;
  min-height: 44px;
  width: fit-content;
  align-items: center;
  padding: 8px 2px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.application-preparation-completed-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.application-preparation-completed-list { margin-top: 4px; }
.application-preparation-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.application-preparation-item-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.application-preparation-copy {
  min-width: 0;
}
.application-preparation-status {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.application-preparation-item.is-complete .application-preparation-status { color: var(--green); }
.application-preparation-copy h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.35;
}
.application-preparation-copy p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.application-preparation-item-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.application-preparation-action {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: 600 11px/1.2 var(--font);
  cursor: pointer;
}
.application-preparation-action:hover { background: var(--accent-soft); }
.application-preparation-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.application-preparation-action.is-secondary {
  border-color: var(--border);
  color: var(--text-secondary);
}
.application-preparation-action:disabled { opacity: 0.55; cursor: wait; }
.application-preparation-confirmation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.application-preparation-confirmation label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.application-preparation-confirmation select {
  width: 100%;
  min-height: 44px;
  margin-top: 5px;
  padding: 8px 30px 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
}
.application-preparation-confirmation-error {
  grid-column: 1 / -1;
  min-height: 16px;
  margin: 0;
  color: var(--red);
  font-size: 11px;
}
.application-preparation-confirmation-actions {
  display: flex;
  align-items: end;
  gap: 6px;
}
.application-preparation-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  background: var(--red-light);
}
.application-preparation-error p { margin: 0; color: var(--text-primary); font-size: 12px; }
.application-preparation-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.application-preparation-skeleton span {
  display: block;
  height: 78px;
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  animation: readiness-pulse 1.4s ease-in-out infinite;
}
@keyframes readiness-pulse { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .application-preparation-skeleton span { animation: none; }
}

@media (max-width: 1100px) {
  .application-preparation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-preparation-confirmation-actions { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .status-pipeline { padding: 10px 12px; gap: 4px; }
  .pipeline-step { padding: 5px 10px; font-size: 11px; }
  .pipeline-step-label { display: none; }
  .pipeline-connector { flex-basis: 10px; }
  .application-preparation { padding: 12px; }
  .application-preparation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .application-preparation-item-main { flex-direction: column; }
  .application-preparation-item-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .application-preparation-item-actions .application-preparation-action { flex: 1 1 130px; }
}

@media (max-width: 480px) {
  .application-preparation-frame { padding: 14px; }
  .application-preparation-header { flex-direction: column; gap: 12px; }
  .application-preparation-header-actions { width: 100%; }
  .application-preparation-next-action { flex: 1 1 auto; }
  .application-preparation-list { grid-template-columns: 1fr; }
  .application-preparation-confirmation { grid-template-columns: 1fr; }
  .application-preparation-confirmation-actions { align-items: stretch; flex-direction: column; }
  .application-preparation-error { align-items: stretch; flex-direction: column; }
}

/* ── Detail Tabs ─────────────────────────────────────────────────────────── */
.detail-tabs {
  display: flex;
  gap: 2px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  position: sticky;
  top: 57px;
  z-index: 9;
}

.detail-tab {
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.detail-tab:hover { color: var(--text-primary); }
.detail-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.tab-badge {
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.4;
}

.detail-tab-panel { display: block; }
.detail-tab-panel.hidden { display: none; }

/* ── Section hint ────────────────────────────────────────────────────────── */
.section-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: 14px;
  margin-top: -4px;
}

/* ── Upload drop zone (shared) ───────────────────────────────────────────── */
.upload-drop-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-secondary);
}

.upload-drop-zone:hover, .upload-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-light);
}

.upload-drop-content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; pointer-events: none; flex-wrap: wrap; }
.upload-drop-content svg { color: var(--text-tertiary); width: 20px; height: 20px; }
.upload-drop-content p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.upload-browse { color: var(--accent); cursor: pointer; font-weight: 500; pointer-events: auto; }
.upload-browse:hover { text-decoration: underline; }
.upload-hint { font-size: 11px; color: var(--text-tertiary); }

/* ── Documents Tab ───────────────────────────────────────────────────────── */
.doc-drop-zone { margin-bottom: 12px; }

.doc-upload-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 8px 0;
}

.spinner-dark {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.doc-files-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.doc-empty { font-size: 13px; color: var(--text-tertiary); padding: 8px 0; }

.doc-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color var(--transition);
}

.doc-file-item:hover { border-color: var(--border-strong); }
.doc-file-icon { font-size: 20px; flex-shrink: 0; }
.doc-file-info { flex: 1; min-width: 0; }
.doc-file-name { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-file-meta { font-size: 11px; color: var(--text-tertiary); }

.doc-file-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.btn-doc-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-reanalyze:hover { background: var(--accent-light); color: var(--accent); }
.btn-doc-delete:hover { background: var(--red-light); color: var(--red); }

/* Link sections */
.link-add-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.link-add-row input[type="url"],
.link-add-row input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
}
.link-add-row input[type="text"] { flex: 0 0 160px; }
.link-add-row input:focus { outline: none; border-color: var(--accent); }

.link-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }

.link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color var(--transition);
}
.link-item:hover { border-color: var(--border-strong); }
.link-item-icon { color: var(--accent); flex-shrink: 0; display: flex; align-items: center; }
.link-item-info { flex: 1; min-width: 0; }
.link-item-title { display: block; font-size: 13px; font-weight: 500; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.link-item-title:hover { text-decoration: underline; }
.link-item-url { display: block; font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

/* ── AI Update Section ───────────────────────────────────────────────────── */
.update-input-group {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.update-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 12px;
}
.update-or-divider::before, .update-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.update-file-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.update-file-pick:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }

.update-results-container { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.update-summary-card {
  padding: 12px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}

.update-summary-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.update-changes-list { display: flex; flex-direction: column; gap: 10px; }

.change-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--bg-secondary);
}

.change-card-header {
  margin-bottom: 8px;
}

.change-card-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.change-field-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.change-old {
  font-size: 12px;
  color: var(--red);
  background: var(--red-light);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow-y: auto;
  text-decoration: line-through;
  opacity: 0.8;
}

.change-arrow { text-align: center; font-size: 16px; color: var(--text-tertiary); margin: 2px 0; }

.change-new {
  font-size: 12px;
  color: var(--green);
  background: var(--green-light);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 100px;
  overflow-y: auto;
}

.change-new-docs { padding-left: 16px; margin: 4px 0 0; font-size: 13px; color: var(--text-primary); }
.change-new-docs li { margin-bottom: 2px; }

.update-result-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}

/* ── Essay Assistant ─────────────────────────────────────────────────────── */
.essay-section { border-top: 1px solid var(--border); padding-top: 24px; margin-top: 8px; }

/* ── Essay Blueprint Accordion ─── */
.essay-blueprint {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  margin-bottom: 16px;
}
.essay-blueprint-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--bg-secondary);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  user-select: none;
}
.essay-blueprint-toggle::-webkit-details-marker { display: none; }
.essay-blueprint-toggle span { flex: 1; }
.blueprint-chevron { transition: transform 0.2s; flex-shrink: 0; }
details[open] .blueprint-chevron { transform: rotate(180deg); }

.essay-blueprint-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--border);
}

/* Intro + compare */
.blueprint-intro p { font-size: 13px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.55; }
.blueprint-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.compare-col {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm, 6px);
  padding: 10px 12px;
}
.compare-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
  margin-bottom: 4px;
}
.compare-col p { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* 5 paragraphs */
.blueprint-paragraphs { display: flex; flex-direction: column; gap: 2px; }
.blueprint-para {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-secondary);
}
.blueprint-para-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blueprint-para-body { flex: 1; min-width: 0; }
.blueprint-para-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.blueprint-para-body p { font-size: 12px; color: var(--text-secondary); margin: 0; line-height: 1.5; }

/* Magic 3 rules */
.blueprint-rules {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm, 6px);
  padding: 12px;
}
.blueprint-rules-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.blueprint-rule { display: flex; gap: 8px; margin-bottom: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.blueprint-rule:last-child { margin-bottom: 0; }
.blueprint-rule-num { flex-shrink: 0; font-weight: 700; color: var(--accent); width: 18px; }

/* Tech specs */
.blueprint-specs { display: flex; flex-direction: column; gap: 4px; }
.blueprint-spec { display: flex; gap: 10px; font-size: 12px; line-height: 1.5; }
.spec-label { flex-shrink: 0; min-width: 110px; font-weight: 600; color: var(--text-primary); }
.spec-val { color: var(--text-secondary); }

/* Worksheet */
.blueprint-worksheet {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  padding: 12px;
}
.blueprint-worksheet-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.blueprint-worksheet-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blueprint-worksheet-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.blueprint-worksheet-list strong { color: var(--text-primary); }

.profile-char-count {
  text-align: right;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.essay-results-container { margin-top: 24px; }
.essay-guidance { display: flex; flex-direction: column; gap: 14px; }
.essay-generated-at { font-size: 11px; color: var(--text-tertiary); margin-bottom: -4px; }

.essay-streaming {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.essay-streaming-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}
.essay-streaming-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.essay-streaming-body strong { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.essay-streaming-progress { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.guidance-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}

.guidance-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guidance-text { font-size: 13px; color: var(--text-primary); line-height: 1.6; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.guidance-chip {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-light);
  color: var(--accent);
}
.chip-green { background: var(--green-light); color: var(--green); }
.chip-red { background: var(--red-light); color: var(--red); }

/* Fit Analysis */
.fit-card { }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.fit-col ul { padding-left: 14px; font-size: 12px; color: var(--text-primary); line-height: 1.6; }

.fit-col-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.unique-angle {
  padding: 10px 12px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}
.unique-angle-label { font-weight: 600; margin-right: 6px; }

/* Essay Strategy */
.strategy-row { margin-bottom: 12px; }
.strategy-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); display: block; margin-bottom: 4px; }
.strategy-value { font-size: 13px; color: var(--text-primary); line-height: 1.5; }

.strategy-opening { margin-bottom: 12px; }
.opening-quote {
  margin: 6px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  font-style: italic;
}

.structure-list { padding-left: 18px; margin-top: 6px; }
.structure-list li { font-size: 12px; color: var(--text-primary); line-height: 1.6; margin-bottom: 3px; }

/* Motivation Letter */
.tone-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
}

.letter-sections { display: flex; flex-direction: column; gap: 1px; }

.letter-para {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.letter-para:last-child { border-bottom: none; }
.letter-para-heading { font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.letter-para-guidance { font-size: 13px; color: var(--text-primary); line-height: 1.5; }

/* Two-col card */
.two-col-card { }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Winning tips */
.tips-list { padding-left: 18px; }
.tips-list li { font-size: 13px; color: var(--text-primary); line-height: 1.6; margin-bottom: 6px; }

/* ── Modal uploaded files list ───────────────────────────────────────────── */
.uploaded-files-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.uploaded-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.uploaded-file-name { flex: 1; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uploaded-file-size { color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }
.btn-remove-file {
  background: none; border: none; cursor: pointer; color: var(--text-tertiary);
  font-size: 16px; line-height: 1; padding: 0 2px;
}
.btn-remove-file:hover { color: var(--danger, #e53e3e); }

/* ── API status banner in modal ──────────────────────────────────────────── */
.ai-api-status { font-size: 12px; margin-bottom: 12px; min-height: 18px; }
.api-status-ok { color: var(--accent); }
.api-status-warn { color: var(--text-secondary); }

/* ── AI results document checklist ──────────────────────────────────────── */
.ai-doc-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.ai-doc-item label { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ai-doc-item input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }

/* ── AI missing-fields callout ───────────────────────────────────────────── */
.ai-missing-callout {
  background: #fff8e1;
  border: 1px solid #f1d27a;
  color: #6b5210;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ai-missing-callout em { font-style: normal; font-weight: 600; color: #4a3a08; }
[data-theme="dark"] .ai-missing-callout {
  background: rgba(241, 210, 122, 0.08);
  border-color: rgba(241, 210, 122, 0.4);
  color: #f1d27a;
}
[data-theme="dark"] .ai-missing-callout em { color: #ffe9a3; }

/* ── AI discovered resources checklist ──────────────────────────────────── */
.ai-resources-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ai-resources-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin: 8px 0 2px;
}
.ai-resources-group-label:first-child { margin-top: 0; }
.ai-resource-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--bg-secondary);
}
.ai-resource-item label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  cursor: pointer;
  align-items: start;
}
.ai-resource-item input[type=checkbox] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  margin-top: 3px;
  grid-row: 1 / span 3;
}
.ai-resource-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ai-resource-url { font-size: 11px; color: var(--text-tertiary); word-break: break-all; }
.ai-resource-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ── Provider buttons (Settings modal) ───────────────────────────────────── */
.provider-btn {
  flex: 1;
  padding: 8px 6px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-align: center;
}
.provider-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.provider-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

/* ── Report Issue FAB ────────────────────────────────────────────────────── */
.report-fab {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  z-index: 999;
}
.report-fab:hover {
  background: var(--red-light);
  border-color: var(--red);
  color: var(--red);
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}

/* ── Report modal ────────────────────────────────────────────────────────── */
.report-modal { width: 480px; max-width: calc(100vw - 32px); }
.report-modal-body { padding: 0 24px 4px; }
.report-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.report-select:focus { border-color: var(--accent); }
.report-context-info {
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-secondary);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.report-context-label { font-weight: 600; color: var(--text-secondary); }
.report-note { font-size: 11px; color: var(--text-tertiary); line-height: 1.5; margin-bottom: 4px; }

/* Report screenshot drop zone — switches between "empty" placeholder and
   "preview" once an image is staged. Drag-over highlight matches accent. */
.report-image-drop {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  min-height: 88px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.report-image-drop.drag-over {
  border-color: var(--accent);
  background: var(--accent-light, rgba(230,160,30,0.08));
}
.report-image-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--text-secondary); font-size: 12px; padding: 14px 10px; text-align: center;
}
.report-image-placeholder svg { color: var(--text-tertiary); }
.report-image-placeholder .link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-weight: 600; font-size: 12px; font-family: inherit;
  text-decoration: underline;
}
.report-image-hint { font-size: 10px; color: var(--text-tertiary); }
.report-image-preview {
  position: relative; width: 100%; padding: 8px; display: flex; justify-content: center;
}
.report-image-preview img {
  max-width: 100%; max-height: 200px; border-radius: 6px; display: block;
  border: 1px solid var(--border);
}
.report-image-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.report-image-remove:hover { background: rgba(0,0,0,0.85); }
.report-image-placeholder.hidden, .report-image-preview.hidden { display: none; }

/* Extract Data button pulse — shown when files are loaded but not yet extracted */
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 230, 160, 30), 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 230, 160, 30), 0); }
}
.btn-pulse {
  animation: pulse-border 1.6s ease-in-out infinite;
}
#btn-save-program:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Responsive layout ────────────────────────────────────────────────────── */

.mobile-menu-btn { display: none; }
.main-nav-brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-icon { display: inline-flex; color: var(--accent); flex-shrink: 0; }
.brand-text { display: inline; font-family: var(--font-display); font-weight: 600; }

/* Tablet / small notebook (no right panel, sidebar still visible) */
@media (max-width: 1100px) {
  .main-nav { padding: 0 16px; }
  .detail-toolbar { padding: 14px 20px; flex-wrap: wrap; gap: 8px 12px; }
  .detail-body { padding: 20px 24px 48px; }
}

/* Phone — sidebar becomes a drawer, top nav compacts, toolbar wraps */
@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200; box-shadow: var(--shadow-lg);
  }
  .sidebar.mobile-open { transform: translateX(0); }

  .sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 199;
  }
  .sidebar-overlay.active { display: block; }

  .main-content { width: 100vw; }

  /* Mobile drawer toggle — moved into the nav (not floating) so it's always reachable */
  .mobile-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary); border: 1px solid var(--border);
    color: var(--text-primary); cursor: pointer;
    position: fixed; top: 8px; left: 10px; z-index: 250;
  }
  .mobile-menu-btn:hover { background: var(--bg-hover); }

  /* Top nav: brand + language/avatar stay on row 1; the view tabs drop to
     their own full-width scroll row so they aren't crushed into a tiny slot.
     Uses #main-nav so the auto height beats the base `.main-nav { height:48px }`
     rule that appears later in the stylesheet. */
  #main-nav.main-nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 44px;
    row-gap: 2px;
    padding: 4px 10px 4px 50px;
    gap: 8px;
  }
  .main-nav-brand { font-size: 15px; padding: 4px 6px; }
  .main-nav-brand-wrap { gap: 0; flex-shrink: 0; }
  .theme-toggle-btn { width: 28px; height: 28px; }
  .main-nav-tabs {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-nav-tabs.has-overflow-right {
    /* Make part of the next tab visibly fade only while more tabs remain. */
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent);
    mask-image: linear-gradient(to right, #000 80%, transparent);
  }
  .main-nav-tabs::-webkit-scrollbar { display: none; }
  .main-nav-tab { padding: 6px 12px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }

  /* Detail toolbar wraps onto multiple lines instead of clipping */
  .detail-toolbar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .detail-toolbar-left, .detail-toolbar-right { flex-wrap: wrap; gap: 6px; }
  .reminder-badge { padding: 4px 9px; font-size: 11px; }

  /* Detail tabs scroll if they overflow */
  .detail-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .detail-tabs::-webkit-scrollbar { display: none; }
  .detail-tab { padding: 12px 14px; flex-shrink: 0; white-space: nowrap; }

  .program-item { padding: 14px 16px; }
  .detail-body { padding: 16px 14px 48px; }
  .detail-info-grid { grid-template-columns: 1fr; }
  .detail-meta { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .detail-name { font-size: 22px; padding-bottom: 12px; }

  /* Discover detail panel: full-width sheet on mobile */
  .discover-detail-panel { width: 100vw; max-width: 100vw; }
}

/* Small phone — collapse text labels to icons */
@media (max-width: 480px) {
  .brand-text { display: none; }
  .btn-status-text { display: none; }
  .btn-status-action {
    padding: 0;
    width: 32px;
    height: 28px;
    justify-content: center;
    gap: 0;
  }
  .reminder-badge #reminder-badge-text { display: none; }
  .reminder-badge { gap: 2px; padding: 5px 7px; }
  /* Hide chevron caret on the reminder badge — only the bell icon shows */
  .reminder-badge > svg:last-child { display: none; }
}

/* ── Right Panel ──────────────────────────────────────────────────────────── */

.right-panel {
  width: 260px;
  min-width: 260px;
  height: 100%;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-panel-section {
  padding: 16px 14px 12px;
  border-bottom: 1px solid var(--border);
}

.right-panel-upcoming {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 8px;
}

.right-panel-section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.right-panel-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.right-report-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.right-report-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-light);
}

/* ── Calendar ─────────────────────────────────────────────────────────────── */

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cal-month-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.cal-nav-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.cal-nav-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-day-name {
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 3px 0 5px;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 1px;
  border-radius: var(--radius-sm);
  min-height: 28px;
  cursor: default;
  transition: background var(--transition);
}

.cal-day-empty { background: transparent; }

.cal-day-num {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1;
}

.cal-today { background: var(--accent); border-radius: 6px; }
.cal-today .cal-day-num { color: #fff; font-weight: 700; }

.cal-has-deadline { cursor: pointer; }
.cal-has-deadline:not(.cal-today):hover { background: var(--bg-hover); }

.cal-dots {
  display: flex;
  gap: 2px;
  margin-top: 2px;
}

.cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-active { background: var(--accent); }
.dot-submitted { background: var(--green); }
.dot-missed { background: var(--red); }
.dot-completed { background: var(--text-tertiary); }

/* ── Calendar upcoming list ───────────────────────────────────────────────── */

.cal-upcoming-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.cal-upcoming-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 8px 0;
  text-align: center;
}

.cal-upcoming-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
  border-left: 2px solid transparent;
}
.cal-upcoming-item:hover { background: var(--bg-hover); }
.cal-upcoming-item.upcoming-urgent { border-left-color: var(--red); }
.cal-upcoming-item.upcoming-soon { border-left-color: var(--yellow); }
.cal-upcoming-item.upcoming-overdue { opacity: 0.55; }
.cal-upcoming-item.upcoming-submitted { border-left-color: var(--green); background: var(--green-light); }
.cal-upcoming-item.upcoming-missed { border-left-color: var(--red); opacity: 0.6; }

.upcoming-date-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  width: 56px;
}
.upcoming-date { font-size: 10px; font-weight: 600; color: var(--text-secondary); }
.upcoming-countdown { font-size: 9px; color: var(--text-tertiary); }
.upcoming-name { font-size: 12px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Hide FAB on desktop (report btn is in right panel) */
@media (min-width: 769px) { .report-fab { display: none !important; } }

/* Hide right panel on small screens */
@media (max-width: 1100px) { .right-panel { display: none; } }

/* ── New status styles ────────────────────────────────────────────────────── */

.status-submitted { background: var(--green-light); color: var(--green); }
.status-missed { background: var(--red-light); color: var(--red); }

/* Sidebar item tints */
.program-item.submitted { background: rgba(52, 199, 89, 0.08); }
.program-item.submitted:hover { background: rgba(52, 199, 89, 0.14); }
.program-item.submitted .program-item-name { color: var(--green); }
.program-item-dot.submitted { background: var(--green); }

.program-item.missed { background: rgba(255, 59, 48, 0.07); }
.program-item.missed:hover { background: rgba(255, 59, 48, 0.12); }
.program-item.missed .program-item-name { color: var(--red); }
.program-item-dot.missed { background: var(--red); }

/* ── Checklist note expansion ─────────────────────────────────────────────── */

.checklist-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.checklist-item {
  display: block;
  border-bottom: 1px solid var(--border);
  padding: 0;
}
.checklist-item:last-child { border-bottom: none; }

.checklist-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--transition);
}
.checklist-item:hover .checklist-actions,
.checklist-item.note-open .checklist-actions { opacity: 1; }

.checklist-note-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}
.checklist-note-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.checklist-note-btn.has-note { color: var(--accent); }

.checklist-rename-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
}
.checklist-rename-btn:hover { background: var(--accent-light); color: var(--accent); }

.checklist-note-area {
  padding: 0 0 12px 34px;
}

.checklist-note-input {
  width: 100%;
  min-height: 72px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color var(--transition);
}
.checklist-note-input:focus { border-color: var(--accent); }
.checklist-note-input::placeholder { color: var(--text-tertiary); }

.checklist-note-footer {
  text-align: right;
  margin-top: 4px;
}
.checklist-note-hint { font-size: 10px; color: var(--text-tertiary); }

/* Checklist delete is now inside .checklist-actions, not directly on item */
.checklist-item-row .checklist-delete { opacity: 1; }

/* ── Apple Notes–style checklist note ─────────────────────────────────── */

.checklist-item-row { cursor: pointer; }
.checklist-item-row:hover { background: var(--bg-hover); border-radius: var(--radius-sm); }

.checklist-note-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.checklist-note-indicator.has-note { color: var(--accent); }

.checklist-note-area {
  padding: 0 0 12px 0;
  margin: 0 0 2px 0;
  animation: noteSlideDown 0.18s ease;
}

@keyframes noteSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.note-apple-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 7px;
  background: #fffcf0;
  border: 1px solid #e8dfd0;
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.8) inset;
}

/* note-apple-header dark variant lives in :root[data-theme="dark"] block below. */

.note-apple-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.note-apple-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-autosave-status {
  font-size: 10px;
  color: var(--text-tertiary);
}

.note-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.note-close-btn:hover { background: var(--red-light); color: var(--red); }

.note-apple-body {
  background: #fffcf0;
  border: 1px solid #e8dfd0;
  border-top: 1px solid rgba(0,0,0,0.06);
  background-image: linear-gradient(#fffcf0 0px, #fffcf0 27px, #e8dfd0 27px, #e8dfd0 28px);
  background-size: 100% 28px;
  min-height: 112px;
}

/* note-apple-body dark variant lives in :root[data-theme="dark"] block below. */

.checklist-note-input {
  display: block;
  width: 100%;
  min-height: 112px;
  padding: 5px 14px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 13px;
  line-height: 28px;
  resize: none;
  outline: none;
  overflow: hidden;
}
.checklist-note-input::placeholder { color: var(--text-tertiary); line-height: 28px; }

.note-apple-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 5px 12px;
  background: #fffcf0;
  border: 1px solid #e8dfd0;
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* note-apple-footer dark variant lives in :root[data-theme="dark"] block below. */

.note-char-count { font-size: 10px; color: var(--text-tertiary); }

/* ── Pipeline: Missed button & missed state ───────────────────────────── */

.pipeline-missed-sep {
  flex: 0 0 18px;
  opacity: 0.3;
}

.pipeline-step-missed {
  border-style: dashed;
}

.pipeline-step-missed:hover,
.pipeline-step-missed.active {
  border-color: var(--red) !important;
  border-style: solid;
  background: var(--red-light) !important;
  color: var(--red) !important;
}

.status-pipeline.status-missed .pipeline-step[data-stage] {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

.status-pipeline.status-missed .pipeline-connector:not(.pipeline-missed-sep) {
  opacity: 0.25;
}

.status-pipeline.status-missed .pipeline-step-missed {
  opacity: 1;
  pointer-events: auto;
  border-color: var(--red);
  border-style: solid;
  background: var(--red-light);
  color: var(--red);
}

/* ══════════════════════════════════════════════════════════════════════════
   Main navigation bar
   ══════════════════════════════════════════════════════════════════════════ */

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 20px;
  background: var(--bg-sidebar);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 150;
  flex-shrink: 0;
}

.main-nav-brand-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-nav-brand {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition), opacity var(--transition);
}
.main-nav-brand:hover { background: var(--bg-hover); }
.main-nav-brand:active { opacity: 0.7; }

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-light); }
.theme-toggle-btn .theme-icon { display: none; }
/* Default (no override): show moon if system is light, sun if system is dark */
.theme-toggle-btn .theme-icon-moon { display: block; }
/* theme-preload.js always sets data-theme — these selectors govern both
   explicit choice and system-preference fallback. */
:root[data-theme="dark"]  .theme-toggle-btn .theme-icon-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle-btn .theme-icon-sun  { display: block; }
:root[data-theme="light"] .theme-toggle-btn .theme-icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle-btn .theme-icon-sun  { display: none; }

.sh-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -0.18em;
}

.sh-icon g,
.sh-icon path,
.sh-icon circle,
.sh-icon rect {
  vector-effect: non-scaling-stroke;
}

.btn-primary .sh-icon,
.btn-secondary .sh-icon,
.btn-ghost .sh-icon,
.btn-small .sh-icon,
.discover-prefs-btn .sh-icon,
.discover-clear-btn .sh-icon,
.discover-funded-toggle .sh-icon,
.discover-track-btn .sh-icon,
.discover-detail-visit-btn .sh-icon,
.discover-detail-track-btn .sh-icon,
.discover-deadline-pill .sh-icon,
.discover-start-pill .sh-icon,
.discover-detail-date-label .sh-icon,
.resource-action-btn .sh-icon,
.cv-rail-item .sh-icon,
.cv-icon-btn .sh-icon,
.settings-change-avatar-btn .sh-icon,
.avatar-upload-btn .sh-icon {
  margin-right: 5px;
}

a .sh-icon {
  margin-right: 4px;
}

a .sh-icon:last-child {
  margin-right: 0;
  margin-left: 4px;
}

.btn-icon .sh-icon,
.resource-action-btn .sh-icon,
.cv-section-remove .sh-icon,
.cv-right-add .sh-icon,
.discover-detail-close .sh-icon {
  margin-right: 0;
}

.discover-prefs-btn,
.discover-clear-btn,
.discover-funded-toggle,
.discover-track-btn,
.discover-detail-visit-btn,
.discover-detail-track-btn,
.discover-deadline-pill,
.discover-start-pill,
.discover-detail-date-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.discover-prefs-btn .sh-icon,
.discover-clear-btn .sh-icon,
.discover-funded-toggle .sh-icon,
.discover-track-btn .sh-icon,
.discover-detail-visit-btn .sh-icon,
.discover-detail-track-btn .sh-icon,
.discover-deadline-pill .sh-icon,
.discover-start-pill .sh-icon,
.discover-detail-date-label .sh-icon {
  margin-right: 0;
}
:root[data-theme="dark"]  .theme-toggle-btn .theme-icon-moon { display: none; }
:root[data-theme="dark"]  .theme-toggle-btn .theme-icon-sun  { display: block; }

.main-nav-tabs {
  display: flex;
  gap: 2px;
}

.main-nav-tab {
  padding: 6px 16px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}

.main-nav-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.main-nav-tab.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.auth-nav-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-left: 8px;
}

/* Right-side cluster in the app shell nav: language switcher + auth area. */
.main-nav-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.main-nav-end .lang-switcher {
  height: 28px;
}
.main-nav-end .lang-btn {
  padding: 0 10px;
  font-size: 11px;
  line-height: 26px;
}
.auth-username {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-admin-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--accent, #e89b3a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 3px;
  line-height: 1.2;
}
.auth-settings-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Account settings view ───────────────────────────────────────────────── */
.settings-view {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 28px 60px;
}
.settings-header { margin-bottom: 24px; }
.settings-header h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.settings-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.settings-form { display: flex; flex-direction: column; gap: 24px; }
.settings-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
/* Collapsible sections (Active sessions, Recent activity) */
.settings-section-collapsible {
  padding: 0;
  overflow: hidden;
  background: var(--bg-secondary);
}
.settings-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: 0.1px;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--transition), color var(--transition);
}
.settings-collapse-toggle:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); }
.settings-collapse-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-light);
}
.settings-collapse-toggle[aria-expanded="true"] {
  color: var(--accent);
  border-bottom: 1px solid var(--border);
}
.settings-collapse-chevron { color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.2s; }
.settings-collapse-body { padding: 16px 22px 20px; }
.settings-identity-tools {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.settings-section-nested {
  background:var(--bg-primary);
}
.settings-section-nested .settings-collapse-toggle {
  min-height:52px;
}
.settings-section h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px;
  letter-spacing: 0.1px;
}
.settings-section-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0 0 14px;
}

.settings-newsletter-preference {
  margin-top:14px; padding:16px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg-secondary); color:var(--text-secondary); font-size:13px; line-height:1.55;
}
.settings-newsletter-preference p { margin:0 0 12px; }
.settings-newsletter-preference p:last-child { margin-bottom:0; }
.settings-newsletter-preference a { color:var(--text-primary); text-underline-offset:3px; }

.settings-digest-preference {
  margin-top:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-primary);
}
.settings-digest-option {
  display:flex;
  align-items:flex-start;
  gap:12px;
  color:var(--text-primary);
  cursor:pointer;
}
.settings-digest-option input {
  width:18px;
  height:18px;
  margin:2px 0 0;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.settings-digest-option input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.settings-digest-option span { display:grid; gap:5px; }
.settings-digest-option strong { font-size:13px; line-height:1.45; }
.settings-digest-option small { color:var(--text-secondary); font-size:12px; line-height:1.55; }
.settings-digest-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.settings-digest-actions .settings-hint { margin:0; line-height:1.45; }
@media (max-width:620px) {
  .settings-digest-actions { align-items:stretch; flex-direction:column; }
  .settings-digest-actions .settings-security-button { width:100%; }
}

.newsletter-consent-prompt {
  position:static; width:auto; margin:8px 32px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 20px; border:1px solid var(--border-strong); border-radius:12px;
  background:var(--bg-elevated); box-shadow:var(--shadow-sm); color:var(--text-primary);
}
.newsletter-consent-copy { display:grid; gap:4px; min-width:0; }
.newsletter-consent-copy strong { font-size:14px; }
.newsletter-consent-copy span { color:var(--text-secondary); font-size:12.5px; line-height:1.5; }
.newsletter-consent-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.newsletter-consent-actions button { white-space:nowrap; }
@media (max-width:620px) {
  .newsletter-consent-prompt { margin:10px 14px 16px; align-items:stretch; flex-direction:column; gap:14px; }
  .newsletter-consent-actions { justify-content:flex-end; }
}
.settings-plan-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.settings-plan-cta {
  border:1px solid var(--accent);
  background:var(--accent-light, #fff1e8);
  color:var(--accent);
  border-radius:999px;
  padding:8px 14px;
  font:700 12px/1 var(--font);
  white-space:nowrap;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 6px 16px rgba(183,95,53,.08);
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.settings-plan-cta:hover {
  transform:translateY(-1px);
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(183,95,53,.16);
}
.settings-usage-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:14px;
}
.settings-usage-meter {
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--bg-primary);
}
.settings-usage-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--text-primary);
  font-size:13px;
  font-weight:650;
}
.settings-usage-label strong {
  font-size:12px;
  color:var(--text-secondary);
  font-weight:650;
}
.settings-meter-track {
  height:7px;
  margin-top:10px;
  background:var(--border);
  border-radius:999px;
  overflow:hidden;
}
.settings-meter-track span {
  display:block;
  height:100%;
  min-width:0;
  background:var(--accent);
  border-radius:inherit;
}
@media (max-width: 560px) {
  .settings-plan-head {
    flex-direction:column;
    align-items:stretch;
  }
  .settings-plan-cta {
    width:100%;
  }
}
.settings-field { margin-top: 14px; }
.settings-field:first-of-type { margin-top: 8px; }
.settings-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.settings-field input {
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.settings-field input:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-hint {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-tertiary);
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.settings-actions #settings-save {
  min-height: 30px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}
.settings-error,
.settings-info {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.settings-error {
  background: rgba(220, 70, 60, 0.08);
  color: var(--red, #c0392b);
  border: 1px solid rgba(220, 70, 60, 0.2);
}
.settings-info {
  background: rgba(60, 160, 110, 0.08);
  color: var(--green, #2e8b57);
  border: 1px solid rgba(60, 160, 110, 0.2);
}
.settings-error.hidden,
.settings-info.hidden { display: none; }
.settings-auth-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(12, 12, 12, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.settings-auth-dialog {
  position: relative;
  width: min(100%, 390px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-primary);
  color: var(--text-primary);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}
.settings-auth-dialog h2 {
  margin: 0 30px 8px 0;
  font-size: 20px;
  line-height: 1.2;
}
.settings-auth-dialog p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.settings-auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.settings-auth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.settings-auth-primary,
.settings-auth-secondary {
  border-radius: 999px;
  padding: 9px 16px;
  font: 700 13px/1 var(--font);
  cursor: pointer;
}
.settings-auth-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}
.settings-auth-secondary {
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* App views — each section takes remaining height */
.app-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.deferred-view-status {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 12rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  box-sizing: border-box;
  color: var(--text-secondary);
  text-align: center;
}
.deferred-view-status p { margin: 0; max-width: 34rem; }
.deferred-view-status.is-error { color: var(--red); }
.deferred-view-status button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* #view-programs contains the 3-column #app — override to flex-row */
#view-programs {
  flex-direction: row;
}

/* ══════════════════════════════════════════════════════════════════════════
   Discover section
   ══════════════════════════════════════════════════════════════════════════ */

#view-discover {
  overflow: hidden;
}

.discover-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-primary);
}

/* Primary row: search + Level + Region + Deadline + Sort + the drawer toggle.
   The bar used to carry twelve controls across three rows above the first
   card, which asks the reader to make five decisions before seeing anything. */
.discover-filter-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.discover-filter-primary .discover-search { flex: 1 1 220px; min-width: 0; }
.discover-filter-primary .discover-select { flex: 0 1 auto; }

.discover-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.discover-more-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.discover-more-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.discover-filter-drawer {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.discover-filter-drawer.hidden { display: none; }

/* Active filters. A filter set inside a collapsed drawer is otherwise
   invisible state: the result count shrinks with nothing on screen to explain
   it, and no way to undo just the one filter responsible. */
.discover-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.discover-active-chips.hidden { display: none; }

.discover-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 99px;
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
  transition: border-color var(--transition), background var(--transition);
}
.discover-active-chip:hover { border-color: var(--accent); background: var(--accent-soft, var(--accent-light)); }
.discover-active-chip:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.discover-active-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.discover-active-chip .sh-icon { opacity: 0.7; flex: 0 0 auto; }

.discover-filter-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 2px;
  white-space: nowrap;
}

/* Funded toggle pill */
.discover-funded-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.discover-funded-toggle:hover { border-color: var(--green); color: var(--green); }
.discover-funded-toggle.active {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green);
  font-weight: 600;
}

/* Select dropdowns */
.discover-selects {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.discover-select-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.discover-select-group .discover-select {
  flex: 1 1 auto;
  min-width: 0;
}

.discover-select {
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3.5l3 3 3-3' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.discover-select:focus { border-color: var(--accent); }

/* Results bar */
.discover-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.discover-count {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.discover-clear-btn {
  padding: 3px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
}
.discover-clear-btn:hover { border-color: var(--red); color: var(--red); background: rgba(255,59,48,0.06); }

.discover-prefs-btn {
  padding: 3px 10px;
  margin-left: auto;
  margin-right: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
}
.discover-prefs-btn.active,
.discover-prefs-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.discover-prefs-panel {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.discover-prefs-panel.hidden { display: none; }
.discover-prefs-card { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.discover-prefs-row { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.discover-prefs-label { font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.discover-prefs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.discover-prefs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  font-size: 12px; cursor: pointer;
}
.discover-prefs-chip input { margin: 0; }
.discover-prefs-inline { flex-direction: row; align-items: center; gap: 16px; flex-wrap: wrap; }
.discover-prefs-inline-num { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.discover-prefs-inline-num input { width: 80px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.discover-prefs-actions { display: flex; gap: 10px; align-items: center; padding-top: 6px; }
/* Match the Discover panel's chip rhythm (.discover-active-chip): 99px pill,
 * 12-13px type, accent fill for the primary action. Quieter than the status
 * palette (tokens.css §5.1) — that palette is for high-stakes saves
 * (Editor, admin moderation). This is a quiet inline panel. */
.discover-prefs-save,
.discover-prefs-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 18px;
  border-radius: 99px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition);
}
.discover-prefs-save {
  background: var(--accent);
  color: var(--text-inverse, #fff);
  border-color: var(--accent);
}
.discover-prefs-save:hover  { background: var(--accent-hover, var(--accent)); border-color: var(--accent-hover, var(--accent)); }
.discover-prefs-save:active { transform: translateY(1px); }
.discover-prefs-cancel {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-strong);
}
.discover-prefs-cancel:hover  { border-color: var(--accent); color: var(--text-primary); }
.discover-prefs-cancel:active { transform: translateY(1px); }
.discover-prefs-save:focus-visible,
.discover-prefs-cancel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.discover-prefs-save:disabled,
.discover-prefs-cancel:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.discover-search {
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 99px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font);
  outline: none;
  width: 220px;
  max-width: 100%;
  flex-shrink: 0;
  transition: border-color var(--transition);
}
.discover-search:focus { border-color: var(--accent); }

@media (max-width: 900px) {
  .discover-search { width: 100%; }
  .discover-select-group { flex: 1 1 45%; }
}
@media (max-width: 560px) {
  .discover-select-group { flex: 1 1 100%; }
  .discover-filter-primary .discover-select { flex: 1 1 100%; }
  .discover-more-btn { width: 100%; justify-content: center; }
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  align-content: start;
}

.discover-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.discover-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.discover-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .discover-card { transition: none; }
  .discover-card:hover { transform: none; }
}

/* Left accent by type */
.discover-card[data-type="fellowship"]       { border-left-color: #1d4ed8; }
.discover-card[data-type="cultural-exchange"]{ border-left-color: #6d28d9; }
.discover-card[data-type="masters"]          { border-left-color: var(--green); }
.discover-card[data-type="phd"]              { border-left-color: #c2410c; }
.discover-card[data-type="research"]         { border-left-color: #d97706; }
.discover-card[data-type="internship"]       { border-left-color: var(--text-tertiary); }

/* Title row: name takes the space, match pill holds its corner. */
.discover-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.discover-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  min-width: 0;
}

/* Match strength. Deliberately the only accent-filled element on the card, so
   it reads as a verdict rather than as one more badge in the row below. */
.discover-match-pill {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  padding: 1px 7px;
  border-radius: 99px;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Match REASONS explain the card's position; the badges above describe the
   programme. Rendered as ONE sentence rather than more pills: as chips they
   restated text already in the badge row two lines up ("United Kingdom",
   "Fully Funded"), so the card carried the same three facts twice and the
   explanation was indistinguishable from the description. */
.discover-match-why {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--accent);
  margin-top: -2px;
}
.discover-match-why .sh-icon { flex: 0 0 auto; opacity: 0.8; transform: translateY(1px); }
.discover-match-why span { min-width: 0; }

.discover-card-org {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: -3px;
}

.discover-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.discover-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

.badge-fellowship   { background: #dbeafe; color: #1d4ed8; }
.badge-cultural-exchange { background: #ede9fe; color: #6d28d9; }
.badge-masters      { background: var(--green-light); color: var(--green); }
.badge-phd          { background: #ffedd5; color: #c2410c; }
.badge-research     { background: var(--warning-soft); color: var(--warning); }
.badge-internship   { background: var(--bg-hover); color: var(--text-secondary); }
.badge-length       { background: var(--bg-hover); color: var(--text-tertiary); }
.badge-funded       { background: var(--green-light); color: var(--green); }
.badge-country      { background: var(--bg-hover); color: var(--text-tertiary); }

/* Resource category badges reuse discover-badge colours */
.badge-essays    { background: #dbeafe; color: #1d4ed8; }
.badge-strategy  { background: #ede9fe; color: #6d28d9; }
.badge-financial { background: var(--warning-soft); color: var(--warning); }
.badge-cultural  { background: #ffedd5; color: #c2410c; }
.badge-general   { background: var(--bg-hover); color: var(--text-tertiary); }

:root[data-theme="dark"] .badge-fellowship   { background: rgba(29,78,216,0.25); color: #93c5fd; }
:root[data-theme="dark"] .badge-cultural-exchange { background: rgba(109,40,217,0.25); color: #c4b5fd; }
:root[data-theme="dark"] .badge-masters      { background: rgba(52,199,89,0.2); color: var(--green); }
:root[data-theme="dark"] .badge-phd          { background: rgba(194,65,12,0.25); color: #fdba74; }
:root[data-theme="dark"] .badge-research     { background: rgba(217,119,6,0.25); color: #fcd34d; }
:root[data-theme="dark"] .badge-essays       { background: rgba(29,78,216,0.25); color: #93c5fd; }
:root[data-theme="dark"] .badge-strategy     { background: rgba(109,40,217,0.25); color: #c4b5fd; }
:root[data-theme="dark"] .badge-financial    { background: rgba(217,119,6,0.25); color: #fcd34d; }
:root[data-theme="dark"] .badge-cultural     { background: rgba(194,65,12,0.25); color: #fdba74; }

.discover-card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.discover-card-eligibility {
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: -1px;
}

.discover-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 2px;
  gap: 8px;
}

.discover-card-meta-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.discover-deadline-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

/* Urgency ladder. Tone is assigned from a REAL date only — a month-only
   estimate always renders neutral, because it cannot justify urgency. */
.discover-deadline-pill.tone-neutral { color: var(--text-secondary); }
.discover-deadline-pill.tone-amber   { color: var(--warning); }
.discover-deadline-pill.tone-red     { color: var(--red); }
.discover-deadline-pill.tone-closed  { color: var(--text-tertiary); font-weight: 500; }
.discover-card:has(.tone-closed)     { opacity: 0.62; }

.discover-start-pill {
  font-size: 11px;
  color: var(--text-tertiary);
}

.discover-track-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}

.discover-track-btn:hover {
  background: var(--accent);
  color: #fff;
}

.discover-track-btn.tracked {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green);
  cursor: default;
}
.discover-track-btn.pending {
  border-color: var(--text-tertiary);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: progress;
}
.discover-track-btn:disabled { cursor: default; }
.discover-track-btn.tracked:hover,
.discover-track-btn.pending:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.discover-track-btn.tracked:hover {
  background: var(--green-light);
  color: var(--green);
}

.discover-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
  grid-column: 1 / -1;
}

@media (max-width: 1100px) { .discover-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .discover-grid { grid-template-columns: 1fr; } }

/* ── Discover Detail Panel ───────────────────────────────────────────────── */

.discover-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 300;
  backdrop-filter: blur(1px);
}

.discover-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 440px;
  max-width: 95vw;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-strong);
  z-index: 301;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.discover-detail-panel.open { transform: translateX(0); }

.discover-detail-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}

.discover-detail-type-bar {
  height: 3px;
  border-radius: 99px;
  background: var(--border-strong);
  margin-bottom: 14px;
  width: 40px;
}
.discover-detail-type-bar[data-type="fellowship"]        { background: #1d4ed8; }
.discover-detail-type-bar[data-type="cultural-exchange"] { background: #6d28d9; }
.discover-detail-type-bar[data-type="masters"]           { background: var(--green); }
.discover-detail-type-bar[data-type="phd"]               { background: #c2410c; }
.discover-detail-type-bar[data-type="research"]          { background: #d97706; }
.discover-detail-type-bar[data-type="internship"]        { background: var(--text-tertiary); }

.discover-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.discover-detail-close:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-hover); }

.discover-detail-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: 4px;
  padding-right: 36px;
}

.discover-detail-org {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.discover-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.discover-detail-dates-row {
  display: flex;
  gap: 10px;
}

.discover-detail-date-block {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.discover-detail-date-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}

.discover-detail-date-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.discover-detail-date-val.deadline { color: var(--accent); }

.discover-detail-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.discover-detail-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.discover-detail-elig {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.discover-detail-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  transition: all var(--transition);
}
.discover-detail-source:hover { border-color: var(--accent); background: var(--accent-light); }
.discover-detail-source-url {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-detail-ai-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--accent-light);
  border-radius: var(--radius-md);
  color: var(--accent);
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: auto;
}
.discover-detail-ai-hint svg { flex-shrink: 0; margin-top: 1px; }

.discover-detail-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.discover-detail-visit-btn {
  flex: 1;
  padding: 9px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity var(--transition);
}
.discover-detail-visit-btn:hover { opacity: 0.88; }

.discover-detail-track-btn {
  padding: 9px 16px;
  border: 1.5px solid var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.discover-detail-track-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.discover-detail-track-btn.tracked { border-color: var(--green); background: var(--green-light); color: var(--green); cursor: default; }
.discover-detail-track-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
   Resources section
   ══════════════════════════════════════════════════════════════════════════ */

#view-resources {
  flex-direction: row;
  overflow: hidden;
}

.resources-sidebar {
  width: 180px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  overflow-y: auto;
  background: var(--bg-sidebar);
}

.resources-sidebar-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  padding: 0 6px;
}

.resources-cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
}

.resources-cat-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.resources-cat-btn.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.resources-cat-count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
}

.resources-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  /* min-height:0 lets the flex child (.resources-list) actually scroll
     instead of growing past the viewport when there are many cards. */
  min-height: 0;
}

.resources-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.resources-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Add-form slot — lives ABOVE the card grid, NOT inside it. Form has its
   own flex column layout. Empty by default; visible only when user clicks
   "+ Add Resource". This is the permanent fix for the overlap bug. */
.resources-add-slot {
  padding: 16px 20px 0;
  flex-shrink: 0;
}
.resources-add-slot:empty { display: none; }

.resources-list {
  padding: 16px 20px;
  overflow-y: auto;
  display: grid;
  /* 320px min → roughly 3 columns on a 1100-1400px viewport (the common
     laptop range), 4 cols on ultra-wide, 2 on tablets, 1 on phones. Gives
     each card enough room to show thumb + title + desc + meta + actions. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  align-content: start;
  flex: 1;
  /* Pair with .resources-main min-height:0 so the grid scrolls internally
     instead of pushing past its parent and squeezing rows. */
  min-height: 0;
  /* Visible scroll affordance — light-theme default scrollbar is too faint. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.resources-list::-webkit-scrollbar { width: 10px; }
.resources-list::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.resources-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-tertiary);
  background-clip: content-box;
}

/* Empty-state spans full grid width when no cards. */
.resources-list > .empty-state { grid-column: 1 / -1; }

.resource-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  /* Guarantee body real estate: thumb caps at 220px, so 380 - 220 = 160px
     min for title (2 lines) + desc (2 lines) + meta row + action row. */
  min-height: 380px;
}

.resource-card:hover {
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.08));
  transform: translateY(-3px);
  border-color: var(--accent);
}
.resource-card-premium {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--accent) 68%, transparent);
}
.resource-card-premium:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.08)), inset 0 3px 0 var(--accent);
}

/* Heading count badge — subdued chip next to "All" / "Essays" etc. */
.resources-heading-count {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-hover);
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.5;
}

/* Skeleton cards — shown during /api/resources fetch. */
.resource-card-skeleton { pointer-events: none; }
.resource-card-skeleton .resource-card-thumb { border-bottom: 1px solid var(--border); }
.skeleton-shimmer {
  background: linear-gradient(90deg,
    var(--bg-sunken) 0%,
    var(--bg-hover) 50%,
    var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line-title { height: 16px; width: 80%; }
.skeleton-line-short { width: 55%; }
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-shimmer { animation: none; }
}

.resource-card.read {
  opacity: 0.6;
}

/* 16:9 thumbnail. Always rendered so every card has the same shape.
   - min-height belt-and-braces if aspect-ratio resolves to 0 under some
     nested grid+flex sizing paths.
   - flex-shrink:0 — body growth can never crush the thumb.
   - bg-sunken gives the empty zone a visible footprint against the white
     card body (the old var(--bg-tertiary) was undefined → fell through
     to pure white and disappeared). */
.resource-card-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 168px;
  /* Cap thumb so it can never crush the body section on wide cards.
     Without this, a 620px-wide card would size thumb to 348px at 16:9,
     leaving body clipped by .resource-card overflow:hidden. */
  max-height: 220px;
  background: var(--bg-sunken);
  overflow: hidden;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.resource-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bg-sunken);
}
.resource-card-thumb-empty .resource-card-img { display: none; }
/* Placeholder tile — large Playfair initial on a soft teal-tinted gradient.
   Reads as an intentional "preview pending" tile instead of a broken image. */
.resource-card-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  color: var(--accent);
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-sunken));
  letter-spacing: -1px;
  opacity: 0.85;
}
.resource-card-thumb-empty .resource-card-fallback { display: flex; }

.resource-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* flex: 1 1 auto — basis MUST be auto, not 0. With basis 0 and the
     thumb having min-height: 168px, body collapsed to 0 (no parent height
     for grow to distribute) and content was clipped by card overflow:hidden.
     auto basis = body always renders at content height. */
  flex: 1 1 auto;
  min-width: 0;
}

.resource-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.resource-card-title:hover {
  text-decoration: underline;
}

.resource-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 4px;
}

.resource-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}

.resource-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.resource-action-btn.read-btn.active {
  color: var(--green);
}

/* Star button — width grows with count pill. */
.resource-star-btn {
  width: auto;
  padding: 0 6px;
  gap: 4px;
}
.resource-star-btn .resource-star-count {
  font-size: 11px;
  line-height: 1;
  min-width: 8px;
}
/* Default (not starred): gray outline — inherits color from .resource-action-btn. */
.resource-star-btn:not(.starred) svg path {
  fill: none;
}
/* Starred: filled yellow star, color drives both fill and stroke. */
.resource-star-btn.starred {
  color: #f5b400;
}
.resource-star-btn.starred svg path {
  fill: currentColor;
}
.resource-star-btn.starred:hover {
  color: #e0a200;
}

/* Top-contributor leaderboard */
.resources-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.lb-row {
  display: grid;
  grid-template-columns: 18px 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.lb-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.lb-pos {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}
.lb-avatar { display: flex; align-items: center; justify-content: center; }
.lb-avatar-img {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; display: block;
}
.lb-avatar-initials {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-tertiary, #eee);
  color: var(--text-primary);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.lb-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-stars {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: #f5b400;
  font-weight: 600;
}

.resource-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.resource-card-domain {
  font-size: 11px;
  color: var(--text-tertiary);
}

.resource-card-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resource-note-section {
  margin-top: 2px;
}

.resource-note-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px 0;
  font-family: var(--font);
  transition: color var(--transition);
  position: relative;
}

.resource-note-toggle:hover {
  color: var(--text-secondary);
}

/* Note-present dot on the note button inside the action row. */
.resource-action-btn.resource-note-toggle .resource-note-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.resource-note-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 12px;
  font-family: var(--font);
  resize: vertical;
  outline: none;
  min-height: 70px;
  line-height: 1.5;
  transition: border-color var(--transition);
  box-sizing: border-box;
}

.resource-note-input:focus {
  border-color: var(--accent);
}

.resources-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

/* Add resource form */
.resource-add-form {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-primary);
  margin-bottom: 4px;
  box-sizing: border-box;
}

.resource-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.resource-hero-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 10px;
  align-items: stretch;
}
/* Collapse the 160px preview column when there is no image yet — the URL
   input then takes full width instead of leaving a dead gutter. */
.resource-hero-field:has(.resource-hero-preview.hidden) {
  grid-template-columns: 1fr;
}

.resource-hero-preview {
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 11px;
  text-align: center;
  padding: 8px;
}

.resource-hero-preview.hidden { display: none; }
.resource-hero-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.resource-hero-preview span { position: relative; z-index: 1; display: none; }
.resource-hero-preview.is-error span { display: block; }
.resource-hero-preview.is-error img { display: none; }

.resource-add-input {
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  box-sizing: border-box;
}

.resource-add-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Textarea — explicit min-height + user-resizable. Without this rule the
   textarea was rendering as a 1-line sliver because the flex parent did
   not stretch it past its (collapsed) intrinsic line height. */
textarea.resource-add-input {
  min-height: 96px;
  max-height: 360px;
  resize: vertical;
}

.resource-add-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .resource-add-row,
  .resource-hero-field {
    grid-template-columns: 1fr;
  }
  .resource-hero-preview {
    min-height: 120px;
  }
}

/* Body layout adjustment — account for top nav */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Existing #app 3-col layout fills available height */
#app {
  flex: 1;
  min-height: 0;
}

/* ── Alumni & Mentors section ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
   Alumni & Mentors section
   ══════════════════════════════════════════════════════════════════════════ */

#view-alumni {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top filter bar ── */
.alumni-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.alumni-role-pills {
  display: flex;
  gap: 5px;
}

.alumni-role-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 99px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
}

.alumni-role-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.alumni-role-pill.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.alumni-pill-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
.alumni-role-pill.active .alumni-pill-count { background: rgba(255,255,255,0.35); }

.alumni-search-input {
  padding: 6px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  width: 220px;
  transition: border-color var(--transition);
}
.alumni-search-input:focus { border-color: var(--accent); }

/* ── Main area ── */
.alumni-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.alumni-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.alumni-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.alumni-list {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 12px;
  align-content: start;
}

/* ── Profile card ── */
.alumni-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: box-shadow var(--transition);
}
.alumni-card:hover { box-shadow: var(--shadow-sm); }

/* Avatar */
.alumni-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.alumni-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Card body */
.alumni-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.alumni-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.alumni-card-title-block { flex: 1; min-width: 0; }

.alumni-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.alumni-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.alumni-role-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}

.badge-role-alumni { background: #dbeafe; color: #1d4ed8; }
.badge-role-mentor { background: #ede9fe; color: #6d28d9; }

:root[data-theme="dark"] .badge-role-alumni { background: rgba(29,78,216,0.2); color: #93c5fd; }
:root[data-theme="dark"] .badge-role-mentor { background: rgba(109,40,217,0.2); color: #c4b5fd; }

.alumni-card-scholarship {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}

.alumni-card-meta-text {
  font-size: 11px;
  color: var(--text-tertiary);
}

.alumni-card-field {
  font-size: 12px;
  color: var(--text-secondary);
}

.alumni-card-contacts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.alumni-contact-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
}
.alumni-contact-link:hover { color: var(--accent); }

.alumni-card-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.alumni-edit-btn,
.alumni-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition);
}
.alumni-edit-btn:hover { background: var(--accent-light); color: var(--accent); }
.alumni-delete-btn:hover { background: var(--red-light); color: var(--red); }

.alumni-bio-section { margin-top: 2px; }

.alumni-bio-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  font-family: var(--font);
  transition: color var(--transition);
}
.alumni-bio-toggle:hover { color: var(--text-secondary); }

.alumni-bio-text {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  white-space: pre-wrap;
}

.alumni-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
  grid-column: 1 / -1;
}

/* ── Add person form ── */
.alumni-add-form {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-primary);
  grid-column: 1 / -1;
}

.alumni-add-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 2px;
}

.alumni-add-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-hover);
  border: 2px dashed var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
  overflow: hidden;
}

.alumni-add-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.alumni-add-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
}
.alumni-add-photo-btn:hover { border-color: var(--accent); color: var(--accent); }

.alumni-add-photo-hint {
  font-size: 11px;
  color: var(--text-tertiary);
}

.alumni-add-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.alumni-add-input {
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
  box-sizing: border-box;
}
.alumni-add-input:focus { border-color: var(--accent); }

.alumni-add-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.alumni-edit-form { border-color: var(--accent); border-style: solid; }

.alumni-edit-form-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 2px;
}

@media (max-width: 860px) { .alumni-list { grid-template-columns: 1fr; } }

/* ── CV Builder ──────────────────────────────────────────────────────────── */

#view-cv { overflow-y: auto; }

.cv-builder-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.cv-builder-header { margin-bottom: 32px; }

.cv-builder-title-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cv-builder-icon { font-size: 28px; line-height: 1; margin-top: 3px; }

.cv-builder-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.cv-builder-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.cv-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
}

.cv-coming-soon-graphic { margin-bottom: 4px; opacity: 0.9; }

.cv-coming-soon-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cv-coming-soon-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
}

.cv-feature-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.cv-feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.cv-feature-list li svg { flex-shrink: 0; }

/* ── Document Viewer ─────────────────────────────────────────────────────── */

.doc-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.doc-viewer-overlay.hidden { display: none; }

.doc-viewer-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: min(780px, 92vw);
  height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  animation: viewer-in 0.18s ease;
}

@keyframes viewer-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.doc-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 12px;
}

.doc-viewer-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.doc-viewer-file-icon { font-size: 20px; flex-shrink: 0; }

.doc-viewer-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.doc-viewer-meta-line {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.doc-viewer-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.doc-viewer-highlight-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #8b6700;
  background: color-mix(in srgb, #FFE066 22%, transparent);
  border: 1px solid color-mix(in srgb, #FFE066 60%, transparent);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
[data-theme="dark"] .doc-viewer-highlight-hint { color: #f5c842; }

.doc-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

.doc-viewer-text {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text-primary);
  word-break: break-word;
  font-family: var(--font);
}

/* ── Viewer line-type styles ─────────────────────────────────────────────── */
.vt-blank      { height: 0.5em; }
.vt-body       { margin: 0; padding: 1px 0; }

.vt-page-break {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 20px 0 16px;
}
.vt-page-break::before,
.vt-page-break::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.vt-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 18px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.01em;
}

.vt-section {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  margin: 14px 0 4px;
}

.vt-subsection {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 6px 0 2px;
  padding-left: 12px;
}

.vt-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  font-style: italic;
  padding: 1px 0;
}

.doc-viewer-loading,
.doc-viewer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  color: var(--text-tertiary);
  font-size: 13px;
  text-align: center;
  gap: 10px;
}

/* Clickable doc info to open viewer */
.doc-file-info { cursor: pointer; }
.doc-file-info:hover .doc-file-name { color: var(--accent); }

/* Yellow highlights */
mark.doc-highlight {
  background: #FFE066;
  color: inherit;
  border-radius: 2px;
  padding: 1px 0;
  cursor: pointer;
  transition: background 0.15s;
}
mark.doc-highlight:hover { background: #ffd633; }

[data-theme="dark"] mark.doc-highlight {
  background: #a87b00;
  color: #fff;
}
[data-theme="dark"] mark.doc-highlight:hover { background: #c49500; }

/* Remove tooltip */
.highlight-tooltip {
  position: fixed;
  z-index: 950;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}
.highlight-tooltip.hidden { display: none; }

.btn-remove-highlight {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--red, #e55);
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}
.btn-remove-highlight:hover { background: var(--bg-hover); }

/* ────────────────────────────────────────────────────────────────────────── */
/* CV Builder                                                                 */
/* ────────────────────────────────────────────────────────────────────────── */

#view-cv { overflow: hidden; padding: 0; }

.cv-builder {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  flex: 1;
  min-height: 0;
  background: var(--bg-primary);
}

@media (max-width: 1100px) {
  .cv-builder { grid-template-columns: 200px minmax(0, 1fr); }
  /* Out-specifies the later base `.cv-right-sections { display:flex }`, so
     the rail really hides and .cv-section-manager-mobile replaces it. */
  .cv-builder .cv-right-sections { display: none; }
}
@media (max-width: 760px) {
  .cv-builder { grid-template-columns: minmax(0, 1fr); }
  /* Higher specificity than the base `.cv-left-rail { display:flex }` that
     appears later in the file, so the rail is actually hidden here and the
     mobile switcher below takes its place. */
  .cv-builder .cv-left-rail { display: none; }
}

/* Mobile CV switcher — replaces the hidden left rail ≤760px */
.cv-mobile-switch { display: none; }
@media (max-width: 760px) {
  .cv-mobile-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
  }
  .cv-mobile-select {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 14px;
  }
  .cv-mobile-new {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
  }
}

.cv-left-rail {
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 14px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cv-rail-group { display: flex; flex-direction: column; gap: 4px; }

.cv-rail-group-header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  padding: 4px 8px;
}

.cv-rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font);
}
.cv-rail-item:hover { background: var(--bg-hover); }
.cv-rail-item.active {
  background: var(--bg-input);
  border-color: var(--border);
  font-weight: 600;
}
.cv-rail-item.cv-rail-empty,
.cv-rail-item.cv-rail-action {
  color: var(--accent);
  font-weight: 500;
  border: 1px dashed var(--border);
}
.cv-rail-icon { flex-shrink: 0; font-size: 14px; }
.cv-rail-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.cv-rail-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  padding: 6px 10px;
  line-height: 1.5;
}

/* Main editor pane */

.cv-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-primary);
}

.cv-empty {
  margin: auto;
  text-align: center;
  max-width: 460px;
  padding: 32px;
  color: var(--text-secondary);
}
.cv-empty h2 { margin: 0 0 10px; color: var(--text-primary); }
.cv-empty p { margin: 0 0 20px; line-height: 1.55; font-size: 13.5px; }

.cv-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
}
.cv-name-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font);
}
.cv-name-input:hover { border-color: var(--border); }
.cv-name-input:focus { outline: none; border-color: var(--accent); background: var(--bg-input); }
.cv-toolbar-meta { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
.cv-busy { color: var(--accent); }
/* Save status next to the CV name (cv.js _setSaveState). */
.cv-save-status { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; transition: opacity 0.4s ease; }
.cv-save-status:empty { display: none; }
.cv-save-status.is-faded { opacity: 0.55; }
.cv-save-status[data-state="error"],
.cv-save-status[data-state="expired"] { color: var(--red); font-weight: 600; }
.cv-save-retry {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.cv-save-login { color: inherit; text-decoration: underline; }
.cv-toolbar-actions { display: flex; gap: 8px; }

.cv-editor-tabs {
  display: flex;
  gap: 4px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
}
.cv-editor-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 500;
}
.cv-editor-tab:hover { color: var(--text-primary); }
.cv-editor-tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.cv-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px 60px;
  min-height: 0;
}

/* Inputs tab */

.cv-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}
.cv-input-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.cv-input-section h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cv-help { font-size: 12px; color: var(--text-tertiary); margin: 4px 0 10px; line-height: 1.5; }
.cv-help.cv-success { color: var(--green, #2a9b5c); }
.cv-input, .cv-textarea {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-primary);
  box-sizing: border-box;
  resize: vertical;
}
.cv-input:focus, .cv-textarea:focus { outline: none; border-color: var(--accent); }

.cv-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--accent);
  color: #1a1a1a;
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
}

.cv-file-drop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
}
.cv-file-drop:hover { border-color: var(--accent); color: var(--text-primary); }

.cv-import-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
}
.cv-import-status .cv-import-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.cv-import-status .cv-import-text { flex: 1; min-width: 0; word-break: break-word; }
.cv-import-status .cv-import-text strong { color: var(--text-primary); }

.cv-import-busy { border-color: var(--accent); }
.cv-import-busy .cv-import-icon { background: rgba(245, 166, 35, 0.18); color: var(--accent); }

.cv-import-done { border-color: var(--green, #2a9b5c); }
.cv-import-done .cv-import-icon { background: rgba(42, 155, 92, 0.18); color: var(--green, #2a9b5c); }

.cv-import-error { border-color: var(--red, #e55); }
.cv-import-error .cv-import-icon { background: rgba(229, 85, 85, 0.18); color: var(--red, #e55); }

.cv-import-tips {
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm, 6px);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-import-tips li {
  font-size: 12px;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
}
.cv-import-tips li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 11px;
}
.cv-import-tips strong { color: var(--text-primary); }
.cv-import-tips em { font-style: normal; opacity: 0.85; }

.cv-input-actions { background: transparent; border: none; padding: 4px 0; display: flex; align-items: center; gap: 12px; }
.cv-input-actions .cv-help { margin: 0; }

/* Editor tab */

.cv-editor-doc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}

.cv-section-manager-mobile { display: none; }

.cv-section-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.cv-section-card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-primary);
}
.cv-section-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.cv-section-card-head h3 { margin: 0; }

.cv-sections-panel { gap: 10px; }
.cv-sections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-section-row {
  display: grid;
  grid-template-columns: 18px 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-input);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.cv-section-order-icon {
  color: var(--text-tertiary);
  text-align: center;
  font-weight: 700;
  user-select: none;
}
.cv-section-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
}
.cv-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cv-section-circle {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--text-tertiary);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: border-color 140ms ease, background 140ms ease;
}
.cv-section-check input:checked + .cv-section-circle {
  border-color: var(--accent);
}
.cv-section-check input:checked + .cv-section-circle::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.cv-section-check input:focus + .cv-section-circle {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cv-section-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-primary);
}
.cv-section-arrows {
  display: inline-flex;
  gap: 4px;
}
.cv-section-arrow {
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.cv-section-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.cv-section-arrow:active:not(:disabled) { background: var(--bg-active); }
.cv-section-arrow:disabled { opacity: 0.35; cursor: default; }
.cv-section-arrow:focus-visible,
.cv-font-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-custom-title-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--text-primary);
  font: 600 14px/1.3 var(--font);
}
.cv-custom-title-input:focus { outline: none; border-color: var(--accent); }

.cv-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
/* Header photo control (Editor tab) */
.cv-photo-control {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cv-photo-preview {
  flex: none;
  width: 64px; height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
}
.cv-photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-photo-preview.is-empty { border-style: dashed; }
.cv-photo-body { flex: 1 1 auto; min-width: 0; }
.cv-photo-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.cv-photo-optional {
  font-weight: 400; font-size: 11px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.04em; margin-left: 4px;
}
.cv-photo-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cv-photo-hint { font-size: 11px; color: var(--text-tertiary); margin: 0; line-height: 1.4; }
.cv-form-grid-wide {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.cv-form-grid label,
.cv-section-card > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cv-form-grid input,
.cv-section-card > label input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  font-family: var(--font);
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: normal;
}
.cv-form-grid input:focus,
.cv-section-card > label input:focus { outline: none; border-color: var(--accent); }
.cv-field-hint {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.cv-section-card .btn-primary,
.cv-section-card .btn-ghost.btn-small {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  border: 1px solid var(--accent);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.cv-section-card .btn-primary:hover,
.cv-section-card .btn-ghost.btn-small:hover {
  background: var(--accent);
  color: #fff;
  transform: none;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 16px rgba(39, 112, 91, 0.16);
}
.cv-section-card .btn-primary:active,
.cv-section-card .btn-ghost.btn-small:active {
  transform: none;
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent-soft), inset 0 0 0 999px rgba(255, 255, 255, 0.08);
}
.cv-section-card .btn-primary:focus-visible,
.cv-section-card .btn-ghost.btn-small:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px rgba(39, 112, 91, 0.14);
}

.cv-work-entry {
  counter-increment: cv-entry;
  position: relative;
  background: linear-gradient(90deg, rgba(39, 112, 91, 0.055), transparent 28px), var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(39, 112, 91, 0.42);
  border-radius: 10px;
  padding: 16px 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.cv-work-entry:nth-of-type(even) {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.06), transparent 28px), var(--bg-input);
  border-left-color: rgba(245, 166, 35, 0.46);
}
.cv-work-entry:focus-within {
  border-color: rgba(39, 112, 91, 0.34);
  border-left-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 8px 22px rgba(16, 24, 40, 0.06);
}
.cv-work-entry:last-child { margin-bottom: 0; }
.cv-bullets-label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 8px 0 4px;
  font-weight: 500;
}
.cv-bullets-area { font-family: var(--font); }

/* Advisory bullet hints under work/leadership bullets (cv.js bulletHints). */
.cv-bullet-hints {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cv-bullet-hints:empty { display: none; }
.cv-bullet-hint {
  padding-left: 10px;
  border-left: 2px solid var(--warning, #E0B062);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}
.cv-row-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 8px; }
.cv-entry-arrows { display: inline-flex; gap: 4px; }

.cv-skill-row {
  display: grid;
  grid-template-columns: 160px 1fr auto auto;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}
.cv-skill-cat, .cv-skill-list {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font);
}

.cv-row {
  display: grid;
  grid-template-columns: 1fr 1fr 120px auto auto;
  gap: 8px;
  margin-bottom: 6px;
}
.cv-row input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font);
}

.cv-icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: auto;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: var(--font);
}
.cv-icon-btn:hover { color: var(--red, #e55); border-color: var(--red, #e55); }

@media (max-width: 760px) {
  .cv-editor-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .cv-toolbar-actions {
    flex-wrap: wrap;
  }
  .cv-form-grid-wide {
    grid-template-columns: 1fr;
  }
  .cv-section-card-head {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .cv-section-row {
    grid-template-columns: 16px 24px minmax(0, 1fr);
  }
  .cv-section-arrows {
    grid-column: 3;
    justify-self: start;
  }
  .cv-skill-row,
  .cv-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .cv-row .cv-icon-btn,
  .cv-skill-row .cv-icon-btn,
  .cv-row .cv-entry-arrows,
  .cv-skill-row .cv-entry-arrows {
    justify-self: start;
  }
}

.cv-diff-card { border-color: var(--accent); }
.cv-diff-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cv-diff-list li {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.cv-diff-head { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
.cv-diff-reason { color: var(--text-secondary); font-size: 12px; }

/* Right sections panel */

.cv-right-sections {
  border-left: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 16px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Font picker — global (not rail-scoped): used in the right rail, the Preview
   tab actions and the mobile section manager. */
.cv-font-control {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}
.cv-font-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}
.cv-font-select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font);
}
/* Font + paper pickers, stacked (renderDocControls). The right rail is too
   narrow for two selects side by side. */
.cv-doc-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cv-sections-panel .cv-doc-controls { margin-bottom: 10px; }
.cv-right-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 4px;
}
.cv-right-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.cv-right-progress {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 600;
  margin-top: 2px;
}
.cv-right-add {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: 700 18px/1 var(--font);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.cv-right-add:hover { background: var(--accent-hover, var(--accent)); box-shadow: 0 0 0 3px var(--accent-soft); }
.cv-right-list.cv-sections-list {
  gap: 7px;
}
.cv-right-section-row {
  grid-template-columns: 16px 24px minmax(0, 1fr) auto auto;
  min-height: 44px;
  background: var(--bg-primary);
}
.cv-right-section-row .cv-section-arrows { grid-column: 5; }
.cv-right-jump {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cv-right-jump span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-right-section-row:hover { border-color: var(--accent); }
.cv-right-section-row.done { color: var(--text-primary); }
.cv-right-section-row.disabled {
  opacity: 0.58;
  background: transparent;
}
.cv-section-remove {
  grid-column: 4;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font: 700 15px/1 var(--font);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.cv-section-remove:hover {
  color: var(--danger, #b84a4a);
  border-color: var(--danger, #b84a4a);
  background: rgba(184, 74, 74, 0.08);
}

@media (max-width: 1100px) {
  .cv-section-manager-mobile { display: block; }
}

/* Preview tab — on-screen rendering of the printable CV */

.cv-preview-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.cv-preview-actions { padding: 0 4px; }
/* Font picker inside the Preview tab — only for ≤1100px, where the right rail
   (which carries the same picker) is hidden. */
.cv-preview-font { max-width: 280px; margin-bottom: 4px; }
@media (min-width: 1101px) {
  .cv-preview-font { display: none; }
}

.cv-print-area {
  background: #ffffff;
  color: #111111;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: 0.5in 0.55in;
  font-size: 10pt;
  line-height: 1.15;
  max-width: 820px;
}
/* Force the chosen document font on every descendant so the global app UI
   font (DM Sans) can never bleed into the CV document, on screen or in print.
   data-cv-font is set by cv.js from a whitelist (server/store.js
   CV_FONT_FAMILIES); no attribute / unknown value → Times. */
.cv-print-area { --cv-font: "Times New Roman", Times, Georgia, serif; }
.cv-print-area[data-cv-font="georgia"]  { --cv-font: Georgia, "Times New Roman", serif; }
.cv-print-area[data-cv-font="arial"]    { --cv-font: Arial, Helvetica, "Liberation Sans", sans-serif; }
.cv-print-area[data-cv-font="helvetica"] { --cv-font: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.cv-print-area[data-cv-font="garamond"] { --cv-font: "EB Garamond", Garamond, "Times New Roman", serif; }
.cv-print-area[data-cv-font="roboto"]   { --cv-font: Roboto, Arial, Helvetica, sans-serif; }
.cv-print-area,
.cv-print-area * {
  font-family: var(--cv-font);
}
.cv-print-area h1, .cv-print-area h2, .cv-print-area p, .cv-print-area li, .cv-print-area div, .cv-print-area strong, .cv-print-area em {
  color: #111111;
}
.cv-print-header { text-align: center; margin-bottom: 12pt; }
.cv-print-name { font-size: 14pt; font-weight: 700; margin: 0 0 4pt; letter-spacing: 0.02em; }
/* Optional header photo — when present the header becomes a row: name/contact
   block on the left, headshot on the right. Absent → the block above is
   unchanged (centered). Photo is a portrait ~3:4 (passport-style). */
.cv-print-header--photo { display: flex; align-items: center; gap: 14pt; text-align: left; }
.cv-print-header--photo .cv-print-headtext { flex: 1 1 auto; min-width: 0; }
.cv-print-header--photo .cv-print-contact { justify-content: flex-start; }
.cv-print-photo {
  flex: none;
  width: 0.95in; height: 1.2in;
  object-fit: cover;
  border: 1px solid #111;
  /* Ensure the image renders in printed output, not just on screen. */
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.cv-print-meta { font-size: 10pt; color: #333; }
/* Contact rows: centered chips with a padded separator so the phone never
   touches the divider. Flex-wrap gives a reliable break opportunity between
   chips (adjacent spans with no whitespace do not wrap in inline flow), so a
   long contact row folds onto a centered second line instead of overflowing. */
.cv-print-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  line-height: 1.3;
  margin-top: 2pt;
}
.cv-contact-item { white-space: nowrap; }
.cv-contact-sep { padding: 0 0.5em; color: #555; }
/* Neutralize any browser auto-linking of phone / email so the document keeps a
   uniform look across macOS/Windows and Safari/Chrome/Firefox. */
.cv-print-header a { color: inherit; text-decoration: none; }
.cv-print-h2 {
  font-size: 11pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* 12pt space before each section heading = one clear line before the next block */
  margin: 12pt 0 4pt;
  border-bottom: 1px solid #111;
  padding-bottom: 2px;
}
.cv-print-profile { margin: 0 0 6pt; font-size: 10pt; }
.cv-print-entry { margin-bottom: 8pt; }
.cv-print-entry-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 10pt;
}
.cv-print-entry-head strong { font-weight: 700; }
.cv-print-loc { font-weight: 400; color: #333; }
.cv-print-dates { font-weight: 400; color: #333; white-space: nowrap; }
.cv-print-entry-sub { font-size: 10pt; margin: 1px 0 3pt; }
/* Bullets indented 0.25in from the left margin */
.cv-print-bullets { margin: 3pt 0 0; padding: 0 0 0 0.25in; }
.cv-print-bullets li { margin-bottom: 2pt; font-size: 10pt; line-height: 1.15; }
.cv-print-skill { margin: 2pt 0; font-size: 10pt; }
.cv-print-mini { font-size: 10pt; color: #333; margin-top: 1px; }

/* On phones/tablets shrink the on-screen document padding so the preview never
   overflows its container (print still uses the 1in @page margin). */
@media (max-width: 640px) {
  .cv-print-area { padding: 0.3in 0.28in; }
}

/* btn-small helper for inline add buttons (uses existing .btn class) */
.btn-small { padding: 4px 10px !important; font-size: 12px !important; }

/* Print mode — only the CV print area is visible, occupying the page */
@media print {
  /* Clean academic output: 1in margins, no app-injected running header/footer
     or page counter. (The browser's own date/URL/title header is a print-dialog
     setting — untick "Headers and footers" to remove it entirely.) */
  @page {
    size: A4;
    margin: 1in;
  }

  body.cv-print-mode * { visibility: hidden !important; }
  body.cv-print-mode .cv-print-area,
  body.cv-print-mode .cv-print-area * { visibility: visible !important; }
  body.cv-print-mode .cv-print-area {
    position: absolute !important;
    top: 0; left: 0;
    width: 100%;
    max-width: none;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #000 !important;
    font-family: var(--cv-font) !important;
    font-size: 10pt !important;
    line-height: 1.15 !important;
  }
  body.cv-print-mode .cv-print-entry,
  body.cv-print-mode .cv-print-h2 { break-inside: avoid; page-break-inside: avoid; }
}

/* ─── Admin Panel ─────────────────────────────────────────────────────────── */
.admin-layout { display:flex; flex:1; overflow:hidden; height:100%; min-height:0; }

.admin-sidebar {
  width:220px; min-width:220px;
  background:var(--bg-sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 0;
}
.admin-sidebar-title {
  font-size:11px; font-weight:700; letter-spacing:.5px;
  color:var(--text-tertiary); text-transform:uppercase;
  padding:0 16px 12px;
}
.admin-nav { display:flex; flex-direction:column; gap:2px; padding:0 8px; }
.admin-nav-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border:none; background:none;
  color:var(--text-secondary); font:13px/1.4 var(--font);
  border-radius:var(--radius-sm); cursor:pointer; text-align:left;
  transition:background var(--transition), color var(--transition);
}
.admin-nav-item:hover  { background:var(--bg-hover); color:var(--text-primary); }
.admin-nav-item.active { background:var(--bg-active); color:var(--accent); font-weight:600; }
.admin-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--accent); color:#fff; font-size:10px; font-weight:700; border-radius:9px;
}

.admin-main { flex:1; min-width:0; overflow-y:auto; padding:24px 28px; }
.admin-section-title    { font-size:20px; font-weight:700; margin:0 0 18px; color:var(--text-primary); }
.admin-section-subtitle { font-size:14px; font-weight:600; margin:24px 0 10px; color:var(--text-secondary); }
.admin-loading { color:var(--text-tertiary); padding:18px 0; }
.admin-error   { color:var(--red); padding:18px 0; }
.admin-empty   { color:var(--text-tertiary); padding:12px 0; }
.admin-count   { color:var(--text-tertiary); font-weight:400; font-size:13px; }

.admin-stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin-bottom:8px; }
.admin-stat-card {
  padding:14px 16px; background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-md);
}
.admin-stat-card--clickable { cursor:pointer; transition:border var(--transition), background var(--transition); }
.admin-stat-card--clickable:hover { border-color:var(--accent); background:var(--bg-hover); }
.admin-stat-num   { font-size:26px; font-weight:700; color:var(--accent); line-height:1.1; }
.admin-stat-label { font-size:12px; color:var(--text-secondary); margin-top:4px; text-transform:capitalize; }

.admin-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-md); }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { text-align:left; padding:10px 12px; font-weight:600; color:var(--text-secondary); background:var(--bg-secondary); border-bottom:1px solid var(--border); }
.admin-table td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:0; }
.admin-table tr:hover td { background:var(--bg-hover); }
.admin-table-actions { display:flex; gap:6px; flex-wrap:wrap; }

.admin-btn-mini {
  padding:4px 10px; background:var(--bg-secondary); color:var(--text-primary);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font:600 11px var(--font); cursor:pointer; transition:background var(--transition), border var(--transition);
}
.admin-btn-mini:hover { background:var(--bg-hover); border-color:var(--accent); }
.admin-btn-danger { color:var(--red); border-color:var(--red); }
.admin-btn-danger:hover { background:var(--red); color:#fff; }

.admin-pill {
  display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; font-weight:600;
  background:var(--bg-secondary); color:var(--text-secondary); border:1px solid var(--border);
}
.admin-pill--ok     { background:var(--green-light); color:var(--green); border-color:var(--green); }
.admin-pill--accent { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }

.admin-subtabs { display:flex; gap:4px; margin-bottom:14px; border-bottom:1px solid var(--border); }
.admin-subtab {
  padding:8px 14px; background:none; border:none; cursor:pointer;
  color:var(--text-secondary); font:600 13px var(--font);
  border-bottom:2px solid transparent;
}
.admin-subtab:hover  { color:var(--text-primary); }
.admin-subtab.active { color:var(--accent); border-bottom-color:var(--accent); }

.admin-queue-card {
  padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-md);
  margin-bottom:10px; background:var(--bg-secondary);
}
.admin-queue-card-title { font-weight:600; font-size:14px; margin-bottom:4px; color:var(--text-primary); }
.admin-queue-card-meta  { font-size:12px; color:var(--text-secondary); margin-bottom:6px; word-break:break-word; }
.admin-queue-card-meta a { color:var(--accent); }
.admin-queue-card-body  { font-size:13px; color:var(--text-secondary); margin:8px 0; white-space:pre-wrap; }
.admin-queue-actions    { display:flex; gap:8px; margin-top:8px; }

.admin-btn-approve {
  padding:5px 14px; background:var(--green-light); color:var(--green);
  border:1px solid var(--green); border-radius:var(--radius-sm);
  font:600 12px var(--font); cursor:pointer; transition:background var(--transition), color var(--transition);
}
.admin-btn-approve:hover { background:var(--green); color:#fff; }
.admin-btn-reject {
  padding:5px 14px; background:var(--red-light); color:var(--red);
  border:1px solid var(--red); border-radius:var(--radius-sm);
  font:600 12px var(--font); cursor:pointer; transition:background var(--transition), color var(--transition);
}
.admin-btn-reject:hover { background:var(--red); color:#fff; }

.admin-filterbar { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.admin-filter {
  padding:5px 12px; background:var(--bg-secondary); color:var(--text-secondary);
  border:1px solid var(--border); border-radius:14px;
  font:600 12px var(--font); cursor:pointer; transition:all var(--transition);
}
.admin-filter:hover  { color:var(--text-primary); }
.admin-filter.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.admin-report-title { font-weight:600; color:var(--text-primary); }
.admin-report-desc  { font-size:12px; color:var(--text-secondary); margin-top:3px; white-space:pre-wrap; max-width:420px; }
.admin-status-select {
  padding:4px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-input); color:var(--text-primary); font:12px var(--font); cursor:pointer;
}
.admin-note-input {
  width:100%; min-width:140px; padding:5px 8px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-input); color:var(--text-primary); font:12px var(--font);
}

.admin-system-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.admin-system-card {
  padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-secondary);
}
.admin-system-card-title { font-weight:600; margin-bottom:6px; color:var(--text-primary); }
.admin-system-card p     { font-size:13px; color:var(--text-secondary); margin:0 0 10px; }
.admin-system-result     { display:inline-block; margin-left:10px; font-size:12px; color:var(--text-tertiary); }

.auth-admin-btn { color:var(--accent); }

.resource-pending-badge {
  display:inline-block; padding:2px 7px; font-size:10px; font-weight:600;
  background:var(--yellow-light); color:var(--warning); border-radius:4px; margin-left:6px;
}
.resource-rejected-badge {
  display:inline-block; padding:2px 7px; font-size:10px; font-weight:600;
  background:var(--red-light); color:var(--red); border-radius:4px; margin-left:6px;
}
/* Native (first-party) post marker. Pill matches .discover-badge metrics
   so it sits flush with category badges on the same card meta row. */
.resource-native-badge {
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
  padding:2px 8px; border-radius:99px;
  background:#dcfce7; color:#15803d;
}
:root[data-theme="dark"] .resource-native-badge { background: rgba(21,128,61,0.25); color:#86efac; }
.resource-premium-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:99px;
  background:var(--accent-soft,#fff1e8); color:var(--accent,#b75f35);
  font-size:11px; font-weight:700;
}
.resources-paywall-card {
  grid-column:1/-1;
  position:relative;
  overflow:hidden;
  padding:34px 24px 38px;
  border:1px solid var(--border,#e6ded1);
  border-radius:18px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0, rgba(183,95,53,.11), transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.9),var(--bg-primary,#fff));
  box-shadow:0 18px 48px rgba(96,70,45,.10);
}
.resources-paywall-blur {
  height:52px;
  max-width:680px;
  margin:0 auto 14px;
  border-radius:14px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.04),rgba(0,0,0,.04) 22px,rgba(0,0,0,.08) 22px,rgba(0,0,0,.08) 44px);
  filter:blur(2px);
  opacity:.72;
}
.resources-premium-pill {
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:10px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--accent-soft,#fff1e8);
  color:var(--accent,#b75f35);
  font-size:12px;
  font-weight:800;
}
.resources-paywall-card strong {
  display:block;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--text-primary,#111);
}
.resources-paywall-card p {
  margin:8px auto 18px;
  max-width:520px;
  color:var(--text-secondary,#56524b);
}
.resources-upgrade-btn,
.reader-premium-upgrade {
  border:0;
  border-radius:999px;
  background:var(--primary,#176b57);
  color:#fff;
  padding:13px 28px;
  min-width:178px;
  font:800 15px/1 var(--font,system-ui);
  cursor:pointer;
  box-shadow:0 14px 34px rgba(23,107,87,.20),0 0 0 1px rgba(255,255,255,.20) inset;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.resources-upgrade-btn:hover,
.reader-premium-upgrade:hover {
  transform:translateY(-1px);
  background:#125846;
  box-shadow:0 18px 42px rgba(23,107,87,.26),0 0 0 1px rgba(255,255,255,.24) inset;
}
.resources-upgrade-btn:active,
.reader-premium-upgrade:active { transform:translateY(0); }

@media (max-width: 768px) {
  .admin-sidebar { width:56px; min-width:56px; padding:12px 0; }
  .admin-sidebar-title { display:none; }
  .admin-nav-item span:first-child { display:none; }
  .admin-main { padding:16px; }
}

/* ─── Avatar nav button + dropdown ─────────────────────────────────────── */
.auth-nav-area { display:flex; align-items:center; gap:10px; position:relative; }

.avatar-circle {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; overflow:hidden; user-select:none;
  background:var(--bg-secondary);
  color:#fff; font-weight:700; flex-shrink:0;
}
.avatar-circle img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-circle--initials { line-height:1; letter-spacing:.5px; }

.avatar-btn {
  position:relative;
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  border-radius:50%; line-height:0;
  transition:box-shadow var(--transition), transform var(--transition);
}
.avatar-btn .avatar-circle--btn { border:2px solid var(--border); transition:border-color var(--transition); }
.avatar-btn:hover .avatar-circle--btn { border-color:var(--accent); }
.avatar-btn:focus-visible       { outline:none; box-shadow:0 0 0 3px var(--accent-light); }
.avatar-btn--open .avatar-circle--btn { border-color:var(--accent); }

.avatar-dd-backdrop { display:none; }
.avatar-dd-backdrop[hidden] { display:none !important; }

.avatar-dd {
  position:fixed; top:56px; right:20px; z-index:2200;
  width:300px; max-width:calc(100vw - 24px);
  background:var(--bg-modal, var(--bg-primary));
  border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-modal, var(--shadow-lg));
  padding:8px; animation:avatar-dd-in .12s ease-out;
}
.avatar-dd[hidden] { display:none; }

@keyframes avatar-dd-in {
  from { opacity:0; transform:translateY(-4px) scale(.98); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.avatar-dd-header {
  display:flex; align-items:center; gap:12px;
  padding:10px 8px 12px; position:relative;
}
.avatar-dd-headerinfo { flex:1; min-width:0; }
.avatar-dd-name  { font-weight:700; color:var(--text-primary); font-size:14px;
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar-dd-email { font-size:12px; color:var(--text-secondary);
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar-dd-edit {
  position:absolute; right:6px; top:6px;
  width:26px; height:26px; padding:0;
  background:var(--bg-secondary); border:1px solid var(--border); color:var(--text-secondary);
  border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.avatar-dd-edit:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

.auth-admin-badge {
  display:inline-block; margin-top:4px; margin-left:4px;
  padding:1px 7px; font-size:9px; font-weight:700; letter-spacing:.5px;
  color:#fff; background:var(--accent); border-radius:9px;
}
.avatar-dd-header .auth-plan-badge { margin-top:5px; }

.avatar-dd-divider { height:1px; background:var(--border); margin:4px 0; }

.avatar-dd-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 10px; border:none; background:none;
  color:var(--text-primary); font:500 13px/1.2 var(--font);
  text-align:left; cursor:pointer; border-radius:var(--radius-sm);
  transition:background var(--transition);
}
.avatar-dd-item:hover  { background:var(--bg-hover); }
.avatar-dd-item:focus-visible { outline:none; background:var(--bg-active); }
.avatar-dd-item svg    { flex-shrink:0; color:var(--text-secondary); }
.avatar-dd-item:hover svg { color:var(--accent); }
.avatar-dd-upgrade {
  background:var(--bg-hover);
  font-weight:700;
}
.avatar-dd-upgrade svg { color:var(--accent); }
.avatar-dd-signout       { color:var(--red); }
.avatar-dd-signout svg   { color:var(--red); }
.avatar-dd-signout:hover { background:var(--red-light); }

/* ─── Avatar edit modal ────────────────────────────────────────────────── */
.avatar-overlay {
  position:fixed; inset:0; z-index:1500;
  background:var(--bg-overlay, rgba(0,0,0,.5));
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; transition:opacity .15s ease;
}
.avatar-overlay[hidden] { display:none; }
.avatar-overlay--open  { opacity:1; }
body.avatar-no-scroll  { overflow:hidden; }

.avatar-modal {
  background:var(--bg-modal, var(--bg-primary));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-modal, var(--shadow-lg));
  width:100%; max-width:480px; max-height:calc(100vh - 32px);
  display:flex; flex-direction:column; overflow:hidden;
}
.avatar-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.avatar-modal-header h2 { font-size:16px; font-weight:700; margin:0; color:var(--text-primary); }

.avatar-modal-body {
  padding:20px; overflow-y:auto;
  display:flex; flex-direction:column; gap:18px;
}

.avatar-crop-stage { display:flex; flex-direction:column; align-items:center; gap:12px; }
.avatar-crop-viewport {
  position:relative;
  width:240px; height:240px; max-width:100%;
  border-radius:50%; overflow:hidden;
  background:var(--bg-secondary); border:1px solid var(--border);
  cursor:grab; touch-action:none;
}
.avatar-crop-viewport--drag { cursor:grabbing; }
.avatar-crop-viewport canvas {
  width:100%; height:100%; display:block; user-select:none;
}
.avatar-crop-mask {
  position:absolute; inset:0; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(0,0,0,.15) inset;
  border-radius:50%;
}
/* Square crop preview — used for CV header photos (rendered square in the CV,
   not circular like the account avatar). */
.avatar-crop-viewport--square { border-radius:10px; }
.avatar-crop-viewport--square .avatar-crop-mask { border-radius:10px; }
.avatar-crop-placeholder {
  position:absolute; inset:0; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:12px;
  color:var(--text-tertiary); gap:6px;
}
.avatar-crop-placeholder p     { margin:0; font-size:13px; color:var(--text-secondary); }
.avatar-crop-placeholder .avatar-hint { font-size:11px; color:var(--text-tertiary); }

.avatar-zoom-row {
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:240px;
}
.avatar-zoom-row[hidden] { display:none; }
.avatar-zoom-label { font-size:18px; color:var(--text-tertiary); width:14px; text-align:center; }
.avatar-zoom { flex:1; accent-color:var(--accent); cursor:pointer; }

.avatar-help { margin:0; font-size:12px; color:var(--text-tertiary); text-align:center; }

.avatar-modal-actions {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-top:6px; border-top:1px solid var(--border); padding-top:14px;
}
.avatar-actions-right { margin-left:auto; display:flex; gap:8px; }
.avatar-actions-right #avatar-save {
  min-height:30px;
  padding:6px 14px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:0;
}
.avatar-remove-btn { color:var(--red); }
.avatar-remove-btn[hidden] { display:none; }

/* ─── Responsive (mobile sheet) ────────────────────────────────────────── */
@media (max-width: 540px) {
  .avatar-dd-backdrop:not([hidden]) {
    display:block;
    position:fixed;
    inset:0;
    z-index:2190;
    background:rgba(0,0,0,.35);
  }
  .avatar-dd {
    position:fixed; top:auto; bottom:0; left:0; right:0;
    width:100%; max-width:100%;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:10px 10px 22px;
    animation:avatar-dd-sheet-in .18s ease-out;
  }
  @keyframes avatar-dd-sheet-in {
    from { transform:translateY(100%); } to { transform:translateY(0); }
  }
  .avatar-dd-name  { white-space:normal; }
  .avatar-dd-email { white-space:normal; word-break:break-all; }

  .avatar-modal {
    max-width:100%;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    margin-top:auto; max-height:96vh;
  }
  .avatar-overlay { padding:0; align-items:flex-end; }
  .avatar-modal-actions { flex-direction:column; align-items:stretch; }
  .avatar-actions-right { margin-left:0; justify-content:flex-end; }
}

/* Crop viewport scales down on tiny screens */
@media (max-width: 360px) {
  .avatar-crop-viewport { width:200px; height:200px; }
}

/* ─── Avatar chevron indicator ─────────────────────────────────────────── */
.avatar-btn-chevron {
  position:absolute; right:-2px; bottom:-2px;
  width:16px; height:16px; border-radius:50%;
  background:var(--bg-primary); color:var(--text-secondary);
  border:1.5px solid var(--border);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--transition), color var(--transition),
             border-color var(--transition), transform .15s ease;
  pointer-events:none;
}
.avatar-btn:hover .avatar-btn-chevron      { background:var(--accent); color:#fff; border-color:var(--accent); }
.avatar-btn--open .avatar-btn-chevron      { background:var(--accent); color:#fff; border-color:var(--accent);
                                              transform:rotate(180deg); }

/* ─── App view overflow fixes ──────────────────────────────────────────── */
/* Settings view scrolls inside its app-view wrapper when content overflows. */
#view-settings { overflow-y:auto; -webkit-overflow-scrolling:touch; }
.settings-view { min-height:100%; box-sizing:border-box; }

/* Belt-and-suspenders: every dynamically-injected app-view that doesn't
   declare its own internal scroll falls back to scrolling at the wrapper level. */
.app-view > .admin-layout { height:100%; }

/* ─── Slide switch (theme toggle inside avatar dropdown) ───────────────── */
.avatar-dd-row {
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; color:var(--text-primary);
  font:500 13px/1.2 var(--font);
  border-radius:var(--radius-sm);
}
.avatar-dd-row svg { color:var(--text-secondary); flex-shrink:0; }
.avatar-dd-row-label { flex:1; }

.avatar-switch {
  position:relative; display:inline-block;
  width:36px; height:20px; cursor:pointer; flex-shrink:0;
}
.avatar-switch input {
  position:absolute; opacity:0; width:0; height:0;
  pointer-events:none;
}
.avatar-switch-track {
  position:absolute; inset:0;
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:20px; transition:background var(--transition), border-color var(--transition);
}
.avatar-switch-knob {
  position:absolute; top:1px; left:1px;
  width:16px; height:16px;
  background:#fff; border-radius:50%;
  box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.18));
  transition:transform .18s ease;
}
.avatar-switch input:checked + .avatar-switch-track { background:var(--accent); border-color:var(--accent); }
.avatar-switch input:checked + .avatar-switch-track .avatar-switch-knob { transform:translateX(16px); }
.avatar-switch input:focus-visible + .avatar-switch-track { box-shadow:0 0 0 3px var(--accent-light); }

/* ─── Settings: avatar row ─────────────────────────────────────────────── */
.settings-avatar-row {
  display:flex; align-items:center; gap:16px;
  padding:12px 0 16px; border-bottom:1px solid var(--border); margin-bottom:14px;
}
.settings-avatar-row .avatar-circle { border:2px solid var(--border); }
.settings-avatar-info  { display:flex; flex-direction:column; gap:4px; min-width:0; }
.settings-avatar-name-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.settings-avatar-name  { font-weight:600; color:var(--text-primary); }
.settings-plan-badge,
.auth-plan-badge {
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:2px 8px;
  border:1px solid rgba(31,122,98,.24);
  border-radius:999px;
  background:rgba(31,122,98,.10);
  color:#176b57;
  font-size:10px;
  font-weight:750;
  letter-spacing:.02em;
}
.settings-plan-badge.plan-badge--scribe,
.auth-plan-badge.plan-badge--scribe {
  border-color:rgba(180,101,50,.34);
  background:rgba(180,101,50,.12);
  color:#9a4e25;
}
.settings-plan-badge.plan-badge--scholar,
.auth-plan-badge.plan-badge--scholar {
  border-color:rgba(91,86,214,.32);
  background:linear-gradient(135deg, rgba(47,134,191,.14), rgba(124,58,237,.13));
  color:#315fbd;
}
:root[data-theme="dark"] .settings-plan-badge,
:root[data-theme="dark"] .auth-plan-badge {
  border-color:rgba(74,222,128,.24);
  background:rgba(34,197,94,.14);
  color:#86efac;
}
:root[data-theme="dark"] .settings-plan-badge.plan-badge--scribe,
:root[data-theme="dark"] .auth-plan-badge.plan-badge--scribe {
  border-color:rgba(251,191,36,.28);
  background:rgba(251,191,36,.15);
  color:#facc15;
}
:root[data-theme="dark"] .settings-plan-badge.plan-badge--scholar,
:root[data-theme="dark"] .auth-plan-badge.plan-badge--scholar {
  border-color:rgba(147,197,253,.28);
  background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(168,85,247,.18));
  color:#bfdbfe;
}
.settings-avatar-hint  { font-size:12px; color:var(--text-tertiary); }
.settings-avatar-actions { margin-top:4px; }

/* ─── Admin: avatar in user/queue/report cells ─────────────────────────── */
.admin-user-cell { display:flex; align-items:center; gap:8px; min-width:0; }
.admin-user-cell span {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.admin-queue-card-sub { display:flex; align-items:center; gap:8px; }
.admin-queue-card-sub .avatar-circle { flex-shrink:0; }

/* ─── Avatar modal: drag-and-drop highlight ────────────────────────────── */
.avatar-modal-body--dragover {
  outline:2px dashed var(--accent); outline-offset:-8px;
  background:var(--accent-light, var(--bg-hover));
}

/* ─── #6 Flex audit: bullet-proof nested scroll ────────────────────────── */
.app-view, .admin-layout, .admin-main, .resources-main, .alumni-main,
.settings-view, #view-cv, #view-admin {
  min-height:0;
}

/* ─── #7 Empty-state component (used by Programs, Resources, Alumni) ───── */
.empty-state {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 24px; text-align:center; gap:10px;
  color:var(--text-tertiary);
}
.empty-state-icon {
  width:56px; height:56px; border-radius:50%;
  background:var(--bg-secondary); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-tertiary); margin-bottom:6px;
}
.empty-state-title { font-size:15px; font-weight:600; color:var(--text-primary); margin:0; }
.empty-state-msg   { font-size:13px; color:var(--text-secondary); max-width:340px; margin:0; }
.empty-state-cta   { margin-top:10px; }

/* Fix: `hidden` attribute must win over .avatar-crop-placeholder display:flex */
.avatar-crop-placeholder[hidden],
.avatar-zoom-row[hidden],
.avatar-remove-btn[hidden] { display:none !important; }

/* Highlighted Change-avatar button on Settings page */
.settings-change-avatar-btn {
  min-height:32px;
  padding:8px 16px;
  font-size:12px;
  display:inline-flex; align-items:center;
  gap:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* Upload button (primary) inside avatar modal — slightly taller for prominence */
.avatar-upload-btn { padding:8px 16px; display:inline-flex; align-items:center; }

/* Phase 4 — Active sessions + recent activity in user settings ──────────── */
.settings-sessions-list,
.settings-activity-list {
  display:flex; flex-direction:column; gap:8px;
  margin-top:4px;
}
.settings-session-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-secondary);
}
.settings-session-row.is-current {
  border-color:var(--accent);
  background:var(--accent-light, var(--bg-secondary));
}
.settings-session-info { flex:1; min-width:0; }
.settings-session-ua {
  font-size:14px; font-weight:600; color:var(--text-primary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.settings-session-current {
  color:var(--accent); font-weight:600; font-size:12px;
}
.settings-session-meta {
  font-size:12px; color:var(--text-secondary); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.settings-session-revoke {
  padding:5px 12px; font:600 12px var(--font);
  background:var(--red-light, #fee); color:var(--red, #c00);
  border:1px solid var(--red, #c00); border-radius:var(--radius-sm);
  cursor:pointer; transition:background var(--transition), color var(--transition);
}
.settings-session-revoke:hover  { background:var(--red, #c00); color:#fff; }
.settings-session-revoke:disabled { opacity:.6; cursor:wait; }
.settings-sessions-actions { margin-top:12px; text-align:right; }

.settings-security-card {
  border:1px solid var(--border);
  border-radius:8px;
  padding:16px;
  margin:12px 0;
  background:var(--bg-secondary);
}
.settings-security-card:first-child { margin-top:0; }
.settings-security-card:last-child { margin-bottom:0; }
.settings-security-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.settings-security-title { font-weight:600; color:var(--text-primary); }
.settings-security-desc {
  color:var(--text-muted, var(--text-secondary));
  font-size:14px;
  margin-top:4px;
  line-height:1.35;
}
.settings-security-badge {
  padding:2px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  background:var(--bg-hover);
  color:var(--text-secondary);
  white-space:nowrap;
}
.settings-security-badge.on { background:#22c55e; color:#fff; }
.settings-security-actions {
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.settings-security-button {
  padding:7px 12px;
  font:600 12px var(--font);
  border:1px solid var(--accent);
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
.settings-security-button.secondary {
  background:transparent;
  color:var(--text-secondary);
  border-color:var(--border);
}
.settings-security-button:disabled { opacity:.55; cursor:not-allowed; }
.settings-security-flow {
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.settings-security-loading {
  font-size:13px;
  color:var(--text-secondary);
}
.settings-toggle {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  margin-top:8px;
  font-size:13px;
  color:var(--text-primary);
}
.settings-toggle input { accent-color:var(--accent); }
.settings-totp-setup {
  display:grid;
  gap:12px;
}
.settings-totp-qr {
  width:148px;
  height:148px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  padding:8px;
}
.settings-backup-codes pre {
  margin:10px 0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-primary);
  color:var(--text-primary);
  font:600 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space:pre-wrap;
}

.settings-activity-row {
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-secondary);
}
.settings-activity-event {
  font-size:13px; font-weight:600; color:var(--text-primary);
}
.settings-activity-meta {
  font-size:12px; color:var(--text-secondary); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis;
}

/* ── In-app resource modal (YouTube player + reader mode) ──────────────── */
.video-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 17, 21, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: video-modal-fade-in 140ms ease-out;
}
@keyframes video-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
body.video-modal-open { overflow: hidden; }

.video-modal-frame {
  width: min(90vw, 1100px);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--bg-primary, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.video-modal-frame-youtube {
  background: #111;
}
.video-modal-frame-reader { max-height: 92vh; }

.video-modal-backdrop {
  position: absolute; inset: 0;
  z-index: 0;
}
.resource-add-frame {
  max-width: 1040px;
  width: 94vw;
  height: 92vh;
  max-height: 92vh;
  position: relative;
  z-index: 1;
}
.resource-add-frame .video-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.resource-add-frame .video-modal-title {
  font-size: 17px; font-weight: 650; color: var(--text-primary);
}
.resource-add-frame .video-modal-close {
  background: transparent; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px;
  font-size: 22px; line-height: 1; color: var(--text-tertiary);
  transition: background 160ms ease, color 160ms ease;
}
.resource-add-frame .video-modal-close:hover {
  background: var(--bg-hover); color: var(--text-primary);
}
.resource-add-frame .resource-add-body {
  flex: 1 1 auto;
  padding: 18px 22px;
  overflow: auto;
  min-height: 0;
}
.resource-add-frame .resource-add-form {
  /* Reset margin from the old inline placement. */
  margin: 0;
}

.video-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--bg-secondary, #fafafa);
  flex: 0 0 auto;
}
.video-modal-title {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14px;
  color: var(--text-secondary, #666);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-modal-original {
  font-size: 13px; font-weight: 500;
  color: var(--accent, #ff6a00);
  text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--accent, #ff6a00);
  white-space: nowrap;
}
.video-modal-original:hover { background: var(--accent, #ff6a00); color: #fff; }
.video-modal-close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border, #e5e7eb);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  color: var(--text-primary, #111);
  border-radius: 10px;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.video-modal-close:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); border-color: var(--border-strong, #d4d4d8); color: var(--text-primary, #111); transform: translateY(-1px); }
.video-modal-close:active { transform: translateY(0); }

/* YouTube stage: 16:9 via padding-bottom (universal browser support).
   Children are absolutely positioned so YT's default 640×390 inline attrs
   can't shrink the iframe. */
.video-modal-stage {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
}
.video-modal-stage > * {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
}
.video-modal-stage .yt-fallback {
  background: #151515;
}
.video-modal-stage.video-premium-stage {
  height: auto;
  min-height: min(560px, 72vh);
  padding-bottom: 0;
  background: var(--bg-primary, #fff);
}
.video-modal-stage.video-premium-stage > * {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}
.video-premium-gate {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: stretch;
  min-height: min(560px, 72vh);
  background: var(--bg-primary, #fff);
}
.video-premium-thumb {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  background: #111;
}
.video-premium-copy {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 48px);
  color: var(--text-primary, #111);
}
.video-premium-copy h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.video-premium-copy p {
  margin: 0;
  color: var(--text-secondary, #666);
  line-height: 1.55;
}
.video-premium-copy .resources-upgrade-btn {
  width: fit-content;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .video-premium-gate { grid-template-columns: 1fr; }
  .video-premium-thumb { aspect-ratio: 16 / 9; height: auto !important; }
}
.yt-fallback {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px;
  text-align: center;
}
.yt-fallback-thumb {
  width: min(560px, 100%);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.yt-fallback-title {
  max-width: 760px;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: #f5f5f5;
}
.yt-fallback-note {
  max-width: 620px;
  color: #b8b8b8;
  font-size: 14px;
  line-height: 1.45;
}
.yt-fallback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: #ff0000;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.yt-fallback-link:hover {
  background: #d90000;
  color: #fff;
}

/* Reader mode: prose article layout. */
.video-modal-reader {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--bg-primary, #fff);
  padding: 32px 48px 56px;
}
.reader-loading,
.reader-error {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-secondary, #666);
  font-size: 14px;
}
.reader-error p { margin: 0 0 16px; }
.reader-error-btn {
  display: inline-block;
  padding: 10px 18px;
  background: var(--accent, #ff6a00);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
}
.reader-article {
  max-width: 720px;
  margin: 0 auto;
}
.reader-article-premium .reader-body {
  max-height: 280px;
  overflow:hidden;
  position:relative;
}
.reader-article-premium .reader-body:after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:110px;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg-primary,#fff));
}
:root[data-theme="dark"] .reader-article-premium .reader-body:after {
  background:linear-gradient(180deg,rgba(20,20,20,0),var(--bg-primary,#111));
}
.reader-premium-gate {
  position:relative;
  margin:34px auto 4px;
  padding:54px 32px 44px;
  text-align:center;
  border-radius:0;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 38%),
    var(--accent,#b75f35);
  color:#fff;
  box-shadow:0 18px 54px rgba(105,54,27,.22);
}
.reader-premium-pill {
  display:inline-flex; align-items:center; gap:6px;
  position:absolute;
  top:-16px; left:50%;
  transform:translateX(-50%);
  padding:8px 14px;
  border-radius:999px;
  background:var(--bg-primary,#fff);
  color:var(--accent,#b75f35);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.reader-premium-gate h2 {
  margin:0;
  color:#fff;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.025em;
}
.reader-premium-gate p {
  margin:12px auto 0;
  max-width:520px;
  color:rgba(255,255,255,.86);
  font-size:15px;
  line-height:1.5;
}
.reader-premium-gate .reader-premium-upgrade {
  margin-top:24px;
  background:#fff;
  color:var(--accent,#b75f35);
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}
.reader-premium-gate .reader-premium-upgrade:hover {
  background:#fffaf6;
  color:var(--accent,#b75f35);
}
.reader-premium-note {
  font-size:12px !important;
  color:rgba(255,255,255,.72) !important;
}
.discover-premium-lock {
  padding: 8px 0 4px;
}
.discover-premium-gate {
  margin: 0 auto;
  padding: 30px 28px 26px;
  max-width: 760px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% -25%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--accent) 5%, var(--bg-primary));
  color: var(--text-primary);
  box-shadow: 0 14px 34px rgba(31, 30, 26, .07);
}
.discover-premium-gate .reader-premium-pill {
  position: static;
  transform: none;
  margin: 0 auto 14px;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-primary));
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: none;
}
.discover-premium-gate h2 {
  color: var(--text-primary);
  font-size: 24px;
  letter-spacing: -.02em;
}
.discover-premium-gate p {
  max-width: 460px;
  color: var(--text-secondary);
  font-size: 14px;
}
.discover-premium-gate .reader-premium-upgrade {
  margin-top: 18px;
  min-width: 154px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 20%, transparent);
}
.discover-premium-gate .reader-premium-upgrade:hover {
  background: color-mix(in srgb, var(--accent) 92%, #000);
  color: #fff;
}
.discover-premium-gate .reader-premium-note {
  color: var(--text-tertiary) !important;
  margin-top: 12px;
}
.reader-hero {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 0 22px;
  background: var(--bg-tertiary, #f1f1f1);
}
.reader-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary, #111);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.reader-meta-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-secondary, #888);
  letter-spacing: 0.01em;
}
.reader-meta { letter-spacing: 0.01em; }
.reader-meta + .reader-readtime:not(:empty)::before { content: "·"; margin-right: 10px; opacity: 0.5; }
.reader-body {
  font-family: var(--font);
  font-size: var(--reader-font-size, 17px);
  line-height: 1.75;
  color: var(--text-primary, #1a1a1a);
}
.reader-body h1, .reader-body h2, .reader-body h3, .reader-body h4, .reader-body h5, .reader-body h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.8em 0 0.5em;
  color: var(--text-primary, #111);
}
.reader-body h1 { font-size: 1.75em; }
.reader-body h2 { font-size: 1.5em; }
.reader-body h3 { font-size: 1.25em; }
.reader-body h4 { font-size: 1.08em; }
.reader-body h5, .reader-body h6 { font-size: 1em; }
.reader-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4em auto;
  border-radius: 6px;
}
.reader-body figure { margin: 1.4em 0; }
.reader-body figure img { margin: 0 auto; }
.reader-body figcaption {
  font-family: var(--font);
  font-size: 0.85em;
  color: var(--text-secondary, #777);
  text-align: center;
  margin-top: 6px;
}
.reader-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: 0.95em;
}
.reader-body th, .reader-body td {
  border: 1px solid var(--border, #e5e7eb);
  padding: 8px 12px;
  text-align: left;
}
.reader-body th { background: rgba(0,0,0,0.03); font-weight: 600; }
.reader-body p { margin: 0 0 1em; }
.reader-body a {
  color: var(--accent, #ff6a00);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.reader-body ul, .reader-body ol { padding-left: 1.5em; margin: 0 0 1em; }
.reader-body li { margin: 0.3em 0; }
.reader-body blockquote {
  border-left: 3px solid var(--accent, #ff6a00);
  margin: 1em 0;
  padding: 0.4em 1em;
  color: var(--text-secondary, #555);
  font-style: italic;
}
.reader-body code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
}
.reader-body pre {
  background: #f7f7f8;
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 0.85em;
  margin: 1em 0;
}
.reader-body pre code { background: transparent; padding: 0; }
.reader-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1.4em auto;
}
.reader-body hr {
  border: 0;
  border-top: 1px solid var(--border, #e5e7eb);
  margin: 2em 0;
}

[data-theme="dark"] .reader-body code { background: rgba(255,255,255,0.08); }
[data-theme="dark"] .reader-body pre { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .reader-title { color: var(--text-primary); }

/* Reader prefs toolbar */
.reader-prefs { display: flex; gap: 8px; align-items: center; }
.reader-prefs-btn {
  background: var(--bg-primary, #fff); border: 1px solid var(--border, #e5e7eb);
  color: var(--text-primary, #111);
  font-size: 13px; font-weight: 700;
  width: 42px; height: 42px;
  border-radius: 10px;
  cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.reader-prefs-btn:hover { background: var(--bg-hover, rgba(0,0,0,0.04)); border-color: var(--border-strong, #d4d4d8); color: var(--text-primary, #111); transform: translateY(-1px); }
.reader-prefs-btn:active { transform: translateY(0); }

/* Reader scroll progress bar */
.reader-progress {
  height: 3px;
  width: 100%;
  background: transparent;
  flex: 0 0 auto;
}
.reader-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent, #ff6a00);
  transition: width 120ms linear;
}

/* Reader theme variants (per-modal data-reader-theme attribute) */
.video-modal-frame-reader[data-reader-theme="sepia"] .video-modal-reader {
  background: #faf3e3;
}
.video-modal-frame-reader[data-reader-theme="sepia"] .reader-body,
.video-modal-frame-reader[data-reader-theme="sepia"] .reader-title {
  color: #4a3c2a;
}
.video-modal-frame-reader[data-reader-theme="sepia"] .reader-body code {
  background: rgba(74,60,42,0.08);
}
.video-modal-frame-reader[data-reader-theme="dark"] .video-modal-reader {
  background: #1a1a1c;
}
.video-modal-frame-reader[data-reader-theme="dark"] .reader-body,
.video-modal-frame-reader[data-reader-theme="dark"] .reader-title {
  color: #e8e8ea;
}
.video-modal-frame-reader[data-reader-theme="dark"] .reader-meta,
.video-modal-frame-reader[data-reader-theme="dark"] .reader-readtime {
  color: #888;
}
.video-modal-frame-reader[data-reader-theme="dark"] .reader-body code {
  background: rgba(255,255,255,0.08);
}
.video-modal-frame-reader[data-reader-theme="dark"] .reader-body pre {
  background: #232326;
}
.video-modal-frame-reader[data-reader-theme="dark"] .reader-body th {
  background: rgba(255,255,255,0.06);
}
.video-modal-frame-reader[data-reader-theme="dark"] .reader-body blockquote {
  color: #bbb;
}

/* Inline embeds inside the article (YouTube, Vimeo, Twitter widgets) */
.reader-embed-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  margin: 1.4em 0;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.reader-embed-wrap > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.reader-body video,
.reader-body audio {
  display: block;
  max-width: 100%;
  margin: 1.4em auto;
  border-radius: 6px;
  background: #000;
}
.reader-body audio { background: transparent; width: 100%; }

@media (max-width: 640px) {
  .video-modal-overlay { padding: 0; }
  .video-modal-frame { width: 100vw; max-height: 100vh; border-radius: 0; }
  .video-modal-title { font-size: 13px; }
  .video-modal-original { display: none; }
  .video-modal-reader { padding: 20px 18px 32px; }
  .reader-title { font-size: 26px; }
  .reader-body { font-size: calc(var(--reader-font-size, 17px) - 1px); }
  .reader-prefs-btn { width: 28px; height: 28px; }
}

/* ── Resource Blog Writer ────────────────────────────────────────────────
 * Scoped under .resource-writer-* so existing resource cards / reader styles
 * are unaffected. The frame reuses .video-modal-frame layout above.
 */
.resources-header-actions { display: flex; gap: 8px; align-items: center; }

.resource-writer-frame { display: flex; flex-direction: column;
  /* Bumped to give the editor headroom + protect against tall mobile UA chrome. */
  max-width: 1040px; width: 94vw; height: 92vh; max-height: 92vh;
  position: relative; z-index: 1; }
.resource-writer-frame .video-modal-close { font-size: 22px; }
.resource-writer-body { flex: 1 1 auto; overflow: auto; padding: 18px 22px;
  display: flex; flex-direction: column; gap: 14px;
  /* min-height: 0 lets the edit area grow + the textarea fill the body
     instead of pushing the footer off-screen. */
  min-height: 0; }
.resource-writer-fields { display: flex; flex-direction: column; gap: 10px;
  flex-shrink: 0; }
.resource-writer-meta-row { display: grid; grid-template-columns: 1fr 2fr;
  gap: 10px; }
.resource-writer-toolbar { display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.rw-tb { padding: 4px 10px; background: transparent; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px;
  color: var(--text-primary); font-size: 13px; }
.rw-tb:hover { background: var(--bg-hover); }
.rw-tb.active { background: var(--accent); color: var(--text-inverse); }
.resource-writer-edit-area { position: relative; flex: 1; min-height: 280px; }
.resource-writer-textarea { width: 100%; height: 100%; min-height: 280px;
  resize: vertical; padding: 10px 12px; font-family: ui-monospace, monospace;
  font-size: 14px; line-height: 1.55; background: var(--bg-input);
  color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 4px; box-sizing: border-box; }
.resource-writer-textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light); }
.resource-writer-preview { padding: 12px 16px; background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 4px;
  min-height: 280px; overflow: auto; }
.resource-writer-preview-inner h1 { font-size: 24px; margin: 0 0 6px; }
.resource-writer-preview-inner .resource-writer-subtitle { opacity: 0.7;
  margin: 0 0 12px; }
.resource-writer-hero { max-width: 100%; height: auto; border-radius: 4px;
  margin: 0 0 12px; display: block; }
.resource-writer-prose { line-height: 1.6; }
.resource-writer-prose img { max-width: 100%; height: auto; }
.resource-writer-footer { display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 22px; border-top: 1px solid var(--border);
  /* Guarantee footer always visible — without flex-shrink:0 the editor
     body would push it off-screen on short viewports. */
  flex-shrink: 0; background: var(--bg-surface); }
.resource-writer-status { font-size: 12px; opacity: 0.7; margin-left: auto;
  margin-right: 10px; }
.resource-writer-status.status-saving { color: var(--accent); }
.resource-writer-status.status-saved  { color: #10b981; }
.resource-writer-status.status-error  { color: #ef4444; }

.resource-card-draft { border-left: 3px solid var(--warning); }
.resource-card-draft-row { display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; }
.resource-card-draft-title { cursor: pointer; }
.resource-draft-badge { display: inline-block; padding: 1px 7px;
  background: var(--warning); color: var(--text-primary); font-size: 10px; font-weight: 600;
  border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ── First-time onboarding tour ─────────────────────────────────────────── */
.onboarding-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 18, 25, 0.58);
  animation: onboarding-fade-in 140ms ease both;
}

.onboarding-modal {
  width: min(480px, 100%);
  padding: 34px 34px 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  animation: onboarding-modal-in 180ms ease both;
}

@keyframes onboarding-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes onboarding-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.onboarding-modal-brand {
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.onboarding-modal-title {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 650;
  line-height: 1.2;
}

.onboarding-modal-body {
  margin: 0 0 24px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.58;
}

.onboarding-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.onboarding-modal .btn-primary,
.onboarding-modal .btn-secondary,
.onboarding-popover .btn-primary,
.onboarding-popover .btn-secondary {
  min-height: 40px;
  justify-content: center;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease;
  box-shadow: none;
}

.onboarding-modal .btn-primary,
.onboarding-popover .btn-primary {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--text-inverse);
}

.onboarding-modal .btn-primary:hover,
.onboarding-popover .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: none;
}

.onboarding-modal .btn-secondary,
.onboarding-popover .btn-secondary {
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.onboarding-modal .btn-secondary:hover,
.onboarding-popover .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}

.onboarding-modal .btn-primary:active,
.onboarding-modal .btn-secondary:active,
.onboarding-popover .btn-primary:active,
.onboarding-popover .btn-secondary:active {
  transform: translateY(0);
}

.onboarding-popover button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 9100;
  pointer-events: none;
}

.onboarding-spotlight {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(15, 18, 25, 0.58);
  transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease;
  pointer-events: auto;
  will-change: left, top, width, height;
}

.onboarding-popover {
  position: absolute;
  width: min(340px, calc(100vw - 24px));
  padding: 18px 18px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  pointer-events: auto;
  transition: left 160ms ease, top 160ms ease;
  will-change: left, top;
}

.onboarding-popover:focus { outline: none; }

.onboarding-popover-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
  background: var(--bg-surface);
  transform: rotate(45deg);
}

.onboarding-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.onboarding-popover-counter {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.onboarding-popover-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.onboarding-popover-dots .tour-dot {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  padding: 0;
  width: 8px;
  height: 8px;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong, #d4d4d8);
  cursor: pointer;
  transition: background var(--motion-fast, 160ms) var(--motion-ease, ease),
              transform var(--motion-fast, 160ms) var(--motion-ease, ease);
}
.onboarding-popover-dots .tour-dot:hover { background: var(--text-muted, #71717a); }
.onboarding-popover-dots .tour-dot:focus-visible {
  outline: 2px solid var(--accent, #256E5B);
  outline-offset: 2px;
}
.onboarding-popover-dots .tour-dot.is-done {
  background: var(--accent, #256E5B);
  opacity: 0.55;
}
.onboarding-popover-dots .tour-dot.is-current {
  background: var(--accent, #256E5B);
  transform: scale(1.45);
}

.onboarding-popover-title {
  margin: 0 0 6px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
}

.onboarding-popover-body {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

.onboarding-popover-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.onboarding-popover-nav {
  display: flex;
  gap: 8px;
}

.onboarding-popover-nav > button {
  min-width: 88px;
}

.btn-text {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.btn-text:hover { color: var(--text-primary); }

@media (max-width: 700px) {
  .onboarding-modal { padding: 28px 22px 22px; }
  .onboarding-popover { max-width: calc(100vw - 24px); }
  .onboarding-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .onboarding-popover-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .onboarding-popover-nav { width: 100%; }
  .onboarding-popover-nav > button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-spotlight,
  .onboarding-popover,
  .onboarding-modal-overlay,
  .onboarding-modal,
  .onboarding-modal .btn-primary,
  .onboarding-modal .btn-secondary,
  .onboarding-popover .btn-primary,
  .onboarding-popover .btn-secondary {
    animation: none;
    transition: none;
  }
}

/* ─── Alumni & Mentor Marketplace ─────────────────────────────────────────── */
.alumni-mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 6px);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-secondary, #fff));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border, #ddd));
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.alumni-mp-badge:hover { background: color-mix(in srgb, var(--accent) 22%, var(--bg-secondary, #fff)); }

.mp-page { max-width: 1100px; margin: 0 auto; padding: 24px; }
.mp-header h1 { margin: 0 0 4px; font-size: 22px; }
.mp-sub { color: var(--text-secondary, #666); margin: 0 0 20px; }
.mp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #ddd); margin-bottom: 16px; }
.mp-tab {
  background: transparent; border: 0; padding: 10px 14px; cursor: pointer;
  color: var(--text-secondary, #666); border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 500;
}
.mp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mp-tab:hover { color: var(--text, #222); }
.mp-tab-body { min-height: 200px; }
.mp-loading, .mp-empty, .mp-muted { color: var(--text-secondary, #666); font-size: 14px; }
.mp-err { color: var(--danger, #c00); }

.mp-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.mp-table th { text-align: left; padding: 10px; border-bottom: 1px solid var(--border, #ddd); color: var(--text-secondary, #666); font-weight: 600; }
.mp-table td { padding: 10px; border-bottom: 1px solid var(--border-light, #eee); }

.mp-pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; text-transform: capitalize;
  background: var(--bg-secondary, #f5f5f5); color: var(--text, #333);
}
.mp-pill-active, .mp-pill-paid, .mp-pill-scheduled, .mp-pill-completed {
  background: color-mix(in srgb, var(--success, #2a8) 18%, transparent);
  color: var(--success, #2a8);
}
.mp-pill-pending_payment, .mp-pill-draft, .mp-pill-paused, .mp-pill-in_progress {
  background: color-mix(in srgb, var(--warning, #d80) 18%, transparent);
  color: var(--warning, #d80);
}
.mp-pill-refunded, .mp-pill-cancelled, .mp-pill-archived, .mp-pill-disputed {
  background: color-mix(in srgb, var(--danger, #c33) 18%, transparent);
  color: var(--danger, #c33);
}

.mp-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.mp-modal-overlay.hidden { display: none; }
.mp-modal {
  position: relative; background: var(--bg, #fff); color: var(--text, #222);
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
  overflow: auto; border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,0.2)); padding: 24px;
}
.mp-modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; font-size: 24px; cursor: pointer;
  color: var(--text-secondary, #888);
}
.mp-modal-body { display: block; }

.mp-profile { display: flex; gap: 16px; margin-bottom: 16px; }
.mp-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mp-avatar-initials {
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.mp-profile-name { font-size: 18px; font-weight: 600; }
.mp-profile-sub, .mp-profile-meta, .mp-profile-contacts { font-size: 13px; color: var(--text-secondary, #666); margin-top: 2px; }
.mp-profile-contacts a { color: var(--accent); margin-right: 6px; }
.mp-profile-bio { font-size: 14px; margin: 8px 0 0; }

.mp-section-title { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: var(--text-secondary, #666); text-transform: uppercase; letter-spacing: 0.04em; }
.mp-service-grid { display: grid; gap: 12px; }
.mp-service-card {
  border: 1px solid var(--border, #ddd); border-radius: var(--radius-md, 8px);
  padding: 14px; background: var(--bg-secondary, #fafafa);
}
.mp-service-head { display: flex; justify-content: space-between; gap: 8px; }
.mp-service-title { font-weight: 600; font-size: 15px; }
.mp-service-cat { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg, #fff); color: var(--text-secondary, #666); }
.mp-service-desc { margin: 6px 0; font-size: 13px; color: var(--text-secondary, #666); }
.mp-service-meta { font-size: 12px; color: var(--text-secondary, #888); margin-bottom: 8px; }
.mp-service-footer { display: flex; justify-content: space-between; align-items: center; }
.mp-service-price { font-weight: 700; font-size: 16px; color: var(--accent); }

.mp-checkout { display: flex; flex-direction: column; gap: 10px; }
.mp-checkout-summary { padding: 10px 12px; background: var(--bg-secondary, #fafafa); border-radius: var(--radius-md, 8px); font-size: 14px; }
.mp-label { font-size: 13px; font-weight: 500; margin-top: 6px; }
.mp-checkout textarea, .mp-checkout input[type="text"] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 6px); font: inherit;
  background: var(--bg, #fff); color: var(--text, #222);
}
.mp-checkout-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.mp-back { background: transparent; border: 0; color: var(--accent); cursor: pointer; margin-bottom: 8px; }

.mp-qr { display: flex; justify-content: center; padding: 8px; }
.mp-qr-img { max-width: 240px; width: 100%; height: auto; }
.mp-pay-details { list-style: none; padding: 0; margin: 8px 0; }
.mp-pay-details li {
  display: flex; justify-content: space-between; padding: 6px 0;
  border-bottom: 1px dashed var(--border-light, #eee); font-size: 13px;
}
.mp-pay-details li span { color: var(--text-secondary, #666); }

.mp-actions-row { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mp-svc-row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 8px); margin-bottom: 8px;
}
.mp-svc-row-title { font-weight: 600; font-size: 14px; }
.mp-svc-row-meta { font-size: 12px; color: var(--text-secondary, #666); }
.mp-svc-row-actions { display: flex; gap: 6px; }

.mp-svc-form {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px; border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px); margin-bottom: 12px;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.mp-svc-form label { font-size: 12px; font-weight: 500; color: var(--text-secondary, #666); }
.mp-svc-form input, .mp-svc-form textarea, .mp-svc-form select {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 6px); font: inherit;
  background: var(--bg, #fff); color: var(--text, #222);
}
.mp-svc-row-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-svc-form-actions { display: flex; gap: 8px; justify-content: flex-end; }

.mp-incoming-list { display: flex; flex-direction: column; gap: 10px; }
.mp-incoming-card {
  padding: 14px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 8px); background: var(--bg, #fff);
}
.mp-incoming-head { display: flex; justify-content: space-between; align-items: flex-start; }
.mp-incoming-amount { text-align: right; font-weight: 600; }
.mp-incoming-notes { margin: 8px 0; padding: 8px; background: var(--bg-secondary, #fafafa); border-radius: var(--radius-sm, 6px); font-size: 13px; }
.mp-incoming-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.mp-incoming-actions { display: flex; gap: 6px; }

.mp-seller-settings label { display: block; font-size: 13px; font-weight: 500; margin-top: 8px; }
.mp-seller-settings input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 6px); margin-top: 4px;
  background: var(--bg, #fff); color: var(--text, #222);
}
.mp-toggle { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 13px; }

/* Browse Services (top-level discovery grid) */
.mp-browse-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 12px; background: var(--bg-secondary, #fafafa);
  border-radius: var(--radius-md, 8px);
}
.mp-browse-filters input, .mp-browse-filters select {
  padding: 8px 10px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 6px); font: inherit; min-width: 120px;
  background: var(--bg, #fff); color: var(--text, #222);
}
.mp-browse-filters input[type="search"] { flex: 1; min-width: 200px; }
.mp-browse-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.mp-browse-card {
  padding: 16px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-md, 8px); background: var(--bg, #fff);
  cursor: pointer; transition: box-shadow 0.15s;
  display: flex; flex-direction: column; gap: 10px;
}
.mp-browse-card:hover { box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08)); }
.mp-browse-card-top { display: flex; gap: 12px; align-items: flex-start; }
.mp-browse-card-meta { flex: 1; min-width: 0; }
.mp-browse-card-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.mp-browse-card-cat { font-size: 12px; color: var(--text-secondary, #666); margin-top: 2px; }
.mp-browse-card-mentor { font-size: 12px; color: var(--text-secondary, #888); margin-top: 2px; }
.mp-browse-card-desc {
  font-size: 13px; color: var(--text-secondary, #555); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-browse-card-rating { font-size: 11px; color: var(--text-secondary, #999); font-style: italic; }
.mp-browse-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
}

/* Phase 1.5 — alumni → mentor application banner */
.alumni-mentor-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px; margin: 0 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border, #ddd));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary, #fafafa));
  color: var(--text, #222); border-radius: var(--radius-md, 8px);
}
.alumni-mentor-banner-actions { display: flex; gap: 6px; }

/* Mentor breakdown (Incoming Bookings amount column) */
.mp-mentor-breakdown { border-collapse: collapse; font-size: 12px; }
.mp-mentor-breakdown td { padding: 2px 8px; text-align: right; }
.mp-mentor-breakdown td:first-child { text-align: left; color: var(--text-secondary, #666); }

.mp-meeting-row {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 8px;
  align-items: center; margin: 10px 0; font-size: 13px;
}
.mp-meeting-row input {
  padding: 6px 8px; border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-sm, 6px); font: inherit;
  background: var(--bg, #fff); color: var(--text, #222);
}

/* Alumni hub — sub-tab strip (Phase 1.5 fold-in) */
.alumni-subtabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border, #ddd);
  margin: 0 0 16px;
}
.alumni-subtab {
  background: transparent; border: 0; padding: 10px 16px;
  font: inherit; cursor: pointer;
  color: var(--text-secondary, #666);
  border-bottom: 2px solid transparent;
  font-weight: 500;
}
.alumni-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.alumni-subtab:hover { color: var(--text, #222); }

/* Coming Soon placeholder shown to non-admin users when feature flag off */
.alumni-coming-soon {
  max-width: 560px; margin: 80px auto; padding: 40px 24px; text-align: center;
}
.alumni-coming-soon h1 { font-size: 28px; margin: 0 0 4px; }
.alumni-coming-soon-sub {
  font-size: 18px; color: var(--accent); margin: 0 0 16px; font-weight: 600;
}
.alumni-coming-soon-desc {
  color: var(--text-secondary, #666); line-height: 1.6; font-size: 15px;
}

/* ── App Shell Mobile / Tablet ─────────────────────────────────────────── */

@media (max-width: 1023px) {
  :root { --sidebar-width: 260px; }
}

@media (max-width: 767px) {
  :root { --sidebar-width: 100vw; }

  .app-root {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 200;
    width: 100vw;
    transform: translateX(-100%);
    transition: transform var(--motion-base) var(--motion-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-root[data-sidebar-open="true"] .sidebar {
    transform: translateX(0);
  }

  .app-root[data-sidebar-open="true"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 199;
  }

  .main-content {
    width: 100%;
    min-width: 0;
  }

  .mobile-menu-toggle {
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 201;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--text-inverse);
    border: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
  }

  .modal {
    width: 100vw !important;
    max-width: 100vw;
    min-height: 60vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    transform: none;
    margin: 0;
  }

  .detail-body {
    padding: 16px !important;
  }

  .program-list {
    max-height: 50vh;
  }
}

@media (min-width: 768px) {
  .mobile-menu-toggle { display: none; }
}