/* ──────────────────────────────────────────────────────────────────
   CatalystX — DXC NextGen Reference Architecture stylesheet
   Two palettes coexist during the v1.8 visual refresh:
     · Legacy navy/amber tokens (will be retired phase-by-phase)
     · CatalystX brand-refresh tokens (--cx-* prefix during transition)
   ────────────────────────────────────────────────────────────────── */

/* ── GT Standard placeholder. Files drop into public/fonts/ when the
       license arrives; until then the system falls back to Inter →
       Arial Narrow → system-ui per the --font-display stack below.
       NO request actually fires for the missing files — the browser
       silently skips and uses the next available family. ── */
@font-face {
  font-family: "GT Standard";
  font-style: normal;
  font-weight: 400 950;
  font-display: swap;
  src: url("/fonts/GTStandard-Variable.woff2") format("woff2");
}

:root {
  /* ── Legacy tokens (retire phase-by-phase during the v1.8 refresh) ── */
  --navy: #1E2761;
  --navy-dark: #161D4A;
  --navy-soft: #2B3A8C;
  --amber: #F4A340;
  --amber-light: #FFC078;
  --amber-bg: #FFF8EE;
  --ink: #1A1A1A;
  --ink-soft: #5A5C6B;
  --paper: #FFFFFF;
  --paper-soft: #F6F7FB;
  --line: #E1E4ED;
  --danger: #B3261E;
  --danger-bg: #FDECEA;
  --info: #2B5A8C;
  --info-bg: #E8F0F8;
  --cross-cutting-bg: #2F5A3E;
  --max-width: 1200px;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(30, 39, 97, 0.08);

  /* ── v1.8 CatalystX brand-refresh palette ──
       Cream canvas + midnight ink + orange/blue accents. Glass-morphism
       surfaces use --cx-line and --soft-shadow. Display headlines use
       --font-display ("GT Standard"), UI uses --font-ui (Inter). */
  --canvas: #f7f5f0;
  --white: #ffffff;
  --midnight: #101842;
  --midnight-2: #16235d;
  --cx-ink: #15182b;
  --muted: #697088;
  --cx-line: rgba(16, 24, 66, 0.12);
  --line-strong: rgba(16, 24, 66, 0.2);
  --blue: #3858ff;
  --cyan: #33b6ff;
  --orange: #ff8a2a;
  --gold: #f5c15c;
  --green: #12b981;
  --violet: #745cff;
  --red: #f05d5e;
  --cx-shadow: 0 26px 70px rgba(16, 24, 66, 0.12);
  --soft-shadow: 0 16px 42px rgba(16, 24, 66, 0.09);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "GT Standard", "Arial Narrow", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--cx-ink);
  background: var(--canvas);
  min-height: 100vh;
}

a { color: var(--midnight); }
a:hover { color: var(--orange); }

/* ─── v1.8 app shell ──────────────────────────────────────────────
   Wraps the whole page; carries the radial-gradient canvas wash. The
   header is sticky inside this shell, footer falls at the bottom. */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background:
    radial-gradient(circle at 10% 8%, rgba(56, 88, 255, .17), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 138, 42, .16), transparent 26%),
    linear-gradient(180deg, #fbfaf7 0%, var(--canvas) 54%, #f0eee7 100%);
}

/* ─── Header (glass-morphism, sticky) ─────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 14px;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--midnight);
  text-decoration: none;
}
.brand-dxc-mark { height: 32px; width: auto; display: block; }
.brand-product-mark { height: 40px; width: auto; display: block; }
.brand-divider {
  width: 1px;
  align-self: stretch;
  min-height: 36px;
  background: var(--cx-line);
}

.site-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.user-chip {
  background: rgba(16, 24, 66, 0.04);
  border: 1px solid var(--cx-line);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--midnight);
}
.link-button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--midnight);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.link-button:hover {
  color: var(--orange);
  background: rgba(255, 138, 42, 0.08);
  border-color: rgba(255, 138, 42, 0.25);
}
.inline-form { display: inline; margin: 0; padding: 0; }

.site-main {
  flex: 1;
  width: 100%;
  max-width: 1640px;
  margin: 22px auto 0;
}

.site-footer {
  text-align: center;
  padding: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ─── Flash messages ──────────────────────────────────────────── */

.flash {
  max-width: 1640px;
  margin: 16px auto 0;
  padding: 0.85rem 1.1rem;
  border-radius: 16px;
  font-size: 0.9rem;
  border: 1px solid var(--cx-line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  color: var(--midnight);
}
.flash-error { background: rgba(240, 93, 94, 0.1); border-color: rgba(240, 93, 94, 0.25); color: #a82c2c; }
.flash-info  { background: rgba(56, 88, 255, 0.08); border-color: rgba(56, 88, 255, 0.2); color: #1f3da8; }

/* ─── Auth pages (login / signup / verify) ────────────────────── */

.auth-card {
  max-width: 420px;
  margin: 3rem auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow);
}
.auth-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-logo img { height: 48px; width: auto; }
.auth-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  color: var(--navy);
}
/* v1.1 rebrand: platform name renders above "Sign in", larger than the
   form heading so the brand reads first. Tagline sits just under the
   name in a smaller muted face. .auth-signin-heading overrides the
   default auth-card h1 size so "Sign in" stays subordinate to the brand. */
.auth-platform-name {
  margin: 0 0 0.25rem;
  color: var(--navy);
  font-size: 1.25rem;
  font-weight: 700;
}
.auth-platform-tagline {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  opacity: 0.85;
}
.auth-signin-heading {
  margin: 0 0 1.5rem !important;
  font-size: 1.1rem !important;
  font-weight: 600;
  color: var(--ink) !important;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.auth-form label > span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--navy);
}
.auth-form label small {
  color: var(--ink-soft);
  font-weight: 400;
  margin-left: 0.25rem;
}
.auth-form input {
  font: inherit;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-form input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 39, 97, 0.15);
}

.btn-primary {
  background: var(--navy);
  color: var(--paper);
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--navy-dark); }
.btn-primary:disabled,
.btn-primary[disabled] {
  background: #999;
  cursor: not-allowed;
  opacity: 0.7;
}
/* v1.2 #21: destructive variant for actions that can't be undone
   (currently: hard-delete user). Same shape as btn-primary, red. */
.btn-primary--danger { background: var(--danger); }
.btn-primary--danger:hover { background: #6F1A14; }
.btn-primary--danger:disabled,
.btn-primary--danger[disabled] {
  background: #999;
  cursor: not-allowed;
  opacity: 0.7;
}

.auth-alt {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.resend-form {
  text-align: center;
  margin: 1rem 0 0;
  padding: 0;
}
.resend-form .link-button { color: var(--navy); }
.resend-form .link-button:hover { color: var(--amber); }

.form-errors {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--danger-bg);
  border-left: 3px solid var(--danger);
  color: var(--danger);
  border-radius: 4px;
  font-size: 0.9rem;
}
.form-errors li + li { margin-top: 0.25rem; }
.form-info {
  padding: 0.75rem 1rem;
  background: var(--info-bg);
  border-left: 3px solid var(--info);
  color: var(--info);
  border-radius: 4px;
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* ─── Architecture page ───────────────────────────────────────── */

.page-header { margin-bottom: 2rem; }
.page-header h1 {
  color: var(--navy);
  margin: 0 0 0.5rem;
  font-size: 1.875rem;
}
.thesis {
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-style: italic;
  max-width: 60ch;
  margin: 0;
}

.architecture-grid {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .architecture-grid { grid-template-columns: 1fr; }
}

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

.layer-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
}
.layer-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-left-color: var(--amber);
}
.layer-card--highlight {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-bg) 0%, var(--paper) 35%);
}
.layer-card--highlight:hover { border-left-color: var(--amber); }

.layer-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--paper);
  font-weight: 700;
  border-radius: 6px;
  font-size: 1.05rem;
}
.layer-card--highlight .layer-badge {
  background: var(--amber);
  color: var(--navy-dark);
}

.layer-body { flex: 1; min-width: 0; }
.layer-name {
  margin: 0;
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
}
.layer-card--highlight .layer-name { color: var(--navy-dark); }
.layer-tagline {
  margin: 0.125rem 0 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-style: italic;
}
.layer-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.partner-chip {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}
.partner-chip--dxc {
  background: var(--amber);
  color: var(--navy-dark);
  border-color: var(--amber);
  font-weight: 600;
}

.cross-cutting {
  background: var(--cross-cutting-bg);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 1.25rem;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.cross-cutting h3 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber);
}
.cross-cutting ul {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cross-cutting li { font-size: 0.95rem; }
.cross-cutting-note {
  font-size: 0.75rem;
  opacity: 0.75;
  margin: 1rem 0 0;
}

.page-footer-note {
  margin: 2rem 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-style: italic;
}

/* ─── Layer detail page ───────────────────────────────────────── */

.breadcrumb {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}
.breadcrumb a {
  text-decoration: none;
  color: var(--midnight);
  opacity: .7;
}
.breadcrumb a:hover { color: var(--orange); opacity: 1; }

.layer-detail {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.layer-detail--highlight { border-top-color: var(--amber); }
.layer-detail-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.layer-badge--xl {
  width: 72px;
  height: 72px;
  font-size: 1.5rem;
  border-radius: 8px;
}
.layer-detail--highlight .layer-badge--xl {
  background: var(--amber);
  color: var(--navy-dark);
}
.layer-detail-header .layer-name { font-size: 1.5rem; }
.layer-detail-header .layer-tagline { font-size: 1rem; margin-top: 0.25rem; }

.layer-section { margin: 1.5rem 0; }
.layer-section h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 0 0 0.5rem;
  font-weight: 700;
}
.layer-summary {
  margin: 0;
  font-size: 1.05rem;
  color: var(--navy);
}

.partner-table {
  width: 100%;
  border-collapse: collapse;
}
.partner-table th,
.partner-table td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  vertical-align: top;
}
.partner-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 600;
}
.partner-table tr.is-dxc { background: var(--amber-bg); }
.partner-table tr.is-dxc td:first-child { color: var(--navy-dark); }
.product-note {
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.layer-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}
.layer-nav-link {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  transition: background 0.1s, color 0.1s;
}
.layer-nav-link:hover {
  background: var(--paper-soft);
  color: var(--amber);
}

/* ─── Error page ──────────────────────────────────────────────── */

.error-page {
  text-align: center;
  padding: 4rem 1.5rem;
}
.error-page h1 {
  font-size: 4rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.error-page p { color: var(--ink-soft); }

/* ─── Landing page ──────────────────────────────────────────────── */
.landing-page { padding: 1rem 0 3rem; }
.landing-header {
  text-align: center;
  margin: 1rem 0 2.5rem;
}
.landing-header h1 {
  color: var(--navy);
  font-size: 2rem;
  margin: 0 0 0.25rem;
}
.landing-tagline {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: italic;
  margin: 0 0 1.25rem;
  opacity: 0.85;
}
.landing-subtitle {
  color: var(--ink-soft);
  font-size: 1.1rem;
  margin: 0;
}

.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.landing-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
  min-height: 220px;
}
.landing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-top-color: var(--amber);
  color: var(--ink);
}
.landing-card--primary { border-top-color: var(--amber); }
.landing-card--admin {
  border-top-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-bg) 0%, var(--paper) 50%);
}

.landing-card-icon {
  font-size: 1.75rem;
  color: var(--amber);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.landing-card h2 {
  color: var(--navy);
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}
.landing-card p {
  color: var(--ink-soft);
  font-size: 0.925rem;
  margin: 0 0 1rem;
  flex: 1;
}
.landing-card-action {
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
}
.landing-card:hover .landing-card-action { color: var(--amber); }

/* Stack wrapper used by v1.1 #3 to put a small "Content status →" link
   under the two content-editing admin cards. The wrapper becomes the grid
   item; the inner card retains its normal styling. */
.landing-card-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.landing-card-stack .landing-card {
  flex: 1;
}
.landing-card-extra {
  font-size: 0.875rem;
  text-align: center;
  color: var(--navy);
  text-decoration: none;
  padding: 0.35rem;
}
.landing-card-extra:hover {
  color: var(--amber);
  text-decoration: underline;
}

/* v1.2 #10 — Recent runs panel on the landing page. Sits below the
   action cards, scannable list (date + mode + use case + actions).
   Empty state renders inline; populated state renders an <ul>. */
.landing-recent-runs {
  margin: 2.5rem auto 0;
  max-width: 1100px;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.landing-recent-runs__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 1rem;
}
.landing-recent-runs__head h2 {
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0;
  font-weight: 700;
}
.landing-recent-runs__empty {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.landing-recent-runs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.landing-recent-runs__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr auto;
  gap: 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.landing-recent-runs__row:first-child { border-top: none; padding-top: 0; }
.landing-recent-runs__meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.landing-recent-runs__date { color: var(--ink); }
.landing-recent-runs__mode { font-weight: 600; color: var(--navy); }
.landing-recent-runs__body p { margin: 0; }
.landing-recent-runs__usecase {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.landing-recent-runs__usecase--muted { color: var(--ink-soft); font-style: italic; }
.landing-recent-runs__sub {
  margin-top: 0.25rem !important;
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.landing-recent-runs__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
@media (max-width: 720px) {
  .landing-recent-runs__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .landing-recent-runs__actions { justify-content: flex-start; }
}
/* Status-badge variant for "Partial" — orange tone, matches the brief's
   color hint. Other status colors (success/failed) are used by the
   /history page; success doesn't need a badge on the landing panel
   since failed runs are excluded here. */
.status-badge--partial {
  background: #FFF4D6;
  color: #8A5A12;
  border: 1px solid #E9C779;
}
.status-badge--success {
  background: #E6F4EA;
  color: #1E6B3A;
  border: 1px solid #B7DCC1;
}
.status-badge--failed {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid #E0A8A4;
}

/* ─── Admin pages ───────────────────────────────────────────────── */
/* v1.8 — admin/history pages get the page-hero compact treatment for the
   header, then wrap their tables/forms in glass-morphism cards. */
.admin-page { padding-bottom: 3rem; }
.admin-header {
  margin-bottom: 22px;
  padding: 26px 32px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(110deg, rgba(255,255,255,.82), rgba(255,255,255,.54)),
    radial-gradient(circle at 90% 0%, rgba(255,138,42,.14), transparent 34%),
    radial-gradient(circle at 10% 100%, rgba(56,88,255,.12), transparent 36%);
  box-shadow: var(--soft-shadow);
}
.admin-header h1 {
  color: var(--midnight);
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  line-height: .98;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.admin-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.admin-layer-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.admin-layer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  gap: 1rem;
}
.admin-layer-header h2 {
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0;
}

.btn-sm {
  font-size: 0.85rem;
  padding: 0.4rem 0.75rem;
  text-decoration: none;
  display: inline-block;
}

.admin-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 0.95rem;
  margin: 16px 0;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.5);
  border: 1px dashed var(--cx-line);
  text-align: center;
}

/* Admin/history tables wrapped in glass card via outer .admin-page section.
   The table itself adopts the v1.8 runs-table aesthetic. */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: rgba(255,255,255,.66);
  border: 1px solid var(--cx-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}
.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(16,24,66,.08);
  font-size: 13px;
  vertical-align: middle;
  color: #34405f;
}
.admin-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #53607d;
  font-weight: 950;
  background: rgba(255,255,255,.45);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: rgba(56,88,255,.035); }
.admin-table tr.is-dxc { background: rgba(255,138,42,.06); }
.admin-table strong, .admin-table b { color: var(--midnight); }
.admin-table .link-button + .link-button { margin-left: 6px; }
.admin-col-order { width: 3rem; color: var(--ink-soft); }
.admin-col-dxc { width: 4rem; text-align: center; color: var(--amber); font-weight: 700; }
.admin-col-actions { width: 13rem; text-align: right; white-space: nowrap; }
.admin-col-actions .link-button + .inline-form { margin-left: 0.75rem; }

/* v1.1 #6.1: role-change dropdown + Apply button in the user list. The
   actions column is widened above to fit the dropdown without wrapping. */
.role-change-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.75rem;
}
.role-change-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.role-change-form select {
  font-size: 0.9rem;
  padding: 0.15rem 0.3rem;
}

.link-button--danger { color: var(--danger); }
.link-button--danger:hover { color: #6F1A14; }

.admin-form {
  background: rgba(255,255,255,.66);
  border: 1px solid var(--cx-line);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}
.admin-form label { display: flex; flex-direction: column; gap: 8px; }
.admin-form label > span {
  font-size: 11px;
  font-weight: 900;
  color: var(--midnight);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.admin-form label small { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form input[type="date"],
.admin-form select,
.admin-form textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--cx-ink);
  outline: none;
}
.admin-form textarea { min-height: 100px; resize: vertical; }
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  border-color: rgba(56,88,255,.45);
  box-shadow: 0 0 0 4px rgba(56,88,255,.08);
}
.checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 0.625rem !important;
}
.checkbox-label input { width: 1.1rem; height: 1.1rem; }
.checkbox-label span { font-weight: 400 !important; color: var(--ink) !important; }
.admin-form-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.5rem;
}

/* v1.2 #21: definition-list layout for the delete-confirm page's
   read-only details block. Two-column grid, label on the left. */
.admin-detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 24px;
  margin: 0 0 22px;
  padding: 22px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.66);
  border: 1px solid var(--cx-line);
  box-shadow: var(--soft-shadow);
}
.admin-detail-list dt {
  font-weight: 800;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  align-self: center;
}
.admin-detail-list dd {
  margin: 0;
  color: var(--midnight);
  font-size: 14px;
}
.admin-warning {
  background: rgba(240,93,94,.08);
  border: 1px solid rgba(240,93,94,.25);
  border-left: 4px solid var(--red);
  padding: 14px 18px;
  margin: 0 0 22px;
  border-radius: 14px;
  color: #a82c2c;
  line-height: 1.55;
}

/* ─── Recommend form ────────────────────────────────────────────── */
.recommend-page { padding-bottom: 3rem; position: relative; }
.recommend-header {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
}
.recommend-header h1 {
  color: var(--navy);
  margin: 0.25rem 0 0.25rem;
  font-size: 1.625rem;
}
.recommend-subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 70ch;
}

.recommend-form { display: flex; flex-direction: column; gap: 22px; }

/* v1.8 — sections render as glass-morphism cards matching .card/.card-pad */
.recommend-section {
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}
.recommend-section-title {
  color: var(--midnight);
  margin: 0 0 6px;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.recommend-section-help {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 16px;
  line-height: 1.5;
}

.recommend-textarea-label { display: flex; flex-direction: column; gap: 8px; }
.recommend-textarea-label > span {
  font-weight: 800;
  color: var(--midnight);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.recommend-textarea-label textarea,
.recommend-textarea-label input[type="text"] {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--cx-ink);
  resize: vertical;
  min-height: 108px;
  width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.recommend-textarea-label textarea:focus,
.recommend-textarea-label input[type="text"]:focus {
  border-color: rgba(56,88,255,.45);
  box-shadow: 0 0 0 4px rgba(56,88,255,.08);
}
.recommend-textarea-label select {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--cx-line);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--cx-ink);
  max-width: 24rem;
  outline: none;
}
.recommend-textarea-label select:focus {
  border-color: rgba(56,88,255,.45);
  box-shadow: 0 0 0 4px rgba(56,88,255,.08);
}

/* v1.2 #2: reference-document picker. Two visual states:
   - no file: "Choose file" button + "No file selected." muted note
   - file picked: rounded chip with filename + "× Remove" link-button
   The native <input type="file"> is visually hidden (still keyboard-
   focusable via the button click proxy). */
.reference-doc-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.reference-doc-picker__input {
  /* visually hidden but still focusable for assistive tech */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.reference-doc-picker__choose {
  font: inherit;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  font-weight: 600;
}
.reference-doc-picker__choose:hover {
  border-color: var(--navy);
  background: var(--paper-soft);
}
.reference-doc-picker__choose:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 39, 97, 0.15);
}
.reference-doc-picker__empty {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.reference-doc-picker__hint {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.85rem;
}
.reference-doc-picker__error {
  margin: 0;
  padding: 0.4rem 0.6rem;
  background: rgba(244, 67, 54, 0.08);
  border-left: 3px solid var(--danger, #b00020);
  color: var(--danger, #b00020);
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Picked-file chip — same shape language as the placed-product chips
   in the layer stack (rounded, navy fill) so the form reads as one
   visual system. */
.reference-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem 0.35rem 0.7rem;
  background: var(--navy);
  color: var(--paper);
  border-radius: 999px;
  font-size: 0.9rem;
  max-width: 100%;
}
.reference-doc-chip__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26rem;
  font-weight: 600;
}
.reference-doc-chip__remove {
  background: transparent;
  border: none;
  color: var(--paper);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
}
.reference-doc-chip__remove:hover {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}
.reference-doc-chip__remove:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.layer-fieldset {
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 0.875rem;
  background: var(--paper-soft);
}
.layer-fieldset--highlight {
  border-left-color: var(--amber);
  background: linear-gradient(90deg, var(--amber-bg) 0%, var(--paper-soft) 30%);
}
.layer-fieldset > legend {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.5rem;
}
.layer-badge--sm {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
  border-radius: 4px;
}
.layer-fieldset-name {
  color: var(--navy);
  font-weight: 600;
  font-size: 1rem;
}
.layer-fieldset-tagline {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}

.vendor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem 1.5rem;
  margin-top: 0.5rem;
}
.vendor-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}
.vendor-group--dxc {
  background: var(--amber-bg);
  border-color: var(--amber);
}
.vendor-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.375rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--line);
}
.vendor-group--dxc .vendor-name { color: var(--navy-dark); border-bottom-color: var(--amber-light); }

.product-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  padding: 0.2rem 0;
  cursor: pointer;
}
.product-check input { margin-top: 0.2rem; flex-shrink: 0; }
.product-check span { color: var(--ink); }

.recommend-empty {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0.25rem 0;
}

.recommend-warning {
  background: #FFF4D6;
  border-left: 3px solid var(--amber);
  color: #6B4A12;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.925rem;
}

/* v1.2 #12 — "reference document was too large to carry over" notice on
   the recommendation form, surfaced when the suggest → use-case handoff
   dropped a >3.5MB PDF. Same amber accent as .recommend-warning so it
   reads as a soft heads-up, not an error. Inline Dismiss button on the
   right keeps the notice transient. */
.reference-doc-handoff-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #FFF4D6;
  border-left: 3px solid var(--amber);
  color: #6B4A12;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.925rem;
  margin: 0.5rem 0 1rem;
}
.reference-doc-handoff-notice p {
  margin: 0;
  flex: 1;
}
.reference-doc-handoff-notice .link-button {
  color: #6B4A12;
  white-space: nowrap;
}

.recommend-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.recommend-spinner {
  position: fixed;
  inset: 0;
  background: rgba(30, 39, 97, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
/* Belt-and-suspenders: ensure the HTML `hidden` attribute always wins over
   our explicit display rules, regardless of how strong they are. Without
   this, [hidden] elements with display:flex|grid|etc render visibly. */
[hidden] { display: none !important; }

/* ─── Recommendation result page ──────────────────────────────────── */
.result-page { padding-bottom: 3rem; }
.result-header {
  margin-bottom: 22px;
  padding: 26px 32px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(110deg, rgba(255,255,255,.82), rgba(235,243,255,.74));
  box-shadow: var(--soft-shadow);
}
.result-header h1 {
  color: var(--midnight);
  margin: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  line-height: .98;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.result-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 70ch;
  line-height: 1.55;
}
.result-subtitle-secondary {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 1.5rem 0;
}

.result-empty {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.result-section {
  margin-top: 1.5rem;
}
.result-section-title {
  color: var(--navy);
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}

.layer-card--result {
  background: var(--paper);
  flex-direction: row;
  padding: 1rem 1.25rem;
  border-left-width: 4px;
}
.layer-card--result .layer-head-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.layer-card--result .layer-name {
  margin: 0;
}

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  line-height: 1.5;
}
/* v1.1 #4 status badge palette. The visual is doing real communicative
   work — sellers should scan the stack and immediately see where they're
   asking the client to change something. Switch=orange (distinct from
   amber-recommend_new); add_alongside=blue; keep_existing=green. */
.status-badge--keep_existing {
  background: #DCEFE0;
  color: #1F6B33;
}
.status-badge--recommend_new {
  background: var(--amber);
  color: var(--navy-dark);
}
.status-badge--switch {
  background: #FFE4D1;
  color: #9A3412;
  border: 1px solid #FB923C;
}
.status-badge--add_alongside {
  background: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #60A5FA;
}
.status-badge--optional {
  background: var(--paper-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* v1.2 #18: locked user status badge on /admin/users. Orange tone to
   sit between green (Active) and red (Deactivated) — communicates "a
   problem, but transient" rather than a hard removed state. */
.status-badge--locked {
  background: #FFE4D1;
  color: #9A3412;
  border: 1px solid #FB923C;
}
.admin-locked-meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  font-style: italic;
}

.layer-card--result.status-optional {
  opacity: 0.65;
}
.layer-card--result.status-switch {
  border-left: 4px solid #FB923C;
}
.layer-card--result.status-add_alongside {
  border-left: 4px solid #60A5FA;
}

/* v1.1 #4: "Currently:" / "Recommend instead:" stacked groups under switch
   and add_alongside cards. */
.result-pick-group {
  margin: 0.5rem 0;
}
.result-pick-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}
/* Strikethrough on the customer's current pick when status=switch — visual
   echo of the "we recommend replacing this" message. */
.result-picks--current .result-pick {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  color: var(--ink-soft);
}
.result-picks--recommend .result-pick {
  font-weight: 500;
}

/* keep_existing: small green annotation after each pick. */
.pick-already-marker {
  color: #1F6B33;
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 0.25rem;
}

/* v1.1 #4: tradeoff callouts. Light tinted box matching the badge color,
   labeled "Why switch:" / "Why add:". Renders below the picks, before
   the one-sentence reasoning. */
.tradeoff-callout {
  margin: 0.75rem 0 0.5rem;
  padding: 0.65rem 0.85rem;
  border-radius: 6px;
  border-left: 4px solid;
}
.tradeoff-callout--switch {
  background: #FFF7ED;
  border-left-color: #FB923C;
  color: #7C2D12;
}
.tradeoff-callout--add_alongside {
  background: #EFF6FF;
  border-left-color: #60A5FA;
  color: #1E3A8A;
}
.tradeoff-callout-label {
  font-weight: 700;
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tradeoff-callout-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.result-picks {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.result-pick {
  font-size: 0.92rem;
  color: var(--ink);
}
.result-pick--dxc {
  background: var(--amber-bg);
  border-left: 3px solid var(--amber);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.result-pick--empty {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.85rem;
}

.result-reasoning {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* v1.2 #1: lock icon prepended to mandatory product list items on the
   result page. Inline span carrying the SVG; sized to match the line
   weight of the list item without bumping the row height. */
.result-pick__lock {
  display: inline-flex;
  align-items: center;
  color: var(--amber);
  vertical-align: -1px;
  margin-right: 0.25rem;
}
.result-pick__lock svg { display: block; }

/* v1.2 #1: explanatory line beneath any layer card whose mandatory_products
   array is non-empty. Visually subordinate to the partner list but
   distinct from the italic .result-reasoning line below it. */
.result-mandatory-note {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--amber);
  background: rgba(244, 163, 64, 0.08);
  color: var(--ink);
  font-size: 0.85rem;
  border-radius: 4px;
}

.result-narrative {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  line-height: 1.65;
}
.result-narrative p { margin: 0 0 1rem; }
.result-narrative p:last-child { margin-bottom: 0; }

.result-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

/* ─── Use-case suggestion cards ──────────────────────────────────── */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.use-case-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.use-case-title {
  color: var(--navy);
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}
.use-case-summary {
  color: var(--ink);
  font-size: 0.92rem;
  margin: 0 0 0.75rem;
  flex: 1;
}
.use-case-rationale {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.use-case-card .btn-primary {
  align-self: flex-start;
}
.recommend-spinner-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.recommend-spinner-card p {
  margin: 0.75rem 0 0;
  color: var(--navy);
  font-weight: 600;
}
.recommend-spinner-note {
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  font-size: 0.875rem;
  margin-top: 0.25rem !important;
}
.recommend-spinner-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--amber);
  margin: 0 auto;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* v1.2 #22 — per-AI pending state in the streaming result view.
   Small inline spinner + "Generating…" copy under each AI section header,
   shown only between submit-accepted and the first ai_ready chunk. */
.result-ai-pending {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 0;
  color: var(--ink-soft);
}
.result-ai-pending .recommend-spinner-dot {
  width: 22px;
  height: 22px;
  border-width: 2px;
  margin: 0;
}
.result-ai-pending p {
  margin: 0;
  font-size: 0.95rem;
}

/* v1.2 #22 — streaming-narrative cursor. Thin block cursor at the end of
   the rendered markdown while text is still arriving from the AI. The
   ::after pseudo lives inside .result-narrative--streaming so it
   automatically disappears when the AI's status flips to 'done'. */
.result-narrative--streaming::after {
  content: '▎';
  display: inline;
  margin-left: 1px;
  color: var(--amber);
  animation: streaming-cursor-blink 1s steps(2, end) infinite;
}
@keyframes streaming-cursor-blink {
  to { opacity: 0; }
}

/* ============================================================
   v1.1 #1 — drag-and-drop /recommend (React island)
   ============================================================
   Layout: a 1fr / 320px two-column grid. Layer stack on the left
   (eight drop-zone cards), product palette on the right. Below
   768px the palette stacks underneath the layer stack.

   Visual states on a layer card during drag:
     --drag-active : subtle border accent on every layer
     --canonical   : green inset shadow on the layer that matches
                     the dragging product's canonical layer
     --over        : light-blue fill on the layer the cursor is over
   ============================================================ */

.recommend-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  margin: 1rem 0;
}
@media (max-width: 768px) {
  .recommend-layout {
    grid-template-columns: 1fr;
  }
}

/* ─── Layer stack (drop zones) ──────────────────────────────── */

.recommend-layer-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.recommend-layer-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.recommend-layer-card--highlight {
  border-top: 3px solid var(--amber);
  background: linear-gradient(180deg, var(--amber-bg) 0%, var(--paper) 30%);
}
.recommend-layer-card--drag-active {
  border-color: var(--navy);
}
.recommend-layer-card--canonical {
  box-shadow: 0 0 0 3px #B7E4C7 inset;
  border-color: #1F6B33;
}
.recommend-layer-card--over {
  background: #E0EFFE;
}
.recommend-layer-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.recommend-layer-card__title {
  flex: 1;
  min-width: 0;
}
.recommend-layer-card__title h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--navy);
}
.recommend-layer-card__title .layer-tagline {
  margin: 0;
  font-size: 0.825rem;
  color: var(--ink-soft);
  font-style: italic;
}
.recommend-layer-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.25rem 0.25rem 0.25rem 3.5rem; /* indent past the badge column */
}
.recommend-layer-card__empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-style: italic;
  align-self: center;
}

/* v1.2 #8 (re-scoped) — per-layer seller note. Two states:
   - collapsed: a small "+ Add note" link-style button under the chips
   - expanded: a 3-row textarea + Remove link + character count
   Lives below the chips row inside the layer card body. The indent
   matches the chips' badge-column indent so everything visually aligns. */
.recommend-layer-card__note-add {
  margin: 0.35rem 0 0.25rem 3.5rem;
  font-size: 0.8rem;
  color: var(--navy);
  background: none;
  border: none;
  padding: 0.15rem 0.3rem;
  cursor: pointer;
  align-self: flex-start;
}
.recommend-layer-card__note-add:hover {
  color: var(--amber);
  text-decoration: underline;
}
.recommend-layer-card__note {
  margin: 0.4rem 0.5rem 0.4rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.recommend-layer-card__note-input {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  resize: vertical;
}
.recommend-layer-card__note-input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(30, 39, 97, 0.12);
}
.recommend-layer-card__note-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}
.recommend-layer-card__note-remove {
  background: none;
  border: none;
  padding: 0;
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
}
.recommend-layer-card__note-remove:hover { color: #6F1A14; }
.recommend-layer-card__note-count {
  color: var(--ink-soft);
}

/* v1.2 #8 (re-scoped) — per-layer seller-note callout on the history
   detail view (use-case mode, inside each LayerCard rendered by
   LayerCardGrid). Sits below the reasoning line; amber accent so it
   reads as a "the seller said" annotation, not part of the AI's
   output. Live results never render this — history-view only. */
.result-layer-note {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.75rem;
  background: #FFF4D6;
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}
.result-layer-note__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B4A12;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.result-layer-note__body {
  margin: 0;
  font-size: 0.85rem;
  color: #1A1A2E;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* v1.2 #8 (re-scoped) — top-of-page "Seller notes for this run" block
   on a saved suggest-mode run's history view. Renders only when the
   saved run had notes; absent on live suggest results. */
.result-seller-notes {
  margin: 1rem 0 1.25rem;
  padding: 0.85rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}
.result-seller-notes__title {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.result-seller-notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.result-seller-notes__row {
  font-size: 0.85rem;
  color: var(--ink);
  line-height: 1.4;
}
.result-seller-notes__row strong { color: var(--navy); margin-right: 0.35rem; }

/* Placed chips (on a layer card). Solid navy pill, white text — high
   contrast so the vendor + product reads cleanly against the layer card
   background. */
.recommend-placed-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem 0.2rem 0.6rem;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 999px;
  color: var(--paper);
  font-size: 0.85rem;
}
.recommend-placed-chip strong {
  font-weight: 700;
  color: var(--paper);
}
.recommend-placed-chip__remove {
  background: transparent;
  border: none;
  color: var(--paper);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  border-radius: 50%;
  opacity: 0.85;
}
.recommend-placed-chip__remove:hover {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

/* v1.2 #1: lock-icon toggle on a placed chip. Tab order on the chip is
   lock → label → remove (×). The button itself is invisible chrome — just
   a focus ring; the SVG inside carries the visual state. */
.recommend-placed-chip__lock {
  background: transparent;
  border: none;
  padding: 0 0.15rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 0;
}
.recommend-placed-chip__lock:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--paper);
}
.recommend-placed-chip__lock:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.recommend-placed-chip__lock--on {
  color: var(--amber);
}
.recommend-placed-chip__lock--on:hover {
  background: rgba(244, 163, 64, 0.18);
  color: var(--amber-light);
}

/* Mandatory chip: amber border replacing the default navy border, plus a
   subtle amber inner glow so the chip reads as "locked" against the row
   of regular navy chips. */
.recommend-placed-chip--mandatory {
  border: 1.5px solid var(--amber);
  box-shadow: 0 0 0 1px rgba(244, 163, 64, 0.25);
}

/* ─── Palette ───────────────────────────────────────────────── */

.recommend-palette {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: 80vh;
  overflow-y: auto;
  position: sticky;
  top: 1rem;
  align-self: start;
}
.recommend-palette__search {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.recommend-palette__search:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30, 39, 97, 0.15);
}

.recommend-palette__legend summary {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  padding: 0.25rem 0;
}
.recommend-palette__legend ul {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
}
.recommend-palette__legend strong {
  color: var(--navy);
}

.recommend-palette__groups {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.recommend-palette__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  padding: 0.5rem 0;
}
.recommend-palette__vendor-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.recommend-palette__vendor-name {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.2rem;
}

/* Draggable product chips in the palette. Single-line, button element so
   keyboard focus + activation work via @dnd-kit's KeyboardSensor without
   extra accessibility plumbing. */
.recommend-palette__chip {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.55rem;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  cursor: grab;
  transition: background 0.1s, border-color 0.1s;
  touch-action: none;
}
.recommend-palette__chip:hover {
  background: var(--navy-soft);
  border-color: var(--navy);
}
.recommend-palette__chip:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.recommend-palette__chip:active {
  cursor: grabbing;
}
.recommend-palette__chip--dragging {
  opacity: 0.4;
}
.recommend-palette__chip--dxc {
  background: var(--amber-bg);
  border-color: var(--amber);
  border-left-width: 3px;
}
.recommend-palette__chip-vendor {
  font-weight: 700;
  color: var(--navy);
}
.recommend-palette__chip-product {
  color: var(--ink);
}
.recommend-palette__chip-layer {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

/* ─── Mismatch modal ────────────────────────────────────────── */

.recommend-mismatch-modal {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  max-width: 460px;
  width: calc(100vw - 2rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.recommend-mismatch-modal::backdrop {
  background: rgba(15, 23, 42, 0.5);
}
.recommend-mismatch-modal__inner {
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.recommend-mismatch-modal__inner p {
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
}
.recommend-mismatch-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* ─── Misc ──────────────────────────────────────────────────── */

.recommend-error-banner {
  margin-top: 0.75rem;
}

/* v1.1 #5: Download as PDF button on the recommendation result page.
   Positioned top-right of the result-header; the error text stacks below. */
.result-header { position: relative; }
.result-pdf-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}
.result-pdf-error {
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  margin: 0;
}
@media (max-width: 640px) {
  /* On narrow screens drop the absolute positioning and let the button
     flow under the title rather than overlap it. */
  .result-pdf-actions {
    position: static;
    align-items: flex-start;
    margin-top: 0.5rem;
  }
}

/* ─── v1.1 #2: dual-AI result page ──────────────────────────────────
   Each AI gets its own clearly delimited section on the result page.
   The header rule + spacing makes the boundary unmistakable so sellers
   can tell at a glance which analysis they're reading. */
/* v1.8 — each provider's output is a glass-morphism card */
.result-provider-section {
  margin-top: 22px;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.66);
  border: 1px solid var(--cx-line);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}
.result-provider-section:first-of-type { margin-top: 0; }
.result-provider-header { margin: 0 0 16px; }
.result-provider-header h2 {
  color: var(--midnight);
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.result-provider-header h2::before {
  content: "";
  width: 6px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--orange), var(--blue));
}
.result-provider-body {
  /* Container for one AI's stack + narrative. No background — sections
     inside (.result-section) carry their own surfaces. */
}

/* Sub-headings inside a provider body — e.g. "Customer's stack with our
   picks" / "Why this stack solves the use case". Slightly smaller than
   .result-section-title since they sit one level deeper. */
.result-section-subtitle {
  color: var(--navy);
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
}

/* Per-provider error placeholder shown when this AI failed but the
   other succeeded. Distinct from .form-errors (which is a hard error
   banner) — this is informational, points the user at the other AI. */
.result-provider-error {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: var(--ink-soft);
}
.result-provider-error p { margin: 0; }

/* Top-level banner shown when BOTH AIs failed (use-case mode) OR when
   we need to inline-note that one AI failed in suggest mode. Reuses
   .form-errors look but gives it explicit top-margin in this context. */
.result-error-banner {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Subtle note shown above a provider's content when that provider
   succeeded only after one or more retries. Honest UX per gap #6. */
.result-attempts-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--paper-soft);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
}

/* ─── v1.1 #2: provenance badges on suggest-mode use-case cards ────
   Each card carries a small chip identifying which AI proposed it.
   Claude = navy (matches brand chrome). GPT = cross-cutting green
   (already used elsewhere in the palette for a distinct second tone). */
.use-case-card__provenance {
  display: inline-block;
  align-self: flex-start;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
  line-height: 1.5;
  margin-bottom: 0.6rem;
}
.use-case-card__provenance--claude {
  background: var(--navy);
  color: var(--paper);
}
.use-case-card__provenance--openai {
  background: var(--cross-cutting-bg);
  color: var(--paper);
}

/* ─── Connection Status (admin trigger in site-header + dropdown) ── */
.connstatus { position: relative; display: inline-block; }
.connstatus__trigger {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: rgba(16, 24, 66, 0.04);
  border: 1px solid var(--cx-line);
  color: var(--midnight);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  transition: background .15s ease, border-color .15s ease;
}
.connstatus__trigger:hover {
  background: rgba(255, 138, 42, 0.08);
  border-color: rgba(255, 138, 42, 0.35);
  color: var(--midnight);
}
.connstatus__trigger[aria-expanded="true"] {
  background: rgba(255, 138, 42, 0.12);
  border-color: rgba(255, 138, 42, 0.45);
}
.connstatus__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9aa0ad;
}
.connstatus__dot--ok      { background: #2ecc71; }
.connstatus__dot--fail    { background: #e74c3c; }
.connstatus__dot--mixed   { background: #f39c12; }
.connstatus__dot--unknown { background: #9aa0ad; }
.connstatus__label { font-weight: 500; }

.connstatus__dropdown[hidden] { display: none; }
.connstatus__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  min-width: 240px;
  background: #ffffff;
  color: #1a1a2e;
  border: 1px solid #d0d3dd;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.5rem 0;
}
.connstatus__body { padding: 0; }
.connstatus__row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
}
.connstatus__row-label {
  min-width: 56px;
  font-weight: 600;
  color: #1a1a2e;
}
.connstatus__row-model {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: #4a4d5a;
  background: #f3f4f8;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  word-break: break-all;
}
.connstatus__loading,
.connstatus__error {
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  color: #6b6f7d;
  margin: 0;
}
.connstatus__error { color: #c0392b; }

/* ════════════════════════════════════════════════════════════════════
   v1.8 CatalystX visual refresh — page-specific blocks
   ════════════════════════════════════════════════════════════════════ */

/* ─── Login page (standalone, no shared layout chrome) ─────────── */
.login-body { font-family: var(--font-ui); background: var(--canvas); }
.login-page {
  min-height: 100vh;
  padding: 30px;
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  gap: 28px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 8%, rgba(56, 88, 255, .17), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255, 138, 42, .16), transparent 26%),
    linear-gradient(180deg, #fbfaf7 0%, var(--canvas) 54%, #f0eee7 100%);
}
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(56,88,255,.08), transparent 34%, rgba(255,138,42,.1));
}

.login-hero {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  min-height: calc(100vh - 60px);
  padding: 34px;
  background:
    radial-gradient(circle at 76% 16%, rgba(255,138,42,.2), transparent 26%),
    radial-gradient(circle at 8% 72%, rgba(56,88,255,.17), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.68), rgba(255,255,255,.36));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: var(--cx-shadow);
}
.login-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16,24,66,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,24,66,.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 76%);
  pointer-events: none;
}

.hero-top {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
}
.login-hero-dxc { height: 36px; width: auto; display: block; }
.pill {
  border: 1px solid var(--cx-line);
  border-radius: 999px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px);
  color: var(--midnight);
  font-size: 12px;
  font-weight: 750;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(18,185,129,.12); }
.dot.blue   { background: var(--blue);   box-shadow: 0 0 0 4px rgba(56,88,255,.12); }
.dot.orange { background: var(--orange); box-shadow: 0 0 0 4px rgba(255,138,42,.15); }

.kicker {
  margin: 80px 0 10px;
  font-size: 13px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--midnight);
  font-weight: 900;
  position: relative; z-index: 2;
}
.login-title {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-display);
  color: var(--midnight);
  text-transform: uppercase;
  position: relative; z-index: 2;
  line-height: 1;
}
.login-title-main {
  display: block;
  font-size: clamp(56px, 8vw, 108px);
  letter-spacing: -.055em;
  line-height: .88;
  /* Optical alignment: the open "C" glyph carries extra left side-bearing,
     so the visual left edge sits ~0.03em inset from the I of INTELLIGENCE
     below. The negative indent compensates so the two lines look flush-left. */
  text-indent: -.035em;
}
.login-title-sub {
  display: block;
  margin-top: 6px;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -.02em;
  font-weight: 700;
  color: #3a4163;
  line-height: 1.05;
}
.login-copy {
  max-width: 620px;
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: #4f5876;
  position: relative; z-index: 2;
}

.hero-badges {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  position: relative; z-index: 4;
}
.value-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}
.value-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56,88,255,.13), rgba(255,138,42,.13));
  margin-bottom: 12px;
  color: var(--midnight);
  font-size: 18px;
}
.value-card strong { display: block; font-size: 14px; color: var(--midnight); margin-bottom: 6px; }
.value-card span { color: var(--muted); font-size: 12px; line-height: 1.45; }

/* Floating mini-stack decoration */
.brand-stack-float {
  position: absolute;
  right: 50px;
  top: 150px;            /* aligned vertically with the CATALYSTX title row */
  width: 200px;
  height: 175px;
  opacity: .92;
  z-index: 1;
  transform: rotate(-7deg);
  pointer-events: none;
}
.mini-slab {
  position: absolute;
  left: 20px; right: 20px;
  height: 24px;
  border-radius: 11px;
  transform: skewX(-22deg);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 14px 22px rgba(16,24,66,.14);
  backdrop-filter: blur(10px);
}
/* Slab spacing tuned to the smaller 200×175px floating container so all 8
   layers fit without overflowing the visible bounds. Step is 18px. */
.mini-slab:nth-child(1) { bottom:   0; background: rgba(255,138,42,.5); }
.mini-slab:nth-child(2) { bottom:  18px; background: rgba(245,193,92,.42); }
.mini-slab:nth-child(3) { bottom:  36px; background: rgba(51,182,255,.35); }
.mini-slab:nth-child(4) { bottom:  54px; background: rgba(56,88,255,.32); }
.mini-slab:nth-child(5) { bottom:  72px; background: rgba(116,92,255,.32); }
.mini-slab:nth-child(6) { bottom:  90px; background: rgba(18,185,129,.28); }
.mini-slab:nth-child(7) { bottom: 108px; background: rgba(255,255,255,.38); }
.mini-slab:nth-child(8) { bottom: 126px; background: rgba(16,24,66,.18); }

/* Login form panel */
.login-panel {
  min-height: calc(100vh - 60px);
  border-radius: 34px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: var(--cx-shadow);
  padding: 30px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(22px);
}
.login-card { width: min(440px, 100%); }
.product-logo { display: block; width: 255px; height: auto; }
.login-product-logo { width: 285px; margin-bottom: 16px; }

/* v1.8.1 — CSS-rendered brand lockup (icon + wordmark + tagline).
   Used on the login card; gives independent control over wordmark
   size and the baseline gap to the tagline (the PNG version had
   them hard-coded, which made tagline descenders overlap the
   wordmark on certain viewport widths). */
.product-lockup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.product-lockup-card__icon {
  width: 64px;
  height: auto;
  flex-shrink: 0;
}
.product-lockup-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;          /* baseline-safe gap between wordmark and tagline */
  line-height: 1;
}
.product-lockup-card__name {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--midnight);
  line-height: 1;
}
.product-lockup-card__name-x {
  color: var(--orange);
}
.product-lockup-card__tagline {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .01em;
}
.login-card h2 {
  font-size: 32px;
  letter-spacing: -.04em;
  margin: 12px 0 8px;
  color: var(--midnight);
}
.login-card p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 12px;
}

.login-card .field { margin: 18px 0; }
.login-card .field label {
  display: block;
  color: var(--midnight);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  margin-bottom: 8px;
}
.login-card .field input {
  width: 100%;
  border: 1px solid var(--cx-line);
  border-radius: 16px;
  padding: 14px 15px;
  background: rgba(255,255,255,.78);
  outline: none;
  color: var(--cx-ink);
  font: inherit;
}
.login-card .field input:focus {
  border-color: rgba(56,88,255,.45);
  box-shadow: 0 0 0 4px rgba(56,88,255,.08);
}

.login-actions { margin-top: 22px; display: grid; gap: 12px; }
.primary-btn {
  border-radius: 999px;
  padding: 14px 20px;
  border: 0;
  font-weight: 850;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(110deg, var(--midnight) 0%, #27347c 42%, var(--orange) 140%);
  color: white;
  box-shadow: 0 16px 34px rgba(16,24,66,.24);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 22px 44px rgba(16,24,66,.28); }
.primary-btn .arrow { font-size: 16px; line-height: 1; }

.secure-note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Login-card error styling — overrides legacy .form-errors red box */
.login-card .form-errors {
  list-style: none;
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(240,93,94,.08);
  border: 1px solid rgba(240,93,94,.25);
  border-radius: 14px;
  color: #a82c2c;
  font-size: 13px;
}
.login-card .form-errors li + li { margin-top: 0.25rem; }

@media (max-width: 1100px) {
  .login-page { grid-template-columns: 1fr; }
  .login-hero, .login-panel { min-height: auto; }
  .brand-stack-float { opacity: .32; right: 20px; top: 260px; }
  .hero-badges { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .login-page { padding: 12px; }
  .login-title { font-size: 48px; }
  .kicker { margin-top: 40px; }
}

/* ─── Landing: hero band, action grid, dashboard, live stack ──── */

.hero-band {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 22px;
}
.hero-copy {
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 92% 4%, rgba(255,138,42,.2), transparent 28%),
    radial-gradient(circle at 2% 100%, rgba(56,88,255,.15), transparent 32%),
    rgba(255,255,255,.64);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: var(--soft-shadow);
  padding: 34px;
}
.hero-copy .kicker { margin: 0 0 12px; }
.hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.2vw, 66px);
  line-height: .94;
  letter-spacing: -.055em;
  color: var(--midnight);
  text-transform: uppercase;
}
.hero-copy p {
  max-width: 720px;
  color: #55607a;
  font-size: 16px;
  line-height: 1.58;
  margin: 18px 0 0;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}

/* Quick panel — dark navy with grid pattern and orange/cyan washes */
.quick-panel {
  border-radius: var(--radius-xl);
  color: white;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 18%, rgba(51,182,255,.23), transparent 28%),
    radial-gradient(circle at 88% 90%, rgba(255,138,42,.22), transparent 30%),
    linear-gradient(145deg, #0d1438, #17205a 70%, #1c286b);
  box-shadow: 0 30px 70px rgba(16,24,66,.26);
  position: relative;
  overflow: hidden;
}
.quick-panel::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent);
}
.quick-panel > * { position: relative; z-index: 1; }
.quick-panel h2 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; color: white; }
.quick-panel p { color: rgba(255,255,255,.72); line-height: 1.55; margin: 0; }
.pipeline-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.pipeline-steps span {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
  padding: 9px 8px;
}

/* Generic card */
.card {
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.66);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
  margin-bottom: 22px;
}
.card-pad { padding: 24px; }
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.card-header h2 { margin: 0; color: var(--midnight); letter-spacing: -.03em; font-size: 1.3rem; }
.card-header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.ghost-btn {
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid var(--cx-line);
  font: inherit;
  font-weight: 850;
  background: transparent;
  color: var(--midnight);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ghost-btn:hover { background: rgba(255,138,42,.08); border-color: rgba(255,138,42,.3); }

.secondary-btn {
  border-radius: 999px;
  padding: 11px 18px;
  border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.76);
  color: var(--midnight);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.secondary-btn:hover { transform: translateY(-1px); box-shadow: var(--soft-shadow); }

/* Action cards grid */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.action-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.62);
  border-radius: 22px;
  padding: 20px;
  min-height: 170px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.action-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56,88,255,.3);
  box-shadow: 0 20px 40px rgba(16,24,66,.12);
}
.action-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  opacity: .8;
}
.action-icon {
  width: 42px; height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--midnight);
  background: linear-gradient(135deg, rgba(56,88,255,.14), rgba(255,138,42,.14));
  margin-bottom: 18px;
  font-size: 18px;
}
.action-card h3 { margin: 0 0 8px; color: var(--midnight); letter-spacing: -.02em; font-size: 1.05rem; }
.action-card p { color: var(--muted); line-height: 1.5; font-size: 13px; margin: 0 0 16px; }
.action-card .link { color: var(--midnight); font-weight: 900; font-size: 13px; }

/* Placeholder variant — feature not shipped yet, non-clickable. Slightly
   muted so the eye doesn't try to engage with it; "Coming soon" badge
   in the corner removes any ambiguity. */
.action-card--placeholder {
  position: relative;
  cursor: default;
  opacity: .72;
  background: rgba(255,255,255,.5);
  border-style: dashed;
}
.action-card--placeholder:hover {
  transform: none;
  border-color: var(--cx-line);
  box-shadow: none;
}
.action-card--placeholder::before {
  background: linear-gradient(90deg, #c4c8d4, #9aa0ad);
  opacity: .6;
}
.action-card--placeholder .action-icon {
  background: linear-gradient(135deg, rgba(154,160,173,.18), rgba(154,160,173,.08));
  color: var(--muted);
}
.action-card__coming-soon {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,138,42,.12);
  color: #8a3a08;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid rgba(255,138,42,.3);
}
.link--muted { color: var(--muted) !important; font-style: italic; }

/* Dashboard grid: architecture + side column */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}

/* Architecture panel (dark, with grid mask) */
.architecture-panel {
  padding: 24px;
  border-radius: 30px;
  color: white;
  background:
    radial-gradient(circle at 10% 10%, rgba(56,88,255,.24), transparent 28%),
    radial-gradient(circle at 86% 88%, rgba(255,138,42,.22), transparent 34%),
    linear-gradient(145deg, #0d1438, #18225c 68%, #101842);
  box-shadow: 0 30px 80px rgba(16,24,66,.28);
  overflow: hidden;
  position: relative;
}
.architecture-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 36%, black, transparent 78%);
}
.architecture-panel > * { position: relative; z-index: 1; }
.arch-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.arch-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: white;
}
.arch-header p { color: rgba(255,255,255,.72); margin: 8px 0 0; max-width: 640px; font-size: 13px; line-height: 1.5; }
.arch-title-with-icon { display: flex; align-items: center; gap: 12px; }
.product-icon { display: inline-block; width: 32px; height: auto; object-fit: contain; vertical-align: middle; }
.arch-title-icon { filter: drop-shadow(0 8px 18px rgba(51,182,255,.22)); }

/* Live CSS layer stack — skewed parallelograms with per-layer accent */
.architecture-visual-wrap {
  margin-top: 16px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,138,42,.16), transparent 44%),
    rgba(0,0,0,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 24px 54px rgba(0,0,0,.28);
}
.live-wrap {
  background:
    radial-gradient(circle at 62% 60%, rgba(255,138,42,.14), transparent 45%),
    radial-gradient(circle at 42% 32%, rgba(51,182,255,.12), transparent 48%),
    rgba(0,0,0,.08);
}
.live-stack {
  position: relative;
  min-height: 480px;
  padding: 34px 26px 36px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}
.live-stack-glow {
  position: absolute;
  inset: 8% 5%;
  background:
    radial-gradient(circle at 62% 70%, rgba(255,138,42,.2), transparent 40%),
    radial-gradient(circle at 54% 28%, rgba(56,88,255,.2), transparent 42%);
  filter: blur(18px);
  pointer-events: none;
}
.live-layer {
  position: relative;
  z-index: 1;
  width: min(760px, 92%);
  min-height: 56px;
  margin: -1px auto 0;
  border-radius: 18px;
  transform: skewX(-10deg);
  display: grid;
  grid-template-columns: 270px 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 12px 32px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.25);
  color: #fff;
  overflow: hidden;
}
.live-layer > * { transform: skewX(10deg); }
.live-layer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.08), transparent 48%, rgba(255,255,255,.16));
  pointer-events: none;
}
.live-layer.l8 { background: linear-gradient(100deg, rgba(116,92,255,.42), rgba(116,92,255,.72)); }
.live-layer.l7 { background: linear-gradient(100deg, rgba(56,88,255,.42),  rgba(0,118,255,.66)); }
.live-layer.l6 { background: linear-gradient(100deg, rgba(0,118,255,.38),  rgba(0,118,255,.6)); }
.live-layer.l5 { background: linear-gradient(100deg, rgba(0,142,255,.34),  rgba(0,142,255,.56)); }
.live-layer.l4 { background: linear-gradient(100deg, rgba(0,176,255,.3),   rgba(0,118,255,.5)); }
.live-layer.l3 { background: linear-gradient(100deg, rgba(110,150,205,.34),rgba(62,106,170,.48)); }
.live-layer.l2 { background: linear-gradient(100deg, rgba(255,164,66,.42), rgba(255,120,40,.58)); }
.live-layer.l1 {
  background: linear-gradient(100deg, rgba(255,138,42,.62), rgba(255,114,20,.82));
  box-shadow: 0 18px 42px rgba(255,138,42,.28), inset 0 1px 0 rgba(255,255,255,.3);
}
.live-layer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -.015em;
}
.layer-badge {
  width: 44px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(7,12,37,.72);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 950;
}
.vendor-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.vendor-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

/* Side column: engine + signals */
.side-column { display: grid; gap: 22px; }
.engine-card .provider-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 4px 0 12px;
}
.provider-card.light {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--cx-line);
  color: var(--cx-ink);
}
.provider-card.light b { display: block; margin-bottom: 6px; color: var(--midnight); }
.provider-card.light span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.note {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(56,88,255,.08);
  color: #425078;
  font-size: 13px;
  line-height: 1.5;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.stat {
  padding: 17px;
  border-radius: 19px;
  background: rgba(255,255,255,.58);
  border: 1px solid var(--cx-line);
}
.stat strong { display: block; font-size: 24px; color: var(--midnight); letter-spacing: -.03em; }
.stat span { color: var(--muted); font-size: 12px; }

/* Runs table */
.runs-table-card { margin-bottom: 22px; }
.runs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.runs-table th {
  text-align: left;
  color: #53607d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cx-line);
  font-weight: 950;
}
.runs-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(16,24,66,.08);
  color: #34405f;
}
.runs-table tr:hover td { background: rgba(56,88,255,.035); }
.runs-table td b { color: var(--midnight); }
.runs-table .link-button + .link-button { margin-left: 6px; }

.mode-pill {
  display: inline-flex;
  border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.7);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 850;
  font-size: 11px;
  color: var(--midnight);
}
.status {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(18,185,129,.1);
  color: #087a55;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}
.status--partial { background: rgba(255,193,7,.12); color: #8a5b00; }

.muted-copy { color: var(--muted); line-height: 1.55; font-size: 13px; }

@media (max-width: 1300px) {
  .actions-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .architecture-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-band { grid-template-columns: 1fr; }
  .actions-grid { grid-template-columns: 1fr; }
  .stat-grid, .provider-row { grid-template-columns: 1fr; }
  .pipeline-steps { grid-template-columns: 1fr 1fr; }
  .runs-table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 760px) {
  .live-layer { width: 96%; grid-template-columns: 1fr; gap: 4px; padding: 10px 16px; }
  .vendor-row { justify-content: flex-start; }
}

/* ─── Page hero + workflow stepper (used by recommend / history / admin) ── */
.page-hero {
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(110deg, rgba(255,255,255,.82), rgba(255,255,255,.54)),
    radial-gradient(circle at 90% 0%, rgba(255,138,42,.14), transparent 34%),
    radial-gradient(circle at 10% 100%, rgba(56,88,255,.12), transparent 36%);
  box-shadow: var(--soft-shadow);
  padding: 34px;
  margin-bottom: 22px;
}
.page-hero .kicker { margin: 0 0 12px; }
.page-hero h1 {
  margin: 0;
  max-width: 960px;
  color: var(--midnight);
  font-family: var(--font-display);
  font-size: clamp(40px, 4.8vw, 70px);
  line-height: .93;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.page-hero p {
  max-width: 760px;
  margin: 14px 0 0;
  color: #4f5876;
  font-size: 17px;
  line-height: 1.55;
}
.page-hero.compact-hero { padding: 26px 32px; margin-bottom: 18px; }
.page-hero.compact-hero h1 {
  max-width: 880px;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: .98;
  letter-spacing: -.045em;
}
.page-hero.compact-hero p { max-width: 700px; font-size: 15px; margin-top: 12px; }

.workflow-stepper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 22px;
}
.workflow-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--cx-line);
  background: rgba(255,255,255,.56);
  color: var(--muted);
  box-shadow: 0 8px 22px rgba(16,24,66,.05);
}
.workflow-step span {
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(56,88,255,.09);
  color: var(--blue);
  font-weight: 900;
}
.workflow-step b { font-size: 12px; color: var(--midnight); }
.workflow-step.active {
  border-color: rgba(255,138,42,.45);
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,138,42,.08));
}
.workflow-step.active span {
  background: linear-gradient(135deg, var(--orange), var(--blue));
  color: #fff;
}
.workflow-step.done span { background: #dff8ed; color: #087a55; }

@media (max-width: 1100px) {
  .workflow-stepper { grid-template-columns: 1fr; }
}

/* Recommend mount: keep flush with the hero+stepper above */
.recommend-mount { display: block; }

/* Update recommend-actions to use the new primary button language */
.recommend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

/* Modernize the form submit button (overrides legacy .btn-primary inside the
   recommend form so it picks up the gradient/pill aesthetic) */
.recommend-actions .btn-primary,
.recommend-form .btn-primary {
  background: linear-gradient(110deg, var(--midnight) 0%, #27347c 42%, var(--orange) 140%);
  color: white;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 850;
  font-size: 15px;
  box-shadow: 0 16px 34px rgba(16,24,66,.22);
}
.recommend-actions .btn-primary:hover,
.recommend-form .btn-primary:hover {
  background: linear-gradient(110deg, #0d1538 0%, #1f2b6e 42%, var(--orange) 140%);
  transform: translateY(-1px);
}

/* Streaming spinner card — restyled to glass-morphism */
.recommend-spinner-card {
  background: rgba(255,255,255,.66);
  border: 1px solid var(--cx-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--soft-shadow);
}

/* Error banner inside the recommend form */
.recommend-error-banner {
  background: rgba(240,93,94,.08);
  border: 1px solid rgba(240,93,94,.25);
  border-radius: 14px;
  color: #a82c2c;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ─── Filter form (history + admin lists) ─────────────────────────── */
.admin-filter-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 18px;
  margin: 0 0 16px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.66);
  border: 1px solid var(--cx-line);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}
.admin-filter-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 140px;
  min-width: 130px;
}
.admin-filter-form label > span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  color: var(--midnight);
}
.admin-filter-form input,
.admin-filter-form select {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--cx-line);
  border-radius: 12px;
  background: rgba(255,255,255,.8);
  color: var(--cx-ink);
  outline: none;
}
.admin-filter-form input:focus,
.admin-filter-form select:focus {
  border-color: rgba(56,88,255,.45);
  box-shadow: 0 0 0 4px rgba(56,88,255,.08);
}
.admin-filter-form .btn-primary,
.admin-filter-form .btn-sm {
  align-self: end;
  padding: 11px 18px;
  border-radius: 999px;
  background: linear-gradient(110deg, var(--midnight) 0%, #27347c 42%, var(--orange) 140%);
  color: white;
  font-weight: 850;
  font-size: 13px;
  border: 0;
  cursor: pointer;
  height: 44px;
}
.admin-filter-form .btn-primary:hover { transform: translateY(-1px); }
.admin-filter-form .link-button { align-self: center; }

/* Pagination */
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.admin-pagination .link-button { font-weight: 900; }