@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap");

/* ---------------------------------------------------------------------------
   Legacy token aliases.
   Older screens still reference these names; they resolve to the design-system
   tokens declared below so there is a single source of truth for colour.
   --------------------------------------------------------------------------- */
:root {
  --ink: #172033;
  --muted: #62708a;
  --accent: #6558e8;
  --accent-soft: #efedff;
  --card: #ffffff;
  --line: #e3e7ef;
  --bg: #f2f4f8;
  --font: Inter, "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-feature-settings: "cv05" 1, "ss01" 1;
  color: var(--ink);
  min-height: 100vh;
}

.container { width: 100%; max-width: 1540px; margin: 0 auto; padding: 30px 34px 56px; }

/* Tables ------------------------------------------------------------------ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  font-size: .88rem;
}
.data-table th {
  padding: 11px 14px;
  color: var(--muted);
  background: var(--surface-soft, #f7f8fc);
  border-bottom: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: var(--surface-soft, #f7f8fc); }
.data-table td input, .data-table td select {
  min-height: 36px;
  padding: 6px 9px;
  font-size: .86rem;
}

/* Status badges ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter .12s ease;
}
.badge::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.badge:hover { filter: brightness(.97); }
.badge.on {
  color: var(--success, #18a26d);
  background: var(--success-soft, #e8f8f1);
  border-color: rgba(24, 162, 109, .22);
}
.badge.off {
  color: var(--danger, #dc4c64);
  background: var(--danger-soft, #fff0f2);
  border-color: rgba(220, 76, 100, .22);
}
.inline { display: inline; }

/* Surfaces ---------------------------------------------------------------- */
.form-card, .form-grid, .preview-block, .hero-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 14px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(16, 27, 53, .04));
}
.form-grid, .preview-block, .hero-panel { padding: 20px; }
.form-grid { display: grid; gap: 12px; }
.form-grid label { font-weight: 600; font-size: .84rem; }

.editor {
  min-height: 180px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
}
.upload-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; }
.preview-thumb, .preview-image {
  max-width: 280px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 10px);
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  background: var(--navy-950, #0b1224);
  color: #cfd7ff;
  padding: 16px;
  border-radius: var(--radius-sm, 10px);
  overflow: auto;
}
.error { color: var(--danger, #dc4c64); font-size: .84rem; }
.checkbox { display: flex; align-items: center; gap: 9px; }
.checkbox input { width: auto; }

/* Premium CMS design system */
:root {
  --navy-950: #0b1224;
  --navy-900: #101b35;
  --navy-800: #172442;
  --surface: #ffffff;
  --surface-soft: #f7f8fc;
  --canvas: #f2f4f8;
  --border: #e3e7ef;
  --border-strong: #d5dae5;
  --text: #172033;
  --text-soft: #62708a;
  --text-faint: #929caf;
  --primary: #6558e8;
  --primary-dark: #5145cd;
  --primary-soft: #efedff;
  --success: #18a26d;
  --success-soft: #e8f8f1;
  --warning: #df8d22;
  --warning-soft: #fff5e6;
  --danger: #dc4c64;
  --danger-soft: #fff0f2;
  --shadow-xs: 0 1px 2px rgba(16, 27, 53, .04);
  --shadow-sm: 0 7px 20px rgba(16, 27, 53, .07);
  --shadow-lg: 0 24px 70px rgba(16, 27, 53, .14);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --sidebar-width: 264px;
}

html { font-size: 15px; }
body {
  color: var(--text);
  background: var(--canvas);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cms-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  overflow-y: auto;
  color: #dce3f5;
  background:
    radial-gradient(circle at 15% 0, rgba(101, 88, 232, .2), transparent 32%),
    var(--navy-950);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 76px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: inherit;
}
.brand__symbol {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, #8377ff, #5547db);
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(101, 88, 232, .32);
}
.brand__symbol svg { width: 23px; height: 23px; stroke-width: 1.7; }
.brand > span:last-child { display: grid; }
.brand strong { color: white; font-size: 1.08rem; letter-spacing: -.01em; }
.brand small { color: #8e9ab5; font-size: .69rem; letter-spacing: .11em; text-transform: uppercase; }

.sidebar__tenant {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 14px 9px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
}
.tenant-avatar, .user-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, #6859e9, #8c7fff);
  border-radius: 9px;
  font-weight: 700;
  text-transform: uppercase;
}
.sidebar__tenant > span:last-child, .user-chip > span:nth-child(2) { display: grid; min-width: 0; }
.sidebar__tenant small, .user-chip small { color: #7f8ba5; font-size: .69rem; line-height: 1.2; }
.sidebar__tenant strong, .user-chip strong {
  overflow: hidden;
  color: #eef2ff;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__nav { flex: 1; padding: 6px 12px 22px; }
.nav-label {
  margin: 19px 10px 7px;
  color: #66738f;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  margin: 2px 0;
  padding: 0 11px;
  color: #9eabc5;
  border-radius: 10px;
  text-decoration: none;
  transition: .18s ease;
}
.nav-item:hover { color: white; background: rgba(255, 255, 255, .06); }
.nav-item.is-active {
  color: white;
  background: linear-gradient(90deg, rgba(101, 88, 232, .25), rgba(101, 88, 232, .09));
}
.nav-item.is-active::before {
  position: absolute;
  left: -12px;
  width: 3px;
  height: 24px;
  background: #8175ff;
  border-radius: 0 4px 4px 0;
  content: "";
}
.nav-item svg { width: 18px; height: 18px; }
.nav-item span:nth-child(2) { flex: 1; font-size: .88rem; font-weight: 600; }
.nav-item small { color: #69758d; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.nav-item.is-muted { cursor: default; }
.nav-count {
  display: grid;
  min-width: 24px;
  height: 21px;
  place-items: center;
  color: #cfcaff;
  background: rgba(101, 88, 232, .24);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
}
.sidebar__footer { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .07); }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 7px; }
.user-avatar { width: 36px; height: 36px; background: #263451; }
.user-chip > span:nth-child(2) { flex: 1; }
.user-chip > form button { display: grid; padding: 5px; color: #7f8ba5; background: transparent; border: 0; place-items: center; cursor: pointer; }
.user-chip > form button:hover { color: white; }
.user-chip svg { width: 18px; }

.cms-main { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar {
  /* z-index only applies to positioned elements; without this the value below was
     inert and the site-switcher dropdown was painted over by page content. */
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: 76px;
  padding: 0 30px;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--text-soft);
  background: white;
  border: 1px solid var(--border);
  border-radius: 11px;
  place-items: center;
  cursor: pointer;
  transition: .18s ease;
}
.icon-button:hover { color: var(--primary); border-color: #cfc9ff; box-shadow: var(--shadow-xs); }
.icon-button svg { width: 18px; }
/* Carries the unread count, so the badge means something rather than being decoration. */
.notification-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: white;
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: #f05468;
  border: 1.5px solid white;
  border-radius: 9px;
  place-items: center;
}
.mobile-menu { display: none; margin-right: 10px; }

.site-switcher { position: relative; }
.site-switcher__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  padding: 7px 10px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 11px;
  text-align: left;
  cursor: pointer;
}
.site-switcher__trigger:hover { background: var(--surface-soft); }
.site-switcher__mark {
  display: grid;
  width: 36px;
  height: 36px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 10px;
  place-items: center;
}
.site-switcher__mark svg { width: 19px; }
.site-switcher__trigger > span:nth-child(2) { display: grid; flex: 1; }
.site-switcher__trigger small, .site-option small {
  color: var(--text-faint);
  font-size: .68rem;
  line-height: 1.2;
}
.site-switcher__trigger strong { font-size: .86rem; }
.site-switcher__trigger .chevron { width: 16px; color: var(--text-faint); transition: transform .2s; }
.site-switcher.is-open .chevron { transform: rotate(180deg); }
.site-switcher__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  display: none;
  width: 280px;
  padding: 8px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.site-switcher.is-open .site-switcher__menu { display: block; animation: pop-in .16s ease; }
.dropdown-label { padding: 7px 9px; color: var(--text-faint); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.site-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  color: var(--text);
  border-radius: 10px;
  text-decoration: none;
}
.site-option:hover { background: var(--surface-soft); }
.site-option.is-active { background: var(--primary-soft); }
.site-option__icon {
  display: grid;
  width: 34px;
  height: 34px;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-weight: 700;
  place-items: center;
}
.site-option > span:nth-child(2) { display: grid; flex: 1; }
.site-option svg { width: 17px; color: var(--primary); }

.content { max-width: 1540px; margin: 0 auto; padding: 30px 34px 56px; }
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow::before { width: 18px; height: 2px; background: currentColor; border-radius: 2px; content: ""; }
.page-header h1, .hero-panel h1, .form-card h1 {
  margin: 0;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(1.65rem, 2vw, 2.05rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.2;
}
.page-header p { max-width: 650px; margin: 6px 0 0; color: var(--text-soft); font-size: .92rem; }
.page-header__actions, .actions { display: flex; align-items: center; gap: 9px; margin: 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  color: white;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 5px 12px rgba(101, 88, 232, .17);
  font-size: .84rem;
  font-weight: 700;
  transition: .18s ease;
}
.btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn.secondary, .btn.btn-secondary {
  color: var(--text);
  background: white;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}
.btn.secondary:hover, .btn.btn-secondary:hover { color: var(--primary); border-color: #c8c1ff; }
.btn svg { width: 17px; height: 17px; }
.btn-sm { min-height: 35px; padding: 0 11px; font-size: .77rem; }

.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0b7550;
  background: var(--success-soft);
  border: 1px solid #bce9d5;
  border-radius: 11px;
}
.notice svg { flex: 0 0 auto; width: 18px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.metric-card::after {
  position: absolute;
  right: -17px;
  bottom: -25px;
  width: 80px;
  height: 80px;
  background: var(--primary-soft);
  border-radius: 50%;
  content: "";
  opacity: .65;
}
.metric-card__top { display: flex; align-items: center; justify-content: space-between; }
.metric-card__icon {
  display: grid;
  width: 34px;
  height: 34px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 9px;
  place-items: center;
}
.metric-card__icon.success { color: var(--success); background: var(--success-soft); }
.metric-card__icon.warning { color: var(--warning); background: var(--warning-soft); }
.metric-card__icon.neutral { color: #4a6b94; background: #edf3fa; }
.metric-card__icon svg { width: 18px; }
.metric-card__value { display: block; margin-top: 12px; font-size: 1.55rem; font-weight: 700; letter-spacing: -.04em; }
.metric-card__label { color: var(--text-soft); font-size: .75rem; font-weight: 600; }
.progress-ring {
  display: grid;
  width: 36px;
  height: 36px;
  color: var(--primary);
  background: conic-gradient(var(--primary) var(--progress), #e9eaf0 0);
  border-radius: 50%;
  place-items: center;
}
.progress-ring::after { width: 27px; height: 27px; background: white; border-radius: 50%; content: ""; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
}
.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}
.search-box svg {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  color: var(--text-faint);
  transform: translateY(-50%);
}
.search-box input, .toolbar select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface-soft);
  border: 1px solid transparent;
  border-radius: 9px;
  outline: none;
}
.search-box input { padding-left: 39px; }
.search-box input:focus, .toolbar select:focus { background: white; border-color: #c8c1ff; box-shadow: 0 0 0 3px var(--primary-soft); }
.toolbar select { width: 145px; }
.toolbar__meta { margin-left: auto; color: var(--text-faint); font-size: .76rem; }

.section-list { display: grid; gap: 10px; }
.reorder-form { position: sticky; z-index: 20; top: 76px; }
.reorder-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #d9d4ff; border-radius: 12px; color: var(--primary-dark); background: #f5f3ff; font-size: .78rem; font-weight: 700; }
.section-card {
  display: grid;
  grid-template-columns: 36px 46px minmax(190px, 1.25fr) minmax(170px, 1fr) 120px 100px;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 10px 13px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: var(--shadow-xs);
  transition: .18s ease;
}
.section-card:hover { border-color: #d3cef7; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.section-card.is-dragging { opacity: .45; border-style: dashed; transform: scale(.995); }
.drag-handle { display: grid; color: #c3c8d4; cursor: grab; place-items: center; }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 17px; }

.media-upload-row { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(260px, 1fr) auto; gap: 14px; align-items: end; }
.media-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.media-library-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: white; }
.media-library-card > img, .media-document-preview { display: flex; width: 100%; height: 160px; object-fit: cover; }
.media-document-preview { align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.media-document-preview strong { font-size: 1.35rem; }
.media-document-preview span { color: var(--text-soft); font-size: .75rem; }
.media-library-card__body { display: grid; gap: 7px; padding: 12px; }
.media-library-card__body > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.media-library-card__body > small { color: var(--text-faint); font-size: .68rem; }
.media-library-card__actions { display: flex; gap: 7px; align-items: center; margin-top: 3px; }
.content-manager-layout { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(480px, 1.25fr); gap: 18px; align-items: start; }
.content-list { display: grid; }
.content-list article { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.content-list article:last-child { border-bottom: 0; }
.content-list article > span:first-child { min-width: 0; }
.content-list article strong, .content-list article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-list article strong { font-size: .82rem; }
.content-list article small { margin-top: 3px; color: var(--text-faint); font-size: .68rem; }
.content-list__actions { display: flex; flex: 0 0 auto; gap: 6px; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }
.settings-narrow { max-width: 820px; }
.content-type-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: -8px 0 18px; }
.content-type-tabs a { text-decoration: none; text-transform: capitalize; }
.menu-builder { margin-top: 18px; }
.section-icon {
  display: grid;
  width: 42px;
  height: 42px;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 11px;
  place-items: center;
}
.section-icon svg { width: 20px; }
.section-card__identity { min-width: 0; }
.section-card__identity strong { display: block; overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.section-card__identity small { color: var(--text-faint); font-family: ui-monospace, monospace; font-size: .67rem; }
.section-card__content { min-width: 0; color: var(--text-soft); font-size: .78rem; }
.section-card__content span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-health { display: inline-flex !important; align-items: center; gap: 5px; margin-top: 3px; color: var(--success); font-size: .68rem; font-weight: 700; }
.content-health::before { width: 6px; height: 6px; background: currentColor; border-radius: 50%; content: ""; }
.content-health.is-draft { color: var(--warning); }
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: fit-content;
  min-width: 78px;
  height: 29px;
  padding: 0 10px;
  color: var(--success);
  background: var(--success-soft);
  border: 0;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
}
.status-pill::before { width: 6px; height: 6px; background: currentColor; border-radius: 50%; content: ""; }
.status-pill.is-inactive { color: var(--text-faint); background: #f0f2f6; }
.section-actions { display: flex; justify-content: flex-end; gap: 5px; }
.action-button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  color: var(--text-soft);
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  place-items: center;
  cursor: pointer;
}
.action-button:hover { color: var(--primary); border-color: #c8c1ff; background: var(--primary-soft); }
.action-button svg { width: 15px; height: 15px; }
.section-empty {
  padding: 50px;
  color: var(--text-soft);
  background: white;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

/* Editor */
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.editor-main, .editor-aside { display: grid; gap: 16px; }
.panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
/* The section editor and the dashboard build their cards as ".panel" and every other page
   builds the same thing as ".form-card". They were near enough alike to look like a mistake
   rather than a choice — the same card with a flatter header, smaller type and tighter padding
   on two pages out of twenty. The shell was already identical; now the header and the body are
   too, so a card is a card wherever it appears. */
.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  border-bottom: 1px solid var(--border);
}
.panel__header > div { display: grid; gap: 3px; min-width: 0; }
.panel__header strong {
  color: var(--text);
  font-size: .96rem;
  font-weight: 650;
  letter-spacing: -.011em;
  line-height: 1.3;
}
.panel__header small { color: var(--text-faint); font-size: .76rem; font-weight: 500; line-height: 1.45; }
.panel__header .btn, .panel__header .actions, .panel__header .status-pill { flex: none; }
.panel__body { padding: 20px; }
.panel__body > :first-child { margin-top: 0; }
.panel__body > :last-child { margin-bottom: 0; }
.form-grid { display: grid; gap: 16px; padding: 0; background: transparent; border: 0; box-shadow: none; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { display: flex; justify-content: space-between; color: #33405a; font-size: .77rem; font-weight: 700; }
.field label small { color: var(--text-faint); font-weight: 400; }
.field input, .field textarea, .field select,
.form-grid input, .form-grid textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--text);
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: none;
  transition: .15s;
}
.field textarea { resize: vertical; }

/* Upload straight from the picker, so an empty library is never a dead end. */
.media-picker__upload {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 2px;
  cursor: pointer;
}
.media-picker__upload small { color: var(--text-soft); font-size: .8rem; }

/* Shown in place of the rich-text editor when it could not be loaded, so the description is
   always typeable. */
.editor-fallback {
  width: 100%;
  min-height: 180px;
  padding: 11px 13px;
  font: inherit;
  color: var(--text);
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: none;
  resize: vertical;
}
.editor-fallback:focus { border-color: #9b91f0; box-shadow: 0 0 0 3px var(--primary-soft); }

/* Colour field: the swatch that opens the picker, and the hex, as one control. */
.color-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
/* Both rules outrank ".field input { width: 100% }", which would otherwise stretch the swatch
   across the row and push the hex box out of the card. */
.color-field input[type="text"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.color-field .color-field__swatch {
  flex: 0 0 42px;
  width: 42px;
  min-height: 42px;
  height: 42px;
  padding: 4px;
  background: white;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
  transition: .15s;
  -webkit-appearance: none;
  appearance: none;
}
.color-field .color-field__swatch:hover { border-color: #9b91f0; }
.color-field__swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-field__swatch::-webkit-color-swatch { border: 0; border-radius: 5px; }
.color-field__swatch::-moz-color-swatch { border: 0; border-radius: 5px; }
.field input:focus, .field textarea:focus, .form-grid input:focus, .form-grid textarea:focus {
  border-color: #9b91f0;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.field-help { color: var(--text-faint); font-size: .68rem; }
.input-with-icon { position: relative; }
.input-with-icon svg { position: absolute; top: 50%; left: 11px; width: 16px; color: var(--text-faint); transform: translateY(-50%); }
.input-with-icon input { padding-left: 36px; }
.editor {
  min-height: 220px;
  border-color: var(--border-strong);
  border-radius: 0 0 9px 9px;
}
.ql-toolbar.ql-snow { border-color: var(--border-strong); border-radius: 9px 9px 0 0; }
.ql-container.ql-snow { border-color: var(--border-strong); font-family: inherit; }
.media-dropzone {
  position: relative;
  display: grid;
  min-height: 145px;
  padding: 18px;
  place-items: center;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px dashed #bdc4d3;
  border-radius: 11px;
  text-align: center;
}
.media-dropzone:hover { border-color: var(--primary); background: #faf9ff; }
.media-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.media-dropzone__icon { display: grid; width: 40px; height: 40px; margin: 0 auto 8px; color: var(--primary); background: var(--primary-soft); border-radius: 10px; place-items: center; }
.media-dropzone strong { display: block; font-size: .8rem; }
.media-dropzone small { color: var(--text-faint); font-size: .69rem; }
.media-preview {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  background: #edf0f5;
  border: 1px solid var(--border);
  border-radius: 11px;
}
.media-preview img { display: block; width: 100%; height: 180px; object-fit: cover; }
.media-preview__overlay { position: absolute; inset: auto 8px 8px; display: flex; justify-content: flex-end; }
.config-builder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.config-collection { grid-column: 1 / -1; margin-top: 5px; padding-top: 16px; border-top: 1px solid var(--border); }
.config-collection__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.config-collection__header > span { display: grid; }
.config-collection__header strong { font-size: .8rem; }
.config-collection__header small { color: var(--text-faint); font-size: .69rem; }
.config-item { margin-top: 10px; padding: 13px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; }
.config-item__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.config-item__header strong { font-size: .76rem; }
.config-item__header button { width: 27px; height: 27px; color: var(--danger); background: white; border: 1px solid var(--border); border-radius: 7px; cursor: pointer; }
.config-item__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.config-item__fields input, .config-item__fields textarea { min-height: 37px; padding: 7px 9px; font-size: .75rem; }
.config-item__fields textarea { height: 64px; }
.advanced-config { margin-top: 14px; border-top: 1px solid var(--border); }
.advanced-config summary { padding: 13px 0 0; color: var(--text-soft); font-size: .75rem; font-weight: 700; cursor: pointer; }
.advanced-config textarea.code {
  min-height: 160px;
  margin-top: 10px;
  color: #d9e2ff;
  background: #11192c;
  border-color: #11192c;
  font-size: .72rem;
}
.publish-card { position: sticky; top: 92px; }
.publish-status { display: flex; align-items: center; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.switch { position: relative; width: 42px; height: 24px; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: absolute; inset: 0; background: #cdd2dd; border-radius: 999px; cursor: pointer; transition: .2s; }
.switch span::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: white; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.15); content: ""; transition: .2s; }
.switch input:checked + span { background: var(--success); }
.switch input:checked + span::after { transform: translateX(18px); }
.publish-meta { display: grid; gap: 10px; padding: 15px 0; }
.publish-meta__row { display: flex; justify-content: space-between; color: var(--text-soft); font-size: .74rem; }
.publish-meta__row strong { color: var(--text); }
.publish-actions { display: grid; gap: 8px; }
.publish-actions .btn { width: 100%; }
.mini-preview {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 24px;
  color: white;
  background: linear-gradient(135deg, #1b2850, #5a4fc4);
  border-radius: 12px;
}
.mini-preview::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,15,34,.85), rgba(8,15,34,.15)); content: ""; }
.mini-preview__content { position: relative; z-index: 1; max-width: 85%; }
.mini-preview__kicker { color: #c9c4ff; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mini-preview h3 { margin: 7px 0; color: white; font-size: 1.25rem; line-height: 1.15; }
.mini-preview p { margin: 0 0 12px; color: #d8deed; font-size: .72rem; }
.mini-preview__button { display: inline-flex; padding: 7px 10px; color: #2f275f; background: white; border-radius: 7px; font-size: .66rem; font-weight: 700; }

/* Public preview */
.preview-shell { margin: -30px -34px -56px; background: white; }
.preview-toolbar {
  position: sticky;
  top: 76px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 28px;
  background: rgba(255,255,255,.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
}
.preview-toolbar__title { display: grid; flex: 1; }
.preview-toolbar__title strong { font-size: .85rem; }
.preview-toolbar__title small { color: var(--text-faint); font-size: .7rem; }
.device-toggle { display: flex; gap: 3px; padding: 3px; background: var(--surface-soft); border-radius: 9px; }
.device-toggle button { display: grid; width: 32px; height: 30px; padding: 0; color: var(--text-faint); background: transparent; border: 0; border-radius: 7px; place-items: center; cursor: pointer; }
.device-toggle button.is-active { color: var(--primary); background: white; box-shadow: var(--shadow-xs); }
.preview-stage { min-height: calc(100vh - 138px); padding: 24px; background: #e9ebf0; transition: .25s; }
.preview-viewport { max-width: 1320px; margin: 0 auto; overflow: hidden; background: white; box-shadow: var(--shadow-lg); transition: max-width .25s; }
.preview-stage[data-device="tablet"] .preview-viewport { max-width: 820px; }
.preview-stage[data-device="mobile"] .preview-viewport { max-width: 390px; }
.site-preview__nav { display: flex; align-items: center; gap: 26px; min-height: 70px; padding: 0 5%; border-bottom: 1px solid #edf0f4; }
.site-preview__logo { margin-right: auto; color: #18325a; font-size: 1rem; font-weight: 800; }
.site-preview__nav a { color: #506078; font-size: .72rem; text-decoration: none; }
.site-preview__nav .admit { padding: 9px 13px; color: white; background: #2b65c7; border-radius: 6px; }
.preview-section { padding: 58px 7%; }
.preview-section:nth-child(even) { background: #f7f9fc; }
.preview-hero { position: relative; display: grid; min-height: 470px; padding: 80px 7%; color: white; background: linear-gradient(110deg, #122549, #294f82); align-items: center; }
.preview-hero::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,25,52,.88), rgba(8,25,52,.2)); content: ""; }
.preview-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-hero__content { position: relative; z-index: 1; max-width: 620px; }
.preview-hero__eyebrow { color: #9ec6ff; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.preview-hero h1 { margin: 12px 0; font-family: Fraunces, Georgia, serif; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.02; }
.preview-hero p { max-width: 520px; color: #dbe8f8; font-size: 1rem; line-height: 1.6; }
.preview-hero__actions { display: flex; gap: 9px; margin-top: 24px; }
.preview-hero__actions a { padding: 12px 17px; color: #17335e; background: white; border-radius: 7px; font-size: .78rem; font-weight: 700; text-decoration: none; }
.preview-hero__actions a.secondary { color: white; background: transparent; border: 1px solid rgba(255,255,255,.45); }
.preview-copy { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; }
.preview-copy img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 4px; box-shadow: 16px 16px 0 #dce9f8; }
.preview-image-placeholder { display: grid; min-height: 290px; color: #8da5c5; background: linear-gradient(145deg, #dbe7f5, #eef3fa); border-radius: 4px; place-items: center; box-shadow: 16px 16px 0 #dce9f8; }
.preview-image-placeholder svg { width: 46px; height: 46px; }
.preview-section__eyebrow { color: #2b65c7; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.preview-section h2 { margin: 9px 0 14px; color: #15315b; font-family: Fraunces, Georgia, serif; font-size: 2.1rem; }
.preview-section__description { color: #607089; line-height: 1.75; }
.preview-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0; background: #dce3ed; }
.preview-stat { padding: 38px 20px; background: #15315b; text-align: center; }
.preview-stat strong { display: block; color: white; font-family: Fraunces, Georgia, serif; font-size: 2.2rem; }
.preview-stat span { color: #9db3d1; font-size: .72rem; text-transform: uppercase; }
.preview-generic { text-align: center; }
.preview-generic p { max-width: 720px; margin: 0 auto; }
.preview-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; text-align: left; }
.preview-content-card { overflow: hidden; background: white; border: 1px solid #e3e9f1; border-radius: 8px; box-shadow: 0 7px 22px rgba(21,49,91,.07); }
.preview-content-card img { width: 100%; height: 170px; object-fit: cover; }
.preview-content-card > div { padding: 17px; }
.preview-content-card small { color: #2b65c7; font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.preview-content-card h3 { margin: 5px 0 8px; color: #18345e; font-family: inherit; font-size: 1rem; }
.preview-content-card p { margin: 0; color: #718098; font-size: .74rem; line-height: 1.55; }
.preview-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: #2b65c7; font-size: .76rem; font-weight: 700; text-decoration: none; }
.preview-footer { padding: 36px 7%; color: #9fabc1; background: #0e1c36; font-size: .72rem; text-align: center; }

/* Authentication */
.auth-body { background: #0c1429; }
.auth-layout { min-height: 100vh; }
.auth-screen {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(420px, .95fr) minmax(520px, 1.35fr);
}
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 50px; background: white; }
.auth-card { width: 100%; max-width: 410px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 58px; }
.auth-brand .brand__symbol { width: 42px; height: 42px; }
.auth-brand > span:last-child { display: grid; }
.auth-brand strong { font-size: 1.1rem; }
.auth-brand small { color: var(--text-faint); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.auth-card h1 { margin: 0; font-size: 2rem; letter-spacing: -.04em; }
.auth-card > p { margin: 8px 0 27px; color: var(--text-soft); }
.auth-card form { display: grid; gap: 15px; }
.auth-card .field input { height: 48px; }
.auth-card .btn { min-height: 48px; margin-top: 4px; }
.auth-meta { display: flex; justify-content: space-between; color: var(--text-soft); font-size: .75rem; }
.auth-meta label { display: flex; gap: 6px; }
.auth-visual {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 70px;
  color: white;
  background:
    linear-gradient(130deg, rgba(14,27,58,.97), rgba(50,40,132,.83)),
    radial-gradient(circle at 70% 30%, #7468e7, transparent 35%),
    #182547;
  align-items: flex-end;
}
.auth-visual::before, .auth-visual::after { position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ""; }
.auth-visual::before { top: -180px; right: -140px; width: 580px; height: 580px; }
.auth-visual::after { top: -100px; right: -60px; width: 420px; height: 420px; }
.auth-visual__content { position: relative; z-index: 1; max-width: 580px; }
.auth-visual__tag { display: inline-flex; gap: 8px; padding: 7px 10px; color: #d7d3ff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: .68rem; font-weight: 700; }
.auth-visual h2 { margin: 20px 0 12px; font-family: Fraunces, Georgia, serif; font-size: clamp(2.3rem, 4vw, 4rem); line-height: 1.08; }
.auth-visual p { max-width: 500px; color: #c5cde0; font-size: 1rem; line-height: 1.65; }
.auth-proof { display: flex; gap: 28px; margin-top: 30px; }
.auth-proof span { display: grid; }
.auth-proof strong { font-size: 1.3rem; }
.auth-proof small { color: #9ca9c3; font-size: .68rem; text-transform: uppercase; }
.demo-credentials { margin-top: 22px; padding: 11px 13px; color: var(--text-soft); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 9px; font-size: .72rem; }

@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-layout { grid-template-columns: 1fr 300px; }
  .section-card { grid-template-columns: 30px 42px minmax(160px, 1fr) 100px 92px; }
  .section-card__content { display: none; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; }
  .sidebar.is-open { transform: none; }
  .cms-main { margin-left: 0; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 35; display: none; background: rgba(9,16,32,.5); backdrop-filter: blur(2px); }
  .sidebar.is-open ~ .cms-main + .sidebar-scrim { display: block; }
  .mobile-menu { display: grid; }
  .editor-layout { grid-template-columns: 1fr; }
  .content-manager-layout { grid-template-columns: 1fr; }
  .publish-card { position: static; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
}
.school-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .85rem;
}
.school-quick-card {
  display: grid;
  gap: .35rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  text-decoration: none;
  color: inherit;
  min-height: 104px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.school-quick-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(28,43,36,.08);
}
.school-quick-card strong { font-size: 1.05rem; }
.school-quick-card small { color: var(--muted); line-height: 1.45; }

.media-url-row { display: flex; gap: .5rem; align-items: center; }
.media-url-row input { flex: 1; }
.media-picker {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(9, 16, 32, .55);
  display: grid; place-items: center; padding: 1rem;
}
.media-picker[hidden] { display: none !important; }
.media-picker__dialog {
  width: min(860px, 100%); max-height: min(80vh, 720px); overflow: auto;
  background: #fff; border-radius: 16px; padding: 1rem 1.1rem 1.25rem;
  box-shadow: 0 24px 60px rgba(9,16,32,.28);
}
.media-picker__dialog header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.media-picker__filters { display: flex; gap: .5rem; margin-bottom: .85rem; }
.media-picker__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem;
}
.media-picker__item {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft);
  padding: .55rem; cursor: pointer; text-align: left;
}
.media-picker__item img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; }
.media-picker__doc {
  display: grid; place-items: center; height: 90px; border-radius: 8px;
  background: var(--primary-soft); font-weight: 700; color: var(--primary);
}
.media-picker__item small { display: block; margin-top: .35rem; color: var(--muted); word-break: break-all; }

@media (max-width: 680px) {
  .content { padding: 22px 16px 45px; }
  .topbar { padding: 0 14px; }
  .site-switcher__trigger { min-width: 0; }
  .site-switcher__trigger > span:nth-child(2) { display: none; }
  .page-header { display: grid; }
  .page-header__actions { width: 100%; }
  .page-header__actions .btn { flex: 1; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { min-height: 102px; padding: 14px; }
  .toolbar { flex-wrap: wrap; }
  .search-box { flex-basis: 100%; max-width: none; }
  .toolbar select { flex: 1; }
  .section-card { grid-template-columns: 30px 39px 1fr 35px; gap: 9px; }
  .section-card__status { display: none; }
  .media-upload-row { grid-template-columns: 1fr; }
  .section-actions .action-button:not(:last-child) { display: none; }
  .field-grid, .config-builder { grid-template-columns: 1fr; }
  .preview-shell { margin: -22px -16px -45px; }
  .preview-toolbar { top: 76px; padding: 10px 14px; }
  .preview-copy { grid-template-columns: 1fr; }
  .preview-stats { grid-template-columns: 1fr 1fr; }
  .preview-card-grid { grid-template-columns: 1fr; }
  .auth-panel { padding: 28px 22px; }
  .auth-brand { margin-bottom: 42px; }
}

/* ---------------------------------------------------------------------------
   Card headers, step markers, switches and validation.
   These are used across every CMS screen but previously had no styling at all,
   which collapsed the label, count and caption into one run of text.
   --------------------------------------------------------------------------- */
.form-card { display: flex; flex-direction: column; overflow: hidden; }

.form-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--surface), var(--surface-soft));
  border-bottom: 1px solid var(--border);
}
.form-card__header > div:first-child {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.form-card__header > div:first-child > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.form-card__header strong {
  color: var(--text);
  font-size: .96rem;
  font-weight: 650;
  letter-spacing: -.011em;
  line-height: 1.3;
}
.form-card__header small {
  color: var(--text-faint);
  font-size: .76rem;
  font-weight: 500;
  line-height: 1.45;
}
.form-card__header .btn, .form-card__header .actions { flex: none; }

.step-number {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  color: var(--primary);
  background: var(--primary-soft);
  border: 1px solid rgba(101, 88, 232, .18);
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  place-items: center;
}

.form-card__body { padding: 20px; }
.form-card__body > :first-child { margin-top: 0; }
.form-card__body > :last-child { margin-bottom: 0; }

/* Toggle rows -------------------------------------------------------------- */
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.switch-row:hover { border-color: var(--border-strong); }
.switch-row:focus-within { border-color: var(--primary); background: var(--primary-soft); }
.switch-row input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.switch-row > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switch-row strong { color: var(--text); font-size: .87rem; font-weight: 600; line-height: 1.35; }
.switch-row small { color: var(--text-soft); font-size: .78rem; line-height: 1.5; }

/* Validation summary ------------------------------------------------------- */
.validation-summary:empty,
.validation-summary-valid { display: none; }
.validation-summary {
  padding: 12px 15px;
  color: #a32540;
  background: var(--danger-soft);
  border: 1px solid rgba(220, 76, 100, .25);
  border-radius: var(--radius-sm);
  font-size: .84rem;
}
.validation-summary ul { margin: 0; padding-left: 18px; }
.validation-summary li { margin: 3px 0; }
.validation-summary li:only-child { list-style: none; margin-left: -18px; }

/* Media upload panel ------------------------------------------------------- */
.media-library-upload {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface-soft);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.media-library-upload .field-grid { gap: 12px; }

/* ---------------------------------------------------------------------------
   Grid-span and control corrections.
   ".full" was only honoured on ".field", so validation summaries, toggle rows
   and action rows were dropped into a single grid column instead of spanning.
   --------------------------------------------------------------------------- */
.field-grid > .full, .config-builder > .full { grid-column: 1 / -1; }

.btn, a.btn { text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:focus-visible, .badge:focus-visible, .switch-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.form-actions .hint { margin: 0 0 0 auto; font-size: .78rem; }

/* Content-type tabs: readable labels rather than raw keys ------------------- */
.content-type-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.content-type-tabs .status-pill { text-transform: capitalize; text-decoration: none; }

/* Numeric alignment throughout the console --------------------------------- */
.data-table td, .metric strong, .preview-stat strong, .step-number, .badge {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Website preview.
   The preview renders the site's own branding, menu and section content — it is
   a live view of stored data, so it must not invent labels or colours.
   --------------------------------------------------------------------------- */
.preview-stage { --preview-brand: #15315b; --preview-accent: #c9a227; }

.site-preview__logo { display: flex; align-items: center; gap: 9px; }
.site-preview__logo img { width: auto; max-height: 30px; }
.site-preview__link {
  color: #506078;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.site-preview__empty { color: var(--text-faint); font-size: .72rem; font-style: italic; }

.preview-cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 17px;
  color: var(--preview-brand);
  background: white;
  border-radius: 7px;
  font-size: .78rem;
  font-weight: 700;
}
.preview-cta.secondary { color: white; background: transparent; border: 1px solid rgba(255, 255, 255, .45); }
.preview-hero__eyebrow { color: var(--preview-accent); }
.preview-stat { background: var(--preview-brand); }

/* ---------------------------------------------------------------------------
   Notices. The base rule had no padding or margin, so text sat flush against
   the border; variants distinguish confirmation from warning and failure.
   --------------------------------------------------------------------------- */
.notice {
  padding: 12px 16px;
  margin: 0 0 20px;
  font-size: .86rem;
  line-height: 1.5;
}
.notice a { color: inherit; font-weight: 600; }
.notice--warning {
  color: #97600f;
  background: var(--warning-soft);
  border-color: #f2d9ad;
}
.notice--danger {
  color: #a32540;
  background: var(--danger-soft);
  border-color: rgba(220, 76, 100, .28);
}

/* Empty states -------------------------------------------------------------- */
.empty-state {
  display: grid;
  gap: 5px;
  padding: 30px 20px;
  color: var(--text-soft);
  text-align: center;
}
.empty-state strong { color: var(--text); font-size: .9rem; font-weight: 600; }
.empty-state span { font-size: .8rem; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   Faculty, news, events and settings screens.
   --------------------------------------------------------------------------- */
.list-group-label {
  padding: 12px 15px 6px;
  color: var(--text-faint);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.content-list__text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }

.person-row { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; }
.person-row__photo {
  display: grid;
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: cover;
  place-items: center;
  border-radius: 10px;
}
.person-row__photo--empty {
  color: var(--primary);
  background: var(--primary-soft);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.person-row__text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.person-row__text strong, .person-row__text small,
.content-list__text strong, .content-list__text small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-row { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.event-row__date {
  display: grid;
  flex: none;
  width: 44px;
  padding: 5px 0;
  place-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  line-height: 1.1;
}
.event-row__date strong { color: var(--text); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.event-row__date small { color: var(--text-faint); font-size: .62rem; text-transform: uppercase; }

.chip {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.chip--accent { color: var(--primary); background: var(--primary-soft); }

.settings-stack { display: grid; gap: 18px; max-width: 940px; }
.settings-stack .validation-summary:not(:empty) { margin: 0; }
.form-actions--sticky {
  position: sticky;
  bottom: 0;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ===========================================================================
   Console refinement layer.
   Consistent motion, focus, control styling and density across every screen.
   =========================================================================== */

:root { --ease: cubic-bezier(.22, .61, .36, 1); }

/* Selects were the only control without focus feedback or a custom indicator,
   so they read as a different (older) control set than the inputs beside them. */
.field select, .data-table select, select.input {
  width: 100%;
  min-height: 42px;
  padding: 9px 34px 9px 11px;
  color: var(--text);
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2362708a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 11px center / 15px,
    white;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field select:focus, .data-table select:focus {
  border-color: #9b91f0;
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.data-table select { min-height: 36px; padding: 6px 30px 6px 9px; font-size: .86rem; }

.field input::placeholder, .field textarea::placeholder { color: #aab3c4; }
.field input:disabled, .field select:disabled, .field textarea:disabled {
  color: var(--text-faint);
  background: var(--surface-soft);
  cursor: not-allowed;
}
.field input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--primary); }

/* Typographic rhythm ------------------------------------------------------- */

.page-header { padding-bottom: 4px; }
.page-header p { line-height: 1.6; }
.page-header + .notice { margin-top: 4px; }

.form-card + .form-card { margin-top: 18px; }
.content-manager-layout > .form-card { align-self: start; }

/* Cards: one elevation language. Lists and forms are quiet surfaces; only
   floating elements (menus, modals) carry a real shadow. */
.form-card { box-shadow: var(--shadow-xs); }
.metric-card {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.content-list article { transition: background .14s var(--ease); }
.content-list article:hover { background: var(--surface-soft); }

/* Focus visibility across the console ------------------------------------- */

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}
.nav-item:focus-visible { outline-color: #a99fff; outline-offset: -2px; }

/* Sidebar polish ----------------------------------------------------------- */

.nav-item { transition: color .16s var(--ease), background .16s var(--ease); }
.nav-item.is-active::before { box-shadow: 0 0 12px rgba(129, 117, 255, .55); }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }

/* Buttons ------------------------------------------------------------------ */

.btn { transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease); }
.btn:active { transform: translateY(0); }
.btn.btn-danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: rgba(220, 76, 100, .28);
  box-shadow: none;
}
.btn.btn-danger:hover { background: #ffe3e8; }

/* Tables ------------------------------------------------------------------- */

.data-table { box-shadow: none; }
.data-table th:first-child, .data-table td:first-child { padding-left: 16px; }
.data-table th:last-child, .data-table td:last-child { padding-right: 16px; }

/* Empty states ------------------------------------------------------------- */

.empty-state { padding: 36px 24px; }
.empty-state strong { font-size: .92rem; }

/* Motion preferences ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .metric-card:hover { transform: none; }
}

/* ===========================================================================
   Console motion, press feedback and responsive behaviour.
   =========================================================================== */

/* Press feedback ----------------------------------------------------------- */

.btn:active, .badge:active, .icon-button:active, .nav-item:active,
.school-quick-card:active, .media-picker__item:active {
  transform: translateY(1px) scale(.99);
}
.icon-button, .school-quick-card, .media-picker__item, .status-pill {
  transition: transform .14s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}
.icon-button:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.media-picker__item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.status-pill:hover { filter: brightness(.98); }

/* Page and dialog entrances ------------------------------------------------- */

.content { animation: console-in .28s var(--ease) both; }
@keyframes console-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.media-picker:not([hidden]) { animation: fade-in .16s var(--ease); }
.media-picker:not([hidden]) .media-picker__dialog { animation: dialog-in .22s var(--ease); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.notice { animation: console-in .3s var(--ease) both; }

/* Sidebar drawer ------------------------------------------------------------ */

@media (max-width: 900px) {
  body:has(.sidebar.is-open) { overflow: hidden; }
  .sidebar { box-shadow: var(--shadow-lg); }
  .sidebar-scrim { animation: fade-in .18s var(--ease); }
}

/* Tables must scroll rather than force the page sideways --------------------- */

.form-card__body { overflow-x: auto; }
.data-table { min-width: 520px; }

@media (max-width: 680px) {
  .form-card__header { flex-wrap: wrap; gap: 10px; }
  .form-card__header .btn { width: 100%; }
  .field-grid { grid-template-columns: 1fr; }
  .content-list article { flex-wrap: wrap; gap: 10px; }
  .content-list__actions { width: 100%; }
  /* The delete control is wrapped in a form, so the form is the flex child that
     needs to share the row — not just the button inside it. */
  .content-list__actions > * { flex: 1 1 0; min-width: 0; }
  .content-list__actions .btn { width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .form-actions .hint { margin: 4px 0 0; text-align: center; }
  .form-actions--sticky { border-radius: var(--radius-sm); }
  .settings-stack { gap: 14px; }
  .step-number { width: 28px; height: 28px; font-size: .72rem; }
}

@media (max-width: 480px) {
  .metric-grid { grid-template-columns: 1fr; }
  .page-header h1 { font-size: 1.5rem; }
  .empty-state { padding: 26px 16px; }
}

/* Touch: no sticky hover lift ---------------------------------------------- */

@media (hover: none) {
  .metric-card:hover, .school-quick-card:hover { transform: none; box-shadow: var(--shadow-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .content, .notice, .media-picker:not([hidden]),
  .media-picker:not([hidden]) .media-picker__dialog, .sidebar-scrim { animation: none; }
  .btn:active, .icon-button:active, .nav-item:active { transform: none; }
}

/* ===========================================================================
   Website factory: site cards, visual home-design picker, page picker.
   The design preview is a layout skeleton, not a screenshot — it shows how the
   page is arranged so the choice is made on structure rather than a name.
   =========================================================================== */

.form-section-title {
  margin: 26px 0 4px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.01em;
}
.form-card__body > form > .form-section-title:first-of-type { margin-top: 4px; }
.form-section-hint { margin: 0 0 14px; color: var(--text-soft); font-size: .84rem; line-height: 1.55; }

/* Next steps ---------------------------------------------------------------- */

.next-steps {
  margin-bottom: 20px;
  padding: 18px 22px;
  background: var(--primary-soft);
  border: 1px solid rgba(101, 88, 232, .22);
  border-radius: var(--radius-md);
}
.next-steps h2 { margin: 0 0 8px; color: var(--text); font-size: .95rem; font-weight: 650; }
.next-steps ol { margin: 0; padding-left: 20px; color: var(--text-soft); font-size: .87rem; }
.next-steps li { margin: 5px 0; }
.next-steps a { color: var(--primary-dark); font-weight: 650; }

/* Website cards ------------------------------------------------------------- */

.website-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.website-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.website-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.website-card header { display: flex; align-items: center; gap: 11px; }
.website-card__mark {
  display: grid;
  flex: none;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: var(--mark, var(--primary));
  border-radius: 11px;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
}
.website-card header > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
/* School names are long; wrap to two lines rather than hiding half the name. */
.website-card header strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: .93rem;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.website-card header small { color: var(--text-faint); font-size: .74rem; }
.website-card header .chip { margin-left: auto; }

.website-card__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.website-card__facts div { display: grid; gap: 1px; min-width: 0; }
.website-card__facts dt { color: var(--text-faint); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.website-card__facts dd {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: .83rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.website-card__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 4px; }

/* Home-design picker -------------------------------------------------------- */

.design-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 6px;
}
.design-option { display: block; cursor: pointer; }
.design-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.design-option__card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  height: 100%;
  padding: 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.design-option:hover .design-option__card { border-color: var(--border-strong); transform: translateY(-2px); }
.design-option input:checked + .design-option__card {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.design-option input:focus-visible + .design-option__card { outline: 2px solid var(--primary); outline-offset: 2px; }
.design-option__text { display: flex; flex-direction: column; gap: 3px; }
.design-option__text strong { font-size: .88rem; font-weight: 650; }
.design-option__text small { color: var(--text-soft); font-size: .77rem; line-height: 1.45; }
.design-option__text em { color: var(--text-faint); font-size: .71rem; font-style: normal; font-weight: 600; }

/* Layout skeletons ---------------------------------------------------------- */

.design-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  aspect-ratio: 16 / 10;
}
.design-preview .dp-hero { flex: 1.6; background: var(--navy-800); border-radius: 3px; }
.design-preview .dp-row { display: flex; gap: 3px; }
.design-preview .dp-row i { flex: 1; height: 9px; background: #cfd6e6; border-radius: 2px; }
.design-preview .dp-body { display: flex; flex: 1; gap: 4px; }
.design-preview .dp-body i { flex: 1; background: #e3e8f2; border-radius: 3px; }

/* Modern: hero splits with the media block, no statistics strip. */
.design-preview--modern { flex-direction: row; }
.design-preview--modern .dp-hero { flex: 1; }
.design-preview--modern .dp-row { flex-direction: column; flex: 1; }
.design-preview--modern .dp-row i { height: auto; flex: 1; }
.design-preview--modern .dp-body { display: none; }

/* Campus: tall hero, two large panels. */
.design-preview--campus .dp-hero { flex: 2.4; }
.design-preview--campus .dp-row { display: none; }
.design-preview--campus .dp-body i:nth-child(n+3) { display: none; }

/* Academic: shorter hero, prominent statistics strip. */
.design-preview--academic .dp-hero { flex: 1.1; }
.design-preview--academic .dp-row i { height: 13px; background: var(--navy-800); opacity: .55; }

/* Prestige: centred framed hero dominates. */
.design-preview--prestige .dp-hero { flex: 3; position: relative; }
.design-preview--prestige .dp-hero::after {
  position: absolute;
  inset: 22% 18%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 2px;
  content: "";
}
.design-preview--prestige .dp-row { display: none; }

/* Page-template picker ------------------------------------------------------ */

.template-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 9px;
}
.template-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.template-option:hover { border-color: var(--border-strong); }
.template-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.template-option input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); }
.template-option > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.template-option strong { font-size: .84rem; font-weight: 650; }
.template-option small { color: var(--text-soft); font-size: .74rem; line-height: 1.4; }

@media (max-width: 680px) {
  .website-grid, .design-picker, .template-picker { grid-template-columns: 1fr; }
  .website-card__actions .btn { flex: 1 1 0; }
  .next-steps { padding: 14px 16px; }
}

/* Domain flow explainer ----------------------------------------------------- */

.explainer {
  margin-bottom: 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.explainer h2 { margin: 0 0 12px; font-size: .92rem; font-weight: 650; }
.explainer__flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  counter-reset: flow;
  list-style: none;
}
.explainer__flow li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 11px 13px 11px 15px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  counter-increment: flow;
}
.explainer__flow li::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--primary);
  border-radius: 3px 0 0 3px;
  opacity: calc(.35 + (.2 * counter(flow)));
  content: "";
}
.explainer__flow strong { font-size: .83rem; font-weight: 650; }
.explainer__flow span { color: var(--text-soft); font-size: .76rem; line-height: 1.4; }
.explainer__note { margin: 0; color: var(--text-soft); font-size: .84rem; line-height: 1.6; }
.explainer code, .url-hint {
  padding: 1px 6px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
}

/* SEO screen ---------------------------------------------------------------- */

.seo-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 18px; align-items: start; }
.seo-form { display: grid; gap: 18px; }
.seo-side { display: grid; gap: 18px; position: sticky; top: 92px; }

.field-help .is-warn { color: var(--warning); font-weight: 700; }
.field-help .is-over { color: var(--danger); font-weight: 700; }

/* Search-result preview */
.serp {
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.serp__crumb { color: #4d5156; font-size: .76rem; }
.serp__title {
  margin: 3px 0 2px;
  color: #1a0dab;
  font-size: 1.02rem;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.serp__desc {
  color: #4d5156;
  font-size: .82rem;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Social share card */
.social-card {
  margin-top: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.social-card__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1200 / 630;
  color: var(--text-faint);
  background: var(--surface-soft);
  font-size: .78rem;
}
.social-card__image img { width: 100%; height: 100%; object-fit: cover; }
.social-card__text { display: grid; gap: 2px; padding: 10px 13px; border-top: 1px solid var(--border); }
.social-card__text small { color: var(--text-faint); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
.social-card__text strong { font-size: .86rem; line-height: 1.35; }

.plain-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--text-soft); font-size: .83rem; }

.seo-audit__excerpt {
  max-width: 340px;
  color: var(--text-soft);
  font-size: .82rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.seo-audit__why { margin-top: 4px; color: var(--text-faint); font-size: .7rem; line-height: 1.4; }

@media (max-width: 1100px) {
  .seo-layout { grid-template-columns: 1fr; }
  .seo-side { position: static; }
}

/* Website template gallery --------------------------------------------------- */

.template-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }

.site-template {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.site-template:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.site-template.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* A miniature of the actual website, painted in the template's own palette, so the
   gallery shows what a school would get rather than an abstract skeleton. */
.site-template__preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

/* Announcement strip and header. */
.site-template__preview .tm-bar {
  height: 6px;
  background: var(--tpl-primary);
}
.site-template__preview .tm-nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  background: #fff;
  border-bottom: 1px solid color-mix(in srgb, var(--tpl-primary) 14%, #fff);
}
.site-template__preview .tm-nav b {
  flex: 0 0 auto;
  width: 30%;
  height: 7px;
  background: var(--tpl-primary);
  border-radius: 2px;
}
.site-template__preview .tm-nav i {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tpl-primary) 28%, #fff);
}
.site-template__preview .tm-nav i:nth-child(2) { width: 13%; margin-left: auto; }
.site-template__preview .tm-nav i:nth-child(3) { width: 11%; }
.site-template__preview .tm-nav i:nth-child(4) { width: 15%; }
.site-template__preview .tm-nav i:nth-child(5) { width: 10%; }

/* Hero: headline lines, a supporting line and a call-to-action pill. */
.site-template__preview .tm-hero {
  position: relative;
  display: flex;
  flex: 1.9;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0 11px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, color-mix(in srgb, var(--tpl-accent) 42%, transparent), transparent 60%),
    linear-gradient(135deg, var(--tpl-primary), color-mix(in srgb, var(--tpl-primary) 62%, #000));
}
.site-template__preview .tm-hero i {
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .92);
}
.site-template__preview .tm-hero i.l1 { width: 62%; }
.site-template__preview .tm-hero i.l2 { width: 44%; height: 4px; opacity: .6; }
.site-template__preview .tm-hero em {
  width: 26%;
  height: 8px;
  margin-top: 3px;
  border-radius: 4px;
  background: var(--tpl-accent);
}

/* Results band. */
.site-template__preview .tm-stats {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--tpl-accent) 16%, #fff);
}
.site-template__preview .tm-stats i {
  flex: 1;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tpl-primary) 34%, #fff);
}

/* Content cards. */
.site-template__preview .tm-cards {
  display: flex;
  flex: 1.15;
  gap: 5px;
  padding: 7px 9px 9px;
  background: var(--surface-soft);
}
.site-template__preview .tm-cards i {
  flex: 1;
  border: 1px solid color-mix(in srgb, var(--tpl-primary) 12%, var(--border));
  border-radius: 3px;
  background:
    linear-gradient(color-mix(in srgb, var(--tpl-primary) 22%, #fff) 42%, #fff 42%);
}

/* Each home design has its own silhouette, matching the public site. */
.site-template__preview.tm--modern .tm-hero { flex-direction: row; align-items: center; flex-wrap: wrap; }
.site-template__preview.tm--modern .tm-hero::after {
  position: absolute;
  inset: 0 0 0 58%;
  background: color-mix(in srgb, var(--tpl-accent) 55%, #fff);
  opacity: .85;
  content: "";
}
.site-template__preview.tm--modern .tm-hero i.l1 { width: 46%; }
.site-template__preview.tm--modern .tm-hero i.l2 { width: 34%; }
.site-template__preview.tm--modern .tm-stats { display: none; }
.site-template__preview.tm--modern .tm-cards { flex: 1.5; }

.site-template__preview.tm--campus .tm-hero { flex: 3.1; }
.site-template__preview.tm--campus .tm-stats { display: none; }
.site-template__preview.tm--campus .tm-cards i:nth-child(3) { display: none; }

.site-template__preview.tm--academic .tm-hero { flex: 1.15; }
.site-template__preview.tm--academic .tm-hero i.l1 { width: 52%; }
.site-template__preview.tm--academic .tm-cards { flex: 1.9; }

.site-template__preview.tm--prestige .tm-hero { flex: 3.3; align-items: center; text-align: center; }
.site-template__preview.tm--prestige .tm-hero i.l1,
.site-template__preview.tm--prestige .tm-hero i.l2 { align-self: center; }
.site-template__preview.tm--prestige .tm-hero em { align-self: center; }
.site-template__preview.tm--prestige .tm-hero::after {
  position: absolute;
  inset: 14% 12%;
  border: 1px solid color-mix(in srgb, var(--tpl-accent) 70%, transparent);
  border-radius: 2px;
  content: "";
}
.site-template__preview.tm--prestige .tm-cards { display: none; }

.site-template__body { display: flex; flex: 1; flex-direction: column; gap: 9px; padding: 15px 17px 17px; }
.site-template__body header { display: flex; align-items: center; gap: 9px; }
.site-template__body header strong { flex: 1; font-size: .96rem; font-weight: 650; letter-spacing: -.01em; }
.site-template__summary { margin: 0; color: var(--text-soft); font-size: .84rem; line-height: 1.55; }
.site-template__best { margin: 0; color: var(--text-faint); font-size: .76rem; font-weight: 600; }

.site-template__highlights { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.site-template__highlights li {
  position: relative;
  padding-left: 17px;
  color: var(--text-soft);
  font-size: .78rem;
  line-height: 1.45;
}
.site-template__highlights li::before {
  position: absolute;
  top: .48em;
  left: 4px;
  width: 5px;
  height: 5px;
  background: var(--tpl-accent);
  border-radius: 50%;
  content: "";
}

.site-template__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}
.site-template__meta > span { display: grid; gap: 1px; font-size: .8rem; font-weight: 600; }
.site-template__meta em {
  color: var(--text-faint);
  font-size: .64rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.site-template__swatch { align-items: start; }
.site-template__swatch i { display: inline-block; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; }
.site-template__body .btn { margin-top: 11px; align-self: flex-start; }

@media (max-width: 680px) {
  .template-gallery { grid-template-columns: 1fr; }
  .site-template__body .btn { width: 100%; }
}

/* A list of addresses needs room to be read, so the button sits under the box rather than
   beside it — a 4-line textarea and a button on one row leaves the button floating. */
.upload-row--stacked { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.upload-row--stacked textarea { width: 100%; resize: vertical; }

/* --- Search the console ------------------------------------------------------
   Everything in the console is one keystroke away, so nobody has to remember
   which page a thing lives on. */

.topbar__search {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  max-width: 320px;
  flex: 1 1 200px;
  margin-inline: 1rem;
  padding: .5rem .75rem;
  color: var(--muted, #6b7280);
  background: var(--surface-2, #f3f4f6);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  font: inherit;
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}
.topbar__search:hover { border-color: var(--line-strong, #d1d5db); }
.topbar__search svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.topbar__search span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__search kbd {
  flex: none;
  padding: .1rem .4rem;
  background: #fff;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 5px;
  font: inherit;
  font-size: .75rem;
}
@media (max-width: 700px) {
  .topbar__search span, .topbar__search kbd { display: none; }
  .topbar__search { flex: none; max-width: none; padding: .5rem; }
}

.command-palette { position: fixed; inset: 0; z-index: 120; display: grid; }
.command-palette[hidden] { display: none; }
.command-palette__scrim { position: absolute; inset: 0; background: rgba(9, 18, 36, .45); }
.command-palette__box {
  position: relative;
  width: min(620px, calc(100% - 2rem));
  margin: min(12vh, 120px) auto auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(8, 17, 31, .35);
  overflow: hidden;
}
.command-palette__field { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line, #e5e7eb); }
.command-palette__field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--muted, #6b7280); }
.command-palette__field input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 1rem; background: none; }

.command-palette__results { max-height: min(52vh, 420px); margin: 0; padding: .4rem; overflow-y: auto; list-style: none; }
.command-palette__results a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}
.command-palette__results a.is-active,
.command-palette__results a:hover { background: var(--surface-2, #f3f4f6); }
.command-palette__results strong { font-weight: 600; }
.command-palette__results span { flex: none; color: var(--muted, #6b7280); font-size: .8rem; }
.command-palette__empty { margin: 0; padding: 1.25rem; color: var(--muted, #6b7280); text-align: center; }

body.is-searching { overflow: hidden; }

/* Whatever the search jumped to, marked briefly so the eye lands on it. */
.is-found { animation: found 2.2s ease; }
@keyframes found {
  0%, 70% { box-shadow: 0 0 0 3px rgba(37, 99, 235, .45); }
  100% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0); }
}
@media (prefers-reduced-motion: reduce) { .is-found { animation: none; outline: 3px solid rgba(37, 99, 235, .45); } }

/* --- The line of help under a field's name ----------------------------------
   The section editor builds each label as "<span>Name<small>help</small></span>"
   and nothing separated the two, so every field in every section editor read as
   one run-on string: "Video URLYouTube, Vimeo or an uploaded file". The help
   belongs on its own line, in the muted weight the rest of the console uses for
   it. */

.field > span > small,
.field > label > small {
  display: block;
  margin-top: 3px;
  color: var(--text-faint);
  font-size: .74rem;
  font-weight: 400;
  line-height: 1.45;
}
/* Except a character counter, which is a number belonging beside its own name. */
.field > span > small:has(b) { display: inline; margin: 0; }