/* The admin's own frame (docs/admin-redesign-plan.md, stage 1). Its colors are
   named once here and used only inside .admin-shell, so the public site is
   unaffected. */
.admin-shell {
  --admin-ground: #f4f5f7;
  --admin-panel: #ffffff;
  --admin-line: #e3e6eb;
  --admin-text: #1d2433;
  --admin-muted: #5b6475;
  --admin-accent: #1f5fd6;
  --admin-accent-strong: #1747a6;
  --admin-accent-soft: #e8effc;
  --admin-draft: #8a5a00;
  --admin-draft-soft: #fff3d6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-ground);
  color: var(--admin-text);
}
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 20px;
  background: var(--admin-panel);
  border-bottom: 1px solid var(--admin-line);
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--admin-text);
  font-weight: 700;
  text-decoration: none;
}
.admin-brand:hover { color: var(--admin-text); }
.admin-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--admin-accent);
  color: #ffffff;
  font-size: 13px;
}
.admin-brand-area { color: var(--admin-muted); font-weight: 500; }
.admin-topbar-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.admin-topbar-link { color: #3a4252; font-size: 14px; }
.admin-account { color: var(--admin-muted); font-size: 14px; }
.admin-publish-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--admin-accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.admin-publish-button:hover { background: var(--admin-accent-strong); color: #ffffff; }
.admin-publish-count {
  padding: 1px 7px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--admin-accent-strong);
  font-size: 12px;
}
.admin-menu-toggle {
  display: none;
  min-width: 44px;
  min-height: 40px;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  background: var(--admin-panel);
  font-size: 18px;
}
.admin-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.admin-sidebar {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 12px;
  background: var(--admin-panel);
  border-right: 1px solid var(--admin-line);
  font-size: 14px;
}
/* Always shown on wide screens; the menu button opens it on narrow ones. */
@media (min-width: 640px) {
  .admin-sidebar.collapse:not(.show) { display: flex; }
}
.admin-nav-heading {
  margin: 16px 12px 6px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.admin-nav-link {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--admin-text);
  text-decoration: none;
  white-space: nowrap;
}
.admin-nav-link:hover { background: var(--admin-ground); color: var(--admin-text); }
.admin-nav-link.is-current { background: var(--admin-accent-soft); color: var(--admin-accent-strong); font-weight: 600; }
.admin-nav-footer {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--admin-line);
}
.admin-main {
  flex: 1;
  min-width: 0;
  padding: 24px 32px;
}
.admin-record-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
@media (max-width: 639.98px) {
  .admin-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .admin-layout { flex-direction: column; }
  .admin-sidebar { flex-basis: auto; border-right: 0; border-bottom: 1px solid var(--admin-line); }
  .admin-main { padding: 16px; }
}

/* Each boundary owns exactly one separator, with no outside edges. */
.admin-section-divider {
  border: 0;
  opacity: 1;
  margin: 1rem 0;
}
.admin-group-divider {
  border-top: 4px solid #000;
}
.admin-member-divider {
  border-top: 2px solid #666;
}
/* Column controls and section controls share one compact toolbar. */
.admin-section-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #ccc;
  margin-bottom: 0 !important;
}
.admin-section-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.admin-column-actions {
  display: grid;
  flex: 0 0 auto;
  align-items: start;
}
.admin-column-actions > .admin-cell-actions {
  min-width: 0;
  align-content: start;
}
.admin-section-buttons {
  position: absolute;
  right: 0;
  top: 0;
  margin-left: auto;
}
.admin-actions-wrap .admin-section-buttons,
.admin-column-actions:empty + .admin-section-buttons {
  position: static;
}
.admin-column-actions:empty {
  display: none;
}
.admin-section-buttons .btn {
  margin-left: 0 !important;
}
/* Inset only the controls so the column divider still starts at the top. */
.admin-cell-actions {
  padding-top: .5rem;
}
.admin-main .admin-sort-button {
  margin-bottom: .5rem;
}
.admin-cell-actions .btn {
  white-space: nowrap;
}
.admin-section-cells > .admin-cell-divider {
  border-left: 2px solid #666;
}

/* Saved public-page spacing must not introduce a gap below the toolbar. */
.admin-section-actions + [data-react-class] {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.admin-main .admin-section-cells,
.admin-main .admin-section-cells > .admin-section-cell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Listing controls use all remaining header space, up to the content edge. */
.admin-list-header {
  gap: .75rem;
  width: 100%;
}
.admin-list-toolbar {
  min-width: 0;
  margin-left: auto;
}

/* Sorting and pagination controls share a top edge and bottom inset. */
.admin-main .admin-sort-header {
  align-items: flex-start;
  padding-bottom: .5rem;
}
.admin-main .admin-sort-header .admin-sort-button {
  margin-bottom: 0;
}

/* Keep cell previews inside their list column, including saved wide media. */
.admin-cells-table {
  table-layout: fixed;
  min-width: 1100px;
}
.admin-cells-table th,
.admin-cells-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}
.admin-cells-table .admin-record-actions {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.admin-cell-preview,
.admin-cell-preview * {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere;
  white-space: normal;
}
.admin-cell-preview img,
.admin-cell-preview video {
  height: auto !important;
  object-fit: contain;
}
.admin-cell-preview .row {
  margin-left: 0;
  margin-right: 0;
}

.admin-main .admin-sort-button,
.admin-main .admin-column-heading {
  white-space: nowrap;
  overflow-wrap: normal;
}
.admin-main .admin-column-heading {
  cursor: default;
  margin-bottom: .5rem;
  color: #fff;
  background-color: #a3a8ad;
  border-color: #a3a8ad;
  pointer-events: none;
}
.admin-main .admin-sort-header .admin-column-heading {
  margin-bottom: 0;
}

/* Separate record rows while keeping actions aligned with their text. */
.admin-main .admin-list-record {
  padding-bottom: .5rem;
}

.admin-help {
  max-width: 960px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.admin-help h2 {
  margin-top: 2.5rem;
  padding-top: .75rem;
  border-top: 1px solid #ccc;
  scroll-margin-top: 1rem;
}
.admin-help h3 {
  margin-top: 1.5rem;
  scroll-margin-top: 1rem;
}
.admin-help h4 {
  margin-top: 1.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  scroll-margin-top: 1rem;
}
.admin-help-shot {
  margin: 1rem 0 1.5rem;
}
.admin-help-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.admin-help-shot figcaption {
  margin-top: .4rem;
  font-size: .875rem;
  color: #57606a;
}
.admin-help li > .admin-help-shot { margin-top: .5rem; }
@media print {
  .admin-sidebar,
  .admin-topbar { display: none; }
  .admin-help { max-width: none; }
}

/* Dashboard (stage 1). */
.admin-dashboard { display: flex; flex-direction: column; gap: 24px; max-width: 1200px; }
.admin-page-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; }
.admin-page-lead { margin: 0; color: var(--admin-muted); }
.admin-dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.admin-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: var(--admin-panel);
  color: var(--admin-text);
  text-decoration: none;
}
a.admin-card:hover { color: var(--admin-text); border-color: var(--admin-accent); }
.admin-card-draft { background: var(--admin-draft-soft); border-color: #f2d39b; }
.admin-card-label { color: var(--admin-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-card-draft .admin-card-label { color: var(--admin-draft); }
.admin-card-value { font-size: 26px; font-weight: 700; }
.admin-card-detail { color: #3a4252; font-size: 14px; }
.admin-dashboard-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.admin-panel {
  padding: 20px;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  background: var(--admin-panel);
}
.admin-panel h2 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }
.admin-list { margin: 0; padding: 0; list-style: none; }
.admin-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid #eef0f3;
  font-size: 14px;
}
.admin-list li:last-child { border-bottom: 0; }
.admin-list-meta { color: var(--admin-muted); font-size: 12px; white-space: nowrap; }
.admin-badge { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.admin-badge-draft { background: var(--admin-draft-soft); color: var(--admin-draft); }
.admin-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-quick-action {
  padding: 14px;
  border: 1px solid #d6dae1;
  border-radius: 10px;
  color: var(--admin-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.admin-quick-action:hover { border-color: var(--admin-accent); color: var(--admin-accent-strong); }

/* Lists (stage 2). */
.admin-list-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.admin-list-heading .admin-page-title { margin: 0; }
.admin-list-count { color: var(--admin-muted); font-size: 14px; }
.admin-list-new { margin-left: auto; }
.admin-list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.admin-search .form-control { flex: 1 1 220px; }
.admin-search-clear { font-size: 14px; }
.admin-clear-sort { margin-left: auto; font-size: 14px; }
.admin-table-box { position: relative; overflow-x: auto; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  padding: 10px 14px;
  border-bottom: 1px solid var(--admin-line);
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-table td { padding: 10px 14px; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: #fafbfc; }
.admin-table .admin-cell-title { font-weight: 600; }
.admin-table .admin-cell-title a { color: var(--admin-text); text-decoration: none; }
.admin-table .admin-cell-title a:hover { color: var(--admin-accent-strong); text-decoration: underline; }
.admin-table .admin-cell-muted { color: var(--admin-muted); }
.admin-table .admin-cell-actions { width: 1%; white-space: nowrap; text-align: right; }
.admin-sort-link { color: inherit; text-decoration: none; }
.admin-sort-link:hover, .admin-sort-link.is-sorted { color: var(--admin-accent-strong); }
.admin-row-actions { display: inline-flex; gap: 6px; align-items: center; }
.admin-row-actions .dropdown-menu form { display: block; }
.admin-row-actions .dropdown-menu .btn-danger {
  display: block;
  width: 100%;
  padding: 4px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b42318;
  text-align: left;
}
.admin-row-actions .dropdown-menu .btn-danger:hover { background: #fdecea; }
.admin-badge-live { background: #e3f4e6; color: #22662a; }
.admin-badge-hidden { background: #eceef2; color: #3a4252; }
.admin-list-empty { padding: 24px; color: var(--admin-muted); text-align: center; }
.admin-list-footer { display: flex; justify-content: flex-end; margin-top: 12px; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; padding: 12px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; }
.admin-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--admin-muted); }
.admin-filters .form-control { min-width: 160px; }

.admin-cell-excerpt {
  margin-top: 2px;
  color: var(--admin-muted, #667085);
  font-size: 0.85rem;
  font-weight: 400;
  max-width: 42rem;
}

/* Settings: one form split into tabs (stage 3) */
.admin-settings-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-settings-form { max-width: 860px; }
.admin-tabs { border-bottom-color: var(--admin-line); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.admin-tabs .nav-link { color: var(--admin-muted); white-space: nowrap; }
.admin-tabs .nav-link.active { color: var(--admin-text, #1d2433); font-weight: 600; border-color: var(--admin-line) var(--admin-line) var(--admin-panel); }
.admin-tab-panel {
  background: var(--admin-panel);
  border: 1px solid var(--admin-line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  padding: 20px;
}
.admin-tab-lead { color: var(--admin-muted); margin-bottom: 16px; }
.admin-tab-section { font-size: 15px; font-weight: 600; margin: 8px 0 12px; }
.admin-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 16px; }
.admin-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.admin-form-actions .form-text { margin: 0 auto 0 0; }
.admin-test-email {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px dashed var(--admin-line); border-radius: 10px; background: var(--admin-ground);
}
.admin-appearance { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; }
@media (max-width: 760px) { .admin-appearance { grid-template-columns: 1fr; } }
.admin-color-field { display: flex; align-items: center; gap: 8px; }
.admin-color-swatch { flex: 0 0 28px; height: 28px; border-radius: 6px; border: 1px solid var(--admin-line); }
.admin-color-preview { margin: 0; border: 1px solid var(--admin-line); border-radius: 10px; overflow: hidden; font-size: 13px; }
.admin-color-preview-header { padding: 10px 12px; font-weight: 600; }
.admin-color-preview-body { padding: 16px 12px; display: grid; gap: 4px; min-height: 90px; }
.admin-color-preview-footer { padding: 8px 12px; font-size: 12px; }
.admin-color-preview figcaption { padding: 4px 12px; margin: 0; background: var(--admin-panel); }

/* Menus screen (stage 3) */
.admin-segmented { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 10px; }
.admin-segment { padding: 6px 14px; border-radius: 7px; color: var(--admin-muted); text-decoration: none; font-weight: 500; }
.admin-segment:hover { color: var(--admin-text); background: var(--admin-ground); }
.admin-segment.is-current { background: var(--admin-accent); color: #fff; }
.admin-menus { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .admin-menus { grid-template-columns: 1fr; } }
.admin-menu-tree-box, .admin-menu-panel { background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; padding: 16px; }
.admin-menu-panel { position: sticky; top: 72px; }
.admin-panel-title { font-size: 17px; font-weight: 600; margin: 0 0 6px; overflow-wrap: anywhere; }
.admin-panel-empty { color: var(--admin-muted); }
.admin-panel-more { margin-bottom: 8px; }
.admin-panel-more summary { cursor: pointer; color: var(--admin-accent); margin-bottom: 10px; }
.admin-panel-danger { border-top: 1px solid var(--admin-line); margin-top: 16px; padding-top: 12px; }
.admin-menu-tree, .admin-menu-children { list-style: none; margin: 0; padding: 0; }
.admin-menu-children { padding-left: 28px; }
.admin-menu-node { margin: 0; }
.admin-menu-row {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; margin: 4px 0;
  border: 1px solid var(--admin-line); border-radius: 8px; background: var(--admin-panel);
}
.admin-menu-row.is-disabled .admin-menu-label { color: var(--admin-muted); }
.admin-menu-node.is-selected > .admin-menu-row { border-color: var(--admin-accent); box-shadow: 0 0 0 2px rgba(31, 95, 214, 0.15); }
.admin-menu-node.is-dragging > .admin-menu-row { opacity: 0.4; }
.admin-menu-node.is-moved > .admin-menu-row { background: #eef4ff; transition: background 0.6s; }
.admin-menu-handle { cursor: grab; color: var(--admin-muted); font-size: 18px; line-height: 1; padding: 2px 4px; user-select: none; }
.admin-menu-label { font-weight: 600; color: var(--admin-text); text-decoration: none; }
.admin-menu-label:hover { color: var(--admin-accent); text-decoration: underline; }
.admin-menu-link { color: var(--admin-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.admin-menu-moves { display: inline-flex; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.admin-menu-moves .btn { padding: 0 7px; line-height: 1.6; }
.admin-menu-row.drop-before { box-shadow: 0 -3px 0 var(--admin-accent); }
.admin-menu-row.drop-after { box-shadow: 0 3px 0 var(--admin-accent); }
.admin-menu-row.drop-inside { background: #eef4ff; border-color: var(--admin-accent); }
.admin-menu-status { min-height: 1.4em; margin: 10px 0 0; color: var(--admin-muted); font-size: 14px; }
.admin-menu-list-link { font-size: 13px; color: var(--admin-muted); margin: 6px 0 0; }
@media (max-width: 639.98px) {
  .admin-menu-link { display: none; }
  .admin-menu-children { padding-left: 16px; }
}

/* Media library (stage 4) */
.admin-dropzone {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px; margin-bottom: 14px;
  border: 2px dashed var(--admin-line); border-radius: 12px; background: var(--admin-panel);
}
.admin-dropzone.is-over { border-color: var(--admin-accent); background: #eef4ff; }
.admin-dropzone-text { display: grid; gap: 2px; flex: 1 1 260px; color: var(--admin-muted); }
.admin-dropzone-text strong { color: var(--admin-text); }
.admin-dropzone-choose { color: var(--admin-accent); text-decoration: underline; cursor: pointer; }
.admin-dropzone-chosen { color: var(--admin-text); font-size: 13px; overflow-wrap: anywhere; }
.admin-dropzone-group { display: grid; gap: 4px; font-size: 13px; color: var(--admin-muted); flex: 0 1 220px; }
.admin-dropzone:focus-within { outline: 2px solid var(--admin-accent); outline-offset: 2px; }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.admin-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--admin-line); background: var(--admin-panel); color: var(--admin-text); text-decoration: none; font-size: 13px;
}
.admin-chip:hover { border-color: var(--admin-accent); }
.admin-chip.is-current { background: var(--admin-accent); border-color: var(--admin-accent); color: #fff; }
.admin-chip-count { opacity: 0.7; font-size: 12px; }
/* A group's slide show order: rounded boxes like the group chips, dragged into place. */
.admin-slide-order { margin: 0 0 16px; padding: 12px 14px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; }
.admin-slide-order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.admin-slide-order-head .admin-panel-title { margin: 0; font-size: 15px; }
.admin-slide-order-status { font-size: 13px; color: var(--admin-accent); }
.admin-slide-strip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-slide {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  border: 1px solid var(--admin-line); background: var(--admin-panel); color: var(--admin-text); font-size: 13px;
  cursor: grab; user-select: none; touch-action: none; max-width: 240px;
}
.admin-slide:hover, .admin-slide:focus-visible { border-color: var(--admin-accent); outline: none; }
.admin-slide:focus-visible { box-shadow: 0 0 0 3px rgba(31, 95, 214, 0.25); }
.admin-slide.is-dragging { cursor: grabbing; border-color: var(--admin-accent); background: var(--admin-accent); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
.admin-slide-strip.is-sorting .admin-slide:not(.is-dragging) { opacity: 0.85; }
.admin-slide.is-hidden .admin-slide-thumb { opacity: 0.45; }
.admin-slide-number { min-width: 20px; text-align: center; font-size: 12px; opacity: 0.7; }
.admin-slide-thumb {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; pointer-events: none;
  background: var(--admin-ground); display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.admin-slide-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-media { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .admin-media { grid-template-columns: 1fr; } .admin-media-panel { order: -1; position: static; } .admin-media-panel.is-empty { display: none; } }
.admin-media-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.admin-media-card { background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 10px; overflow: hidden; }
.admin-media-card.is-selected { border-color: var(--admin-accent); box-shadow: 0 0 0 2px rgba(31, 95, 214, 0.25); }
.admin-media-card.is-hidden img, .admin-media-card.is-hidden video { opacity: 0.45; }
.admin-media-thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--admin-ground); }
.admin-media-thumb img, .admin-media-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-media-play {
  position: absolute; inset: auto 8px 8px auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; display: grid; place-items: center; font-size: 12px;
}
.admin-media-missing { display: grid; place-items: center; height: 100%; color: var(--admin-muted); font-size: 13px; }
.admin-media-meta { display: grid; padding: 6px 8px 8px; min-width: 0; }
.admin-media-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-media-sub { color: var(--admin-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-media-preview { margin: -16px -16px 12px; background: var(--admin-ground); border-radius: 12px 12px 0 0; overflow: hidden; }
.admin-media-preview img, .admin-media-preview video { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.admin-media-preview .admin-media-missing { height: 120px; }
.admin-media-facts { font-size: 14px; margin: 8px 0 12px; }
.admin-media-facts dt { color: var(--admin-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 8px; }
.admin-media-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.admin-media-usage { list-style: none; margin: 0; padding: 0; }
.admin-media-group-fields { grid-template-columns: minmax(0, 1fr) 110px; }
.admin-media-more { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* Page workspace (stage 5) */
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.workspace-heading > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.workspace-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 420px;
  grid-template-areas: "outline preview panel";
  gap: 16px;
  align-items: start;
}
.workspace-outline { grid-area: outline; }
.workspace-preview { grid-area: preview; min-width: 0; }
.workspace-panel { grid-area: panel; }
@media (max-width: 1399.98px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "outline panel" "preview panel"; }
}
@media (max-width: 999.98px) {
  .workspace { grid-template-columns: 1fr; grid-template-areas: "panel" "outline" "preview"; }
}
.workspace-outline, .workspace-preview, .workspace-panel {
  background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; padding: 14px;
}
.workspace-panel { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
@media (max-width: 999.98px) { .workspace-panel { position: static; max-height: none; } }
.workspace-pane-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--admin-muted); margin: 0 0 10px; }
.workspace-pane-title .form-text { text-transform: none; letter-spacing: 0; font-weight: 400; }
.outline-sections, .outline-cells { list-style: none; margin: 0; padding: 0; }
.outline-cells { padding-left: 18px; }
.outline-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; margin: 2px 0; border-radius: 7px; min-height: 34px; }
.outline-row:hover { background: var(--admin-ground); }
.outline-section.is-selected > .outline-row, .outline-cell.is-selected > .outline-row { background: #eef4ff; box-shadow: inset 3px 0 0 var(--admin-accent); }
.outline-section > .outline-row .outline-label { font-weight: 600; }
.outline-label { color: var(--admin-text); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; font-size: 14px; }
.outline-cell-label { color: var(--admin-muted); font-size: 13px; }
.outline-label:hover { color: var(--admin-accent); text-decoration: underline; }
.outline-handle { cursor: grab; color: var(--admin-muted); user-select: none; }
.outline-moves { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.outline-moves .btn { padding: 0 6px; line-height: 1.5; font-size: 12px; }
li.is-dragging > .outline-row { opacity: 0.4; }
.outline-row.drop-before { box-shadow: 0 -3px 0 var(--admin-accent); }
.outline-row.drop-after { box-shadow: 0 3px 0 var(--admin-accent); }
.workspace-canvas { border: 1px dashed var(--admin-line); border-radius: 8px; padding: 8px; background: #fff; }
.workspace-block { position: relative; border: 2px solid transparent; border-radius: 6px; cursor: pointer; margin-bottom: 6px; }
.workspace-block:hover { border-color: #b9cdf3; }
.workspace-block:focus-visible { outline: none; border-color: var(--admin-accent); }
.workspace-block.is-selected { border-color: var(--admin-accent); cursor: default; }
.workspace-block.is-hidden { opacity: 0.55; }
.workspace-block-label {
  position: absolute; top: -1px; left: -1px; z-index: 2; padding: 1px 8px; font-size: 11px; border-radius: 6px 0 6px 0;
  background: var(--admin-accent); color: #fff; opacity: 0; pointer-events: none;
}
.workspace-block:hover .workspace-block-label, .workspace-block.is-selected .workspace-block-label { opacity: 1; }
.workspace-panel-heading { margin-bottom: 8px; }
.workspace-back { font-size: 13px; text-decoration: none; }
.workspace-tips { padding-left: 18px; color: var(--admin-muted); font-size: 14px; }
.workspace-tips li { margin-bottom: 6px; }
.workspace-column-list { padding-left: 20px; font-size: 14px; }
.workspace-section-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.workspace-section-actions form { display: inline; }
.cell-editor-tabbed .row { margin-left: 0; margin-right: 0; }
.cell-editor-tabbed [class*="col-"] { flex: 1 1 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.cell-editor-preview { margin: 12px 0; }
.cell-editor-preview #cellPreview { max-height: 320px; overflow: auto; }
.cell-editor-tabbed .flex-container { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.cell-editor-tabbed .flex-container > span { margin-left: 0 !important; flex: 1 1 180px; font-size: 13px; color: var(--admin-muted); }
.workspace-outline { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow-y: auto; }
@media (max-width: 1399.98px) {
  .workspace-outline { position: static; max-height: 260px; }
}
@media (max-width: 999.98px) {
  .workspace-outline { max-height: 320px; }
}
/* Keep the page preview inside its box: lists, pictures and videos shrink to
   the column, and anything still wider is clipped at the edge. */
.workspace-canvas { overflow: hidden; }
.workspace-block { overflow: hidden; }
.workspace-canvas select { max-width: calc(100% - 1em); }
.workspace-canvas img, .workspace-canvas video, .workspace-canvas iframe, .workspace-canvas table { max-width: 100%; }
.workspace-canvas img, .workspace-canvas video { height: auto; }

/* Review and publish (stage 6) */
.publish-toolbar { display: flex; gap: 6px; margin-bottom: 10px; }
.publish-group { background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.publish-group-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--admin-ground); border-bottom: 1px solid var(--admin-line); }
.publish-group-choose { display: flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; }
.publish-group-choose input { width: 18px; height: 18px; }
.publish-group-title { font-weight: 600; }
.publish-group-links { margin-left: auto; display: flex; gap: 12px; font-size: 14px; }
.publish-changes { list-style: none; margin: 0; padding: 0; }
.publish-change { padding: 10px 14px; border-top: 1px solid var(--admin-line); }
.publish-change:first-child { border-top: 0; }
.publish-change-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.publish-change-label { min-width: 0; overflow-wrap: anywhere; }
.publish-change-links { margin-left: auto; display: flex; gap: 12px; font-size: 13px; }
.publish-kind-new { background: #e3f4ea; color: #1d6b3c; }
.publish-kind-changed, .publish-kind-moved { background: #fff4d6; color: #8a5a00; }
.publish-kind-deleted { background: #fde7e7; color: #a12a2a; }
.publish-fields { margin-top: 6px; font-size: 13px; }
.publish-fields summary { cursor: pointer; color: var(--admin-muted); }
.publish-diff { width: 100%; border-collapse: collapse; margin-top: 6px; table-layout: fixed; }
.publish-diff th, .publish-diff td { border: 1px solid var(--admin-line); padding: 6px 8px; vertical-align: top; overflow-wrap: anywhere; }
.publish-diff thead th { background: var(--admin-ground); font-weight: 600; }
.publish-diff tbody th { width: 16%; font-weight: 500; }
.publish-before { background: #fdf3f3; }
.publish-after { background: #f1faf4; }
.publish-actions {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; margin-top: 8px; background: var(--admin-panel); border: 1px solid var(--admin-line); border-radius: 12px;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.06);
}
.publish-note { display: grid; gap: 4px; flex: 1 1 260px; font-size: 13px; color: var(--admin-muted); margin: 0; }
.publish-selection { margin: 0; font-size: 14px; color: var(--admin-muted); }
.publish-buttons { display: flex; gap: 8px; margin-left: auto; }
.publish-history td { vertical-align: top; }
@media (max-width: 639.98px) {
  .publish-diff thead { display: none; }
  .publish-diff tr { display: grid; }
  .publish-diff tbody th { width: auto; }
}

/* Tooltips in the admin and the page editing mode (adminTooltips.js), larger
   than the browser's own. */
.admin-tooltip {
  position: absolute; z-index: 2000; max-width: 340px; padding: 7px 11px; border-radius: 8px;
  background: #1f2328; color: #fff; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); pointer-events: none; white-space: pre-line;
  opacity: 0; visibility: hidden; transition: opacity .12s;
}
.admin-tooltip.is-visible { opacity: 1; visibility: visible; }

/* Settings > Appearance > Menu position: four small pictures to choose from. */
.admin-menu-position { border: 0; padding: 0; }
.admin-menu-position legend { font-size: 1rem; float: none; margin-bottom: .25rem; }
.admin-menu-position-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-menu-position-choice {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--admin-line); border-radius: 12px; background: var(--admin-panel); font-size: 14px; min-width: 110px;
}
.admin-menu-position-choice:has(input:checked) { border-color: var(--admin-accent); box-shadow: 0 0 0 2px rgba(31, 95, 214, 0.25); }
.admin-menu-position-choice input { position: absolute; opacity: 0; pointer-events: none; }
.admin-menu-position-choice:has(input:focus-visible) { outline: 2px solid var(--admin-accent); outline-offset: 2px; }
.admin-menu-position-picture { position: relative; width: 72px; height: 50px; border-radius: 6px; border: 1px solid var(--admin-line); background: var(--admin-ground); overflow: hidden; }
.admin-menu-position-picture > span { position: absolute; background: var(--admin-accent); }
.admin-menu-position-picture.is-top > span { left: 0; right: 0; top: 0; height: 11px; }
.admin-menu-position-picture.is-bottom > span { left: 0; right: 0; bottom: 0; height: 11px; }
.admin-menu-position-picture.is-left > span { top: 0; bottom: 0; left: 0; width: 18px; }
.admin-menu-position-picture.is-right > span { top: 0; bottom: 0; right: 0; width: 18px; }

/* Check spelling and grammar (GrammarChecker.jsx): underlines drawn over the
   editor, and the list of problems under it. */
.grammar-host { position: relative; }
.grammar-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 3; }
.grammar-mark { position: absolute; height: 3px; border-radius: 2px; }
.grammar-mark.is-spelling { background: repeating-linear-gradient(90deg, #d1242f 0 4px, transparent 4px 6px); }
.grammar-mark.is-grammar { background: repeating-linear-gradient(90deg, #1f5fd6 0 4px, transparent 4px 6px); }
.grammar-check { margin: 8px 0; }
.grammar-check-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.grammar-check-status { font-size: 14px; color: #57606a; }
.grammar-problems { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.grammar-problem { border: 1px solid #d0d7de; border-left-width: 4px; border-radius: 8px; padding: 8px 12px; background: #fff; }
.grammar-problem.is-spelling { border-left-color: #d1242f; }
.grammar-problem.is-grammar { border-left-color: #1f5fd6; }
.grammar-problem-head { display: flex; align-items: baseline; gap: 10px; }
.grammar-problem-word { border: 0; background: none; padding: 0; font-weight: 600; color: inherit; text-decoration: underline dotted; cursor: pointer; }
.grammar-problem-kind { font-size: 12px; color: #57606a; text-transform: uppercase; letter-spacing: .03em; }
.grammar-problem-message { margin: 4px 0 6px; font-size: 14px; }
.grammar-problem-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Page workspace: duplicating a section or group, and renaming a group. */
.workspace-duplicate { margin-bottom: 12px; }
.workspace-duplicate-row { display: flex; gap: 8px; align-items: center; }
.workspace-duplicate-row .form-control { flex: 1; min-width: 0; }
.workspace-duplicate-row .btn { white-space: nowrap; }
.workspace-group-names { margin-bottom: 16px; }