:root {
  --bg: #0f1115;
  --surface: #171a21;
  --border: #262b36;
  --text: #e7eaf0;
  --muted: #9aa3b2;
  --accent: #5eead4;
  --accent-ink: #0f1115;
  --radius: 12px;

  /* — PixelGlass brand tokens (light, mirrors client/src/styles/tokens.css) —
     Scoped to the brand-themed surfaces (the auth screens) so the legacy dark
     blog chrome above is untouched. */
  --brand-accent: #2e6bf5;
  --brand-accent-strong: #1d4ed8;
  --brand-accent-soft: #edf2fe;
  --brand-accent-2: #7c3aed;
  --brand-accent-2-strong: #6d28d9;
  --brand-accent-2-soft: #f4f0ff;
  --brand-ink: #0b1636;
  --brand-paper: #ffffff;
  --brand-paper-2: #f5f7fc;
  --brand-body: #5b6478;
  --brand-muted: #6e778c;
  --brand-line: #e7eaf2;
  --brand-line-strong: #dfe3ee;
  --brand-canvas: #fbfcfe;

  /* "Look here" without alarm — the SPA's site-status amber (tokens.css
     `--color-attention-*`), used by the admin's needs-attention pill. */
  --brand-attention-fg: #8a5a05;
  --brand-attention-bg: #fbf0d6;

  --brand-danger-fg: #b81e38;
  --brand-danger-bg: #fdecef;
  --brand-danger-line: #f4c7cd;

  /* Success/notice trio — a green that reads unmistakably as "good news" and
     stays distinct from both the danger red and the violet end of the brand
     spectrum. Used by the auth notice banner ("Password updated — please log in."). */
  --brand-success-fg: #0f7a46;
  --brand-success-bg: #e6f6ed;
  --brand-success-line: #b6e4c9;

  /* Two faces, same split as the app: display for headings + wordmark, the UI
     face for everything else. */
  --brand-font-heading:
    'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand-font-display:
    'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --brand-radius-sm: 8px;
  --brand-radius-md: 12px;
  --brand-radius-lg: 16px;
  --brand-radius-xl: 20px;
  --brand-radius-pill: 999px;

  --brand-shadow-sm: 0 1px 2px rgba(11, 22, 54, 0.04);
  --brand-shadow-md: 0 2px 8px rgba(11, 22, 54, 0.05), 0 1px 2px rgba(11, 22, 54, 0.03);
  --brand-shadow-lg: 0 26px 60px -30px rgba(124, 58, 237, 0.3),
    0 10px 30px -18px rgba(11, 22, 54, 0.12);
  --brand-shadow-accent: 0 12px 28px -12px rgba(46, 107, 245, 0.45);
  --brand-ring-accent: 0 0 0 4px rgba(46, 107, 245, 0.15);
  --brand-grad: linear-gradient(135deg, #2e6bf5, #7c3aed);

  --brand-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --brand-dur-fast: 140ms;
  --brand-dur-base: 220ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  line-height: 1.6;
}

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

a:hover {
  text-decoration: underline;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 5vw, 3rem);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
}

.site-nav {
  display: flex;
  gap: 1.25rem;
}

.site-nav a {
  color: var(--muted);
}

.site-nav a:hover {
  color: var(--text);
  text-decoration: none;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 2rem);
}

/* SPA mount shell (views/layouts/spa.hbs). The React AppShell owns the full
   viewport — a full-bleed top bar plus its own 1120px centered content column —
   so the body must be a bare, full-width, top-flush canvas with no padding or
   max-width. The light canvas here also prevents a dark flash before the client
   bundle (which sets the same value via client/src/styles/tokens.css) loads. */
.spa-body {
  margin: 0;
  min-height: 100vh;
  background: #fbfcfe;
}

.hero .eyebrow {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1.1;
}

.hero .lede {
  color: var(--muted);
  font-size: 1.1rem;
}

.button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.button:hover {
  text-decoration: none;
  filter: brightness(1.05);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.post-card {
  padding: 1.25rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.post-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}

.post-card p {
  margin: 0;
  color: var(--muted);
}

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

.empty {
  color: var(--muted);
}

.error-detail {
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Admin surface (views/layouts/admin.hbs) — the internal console, rendered in
   the SAME design language as the React SPA: the light brand canvas with its
   ambient wash, a sticky translucent top bar over a 1120px column, Space
   Grotesk over Instrument Sans, paper cards on hairlines, pill badges.

   It mirrors client/src/components/ui/{AppShell,Header,Button}.module.css and
   client/src/components/insights/StatTile.module.css — the `--brand-*` tokens
   above are the server-side copy of client/src/styles/tokens.css. The legacy
   dark chrome (`--bg`/`--surface`/`--accent`) is untouched and now belongs
   only to the `main` layout's blog scaffold.
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-body {
  margin: 0;
  min-height: 100vh;
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  font-size: 0.9375rem;
  line-height: 1.55;
  background-color: var(--brand-canvas);
  /* The SPA AppShell's wash: a wide blue fade anchored above the fold plus a
     violet kiss off the top-right — light filling the canvas, not a band. */
  background-image:
    radial-gradient(90rem 52rem at 50% -26rem, rgba(46, 107, 245, 0.05), transparent 60%),
    radial-gradient(48rem 34rem at 108% -6rem, rgba(124, 58, 237, 0.05), transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.admin-body a {
  color: var(--brand-accent);
  text-decoration: none;
}

.admin-body a:hover {
  color: var(--brand-accent-strong);
  text-decoration: underline;
}

.admin-body h1,
.admin-body h2 {
  font-family: var(--brand-font-heading);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.admin-body :focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* — Top bar (views/partials/admin-header.hbs) ————————————— */
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(251, 252, 254, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--brand-line);
}

.admin-topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-topbar-lead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.admin-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--brand-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
  flex-shrink: 0;
}

.admin-brand:hover {
  color: var(--brand-ink);
  text-decoration: none;
}

.admin-brand-mark {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--brand-radius-sm);
  box-shadow: var(--brand-shadow-accent);
}

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

/* The one thing the SPA header doesn't carry — which surface you're on. */
.admin-chip {
  padding: 0.2rem 0.55rem;
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-accent-2-strong);
  background-color: var(--brand-accent-2-soft);
  border-radius: var(--brand-radius-pill);
}

.admin-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.admin-topbar-email {
  font-size: 0.8125rem;
  color: var(--brand-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}

.admin-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

@media (max-width: 640px) {
  .admin-topbar-inner {
    padding: 0.85rem 1rem;
  }

  .admin-topbar-email {
    display: none;
  }

  .admin-main {
    padding: 1.5rem 1rem 3rem;
  }
}

/* — Buttons (mirroring the SPA Button variants) ———————————— */
.admin-btn,
.admin-btn-secondary,
.admin-feature-toggle,
.admin-model-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  font-family: var(--brand-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--brand-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform var(--brand-dur-fast) var(--brand-ease-out),
    box-shadow var(--brand-dur-base) var(--brand-ease-out),
    background-color var(--brand-dur-base) var(--brand-ease-out),
    border-color var(--brand-dur-base) var(--brand-ease-out),
    color var(--brand-dur-base) var(--brand-ease-out);
}

.admin-btn:active,
.admin-btn-secondary:active,
.admin-feature-toggle:active,
.admin-model-save:active {
  transform: translateY(1px);
}

/* Primary — the brand spectrum at full strength: "Impersonate", "Save". */
.admin-btn,
.admin-model-save {
  color: #fff;
  background-color: var(--brand-accent);
  background-image: var(--brand-grad);
  box-shadow: var(--brand-shadow-accent);
}

.admin-btn:hover,
.admin-model-save:hover {
  background-image: linear-gradient(135deg, #1d4ed8, #6d28d9);
  box-shadow: 0 16px 34px -14px rgba(46, 107, 245, 0.55);
  transform: translateY(-1px);
}

/* Secondary — paper on a hairline: "Log out", the feature toggles. */
.admin-btn-secondary,
.admin-feature-toggle {
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  border-color: var(--brand-line-strong);
  box-shadow: var(--brand-shadow-sm);
}

.admin-btn-secondary:hover,
.admin-feature-toggle:hover {
  color: var(--brand-accent-strong);
  border-color: var(--brand-accent);
  transform: translateY(-1px);
}

/* Ghost — a text action that only fills on hover ("Back to app"). Scoped under
   `.admin-body` so it outranks the surface's blanket accent link colour. */
.admin-body .admin-ghost-link {
  padding: 0.55rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--brand-body);
  border-radius: var(--brand-radius-md);
  transition:
    background-color var(--brand-dur-base) var(--brand-ease-out),
    color var(--brand-dur-base) var(--brand-ease-out);
}

.admin-body .admin-ghost-link:hover {
  color: var(--brand-accent-strong);
  background-color: var(--brand-accent-soft);
  text-decoration: none;
}

/* — Page head ——————————————————————————————————————— */
.admin {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.admin-head h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--brand-ink);
  overflow-wrap: anywhere;
}

.admin-eyebrow {
  margin: 0 0 0.4rem;
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent-2);
}

/* The sub-line under the title. On the detail page it mixes text with a role
   pill, so it lays out as a baseline flex row rather than raw inline flow. */
.admin-head .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--brand-body);
}

.admin-actions {
  margin: 0;
}

/* — Metric tiles (the SPA StatTile) ————————————————————— */
.admin-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1rem;
}

.admin-tile {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.15rem;
  padding: 1rem;
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
}

/* Numerals are the point of a stat tile, so they speak in the display face. */
.admin-tile-value {
  font-family: var(--brand-font-heading);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--brand-ink);
}

.admin-tile-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-body);
}

/* — Tables ——————————————————————————————————————————— */
/* A wide table scrolls INSIDE its own card. `min-width: 0` is load-bearing: the
   wrap is a flex item (`.admin`/`.admin-section` are columns), and a flex item's
   automatic minimum size is its content — without this the table's full width
   pushes the page itself into a horizontal scroll on narrow screens. */
.admin-table-wrap {
  min-width: 0;
  overflow-x: auto;
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th,
.admin-table td {
  padding: 0.85rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--brand-line);
  white-space: nowrap;
}

.admin-table thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-muted);
  background-color: var(--brand-paper-2);
}

.admin-table tbody tr {
  transition: background-color var(--brand-dur-fast) var(--brand-ease-out);
}

.admin-table tbody tr:hover {
  background-color: var(--brand-paper-2);
}

.admin-table tbody tr:last-child td {
  border-bottom: none;
}

.admin-table td {
  color: var(--brand-ink);
}

.admin-table .admin-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-table .empty {
  color: var(--brand-muted);
}

/* — Status pills (the SPA StatusBadge) ————————————————— */
.admin-role {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.1;
  border-radius: var(--brand-radius-pill);
  color: var(--brand-body);
  background-color: var(--brand-paper-2);
}

.admin-role-admin {
  color: var(--brand-accent-strong);
  background-color: var(--brand-accent-soft);
}

/* A connected Ghost site reads as healthy (green); needs-attention as amber —
   "worth a look", never "you have failed". */
.admin-role-connected {
  color: var(--brand-success-fg);
  background-color: var(--brand-success-bg);
}

.admin-role-needs-attention {
  color: var(--brand-attention-fg);
  background-color: var(--brand-attention-bg);
}

/* ── Admin per-user detail (views/pages/admin/user.hbs) ─────────────────────── */

.admin-back {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
}

.admin-body .admin-back a {
  font-weight: 600;
  color: var(--brand-muted);
}

.admin-body .admin-back a:hover {
  color: var(--brand-accent-strong);
  text-decoration: none;
}

.admin-detail {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1rem;
}

.admin-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem;
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
}

.admin-detail-item dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
}

.admin-detail-item dd {
  margin: 0;
  font-family: var(--brand-font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--brand-ink);
  overflow-wrap: anywhere;
}

/* The verification cell carries an action under its value, so it needs air. */
.admin-detail-item dd .admin-actions {
  margin-top: 0.6rem;
}

.admin-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.admin-section-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-ink);
}

.admin-mono {
  font-family: var(--brand-font-mono);
  font-size: 0.8125rem;
  color: var(--brand-body);
}

/* Beta-feature toggle rows in the per-user detail page. The description wraps
   (unlike the other admin cells, which stay nowrap), so a full sentence reads. */
.admin-table td:has(.admin-feature-desc) {
  white-space: normal;
}

.admin-feature-name {
  font-weight: 600;
  color: var(--brand-ink);
}

.admin-feature-desc {
  margin-top: 0.15rem;
  max-width: 34rem;
  font-size: 0.8125rem;
  color: var(--brand-muted);
}

/* A per-user override in force (vs the catalog default) — a small violet chip. */
.admin-feature-override {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  font-family: var(--brand-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-accent-2-strong);
  background-color: var(--brand-accent-2-soft);
  border-radius: var(--brand-radius-pill);
}

@media (prefers-reduced-motion: reduce) {
  .admin-btn:hover,
  .admin-btn-secondary:hover,
  .admin-feature-toggle:hover,
  .admin-model-save:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Auth screens (views/layouts/auth.hbs) — a branded, light, chrome-free
   experience that mirrors the React SPA's design language: Space Grotesk over
   Instrument Sans, the blue→violet spectrum, the SPA card, TextField inputs and
   primary Button.
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-body {
  margin: 0;
  min-height: 100vh;
  color: var(--brand-ink);
  font-family: var(--brand-font-display);
  line-height: 1.55;
  background-color: var(--brand-canvas);
  /* A soft blue glow top-left and a violet kiss bottom-right, over a clean
     canvas — the same ambient wash the SPA backdrop carries. */
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(46, 107, 245, 0.14), transparent 60%),
    radial-gradient(720px 460px at 100% 108%, rgba(124, 58, 237, 0.1), transparent 58%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.auth-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
}

.auth-card {
  width: 100%;
  max-width: 25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.75rem, 5vw, 2.5rem);
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-xl);
  box-shadow: var(--brand-shadow-lg);
  animation: auth-rise var(--brand-dur-base) var(--brand-ease-out) both;
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* — Brand mark ——————————————————————————————————————— */
.auth-brand {
  line-height: 0;
  border-radius: var(--brand-radius-lg);
  transition: transform var(--brand-dur-base) var(--brand-ease-out);
}

.auth-brand:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.auth-brand img {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  /* The logo is colorful on transparent, so a boxed shadow would clip the
     dissipating pixels — use a drop-shadow that follows the artwork's alpha. */
  filter: drop-shadow(0 8px 18px rgba(46, 107, 245, 0.28));
}

/* — Heading block ———————————————————————————————————— */
.auth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
}

.auth-eyebrow {
  font-family: var(--brand-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent-2);
}

.auth-title {
  margin: 0;
  font-family: var(--brand-font-heading);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--brand-ink);
}

.auth-lede {
  margin: 0;
  max-width: 22rem;
  font-size: 1rem;
  color: var(--brand-body);
}

/* — Error banner ————————————————————————————————————— */
.auth-error {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-danger-fg);
  background-color: var(--brand-danger-bg);
  border: 1px solid var(--brand-danger-line);
  border-radius: var(--brand-radius-md);
  text-align: left;
}

.auth-error-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* — Success notice ———————————————————————————————————
   The positive sibling of .auth-error: same banner shape, teal-green palette
   and a check mark instead of a dot, so a confirmation never reads as an error. */
.auth-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand-success-fg);
  background-color: var(--brand-success-bg);
  border: 1px solid var(--brand-success-line);
  border-radius: var(--brand-radius-md);
  text-align: left;
}

.auth-notice-mark {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.05rem;
}

/* — Form ————————————————————————————————————————————— */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.auth-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--brand-ink);
}

/* Label paired with an inline action (e.g. "Password" + "Forgot password?"). */
.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.auth-forgot {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-accent);
}

.auth-forgot:hover {
  color: var(--brand-accent-strong);
  text-decoration: underline;
}

.auth-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--brand-font-display);
  font-size: 1.0625rem;
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-sm);
  transition:
    border-color var(--brand-dur-base) var(--brand-ease-out),
    box-shadow var(--brand-dur-base) var(--brand-ease-out);
}

.auth-input::placeholder {
  color: var(--brand-muted);
}

.auth-input:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: var(--brand-ring-accent);
}

.auth-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--brand-body);
}

/* A standalone, centered helper note (e.g. the "check your spam" line on the
   reset-sent confirmation) — not bound to a form field like .auth-hint. */
.auth-note {
  margin: 0;
  max-width: 22rem;
  font-size: 0.875rem;
  color: var(--brand-body);
  text-align: center;
}

.auth-note a {
  color: var(--brand-accent);
  font-weight: 600;
}

.auth-note a:hover {
  color: var(--brand-accent-strong);
  text-decoration: underline;
}

/* — Primary submit (mirrors the SPA Button primary) ——————— */
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.9rem 1.5rem;
  font-family: var(--brand-font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  background-color: var(--brand-accent);
  background-image: var(--brand-grad);
  border: 1px solid transparent;
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-accent);
  cursor: pointer;
  transition:
    transform var(--brand-dur-fast) var(--brand-ease-out),
    box-shadow var(--brand-dur-base) var(--brand-ease-out),
    background-color var(--brand-dur-base) var(--brand-ease-out);
}

.auth-submit:hover {
  background-color: var(--brand-accent-strong);
  background-image: linear-gradient(135deg, #1d4ed8, #6d28d9);
  box-shadow: 0 16px 34px -14px rgba(46, 107, 245, 0.55);
  transform: translateY(-1px);
  text-decoration: none;
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit:focus-visible {
  outline: none;
  box-shadow: var(--brand-ring-accent), var(--brand-shadow-accent);
}

/* — Cross-link footer ————————————————————————————————— */
.auth-switch {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--brand-body);
  text-align: center;
}

.auth-switch a {
  color: var(--brand-accent);
  font-weight: 600;
}

.auth-switch a:hover {
  color: var(--brand-accent-strong);
  text-decoration: underline;
}

/* Brand-consistent focus ring for links/brand mark on the auth surface. */
.auth-body :focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .auth-card {
    animation: none;
  }
}

/* Admin settings panel — the AI model picker (a paper card matching the tiles). */
.admin-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.25rem;
  background-color: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-sm);
}

.admin-panel h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-ink);
}

.admin-panel .meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--brand-body);
}

.admin-panel .meta strong {
  color: var(--brand-ink);
}

.admin-model-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* The select mirrors the SPA TextField: paper on a strong hairline, an accent
   ring on focus, and the native chevron replaced by the brand's own. */
.admin-model-form select {
  min-width: 16rem;
  padding: 0.6rem 2.25rem 0.6rem 0.85rem;
  font-family: var(--brand-font-display);
  font-size: 0.9375rem;
  color: var(--brand-ink);
  background-color: var(--brand-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236e778c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  border: 1px solid var(--brand-line-strong);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-sm);
  appearance: none;
  cursor: pointer;
  transition:
    border-color var(--brand-dur-base) var(--brand-ease-out),
    box-shadow var(--brand-dur-base) var(--brand-ease-out);
}

.admin-model-form select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: var(--brand-ring-accent);
}