/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg: #0d0f14;
  --panel: #151922;
  --panel-2: #1c212c;
  --border: #272d3a;
  --text: #e8ebf0;
  --muted: #98a2b3;
  --accent: #5b9bff;
  --accent-soft: rgba(91, 155, 255, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.22);
  --ease: 160ms cubic-bezier(0.2, 0, 0, 1);
  --ok: #3fb950;
  --warn: #d29922;
  --error: #f85149;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.shell { display: flex; flex-direction: column; min-height: 100%; }

.shell__header {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--panel);
}
.shell__brand { font-weight: 600; color: var(--text); }
.shell__nav { display: flex; gap: 16px; }
.shell__main { flex: 1 1; padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}

.banner { padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border); }
.banner--error { border-color: var(--error); background: rgba(248, 81, 73, 0.1); }
.banner--info { border-color: var(--accent); background: rgba(76, 141, 255, 0.1); }

.button {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; cursor: pointer; font: inherit;
}
.button:hover:not(:disabled) { border-color: var(--accent); }
.button:disabled { opacity: 0.5; cursor: not-allowed; }
.button--primary { background: var(--accent); border-color: var(--accent); color: #06101f; font-weight: 600; }

.table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }

.is-error { color: var(--error); }
.link { margin-left: 10px; }

/* ---- layout editor ---- */

.layout-editor { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 110px); }
.layout-editor__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
}
.layout-editor__toolbar h2 { margin: 0; font-size: 16px; }
.layout-editor__meta { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.layout-editor__split { flex: 1 1; display: grid; grid-template-columns: 1fr 1fr; /* a third column (reference panel) is added via :has */ grid-gap: 12px; gap: 12px; min-height: 0; }
.layout-editor__code, .layout-editor__preview {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; min-height: 0; background: var(--panel);
}
.layout-editor__loading { padding: 20px; color: var(--muted); }
.layout-editor__hint { color: var(--muted); font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .layout-editor__split { grid-template-columns: 1fr; }
  .layout-editor { height: auto; }
  .layout-editor__code { height: 50vh; }
}

/* ---- preview ---- */

.preview-pane { display: flex; flex-direction: column; height: 100%; min-height: 320px; }
.preview-pane__header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--muted); background: var(--panel-2);
}
.preview-pane__frame { flex: 1 1; width: 100%; border: 0; background: #fff; }
.preview-pane__error { padding: 16px; color: var(--error); overflow: auto; }
.preview-pane__error p { color: var(--text); white-space: pre-wrap; }

/* ---- deployment ---- */

.deployment__header { display: flex; justify-content: space-between; align-items: flex-start; }
.deployment__header h2 { margin: 0; font-size: 16px; }
.deployment__meta { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.deployment__stats { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; margin: 16px 0 0; }
.deployment__stats dt { color: var(--muted); font-size: 12px; }
.deployment__stats dd { margin: 2px 0 0; font-size: 20px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.deployment__error { color: var(--error); white-space: pre-wrap; }
.deployment__failures { margin-top: 16px; }

.progress { height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.progress__bar { height: 100%; transition: width 240ms ease; }
.progress__bar--running { background: var(--accent); }
.progress__bar--ok { background: var(--ok); }
.progress__bar--warn { background: var(--warn); }
.progress__bar--error { background: var(--error); }
.progress__bar--muted { background: var(--muted); }

/* ---- layout reference panel ---- */

.layout-editor__split:has(.layout-ref) { grid-template-columns: 1fr 1fr 320px; }
.layout-ref {
  display: flex; flex-direction: column; min-height: 0; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  background: var(--panel, #fff);
}
.layout-ref__head { display: flex; justify-content: space-between; align-items: center; }
.layout-ref__search { width: 100%; }
.layout-ref__body { flex: 1 1; overflow: auto; min-height: 0; }
.layout-ref__group { margin: 12px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.layout-ref__item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.layout-ref__item p { margin: 4px 0; color: var(--muted); }
.layout-ref__title { font-weight: 600; }
.layout-ref__tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--panel-2); color: var(--muted); margin-left: 6px; }
.layout-ref__actions { display: flex; gap: 6px; }
.layout-ref__code {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 6px; border: 1px dashed var(--border); border-radius: 4px; background: var(--panel-2); color: inherit;
  white-space: pre-wrap; word-break: break-all;
}
.layout-ref__code:hover { border-color: var(--accent); }
.layout-ref__empty { color: var(--muted); }
.layout-ref__link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; }

@media (max-width: 1100px) {
  .layout-editor__split:has(.layout-ref) { grid-template-columns: 1fr; }
  .layout-ref { max-height: 60vh; }
}


/* ==========================================================================
   Visual refresh. Overrides above by cascade; class names are unchanged.
   ========================================================================== */

html { color-scheme: dark; scroll-behavior: smooth; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: 22px; margin: 0 0 8px; }

/* header: sticky, frosted */
.shell__header {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 20;
  background: rgba(21, 25, 34, 0.82);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  padding: 10px 24px;
}
.shell__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.01em; }
.shell__brand:hover { text-decoration: none; }
.shell__logo {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #8b6cff); color: #fff; font-size: 14px; font-weight: 700;
}
.shell__nav { gap: 4px; }
.shell__nav a {
  color: var(--muted); padding: 6px 12px; border-radius: 8px;
  transition: background var(--ease), color var(--ease);
}
.shell__nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.shell__nav a.is-active { color: var(--text); background: var(--accent-soft); }
.shell__account a { color: var(--muted); }
.shell__account a.is-active, .shell__account a:hover { color: var(--text); text-decoration: none; }
.shell__main { padding: 24px; max-width: 1480px; width: 100%; margin: 0 auto; }

/* cards */
.card { box-shadow: var(--shadow); transition: border-color var(--ease); }

/* buttons */
.button, .shell__signout {
  transition: border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.button { padding: 7px 14px; border-radius: 8px; }
.button:hover:not(:disabled) { background: #232938; }
.button:active:not(:disabled) { transform: translateY(1px); }
.button--primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 4px 14px rgba(91, 155, 255, 0.28); }
.button--primary:hover:not(:disabled) { background: #7aafff; }

/* form fields */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], select, textarea {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font: inherit;
  transition: border-color var(--ease), box-shadow var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: #3a4254; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* tables */
.table tbody tr { transition: background var(--ease); }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.table tbody tr:last-child td { border-bottom: 0; }

/* banners and progress */
.banner { box-shadow: var(--shadow); }
.progress { height: 10px; }
.progress__bar { transition: width 400ms ease; }

/* loading states: no layout jump, no blank flash */
.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 8px;
  border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%;
  animation: bp-spin 700ms linear infinite;
}
@keyframes bp-spin { to { transform: rotate(360deg); } }
.skeleton {
  border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%);
  background-size: 200% 100%; animation: bp-shimmer 1.4s linear infinite;
}
.skeleton--editor { height: calc(100vh - 150px); min-height: 320px; }
@keyframes bp-shimmer { to { background-position: -200% 0; } }

/* slim scrollbars */
* { scrollbar-width: thin; scrollbar-color: #343b4b transparent; }

/* off-screen sections are not laid out until needed */
.table, .layout-ref__body { content-visibility: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 720px) {
  .shell__header { flex-wrap: wrap; gap: 8px 16px; padding: 10px 14px; }
  .shell__main { padding: 14px; }
}

/* ==========================================================================
   UI consistency pass
   One place for the rules that make every screen read as the same product:
   frame width, vertical rhythm, buttons, form rows, empty states.
   ========================================================================== */

/* -- frame ------------------------------------------------------------------
   .domain-shell centres itself with margin:auto, which in the flex column of
   .shell__main shrinks it to its content, so the Overview, Pages and Layout
   tabs were three different widths. Fill the column up to its max-width. */
.domain-shell { width: 100%; }
.domain-shell > .card ~ .card,
.domain-shell > .tabs + .card ~ section { margin-top: 16px; }

/* -- rhythm inside a card ---------------------------------------------------- */
.card__header { margin-bottom: 16px; }
.card > h2, .card__header h2 { margin: 0 0 12px; font-size: 17px; line-height: 1.3; }
.card > .banner { margin: 0 0 16px; }
.card details { margin: 16px 0; }
.card summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.card form + .table, .card form + table { margin-top: 20px; }

/* -- buttons ---------------------------------------------------------------- */
/* A button that cannot be pressed yet should read as "waiting", not as a
   washed-out version of the active one. */
.button--primary:disabled {
  background: var(--panel-2); border-color: var(--border); color: var(--muted);
  box-shadow: none; opacity: 1;
}
/* Safety net: a <button> written without a class used to fall back to the
   browser's grey box. Give it the standard secondary look. :where() keeps
   specificity at zero so any real class still wins. */
:where(button:not([class])) {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 14px; font: inherit; cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
:where(button:not([class])):hover:not(:disabled) { background: #232938; border-color: var(--accent); }
:where(button:not([class])):disabled { opacity: 0.5; cursor: not-allowed; }
/* A link-looking button (e.g. a keyword that expands a row). */
button.link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--accent); cursor: pointer; text-align: left;
}
button.link:hover { text-decoration: underline; }
.table .link { margin-left: 0; }
.button-link {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  text-decoration: none; font-size: inherit;
}
.button-link:hover { border-color: var(--accent); text-decoration: none; }
.button-link--quiet { background: transparent; border-color: transparent; color: var(--muted); }
.button-link--quiet:hover { color: var(--text); background: var(--panel-2); }

/* Row actions: evenly spaced, never wrapping into the next row. */
.table td:last-child { white-space: nowrap; }
.table td > :is(.button, .button-link, button) + :is(.button, .button-link, button, a) { margin-left: 6px; }
.table td > :is(.button, .button-link) { padding: 5px 11px; font-size: 13px; }

/* -- form rows --------------------------------------------------------------- */
/* Inputs written without a type attribute fell outside the themed selector
   list above and rendered as white boxes. */
input:not([type]), input[type="tel"], input[type="date"] {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font: inherit;
}
select, input, textarea { color-scheme: dark; }
::placeholder { color: #6b7385; }

/* Controls on one line, aligned at the top; the button is offset by the
   label's height so it sits level with the control it belongs to. */
.filters > .field { flex: 0 1 260px; min-width: 200px; }
.filters > .field select, .filters > .field input:not([type="checkbox"]) { height: 38px; }
.filters > .field-actions { margin-top: calc(12px * 1.55 + 4px); }
.filters > .field-actions .button,
.filters > .field-actions .button-link { height: 38px; display: inline-flex; align-items: center; }
.field__help { line-height: 1.5; max-width: 62ch; }

/* Chips (tags, statuses) */
.table__tag { display: inline-flex; align-items: center; margin: 0 6px 4px 0; }
button.table__tag { border: 1px solid var(--border); cursor: pointer; font: inherit; font-size: 11px; }
button.table__tag:hover { border-color: var(--accent); color: var(--text); }

/* Empty states read as a quiet message, not as stray text. */
.empty { color: var(--muted); padding: 20px 0; text-align: center; }

/* Help text hugs its control (a <p>'s default margin left a 1em gap), and an
   inline checkbox label stays on one line. */
.field > .field__help, .field__help { margin: 0; }
.field--inline label { white-space: nowrap; }
.field--inline input[type="checkbox"] { flex: none; margin: 0; }

/* -- narrow screens ---------------------------------------------------------
   The page itself must never scroll sideways: the nav scrolls inside itself and
   wide tables scroll inside their card. */
@media (max-width: 760px) {
  .shell__main { padding: 12px; }
  .card { padding: 16px; }
  .shell__nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .shell__nav::-webkit-scrollbar { display: none; }
  .shell__nav > * { flex: none; }
  .table { display: block; overflow-x: auto; max-width: 100%; }
  .domain-shell { padding: 12px 0 32px; }
  .tabs { overflow-x: auto; }
  .tabs__tab { flex: none; }
  .filters > .field { flex: 1 1 100%; }
  .filters > .field-actions { margin-top: 0; }
  .card__header { flex-wrap: wrap; }
}

/* One-line "name + action" form used in card headers. */
.inline-form { display: flex; align-items: center; gap: 8px; }
.inline-form input { height: 38px; min-width: 220px; }
.inline-form .button { height: 38px; }
.domain-shell > .banner { margin-bottom: 16px; }
.table__actions { align-items: center; }
.table__actions .button-link { padding: 5px 11px; font-size: 13px; }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/builder.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/*
 * Styles for the visual builder.
 *
 * Kept in its own file, imported by globals.css, so the Phase 1 admin styles
 * are untouched by Phase 2. Plain CSS with the same conventions as globals.css
 * — no new build-time dependency for the sake of a stylesheet.
 */

/*
 * The builder INHERITS the admin theme's tokens rather than defining its own
 * palette. A second palette here would drift from globals.css the first time
 * either changed, and the builder would end up looking like a different
 * application bolted onto the same shell.
 */
:root {
  --bp-border: var(--border);
  --bp-surface: var(--panel);
  --bp-raised: var(--panel-2);
  --bp-muted: var(--muted);
  --bp-accent: var(--accent);
  --bp-danger: var(--error);
  --bp-bg: var(--bg);
  --bp-selected: rgba(76, 141, 255, 0.14);
  --bp-attention: rgba(210, 153, 34, 0.16);
}

/* --- layout --------------------------------------------------------------- */

.builder {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bp-bg);
}

.builder--message {
  align-items: center;
  justify-content: center;
  color: var(--bp-muted);
}

.builder__body {
  display: grid;
  grid-template-columns: 288px minmax(0, 1fr) 344px;
  grid-gap: 1px;
  gap: 1px;
  flex: 1 1;
  min-height: 0;
  background: var(--bp-border);
}

.builder__left,
.builder__center,
.settings {
  background: var(--bp-surface);
  overflow-y: auto;
  min-height: 0;
}

.builder__center {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 1px;
  gap: 1px;
  background: var(--bp-border);
}

.builder__starters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bp-selected);
  border-bottom: 1px solid var(--bp-border);
  font-size: 13px;
}

/* --- toolbar -------------------------------------------------------------- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bp-surface);
  border-bottom: 1px solid var(--bp-border);
}

.toolbar__title {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.toolbar__status,
.toolbar__note {
  font-size: 12px;
  color: var(--bp-muted);
}

.toolbar__error {
  font-size: 12px;
  color: var(--bp-danger);
}

.toolbar__group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.toolbar__group--end {
  margin-left: auto;
}

.toolbar__group button {
  padding: 5px 10px;
  border: 1px solid var(--bp-border);
  background: var(--bp-surface);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.toolbar__group button.is-active {
  border-color: var(--bp-accent);
  color: var(--bp-accent);
}

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

.toolbar__badge {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bp-attention);
  color: var(--warn);
}

.toolbar__publish {
  background: var(--bp-accent) !important;
  border-color: var(--bp-accent) !important;
  color: #0f1115 !important;
  font-weight: 600;
}

/* --- palette -------------------------------------------------------------- */

.palette {
  padding: 12px;
  border-bottom: 1px solid var(--bp-border);
}

.palette__search {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  margin-bottom: 12px;
}

.palette__heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-muted);
  margin: 12px 0 6px;
}

.palette__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.palette__item {
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  background: var(--bp-surface);
  cursor: -webkit-grab;
  cursor: grab;
  display: flex;
  flex-direction: column;
}

.palette__item:hover {
  border-color: var(--bp-accent);
}

.palette__item--draft {
  cursor: not-allowed;
  opacity: 0.55;
}

.palette__item--draft:hover {
  border-color: var(--bp-border);
}

.palette__item-meta,
.palette__empty {
  font-size: 11px;
  color: var(--bp-muted);
}

/* --- layers --------------------------------------------------------------- */

.layers {
  padding: 12px;
}

.layers__heading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-muted);
  margin: 0 0 8px;
}

.layers__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.layers__row {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding-right: 4px;
}

.layers__row--selected {
  background: var(--bp-selected);
}

.layers__label {
  flex: 1 1;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
}

.layers__id {
  font-size: 11px;
  color: var(--bp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.layers__missing,
.canvas__missing {
  font-size: 11px;
  color: var(--bp-danger);
}

.layers__actions button {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--bp-muted);
  padding: 2px 4px;
}

.layers__empty {
  font-size: 12px;
  color: var(--bp-muted);
}

/* --- canvas --------------------------------------------------------------- */

.canvas {
  padding: 16px;
  overflow-y: auto;
}

.canvas__node {
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  background: var(--bp-surface);
  padding: 9px 10px;
  cursor: -webkit-grab;
  cursor: grab;
}

.canvas__node:hover {
  border-color: var(--bp-muted);
}

/* The action buttons are revealed on hover/selection so a long layout reads as
   a list of blocks rather than a wall of icons. */
.canvas__actions {
  margin-left: 4px;
  display: flex;
  gap: 2px;
  opacity: 0;
}

.canvas__node:hover > .canvas__label .canvas__actions,
.canvas__node--selected > .canvas__label .canvas__actions {
  opacity: 1;
}

.canvas__actions button {
  border: 0;
  background: none;
  color: var(--bp-muted);
  cursor: pointer;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
}

.canvas__actions button:hover {
  color: var(--bp-accent);
}

.canvas__name {
  white-space: nowrap;
}

.canvas__summary {
  font-weight: 400;
  color: var(--bp-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.canvas__flag {
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bp-accent);
  background: var(--bp-selected);
  border-radius: 999px;
  padding: 1px 6px;
}

.canvas__node--selected {
  border-color: var(--bp-accent);
  box-shadow: 0 0 0 2px rgba(76, 141, 255, 0.25);
}

.canvas__label {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.canvas__id {
  font-weight: 400;
  color: var(--bp-muted);
  margin-left: auto;
  font-size: 11px;
  white-space: nowrap;
}

.canvas__children {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px dashed var(--bp-border);
}

.canvas__drop {
  min-height: 8px;
  border-radius: 4px;
}

.canvas__drop--empty {
  min-height: 40px;
  border: 1px dashed var(--bp-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--bp-muted);
}

.canvas__drop:hover {
  background: var(--bp-selected);
}

/* A drop target nobody can see is a drop target nobody trusts. */
.canvas__drop--over {
  min-height: 22px;
  background: var(--bp-selected);
  box-shadow: inset 0 0 0 1px var(--bp-accent);
}

.canvas__drop--empty.canvas__drop--over {
  border-color: var(--bp-accent);
  color: var(--bp-accent);
}

/* --- preview -------------------------------------------------------------- */

.preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bp-bg);
}

.preview__bar {
  display: flex;
  gap: 12px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--bp-muted);
  border-bottom: 1px solid var(--bp-border);
  background: var(--bp-surface);
}

.preview__error {
  color: var(--bp-danger);
}

.preview__stage {
  flex: 1 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  padding: 12px;
  overflow: auto;
}

.preview__frame {
  height: 100%;
  min-height: 320px;
  border: 1px solid var(--bp-border);
  /* The preview is a REAL page: it keeps its own colours, not the admin's. */
  background: #ffffff;
  border-radius: 4px;
}

/* --- settings ------------------------------------------------------------- */

.settings {
  padding: 12px;
}

.settings__header h3 {
  margin: 0;
  font-size: 14px;
}

.settings__meta,
.settings__empty,
.settings__hint,
.field__help {
  font-size: 12px;
  color: var(--bp-muted);
}

.settings__error,
.field__error {
  font-size: 12px;
  color: var(--bp-danger);
}

.settings__group {
  margin-top: 16px;
}

.settings__group h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bp-muted);
  margin: 0 0 8px;
}

.settings__badge {
  text-transform: none;
  letter-spacing: 0;
  background: var(--bp-selected);
  color: var(--bp-accent);
  border-radius: 999px;
  padding: 1px 6px;
}

.field {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field--inline {
  flex-direction: row;
  align-items: center;
}

.field label {
  font-size: 12px;
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  padding: 5px 7px;
  font: inherit;
  font-size: 13px;
  width: 100%;
}

.field input[type="checkbox"] {
  width: auto;
}

.field__binding {
  margin-bottom: 4px;
}

/* --- widget editor -------------------------------------------------------- */

.widget-editor {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}

.widget-editor__list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.widget-editor__list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.widget-editor__list ul button {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  border-radius: 4px;
  padding: 5px 7px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 13px;
}

.widget-editor__list ul button span {
  font-size: 11px;
  color: var(--bp-muted);
}

.widget-editor__list ul button.is-active {
  border-color: var(--bp-accent);
  background: var(--bp-selected);
}

.widget-editor__new {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--bp-accent);
  border: 1px solid var(--bp-accent);
  border-radius: 4px;
  cursor: pointer;
}

.widget-editor__new:hover {
  filter: brightness(1.08);
}

.widget-editor__notice {
  background: var(--bp-attention);
  color: var(--warn);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.widget-editor__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.widget-editor__actions button {
  padding: 6px 12px;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  background: var(--bp-surface);
  cursor: pointer;
}

.widget-editor__actions .is-danger {
  color: var(--bp-danger);
  border-color: var(--bp-danger);
}

.widget-editor__actions button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.widget-editor__message {
  color: var(--ok);
  font-size: 13px;
}

.widget-editor__error {
  color: var(--bp-danger);
  font-size: 13px;
}

/* A layout with no content slot is the one broken state worth interrupting for. */
.builder__starters--warn {
  border-left: 3px solid var(--warn);
  background: var(--panel-2);
}


/* --- settings tabs -------------------------------------------------------- */

.settings__tabs {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: 4px;
  margin: -12px -12px 12px;
  padding: 8px 12px;
  background: var(--bp-surface);
  border-bottom: 1px solid var(--bp-border);
}

.settings__tabs button {
  flex: 1 1;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--bp-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.settings__tabs button.is-active {
  background: var(--bp-selected);
  border-color: var(--bp-accent);
  color: var(--bp-accent);
}

.settings__scope {
  font-size: 12px;
  color: var(--bp-muted);
  background: var(--bp-raised);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 12px 0 0;
}

.field--block {
  gap: 6px;
}

.field--inline label {
  flex: 0 0 108px;
  font-weight: 500;
  color: var(--bp-muted);
}

/* A colour is a TEXT value with a swatch beside it — var(--theme-color-*) and
   `transparent` have to stay typeable. */
.field__color {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.field__color input[type="color"] {
  width: 30px;
  flex: 0 0 30px;
  padding: 0;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
}

/* --- menu editor ---------------------------------------------------------- */

.menu-field {
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  padding: 8px;
  background: var(--bp-raised);
}

.menu-field--disabled {
  opacity: 0.75;
}

.menu-field__note,
.menu-field__empty {
  font-size: 12px;
  color: var(--bp-muted);
  margin: 0 0 8px;
}

.menu-field__add {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.menu-field__add select {
  flex: 1 1;
  min-width: 0;
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12px;
}

.menu-field__add button {
  border: 1px solid var(--bp-border);
  background: var(--bp-surface);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.menu-field__add--compact {
  margin-bottom: 6px;
}

.menu-field__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  counter-reset: menu-item;
}

.menu-field__item {
  border: 1px solid var(--bp-border);
  border-radius: 5px;
  background: var(--bp-surface);
  padding: 6px;
}

.menu-field__row {
  display: flex;
  gap: 4px;
  align-items: center;
}

.menu-field__row + .menu-field__row {
  margin-top: 4px;
}

.menu-field__row input {
  border: 1px solid var(--bp-border);
  border-radius: 4px;
  padding: 4px 6px;
  font: inherit;
  font-size: 12px;
  min-width: 0;
}

.menu-field__label {
  flex: 1 1 40%;
}

.menu-field__url {
  flex: 1 1 60%;
  color: var(--bp-muted);
}

.menu-field__buttons {
  display: flex;
  gap: 1px;
}

.menu-field__buttons button {
  border: 1px solid transparent;
  background: none;
  color: var(--bp-muted);
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 1.2;
}

.menu-field__buttons button:hover:not(:disabled) {
  border-color: var(--bp-border);
  color: var(--bp-accent);
}

.menu-field__buttons button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.menu-field__buttons .is-set {
  color: var(--bp-accent);
}

.menu-field__remove:hover:not(:disabled) {
  color: var(--bp-danger) !important;
}

.menu-field__children {
  margin: 6px 0 2px 14px;
  padding-left: 8px;
  border-left: 2px solid var(--bp-border);
}

/* --- theme panel ---------------------------------------------------------- */

.theme-panel__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-panel__presets button {
  border: 1px solid var(--bp-border);
  background: var(--bp-surface);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 12px;
}

.theme-panel__presets button:hover {
  border-color: var(--bp-accent);
  color: var(--bp-accent);
}

.theme-panel__presets .theme-panel__clear {
  margin-left: auto;
  color: var(--bp-muted);
}

/* --- image dropzone ------------------------------------------------------- */

.image-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  width: 100%;
}

/*
 * The zone has to read as "you can drop here" before anything is dragged, so
 * it is dashed, roomy and cursor: grab — and it must not push the settings
 * panel around, so its height is bounded.
 */
.widget-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 108px;
  padding: 12px;
  border: 1px dashed var(--bp-border);
  border-radius: 6px;
  background: var(--bp-raised);
  cursor: -webkit-grab;
  cursor: grab;
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.widget-dropzone:hover {
  border-color: var(--bp-accent);
}

.widget-dropzone:focus-visible {
  outline: 2px solid var(--bp-accent);
  outline-offset: 2px;
}

.widget-dropzone:active,
.widget-dropzone.is-dragover {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.widget-dropzone.is-dragover {
  border-color: var(--bp-accent);
  border-style: solid;
  background: var(--bp-selected);
}

.widget-dropzone.is-processing {
  cursor: progress;
  opacity: 0.8;
}

.widget-dropzone.is-success {
  border-style: solid;
  border-color: var(--ok, var(--bp-accent));
}

.widget-dropzone.is-error {
  border-color: var(--bp-danger);
  background: rgba(220, 70, 70, 0.08);
}

.widget-dropzone__preview {
  max-width: 100%;
  /* Bounded so a 300px-tall image cannot take over the panel. */
  max-height: 140px;
  border-radius: 4px;
  display: block;
  pointer-events: none;
}

.widget-dropzone__icon {
  font-size: 20px;
  line-height: 1;
  color: var(--bp-muted);
}

.widget-dropzone__text {
  font-size: 12px;
  font-weight: 600;
}

.widget-dropzone__hint {
  font-size: 11px;
  color: var(--bp-muted);
}

/* Present for the file picker and for assistive tech, never seen. */
.widget-dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.image-field__meta,
.image-field__error {
  font-size: 11px;
  margin: 0;
}

.image-field__meta {
  color: var(--bp-muted);
}

.image-field__from {
  opacity: 0.8;
}

.image-field__error {
  color: var(--bp-danger);
}

.image-field__url {
  display: flex;
  gap: 4px;
}

.image-field__url input {
  flex: 1 1;
  min-width: 0;
}

.image-field__remove {
  border: 1px solid var(--bp-border);
  background: var(--bp-surface);
  border-radius: 4px;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.image-field__remove:hover {
  border-color: var(--bp-danger);
  color: var(--bp-danger);
}


/* --- dark-theme legibility fixes ------------------------------------------
 * Buttons, inputs and selects used to inherit the browser's default colours
 * (black text on a light or transparent field), which on this dark theme was
 * close to invisible. Every control in the builder and the widget registry now
 * gets an explicit background and text colour from the admin tokens.
 */
:root {
  color-scheme: dark;
}

.builder button,
.builder input,
.builder select,
.builder textarea,
.widget-editor button,
.widget-editor input,
.widget-editor select,
.widget-editor textarea,
.settings button,
.settings input,
.settings select,
.settings textarea,
.palette button,
.palette input {
  color: var(--text);
  font-family: inherit;
}

.field input,
.field select,
.field textarea,
.palette__search,
.settings input,
.settings select,
.settings textarea {
  background: var(--panel-2);
  color: var(--text);
  border-color: var(--border);
}

.field input::placeholder,
.field textarea::placeholder,
.palette__search::placeholder {
  color: var(--muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.palette__search:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: var(--accent);
}

.field textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
}

.field label {
  color: var(--text);
}

.widget-editor h2,
.widget-editor h3,
.widget-editor label {
  color: var(--text);
}

.widget-editor__list ul button {
  color: var(--text);
}

.widget-editor__list ul button:hover {
  background: var(--panel-2);
  border-color: var(--border);
}

.widget-editor__list ul button span {
  color: var(--muted);
}

.widget-editor__list ul button.is-active {
  background: rgba(76, 141, 255, 0.18);
  border-color: var(--accent);
}

.widget-editor__actions button {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.widget-editor__actions button:hover:not(:disabled) {
  border-color: var(--accent);
}

.widget-editor__actions .is-danger {
  color: #ff8a84;
  border-color: var(--error);
}

.widget-editor__notice {
  background: rgba(210, 153, 34, 0.16);
  color: #f0c36a;
  border: 1px solid rgba(210, 153, 34, 0.4);
}

.widget-editor__new {
  color: #06101f;
}

.widget-editor__message {
  color: #5fd37a;
}

.widget-editor__error {
  color: #ff8a84;
}

.widget-editor code,
.field__help code {
  background: var(--panel-2);
  color: #cfd8e6;
  padding: 1px 5px;
  border-radius: 4px;
}

.field__help {
  color: var(--muted);
  line-height: 1.5;
}

.palette__item,
.palette__item-name {
  color: var(--text);
}

.palette__item-meta,
.palette__empty {
  color: var(--muted);
}

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/auth.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
/*
 * Phase 3 styles: login, the account page, user administration, and the
 * account controls in the header.
 *
 * Like builder.css, this inherits the tokens from globals.css rather than
 * defining a second palette.
 */

.auth-gate {
  padding: 48px 16px;
  text-align: center;
  color: var(--muted);
}

/* --- login ---------------------------------------------------------------- */

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 24px;
}

.login__card {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.login__title {
  margin: 0 0 4px;
  font-size: 18px;
}

.login__lede,
.login__hint {
  color: var(--muted);
  font-size: 13px;
}

.login__lede {
  margin: 0 0 20px;
}

.login__hint {
  margin: 16px 0 0;
}

.login__error {
  color: var(--error);
  font-size: 13px;
  margin: 4px 0 12px;
}

.login__submit {
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #0f1115;
  font-weight: 600;
  cursor: pointer;
}

.login__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* --- header account controls ---------------------------------------------- */

.shell__account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.shell__user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.shell__role {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shell__role--admin {
  color: var(--warn);
  border-color: var(--warn);
}

.shell__role--editor {
  color: var(--muted);
}

.shell__signout {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

.shell__signout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- user administration -------------------------------------------------- */

.user-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 13px;
}

.table th,
.table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.table__tag {
  margin-left: 6px;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
}

.table__actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.table__actions button {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.table__actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.table__actions .is-danger {
  color: var(--error);
  border-color: rgba(248, 81, 73, 0.5);
  background: transparent;
}

/* "is-primary" marks the one main action of a row or bar, wherever it sits. */
button.is-primary,
.table__actions button.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #06101f;
  font-weight: 600;
}
button.is-secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font: inherit;
  cursor: pointer;
}
button.is-secondary:hover:not(:disabled) { background: #232938; border-color: var(--accent); }
button.is-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
button.is-primary:disabled,
.table__actions button.is-primary:disabled {
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--muted);
  opacity: 1;
}

/* --- domain form (Phase 4) ------------------------------------------------ */

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card__header h1 {
  margin: 0;
}

.domain-form__legend {
  margin: 24px 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.domain-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 12px 16px;
  gap: 12px 16px;
  align-items: start;
}

/* A checkbox and its explanation are ONE cell that spans the row; as separate
   grid children the explanation became a stray column. */
.domain-form__wide { grid-column: 1 / -1; margin-bottom: 0; }
.domain-form__wide .field--inline { margin-bottom: 4px; gap: 8px; }

.domain-form__methods {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

.domain-form__method {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Monospace, because a pasted key is judged by its line breaks: a wrapped or
   truncated paste is the most common way key auth fails, and a proportional
   font hides exactly that. */
.domain-form__key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
  width: 100%;
}

.domain-form__warning {
  color: var(--warn);
}

.domain-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.domain-form__actions .is-secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* --- Phase 5: the CMS shell ----------------------------------------------- */

.domain-shell {
  padding: 20px 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.domain-shell__head h1 {
  margin: 8px 0 2px;
  font-size: 22px;
}

.domain-shell__host {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tabs__tab {
  padding: 8px 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
}

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

.tabs__tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* Status is scanned, not read: colour carries it, and the word is always
   present too, so the meaning does not depend on seeing colour. */
.badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.badge--active,
.badge--published {
  color: var(--ok, #4ade80);
  border-color: currentColor;
}

.badge--draft {
  color: var(--warn);
  border-color: currentColor;
}

.badge--paused,
.badge--archived,
.badge--disabled {
  color: var(--muted);
}

.overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.stats {
  display: flex;
  gap: 24px;
  margin: 12px 0 16px;
}

.stats--wide {
  flex-direction: column;
  gap: 10px;
}

.stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.stats dd {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 600;
}

.stats--wide dd {
  font-size: 13px;
  font-weight: 400;
}

.filters {
  display: flex;
  gap: 16px;
  /* Top, not bottom: a field with help text under its control would otherwise
     drag the action button down beside the help text. */
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

.filters .field {
  margin: 0;
  min-width: 150px;
}

/* Groups the "New page" button and its "All pages on this domain" link so
   they sit on the same baseline as the select field, same height, same
   gap — one action row instead of two mismatched controls. */
.field-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-actions .button {
  padding: 7px 14px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

.button-link {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 6px;
  background: var(--accent);
  color: #0f1115;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

/* --- page editor ---------------------------------------------------------- */

.page-editor__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.page-editor__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 0;
}

.page-editor__identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-editor__dirty {
  font-size: 12px;
  color: var(--warn);
}

.page-editor__actions {
  display: flex;
  gap: 6px;
}

.page-editor__actions .is-primary {
  background: var(--accent);
  color: #0f1115;
  border-color: var(--accent);
  font-weight: 600;
}

.page-editor__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.page-editor__meta .field {
  margin: 0;
}

/* The URL is the single most important thing on this screen: it is what the
   operator is actually producing, and it changes as they type. */
.page-editor__url code {
  display: block;
  padding: 7px 9px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}

.page-editor__seo {
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border);
}

.page-editor__seo summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
}

/* --- how a layout hosts a page -------------------------------------------- */
/*
 * A picture, because the layout/page split is the one idea an operator has to
 * hold to use this at all: the layout owns the furniture every page shares, the
 * page owns only the slot. Explaining it in a paragraph alone has not worked.
 */
.slot-diagram {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
  margin: 12px 0 14px;
}

.slot-diagram__row {
  display: flex;
  gap: 6px;
}

.slot-diagram__box {
  flex: 1 1;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-2);
}

.slot-diagram__row .slot-diagram__box:last-child {
  flex: 0 0 32%;
}

.slot-diagram__box--slot {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
  background: transparent;
  padding: 22px 12px;
}

.slot-diagram__box small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

/* Row actions read as a row of equal choices, not one button and two links. */
.button-link--quiet {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 400;
  padding: 5px 10px;
  margin-left: 6px;
}

/* --- layout settings regions ---------------------------------------------- */

.region {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 10px;
  overflow: hidden;
}

.region__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 0;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
}

.region__head.is-open {
  border-bottom: 1px solid var(--border);
}

.region__head small {
  font-weight: 400;
  color: var(--muted);
}

.region__body {
  padding: 12px;
}

.inline-add {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.inline-add input {
  flex: 1 1;
  min-width: 0;
}

/* --- the layout editor's HTML / CSS / JS tabs ------------------------------
   One editor, three documents. The dot marks a document that has content, so
   an operator can see at a glance that a layout HAS a stylesheet without
   opening the tab. */
.doc-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin-right: 12px;
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.14);
}
.doc-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.doc-tabs__tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}
.doc-tabs__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.layout-editor__docnote {
  margin: 8px 0 0;
  font-size: 12px;
  opacity: 0.7;
}
.muted {
  opacity: 0.5;
}

/* A tag that is a warning rather than a label. */
.table__tag--danger {
  background: rgba(220, 70, 70, 0.18);
  color: #ff9b9b;
  border: 1px solid rgba(220, 70, 70, 0.45);
  margin-left: 6px;
}

/* --- AMP layouts -------------------------------------------------------- */
.table__tag--amp {
  background: #fff4d6;
  color: #7a5200;
  font-weight: 600;
}
.layout-editor__format {
  padding: 4px 8px;
}
.amp-report {
  border-top: 1px solid #d6dbe1;
  padding: 8px 12px;
  font-size: 13px;
  max-height: 180px;
  overflow: auto;
}
.amp-report--ok strong {
  color: #1a7f37;
}
.amp-report--bad strong {
  color: #b42318;
}
.amp-report__list {
  margin: 4px 0 0;
  padding-left: 18px;
}
.amp-report__list--error {
  color: #b42318;
}

/* --- bulk promotion ----------------------------------------------------- */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.bulk-bar__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.bulk-panel {
  margin: 0 0 12px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.bulk-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bulk-panel input[type="text"],
.bulk-panel input:not([type]) {
  width: 100%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
}
.bulk-panel input:disabled {
  opacity: 0.5;
}